/* ─────────────────────────────────────
   TOKENS
───────────────────────────────────── */
:root {
  --bg:     #080808;
  --s1:     #0f0f0f;
  --s2:     #161616;
  --red:    #FF2D2D;
  --red-t:  rgba(255,45,45,.18);
  --white:  #F2F2F2;
  --muted:  #555;
  --b:      rgba(255,255,255,.07);
  --bh:     rgba(255,45,45,.22);
  --f:      'Space Grotesk', sans-serif;
  --hh:     60px;
  --pad:    clamp(14px,3.5vw,52px);
}

/* ─────────────────────────────────────
   RESET
───────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--f);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

/* ─────────────────────────────────────
   GRAIN
───────────────────────────────────── */
.grain {
  position:fixed; inset:0; z-index:900;
  pointer-events:none; opacity:.012;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* ─────────────────────────────────────
   CURSEUR
───────────────────────────────────── */
.cursor { display:none; }

/* ─────────────────────────────────────
   UTILS
───────────────────────────────────── */
.red { color:var(--red); }

.cell-label {
  display:block;
  font-size:.58rem; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}

.reveal {
  opacity:0; transform:translateY(16px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.on { opacity:1; transform:none; }

.recdot {
  display:inline-block;
  width:7px; height:7px; border-radius:50%;
  background:#22C55E;
  animation:blink 1.3s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.15} }

/* ─────────────────────────────────────
   HEADER
───────────────────────────────────── */
#hdr {
  position:fixed; inset:0 0 auto; z-index:500;
  height:var(--hh);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  border-bottom:1px solid transparent;
  transition:background .35s, border-color .35s;
}
#hdr.scrolled {
  background:rgba(8,8,8,.92);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-color:var(--b);
}
.logo { font-size:1rem; font-weight:700; letter-spacing:.06em; }
#hdr nav { display:flex; gap:30px; }
#hdr nav a {
  font-size:.65rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); transition:color .2s;
  position:relative;
}
#hdr nav a::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:0; height:1px; background:var(--red);
  transition:width .22s;
}
#hdr nav a:hover { color:var(--white); }
#hdr nav a:hover::after { width:100%; }
.hdr-pill {
  display:flex; align-items:center; gap:7px;
  font-size:.6rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--white);
  background:var(--red); border:1px solid var(--red);
  padding:9px 18px;
  transition:background .2s, color .2s;
}
.hdr-pill:hover { background:transparent; color:var(--red); }
.pill-dot { width:6px; height:6px; border-radius:50%; background:#22C55E; animation:blink 1.3s ease-in-out infinite; }

/* ─────────────────────────────────────
   PAGE BENTO — grille maîtresse
───────────────────────────────────── */
.pg {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top:var(--hh);
  border-left:1px solid var(--b);
  border-top:1px solid var(--b);
}

.cell {
  border-right:1px solid var(--b);
  border-bottom:1px solid var(--b);
  position:relative;
  overflow:hidden;
  background:var(--bg);
  transition:border-color .3s;
}
.cell:hover { border-color:var(--bh); }

/* ─────────────────────────────────────
   HERO — placements
   Col: 1        2         3         4
   R1:  [PHOTO]  [NAME×2cols       ][REEL]
   R2:  [PHOTO]  [DISPO]  [APPROACH][REEL]
   R3:  [LOC]    [DELIVERY×2cols   ][REEL]
───────────────────────────────────── */
.c-photo    { grid-column:1/2; grid-row:1/3; }
.c-name     { grid-column:2/4; grid-row:1/2; min-height:200px; }
.c-reel     { grid-column:4/5; grid-row:1/3; }
.c-dispo    { grid-column:3/4; grid-row:2/3; }
.c-approach { grid-column:2/3; grid-row:2/3; }
.c-loc      { grid-column:1/2; grid-row:3/4; }
.c-delivery { grid-column:2/4; grid-row:3/4; }

.c-ticker   { grid-column:1/5; }
.c-projects { grid-column:1/5; }

.c-stat1    { grid-column:3/4; }
.c-stat2    { grid-column:4/5; }
.c-svc      { grid-column:1/5; }

.c-section-hd { grid-column:1/5; background:var(--bg); }
.c-clients    { grid-column:1/5; }
.c-awards     { grid-column:1/5; }

.c-contact  { grid-column:1/5; }
.c-footer   { grid-column:1/5; }

/* ─────────────────────────────────────
   PHOTO PROFIL
───────────────────────────────────── */
.c-photo { background:var(--s2); }

.profile-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
  z-index:2;
}

.photo-click-hint {
  position:absolute;
  bottom:14px; left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px 5px 8px;
  background:rgba(10,10,18,.72);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  backdrop-filter:blur(6px);
  pointer-events:none;
  animation:hint-pulse 2.8s ease-in-out infinite;
}
.click-hint-dot {
  width:7px; height:7px;
  background:var(--red);
  border-radius:50%;
  flex-shrink:0;
  animation:recdot-blink 1.2s ease-in-out infinite;
}
.click-hint-label {
  font-size:.52rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
  white-space:nowrap;
}
@keyframes hint-pulse {
  0%,100% { opacity:.7; transform:translateX(-50%) translateY(0); }
  50%      { opacity:1;  transform:translateX(-50%) translateY(-3px); }
}

/* ─────────────────────────────────────
   NOM + TITRE
───────────────────────────────────── */
.c-name { background:var(--s1); }

.name-inner {
  height:100%; display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(24px,3vw,44px);
  position:relative; z-index:2;
  gap:10px;
}

.hero-name {
  display:flex; flex-direction:column;
  font-size:clamp(2.6rem,6vw,7rem);
  font-weight:700;
  line-height:.87;
  letter-spacing:-.04em;
  text-transform:uppercase;
}

/* split text animation */
.hn { display:block; overflow:hidden; }
.hn .l {
  display:inline-block;
  opacity:0; transform:translateY(105%);
  animation:lup .65s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes lup { to { opacity:1; transform:translateY(0); } }

.name-foot {
  display:flex; align-items:flex-end;
  justify-content:space-between; gap:12px;
  flex-wrap:wrap;
}
.hero-sub {
  font-size:clamp(.68rem,1vw,.82rem);
  color:var(--muted); line-height:1.75;
}
.hero-sub-small {
  font-size:clamp(.58rem,.8vw,.68rem);
  color:rgba(255,255,255,.28);
  letter-spacing:.06em;
}

.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  background:var(--white); color:var(--bg);
  padding:12px 22px; flex-shrink:0;
  position:relative; overflow:hidden;
  transition:gap .25s;
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background:var(--red); transform:translateX(-101%);
  transition:transform .3s ease;
}
.btn-primary:hover::before { transform:translateX(0); }
.btn-primary:hover { color:var(--white); gap:14px; }

.wm {
  position:absolute; right:-10px; top:-20px; z-index:1;
  font-size:clamp(100px,18vw,240px);
  font-weight:700; letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.04);
  line-height:1; pointer-events:none; user-select:none;
}

/* ─────────────────────────────────────
   SHOWREEL
───────────────────────────────────── */
.c-reel { background:#000; }

.reel-meta {
  position:absolute; bottom:18px; left:18px; z-index:3;
  display:flex; flex-direction:column; gap:1px;
}
.reel-meta span {
  font-size:.54rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.4); line-height:1.5;
}
.c-reel iframe {
  position:absolute;
  border:none; display:block; z-index:1;
}

/* ─────────────────────────────────────
   DISPONIBILITÉ
───────────────────────────────────── */
.c-dispo { background:var(--s1); }

.dispo-inner {
  height:100%; padding:clamp(24px,3vw,40px);
  display:flex; flex-direction:column; justify-content:space-between; gap:12px;
}
.rec-row { display:flex; align-items:center; gap:9px; }
.rec-label { font-size:.85rem; font-weight:600; }
.dispo-line {
  font-size:clamp(.92rem,1.2vw,1.12rem);
  font-weight:600; line-height:1.35;
  color:rgba(255,255,255,.88);
  letter-spacing:-.01em; flex:1;
}
.dispo-cta {
  display:inline-block;
  font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--red); transition:letter-spacing .2s;
}
.dispo-cta:hover { letter-spacing:.26em; }

/* ─────────────────────────────────────
   ÉQUIPEMENT / APPROCHE
───────────────────────────────────── */
.c-approach { background:var(--bg); }

.approach-inner {
  height:100%; padding:clamp(24px,3vw,40px);
  display:flex; flex-direction:column; justify-content:flex-end; gap:10px;
  position:relative; overflow:hidden;
}
.approach-hook {
  font-size:clamp(1.5rem,3.1vw,2.3rem);
  font-weight:700; line-height:1.08; letter-spacing:-.025em;
  color:var(--white); margin:2px 0 0;
  position:relative;
}
.approach-body {
  font-size:.78rem; color:var(--muted); line-height:1.55;
  max-width:34ch; position:relative;
}
.approach-body strong { color:var(--white); font-weight:700; }

.equip-gear {
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  margin-top:2px;
}
.gear-item {
  font-size:.58rem; font-weight:600;
  letter-spacing:.08em; color:var(--muted);
}
.gear-sep { color:rgba(255,45,45,.5); font-size:.5rem; }

/* ─────────────────────────────────────
   LOCALISATION
───────────────────────────────────── */
.c-loc {
  display:flex; align-items:center; gap:14px;
  padding:clamp(16px,2vw,26px);
}
.flag { font-size:2rem; line-height:1; }
.loc-txt strong { display:block; font-size:.9rem; font-weight:600; }
.loc-txt span { display:block; font-size:.6rem; font-weight:600; letter-spacing:.12em; color:var(--muted); margin-top:3px; text-transform:uppercase; }

