/* =========================================================
   RODEUR — feuille de style
   Light éditorial · structure yoyoyo · compositions dulcedo
   ========================================================= */

:root{
  --bg:        #ffffff;
  --bg-alt:    #f4f3f0;   /* off-white chaud pour sections alternées */
  --ink:       #0a0a0a;
  --ink-soft:  #5c5c5a;
  --muted:     #9a9a96;
  --line:      #e7e6e2;
  --ac:        #2348ff;   /* cobalt — accent ponctuel */
  --ph:        #ecebe7;   /* fond placeholder */
  --ph-2:      #e3e2dd;

  --gut: clamp(20px, 5vw, 90px);   /* gouttière latérale */
  --maxw: 1500px;

  --f-disp: "Space Grotesk", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;

  /* --- Motion (valeurs extraites de dulcedo, cf. MOTION.md) --- */
  --ease:           cubic-bezier(.5,0,0,1);      /* reveal principal */
  --ease-power-out: cubic-bezier(.215,.61,.355,1);/* power2.out */
  --ease-smooth:    cubic-bezier(.38,.005,.215,1);
  --ease-in-out:    cubic-bezier(.4,0,.2,1);
  --dur-fast: .45s; --dur: .55s; --dur-slow: .75s;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
sup{ font-size:.32em; vertical-align:super; }

/* ===================== NAV (pill centrée) ===================== */
.nav{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:120; display:flex; gap:8px; align-items:stretch;
}
.nav__brand,.nav__current,.nav__menuBtn{
  display:flex; align-items:center; gap:9px;
  height:42px; padding:0 16px; border-radius:999px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--line);
  font-family:var(--f-disp); font-weight:600; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
  box-shadow:0 6px 24px rgba(0,0,0,.05); cursor:pointer;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
.nav__brand:hover,.nav__current:hover,.nav__menuBtn:hover{ box-shadow:0 8px 30px rgba(0,0,0,.1); }
.nav__mark{ width:18px; height:18px; }
.nav__current .dot{
  width:8px; height:8px; border-radius:50%; background:var(--ac);
  box-shadow:0 0 0 0 rgba(35,72,255,.5); animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(35,72,255,.45)} 70%{box-shadow:0 0 0 7px rgba(35,72,255,0)} 100%{box-shadow:0 0 0 0 rgba(35,72,255,0)} }
.nav__menuBtn{ padding:0; width:42px; justify-content:center; flex-direction:column; gap:4px; }
.nav__menuBtn span{ width:16px; height:1.6px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav.menu-open .nav__menuBtn span:first-child{ transform:translateY(2.8px) rotate(45deg); }
.nav.menu-open .nav__menuBtn span:last-child{ transform:translateY(-2.8px) rotate(-45deg); }

/* nav cachée pendant l'intro, révélée au scroll */
.nav{ opacity:0; transform:translateX(-50%) translateY(-12px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease); }
.nav.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }

