/* ═══════════════════════════════════════════════
   MC FLAVA — portfolio immersif
   Molten ambient · dot-matrix · parallax
   ═══════════════════════════════════════════════ */

:root{
  --ink:#050506;
  --paper:#f4f1ec;
  --dim:#9a938d;
  --line:rgba(244,241,236,.13);
  --line-2:rgba(244,241,236,.07);
  --card:rgba(255,255,255,.028);
  --glass:rgba(14,13,16,.66);

  --accent:#ff7a29;
  --gold:#e6bd77;
  --azure:#4fa8ff;

  --ff:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --ff-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(1.15rem,5vw,5.5rem);
  --maxw:1320px;

  /* nappes molten — pilotées par section */
  --c1:#1d3f7a; --c2:#5a2a6b; --c3:#c8371a; --c4:#e8dcc8;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}

body{
  background:var(--ink);
  color:var(--paper);
  font:400 clamp(.95rem,.55vw + .8rem,1.05rem)/1.62 var(--ff);
  letter-spacing:-.011em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#0a0a0c}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ─────────── AMBIANCE : nappes molten ─────────── */
.ambient{
  position:fixed;inset:-18vmax;z-index:0;pointer-events:none;
  filter:blur(110px) saturate(125%);
  opacity:.6;
  will-change:transform;
}
.blob{
  position:absolute;border-radius:50%;
  transition:background 1.6s cubic-bezier(.4,0,.2,1);
  mix-blend-mode:screen;
}
.b1{width:58vmax;height:58vmax;left:-10%;top:-8%;background:var(--c1);animation:d1 34s ease-in-out infinite}
.b2{width:52vmax;height:52vmax;right:-12%;top:6%;background:var(--c2);animation:d2 41s ease-in-out infinite}
.b3{width:66vmax;height:66vmax;left:18%;bottom:-24%;background:var(--c3);animation:d3 47s ease-in-out infinite}
.b4{width:38vmax;height:38vmax;right:8%;bottom:-6%;background:var(--c4);opacity:.5;animation:d4 38s ease-in-out infinite}

@keyframes d1{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(14vw,10vh,0) scale(1.22)}66%{transform:translate3d(-6vw,20vh,0) scale(.9)}}
@keyframes d2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}40%{transform:translate3d(-16vw,16vh,0) scale(.85)}70%{transform:translate3d(-4vw,-8vh,0) scale(1.25)}}
@keyframes d3{0%,100%{transform:translate3d(0,0,0) scale(1)}30%{transform:translate3d(-18vw,-14vh,0) scale(1.15)}60%{transform:translate3d(12vw,-6vh,0) scale(.88)}}
@keyframes d4{0%,100%{transform:translate3d(0,0,0) scale(.95)}50%{transform:translate3d(-10vw,-18vh,0) scale(1.3)}}

/* grain filmique */
.grain{
  position:fixed;inset:-200%;z-index:1;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 720ms steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}
  100%{transform:translate(3%,1%)}
}

.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(105% 78% at 50% 45%,transparent 22%,rgba(5,5,6,.5) 66%,rgba(5,5,6,.88) 100%);
}

main{position:relative;z-index:2}

/* ─────────── PRELOADER ─────────── */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-content:center;gap:1.6rem;justify-items:center;
  transition:opacity .8s ease,visibility .8s;
}
.loader.done{opacity:0;visibility:hidden}
.loader-bar{width:min(220px,42vw);height:1px;background:var(--line)}
.loader-bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--accent),var(--gold));transition:transform .3s ease}

/* ─────────── DOCK ─────────── */
.dock{
  position:fixed;z-index:100;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(0);
  display:flex;align-items:center;gap:.25rem;padding:.32rem;
  background:var(--glass);border:1px solid var(--line);border-radius:999px;
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 22px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .4s;
  max-width:calc(100vw - 1.6rem);
}
.dock.hide{transform:translateX(-50%) translateY(160%)}
.dock-mark{
  display:grid;place-content:center;width:38px;height:38px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:999px;
  font:700 .62rem/1 var(--ff-mono);letter-spacing:.06em;
  transition:border-color .25s,color .25s;
}
.dock-mark:hover{border-color:var(--accent);color:var(--accent)}
.dock-items{display:flex;align-items:center;gap:.1rem;min-width:0;overflow:hidden}
.dock-items a,.dock-scenes{
  padding:.66rem .82rem;border-radius:999px;white-space:nowrap;
  font-size:.8rem;font-weight:450;color:#cfc9c3;
  transition:background .25s,color .25s;
}
.dock-items a:hover,.dock-scenes:hover,.dock-scenes[aria-expanded="true"]{background:rgba(255,255,255,.07);color:var(--paper)}
.dock-cta{
  padding:.66rem 1.05rem;border-radius:999px;background:var(--paper);color:#0a0a0c;
  font-size:.8rem;font-weight:600;white-space:nowrap;
  transition:background .25s,transform .25s;
}
.dock-cta:hover{background:#fff;transform:translateY(-1px)}

.scenes-pop{
  position:absolute;left:50%;bottom:calc(100% + .5rem);transform:translateX(-50%) translateY(6px);
  width:min(300px,88vw);padding:.4rem;
  background:var(--glass);border:1px solid var(--line);border-radius:16px;
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 22px 60px rgba(0,0,0,.55);
  opacity:0;transition:opacity .3s,transform .3s;
}
.scenes-pop:not([hidden]){opacity:1;transform:translateX(-50%) translateY(0)}
.scenes-pop a{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;border-radius:10px;
  font-size:.85rem;color:#cfc9c3;transition:background .2s,color .2s;
}
.scenes-pop a:hover{background:rgba(255,255,255,.07);color:var(--paper)}
.scenes-pop em{font:700 .6rem var(--ff-mono);font-style:normal;color:var(--accent);letter-spacing:.08em}

/* ─────────── PROGRESSION ─────────── */
.rail{position:fixed;z-index:99;left:0;right:0;top:0;height:1px;background:var(--line-2)}
.rail i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--accent),var(--gold));transition:transform .12s linear}
.chapter{
  position:fixed;z-index:99;top:1.2rem;right:var(--gut);
  font:700 .58rem var(--ff-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}

/* ─────────── DOT-MATRIX ─────────── */
canvas.dot{display:block;width:100%;height:auto;max-width:100%}
.hero-inner canvas.dot,.outro-inner canvas.dot,.loader canvas.dot{margin-inline:auto}
.head canvas.dot,.gal-head canvas.dot{margin-inline:0}

/* ─────────── HERO ─────────── */
.hero{
  position:relative;min-height:100svh;isolation:isolate;
  display:grid;text-align:center;
  padding:clamp(2.6rem,7vh,4.6rem) var(--gut) clamp(7rem,16vh,10rem);
  overflow:hidden;
}
.hero-media{position:absolute;inset:-12% 0;z-index:-1;will-change:transform}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 27%;
  opacity:.5;filter:contrast(1.15) saturate(.72) brightness(.78)}
/* étalonnage : bloom bleu → magenta → braise */
.hero-media::before,.outro-media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 62% at 14% 34%,rgba(38,86,180,.72),transparent 62%),
    radial-gradient(52% 58% at 88% 30%,rgba(190,58,120,.6),transparent 64%),
    radial-gradient(64% 52% at 62% 88%,rgba(214,88,26,.6),transparent 66%);
  mix-blend-mode:soft-light;
}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(72% 58% at 50% 42%,transparent 0%,rgba(5,5,6,.5) 70%,rgba(5,5,6,.8) 100%),linear-gradient(to bottom,rgba(5,5,6,.55),rgba(5,5,6,.25) 38%,rgba(5,5,6,.88) 88%,var(--ink));
}
.hero-ring{
  position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);
  width:min(72vh,78vw);aspect-ratio:1;border:1px solid rgba(244,241,236,.18);border-radius:50%;
  animation:ringIn 2.4s cubic-bezier(.16,1,.3,1) .6s backwards;
}
@keyframes ringIn{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}to{opacity:1}}