/* ─────────────────────────────────────
   DÉLAI DE LIVRAISON
───────────────────────────────────── */
.c-delivery {
  display:flex; align-items:center; gap:18px;
  padding:clamp(16px,2vw,26px);
  background:var(--s1);
}
.delivery-n {
  font-size:clamp(2rem,4vw,3.6rem);
  font-weight:700; letter-spacing:-.04em; line-height:1;
  color:var(--white); white-space:nowrap;
}
.delivery-n span { color:var(--red); }
.delivery-l {
  font-size:.62rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); line-height:1.5;
}

/* ─────────────────────────────────────
   MANIFESTE
───────────────────────────────────── */
.c-manifesto { grid-column:1/5; background:var(--s1); }

.manifesto-inner {
  padding:clamp(28px,4vw,56px);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:clamp(14px,2vw,28px) clamp(28px,5vw,72px);
  align-items:start;
}
.manifesto-inner .cell-label { grid-column:1/3; margin-bottom:0; }
.manifesto-q {
  grid-column:1/2;
  font-size:clamp(1.05rem,2.2vw,1.7rem);
  font-weight:700; line-height:1.25;
  letter-spacing:-.02em;
  color:var(--white);
  border-left:2px solid var(--red);
  padding-left:clamp(14px,2vw,24px);
}
.manifesto-sub {
  grid-column:2/3;
  font-size:.78rem; color:var(--muted);
  line-height:1.75; align-self:center;
}
.manifesto-tags {
  grid-column:1/3;
  display:flex; gap:10px; flex-wrap:wrap;
  border-top:1px solid var(--b);
  padding-top:18px;
}
.manifesto-tags span {
  font-size:.55rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--red);
  border:1px solid var(--red-t);
  padding:5px 12px;
}

/* ─────────────────────────────────────
   TICKER
───────────────────────────────────── */
.c-ticker { overflow:hidden; padding:13px 0; background:var(--s1); }
.ticker-track {
  display:flex; align-items:center; gap:26px;
  width:max-content;
  animation:march 22s linear infinite;
}
.c-ticker:hover .ticker-track { animation-play-state:paused; }
.ticker-track span {
  font-size:.6rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.ticker-track i { font-style:normal; color:var(--red); font-size:.38rem; }
@keyframes march { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ─────────────────────────────────────
   PROJETS
───────────────────────────────────── */
.c-projects { padding:clamp(36px,5vw,80px) clamp(24px,3.5vw,48px) clamp(40px,5.5vw,88px); }

.proj-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:clamp(18px,2.5vw,32px);
  padding-bottom:clamp(14px,2vw,24px);
  border-bottom:1px solid var(--b);
}
.sec-h {
  font-size:clamp(1.6rem,3vw,2.6rem);
  font-weight:700; letter-spacing:-.03em; line-height:1.05;
}
.section-hd-inner {
  padding:clamp(24px,3.5vw,44px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(16px,3vw,48px); flex-wrap:wrap;
}
.section-hd-sub {
  font-size:.75rem; color:var(--muted); line-height:1.7;
  max-width:480px; flex-shrink:0;
}
.hint { font-size:.58rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

.proj-scroll {
  overflow-x:auto; overflow-y:visible;
  scrollbar-width:none; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:2px 0 6px;
}
.proj-scroll::-webkit-scrollbar { display:none; }
.proj-track {
  display:flex; gap:clamp(14px,1.6vw,24px);
  width:max-content; padding-bottom:4px;
}

.pcard {
  flex-shrink:0;
  width:clamp(240px,26vw,320px);
  scroll-snap-align:start;
  background:var(--bg);
  display:flex; flex-direction:column;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.pcard:hover { transform:translateY(-6px); }

.pm {
  aspect-ratio:9/16;
  background:linear-gradient(170deg,var(--c1),var(--c2));
  position:relative; overflow:hidden; flex-shrink:0;
}
.pgl {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 88%,var(--gl,transparent) 0%,transparent 60%);
  pointer-events:none; z-index:1;
}
.pnum {
  position:absolute; bottom:-8px; right:6px;
  font-size:5rem; font-weight:700; letter-spacing:-.05em;
  color:rgba(255,255,255,.05); line-height:1;
  user-select:none; pointer-events:none; z-index:0;
}
.pbadge {
  position:absolute; top:14px; left:14px;
  font-size:.48rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.92);
  padding:5px 10px; z-index:4;
}
.ppw {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:5; opacity:0; background:rgba(0,0,0,.12);
  transition:opacity .25s;
}
.pcard:hover .ppw { opacity:1; }
.pplay {
  width:48px; height:48px;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.4); backdrop-filter:blur(6px);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s, color .2s;
}
.pplay:hover { background:var(--red); border-color:var(--red); }
.pcard--ig { cursor:pointer; }
.pplay--ig {
  width:48px; height:48px; border-radius:50%;
  background:rgba(0,0,0,.5); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s;
}
.pcard--ig:hover .pplay--ig { transform:scale(1.12); }
.pvid { position:absolute; inset:0; z-index:3; display:none; }
/* En lecture, la vidéo monte au-dessus des calques décoratifs. */
.pvid.on { display:block; z-index:20; }

/* Les infos restent visibles AU-DESSUS de la vidéo, mais transparentes aux
   clics : la timeline et le plein écran redeviennent atteignables.
   Le padding bas dégage la barre de contrôle du lecteur. */
.pcard:has(.pvid.on) .pi {
  z-index:21;
  pointer-events:none;
  padding-bottom:56px;
  background:linear-gradient(to top,
    rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 38%,
    rgba(0,0,0,.3) 72%, transparent 100%);
}
/* Badge, durée et chiffre s'effacent : eux n'apportent rien pendant la lecture */
.pcard:has(.pvid.on) .pbadge,
.pcard:has(.pvid.on) .pdur,
.pcard:has(.pvid.on) .pnum { opacity:0; pointer-events:none; }
.pvid iframe { width:100%; height:100%; border:none; }
.pvid video { width:100%; height:100%; object-fit:cover; display:block; }
.pi {
  position:absolute; bottom:0; left:0; right:0; z-index:6;
  padding:64px 18px 18px;
  background:linear-gradient(to top,
    rgba(0,0,0,.96) 0%, rgba(0,0,0,.86) 32%,
    rgba(0,0,0,.45) 68%, transparent 100%);
  display:flex; flex-direction:column; gap:4px;
}
.py { font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.pi h3 {
  font-size:1.06rem; font-weight:700; letter-spacing:-.015em;
  line-height:1.15; color:#fff;
}
.pi p {
  font-size:.6rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:2px;
}

.proj-nav { display:flex; align-items:center; gap:10px; margin-top:20px; }
.narr {
  width:32px; height:32px;
  border:1px solid var(--b); background:transparent;
  color:var(--muted); font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s;
}
.narr:hover { border-color:var(--red); color:var(--red); }
.ndots { display:flex; gap:6px; }
.ndot {
  width:4px; height:4px; border-radius:50%;
  background:var(--s2); border:none; padding:0;
  transition:background .2s, transform .25s;
}
.ndot.on { background:var(--red); transform:scale(1.7); }

/* ─────────────────────────────────────
   BRAND CARDS
───────────────────────────────────── */
/* Grid placements — brand section */
.c-peach    { grid-column:1/3; min-height:280px; }
.c-pitch    { grid-column:3/4; min-height:280px; }
.c-taro     { grid-column:4/5; min-height:280px; }

.c-peach,.c-pitch,.c-taro { background:var(--bg); }

.bbg {
  position:absolute; inset:0;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.cell:hover .bbg { transform:scale(1.04); }

.bcontent {
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(22px,3.5vw,44px) clamp(22px,3.5vw,44px) clamp(28px,4vw,52px);
  background:linear-gradient(to top,rgba(8,8,8,.98) 0%,rgba(8,8,8,.5) 55%,transparent 100%);
}
.bname {
  font-size:clamp(1.7rem,2.8vw,2.8rem);
  font-weight:700; letter-spacing:-.03em; line-height:.9;
  color:var(--white); text-transform:uppercase;
  margin:8px 0 11px;
}
.bdesc { font-size:.75rem; color:rgba(242,242,242,.5); line-height:1.65; max-width:280px; margin-bottom:16px; }
.burl {
  display:inline-block; font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--red);
  transition:letter-spacing .25s;
}
.burl:hover { letter-spacing:.28em; }

/* Social links on brand cards */
.bsocial { display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; }
.brole + .bsocial, .brole + .burl { margin-top:16px; }
.bsoc-link {
  font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--red);
  transition:letter-spacing .2s;
}
.bsoc-link:hover { letter-spacing:.26em; }

/* Balexert */
.balexert-bg {
  background:radial-gradient(ellipse at 60% 20%,#14141e 0%,#050508 100%);
}
.balexert-bg::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:24px 24px;
}
.balexert-bg::after {
  content:''; position:absolute; top:10%; right:5%;
  width:50%; aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,45,45,.1) 0%,transparent 65%);
  filter:blur(50px);
}