/* ===================== SOMMAIRE OVERLAY ===================== */
.toc{
  position:fixed; inset:0; z-index:110; background:rgba(244,243,240,.96);
  backdrop-filter:blur(20px); display:flex; flex-direction:column;
  justify-content:center; padding:0 var(--gut);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.toc.open{ opacity:1; pointer-events:auto; }
.toc__list{ list-style:none; margin:0; padding:0; }
.toc__list li{ overflow:hidden; }
.toc__list a{
  display:flex; align-items:baseline; gap:18px;
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(28px,5.5vw,68px); line-height:1.18; letter-spacing:-.01em;
  color:var(--ink); padding:2px 0;
  transform:translateY(110%); transition:transform .6s var(--ease), color .25s;
}
.toc.open .toc__list a{ transform:translateY(0); }
.toc__list li:nth-child(1) a{transition-delay:.04s} .toc__list li:nth-child(2) a{transition-delay:.08s}
.toc__list li:nth-child(3) a{transition-delay:.12s} .toc__list li:nth-child(4) a{transition-delay:.16s}
.toc__list li:nth-child(5) a{transition-delay:.20s} .toc__list li:nth-child(6) a{transition-delay:.24s}
.toc__list li:nth-child(7) a{transition-delay:.28s} .toc__list li:nth-child(8) a{transition-delay:.32s}
.toc__list li:nth-child(9) a{transition-delay:.36s} .toc__list li:nth-child(10) a{transition-delay:.40s}
.toc__list a:hover{ color:var(--ac); }
.toc__list a[data-n]::before{
  content:attr(data-n); font-size:.34em; color:var(--muted);
  font-weight:500; letter-spacing:.1em;
}
.toc__foot{ margin-top:5vh; font-size:13px; letter-spacing:.05em; color:var(--ink-soft);
  text-transform:uppercase; font-family:var(--f-disp); }

/* ===================== SECTIONS génériques ===================== */
.section{ position:relative; padding:clamp(100px,15vh,200px) var(--gut); }
/* hero pleine largeur dans Matières, juste au-dessus du carrousel */
.mat-hero{ width:auto; margin:0 calc(var(--gut) * -1) clamp(30px,5vw,72px); }
.mat-hero img{ display:block; width:100%; height:auto; }
.section.alt{ background:var(--bg-alt); }
.sec__head{ max-width:min(880px,100%); margin:0 0 clamp(40px,6vh,80px); }
.sec__index{
  display:inline-block; font-family:var(--f-disp); font-weight:600;
  font-size:13px; letter-spacing:.18em; color:var(--ac); margin-bottom:18px;
}
.sec__title{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(34px,6vw,86px); line-height:.98; letter-spacing:-.02em;
  margin:0 0 22px;
}
.sec__lead{
  font-size:clamp(13px,1.05vw,15.5px); line-height:1.55; color:var(--ink-soft);
  max-width:60ch; margin:0;
}

/* micro-label vertical à la dulcedo */
.section::before{
  content:attr(data-label); position:absolute; left:max(10px,calc(var(--gut) - 46px));
  top:clamp(100px,15vh,200px);
  writing-mode:vertical-rl; font-family:var(--f-disp); font-size:11px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
}
@media (max-width:760px){ .section::before{ display:none; } }

/* ===================== PLACEHOLDER (.ph) ===================== */
.ph{
  position:relative; margin:0; aspect-ratio:var(--ar,4/3);
  background:
    linear-gradient(135deg, var(--ph) 0%, var(--ph-2) 100%);
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.ph::after{           /* label visible tant que l'image manque */
  content:attr(data-label);
  font-family:var(--f-disp); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); text-align:center; padding:0 14px;
}
.ph::before{          /* petit "+" repère */
  content:""; position:absolute; width:20px; height:20px;
  top:14px; left:14px; opacity:.4;
  background:
    linear-gradient(var(--muted),var(--muted)) center/100% 1.4px no-repeat,
    linear-gradient(var(--muted),var(--muted)) center/1.4px 100% no-repeat;
}
.ph img,.ph video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.ph img,.ph video{ z-index:2; }    /* l'image recouvre le label quand présente */

/* tag "Favori" (ex "FAVORITE" yoyoyo) */
.fav{
  position:absolute; z-index:3; top:12px; right:12px;
  font-family:var(--f-disp); font-weight:600; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; background:var(--ac);
  padding:5px 9px; border-radius:999px;
}

/* bouton play vidéo */
.play{
  position:absolute; z-index:4; inset:0; margin:auto; width:64px; height:64px;
  border-radius:50%; border:none; background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px); cursor:pointer; display:grid; place-items:center;
  transition:transform .3s var(--ease), background .3s;
}
.play:hover{ transform:scale(1.08); background:#fff; }
.play span{ width:0;height:0; border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--ink); margin-left:3px; }

/* =========================================================
   HERO / INTRO
   ========================================================= */