.hero-inner{
  position:relative;width:100%;max-width:1180px;margin:0 auto;justify-self:center;
  display:grid;justify-items:center;align-content:stretch;
  grid-template-rows:auto 1.15fr auto .38fr auto 1fr;
}
.hero-title{grid-row:1}
.hero-labels{grid-row:3}
.hero-title{max-width:1100px}
.hero-labels{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;gap:1rem;
  font-size:clamp(.78rem,1.5vw,.95rem);color:#d6d0c9;
}
.hl-l{justify-self:start}.hl-r{justify-self:end}
.hl{opacity:0;animation:up .9s cubic-bezier(.16,1,.3,1) forwards}
.hl-l{animation-delay:1.1s}.hl-c{animation-delay:1.25s}.hl-r{animation-delay:1.4s}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.scroll-cue{
  position:absolute;left:50%;bottom:clamp(4.8rem,12vh,7rem);transform:translateX(-50%);
  font:700 .58rem var(--ff-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  display:grid;justify-items:center;gap:.6rem;
  opacity:0;animation:up .9s ease 1.9s forwards;
}
.scroll-cue i{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ─────────── STRUCTURE ─────────── */
.sec{padding:clamp(5.5rem,15vh,10rem) var(--gut);position:relative}
.wrap{max-width:var(--maxw);margin:0 auto}

.head{margin-bottom:clamp(2.4rem,6vh,4rem);display:grid;gap:1.1rem;max-width:1000px}
.eyebrow{font:700 .6rem var(--ff-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.head-note{max-width:46ch;color:#b6afa8}

.rule{height:1px;background:var(--line);margin:clamp(2.4rem,6vh,3.6rem) 0}

p{color:#b6afa8;max-width:62ch}
p.dim{color:#8b847e}

.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,5vw,4rem);align-items:end}
.split-side{display:grid;gap:.9rem;align-content:end;justify-items:start}

.btn{
  display:inline-block;margin-top:.5rem;padding:.78rem 1.35rem;
  border:1px solid var(--line);border-radius:999px;
  font-size:.82rem;font-weight:500;
  transition:background .3s,border-color .3s,transform .3s;
}
.btn:hover{background:var(--paper);color:#0a0a0c;border-color:var(--paper);transform:translateY(-2px)}

/* spec rows — deux colonnes filet */
.spec{display:grid;gap:0}
.spec-row{
  display:grid;grid-template-columns:minmax(90px,150px) 1fr;gap:1rem;
  padding:.95rem 0;border-bottom:1px solid var(--line-2);align-items:baseline;
}
.spec-row span{font-size:.76rem;color:#7d766f}
.spec-row b{font-weight:450;font-size:.92rem;color:#ded8d1;text-align:right}
.spec.compact .spec-row{padding:.7rem 0}

.spec-block{display:grid;grid-template-columns:minmax(90px,150px) 1fr;gap:1rem;padding:1.5rem 0;border-bottom:1px solid var(--line-2)}
.spec-label{font-size:.76rem;color:#7d766f;padding-top:.35rem}

.pills{display:flex;flex-wrap:wrap;gap:.42rem}
.pills span{
  padding:.5rem .78rem;border:1px solid var(--line);border-radius:999px;
  font-size:.74rem;color:#cac4bd;white-space:nowrap;
  transition:border-color .25s,background .25s;
}
.pills span:hover{border-color:rgba(244,241,236,.3);background:rgba(255,255,255,.04)}
.pills.wide{margin-top:clamp(1.6rem,4vh,2.4rem)}

.quote{
  margin-top:clamp(1.8rem,5vh,3rem);padding-left:1.3rem;
  border-left:2px solid var(--accent);
  font-size:clamp(1.25rem,2.6vw,2rem);line-height:1.25;letter-spacing:-.02em;
  color:var(--paper);max-width:24ch;font-weight:300;
}
.quote.sm{font-size:clamp(1.05rem,1.9vw,1.4rem);margin-top:1.4rem}
.quote cite{display:block;margin-top:.7rem;font:700 .62rem var(--ff-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

.closing{margin-top:2rem;max-width:56ch;color:#cac4bd;font-size:1.02rem}

/* ─────────── CARTES LOGOS / STATS ─────────── */
.logo-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
.logo-card{
  display:grid;justify-items:center;gap:.35rem;padding:1.5rem 1rem;
  background:var(--card);border:1px solid var(--line);border-radius:18px;text-align:center;
  transition:border-color .35s,background .35s,transform .35s;
}
.logo-card:hover{border-color:rgba(244,241,236,.26);background:rgba(255,255,255,.05);transform:translateY(-3px)}
.logo-card img{height:46px;width:auto;max-width:130px;object-fit:contain;opacity:.82;margin-bottom:.7rem;transition:opacity .3s}
.logo-card:hover img{opacity:1}
.logo-card strong{font-size:1.9rem;font-weight:300;letter-spacing:-.03em;color:var(--gold)}
.logo-card small{font:700 .55rem var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:#7d766f}
.logo-card em{font-style:normal;font-size:.8rem;color:#cac4bd;margin-top:.3rem}

/* ─────────── FEATURE (image + copie) ─────────── */
.feature{
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.2rem,4vw,3rem);align-items:center;
  margin-top:clamp(2.4rem,6vh,4rem);
}
.feature.alt{grid-template-columns:.9fr 1.1fr}
.feature-media{
  position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:#0d0c0f;aspect-ratio:4/3;
}
.feature-media.tall{aspect-ratio:4/5}
.feature-media img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.1)}
.feature-media figcaption,.band figcaption,.mosaic figcaption{
  position:absolute;left:.85rem;right:.85rem;bottom:.85rem;
  padding:.6rem .8rem;border-radius:10px;
  background:rgba(6,6,8,.72);backdrop-filter:blur(10px);
  font:700 .6rem var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:#e0dad3;
}
.feature-copy{display:grid;gap:1rem;justify-items:start;align-content:center}
.feature-copy h3,.card-body h3{
  font-size:clamp(1.5rem,3vw,2.4rem);font-weight:300;letter-spacing:-.03em;line-height:1.1;color:var(--paper);
}

.band{
  position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  aspect-ratio:21/9;background:#0d0c0f;margin-bottom:clamp(1.2rem,3vh,2rem);
}
.band img{width:100%;height:100%;object-fit:cover;object-position:center 35%;will-change:transform;transform:scale(1.1)}

/* ─────────── CARTES ─────────── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;
  transition:border-color .35s,background .35s,transform .45s cubic-bezier(.16,1,.3,1);
}
.card:hover{border-color:rgba(244,241,236,.26);background:rgba(255,255,255,.05);transform:translateY(-4px)}
.card-media{aspect-ratio:4/5;overflow:hidden;background:#0d0c0f}
.card.tallcard .card-media{aspect-ratio:3/4}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.card:hover .card-media img{transform:scale(1.06)}
.card-body{padding:1.25rem;display:grid;gap:.5rem;align-content:start}
.card-body p{font-size:.87rem}
.flag{font:700 .62rem var(--ff-mono);letter-spacing:.06em;color:var(--accent)}
.card-logos{display:flex;align-items:center;gap:.6rem;margin-top:.45rem;flex-wrap:wrap}
.card-logos img{height:26px;width:auto;max-width:92px;object-fit:contain;opacity:.75;border-radius:4px}
.card-logos.big img{height:52px;max-width:150px;opacity:.9}

/* ─────────── MOSAÏQUE ─────────── */
.mosaic{display:grid;grid-template-columns:1.22fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:1rem;height:clamp(430px,64vh,640px)}
.mosaic figure{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#0d0c0f}
.mosaic img{width:100%;height:100%;object-fit:cover;object-position:center 32%;will-change:transform;transform:scale(1.12)}
.m-lg{grid-row:span 2}

/* ─────────── DUO / MARIAGES ─────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.duo figure{border:1px solid var(--line);border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:#0d0c0f}
.duo img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.1)}

.couples{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;margin-top:clamp(1.4rem,4vh,2.2rem)}
.couples span{
  display:grid;gap:.4rem;justify-items:center;text-align:center;
  padding:1rem .6rem;border:1px solid var(--line);border-radius:14px;background:var(--card);
  font-size:1.25rem;
}
.couples em{font-style:normal;font-size:.66rem;color:#a49d96;letter-spacing:.02em}

.timeline{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:1.6rem}
.timeline span{font:700 .62rem var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:#8b847e}
.timeline span+span::before{content:"→";margin-right:.4rem;color:var(--accent);opacity:.7}

/* ─────────── PERSONNE ─────────── */
.person{
  display:flex;align-items:center;gap:.9rem;margin-top:.6rem;padding:.85rem;
  border:1px solid var(--line);border-radius:16px;background:var(--card);
}
.person img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:center top;flex:0 0 auto}
.person strong{display:block;font-weight:500;font-size:.95rem;color:var(--paper)}
.person span{display:block;font-size:.76rem;color:#8b847e;margin-top:.15rem}

/* ─────────── GALERIE HORIZONTALE ÉPINGLÉE ─────────── */
.gal{position:relative}
.gal-pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:clamp(1rem,3vh,2rem);
  padding:clamp(4.5rem,11vh,7rem) 0 clamp(6rem,14vh,8rem);
  align-content:center;
}
.gal-head{
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:1rem;
  padding:0 var(--gut);max-width:calc(var(--maxw) + var(--gut) * 2);margin:0 auto;width:100%;
}
.gal-head .eyebrow{grid-column:1;margin-bottom:.7rem}
.gal-head canvas.dot{grid-column:1;max-width:min(460px,60vw)}
.gal-nav{grid-column:2;grid-row:1/span 3;display:flex;gap:.5rem;align-self:end}
.gal-nav button{
  width:46px;height:46px;border:1px solid var(--line);border-radius:999px;
  display:grid;place-content:center;font-size:1rem;color:#cac4bd;
  transition:background .25s,border-color .25s,color .25s;
}
.gal-nav button:hover{background:var(--paper);color:#0a0a0c;border-color:var(--paper)}

.gal-track{
  display:flex;gap:1rem;padding:0 var(--gut);align-items:center;
  will-change:transform;
}
.gal-track figure{
  position:relative;flex:0 0 auto;
  width:clamp(230px,26vw,360px);aspect-ratio:3/4;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#0d0c0f;
}
.gal-track img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.gal-track figure:hover img{transform:scale(1.05)}
.gal-track figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem .95rem .95rem;
  background:linear-gradient(transparent,rgba(5,5,6,.9));
  display:grid;gap:.15rem;
}
.gal-track figcaption b{font-weight:500;font-size:.95rem;color:var(--paper)}
.gal-track figcaption span{font:700 .58rem var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* ─────────── OUTRO ─────────── */
.outro{
  position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:clamp(6rem,14vh,9rem) var(--gut) clamp(8rem,18vh,11rem);overflow:hidden;
}
.outro-media{position:absolute;inset:-12% 0;z-index:-1;will-change:transform}
.outro-media img{width:100%;height:100%;object-fit:cover;object-position:52% 19%;opacity:.42}
.outro-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--ink),rgba(5,5,6,.55) 40%,rgba(5,5,6,.9))}
.outro-inner{display:grid;justify-items:center;gap:clamp(1.4rem,4vh,2.4rem)}
.outro-inner canvas.dot{max-width:min(920px,92vw)}
.outro-services{font:700 .66rem var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);max-width:none}

.ring{
  display:grid;place-content:center;text-align:center;
  width:clamp(200px,26vw,270px);aspect-ratio:1;border-radius:50%;
  border:1px dashed rgba(244,241,236,.32);
  font-size:clamp(1.1rem,2vw,1.5rem);font-weight:300;letter-spacing:-.02em;line-height:1.25;
  transition:border-color .4s,background .4s,transform .5s cubic-bezier(.16,1,.3,1);
}
.ring:hover{border-color:var(--accent);background:rgba(255,122,41,.08);transform:scale(1.04)}

.contacts{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem}
.contacts a{
  font:700 .74rem var(--ff-mono);letter-spacing:.04em;
  border-bottom:1px solid var(--line);padding-bottom:.25rem;
  transition:border-color .25s,color .25s;
}
.contacts a:hover{border-color:var(--accent);color:var(--accent)}
.outro-logo{width:clamp(190px,22vw,290px);opacity:.95;margin:.4rem auto 0;filter:drop-shadow(0 8px 26px rgba(0,0,0,.6))}

/* ─────────── REVEAL ─────────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.grid-3 .reveal:nth-child(2),.grid-2 .reveal:nth-child(2){transition-delay:.09s}
.grid-3 .reveal:nth-child(3){transition-delay:.18s}
.logo-row .reveal:nth-child(2){transition-delay:.07s}
.logo-row .reveal:nth-child(3){transition-delay:.14s}
.logo-row .reveal:nth-child(4){transition-delay:.21s}
.mosaic .reveal:nth-child(2){transition-delay:.09s}
.mosaic .reveal:nth-child(3){transition-delay:.18s}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:1080px){
  .logo-row{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .couples{grid-template-columns:repeat(3,1fr)}
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto}
  .m-lg{grid-row:span 1;grid-column:span 2;aspect-ratio:16/10}
  .m-sm{aspect-ratio:4/5}
}

@media(max-width:820px){
  .split{grid-template-columns:1fr;align-items:start;gap:1.6rem}
  .feature,.feature.alt{grid-template-columns:1fr}
  .grid-3,.grid-2,.duo{grid-template-columns:1fr}
  .band{aspect-ratio:16/10}
  .chapter{display:none}
  .spec-row{grid-template-columns:1fr;gap:.2rem}
  .spec-row b{text-align:left}
  .spec-block{grid-template-columns:1fr;gap:.7rem}
  .gal-head{grid-template-columns:1fr}
  .gal-nav{grid-column:1;grid-row:auto;justify-self:start;margin-top:.8rem}
  .gal-head canvas.dot{max-width:min(340px,72vw)}
}

@media(max-width:600px){
  .dock{gap:.15rem;padding:.28rem;bottom:max(.7rem,env(safe-area-inset-bottom))}
  .dock-mark{width:34px;height:34px}
  .dock-items a,.dock-scenes{padding:.58rem .6rem;font-size:.74rem}
  .dock-cta{padding:.58rem .8rem;font-size:.74rem}

  .hero-labels{grid-template-columns:1fr;gap:.35rem;justify-items:center}
  .hl-l,.hl-r{justify-self:center}
  .couples{grid-template-columns:repeat(2,1fr)}
  .gal-track figure{width:min(74vw,290px)}
  .feature-media,.feature-media.tall{aspect-ratio:4/5}
  .person{flex-direction:column;align-items:flex-start;text-align:left}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .grain{display:none}
  html:focus-within{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════
   ANIMATIONS — arrivée gauche → droite
   ═══════════════════════════════════════════════ */

/* Balayage : l'image se dévoile de la gauche vers la droite */
.wipe{
  clip-path:inset(0 100% 0 0);
  transform:translate3d(-42px,0,0);
  opacity:.001;
  transition:
    clip-path 1.25s cubic-bezier(.16,1,.3,1),
    transform 1.25s cubic-bezier(.16,1,.3,1),
    opacity .7s ease;
  transition-delay:calc(var(--i,0) * 105ms);
  will-change:clip-path,transform;
}
.wipe.in{clip-path:inset(0 0 0 0);transform:none;opacity:1}

/* Trait de lumière qui accompagne le balayage */
.wipe::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(255,190,130,.5) 50%,transparent 58%);
  opacity:0;transform:translateX(-120%);
}
.wipe.in::after{animation:sheen 1.5s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i,0) * 105ms + .12s)}
@keyframes sheen{0%{opacity:.85;transform:translateX(-120%)}100%{opacity:0;transform:translateX(120%)}}

/* Léger zoom de l'image pendant le dévoilement */
.wipe > img{transition:transform 1.6s cubic-bezier(.16,1,.3,1)}

/* Texte : montée décalée */
.rise{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 85ms);
}
.rise.in{opacity:1;transform:none}

/* Glissement latéral pour les blocs de copie */
.slide{
  opacity:0;transform:translate3d(-38px,0,0);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 90ms);
}
.slide.in{opacity:1;transform:none}

/* Pastilles : éclosion en cascade de gauche à droite */
.pills span,.couples span,.timeline span{
  opacity:0;transform:translate3d(-16px,0,0) scale(.94);
  transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 42ms);
}
.pills.in span,.couples.in span,.timeline.in span{opacity:1;transform:none}

/* Filets : tracés de gauche à droite */
.rule{transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.rule.in{transform:scaleX(1)}
.spec-row{--w:0;position:relative}
.spec-row::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 90ms);
}
.spec-row.in::after{transform:scaleX(1)}
.spec-row{border-bottom-color:transparent}