.peach-bg { background:radial-gradient(ellipse at 30% 18%,#141414 0%,#070707 100%); }
.peach-bg::before {
  content:''; position:absolute; top:0; right:0;
  width:60%; aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,45,45,.10) 0%,transparent 65%);
  filter:blur(40px);
}
.pitch-bg { background:radial-gradient(ellipse at 50% 10%,#161616 0%,#060606 100%); }
.pitch-bg::before {
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.02) 0px,rgba(255,255,255,.02) 1px,transparent 1px,transparent 44px);
}
.pitch-bg::after {
  content:''; position:absolute; top:8%; left:50%; transform:translateX(-50%);
  width:70%; aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,45,45,.07) 0%,transparent 65%);
  filter:blur(24px);
}
.taro-bg { background:radial-gradient(ellipse at 50% 10%,#141414 0%,#060606 100%); }
.taro-bg::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:36px 36px;
}
.taro-bg::after {
  content:''; position:absolute; top:6%; left:50%; transform:translateX(-50%);
  width:55%; aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,45,45,.07) 0%,transparent 60%);
  filter:blur(30px);
}

/* ─────────────────────────────────────
   BEST OF — feed social
───────────────────────────────────── */
.bestof-inner {
  padding:clamp(24px,3.5vw,48px);
}
.bestof-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:clamp(16px,2.5vw,28px);
  padding-bottom:16px;
  border-bottom:1px solid var(--b);
}
.bestof-hint {
  font-size:.58rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.bestof-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--b);
  margin-bottom:20px;
}
.bpost {
  aspect-ratio:9/16;
  position:relative; overflow:hidden;
  background:var(--s2);
}
.bpost--ig { border-top:2px solid transparent; }
.bpost--ig:hover { border-top-color:var(--red); }
.bpost--tk { border-top:2px solid transparent; }
.bpost--tk:hover { border-top-color:#69C9D0; }

.bpost-ph {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px; padding:16px; text-align:center;
}
.bpost-icon { font-size:1.8rem; opacity:.4; }
.bpost-lbl {
  font-size:.62rem; font-weight:600;
  letter-spacing:.1em; color:var(--muted);
  line-height:1.6;
}
.bpost-lbl small {
  display:block; font-size:.52rem;
  color:rgba(255,45,45,.6); margin-top:4px;
  font-weight:400; letter-spacing:.06em;
}

/* embed Instagram/TikTok override */
.bpost iframe,
.bpost blockquote.instagram-media,
.bpost blockquote.tiktok-embed {
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  border:none; margin:0 !important;
  min-width:unset !important; max-width:unset !important;
}

.bestof-note {
  font-size:.62rem; color:var(--muted);
  line-height:1.7; border-top:1px solid var(--b);
  padding-top:14px; margin-top:4px;
}
.bestof-note code {
  font-family:monospace; font-size:.6rem;
  color:var(--red); background:var(--red-t);
  padding:1px 5px;
}

/* ─────────────────────────────────────
   BOOSTER CELL
───────────────────────────────────── */
.c-booster {
  grid-column:1/5;
  background:var(--s1);
}
.booster-inner {
  height:100%;
  padding:clamp(22px,3vw,44px);
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto 1fr;
  column-gap:clamp(28px,4vw,56px);
  row-gap:14px;
  align-items:start;
}
.booster-pack {
  position:relative;
  width:clamp(100px,10vw,160px);
  grid-row:1/4;
  align-self:center;
  flex-shrink:0;
}
.booster-img {
  width:100%; display:block;
  position:relative; z-index:1;
  filter:drop-shadow(0 8px 28px rgba(199,125,255,.35)) drop-shadow(0 0 12px rgba(255,45,45,.2));
}
.booster-shine {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.45) 50%,transparent 75%);
  background-size:200% 100%;
  animation:booster-shimmer 2.2s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:screen;
}
@keyframes booster-shimmer {
  0%,100% { background-position:200% 0; }
  50%      { background-position:-50% 0; }
}
.booster-title {
  font-size:clamp(1.05rem,1.9vw,1.42rem);
  font-weight:700; color:var(--white); line-height:1.2;
  letter-spacing:-.015em;
  margin-top:10px;
}
.booster-desc {
  font-size:.74rem; color:var(--muted); line-height:1.7;
  max-width:44ch;
  margin-top:10px;
}
.booster-holo-btn {
  justify-self:start; align-self:end;
  background:linear-gradient(135deg,#ff006e,#fb5607,#ffbe0b,#06d6a0,#118ab2,#c77dff,#ff006e);
  background-size:300% 300%;
  animation:holo-shift 3s ease infinite;
  border:none; color:#fff;
  font-family:var(--f);
  font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  padding:11px 22px;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.booster-holo-btn:hover {
  transform:scale(1.05);
  box-shadow:0 0 22px rgba(255,0,110,.4), 0 0 44px rgba(6,214,160,.2);
}
@keyframes holo-shift {
  0%,100% { background-position:0% 50%; }
  50%      { background-position:100% 50%; }
}

/* ─────────────────────────────────────
   BOOSTER OVERLAY
───────────────────────────────────── */
.booster-overlay {
  position:fixed; inset:0; z-index:800;
  background:rgba(4,4,4,.97);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:32px;
  opacity:0; pointer-events:none;
  transition:opacity .4s;
}

/* GIF flottant en absolu — ne perturbe pas le layout des cartes */
.booster-gif-float {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:clamp(160px,22vw,300px);
  display:block;
  filter:drop-shadow(0 0 40px rgba(199,125,255,.6));
  z-index:10;
}
.booster-overlay.open { opacity:1; pointer-events:all; }

/* phases */
.bov-phase { display:none; flex-direction:column; align-items:center; gap:24px; }
.bov-phase.active {
  display:flex;
  animation: phase-fade-in .35s ease forwards;
}
@keyframes phase-fade-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
/* Cartes : fade seul, sans déplacement vertical */
#bovCards.active {
  animation: cards-fade .38s ease forwards;
}
@keyframes cards-fade {
  from { opacity:0; }
  to   { opacity:1; }
}
/* GIF + cartes coexistent : GIF réduit au-dessus des cartes */
#bovOpening.active { gap:12px; }
#bovOpening.active .booster-gif { width:clamp(100px,13vw,160px); }

/* ── Phase 1 : invitation ── */
.invite-pack {
  position:relative;
  width:clamp(140px,18vw,240px);
  cursor:pointer;
  /* le float est porté par le parent : l'image ET le voile suivent */
  animation:booster-float 2.8s ease-in-out infinite;
}
.invite-img {
  width:100%; display:block; position:relative; z-index:2;
  filter:drop-shadow(0 12px 32px rgba(199,125,255,.4));
}
@keyframes booster-float {
  0%,100% { transform:translateY(0)   rotate(-2deg); }
  50%      { transform:translateY(-14px) rotate(2deg); }
}

/* shimmer masqué sur la forme PNG */
.invite-shine {
  position:absolute; inset:0; z-index:3;
  background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.45) 50%,transparent 75%);
  background-size:200% 100%;
  animation:booster-shimmer 2s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:screen;
  /* masque l'effet à la forme exacte du PNG */
  -webkit-mask-image:url('img/booster.png');
          mask-image:url('img/booster.png');
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
}
/* même fix pour la cellule sur la page */
.booster-shine {
  -webkit-mask-image:url('img/booster.png');
          mask-image:url('img/booster.png');
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
}

.invite-glow {
  position:absolute; inset:-20%; z-index:1;
  background:radial-gradient(ellipse at 50% 60%,rgba(199,125,255,.22) 0%,transparent 65%);
  animation:glow-pulse 2.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glow-pulse {
  0%,100% { opacity:.6; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.12); }
}

.invite-hint {
  font-size:.65rem; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.35);
  animation:hint-blink 1.8s ease-in-out infinite;
}
@keyframes hint-blink {
  0%,100% { opacity:.35; }
  50%      { opacity:.9; }
}

/* ── Phase 2 : GIF ouverture ── */
.booster-gif {
  width:clamp(160px,22vw,300px);
  display:block;
  filter:drop-shadow(0 0 40px rgba(199,125,255,.6));
}

/* ── Phase 3 : pile de cartes ── */
.cards-stack {
  position:relative;
  width:clamp(130px,16vw,210px);
  height:clamp(200px,24vw,320px);
  cursor:pointer;
  overflow:visible;
}
.bcard {
  position:absolute; inset:0;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
  transform-origin:bottom center;
}
/* décalage de pile */
.bcard:nth-child(1) { z-index:1; transform:translate(12px,7px)  rotate( 4deg); }
.bcard:nth-child(2) { z-index:2; transform:translate( 9px,5px)  rotate( 2.5deg); }
.bcard:nth-child(3) { z-index:3; transform:translate( 6px,3px)  rotate( 1.5deg); }
.bcard:nth-child(4) { z-index:4; transform:translate( 4px,2px)  rotate(  .8deg); }
.bcard:nth-child(5) { z-index:5; transform:translate( 2px,1px)  rotate(  .2deg); }
.bcard:nth-child(6) { z-index:6; transform:translate( 0,  0  )  rotate(  0deg);  }
.bcard img { width:100%; height:100%; object-fit:contain; display:block; }

/* ── Éventail final ── */
.cards-stack.fan { cursor:default; }
.cards-stack.fan .bcard:nth-child(1) { transform:translate(-230px,20px) rotate(-22deg); }
.cards-stack.fan .bcard:nth-child(2) { transform:translate(-140px,6px)  rotate(-13deg); }
.cards-stack.fan .bcard:nth-child(3) { transform:translate( -48px,0px)  rotate( -4deg); }
.cards-stack.fan .bcard:nth-child(4) { transform:translate(  48px,0px)  rotate(  4deg); }
.cards-stack.fan .bcard:nth-child(5) { transform:translate( 140px,6px)  rotate( 13deg); }
.cards-stack.fan .bcard:nth-child(6) { transform:translate( 230px,20px) rotate( 22deg); }
.cards-stack.fan .bcard { cursor:default; pointer-events:none; }