.hero{
  min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding-top:90px; overflow:hidden;
}
.hero__inner{ position:relative; z-index:5; }
.hero__eyebrow{
  font-family:var(--f-disp); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px;
  opacity:0; transform:translateY(10px); animation:fadeUp .8s var(--ease) .1s forwards;
}
.hero__eyebrow span{ color:var(--ink); }
.hero__word{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(64px,18vw,300px); line-height:.86; letter-spacing:-.03em;
  margin:0; display:flex; align-items:flex-start; justify-content:center;
  transform:translate(calc(var(--mx,0) * -7px), calc(var(--my,0) * -7px));
  transition:transform .6s var(--ease-smooth);
}
.hero__word span{
  display:inline-block; opacity:0; transform:translateY(72%) scale(.88); filter:blur(7px);
  animation:letterIn 1s var(--ease-power-out) forwards;
}
.hero__word span:nth-child(1){animation-delay:.20s} .hero__word span:nth-child(2){animation-delay:.27s}
.hero__word span:nth-child(3){animation-delay:.34s} .hero__word span:nth-child(4){animation-delay:.41s}
.hero__word span:nth-child(5){animation-delay:.48s} .hero__word span:nth-child(6){animation-delay:.55s}
.hero__word sup{ color:var(--ac); opacity:0; animation:fadeUp .6s var(--ease) .7s forwards; }
@keyframes letterIn{
  0%{ opacity:0; transform:translateY(72%) scale(.88); filter:blur(7px); }
  60%{ opacity:1; filter:blur(0); }
  100%{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@keyframes fadeUp{ to{opacity:1; transform:translateY(0);} }
.hero__sub{
  max-width:48ch; margin:26px auto 0; font-size:clamp(15px,1.4vw,19px);
  color:var(--ink-soft); line-height:1.5;
  opacity:0; transform:translateY(12px); animation:fadeUp .9s var(--ease) .8s forwards;
}
.hero__explore{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  font-family:var(--f-disp); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; align-items:center; gap:8px;
  opacity:0; animation:fadeUp 1s var(--ease) 1.1s forwards;
}
.hero__explore span{ display:inline-block; animation:bob 1.8s var(--ease) infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* =========================================================
   INTRO « univers » : vignettes qui jaillissent + flottent +
   parallaxe souris (profondeur) + traversée au scroll
   ========================================================= */
@property --fy{ syntax:"<length>"; inherits:false; initial-value:0px; }

/* le cluster entier : on le traverse au scroll (zoom + fondu) */
.hero__pops{ position:absolute; inset:0; z-index:1; pointer-events:none; transform-origin:50% 45%;
  opacity:calc(1 - var(--scrollP,0));
  transform:scale(calc(1 + var(--scrollP,0) * 0.45)); }

.hero__pops .pop{ position:absolute; margin:0; width:clamp(96px,11vw,182px); aspect-ratio:var(--ar,3/4);
  opacity:0; will-change:transform,opacity; }
.hero.pops-in .pop{ animation:popIn 1.1s var(--ease-power-out) forwards; }
@keyframes popIn{
  0%{   opacity:0; transform:scale(.1)  translateY(24px); filter:blur(14px); }
  55%{  opacity:1; filter:blur(0); }
  78%{  transform:scale(1.06) translateY(0); }
  100%{ opacity:1; transform:scale(1) translateY(0); } }

/* couche parallaxe souris (suit le curseur selon la profondeur --d) */
.pop__par{ display:block; width:100%; height:100%;
  transform:translate(calc(var(--mx,0) * var(--d,20) * 1px), calc(var(--my,0) * var(--d,20) * 1px));
  transition:transform .6s var(--ease-smooth); }

/* la carte : visuel + rotation + flottement continu */
.pop__card{ display:grid; place-items:center; width:100%; height:100%;
  background:linear-gradient(135deg,var(--ph),var(--ph-2));
  border:1px solid var(--line); border-radius:6px; box-shadow:0 18px 50px rgba(0,0,0,.10);
  transform:rotate(var(--r,0deg)) translateY(var(--fy,0px));
  animation:floaty var(--ft,6s) ease-in-out var(--fd,0s) infinite; }
.pop__card::after{ content:attr(data-label); font-family:var(--f-disp); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
@keyframes floaty{ 0%{--fy:0px} 50%{--fy:-12px} 100%{--fy:0px} }

/* placement dispersé autour du centre + timings de flottement variés */
.pop:nth-child(1){ top:14%;  left:7%;  --r:-7deg; --ft:6.5s; --fd:.0s; animation-delay:.45s; }
.pop:nth-child(2){ top:60%;  left:13%; --r:5deg;  --ft:7.5s; --fd:.6s; animation-delay:.60s; }
.pop:nth-child(3){ top:11%;  right:10%;--r:6deg;  --ft:6.0s; --fd:.3s; animation-delay:.75s; }
.pop:nth-child(4){ bottom:13%;right:8%; --r:-5deg; --ft:8.0s; --fd:.9s; animation-delay:.90s; }
.pop:nth-child(5){ top:39%;  left:2%;  --r:8deg;  --ft:7.0s; --fd:.4s; animation-delay:1.05s; }
.pop:nth-child(6){ bottom:18%;left:45%; --r:-6deg; --ft:6.8s; --fd:1.1s;animation-delay:1.2s; }
@media (max-width:760px){ .pop:nth-child(5),.pop:nth-child(6){ display:none; } }

/* lueur d'ambiance derrière le wordmark */
.hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(46% 42% at 50% 44%, rgba(35,72,255,.07), transparent 70%);
  opacity:0; animation:fadeIn 1.8s var(--ease) .3s forwards; }
@keyframes fadeIn{ to{ opacity:1; } }

/* =========================================================
   REVEALS au scroll — système repris de dulcedo (cf. MOTION.md)
   ========================================================= */

/* (a) reveal générique : montée + fondu (textes courts, blocs) */
.reveal{ opacity:0; transform:translateY(32px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay:calc(var(--i,0) * 60ms); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* (b) tuiles image : reveal en CLIP + image qui « respire » (scale 1.12 -> 1) */
.ph.reveal{ opacity:1; transform:none;
  clip-path:inset(0 0 100% 0 round 4px);
  transition:clip-path var(--dur-slow) var(--ease);
  transition-delay:calc(var(--i,0) * 70ms); }
.ph.reveal.in{ clip-path:inset(0 0 0 0 round 4px); }
.ph img,.ph video{ --sc:1; transform:scale(var(--sc));
  transition:transform 1.2s var(--ease-smooth); }
.ph.reveal img,.ph.reveal video{ --sc:1.12; }
.ph.reveal.in img,.ph.reveal.in video{ --sc:1; }
/* scatter : la rotation reste portée par .rot-*, le clip gère le reveal */
.scatter .ph.reveal{ transition:clip-path var(--dur-slow) var(--ease); }

/* (c) parallaxe au scroll (grands visuels) */
.ph[data-parallax]{ transform:translate3d(0,var(--py,0px),0); will-change:transform; }

/* (d) reveal texte ligne par ligne (titres, manifeste) */
.line{ display:block; overflow:hidden; }
.line__inner{ display:block; transform:translateY(118%);
  transition:transform var(--dur) var(--ease);
  transition-delay:calc(var(--ld,0) * 50ms); will-change:transform; }
.in > .line .line__inner,
.line.in .line__inner{ transform:translateY(0); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal,.ph.reveal{ opacity:1; transform:none; clip-path:none; }
  .ph img,.ph video{ --sc:1; }
  .line__inner{ transform:none; }
  .hero__word span,.hero__eyebrow,.hero__sub,.hero__explore,.hero__word sup{opacity:1; transform:none; filter:none;}
  .hero__word{ transform:none; }
  .hero__pops{ opacity:1; transform:none; }
  .hero__pops .pop{ opacity:1; }
  .pop__par,.pop__card{ transform:none; }
}

/* =========================================================
   01 · CROQUIS — disposition éparse, légèrement tournée
   ========================================================= */
.scatter{
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,2vw,34px);
  align-items:end;
}
.scatter .ph{ grid-column:span 4; }
.scatter .ph:nth-child(1){ grid-column:1/4;  margin-top:40px; }
.scatter .ph:nth-child(2){ grid-column:5/9; }
.scatter .ph:nth-child(3){ grid-column:10/13; margin-top:70px; }
.scatter .ph:nth-child(4){ grid-column:2/6;  margin-top:24px; }
.scatter .ph:nth-child(5){ grid-column:7/12; }
.rot-a{ transform:rotate(-1.4deg); } .rot-b{ transform:rotate(1.1deg); } .rot-c{ transform:rotate(2.2deg); }
.scatter .reveal.in{ transform:translateY(0) rotate(var(--rot,0deg)); }
.rot-a.reveal{ --rot:-1.4deg; } .rot-b.reveal{ --rot:1.1deg; } .rot-c.reveal{ --rot:2.2deg; }
@media (max-width:760px){
  .scatter{ display:flex; flex-direction:column; }
  .scatter .ph{ margin-top:0 !important; transform:none !important; }
}

.prompt{
  margin-top:clamp(40px,6vh,80px); max-width:640px;
  border-left:2px solid var(--ac); padding:6px 0 6px 22px;
}
.prompt__tag{ font-family:var(--f-disp); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ac); }
.prompt p{ font-family:var(--f-disp); font-size:clamp(18px,2vw,26px); line-height:1.3;
  margin:8px 0 0; color:var(--ink); }

/* =========================================================
   02 · FORME — rail horizontal
   ========================================================= */
.rail{ margin:0 calc(var(--gut) * -1); padding:0 var(--gut);
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; }
.rail::-webkit-scrollbar{ display:none; }
.rail__track{ display:flex; gap:clamp(16px,2vw,30px); width:max-content; padding-bottom:6px; }
.rail .card{ width:clamp(240px,26vw,360px); scroll-snap-align:start; flex:0 0 auto; }
.rail__hint{ margin:18px var(--gut) 0 0; text-align:right; font-family:var(--f-disp);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* =========================================================
   03 · MATIÈRES — rangée de hautes vignettes
   ========================================================= */
.swatches{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,22px); }
.swatch{ transition:transform .5s var(--ease); }
.swatch:hover{ transform:translateY(-8px); }
@media (max-width:860px){ .swatches{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   04 · PRODUIT — grande photo + duo
   ========================================================= */
.hero-shot{ width:100%; }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,28px);
  margin-top:clamp(14px,2vw,28px); }
@media (max-width:760px){ .duo{ grid-template-columns:1fr; } }

/* =========================================================
   05 · ACTIVATIONS — mosaïque asymétrique
   ========================================================= */
.mosaic{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,1.6vw,26px); }
.mosaic .m-big{ grid-column:1/9; }
.mosaic .m-tall{ grid-column:9/13; grid-row:1/3; }
.mosaic .ph:nth-child(3){ grid-column:1/5; }
.mosaic .ph:nth-child(4){ grid-column:5/9; }
@media (max-width:860px){
  .mosaic{ grid-template-columns:1fr 1fr; }
  .mosaic .m-big{ grid-column:1/3; } .mosaic .m-tall{ grid-column:auto; grid-row:auto; }
  .mosaic .ph:nth-child(3),.mosaic .ph:nth-child(4){ grid-column:auto; }
}

/* --- Stands & activations : composition superposée (street large, salon descendu/débordant), switch NET --- */
.sec--activations{ padding-top:clamp(56px,8vh,110px); padding-bottom:clamp(200px,26vh,320px); }  /* gros bas : salon déborde + espace avant la section suivante */
.sec--activations .sec__title{ font-size:clamp(28px,4.2vw,54px); }
.stand-comp{ position:relative; }                         /* hauteur définie par le street (en flux) */
.stand-street{ width:74%; }                               /* gros, large, presque jusqu'au 2D */
.stand-street .slider__stage{ height:auto; aspect-ratio:4/3; }
.stand-2d{ position:absolute; top:0; right:0; width:23%; z-index:2; }   /* petit portrait, coin haut-droite */
.stand-2d .slider{ width:100%; }
.stand-2d .slider__stage{ height:auto; aspect-ratio:4/5; }
.stand-salon{ position:absolute; right:0; top:54%; width:46%; z-index:3; }  /* descendu (déborde en bas, chevauche moins le street) */
.stand-salon .slider{ width:100%; }
.stand-salon .slider__stage{ height:auto; aspect-ratio:4/3; box-shadow:0 22px 52px rgba(0,0,0,.24); }
.stand-comp .slider{ position:relative; width:100%; }
/* switch NET : jamais de fondu */
.slider--snap .slider__stage .s-slide{ transition:none; }
/* miniatures en OVERLAY (petites, sans flèches) */
.slider--thumbs-tl .slider__bar,.slider--thumbs-br .slider__bar{ position:absolute; z-index:6; margin:0; width:auto;
  padding:5px; gap:5px; border-radius:10px; background:rgba(255,255,255,.74); backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,.16); }
.slider--thumbs-tl .slider__bar{ top:8px; left:8px; max-width:48%; }
.slider--thumbs-br .slider__bar{ right:8px; bottom:8px; max-width:64%; }
.slider--thumbs-tl .slider__arrow,.slider--thumbs-br .slider__arrow{ display:none; }
.slider--thumbs-tl .slider__thumb,.slider--thumbs-br .slider__thumb{ width:30px; height:30px; border-radius:5px; }
.slider--nobar .slider__bar{ display:none; }            /* 2D : pas de miniatures */
/* étiquettes de type en coin (hors zone des miniatures) */
.act-tag{ position:absolute; z-index:6; top:8px; left:8px;
  font-family:var(--f-disp); font-weight:600; font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink); background:rgba(255,255,255,.84); backdrop-filter:blur(6px);
  padding:5px 9px; border-radius:999px; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.stand-comp .act-tag{ top:8px; left:8px; }
.stand-comp .act-tag.tag-tr{ left:auto; right:8px; }
@media (max-width:760px){
  .stand-comp{ display:flex; flex-direction:column; gap:clamp(14px,3vw,28px); }
  .stand-street,.stand-2d,.stand-salon{ position:static; width:100%; }
  .stand-2d{ max-width:62%; }
  .stand-salon{ max-width:84%; align-self:flex-end; }
  .sec--activations{ padding-bottom:clamp(72px,10vh,140px); }
}

/* =========================================================
   06 · EN MAIN — split studio / réel
   ========================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2.4vw,40px); align-items:start; }
.split .ph:last-child{ margin-top:clamp(20px,6vw,90px); }
@media (max-width:760px){ .split{ grid-template-columns:1fr; } .split .ph:last-child{ margin-top:0; } }

/* =========================================================
   07 · UGC — grille type instagram, légères inclinaisons
   ========================================================= */
.ugc-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(14px,1.8vw,30px); align-items:center; }
.polaroid{ background:#fff; border:1px solid var(--line); border-radius:3px;
  padding:10px 10px 34px; box-shadow:0 14px 40px rgba(0,0,0,.07);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.polaroid::after{ bottom:12px; top:auto; }   /* label sous la photo */
.polaroid img{ position:relative; inset:auto; border-radius:2px; }
.polaroid{ aspect-ratio:auto; }
.polaroid .ph, .polaroid img{ aspect-ratio:var(--ar); }
.tilt-a{ transform:rotate(-2.5deg); } .tilt-b{ transform:rotate(1.6deg); } .tilt-c{ transform:rotate(-1deg); }
.polaroid:hover{ transform:rotate(0) scale(1.03); box-shadow:0 22px 60px rgba(0,0,0,.13); z-index:5; }
@media (max-width:960px){ .ugc-grid{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   08 · VIDÉOS
   ========================================================= */
.video-main{ width:100%; }
.video-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,28px);
  margin-top:clamp(14px,2vw,28px); max-width:760px; }
@media (max-width:760px){ .video-row{ grid-template-columns:1fr 1fr; } }

/* =========================================================
   09 · MANIFESTE / footer
   ========================================================= */
.manifeste{ text-align:center; padding-top:clamp(120px,18vh,260px); }
.manifeste .sec__index{ display:block; }
.manifeste__text{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(30px,6.5vw,96px); line-height:1.02; letter-spacing:-.02em;
  margin:14px auto clamp(40px,7vh,80px); max-width:18ch;
}
.manifeste__text em{ font-style:normal; color:var(--ac); }
.manifeste__cta{ font-family:var(--f-disp); font-size:14px; letter-spacing:.08em;
  text-transform:uppercase; border:1px solid var(--ink); padding:14px 26px; border-radius:999px;
  display:inline-flex; gap:10px; transition:background .3s var(--ease), color .3s var(--ease); }
.manifeste__cta:hover{ background:var(--ink); color:#fff; }
.foot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:clamp(80px,14vh,160px); padding-top:26px; border-top:1px solid var(--line);
  font-family:var(--f-disp); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); }