/* Citation : la barre pousse vers le bas */
.quote{position:relative;border-left-color:transparent}
.quote::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .9s cubic-bezier(.16,1,.3,1) .2s;
}
.quote.in::before{transform:scaleY(1)}

/* Sur-titre : les lettres se resserrent */
.eyebrow{display:inline-block;letter-spacing:.5em;opacity:0;transition:letter-spacing .9s cubic-bezier(.16,1,.3,1),opacity .7s ease}
.eyebrow.in{letter-spacing:.18em;opacity:1}

/* Compteurs de festivals */
.logo-card strong{font-variant-numeric:tabular-nums}

/* Cartes galerie : parallax individuel */
.gal-track figure{will-change:transform}

/* Bouton magnétique */
.btn,.ring,.dock-cta,.gal-nav button{will-change:transform}

@media(prefers-reduced-motion:reduce){
  .wipe,.rise,.slide{opacity:1!important;transform:none!important;clip-path:none!important}
  .pills span,.couples span,.timeline span{opacity:1!important;transform:none!important}
  .rule,.quote::before{transform:none!important}
  .spec-row{border-bottom-color:var(--line-2)}
  .spec-row::after{display:none}
  .eyebrow{letter-spacing:.18em;opacity:1}
  .wipe::after{display:none}
}

/* wipe : conteneurs devant être positionnés */
.card-media,.duo figure{position:relative}
/* galerie : dévoilement par clip seul (le transform est piloté en JS) */
.gal-track figure{clip-path:inset(0 100% 0 0);transition:clip-path 1.05s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 60ms)}
.gal-track figure.in{clip-path:inset(0 0 0 0)}

/* Logos de festivals : plaque claire pour unifier des marques hétérogènes */
.logo-card img{
  height:auto;width:auto;max-height:34px;max-width:120px;
  padding:.5rem .65rem;border-radius:9px;
  background:rgba(247,245,241,.93);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:1;
}
.logo-card:hover img{opacity:1;transform:translateY(-1px)}
.logo-card img{transition:transform .3s ease}
.card-logos img{background:rgba(247,245,241,.92);padding:3px 6px;border-radius:5px;opacity:.9}
.card-logos.big img{background:none;padding:0}

/* Affiches : jamais recadrées */
.feature-media.poster{aspect-ratio:1127/1400;background:#0b0a0d}
.feature-media.poster img{object-fit:contain;transform:none!important}

/* ═══════════════════════════════════════════════
   RÉVISIONS CLIENT
   ═══════════════════════════════════════════════ */

/* — Logo agrandi dans le dock — */
.dock-mark{width:auto;height:44px;padding:0 .5rem;border:0;border-radius:999px;background:rgba(255,255,255,.06)}
.dock-mark img{height:34px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.dock-mark:hover{background:rgba(255,255,255,.12)}

/* — Carte d'embarquement (desktop bas-gauche / mobile bandeau haut) — */
.pass{
  position:fixed;z-index:98;left:var(--gut);bottom:1.5rem;width:216px;padding:.85rem .95rem;
  background:var(--glass);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 18px 48px rgba(0,0,0,.5);
  font:700 .58rem var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;
  display:grid;gap:.3rem;
}
.pass-kicker{color:var(--accent);letter-spacing:.14em;font-size:.52rem}
.pass-chapter{font:500 .95rem/1.15 var(--ff);letter-spacing:-.01em;text-transform:none;color:var(--paper);margin:.1rem 0 .3rem}
.pass-row{display:flex;justify-content:space-between;gap:.6rem;color:#8b847e}
.pass-row b{color:#ded8d1;font-weight:700}
.pass-bar{height:2px;margin-top:.5rem;background:var(--line);border-radius:2px;overflow:hidden}
.pass-bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--accent),var(--gold));transition:transform .15s linear}

/* — Logos de festivals nettement plus grands — */
.logo-plate{
  display:grid;place-items:center;width:100%;height:78px;margin-bottom:.9rem;
  padding:.7rem .9rem;border-radius:12px;background:rgba(247,245,241,.95);
  box-shadow:0 8px 22px rgba(0,0,0,.4);
}
.logo-plate img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;padding:0;background:none;box-shadow:none;border-radius:0}
.logo-card{padding:1.35rem 1.1rem 1.5rem}
.logo-card strong{font-size:2.3rem}