/* CTA éventail */
.fan-cta {
  display:none; flex-direction:column;
  align-items:center; gap:14px;
  margin-top:20px; text-align:center;
  animation:fade-up .5s ease forwards;
}
.fan-cta.visible { display:flex; }
@keyframes fade-up {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
.fan-cta-title {
  font-size:.6rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
}
.fan-cta-sub {
  font-size:clamp(.9rem,1.4vw,1.15rem);
  font-weight:700; color:var(--white);
  line-height:1.3;
}
.fan-cta-sub strong { color:var(--red); }
@keyframes fly-right {
  0%   { transform: translateX(0)     scale(1);   }
  68%  { transform: translateX(260px) scale(0.92); }
  100% { transform: translateX(320px) scale(0);   }
}
@keyframes fly-left {
  0%   { transform: translateX(0)      scale(1);   }
  68%  { transform: translateX(-260px) scale(0.92); }
  100% { transform: translateX(-320px) scale(0);   }
}
.bcard.fly-right {
  animation: fly-right .52s cubic-bezier(.3,0,.7,.6) forwards;
  pointer-events: none;
}
.bcard.fly-left {
  animation: fly-left .52s cubic-bezier(.3,0,.7,.6) forwards;
  pointer-events: none;
}

.stack-hint {
  font-size:.62rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.35);
  animation:hint-blink 1.8s ease-in-out infinite;
}
.stack-hint.done {
  animation:none; color:rgba(255,255,255,.2);
}

/* liens store */
.store-links {
  display:none; flex-direction:column; align-items:center; gap:16px;
  margin-top:8px;
}
.store-links.visible { display:flex; }
.store-label {
  font-size:.62rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.store-btns { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.store-btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 22px;
  font-family:var(--f); font-size:.65rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.18);
  color:var(--white); background:rgba(255,255,255,.05);
  transition:background .22s, border-color .22s, transform .22s;
}
.store-btn:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); transform:translateY(-2px); }
.store-ios     { border-color:rgba(255,255,255,.25); }
.store-android { border-color:rgba(255,255,255,.25); }

/* bouton fermer */
.booster-overlay-close {
  background:transparent;
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
  font-family:var(--f); font-size:.6rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  padding:10px 26px; cursor:pointer;
  transition:border-color .2s, color .2s;
}
.booster-overlay-close:hover { border-color:var(--red); color:var(--red); }

/* ─────────────────────────────────────
   ACHIEVEMENT HUD
───────────────────────────────────── */
.achiev-hud {
  position:fixed; bottom:24px; right:24px; z-index:600;
  background:rgba(8,8,8,.92);
  border:1px solid var(--b);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:12px 16px; min-width:170px;
  font-family:var(--f);
  transform:translateY(20px); opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .5s;
}
.achiev-hud.visible { transform:translateY(0); opacity:1; }

.hud-top {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:7px;
}
.hud-label {
  font-size:.5rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.hud-score { font-size:.95rem; font-weight:700; color:var(--white); font-variant-numeric:tabular-nums; }
.hud-max   { font-size:.6rem; color:var(--muted); }

.hud-bar {
  height:2px; background:var(--s2); margin-bottom:10px; overflow:hidden;
}
.hud-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--red),#c77dff);
  transition:width .9s cubic-bezier(.16,1,.3,1);
}

.hud-dots { display:flex; gap:7px; flex-wrap:wrap; }
.hud-dot {
  width:9px; height:9px; border-radius:50%;
  background:var(--s2); border:1px solid rgba(255,255,255,.08);
  transition:background .4s, border-color .4s, box-shadow .4s;
  position:relative; cursor:default;
}
.hud-dot.unlocked {
  background:var(--red); border-color:var(--red);
  box-shadow:0 0 7px rgba(255,45,45,.6);
}
.hud-dot[data-tip]:hover::after {
  content:attr(data-tip);
  position:absolute; bottom:16px; right:0;
  background:rgba(8,8,8,.97); border:1px solid var(--b);
  font-size:.52rem; letter-spacing:.1em; color:var(--white);
  padding:4px 9px; white-space:nowrap; pointer-events:none;
  z-index:10;
}

/* ─────────────────────────────────────
   ACHIEVEMENT TOAST
───────────────────────────────────── */
.achiev-toast {
  position:fixed; bottom:130px; right:24px; z-index:700;
  background:rgba(8,8,8,.97);
  border:1px solid rgba(255,255,255,.06);
  border-left:3px solid var(--red);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding:12px 16px;
  display:flex; align-items:center; gap:12px;
  max-width:260px; min-width:220px;
  transform:translateX(130%);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.achiev-toast.show { transform:translateX(0); }

.toast-icon { font-size:1.5rem; flex-shrink:0; }
.toast-body { display:flex; flex-direction:column; gap:2px; }
.toast-sup  {
  font-size:.48rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--red);
}
.toast-name { font-size:.82rem; font-weight:700; color:var(--white); line-height:1.2; }
.toast-pts  { font-size:.6rem; font-weight:700; color:rgba(199,125,255,.9); letter-spacing:.1em; }

/* ─────────────────────────────────────
   STATS
───────────────────────────────────── */
.c-stat1,.c-stat2 {
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
  padding:clamp(22px,3vw,36px);
  background:var(--s1); gap:5px;
}
.stat-n {
  font-size:clamp(2.8rem,5vw,4.5rem);
  font-weight:700; letter-spacing:-.04em; line-height:1;
  color:var(--red);
}
.stat-n sup { font-size:.45em; vertical-align:super; }
.stat-l { font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ─────────────────────────────────────
   SERVICES
───────────────────────────────────── */
.c-svc {
  padding:clamp(22px,3vw,36px);
  background:var(--s1);
  display:flex; flex-direction:column; gap:14px;
}
.svc-list { list-style:none; display:flex; flex-direction:column; gap:7px; }
.svc-list li {
  font-size:.8rem; color:var(--white);
  padding-left:18px; position:relative; transition:color .2s;
}
.svc-list li::before { content:'→'; position:absolute; left:0; color:var(--red); font-size:.68rem; }
.svc-list li:hover { color:var(--red); }
.svc-list li.svc-highlight {
  color:var(--white); border-top:1px solid var(--b);
  margin-top:6px; padding-top:10px;
}
.svc-list li.svc-highlight::before { content:'✦'; color:var(--red); }

/* ─────────────────────────────────────
   SOMIAM INSTAGRAM ROW (name cell)
───────────────────────────────────── */
.somiam-row {
  display:inline-flex; align-items:center; gap:7px;
  margin-top:10px;
  padding:5px 12px; border:1px solid var(--b); border-radius:20px;
  background:var(--s1);
  transition:border-color .2s;
}
.somiam-row svg { color:var(--muted); flex-shrink:0; }
.somiam-link {
  font-size:.6rem; font-weight:700; letter-spacing:.08em;
  color:var(--white); transition:color .2s;
}
.somiam-link:hover { color:var(--red); }
.somiam-sep { color:var(--muted); font-size:.6rem; }

/* ─────────────────────────────────────
   CLIENTS TICKER
───────────────────────────────────── */
.c-clients {
  overflow:hidden;
  background:var(--bg);
  padding:0;
  border-top:1px solid var(--b);
}
.clients-inner {
  padding:clamp(28px,3.4vw,44px) 0 clamp(26px,3.2vw,40px);
  display:flex; flex-direction:column; gap:18px;
}
.clients-label { padding:0 clamp(18px,3vw,36px); }
.clients-label {
  font-size:.54rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
}
.clients-track-wrap { overflow:hidden; }
.clients-track {
  display:flex; gap:clamp(38px,5vw,72px); width:max-content;
  align-items:center;
  animation:clients-scroll 70s linear infinite;
  white-space:nowrap;
}
.clients-track.rev { animation-direction:reverse; animation-duration:40s; }
.clients-track span {
  font-size:clamp(.95rem,1.5vw,1.35rem);
  font-weight:700; color:rgba(255,255,255,.82);
  letter-spacing:.02em; text-transform:uppercase;
  transition:color .2s;
}
.clients-track span:hover { color:var(--white); }
.clients-track i {
  color:var(--red); font-style:normal;
  font-size:.42rem; align-self:center; opacity:.7;
}
@keyframes clients-scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ─────────────────────────────────────
   BIO / PARCOURS
───────────────────────────────────── */
.c-bio { background:var(--s1); }
.bio-inner {
  height:100%;
  padding:clamp(22px,3vw,36px);
  display:flex; flex-direction:column; gap:18px;
}
.bio-deg {
  font-size:.75rem; font-weight:600; color:var(--white);
  padding-bottom:14px; border-bottom:1px solid var(--b);
  line-height:1.5;
}
.bio-deg strong { color:var(--red); display:block; font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; }
.bio-roles { display:flex; flex-direction:column; gap:12px; }
.bio-role { display:flex; flex-direction:column; gap:3px; }
.bio-role strong {
  font-size:.74rem; font-weight:700; color:var(--white); line-height:1.3;
}
.bio-role span {
  font-size:.64rem; color:var(--muted); line-height:1.5;
}
.bio-tags {
  display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;
}
.bio-tags span {
  font-size:.54rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--b); border-radius:20px; padding:3px 9px;
}

/* ─────────────────────────────────────
   AWARDS
───────────────────────────────────── */
.c-awards { background:var(--bg); }
.awards-inner {
  padding:clamp(26px,3.2vw,44px);
  display:flex; flex-direction:column; gap:20px;
}
.awards-list {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:0;
}
.award {
  display:flex; flex-direction:column; gap:14px;
  padding:clamp(20px,2.8vw,32px);
  border-right:1px solid var(--b);
  position:relative; overflow:hidden;
}
.award:last-child { border-right:none; }
.award--main { background:var(--s1); }