/* =========================================================
   COMPOSANTS ANIMÉS (v2) — voir beaucoup d'images sans
   allonger la page : cluster, diaporama auto, marquee.
   ========================================================= */

/* --- Diaporama auto (image suivante toutes les 2-3 s) --- */
.slideshow::after,.slideshow::before{ content:none !important; }
.slideshow .slide{
  position:absolute; inset:0; display:grid; place-items:center; opacity:0;
  background:linear-gradient(135deg,var(--ph),var(--ph-2));
  transition:opacity .9s var(--ease-smooth);
}
.slideshow .slide.is-active{ opacity:1; }
.slideshow .slide::after{
  content:attr(data-label); font-family:var(--f-disp); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  text-align:center; padding:0 12px;
}
.slideshow .slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* petit compteur de défilement */
.slideshow .dots{ position:absolute; z-index:5; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; }
.slideshow .dots i{ width:5px; height:5px; border-radius:50%; background:#fff; opacity:.45;
  box-shadow:0 0 0 1px rgba(0,0,0,.15); transition:opacity .3s, transform .3s; }
.slideshow .dots i.on{ opacity:1; transform:scale(1.4); }

/* --- Cluster forme : croquis au centre, itérations autour --- */
.forme-cluster{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,26px);
  align-items:start; max-width:1120px; margin:0 auto;
}
.forme-cluster .fc-slot:nth-child(2){ margin-top:clamp(20px,4vw,56px); }
.forme-cluster .fc-slot:nth-child(8){ margin-top:clamp(20px,4vw,56px); }
.fc-sketch{ background:linear-gradient(135deg,#eef1ff,#e2e8ff); align-self:center; }
.fc-sketch::after{ color:var(--ac) !important; font-weight:600; }
@media (max-width:760px){
  .forme-cluster{ grid-template-columns:1fr 1fr; }
  .forme-cluster .fc-slot{ margin-top:0 !important; }
  .fc-sketch{ grid-column:1 / -1; }
}

/* --- Défilement horizontal lié au scroll (matières, UGC) --- */
.hscroll__viewport{ overflow:hidden; margin:0 calc(var(--gut) * -1); padding:14px var(--gut);
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.hscroll__track{ display:flex; gap:clamp(14px,1.6vw,28px); width:max-content;
  transform:translate3d(var(--tx,0px),0,0); will-change:transform; }
.hscroll__track .ph{ flex:0 0 auto; width:clamp(168px,17vw,250px); }
.hscroll__track .polaroid{ width:clamp(190px,18vw,264px); }

/* Matières : mini-viewer — variantes en miniatures alignées (overlay), clic = remplace l'image centrale */
.varviewer::after,.varviewer::before{ content:none !important; }
.varviewer .slide{ position:absolute; inset:0; opacity:0; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--ph),var(--ph-2)); transition:opacity .5s var(--ease-smooth); }
.varviewer .slide.is-active{ opacity:1; }
.varviewer .slide::after{ content:attr(data-label); font-family:var(--f-disp); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:center; padding:0 10px; }
.varviewer .slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mat-vars{ position:absolute; z-index:5; left:50%; bottom:10px; transform:translateX(-50%);
  display:flex; gap:6px; padding:5px; border-radius:999px;
  background:rgba(255,255,255,.7); backdrop-filter:blur(8px); box-shadow:0 4px 14px rgba(0,0,0,.12); }
.mat-v{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; padding:0; cursor:pointer; overflow:hidden;
  position:relative; border:1.5px solid #fff; background:linear-gradient(135deg,var(--ph-2),var(--ph));
  opacity:.7; transition:opacity .25s var(--ease), transform .25s var(--ease); }
.mat-v img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mat-v.is-active{ opacity:1; }
.mat-v.is-active::after{ content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--ac); pointer-events:none; }
/* Matières : carrousel de 5 grands styles, navigable */
.matrail{ position:relative; }
.matrail__track{ display:flex; gap:clamp(16px,2vw,30px); overflow-x:auto;
  scroll-snap-type:x mandatory; scrollbar-width:none; scroll-behavior:smooth;
  padding:6px max(var(--gut), calc(50% - 230px)); margin:0 calc(var(--gut) * -1); }