/* — Logos partenaires sur les cartes artistes — */
.card-logos img{
  height:40px;max-width:132px;width:auto;object-fit:contain;
  padding:.32rem .5rem;border-radius:7px;background:rgba(247,245,241,.95);opacity:1;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.card-logos.big img{height:58px;max-width:170px}

/* — Section Artistes : légende au-dessus, phrase entre les visuels — */
.band-label{
  font:700 .62rem var(--ff-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.8rem;max-width:none;
}
.band{aspect-ratio:16/9;margin-bottom:0}
.band img{object-position:center 24%}
.band-note{
  margin:1.6rem 0 2.2rem;max-width:34ch;
  font-size:clamp(1.15rem,2.2vw,1.65rem);font-weight:300;line-height:1.28;
  letter-spacing:-.02em;color:var(--paper);
}

/* — Titres de bloc : nettement plus grands que le texte — */
h3.xl{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:300;letter-spacing:-.035em;line-height:1.05}
p.role{
  font-size:clamp(1.2rem,2.4vw,1.9rem);font-weight:700;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.15;color:var(--paper);max-width:none;margin-top:.2rem;
}
p.lede{color:var(--paper);font-size:clamp(1.1rem,2vw,1.45rem);font-weight:300;line-height:1.35;letter-spacing:-.02em;max-width:26ch}
.brief{display:grid;gap:.35rem;margin-top:.4rem}

/* — Galerie : indice + curseur — */
.gal-hint{grid-column:1;margin-top:.7rem;font:700 .58rem var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);max-width:none}
.gal-track figure{cursor:zoom-in}
.duo figure{position:relative}
.duo figcaption,.band figcaption{
  position:absolute;left:.85rem;right:.85rem;bottom:.85rem;padding:.6rem .8rem;border-radius:10px;
  background:rgba(6,6,8,.72);backdrop-filter:blur(10px);
  font:700 .6rem var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:#e0dad3;
}

/* — Lightbox — */
.lb{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:rgba(4,4,5,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:clamp(2.5rem,7vh,5rem) clamp(1rem,7vw,5rem);
  opacity:0;transition:opacity .35s ease;
}
.lb.open{opacity:1}
.lb-stage{display:grid;gap:.9rem;justify-items:center;max-height:100%}
.lb-stage img{
  max-width:100%;max-height:calc(100svh - 12rem);width:auto;height:auto;
  border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.7);
  transform:scale(.965);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease;
}
.lb.open .lb-stage img{transform:none;opacity:1}
.lb-stage figcaption{font:700 .64rem var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center}
.lb button{
  position:absolute;width:48px;height:48px;border:1px solid var(--line);border-radius:999px;
  background:rgba(20,19,23,.7);color:var(--paper);font-size:1.05rem;
  display:grid;place-content:center;transition:background .25s,border-color .25s,color .25s;
}
.lb button:hover{background:var(--paper);color:#0a0a0c;border-color:var(--paper)}
.lb-close{top:clamp(1rem,3vh,1.8rem);right:clamp(1rem,3vw,2rem)}
.lb-prev{left:clamp(.6rem,2.5vw,2rem);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(.6rem,2.5vw,2rem);top:50%;transform:translateY(-50%)}
body.lb-on{overflow:hidden}

@media(max-width:820px){
  /* carte d'embarquement compacte, visible sur téléphone */
  .pass{
    left:.6rem;right:.6rem;bottom:auto;top:calc(.55rem + env(safe-area-inset-top));
    width:auto;display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border-radius:999px;
  }
  .pass-kicker{display:none}
  .pass-chapter{margin:0;font-size:.82rem;white-space:nowrap}
  .pass-row{display:none}
  .pass-row:last-of-type{display:flex;margin-left:auto;font-size:.5rem}
  .pass-bar{flex:1;margin:0;min-width:40px}
  .band-note{font-size:1.15rem;margin:1.2rem 0 1.8rem}
  .lb-prev,.lb-next{top:auto;bottom:1rem;transform:none}
  .lb-stage img{max-height:calc(100svh - 14rem)}
}

/* Ouverture Artistes : portrait présenté entier, légende au-dessus, phrase en dessous */
.band{aspect-ratio:3/4;max-width:min(560px,56vw);margin:0 auto;overflow:hidden}
.band img{object-position:center 46%;transform:scale(1.04)}
.band-label{text-align:center;margin-bottom:1rem}
.band-note{margin:1.8rem auto 2.6rem;text-align:center;max-width:30ch}
@media(max-width:820px){
  .band{aspect-ratio:3/4;max-width:min(430px,86vw)}
  .band-note{margin:1.3rem auto 2rem}
}

/* Diplomatie : visage entier visible */
#diplomatie .duo figure:first-child img{object-position:center 14%}
#diplomatie .duo{align-items:stretch}
#mariages .duo figure:last-child img{object-position:center 32%}

/* Dock compact sur petit écran : le menu Chapitres suffit */
@media(max-width:620px){
  .dock-items a{display:none}
  .dock-scenes{padding:.62rem .9rem;font-size:.8rem}
  .dock-cta{padding:.62rem 1rem;font-size:.8rem}
  .dock-mark{height:40px}
  .dock-mark img{height:30px}
  .scenes-pop{width:min(300px,calc(100vw - 1.4rem))}
  /* carte d'embarquement : chapitre + statut + progression */
  .pass-row:last-of-type span{display:none}
  .pass-row:last-of-type b{color:var(--accent);font-size:.52rem;letter-spacing:.1em}
}

/* Menu chapitres : fond franc pour rester lisible sur toute image */
.scenes-pop{
  background:rgba(9,9,11,.96);
  border-color:rgba(244,241,236,.16);
  box-shadow:0 28px 70px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);
  max-height:min(70svh,560px);overflow-y:auto;
}
.scenes-pop a{font-size:.88rem;padding:.66rem .8rem}

/* Dock : plus aucun libellé tronqué */
.dock-items{overflow:visible;flex:0 1 auto}
.dock-mark,.dock-cta{flex:0 0 auto}
.dock-scenes{white-space:nowrap}
@media(max-width:400px){
  .dock{gap:.1rem;padding:.24rem}
  .dock-scenes,.dock-cta{padding:.6rem .78rem;font-size:.78rem}
}
/* Carte d'embarquement mobile : chapitre · barre · statut */
@media(max-width:820px){
  .pass-bar{order:2}
  .pass-row:last-of-type{order:3;margin-left:.2rem}
}

/* ═══════════════════════════════════════════════
   HERO — empilement des couches
   ═══════════════════════════════════════════════ */
.hero{background:#05060d}
.hero-inner{position:relative;z-index:2}
.hero-ring{z-index:1;border-color:rgba(244,241,236,.13)}
.scroll-cue{z-index:2}

/* ═══════════════════════════════════════════════
   CADRAGES — chaque visage centré dans son cadre
   ═══════════════════════════════════════════════ */
img[src*="artist-mauvaisdjo.webp"]{object-position:50% 26%!important}
img[src*="artist-yorssy.webp"]     {object-position:55% 26%!important}
img[src*="artist-gottimaras.webp"] {object-position:66% 16%!important}
img[src*="intl-malta-pool.webp"]   {object-position:62% 30%!important}
img[src*="intl-kinshasa.webp"]     {object-position:45% 34%!important}
img[src*="gal-poolparty.webp"]     {object-position:50% 42%!important}
img[src*="prive-dressrosa.webp"]   {object-position:45% 20%!important}
img[src*="prive-sk.webp"]          {object-position:70% 27%!important}
img[src*="mariage-1.webp"]         {object-position:42% 44%!important}
img[src*="mariage-2.webp"]         {object-position:54% 34%!important}
img[src*="diplo-public.webp"]      {object-position:50% 42%!important}
img[src*="festival-crowd.webp"]    {object-position:50% 38%!important}
img[src*="artists-warmup.webp"]    {object-position:44% 40%!important}
img[src*="about-flava.webp"]       {object-position:50% 30%!important}

/* la galerie recadre au plus près du sujet */
.gal-track img[src*="diplo-moderation.webp"]{object-position:50% 12%!important}
.gal-track img[src*="sport-bnl-flyer.webp"]{object-fit:contain!important;background:#0b0a0d}
.gal-track img[src*="mariage-1.webp"]{object-position:42% 40%!important}

/* ═══════════════════════════════════════════════
   AJUSTEMENTS — titres, festivals, menu
   ═══════════════════════════════════════════════ */

/* — Sous-titres plus discrets, titres dominants — */
.head-note{font-size:.92rem;color:#a29b94;max-width:42ch}
.eyebrow{font-size:.55rem;letter-spacing:.2em}
.eyebrow.in{letter-spacing:.2em}
.hero-labels{font-size:clamp(.72rem,1.25vw,.86rem);color:#c6c0b9}
.gal-hint{font-size:.54rem}
.card-body p{font-size:.83rem}
.spec-row b{font-size:.88rem}
.spec-row span{font-size:.72rem}

/* — Cartes festivals : fond blanc, aucune superposition — */
.logo-card{
  background:#f5f2ed;border-color:rgba(0,0,0,.1);color:#0d0d10;
  display:grid;grid-template-rows:96px auto auto auto;align-items:center;
  gap:.15rem;padding:1.3rem 1.1rem 1.4rem;
  box-shadow:0 14px 40px rgba(0,0,0,.42);
}
.logo-card:hover{background:#fff;border-color:rgba(0,0,0,.18);transform:translateY(-4px)}
.fest-logo{
  grid-row:1;max-height:92px;max-width:100%;width:auto;height:auto;
  object-fit:contain;padding:0;background:none;box-shadow:none;border-radius:0;opacity:1;
}
.logo-card:hover .fest-logo{opacity:1;transform:none}
.logo-card strong{grid-row:2;color:#0d0d10;font-size:2.5rem;font-weight:300;letter-spacing:-.04em;margin-top:.7rem;line-height:1}
.logo-card small{grid-row:3;color:#6d6862;font-size:.5rem;letter-spacing:.13em}
.logo-card em{grid-row:4;color:#2a2a2e;font-size:.86rem;font-weight:500;margin-top:.45rem}

/* — Menu : intitulés réels des sections — */
.scenes-pop{width:min(360px,calc(100vw - 1.4rem))}
.scenes-pop a{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:.7rem;row-gap:.1rem;align-items:baseline;padding:.62rem .8rem;
}
.scenes-pop em{grid-row:1/span 2;align-self:center;font:700 .58rem var(--ff-mono);font-style:normal;color:var(--accent);letter-spacing:.08em}
.scenes-pop b{grid-column:2;font-weight:500;font-size:.9rem;color:var(--paper)}
.scenes-pop i{grid-column:2;font-style:normal;font-size:.72rem;color:#8b847e;line-height:1.3}
.scenes-pop a:hover b{color:#fff}
.scenes-pop a:hover i{color:#b6afa8}

/* Logos festivals : taille réelle (annule les anciennes contraintes) */
.logo-card img.fest-logo{
  max-height:88px!important;max-width:100%!important;
  width:auto!important;height:auto!important;
  padding:0!important;background:none!important;box-shadow:none!important;
  border-radius:0!important;opacity:1!important;transform:none!important;
  justify-self:center;
}
.logo-card{overflow:visible}

/* ═══════════════════════════════════════════════
   BARRE DU BAS — toutes les sections, cliquables
   ═══════════════════════════════════════════════ */
.dock{gap:.3rem;padding:.3rem}
.dock-scroll{
  display:flex;align-items:center;gap:.08rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  max-width:min(60vw,700px);
  scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
}
.dock-scroll::-webkit-scrollbar{display:none}
.dock-scroll a{
  flex:0 0 auto;scroll-snap-align:center;
  padding:.6rem .72rem;border-radius:999px;white-space:nowrap;
  font-size:.76rem;font-weight:450;color:#b9b3ac;
  transition:background .25s,color .25s;
}
.dock-scroll a:hover{background:rgba(255,255,255,.08);color:var(--paper)}
.dock-scroll a.on{background:rgba(255,255,255,.13);color:var(--paper);font-weight:500}

.dock-more{
  flex:0 0 auto;display:grid;gap:3px;place-content:center;
  width:38px;height:38px;border:1px solid var(--line);border-radius:999px;
  transition:background .25s,border-color .25s;
}
.dock-more span{display:block;width:14px;height:1.5px;background:#cfc9c3;border-radius:2px;transition:transform .3s,opacity .3s}
.dock-more:hover{background:rgba(255,255,255,.08)}
.dock-more[aria-expanded="true"]{background:rgba(255,255,255,.14);border-color:rgba(244,241,236,.3)}
.dock-more[aria-expanded="true"] span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.dock-more[aria-expanded="true"] span:nth-child(2){opacity:0}
.dock-more[aria-expanded="true"] span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

.scenes-pop{left:auto;right:0;transform:translateX(0) translateY(6px)}
.scenes-pop:not([hidden]){transform:translateX(0) translateY(0)}

/* ═══════════════════════════════════════════════
   TITRES — vraie hiérarchie HTML + tailles
   ═══════════════════════════════════════════════ */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.dot-h{display:block;width:100%;margin:0;font-weight:inherit;font-size:inherit;line-height:0}
.hero-inner > .dot-h{grid-row:1;width:100%}
.outro-inner .dot-h{width:100%}
.gal-head .dot-h{grid-column:1;width:100%;max-width:min(460px,60vw)}
.head .dot-h{margin-inline:0}

/* sous-titres de bloc (H3) nettement plus présents */
.feature-copy h3,.card-body h3{
  font-size:clamp(1.75rem,3.4vw,2.9rem);
  font-weight:300;letter-spacing:-.035em;line-height:1.06;
}
.card-body h3{font-size:clamp(1.35rem,2.1vw,1.8rem)}
h3.xl{font-size:clamp(2.2rem,4.6vw,3.7rem)}
p.role{font-size:clamp(1.35rem,2.7vw,2.1rem)}
.band-note{font-size:clamp(1.3rem,2.5vw,1.9rem)}
.quote{font-size:clamp(1.4rem,3vw,2.3rem)}
.quote.sm{font-size:clamp(1.15rem,2.1vw,1.55rem)}
.logo-card em{font-size:.95rem}

@media(max-width:1080px){ .dock-scroll{max-width:min(52vw,420px)} }
@media(max-width:620px){
  .dock-scroll{max-width:calc(100vw - 13.5rem)}
  .dock-scroll a{padding:.56rem .6rem;font-size:.74rem}
  .dock-more{width:34px;height:34px}
  .scenes-pop{right:-.3rem;width:min(330px,calc(100vw - 1.2rem))}
}

/* Intitulés de section (« 00 — À propos ») : +5px pour les rendre nettement visibles */
.eyebrow{
  font-size:calc(.55rem + 5px);   /* 8.8px -> 13.8px */
  letter-spacing:.15em;
  color:var(--accent);
}
.eyebrow.in{letter-spacing:.15em}
.gal-hint{font-size:calc(.54rem + 2px)}

/* ═══════════════════════════════════════════════
   BURGER + MENU PLEIN ÉCRAN — accès direct
   ═══════════════════════════════════════════════ */
.dock-more{
  width:auto;height:38px;padding:0 .8rem;gap:.5rem;
  display:flex;align-items:center;
  border:1px solid rgba(244,241,236,.28);background:rgba(255,255,255,.06);
}
.dock-more i{display:grid;gap:3.5px;font-style:normal}
.dock-more i span{width:16px;height:1.7px;background:var(--paper);border-radius:2px;transition:transform .3s,opacity .3s}
.dock-more b{font-size:.76rem;font-weight:500;color:var(--paper);letter-spacing:.01em}
.dock-more:hover{background:rgba(255,255,255,.14);border-color:rgba(244,241,236,.45)}
.dock-more[aria-expanded="true"] i span:nth-child(1){transform:translateY(5.2px) rotate(45deg)}
.dock-more[aria-expanded="true"] i span:nth-child(2){opacity:0}
.dock-more[aria-expanded="true"] i span:nth-child(3){transform:translateY(-5.2px) rotate(-45deg)}

/* panneau plein écran */
.scenes-pop{
  position:fixed;inset:0;left:0;right:0;top:0;bottom:0;
  width:auto;max-width:none;max-height:none;transform:none;
  display:grid;align-content:center;justify-items:center;gap:clamp(1rem,3vh,2rem);
  padding:clamp(4rem,10vh,7rem) clamp(1rem,6vw,4rem) clamp(6rem,14vh,9rem);
  background:rgba(6,6,9,.965);border:0;border-radius:0;box-shadow:none;
  backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);
  overflow-y:auto;z-index:150;
}
.scenes-pop:not([hidden]){transform:none}
.menu-head{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  width:100%;max-width:780px;padding-bottom:.9rem;border-bottom:1px solid var(--line);
}
.menu-kicker{font:700 .62rem var(--ff-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.menu-close{
  width:42px;height:42px;border:1px solid var(--line);border-radius:999px;
  display:grid;place-content:center;font-size:.95rem;color:#cfc9c3;
  transition:background .25s,color .25s,border-color .25s;
}
.menu-close:hover{background:var(--paper);color:#0a0a0c;border-color:var(--paper)}

.menu-list{display:grid;width:100%;max-width:780px;gap:0}
.scenes-pop a{
  display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;row-gap:.1rem;
  align-items:baseline;padding:.72rem .3rem;border-radius:0;
  border-bottom:1px solid var(--line-2);
  transition:background .2s,transform .3s cubic-bezier(.16,1,.3,1);
}
.scenes-pop a:hover{background:rgba(255,255,255,.05);padding-left:1rem}
.scenes-pop em{grid-row:1/span 2;align-self:center;font-size:.66rem;color:var(--accent)}
.scenes-pop b{font-size:clamp(1.15rem,2.4vw,1.7rem);font-weight:300;letter-spacing:-.025em;color:var(--paper)}
.scenes-pop i{font-size:.8rem;color:#8b847e}

body.menu-on{overflow:hidden}

@media(max-width:620px){
  .dock-more{padding:0 .62rem;height:34px}
  .dock-more b{display:none}
  .dock-scroll{max-width:calc(100vw - 12.5rem)}
  .scenes-pop a{padding:.62rem .2rem}
  .scenes-pop b{font-size:1.1rem}
  .scenes-pop i{font-size:.74rem}
}

/* Menu : les 11 sections + l'en-tête tiennent dans l'écran */
.scenes-pop{
  padding:clamp(1.6rem,4.5vh,3rem) clamp(1rem,6vw,4rem) clamp(1.6rem,4.5vh,3rem);
  gap:clamp(.7rem,2vh,1.2rem);
}
.scenes-pop a{padding:.5rem .3rem}
.scenes-pop b{font-size:clamp(1.05rem,1.9vw,1.38rem);line-height:1.3}
.scenes-pop i{font-size:.74rem;line-height:1.25}
.menu-head{padding-bottom:.7rem}
@media(max-height:720px){
  .scenes-pop a{padding:.38rem .3rem}
  .scenes-pop b{font-size:1.02rem}
  .scenes-pop i{font-size:.68rem}
}

/* ═══════════════════════════════════════════════
   BARRE DU BAS — deux régimes
   ≥1000px : logo + les 10 sections + Réserver (aucun burger)
   <1000px : logo + burger + Réserver (le menu porte les sections)
   ═══════════════════════════════════════════════ */
@media(min-width:1000px){
  /* tout tient : plus besoin de burger ni de défilement latéral */
  .dock-more{display:none!important}
  .dock-scroll{
    display:flex!important;
    max-width:none!important;
    overflow:visible!important;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
  .dock-scroll a{display:inline-flex!important}
}

@media(max-width:999px){
  /* la barre se réduit à l'essentiel */
  .dock-scroll{display:none!important}
  .dock-more{display:flex!important}
  .dock-more b{display:inline!important}
  .dock{gap:.45rem}
}

@media(max-width:420px){
  .dock-more{padding:0 .7rem}
  .dock-more b{font-size:.74rem}
  .dock-cta{padding:.6rem .85rem;font-size:.76rem}
}

/* Entrée « Réserver » mise en avant dans le menu */
.scenes-pop a.menu-book{border-bottom:0;margin-top:.5rem;background:rgba(255,122,41,.1);border:1px solid rgba(255,122,41,.35);border-radius:12px;padding:.8rem 1rem}
.scenes-pop a.menu-book:hover{background:rgba(255,122,41,.18);padding-left:1rem}
.scenes-pop a.menu-book b{color:#ffd7b6}
.scenes-pop a.menu-book em{color:var(--accent);font-size:.9rem}

/* ═══════════════════════════════════════════════
   CORRECTIF — l'attribut [hidden] doit toujours masquer
   Un `display:grid` d'auteur écrase la règle navigateur
   `[hidden]{display:none}` : les calques plein écran
   (lightbox, menu) restaient alors devant la page,
   invisibles mais interceptant tous les clics.
   ═══════════════════════════════════════════════ */
[hidden]{display:none!important}

/* ═══════════════════════════════════════════════
   SYSTÈME TYPOGRAPHIQUE
   Anybody (condensé, 800)  — titres, contraste fort
   Hanken Grotesk           — texte courant, humaniste
   Martian Mono (condensé)  — étiquettes techniques
   Trois rôles distincts, un vrai axe de contraste.
   ═══════════════════════════════════════════════ */
:root{
  --ff:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --ff-display:'Anybody','Hanken Grotesk',Impact,sans-serif;
  --ff-mono:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
body{font-family:var(--ff);letter-spacing:-.004em}
.dot-h,h1,h2{font-family:var(--ff-display)}

/* — Titres de bloc : condensé, gras, franc — */
.feature-copy h3,.card-body h3,h3.xl,p.role,.band-note,.quote,.logo-card strong,p.lede,.cta-label{
  font-family:var(--ff-display);
  font-stretch:87.5%;
  font-weight:800;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.feature-copy h3,h3.xl{text-transform:uppercase;line-height:.98}
h3.xl{font-size:clamp(2.4rem,5.2vw,4.2rem)}
.feature-copy h3{font-size:clamp(2rem,3.9vw,3.2rem)}
.card-body h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;letter-spacing:-.02em}
p.role{font-size:clamp(1.5rem,3vw,2.4rem);text-transform:uppercase;font-weight:800;line-height:1.02}
.band-note{font-size:clamp(1.5rem,2.9vw,2.2rem);font-weight:800;text-transform:uppercase;line-height:1.04}
.quote{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:800;line-height:1.06;max-width:22ch}
.quote.sm{font-size:clamp(1.25rem,2.3vw,1.7rem)}
.logo-card strong{font-size:2.7rem;font-weight:800;letter-spacing:-.03em}
p.lede{font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:800;text-transform:uppercase;line-height:1.08;max-width:20ch;color:var(--paper)}

/* — Texte courant : plus aéré sur fond sombre — */
p{line-height:1.68;letter-spacing:-.002em}
.head-note{font-size:1rem;line-height:1.6}

/* — Étiquettes techniques : mono condensé — */
.eyebrow,.pass,.flag,.pills span,.timeline span,.couples em,.spec-row span,
.spec-label,.band-label,.gal-hint,.contacts a,.outro-services,
.feature-media figcaption,.band figcaption,.mosaic figcaption,.duo figcaption,
.gal-track figcaption span,.logo-card small{
  font-family:var(--ff-mono);
  font-stretch:75%;
  font-variation-settings:'wdth' 75;
}

/* ═══════════════════════════════════════════════
   1 · Localisation des artistes, nettement lisible
   ═══════════════════════════════════════════════ */
.flag{
  font-size:.86rem;font-weight:700;letter-spacing:.02em;
  color:var(--gold);display:inline-flex;align-items:center;gap:.4rem;
  padding:.42rem .7rem;margin-top:.15rem;
  border:1px solid rgba(230,189,119,.32);border-radius:8px;
  background:rgba(230,189,119,.08);
  text-transform:none;
}

/* ═══════════════════════════════════════════════
   2 · Passage d'une section à l'autre, bien marqué
   ═══════════════════════════════════════════════ */
.eyebrow{
  font-size:calc(.62rem + 6px);
  font-weight:700;letter-spacing:.14em;
  color:var(--accent);
}
.eyebrow.in{letter-spacing:.14em}
.sec{position:relative;padding-top:clamp(4.5rem,12vh,8rem)}
.sec::before{
  content:"";position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;
  background:linear-gradient(90deg,var(--accent) 0,rgba(255,122,41,.28) 22%,var(--line-2) 55%,transparent 100%);
}
.head{
  padding-top:clamp(1.2rem,3vh,2.2rem);
  gap:1.3rem;
}
.head .eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.5rem .85rem;border-radius:999px;
  border:1px solid rgba(255,122,41,.35);background:rgba(255,122,41,.1);
}

/* ═══════════════════════════════════════════════
   4 · Cachet « Warm-up » + logo sur les artistes
   ═══════════════════════════════════════════════ */
.card-media{position:relative}
.stamp{
  position:absolute;top:.85rem;right:.85rem;z-index:4;
  display:grid;justify-items:center;gap:.15rem;
  padding:.6rem .7rem .5rem;
  border:1px solid rgba(247,245,241,.5);border-radius:12px;
  background:rgba(8,8,11,.62);
  backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%);
  transform:rotate(-7deg);
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.stamp img{width:62px;height:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.stamp em{
  font:700 .5rem var(--ff-mono);font-stretch:75%;font-style:normal;
  letter-spacing:.16em;text-transform:uppercase;color:var(--paper);
}
.card:hover .stamp{transform:rotate(-3deg) scale(1.04)}
@media(max-width:620px){
  .stamp{top:.6rem;right:.6rem;padding:.5rem .55rem .42rem}
  .stamp img{width:52px}
  .stamp em{font-size:.44rem}
}

/* ═══════════════════════════════════════════════
   12 · Appel à l'action final, franc et lisible
   ═══════════════════════════════════════════════ */
.cta-final{
  display:inline-grid;grid-template-columns:1fr auto;align-items:center;
  column-gap:clamp(1.2rem,3vw,2.4rem);row-gap:.1rem;
  padding:clamp(1rem,2.4vw,1.5rem) clamp(1.4rem,3.4vw,2.4rem);
  border-radius:999px;background:var(--paper);color:#0a0a0c;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  transition:background .3s,transform .45s cubic-bezier(.16,1,.3,1),box-shadow .3s;
  text-align:left;
}
.cta-final:hover{background:#fff;transform:translateY(-3px);box-shadow:0 24px 64px rgba(0,0,0,.6)}
.cta-label{
  grid-column:1;font-size:clamp(1.25rem,2.6vw,1.9rem);
  font-stretch:87.5%;font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1;color:#0a0a0c;
}
.cta-sub{
  grid-column:1;grid-row:2;
  font:700 .58rem var(--ff-mono);font-stretch:75%;
  letter-spacing:.14em;text-transform:uppercase;color:#6a655f;margin-top:.3rem;
}
.cta-arrow{
  grid-column:2;grid-row:1/span 2;width:clamp(24px,3vw,32px);height:auto;color:#0a0a0c;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.cta-final:hover .cta-arrow{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){
  .cta-final:hover{transform:none}
  .cta-final:hover .cta-arrow{transform:none}
}

/* Barres de progression : mise à l'échelle, pas de recalcul de mise en page */
.rail i,.pass-bar i,.loader-bar i{
  width:100%;transform:scaleX(0);transform-origin:left;
  transition:transform .12s linear;
}
.loader-bar i{transition:transform .3s ease}
/* Survol du menu : déplacement, pas de marge intérieure animée */
.scenes-pop a{transition:background .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.scenes-pop a:hover{padding-left:.3rem;transform:translateX(10px)}
.scenes-pop a.menu-book:hover{padding-left:1rem;transform:translateX(6px)}

/* La pastille de section épouse son texte */
.head .eyebrow,.gal-head .eyebrow{justify-self:start;width:max-content;max-width:100%}
.head-note{text-wrap:pretty}
.head .eyebrow{margin-bottom:.2rem}

/* ═══════════════════════════════════════════════
   MARIAGES — le déroulé pris en charge, en bulles
   ═══════════════════════════════════════════════ */
.ceremonie{
  display:grid;grid-template-columns:minmax(90px,150px) 1fr;gap:1rem;
  padding:1.6rem 0 0;margin-top:clamp(1.4rem,3.5vh,2.2rem);
  border-top:1px solid var(--line-2);
}
.ceremonie .spec-label{padding-top:.5rem}
.ceremonie-pills{gap:.5rem}
.ceremonie-pills span{
  padding:.66rem 1.05rem;
  font-size:.84rem;font-weight:700;letter-spacing:.01em;
  font-family:var(--ff);font-stretch:100%;
  text-transform:none;color:var(--paper);
  border:1px solid rgba(230,189,119,.34);
  background:rgba(230,189,119,.09);
  border-radius:999px;
  transition:background .25s,border-color .25s,transform .3s cubic-bezier(.16,1,.3,1);
}
.ceremonie-pills span:hover{
  background:rgba(230,189,119,.17);
  border-color:rgba(230,189,119,.55);
  transform:translateY(-2px);
}
@media(max-width:820px){
  .ceremonie{grid-template-columns:1fr;gap:.8rem}
  .ceremonie .spec-label{padding-top:0}
  .ceremonie-pills span{font-size:.8rem;padding:.58rem .9rem}
}
@media(prefers-reduced-motion:reduce){ .ceremonie-pills span:hover{transform:none} }

/* Le déroulé : un vrai titre qui chapeaute les bulles */
.ceremonie{
  grid-template-columns:1fr;
  gap:clamp(1rem,2.4vh,1.5rem);
  padding-top:clamp(1.8rem,4vh,2.6rem);
}
.ceremonie-titre{
  font-family:var(--ff-display);font-stretch:87.5%;font-weight:800;
  font-size:clamp(1.7rem,3.4vw,2.7rem);
  text-transform:uppercase;letter-spacing:-.025em;line-height:1;
  color:var(--paper);margin:0;text-wrap:balance;
}
@media(max-width:820px){ .ceremonie-titre{font-size:clamp(1.45rem,6vw,2rem)} }

/* Affiche « Triangle des Bermudes » : visible en entier, jamais rognée */
.card-media:has(img[src*="artist-mauvaisdjo.webp"]){background:#0a1116}
.card-media.poster-card{background:#0a1116}
.card-media img[src*="artist-mauvaisdjo.webp"]{
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
}
.card:hover .card-media img[src*="artist-mauvaisdjo.webp"]{transform:scale(1.02)!important}

/* Logo Nouvelle École : dessin blanc, il lui faut une plaque sombre */
.card-logos img[src*="logo-nouvelle-ecole.webp"]{
  background:#14141a;
  border:1px solid rgba(247,245,241,.22);
  padding:.34rem .55rem;
  height:44px;max-width:120px;
}
.card-logos img[src*="logo-netflix.webp"]{height:38px;padding:.3rem .5rem}
.card-logos img[src*="logo-gotti.webp"]{height:44px}

/* ═══════════════════════════════════════════════
   Titre de bloc réutilisable — même traitement que
   « Déroulé pris en charge », pour « Prestations à
   l'international ».
   ═══════════════════════════════════════════════ */
.bloc{
  display:grid;grid-template-columns:1fr;
  gap:clamp(1rem,2.4vh,1.5rem);
  margin-top:clamp(1.4rem,3.5vh,2.2rem);
  padding-top:clamp(1.8rem,4vh,2.6rem);
  border-top:1px solid var(--line-2);
}
.bloc-titre{
  font-family:var(--ff-display);font-stretch:87.5%;font-weight:800;
  font-size:clamp(1.7rem,3.4vw,2.7rem);
  text-transform:uppercase;letter-spacing:-.025em;line-height:1;
  color:var(--paper);margin:0;text-wrap:balance;
}
.bloc .pills.wide{margin-top:0}
@media(max-width:820px){ .bloc-titre{font-size:clamp(1.45rem,6vw,2rem)} }

/* Galerie : le repère « 08 — Galerie » porte la même
   pastille que tous les autres repères de section. */
.gal-head .eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.5rem .85rem;border-radius:999px;
  border:1px solid rgba(255,122,41,.35);
  background:rgba(255,122,41,.1);
}

/* Un repère long (« Conférence de presse · Bruxelles ») ne doit jamais
   pousser la page : il se replie au lieu de déborder. */
.eyebrow{max-width:100%;box-sizing:border-box}
.brief .eyebrow{width:fit-content;justify-self:start;text-align:left}

/* ═══════════════════════════════════════════════
   HERO EN DEUX COLONNES
   La photo est un portrait très vertical (1320×2604).
   En plein écran, elle imposait un recadrage brutal :
   un visage énorme et flou. Sur une demi-page, elle
   retrouve ses proportions — et la colonne de gauche
   accueille le logo, les rôles et l'accroche.
   ═══════════════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;isolation:isolate;overflow:hidden;
  display:grid;grid-template-rows:1fr auto;text-align:left;
  padding:clamp(2.2rem,5vh,3.4rem) var(--gut) clamp(6.5rem,13vh,8.5rem);
  background:#05060d;
}

/* ─ la photo, moitié droite ─ */
.hero-media{
  position:absolute;top:-6%;bottom:-6%;right:0;left:auto;
  width:min(56%,880px);z-index:-1;will-change:transform;
}
.hero-media img{
  display:block;width:100%;height:100%;margin:0;
  object-fit:cover;object-position:56% 22%;
  opacity:1;filter:contrast(1.03) saturate(.95) brightness(.9);
  /* le bord gauche se fond dans le noir : le texte se pose sur du plein */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 12%,#000 34%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 12%,#000 34%,#000 100%);
}
.hero-media::before{display:none}
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,6,13,.5) 0,transparent 18%,transparent 62%,rgba(5,6,13,.55) 86%,var(--ink) 100%);
}

/* ─ la colonne de texte ─ */
.hero-col{
  grid-row:1;align-self:center;justify-self:start;
  display:grid;justify-items:start;gap:0;
  max-width:min(540px,50vw);
}
.hero-logo{
  margin:0 0 clamp(1rem,2.4vh,1.5rem);line-height:0;
  animation:heroIn .95s cubic-bezier(.16,1,.3,1) .25s backwards;
}
.hero-logo img{width:min(300px,34vw);height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}

.hero-roles{
  margin:0;font-family:var(--ff-mono);font-stretch:75%;
  font-size:clamp(.6rem,.95vw,.72rem);font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:#d8d2cb;
  animation:heroIn .95s cubic-bezier(.16,1,.3,1) .4s backwards;
}
.hero-roles i{font-style:normal;color:var(--gold);margin:0 .3em}



@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1}}

.scroll-cue{display:none}

/* ═══════ Hero — tablette et téléphone ═══════ */
@media(max-width:900px){
  .hero{
    grid-template-rows:auto 1fr auto;
    padding:clamp(4.5rem,10vh,6rem) var(--gut) clamp(6rem,12vh,7.5rem);
  }
  /* la photo repasse en fond, cadrée sur le visage et le micro */
  .hero-media{top:0;bottom:0;right:0;left:0;width:auto}
  .hero-media img{
    object-position:center 6%;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero-media::after{
    background:linear-gradient(to bottom,rgba(5,6,13,.55) 0,rgba(5,6,13,.1) 14%,rgba(5,6,13,.22) 40%,rgba(5,6,13,.9) 62%,var(--ink) 88%);
  }
  .hero-col{grid-row:2;align-self:end;max-width:none;justify-self:stretch}
  .hero-logo img{width:min(220px,52vw)}
}
@media(prefers-reduced-motion:reduce){
  .hero-logo,.hero-roles{animation:none}
}

/* Dans le hero, la carte d'embarquement s'efface : elle affiche
   « Ouverture » sans rien apprendre, et masquait le 02. */
.pass{transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
body.au-sommet .pass{opacity:0;transform:translateY(12px);pointer-events:none}


/* fondu plus long sur le bord gauche de la photo : pas de couture visible */
.hero-media img{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 16%,#000 46%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 16%,#000 46%,#000 100%);
}
@media(max-width:900px){
  .hero-media img{-webkit-mask-image:none;mask-image:none}
}

/* ═══════════════════════════════════════════════
   HERO sur téléphone — la photo occupe le haut,
   le texte se pose sur un fond franchement sombre.
   Le logo ne doit jamais retomber sur son visage.
   ═══════════════════════════════════════════════ */
@media(max-width:900px){
  .hero{grid-template-rows:auto 1fr;padding-bottom:clamp(5.5rem,12vh,7rem)}
  .hero-media img{object-position:center 4%}
  .hero-media::after{
    background:linear-gradient(to bottom,
      rgba(5,6,13,.5) 0,rgba(5,6,13,.06) 12%,rgba(5,6,13,.1) 30%,
      rgba(5,6,13,.72) 46%,rgba(5,6,13,.93) 58%,var(--ink) 78%);
  }
  .hero-col{grid-row:2;align-self:end}
  .hero-logo{margin-bottom:.8rem}
  .hero-logo img{width:min(158px,42vw)}
  .hero-roles{font-size:.58rem;letter-spacing:.14em}
}

/* ═══════════════════════════════════════════════
   GALERIE — défilement horizontal réel
   Plus d'épinglage : la piste est un conteneur qui
   défile latéralement. On la fait glisser, on la
   balaie au doigt, ou on utilise les flèches.
   ═══════════════════════════════════════════════ */
.gal-pin{
  position:static;height:auto;overflow:visible;
  grid-template-rows:auto auto;align-content:start;
  padding:clamp(3.2rem,8vh,5rem) 0 clamp(5.5rem,13vh,7.5rem);
}
.gal-track{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-padding-inline:var(--gut);
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  padding-block:.5rem;
  transform:none!important;               /* plus aucun pilotage par le scroll vertical */
  will-change:auto;
}
.gal-track::-webkit-scrollbar{display:none}
.gal-track.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.gal-track.is-drag img{pointer-events:none}
.gal-track figure{
  scroll-snap-align:center;
  transform:none!important;               /* le balancement sinusoïdal n'a plus lieu d'être */
  width:clamp(230px,25vw,340px);
}

/* les flèches deviennent la commande principale : plus visibles,
   et éteintes quand on est au bout */
.gal-nav button{
  width:52px;height:52px;font-size:1.05rem;
  background:rgba(247,245,241,.06);border-color:rgba(247,245,241,.28);color:var(--paper);
}
.gal-nav button:disabled{opacity:.28;cursor:default;background:none}
.gal-nav button:not(:disabled):hover{background:var(--paper);color:#0a0a0c;border-color:var(--paper)}

@media(max-width:820px){
  .gal-track figure{width:min(72vw,290px)}
  .gal-pin{padding:clamp(3rem,7vh,4.2rem) 0 clamp(3rem,8vh,4.5rem)}
}
@media(prefers-reduced-motion:reduce){
  .gal-track{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════
   « WORLD-CLASS MC » sous le logo
   Reprise du traitement de la V8 que le client
   aime : capitales condensées lourdes, dégradé
   blanc → or. Les trois rôles suivent, à
   l'horizontale, comme sur sa référence.
   ═══════════════════════════════════════════════ */
.hero-titre{
  margin:0 0 clamp(.7rem,1.8vh,1.1rem);
  display:grid;justify-items:start;gap:clamp(.9rem,2.2vh,1.4rem);
  font-weight:inherit;font-size:inherit;line-height:1;
  animation:heroIn .95s cubic-bezier(.16,1,.3,1) .25s backwards;
}
.hero-logo{
  display:block;width:min(250px,30vw);height:auto;margin:0;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));
}
.hero-wc{
  display:block;
  font-family:var(--ff-display);font-stretch:87.5%;font-weight:800;
  font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:.92;
  letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance;
  color:var(--paper);                       /* repli si le dégradé n'est pas géré */
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .hero-wc{
    background:linear-gradient(96deg,#ffffff 0%,#f6efdd 26%,#eccf94 52%,#e6bd77 72%,#d4902f 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}

/* les trois rôles, alignés à l'horizontale sous le titre */
.hero-roles{
  margin:0;font-family:var(--ff);font-weight:500;
  font-size:clamp(.82rem,1.35vw,1.02rem);
  letter-spacing:.01em;text-transform:none;color:#e4ded7;
  animation:heroIn .95s cubic-bezier(.16,1,.3,1) .45s backwards;
}
.hero-roles i{font-style:normal;color:var(--gold);margin:0 .45em}

/* le hero n'a plus qu'une rangée : la colonne de texte */
.hero{grid-template-rows:1fr;padding-bottom:clamp(6.5rem,13vh,8.5rem)}
.hero-col{max-width:min(600px,52vw)}

@media(max-width:900px){
  .hero{grid-template-rows:1fr;padding-bottom:clamp(5.5rem,12vh,7rem)}
  .hero-col{max-width:none}
  .hero-titre{gap:.8rem;margin-bottom:.7rem}
  .hero-logo{width:min(150px,40vw)}
  .hero-wc{font-size:clamp(2rem,8.6vw,2.9rem)}
  .hero-roles{font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){
  .hero-titre,.hero-roles{animation:none}
}
.hero-titre,.hero-roles{opacity:1}

/* Réseaux sociaux — dans le pied de page uniquement */
.contacts a.social{display:inline-flex;align-items:center;gap:.55rem}
.contacts a.social svg{width:17px;height:17px;flex:0 0 auto;color:var(--gold)}
.contacts a.social:hover svg{color:var(--paper)}

/* Sur téléphone, le logo se pose au centre, sur la poitrine de MC Flava.
   Il est légèrement décalé à droite du centre de l'écran : dans le cadrage
   vertical, son torse n'est pas exactement au milieu. */
@media(max-width:900px){
  .hero-titre{justify-self:stretch;width:100%;gap:1rem}
  .hero-logo{justify-self:center;margin-left:5vw}
}

/* Sur téléphone, tout le bloc du hero se centre sous le logo.
   Le filet, l'accroche et le paragraphe suivent : laissés à gauche
   sous un titre centré, ils auraient l'air d'un décalage raté. */
@media(max-width:900px){
  .hero-col{justify-items:center;text-align:center}
  .hero-titre{justify-items:center}
  .hero-logo{margin-left:5vw}          /* son torse n'est pas au centre exact du cadre */
  .hero-wc{text-align:center}
}

/* ═══════════════════════════════════════════════
   HERO — le bloc ne garde que le logo, « World-class MC »
   et les trois rôles. Tout est centré, sur ordinateur
   comme sur téléphone.
   ═══════════════════════════════════════════════ */
.hero-col{
  justify-items:center;text-align:center;
  justify-self:start;margin-left:0;max-width:none;
}
/* le bloc se centre dans l'espace libre à GAUCHE de la photo,
   pas au milieu de l'écran : la photo occupe la moitié droite. */
@media(min-width:901px){
  .hero-col{width:44%}                              /* la photo prend 56% */
}
@media(min-width:1572px){
  .hero-col{width:calc(100% - 880px + var(--gut))}  /* au-delà, la photo est bloquée à 880px */
}
.hero-titre{justify-items:center;width:100%;gap:clamp(1rem,2.6vh,1.7rem)}
.hero-logo{justify-self:center;margin-left:0}
.hero-wc{text-align:center}
.hero-roles{text-align:center}

@media(max-width:900px){
  .hero-col{max-width:none;margin-left:0;justify-self:stretch}
  .hero-logo{margin-left:5vw}            /* son torse n'est pas au centre exact du cadre */
  .hero-titre{gap:1rem}
}

/* Sur téléphone, le bloc raccourci retombait sous lui : on le
   remonte pour que le logo se pose de nouveau sur sa poitrine. */
@media(max-width:900px){
  .hero-col{grid-row:1;align-self:start;margin-top:36svh}
}

/* Nouveau cadrage : la photo fournie est un peu moins haute
   (0,563 contre 0,507) et le sujet est descendu de trois points.
   Sur grand écran on remonte la fenêtre pour garder le mur
   au-dessus de sa tête, le visage et le micro au centre. */
.hero-media img{object-position:56% 8%}
@media(max-width:900px){
  .hero-media img{object-position:center center}
  .hero-col{margin-top:38svh}          /* le logo se pose sous le micro, sur la veste */
}

/* Plus de voile sombre en haut de la photo : le dégradé démarre
   transparent. Seul le bas reste assombri — c'est ce qui rend le
   texte lisible. */
.hero-media::after{
  background:linear-gradient(to bottom,
    transparent 0,transparent 62%,
    rgba(5,6,13,.55) 86%,var(--ink) 100%);
}
@media(max-width:900px){
  .hero-media::after{
    background:linear-gradient(to bottom,
      transparent 0,transparent 36%,
      rgba(5,6,13,.42) 52%,rgba(5,6,13,.80) 67%,
      rgba(5,6,13,.94) 81%,var(--ink) 93%);
  }
  /* et le bloc descend encore de 10 px */
  .hero-col{margin-top:calc(38svh + 10px)}
}

/* ═══════════════════════════════════════════════
   Repère « faites défiler » — téléphone uniquement.
   Sur ordinateur la molette est un réflexe ; au doigt,
   rien ne dit que la page continue sous l'image.
   ═══════════════════════════════════════════════ */
@media(max-width:900px){
  .scroll-cue{
    display:grid;z-index:3;
    bottom:calc(env(safe-area-inset-bottom) + 6.4rem);
    gap:.5rem;font-size:.56rem;letter-spacing:.18em;color:#cdc6bf;
    animation:up .9s ease 1.4s backwards;opacity:1;
  }
  .scroll-cue i{
    width:1px;height:26px;
    background:linear-gradient(var(--gold),rgba(230,189,119,0));
    animation:cueMobile 1.9s cubic-bezier(.4,0,.2,1) infinite;
  }
  @keyframes cueMobile{
    0%   {transform:translateY(-6px) scaleY(.35);opacity:0;transform-origin:top}
    35%  {opacity:1}
    100% {transform:translateY(10px) scaleY(1);opacity:0;transform-origin:top}
  }
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .scroll-cue{animation:none}
  .scroll-cue i{animation:none;opacity:.7}
}

/* Écrans courts (iPhone SE et compagnie) : le bloc remonte,
   sinon le repère de défilement chevauche la ligne des rôles. */
@media(max-width:900px) and (max-height:720px){
  .hero-col{margin-top:calc(30svh + 10px)}
  .scroll-cue{bottom:calc(env(safe-area-inset-bottom) + 5.6rem)}
}

/* ═══════════════════════════════════════════════
   Téléphone — la photo remonte : la bande de mur et
   de plafond en haut est recadrée. Le bloc suit du
   même nombre de pixels, pour que le logo reste posé
   sur sa poitrine.
   ═══════════════════════════════════════════════ */
@media(max-width:900px){
  /* Compromis de cadrage : à 118 % la photo devait grossir pour remplir
     l'écran et on n'en voyait que 70 % de la largeur. À 104 % on en voit
     79 % — les gens autour de lui réapparaissent — au prix d'une fine
     bande de plafond qui revient en haut. C'est la limite : en dessous
     de 100 %, la photo ne couvre plus l'écran. */
  .hero-media{top:auto;bottom:0;height:104%}
  .hero-col{margin-top:calc(31svh + 10px)}
}
@media(max-width:900px) and (max-height:720px){
  .hero-col{margin-top:calc(19svh + 10px)}
}

/* Le repère de défilement : plus de texte, juste une flèche */
@media(max-width:900px){
  .scroll-cue{gap:0;font-size:0;letter-spacing:0}
  .scroll-cue svg{
    width:30px;height:30px;color:var(--gold);
    animation:flecheBas 2.4s cubic-bezier(.45,0,.2,1) infinite;
  }
  /* fondu très marqué : elle s'efface presque entièrement avant de revenir */
  @keyframes flecheBas{
    0%,100% {transform:translateY(-2px);opacity:.05}
    45%     {transform:translateY(7px);opacity:1}
    62%     {transform:translateY(8px);opacity:.92}
  }
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .scroll-cue svg{animation:none;opacity:.8}
}

/* « Scroll » au-dessus de la flèche, dans le même or */
@media(max-width:900px){
  .scroll-cue{gap:.45rem}
  .scroll-cue b{
    display:block;
    font-family:var(--ff-mono);font-stretch:87.5%;
    font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold);
    animation:scrollRespire 2.4s cubic-bezier(.45,0,.2,1) infinite;
  }
  @keyframes scrollRespire{0%,100%{opacity:.05}45%{opacity:1}62%{opacity:.92}}
  /* le bloc redescend */
  .hero-col{margin-top:calc(39svh + 10px)}
}
@media(max-width:900px) and (max-height:720px){
  .hero-col{margin-top:calc(32svh + 10px)}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .scroll-cue b{animation:none;opacity:.85}
}

/* ═══════════════════════════════════════════════
   À PROPOS — la photo est verticale (0,8) et le cadre
   était en 4/3 : on n'en voyait que 60 %, ses mains et
   le haut de sa tête passaient hors champ. Le cadre
   s'ouvre en 4/5, comme sur téléphone.
   ═══════════════════════════════════════════════ */
@media(min-width:821px){
  #apropos .feature-media{aspect-ratio:4/5}
}
/* Le cadre est exactement au ratio de la photo (0,8) : sans zoom, elle
   tient entière, parfaitement centrée. Le zoom de parallaxe lui coupait
   le bout des doigts en haut — même défaut sur téléphone, même correctif. */
#apropos .feature-media img{transform:none!important;object-position:center center!important}


/* ═══════════════════════════════════════════════
   Nouvelle photo (0,68 au lieu de 0,563) : cadrée plus
   large, elle n'a presque plus de bande de mur en haut
   et descend jusqu'au bas de la veste. Les repères de
   cadrage sont recalés.
   ═══════════════════════════════════════════════ */
.hero-media img{object-position:center top}   /* le sujet commence dès le haut de la photo */
@media(max-width:900px){
  /* plus besoin de rogner le haut : le sujet y commence déjà */
  .hero-media{top:auto;bottom:0;height:102%}
  .hero-media img{object-position:center center}
}

/* ═══════════════════════════════════════════════
   Téléphone — la photo ne remplit plus toute la hauteur.
   Large de 0,68 contre 0,462 pour l'écran, elle devait
   grossir de 50 % pour couvrir : on n'en voyait que
   67 % de la largeur. Arrêtée à 88 % de la hauteur, on
   en voit 78 % — les gens autour reviennent — et le
   dégradé rejoint le noir pile où elle s'arrête.
   ═══════════════════════════════════════════════ */
@media(max-width:900px){
  .hero-media{top:0;bottom:auto;height:88%}
  .hero-media::after{
    background:linear-gradient(to bottom,
      transparent 0,transparent 34%,
      rgba(5,6,13,.34) 46%,rgba(5,6,13,.68) 56%,
      rgba(5,6,13,.86) 68%,rgba(5,6,13,.97) 88%,var(--ink) 100%);
  }
  /* le logo suit sa poitrine, remontée avec le nouveau cadrage */
  .hero-col{margin-top:calc(31svh + 10px)}
}
@media(max-width:900px) and (max-height:720px){
  .hero-col{margin-top:calc(26svh + 10px)}
}

/* ═══════════════════════════════════════════════
   Deux cadrages selon l'écran (<picture>) :
   • téléphone  → la photo large (0,68), les gens autour
   • ordinateur → la photo haute (0,563), qui remplit
     mieux la demi-page verticale
   ═══════════════════════════════════════════════ */
@media(min-width:901px){
  .hero-media img{object-position:56% 8%}
}