.award-num {
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  line-height:1; opacity:.9;
  position:absolute; top:14px; right:18px;
}
.award-body { display:flex; flex-direction:column; gap:5px; position:relative; }
.award-year {
  font-size:.54rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red);
}
.award-title {
  font-size:clamp(.82rem,1.4vw,1rem);
  font-weight:700; color:var(--white); line-height:1.25;
  margin-top:2px;
}
.award-org {
  font-size:.62rem; color:var(--muted); font-weight:500; margin-top:2px;
}
.award-meta {
  font-size:.6rem; color:var(--muted); line-height:1.6; font-style:italic;
  margin-top:4px;
}
.award-tag {
  display:inline-block; margin-top:6px; width:fit-content;
  font-size:.52rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red);
  border:1px solid rgba(255,45,45,.3); border-radius:20px; padding:3px 10px;
}

/* ─────────────────────────────────────
   CONTACT
───────────────────────────────────── */
.c-contact { background:var(--s1); }
.contact-inner {
  padding:clamp(32px,5vw,72px);
  display:flex; flex-direction:column; gap:24px;
}
.contact-top {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.contact-status {
  display:flex; align-items:center; gap:8px;
  font-size:.58rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.big-mail {
  display:block;
  font-size:clamp(1.8rem,5.5vw,7rem);
  font-weight:700; letter-spacing:-.04em; line-height:.9;
  color:var(--white); transition:color .25s;
  word-break:break-all;
}
.big-mail:hover { color:var(--red); }

/* Contact form */
.contact-form { display:flex; flex-direction:column; gap:12px; }
.cf-row { display:flex; gap:12px; }
.cf-row .cf-input { flex:1; min-width:0; }
.cf-input {
  background:var(--s2); border:1px solid var(--b);
  color:var(--white); font-family:var(--f); font-size:.8rem;
  padding:13px 16px; border-radius:6px; outline:none; width:100%;
  transition:border-color .2s;
}
.cf-input:focus { border-color:var(--red); }
.cf-input::placeholder { color:var(--muted); }
.cf-textarea { resize:vertical; min-height:110px; }
.cf-submit {
  align-self:flex-start;
  background:var(--red); color:#fff; border:none;
  font-family:var(--f); font-weight:700; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:13px 30px; border-radius:4px; cursor:pointer;
  transition:opacity .2s;
}
.cf-submit:hover { opacity:.82; }
.cf-success {
  display:none;
  padding:20px 0;
  font-size:.82rem; color:var(--white); opacity:.7;
  letter-spacing:.04em;
}
@media(max-width:480px) { .cf-row { flex-direction:column; } }

.contact-links {
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding-top:20px; border-top:1px solid var(--b);
}
.slink {
  font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); transition:color .2s;
}
.slink:hover { color:var(--red); }
.contact-loc { font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-left:auto; }

/* ─────────────────────────────────────
   FOOTER
───────────────────────────────────── */
.c-footer {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  padding:18px var(--pad);
  font-size:.58rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.tc { color:var(--red); font-variant-numeric:tabular-nums; }

/* ─────────────────────────────────────
   RESPONSIVE
───────────────────────────────────── */
@media (max-width:1100px) {
  .pg { grid-template-columns:repeat(3,1fr); }

  .c-photo    { grid-column:1/2; grid-row:1/3; }
  .c-name     { grid-column:2/4; grid-row:1/2; }
  .c-reel     { display:none; }
  .c-dispo    { grid-column:3/4; grid-row:2/3; }
  .c-approach { grid-column:2/3; grid-row:2/3; }

  .c-section-hd,.c-projects,.c-booster,
  .c-svc,.c-clients,.c-awards,.c-contact,.c-footer { grid-column:1/4; }

  .c-peach    { grid-column:1/3; }
  .c-pitch    { grid-column:3/4; }
  .c-taro     { grid-column:1/4; min-height:220px; }

  .section-hd-inner { flex-direction:column; align-items:flex-start; }
  .section-hd-sub   { max-width:100%; }
}

@media (max-width:768px) {
  .pg { grid-template-columns:repeat(2,1fr); }

  .c-photo    { grid-column:1/2; grid-row:1/3; min-height:280px; }
  .c-name     { grid-column:2/3; grid-row:1/2; min-height:160px; }
  .c-reel     { display:none; }
  .c-approach { grid-column:1/2; grid-row:2/3; }
  .c-dispo    { grid-column:2/3; grid-row:2/3; }

  .c-section-hd,.c-projects,.c-booster,
  .c-svc,.c-clients,.c-awards,.c-contact,.c-footer { grid-column:1/3; }

  .c-peach    { grid-column:1/2; min-height:240px; }
  .c-pitch    { grid-column:2/3; min-height:240px; }
  .c-taro     { grid-column:1/3; min-height:200px; }

  .section-hd-inner { flex-direction:column; align-items:flex-start; }
  .section-hd-sub   { max-width:100%; }
  .awards-list      { grid-template-columns:1fr; }
  .award            { border-right:none; border-bottom:1px solid var(--b); }
  .award:last-child { border-bottom:none; }

  #hdr nav,.hdr-pill { display:none; }
  .hint { display:none; }
  .pcard { width:70vw; }
  .name-foot { flex-direction:column; align-items:flex-start; }
}

@media (max-width:480px) {
  .pg { grid-template-columns:1fr; }
  .c-photo,.c-name,.c-reel,.c-dispo,.c-approach,
  .c-section-hd,.c-projects,
  .c-peach,.c-pitch,.c-taro,
  .c-booster,.c-svc,.c-clients,.c-awards,.c-contact,.c-footer { grid-column:1/2; grid-row:auto; }
  .c-photo { min-height:260px; }
  .hero-name { font-size:clamp(3rem,16vw,5rem); }
  .pcard { width:82vw; }
  .section-hd-inner { flex-direction:column; align-items:flex-start; }
  .section-hd-sub   { max-width:100%; }
  .sec-h            { font-size:clamp(1.3rem,7vw,1.8rem); }
  .awards-list      { grid-template-columns:1fr; }
  .award            { border-right:none; border-bottom:1px solid var(--b); }
  .award:last-child { border-bottom:none; }
  .booster-inner    { grid-template-columns:1fr; }
  .booster-pack     { grid-row:auto; width:clamp(80px,28vw,120px); margin:0 auto; }
  .bestof-grid { grid-template-columns:repeat(2,1fr); }
  .manifesto-inner { grid-template-columns:1fr; }
  .manifesto-q,.manifesto-sub,.manifesto-tags { grid-column:1/2; }
}

/* ═══════════════════════════════════════════════════
   PERFECT MODE — HOLOGRAPHIQUE COLLECTOR
═══════════════════════════════════════════════════ */
html.perfect-mode {
  --red:   #cc77ff;
  --red-t: rgba(160,100,255,.22);
  --bh:    rgba(80,180,255,.28);
  --b:     rgba(100,150,255,.1);
}

/* Canvas désactivé — hors du flux, jamais affiché */
#perfectGradientCanvas { position:fixed; inset:0; opacity:0 !important; pointer-events:none; }

/* Fond holographique animé — derrière les cellules, jamais sur les photos */
#holoBg {
  position:fixed; inset:-15%; z-index:0;
  pointer-events:none;
  opacity:0; transition:opacity 2s ease;
  background:
    radial-gradient(ellipse 45% 30% at 22% 20%, rgba(0,170,210,.65) 0%, transparent 55%),
    radial-gradient(ellipse 38% 50% at 75% 65%, rgba(160,0,200,.60) 0%, transparent 55%),
    radial-gradient(ellipse 58% 26% at 50% 82%, rgba(210,80,0,.55)  0%, transparent 55%),
    radial-gradient(ellipse 32% 44% at 6%  62%, rgba(60,0,200,.55)  0%, transparent 52%);
  animation: holo-bg-drift 28s ease-in-out infinite;
  will-change:transform;
}
html.perfect-mode #holoBg { opacity:0; }
#holoBg::after {
  content:'';
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    -45deg,
    transparent            0,
    rgba(255,255,255,.018) 1px,
    transparent            2px,
    transparent            80px
  );
  animation: lines-sweep 8s linear infinite;
}
@keyframes lines-sweep {
  from { background-position: 0 0; }
  to   { background-position: 113px 113px; }
}
@keyframes holo-bg-drift {
  0%,100% { transform:translate(0,0)     scale(1);    }
  20%      { transform:translate(3%,-5%) scale(1.05); }
  45%      { transform:translate(-4%,3%) scale(.96);  }
  65%      { transform:translate(5%,4%)  scale(1.03); }
  82%      { transform:translate(-2%,-4%) scale(.98); }
}

/* Fond — noir pur, le glow du bord apporte la couleur */
html.perfect-mode body { background: #020008; }

html.perfect-mode .cell { background:rgba(4,3,16,.76) !important; position:relative; z-index:1; }

html.perfect-mode .grain { opacity:.06; z-index:900; }

/* Photos et vidéos : isolation totale — zéro effet les recouvre */
html.perfect-mode .c-photo,
html.perfect-mode .pvid,
html.perfect-mode #reelFrame {
  isolation:isolate;
}
html.perfect-mode .c-photo { background:rgba(8,8,18,.9) !important; }

/* ── Keyframes ── */
@keyframes holo-shift {
  0%,100% { background-position:0% 50%; }
  50%      { background-position:100% 50%; }
}