.matrail__track::-webkit-scrollbar{ display:none; }
.matrail .mat{ flex:0 0 auto; width:clamp(300px,36vw,460px); scroll-snap-align:center; }
.matrail__arrow{ position:absolute; top:42%; z-index:7; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  font-family:var(--f-disp); font-size:22px; line-height:1; cursor:pointer; display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.12); transition:background .25s var(--ease), color .25s var(--ease); }
.matrail__arrow:hover{ background:var(--ink); color:#fff; }
.matrail__prev{ left:6px; } .matrail__next{ right:6px; }
@media (max-width:760px){ .matrail__arrow{ display:none; } }
.mat-style{ position:absolute; z-index:6; top:12px; left:12px; margin:0;
  font-family:var(--f-disp); font-weight:600; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink);
  background:rgba(255,255,255,.82); backdrop-filter:blur(8px);
  padding:6px 12px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.10); }
/* miniatures : une seule ligne, 5 visibles max, bouton suivant */
.mat-vars__strip{ display:flex; gap:6px; overflow:hidden; scroll-behavior:smooth;
  max-width:calc(5 * 30px + 4 * 6px); }
.mat-next{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-family:var(--f-disp); font-size:15px; line-height:1; display:grid; place-items:center; }

/* --- Section ÉPINGLÉE : le scroll fait défiler les écrans, puis repart --- */
.pin{ height:260vh; padding:0; }                 /* hauteur = durée du défilement (moins haut = scrub + rapide) */
.pin::before{ display:none; }                    /* pas de label vertical ici */
.pin-wrap{ position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(12px,2.4vh,30px); padding:clamp(64px,8vh,96px) var(--gut) clamp(24px,4vh,48px); }
.pin-head{ margin:0; max-width:min(680px,100%); }
.pin .sec__index{ margin-bottom:8px; }
.pin .sec__title{ font-size:clamp(26px,3.6vw,46px); margin-bottom:8px; }
.pin .sec__lead{ font-size:13.5px; line-height:1.5; }
.pin-track{ display:flex; gap:clamp(16px,2vw,32px); width:max-content;
  transform:translate3d(var(--tx,0px),0,0); will-change:transform; }
/* tuile = carré qui tient toujours dans le viewport épinglé (titre réservé) */
.pin-track .ph{ flex:0 0 auto; height:min(58vh, calc(100svh - 300px)); width:auto; }
.pin-track .ph img{ position:absolute; inset:0; }
.pin-progress{ height:2px; background:var(--line); border-radius:2px; overflow:hidden;
  max-width:min(680px,100%); }
.pin-progress span{ display:block; height:100%; width:var(--pp,0%); background:var(--ac);
  transition:width .1s linear; }
@media (max-width:760px){
  .pin{ height:auto; }                            /* sur mobile : pas de pin, défilement natif */
  .pin-wrap{ position:static; height:auto; overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; }
  .pin-track{ transform:none !important; }
  .pin-track .ph{ height:auto; width:72vw; scroll-snap-align:center; }
  .pin-track .ph img{ position:absolute; }
}

/* --- Écrans : showcase vertical façon Apple --- */
.showcase{ display:flex; flex-direction:column; gap:clamp(14px,2.2vw,34px); }
.sc-feature{ width:100%; }
.sc-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,26px); }
.sc-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,26px); }
@media (max-width:760px){
  .sc-trio{ grid-template-columns:1fr 1fr; }
  .sc-duo{ grid-template-columns:1fr; }
}