/* Titres — lueur cyan */
html.perfect-mode .cell-title,
html.perfect-mode .stat-val,
html.perfect-mode .approach-title,
html.perfect-mode .manifesto-q {
  color:#c8e0ff;
  text-shadow:0 0 20px rgba(120,180,255,.5), 0 0 50px rgba(100,140,255,.22);
}

html.perfect-mode .hero-sub,
html.perfect-mode .cell-desc,
html.perfect-mode .stat-label {
  color:rgba(200,220,255,.72);
}

/* ── Nom hero ── */
html.perfect-mode .hero-name { color:inherit; animation:none; }
html.perfect-mode .hero-name .hn { overflow:visible; }

/* NICOLAS + PAOLETTI — gradient en continu sur tout le bloc */
html.perfect-mode #hn1,
html.perfect-mode #hn2 {
  background: linear-gradient(90deg,
    #D4AF37 0%, #ffe08a 14%, #ffadd6 28%,
    #7ee8fa 42%, #b784ff 57%, #7de8c8 72%,
    #ffe46b 86%, #D4AF37 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: none;
  animation: holo-shift 5s ease infinite;
}
/* .l en display:inline — le background-clip:text du parent traverse les enfants inline */
html.perfect-mode .hero-name .l {
  display: inline;
  opacity: 1 !important;
  transform: none !important;
  background: none;
  -webkit-text-fill-color: inherit;
  animation: none !important;
}

/* .red → même foil doré */
html.perfect-mode .red {
  background: linear-gradient(90deg,
    #D4AF37 0%, #ffe08a 14%, #ffadd6 28%,
    #7ee8fa 42%, #b784ff 57%, #7de8c8 72%,
    #ffe46b 86%, #D4AF37 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: holo-shift 4s ease infinite;
}

/* Curseur holo — suppression du mix-blend-mode pour éviter la latence compositor */
html.perfect-mode .cursor {
  mix-blend-mode: normal;
  box-shadow: 0 0 8px 4px rgba(204,119,255,.55);
}

/* HUD dots */
html.perfect-mode .hud-dot.unlocked {
  background:linear-gradient(135deg,#ff55aa,#5555ff,#55ffcc);
  background-size:200% 200%;
  animation:holo-shift 2.5s ease infinite;
  box-shadow:0 0 8px rgba(100,180,255,.7),0 0 16px rgba(180,80,255,.45);
}

/* Lignes de grille — mouvement discret, pas de glow */
html.perfect-mode .cell,
html.perfect-mode .pg {
  animation:neon-grid 14s linear infinite;
}
@keyframes neon-grid {
  0%,100% { border-color:rgba(160,80,220,.6); }
  25%      { border-color:rgba(80,140,255,.6); }
  50%      { border-color:rgba(220,80,160,.6); }
  75%      { border-color:rgba(80,210,170,.6); }
}

/* Toast holo */
.achievToast.gold {
  border-left-color:#aa77ff !important;
  border-color:rgba(160,120,255,.4) !important;
  background:rgba(80,100,255,.08) !important;
}

/* Header — fond sombre pour bloquer le glow du bord supérieur */
html.perfect-mode #hdr {
  background: rgba(2,0,8,.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--bc-t);
}

/* ── Étoiles cartoon ── */
#star-layer {
  position:fixed; inset:0;
  pointer-events:none; z-index:3; overflow:hidden;
}
.holo-star {
  position:absolute;
  clip-path: polygon(50% 0%,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0% 50%,38% 38%);
  animation: star-pop 1.4s ease forwards;
}
@keyframes star-pop {
  0%   { opacity:0; transform:scale(0)   rotate(0deg);  }
  30%  { opacity:1; transform:scale(1.2) rotate(12deg); }
  65%  { opacity:1; transform:scale(1)   rotate(-6deg); }
  100% { opacity:0; transform:scale(.3)  rotate(20deg); }
}

/* ── Toggle 3 modes ── */
#holoToggle {
  position:fixed; bottom:24px; left:50%; z-index:9995;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(0,0,0,.7);
  border:1px solid rgba(255,255,255,.1);
  padding:6px 8px;
  border-radius:50px; backdrop-filter:blur(16px);
  animation:fade-up .4s ease both; white-space:nowrap;
}
#holoToggle .ht-label {
  font-family:var(--f); font-size:.52rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.35); padding:0 6px;
}
.ht-modes { display:flex; gap:4px; }
.ht-mode {
  padding:5px 12px; border-radius:30px; cursor:pointer;
  font-family:var(--f); font-size:.52rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.12);
  background:transparent; color:rgba(255,255,255,.3);
  transition:all .2s; white-space:nowrap;
}
.ht-mode:hover { color:rgba(255,255,255,.65); border-color:rgba(255,255,255,.25); }
.ht-mode.active { color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.08); }
.ht-mode--holo.active {
  background:linear-gradient(90deg,rgba(119,34,204,.55),rgba(34,102,204,.55),rgba(204,34,119,.55));
  border-color:rgba(180,120,255,.5); color:#fff;
  animation:holo-shift 3s ease infinite; background-size:200% 100%;
}
.ht-mode--gb.active {
  background:#306230; border-color:#0F380F; color:#9BBD0F;
  font-family:'Courier New',monospace;
}

/* ── Cadre Apple Intelligence — multi-couches, couleurs organiques ── */
@property --ba  { syntax:'<angle>'; initial-value:0deg;    inherits:false; }
@property --bc1 { syntax:'<color>'; initial-value:#BC82F3; inherits:true; }
@property --bc2 { syntax:'<color>'; initial-value:#F5B9EA; inherits:true; }
@property --bc3 { syntax:'<color>'; initial-value:#8D9FFF; inherits:true; }
@property --bc4 { syntax:'<color>'; initial-value:#FF6778; inherits:true; }
@property --bc5 { syntax:'<color>'; initial-value:#FFBA71; inherits:true; }
@property --bc6 { syntax:'<color>'; initial-value:#C686FF; inherits:true; }

/* Transition organique des couleurs sur le root */
html {
  transition:
    --bc1 .6s ease, --bc2 .6s ease, --bc3 .6s ease,
    --bc4 .6s ease, --bc5 .6s ease, --bc6 .6s ease,
    --bc-t .7s ease, --bc-r .7s ease, --bc-b .7s ease, --bc-l .7s ease;
}

/* ── Apple Intelligence border — 4 strips, box-shadow vers l'intérieur ──
   Technique : un strip de 1px par bord (top/right/bottom/left).
   Le box-shadow propage la lumière perpendiculairement depuis le bord.
   Résultat : glow RECTANGULAIRE qui suit les vrais bords de l'écran.
   Les coins brillent naturellement (overlap de 2 strips adjacents).
   ──────────────────────────────────────────────────────────────────── */
@property --bc-t { syntax:'<color>'; initial-value:#BC82F3; inherits:true; }
@property --bc-r { syntax:'<color>'; initial-value:#8D9FFF; inherits:true; }
@property --bc-b { syntax:'<color>'; initial-value:#FF6778; inherits:true; }
@property --bc-l { syntax:'<color>'; initial-value:#FFBA71; inherits:true; }

.edge-glow {
  position:fixed; z-index:0; pointer-events:none;
  opacity:0; animation: pb-appear 1.2s ease .6s forwards;
}
#pb-top    { top:0;    left:0; right:0;  height:1px; background:var(--bc-t);
  box-shadow: 0 0 60px 25px var(--bc-t), 0 0 120px 55px var(--bc-t); }
#pb-bottom { bottom:0; left:0; right:0;  height:1px; background:var(--bc-b);
  box-shadow: 0 0 60px 25px var(--bc-b), 0 0 120px 55px var(--bc-b); }
#pb-left   { left:0;   top:0; bottom:0; width:1px;  background:var(--bc-l);
  box-shadow: 0 0 60px 25px var(--bc-l), 0 0 120px 55px var(--bc-l); }
#pb-right  { right:0;  top:0; bottom:0; width:1px;  background:var(--bc-r);
  box-shadow: 0 0 60px 25px var(--bc-r), 0 0 120px 55px var(--bc-r); }

@keyframes pb-appear { to { opacity:1; } }

/* Texture diagonale gérée par #holoBg::after */

/* ─────────────────────────────────────
   PERFECT SCORE — overlay cinématique
───────────────────────────────────── */
#perfectReveal {
  position:fixed; inset:0; z-index:9990;
  pointer-events:none;
  background:rgba(3,2,0,.95);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity .5s ease;
}
#perfectReveal.active  { opacity:1; }
#perfectReveal.leaving { opacity:0; transition:opacity .9s ease; }

/* Balayage de lumière — comme incliner une carte holo */
.pr-sweep {
  position:absolute; inset:0;
  background:linear-gradient(
    112deg,
    transparent       30%,
    rgba(255,228,107,.06) 42%,
    rgba(255,255,255,.65)  50%,
    rgba(183,132,255,.06) 58%,
    transparent       70%
  );
  background-size:260% 100%;
  background-position:-110% 0;
  animation:pr-sweep-move .85s cubic-bezier(.4,0,.2,1) .15s both;
}
@keyframes pr-sweep-move {
  to { background-position:210% 0; }
}

/* Corps central */
.pr-body {
  position:relative; z-index:2;
  text-align:center;
  animation:pr-rise .65s cubic-bezier(.16,1,.3,1) .75s both;
}
@keyframes pr-rise {
  from { opacity:0; transform:translateY(28px) scale(.88); }
  to   { opacity:1; transform:none; }
}

.pr-trophy {
  font-size:clamp(3.5rem,9vw,5.5rem);
  line-height:1;
  margin-bottom:18px;
  display:block;
  animation:pr-pulse 1.4s ease 1.3s infinite;
  filter:drop-shadow(0 0 20px rgba(212,175,55,.7));
}
@keyframes pr-pulse {
  0%,100% { transform:scale(1)    rotate(-3deg); }
  50%      { transform:scale(1.15) rotate(3deg); }
}

.pr-label {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(2.4rem,9vw,6rem);
  font-weight:900;
  letter-spacing:.06em;
  line-height:.95;
  background:linear-gradient(90deg,
    #D4AF37 0%,#ffe08a 14%,#ffadd6 28%,
    #7ee8fa 42%,#b784ff 57%,#7de8c8 72%,
    #ffe46b 86%,#D4AF37 100%
  );
  background-size:300% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:holo-shift 2.5s ease infinite;
  margin-bottom:14px;
}

.pr-pts {
  font-size:clamp(1.1rem,2.8vw,1.9rem);
  font-weight:700;
  color:#ffe08a;
  letter-spacing:.3em;
  text-shadow:0 0 18px rgba(212,175,55,.6);
}
.pr-pts span { opacity:.85; font-size:.7em; letter-spacing:.15em; }

.pr-sub {
  margin-top:14px;
  font-size:clamp(.72rem,1.4vw,.88rem);
  color:rgba(255,255,255,.82);
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* Rappel achievements dans l'overlay */
.pr-badges {
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(212,175,55,.25);
}
.pr-badge {
  font-size:1.4rem;
  filter:drop-shadow(0 0 6px rgba(212,175,55,.5));
  animation:pr-badge-in .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes pr-badge-in {
  from { opacity:0; transform:scale(0) rotate(-15deg); }
  to   { opacity:1; transform:none; }
}

/* Particules */
.pr-sparks { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.pr-spark {
  position:absolute;
  border-radius:50%;
  background:conic-gradient(#D4AF37,#ffadd6,#7ee8fa,#b784ff,#ffe46b,#D4AF37);
  opacity:0;
  animation:pr-sparkle linear infinite;
}
@keyframes pr-sparkle {
  0%   { transform:translateY(0)    scale(0);   opacity:0; }
  15%  { transform:translateY(-18px) scale(1);  opacity:1; }
  80%  { opacity:.65; }
  100% { transform:translateY(-80px) scale(.15); opacity:0; }
}

/* ─────────────────────────────────────
   BOOSTER — indicateur de chargement
───────────────────────────────────── */
.bov-load-hint {
  display:flex; align-items:center; gap:10px;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
  opacity:0; transition:opacity .4s;
  pointer-events:none;
}
.bov-load-hint.visible { opacity:1; }

.bov-spinner {
  display:inline-block;
  width:14px; height:14px;
  border:2px solid rgba(255,255,255,.15);
  border-top-color:rgba(199,125,255,.8);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin {
  to { transform:rotate(360deg); }
}

/* ══════════════════════════════════════════════
   GAME BOY MODE
   Palette DMG : #0F380F · #306230 · #8BAC0F · #9BBD0F
══════════════════════════════════════════════ */
html.gameboy-mode {
  --gbDk: #0F380F;
  --gbM1: #306230;
  --gbM2: #8BAC0F;
  --gbLt: #9BBD0F;
  --red:    var(--gbM1);
  --red-t:  rgba(15,56,15,.18);
  --bg:     var(--gbLt);
  --s1:     var(--gbM2);
  --s2:     var(--gbM2);
  --white:  var(--gbDk);
  --muted:  var(--gbM1);
  --b:      rgba(15,56,15,.3);
  --bh:     rgba(15,56,15,.45);
}

html.gameboy-mode body {
  background: #9BBD0F;
  color: #0F380F;
  font-family: 'Press Start 2P', monospace !important;
}

/* Taille réduite — Press Start 2P est plus large que Space Grotesk */
html.gameboy-mode p,
html.gameboy-mode li,
html.gameboy-mode .cell-desc,
html.gameboy-mode .hero-sub,
html.gameboy-mode .cell-label,
html.gameboy-mode .stat-label {
  font-family: 'Press Start 2P', monospace !important;
  font-size: .52rem !important;
  line-height: 2 !important;
}
/* Petits spans inline SAUF le nom hero et les valeurs importantes */
html.gameboy-mode span:not(.hn):not(.l):not(.delivery-n):not(.stat-val):not(.stat-n):not(.stat-l):not(.dv):not(.flag) {
  font-family: 'Press Start 2P', monospace !important;
  font-size: .5rem !important;
  line-height: 2 !important;
}
html.gameboy-mode .stat-n {
  font-size: clamp(2.4rem, 4.5vw, 4rem) !important;
  font-family: inherit !important;
  line-height: 1 !important;
  color: #0F380F !important;
}
html.gameboy-mode .stat-l {
  font-size: .5rem !important;
  font-family: 'Press Start 2P', monospace !important;
  line-height: 2 !important;
  color: #306230 !important;
}
/* Nom hero — taille normale héritée, pas écrêtée */
html.gameboy-mode .hn { overflow: visible !important; }
html.gameboy-mode .hn .l {
  font-size: inherit !important;
  font-family: 'Press Start 2P', monospace !important;
  letter-spacing: .02em !important;
}
html.gameboy-mode .hero-name {
  letter-spacing: .01em !important;
  font-size: clamp(1.4rem, 4vw, 3.5rem) !important;
  line-height: 1.1 !important;
}
/* Delivery — taille identique au mode normal */
html.gameboy-mode .delivery-n {
  font-size: clamp(2rem,4vw,3.6rem) !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
  color: #0F380F !important;
}
html.gameboy-mode .dv {
  font-size: inherit !important;
  color: #0F380F !important;
}
html.gameboy-mode .delivery-l {
  font-size: .45rem !important;
  font-family: 'Press Start 2P', monospace !important;
  line-height: 1.8 !important;
  color: #306230 !important;
}
/* Stat values — bien visible */
html.gameboy-mode .stat-val {
  font-size: 1.1rem !important;
  line-height: 1.2 !important;
}
html.gameboy-mode h1, html.gameboy-mode h2, html.gameboy-mode h3 {
  font-family: 'Press Start 2P', monospace !important;
}
html.gameboy-mode .cell-title,
html.gameboy-mode .stat-val,
html.gameboy-mode .approach-title {
  font-family: 'Press Start 2P', monospace !important;
  font-size: .75rem !important;
  letter-spacing: .04em !important;
}
html.gameboy-mode nav a,
html.gameboy-mode .logo,
html.gameboy-mode .btn-primary,
html.gameboy-mode .hdr-pill {
  font-family: 'Press Start 2P', monospace !important;
  font-size: .45rem !important;
  letter-spacing: .06em !important;
}

/* Images & vidéos — filtre phosphore vert */
html.gameboy-mode img,
html.gameboy-mode video,
html.gameboy-mode .bbg {
  filter: grayscale(1) contrast(1.4) sepia(1) hue-rotate(55deg) saturate(6) brightness(.75) !important;
  image-rendering: pixelated;
}

/* Cells */
html.gameboy-mode .cell {
  background: #8BAC0F !important;
  border-color: #0F380F !important;
  border-width: 2px !important;
  position: relative; z-index: 1;
  animation: none !important;
}

/* Textes */
html.gameboy-mode .cell-title,
html.gameboy-mode .stat-val,
html.gameboy-mode .approach-title,
html.gameboy-mode .manifesto-q {
  color: #0F380F !important;
  text-shadow: 2px 2px 0 #306230 !important;
  background: none !important;
  -webkit-text-fill-color: #0F380F !important;
  animation: none !important;
  filter: none !important;
}
html.gameboy-mode .cell-desc,
html.gameboy-mode .hero-sub,
html.gameboy-mode .stat-label,
html.gameboy-mode .cell-label {
  color: #306230 !important;
  filter: none !important;
}

/* Photo — min-height pour que la cellule ne rétrécisse pas */
html.gameboy-mode .c-photo { min-height: 48vh !important; }

/* ── SHOWREEL : effet écran Game Boy ── */
html.gameboy-mode .c-reel {
  background: #0F380F !important;
  border: 3px solid #0F380F !important;
}

/* Filtre vert GB sur l'iframe */
html.gameboy-mode #reelFrame {
  filter: grayscale(1) contrast(1.7) sepia(1) hue-rotate(55deg) saturate(9) brightness(.65) !important;
  image-rendering: pixelated;
}

/* Overlay pixel grid + scanlines */
html.gameboy-mode .c-reel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.18) 0px,
      rgba(0,0,0,.18) 1px,
      transparent      1px,
      transparent      3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,.10) 0px,
      rgba(0,0,0,.10) 1px,
      transparent      1px,
      transparent      3px
    );
}

/* Vignette verte autour de l'écran */
html.gameboy-mode .c-reel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  box-shadow: inset 0 0 40px rgba(15,56,15,.7), inset 0 0 8px rgba(15,56,15,.9);
}

/* Flag SVG — recolorié en palette GB */
html.gameboy-mode .flag-bg   { fill: #306230 !important; }
html.gameboy-mode .flag-cross { fill: #9BBD0F !important; }

/* Loc text */
html.gameboy-mode .loc-txt strong {
  font-size: .7rem !important;
  font-family: 'Press Start 2P', monospace !important;
  color: #0F380F !important;
}

/* Nom hero — pixel shadow */
html.gameboy-mode #hn1,
html.gameboy-mode #hn2 {
  background: none !important;
  -webkit-text-fill-color: #0F380F !important;
  color: #0F380F !important;
  animation: none !important;
  text-shadow: 4px 4px 0 #306230 !important;
  filter: none !important;
  font-family: 'Press Start 2P', monospace !important;
}
html.gameboy-mode .hero-name .l {
  display: inline !important;
  opacity: 1 !important;
  transform: none !important;
  -webkit-text-fill-color: #0F380F !important;
  background: none !important;
  animation: none !important;
  color: #0F380F !important;
}

/* Header */
html.gameboy-mode #hdr {
  background: #0F380F !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 2px solid #306230 !important;
}
html.gameboy-mode #hdr *,
html.gameboy-mode .logo { color: #9BBD0F !important; }
html.gameboy-mode .hdr-pill {
  border-color: #306230 !important;
  color: #9BBD0F !important;
}

/* Bouton primary */
html.gameboy-mode .btn-primary {
  background: #0F380F !important;
  color: #9BBD0F !important;
  border: 2px solid #0F380F !important;
  font-family: 'Courier New', monospace !important;
}
html.gameboy-mode .btn-primary::before { background: #306230 !important; }

/* Red accent → GB */
html.gameboy-mode .red {
  background: none !important;
  -webkit-text-fill-color: #0F380F !important;
  color: #0F380F !important;
  animation: none !important;
}

/* HUD dots */
html.gameboy-mode .hud-dot.unlocked {
  background: #0F380F !important;
  animation: none !important;
  box-shadow: none !important;
}

/* Grain off */
html.gameboy-mode .grain { opacity: 0; }

/* Booster button — override le dégradé arc-en-ciel */
html.gameboy-mode .booster-holo-btn {
  background: #0F380F !important;
  color: #9BBD0F !important;
  animation: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border: 2px solid #306230 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: .48rem !important;
  letter-spacing: .08em !important;
}
html.gameboy-mode .booster-holo-btn:hover {
  background: #306230 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* L'overlay perfect score garde son style holo/doré original —
   gameboy-mode n'est appliqué qu'APRÈS la disparition de l'overlay */

/* Email contact — Press Start 2P serait énorme à 7rem */
html.gameboy-mode .big-mail {
  font-size: clamp(.9rem, 2vw, 1.5rem) !important;
  letter-spacing: .02em !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
}

/* Kill holo */
html.gameboy-mode .edge-glow,
html.gameboy-mode #star-layer,
html.gameboy-mode #holoBg { display: none !important; }

/* Suspend le filtre CA pendant le jeu — gain de perf majeur */
html.gameboy-mode { filter: none !important; }

/* Curseur GB — pixel carré */
html.gameboy-mode .cursor {
  mix-blend-mode: normal !important;
  background: #0F380F !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 8px !important;
  height: 8px !important;
}

/* ── Boot screen Game Boy ── */
#gb-boot {
  position: fixed; inset: 0; z-index: 10000; pointer-events: none;
  background: #9BBD0F;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2rem;
}
#gb-boot .gb-logo {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(.9rem, 2.5vw, 1.6rem);
  color: #0F380F;
  opacity: 0;
  animation: gb-step-in .05s steps(1) .4s forwards;
}
#gb-boot .gb-copy {
  font-family: 'Press Start 2P', monospace;
  font-size: .4rem; color: #306230;
  opacity: 0;
  animation: gb-step-in .05s steps(1) .9s forwards;
}
#gb-boot .gb-press {
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem; color: #306230;
  opacity: 0;
  animation: gb-step-in .05s steps(1) 1.3s forwards,
             blink .7s step-end 1.35s infinite;
}
@keyframes gb-step-in { to { opacity: 1; } }
#gb-boot.gb-boot--out {
  animation: gb-boot-hide .15s steps(1) forwards;
}
@keyframes gb-boot-hide { to { opacity: 0; pointer-events: none; } }

/* Scanlines Game Boy */
#gb-scanlines {
  position: fixed; inset: 0; z-index: 9986; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 2px,
    rgba(0,0,0,.22) 2px, rgba(0,0,0,.22) 3px
  );
  animation: gb-appear .5s ease forwards;
  opacity: 0;
}
@keyframes gb-appear { to { opacity: 1; } }