/* --- En main : masonry compacte (ancien, conservé) --- */
.stack2{ columns:3; column-gap:clamp(12px,1.6vw,26px); }
.stack2 .ph{ width:100%; break-inside:avoid; margin:0 0 clamp(12px,1.6vw,26px); }
@media (max-width:760px){ .stack2{ columns:2; } }
@media (max-width:480px){ .stack2{ columns:1; } }

/* --- In hand : mur de colonnes à défilement vertical (parallax, façon « Packaging ») --- */
.handwall{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,30px); align-items:start; }
.handcol{ display:flex; flex-direction:column; gap:clamp(14px,2vw,30px);
  transform:translate3d(0,var(--coly,0),0); will-change:transform; }
.handcol .ph{ margin:0; width:100%; }
.handcol:nth-child(2){ margin-top:clamp(48px,8vw,140px); }   /* colonne centrale décalée pour rythmer le mur */
.handcol:nth-child(3){ margin-top:clamp(18px,3vw,56px); }
@media (max-width:760px){
  .handwall{ grid-template-columns:1fr 1fr; gap:14px; }
  .handcol{ transform:none; }
  .handcol:nth-child(2),.handcol:nth-child(3){ margin-top:0; }
}
@media (max-width:440px){ .handwall{ grid-template-columns:1fr; } }

/* =========================================================
   SLIDER façon yoyoyo : scène + bande de vignettes (compact)
   ========================================================= */
.slider{ width:100%; }
.slider--portrait{ max-width:560px; margin-inline:auto; }
.slider__stage{ position:relative; width:100%; height:min(56vh,540px);
  border:1px solid var(--line); border-radius:5px; overflow:hidden; background:var(--ph); }
.slider__stage .s-slide{ position:absolute; inset:0; margin:0; aspect-ratio:auto;
  opacity:0; transition:opacity .6s var(--ease-smooth); }
.slider__stage .s-slide.is-active{ opacity:1; }
.slider__stage .s-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.slider__bar{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.slider__arrow{ flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer;
  font-family:var(--f-disp); font-size:20px; line-height:1; display:grid; place-items:center;
  transition:background .25s var(--ease), color .25s var(--ease); }
.slider__arrow:hover{ background:var(--ink); color:#fff; }
.slider__thumbs{ display:flex; gap:8px; overflow-x:auto; flex:1; scrollbar-width:none;
  scroll-behavior:smooth; padding:2px; }
.slider__thumbs::-webkit-scrollbar{ display:none; }
.slider__thumb{ flex:0 0 auto; width:62px; height:62px; border-radius:4px; padding:0;
  position:relative; overflow:hidden; cursor:pointer; opacity:.5;
  border:1px solid var(--line); background:linear-gradient(135deg,var(--ph),var(--ph-2));
  font-family:var(--f-disp); font-size:12px; color:var(--muted);
  transition:opacity .3s var(--ease), box-shadow .3s var(--ease); }
.slider__thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.slider__thumb.is-active{ opacity:1; box-shadow:0 0 0 2px var(--ac); }

/* --- Forme : cercle d'itérations qui tourne autour du croquis --- */
.sec--forme{ overflow:hidden; }   /* contient les vignettes qui s'écartent loin */
.fring{ position:relative; height:min(98vh,960px); margin-top:clamp(8px,2vh,28px); }
.fring__center{ position:absolute; top:50%; left:50%; z-index:4;
  width:clamp(150px,17vw,232px); aspect-ratio:1; border-radius:50%; overflow:hidden;
  transform:translate(-50%,-50%) scale(var(--cf,1)); will-change:transform; }
.fring__ring{ position:absolute; inset:0; transform:rotate(var(--rot,0deg)); --R0:min(30vh,32vw); }
.fring .tile{ position:absolute; top:50%; left:50%; width:clamp(108px,12vw,164px); aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--R0) * var(--Rf,0.8))) rotate(calc(-1 * var(--a))); }
.fring .tile-inner{ width:100%; height:100%; transform:rotate(calc(-1 * var(--rot,0deg)));
  box-shadow:0 12px 34px rgba(0,0,0,.10); border-radius:4px; }