/* Vignette écran GB */
#gb-vignette {
  position: fixed; inset: 0; z-index: 9985; pointer-events: none;
  background: radial-gradient(ellipse 90% 85% at 50% 50%,
    transparent 60%, rgba(0,20,0,.55) 100%);
  animation: gb-appear .5s ease forwards;
  opacity: 0;
}


/* ─────────────────────────────────────
   BANDE CLIENTS (sous le header)
───────────────────────────────────── */

/* Fondu sur les bords pour que le défilé ne soit pas coupé net */
.clients-track-wrap {
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}

/* ── Rôle dans les blocs Univers ── */
.brole {
  display:inline-block; align-self:flex-start; width:fit-content;
  margin-top:10px;
  font-size:.54rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--red);
  border:1px solid rgba(255,45,45,.32);
  padding:5px 10px;
}
.section-hd-sub strong { color:var(--white); font-weight:700; }

/* ─────────────────────────────────────
   SOUS-SECTIONS PROJETS (16:9 · Photo)
───────────────────────────────────── */
.proj-head--sub {
  margin-top:clamp(48px,6vw,88px);
}
.proj-head--sub .sec-h { font-size:clamp(1.4rem,2.6vw,2.1rem); }

/* Cartes 16:9 */
.proj-track--wide { align-items:flex-start; }
/* Largeur proportionnelle à l'écran : garantit qu'une part de la carte
   suivante dépasse toujours, à n'importe quelle taille.
   En vw et non en %, car .proj-track est en width:max-content — un
   pourcentage y crée une dépendance circulaire que le navigateur ignore. */
.pcard--wide { width:60vw; }
@media (max-width:768px) {
  .pcard--wide { width:76vw; }
}
.pm--wide { aspect-ratio:16/9; }

/* Grille photo 4:5 */
.photo-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:clamp(12px,1.4vw,20px);
}
.photo-slot { aspect-ratio:4/5; margin:0; }

/* Emplacements vides — en attente de contenu */
.pslot { cursor:default; }
.pslot:hover { transform:none; }
.pslot .pm, .photo-slot {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background:rgba(255,255,255,.015);
  border:1px dashed rgba(255,255,255,.13);
  transition:border-color .25s, background .25s;
}
.pslot:hover .pm, .photo-slot:hover {
  border-color:rgba(255,45,45,.4);
  background:rgba(255,45,45,.03);
}
.pslot-phrase {
  font-size:clamp(.76rem,1vw,.92rem);
  line-height:1.55; font-weight:500;
  color:rgba(255,255,255,.4);
  text-align:center; text-wrap:balance;
  max-width:26ch; padding:0 22px;
}
.photo-slot .pslot-phrase {
  font-size:clamp(.7rem,.85vw,.8rem);
  max-width:18ch; padding:0 16px;
}
.pslot-soon {
  font-size:.48rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,45,45,.55);
}
.pslot:hover .pslot-phrase { color:rgba(255,255,255,.62); }

/* ─────────────────────────────────────
   BOOSTER — Peach Farmer
───────────────────────────────────── */
.booster-stats {
  display:flex; align-items:stretch;
  gap:clamp(20px,2.6vw,40px); flex-wrap:wrap;
  margin-top:24px;
}
.bstat {
  display:flex; flex-direction:column; gap:5px;
  padding-left:clamp(20px,2.6vw,40px);
  border-left:1px solid var(--b);
}
.bstat:first-child { padding-left:0; border-left:none; }
.bstat b {
  font-size:clamp(1.15rem,2vw,1.6rem);
  font-weight:800; letter-spacing:-.03em; line-height:1;
  color:var(--white);
}
.bstat span {
  font-size:.5rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.booster-hint {
  font-size:.56rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.3);
  animation:hint-blink 2.4s ease-in-out infinite;
}
/* Le sachet réagit : il invite au clic.
   Le transform reste sur .booster-pack (parent de l'image ET du reflet)
   pour que les deux bougent ensemble — pas d'animation concurrente ici. */
.c-booster .booster-pack {
  transition:transform .45s cubic-bezier(.16,1,.3,1), filter .45s;
}
.c-booster .booster-pack:hover {
  transform:translateY(-8px) scale(1.06) rotate(-3deg);
  filter:brightness(1.08) drop-shadow(0 16px 34px rgba(255,45,45,.28));
}

/* ── Mot qui tourne (bloc direction d'acteur) ── */
.rot {
  display:inline-block;
  color:var(--white); font-weight:700;
  border-bottom:2px solid var(--red);
  padding-bottom:1px;
  transition:opacity .32s ease, transform .32s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
.rot.out { opacity:0; transform:translateY(-7px); }
@media (prefers-reduced-motion:reduce) {
  .rot { transition:none; }
  .rot.out { opacity:1; transform:none; }
}



/* Glose discrète sur un service au jargon technique */
.svc-note {
  color:var(--muted); font-size:.72rem;
}
.svc-note::before { content:'— '; }

/* Durée affichée sur les formats longs */
.pdur {
  position:absolute; top:14px; right:14px; z-index:4;
  font-size:.5rem; font-weight:700;
  letter-spacing:.12em;
  background:rgba(0,0,0,.62); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.9);
  padding:5px 9px;
}

/* Crédits d'équipe sur les projets collectifs */
.pcred {
  display:block; margin-top:7px;
  font-size:.56rem; line-height:1.5;
  color:rgba(255,255,255,.34);
}
.pcred b { color:rgba(255,255,255,.6); font-weight:700; }

/* Vignettes photo */
.photo-slot img {
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.16,1,.3,1), filter .4s;
}
.photo-slot:has(img) {
  overflow:hidden; border:none; background:var(--s1);
}
.photo-slot:has(img):hover img { transform:scale(1.04); }