.fring .tile-inner .ph{ width:100%; height:100%; }
.fring .slideshow .dots{ display:none; }
.fring .slideshow .slide{ transition:none; }   /* itérations : switch instantané (pas de fondu) */

/* badge "Favori" : apparaît avec l'image active (il est dans la slide) */
.fring .fav-badge{ position:absolute; z-index:5; top:8px; left:8px;
  font-family:var(--f-disp); font-weight:600; font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--ac); padding:4px 8px; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.22); }

/* badge "Chosen design" : apparaît avec sa slide (comme les autres), sans contour */
.fring .chosen-badge{ position:absolute; z-index:5; left:50%; bottom:8px; transform:translateX(-50%);
  font-family:var(--f-disp); font-weight:600; font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--ac); padding:5px 10px; border-radius:999px; white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.28); }
@media (max-width:760px){
  .fring{ height:auto; }
  .fring__ring{ position:static; transform:none !important; --R:0;
    display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .fring__center{ position:static; transform:none; width:auto; max-width:300px; aspect-ratio:1; margin:0 auto 16px; }
  .fring .tile{ position:static; transform:none !important; width:auto; aspect-ratio:1; }
  .fring .tile-inner{ transform:none !important; }
}

/* --- Écrans : composition créative (carrousels horizontaux + carrés, décalés) --- */
.ecran-comp{ display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(12px,1.6vw,26px); align-items:start; }
.ec-hero{ grid-column:1/9; }
.ec-sq1{ grid-column:9/13; aspect-ratio:1; margin-top:clamp(34px,8vw,96px); }
.ec-sq2{ grid-column:1/4; aspect-ratio:1; margin-top:clamp(16px,3vw,44px); }
.ec-strip{ grid-column:4/13; }
.slider--wide .slider__stage{ height:auto; aspect-ratio:16/9; }
.slider--band .slider__stage{ height:auto; aspect-ratio:5/2; }
/* Basique : carrousel carré centré */
.slider--square{ max-width:560px; margin-inline:auto; }
.slider--square .slider__stage{ height:auto; aspect-ratio:1/1; }
/* Basique : scroll infini — 3 grandes images, gap 16px, auto + accéléré au scroll (piloté en JS) */
.imgloop{ width:auto; margin:clamp(30px,5vw,76px) calc(var(--gut) * -1) 0; overflow:hidden; }
.imgloop__track{ display:flex; gap:16px; width:max-content; will-change:transform; transform:translate3d(0,0,0); }
.imgloop__item{ flex:0 0 auto; width:calc((100vw - 48px) / 3); aspect-ratio:1; margin:0; }
.imgloop__item img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:6px; }
@media (max-width:760px){ .imgloop__item{ width:calc((100vw - 32px) / 2); } }

/* Hero Asset : hero PLEINE LARGEUR + mini-carrés de switch dans un coin */
.ha-hero{ width:auto; margin:0 calc(var(--gut) * -1); }     /* full-bleed (width:auto sinon .slider{width:100%} bloque) */
.slider--heroFull{ position:relative; }
.slider--heroFull .slider__stage{ height:min(90vh,900px); border:none; border-radius:0; }
.slider--heroFull .slider__arrow{ display:none; }            /* pas de flèches : on switch via les carrés */
.slider--heroFull .slider__bar{ position:absolute; z-index:6; margin:0; width:auto;
  right:clamp(14px,3vw,40px); bottom:clamp(14px,3vw,34px);
  padding:8px; gap:8px; border-radius:16px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(10px); box-shadow:0 8px 26px rgba(0,0,0,.16); }
.slider--heroFull .slider__thumbs{ overflow:visible; gap:8px; }
.slider--heroFull .slider__thumb{ width:clamp(44px,4.6vw,58px); height:clamp(44px,4.6vw,58px); border-radius:9px; }

/* Hero Asset : autres visuels, formats variés, dispo design */
.ha-extras{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,2vw,30px);
  margin-top:clamp(22px,4.5vw,64px); align-items:start; }
.ha-extras .hx-a{ grid-column:1/4; }                          /* vertical, 3 cols */
.ha-extras .hx-b{ grid-column:4/10; margin-top:clamp(16px,2.5vw,40px); }  /* panorama, 6 cols, léger décalage */
.ha-extras .hx-c{ grid-column:10/13; margin-top:clamp(24px,4vw,64px); }   /* carré, 3 cols, décalé */
@media (max-width:760px){
  .ha-extras{ grid-template-columns:1fr 1fr; }
  .ha-extras .hx-a,.ha-extras .hx-b,.ha-extras .hx-c{ grid-column:auto; margin-top:0; }
  .ha-extras .hx-b{ grid-column:1/-1; }
}
@media (max-width:760px){
  .ecran-comp{ grid-template-columns:1fr 1fr; }
  .ec-hero,.ec-strip{ grid-column:1/-1; }
  .ec-sq1,.ec-sq2{ margin-top:0; }
  .ec-sq1{ grid-column:1/2; } .ec-sq2{ grid-column:2/3; }
}