/* ============================================================
   BARREL PUB — Cannes · Carré d'Or
   DA : garage rétro 50s (crème/bleu/corail) × nuit rouge
   Ease signature : cubic-bezier(.625,.05,0,1)
   ============================================================ */

/* ---------- Fontes (self-host, latin) ---------- */
@font-face{
  font-family:'Archivo Black';
  src:url('../fonts/archivo-black-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Instrument Sans';
  src:url('../fonts/instrument-sans-var.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-italic-var.woff2') format('woff2');
  font-weight:400 500;font-style:italic;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* garage rétro 50s */
  --cream:#F6E8D6;
  --cream-2:#EFDCC2;
  --blue:#24439B;
  --blue-deep:#18306F;
  --coral:#EF8A4E;
  --orange:#E8722C;
  --corail:#F0755B;
  --moutarde:#D9A441;
  --brun:#8A5232;
  /* nuit rouge */
  --night:#120A08;
  --night-2:#1E100B;
  --red:#7A1F1A;
  --amber:#D99A4E;
  --cream-on-night:#F2E8D8;

  --ease:cubic-bezier(.625,.05,0,1);

  --f-display:'Archivo Black',sans-serif;
  --f-body:'Instrument Sans',sans-serif;
  --f-mono:'IBM Plex Mono',monospace;
  --f-serif:'Fraunces',serif;

  --fs-hero:min(12vw,160px);
  --fs-giant:clamp(2.6rem,8.5vw,110px);
  --fs-title:clamp(2rem,5.5vw,72px);
  --fs-h:clamp(1.35rem,2.6vw,2rem);
  --fs-body:clamp(1rem,.95rem + .35vw,1.15rem);
  --fs-mono:clamp(.72rem,.68rem + .2vw,.82rem);

  --gutter:clamp(1.25rem,4vw,4.5rem);
  --checker-size:26px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html.is-locked{overflow:hidden}
body{
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.55;
  background:var(--cream);
  color:var(--blue);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,canvas,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
ul{list-style:none}

::selection{background:var(--coral);color:var(--night)}

/* Scrollbar discrète */
html{scrollbar-width:thin;scrollbar-color:var(--blue) transparent}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--blue) 70%,transparent);border-radius:99px;border:2px solid transparent;background-clip:content-box}

/* Focus visible */
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:2px}

/* ---------- Grain overlay ---------- */
.grain{
  position:fixed;inset:-100px;z-index:2000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.045;
  animation:grain-jump 1.2s steps(6) infinite;
}
@keyframes grain-jump{
  0%{transform:translate(0,0)}
  25%{transform:translate(-38px,22px)}
  50%{transform:translate(24px,-40px)}
  75%{transform:translate(-20px,-16px)}
  100%{transform:translate(30px,34px)}
}

/* ---------- Curseur custom ---------- */
#cursor{
  position:fixed;top:0;left:0;z-index:3000;pointer-events:none;
  width:12px;height:12px;margin:-6px 0 0 -6px;
  opacity:0;
  transition:opacity .3s var(--ease);
}
#cursor .cursor-dot{
  position:absolute;inset:0;border-radius:50%;
  background:var(--cream);
  mix-blend-mode:difference;
  transform:scale(1);
  transition:transform .35s var(--ease),opacity .25s var(--ease);
}
#cursor .cursor-dart{
  position:absolute;top:50%;left:50%;width:34px;height:34px;
  transform:translate(-50%,-50%) rotate(45deg) scale(.4);
  opacity:0;
  transition:transform .35s var(--ease),opacity .25s var(--ease);
}
body.has-cursor.is-link #cursor .cursor-dot{transform:scale(.35)}
body.has-cursor.is-link #cursor .cursor-dart{opacity:1;transform:translate(-50%,-50%) rotate(0deg) scale(1)}
@media (hover:none),(pointer:coarse){#cursor{display:none}}
body.has-cursor{cursor:none}
body.has-cursor a,body.has-cursor button,body.has-cursor [data-cursor]{cursor:none}

/* ---------- Damier ---------- */
.checker-strip{
  height:16px;width:100%;
  background:repeating-conic-gradient(var(--blue) 0% 25%,var(--cream) 0% 50%);
  background-size:16px 16px; /* damier : cases de 8×8, deux rangées */
  animation:checker-run 9s linear infinite;
}
[data-theme="dark"] .checker-strip{
  background:repeating-conic-gradient(var(--amber) 0% 25%,var(--night) 0% 50%);
  background-size:16px 16px;
}
@keyframes checker-run{to{background-position-x:32px}}

/* Étoile 4 branches (ornement) */
.star4{width:22px;height:22px;flex:none}

/* ---------- Utilitaires ---------- */
.mono{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase}
.serif-it{font-family:var(--f-serif);font-style:italic;font-weight:450}
.kicker{display:inline-flex;align-items:center;gap:.7em}
.section{position:relative;padding:clamp(4.5rem,10vw,9rem) var(--gutter)}
[data-theme="light"]{background:var(--cream);color:var(--blue)}
[data-theme="dark"]{background:var(--night);color:var(--cream-on-night)}

/* Reveals (pilotés par IO) */
.reveal{opacity:0;transform:translateY(34px)}
.is-revealed .reveal,
.reveal.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}

/* ============================================================
   PRÉCHARGEUR
   ============================================================ */
#preloader{
  position:fixed;inset:0;z-index:5000;
  background:var(--cream);color:var(--blue);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  transition:transform 1s var(--ease);
}
#preloader.is-done{transform:translateY(-101%)}
#preloader .pre-logo{
  width:min(120px,26vw);height:min(120px,26vw);
  border-radius:50%;object-fit:cover;object-position:50% 32%;
  border:3px solid var(--blue);
}
#preloader .pre-count{
  font-family:var(--f-mono);font-weight:500;
  font-size:clamp(2.2rem,7vw,4rem);letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
#preloader .pre-track{
  width:min(320px,70vw);height:14px;overflow:hidden;
  outline:2px solid var(--blue);outline-offset:4px;
}
#preloader .pre-fill{
  height:100%;width:100%;transform-origin:left;transform:scaleX(0);
  background:repeating-conic-gradient(var(--blue) 0% 25%,var(--cream) 0% 50%);
  background-size:28px 14px;
}
#preloader .pre-note{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6}

/* ============================================================
   HERO — LA DESCENTE
   ============================================================ */
#hero{
  position:relative;height:100vh;height:100svh;
  background:var(--night);
  overflow:clip;
}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%}
#hero-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}

.hero-overlay{
  position:absolute;inset:0;z-index:10;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 var(--gutter);
  color:var(--cream);
  opacity:0;
}
.hero-overlay .ov-line{overflow:hidden;display:block}
.hero-overlay .ov-line>span{display:block;will-change:transform}
.hero-title{
  font-family:var(--f-display);
  font-size:var(--fs-hero);
  line-height:.92;letter-spacing:.01em;text-transform:uppercase;
  text-shadow:0 2px 60px rgba(0,0,0,.45);
}
.hero-sub{margin-top:1.2rem;color:var(--cream);opacity:.92}
.hero-cue{
  font-family:var(--f-serif);font-style:italic;font-weight:450;
  font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1.25;
  text-shadow:0 2px 40px rgba(0,0,0,.6);
  max-width:20ch;
}
.hero-cue .mono{display:block;margin-top:1.1rem;font-style:normal;opacity:.85}

.hero-hint{
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  color:var(--cream);z-index:11;
  text-shadow:0 1px 20px rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
}
.hero-hint::after{
  content:"";width:1px;height:38px;background:var(--cream);
  animation:hint-drop 1.6s var(--ease) infinite;
  transform-origin:top;
}
@keyframes hint-drop{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* Fin de descente : titre verrouillé + CTA */
#ov-final .hero-title{font-size:min(10vw,120px)}
#ov-final .final-tag{margin-top:.9rem}
#ov-final.is-active{pointer-events:auto}
.cta-checker{
  margin-top:2.4rem;
  display:inline-flex;align-items:center;gap:1rem;
  padding:1.05rem 1.8rem;
  font-family:var(--f-mono);font-weight:500;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--night);background:var(--cream);
  position:relative;overflow:hidden;
  border:2px solid var(--cream);
  transition:color .4s var(--ease);
}
.cta-checker::before{
  content:"";position:absolute;inset:0;
  background:repeating-conic-gradient(var(--blue) 0% 25%,var(--cream) 0% 50%);
  background-size:24px 12px;
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.cta-checker span{position:relative;z-index:1}
.cta-checker:hover::before{transform:translateY(84%)}
.cta-checker:hover{color:var(--blue)}

/* ============================================================
   NAV
   ============================================================ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem var(--gutter);
  transform:translateY(-110%);
  transition:transform .7s var(--ease),color .5s var(--ease);
  pointer-events:none;
}
#nav.is-visible{transform:none;pointer-events:auto}
#nav .nav-logo{display:flex;align-items:center;gap:.7rem}
#nav .nav-logo img{
  width:44px;height:44px;border-radius:50%;
  object-fit:cover;object-position:50% 32%;
  border:2px solid currentColor;
}
#nav .nav-logo span{font-family:var(--f-display);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase}
#nav ul{display:flex;gap:clamp(1.2rem,3vw,2.6rem)}
#nav ul a{
  font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  position:relative;padding:.35em 0;display:inline-block;overflow:hidden;
}
#nav ul a .roll{display:block;transition:transform .45s var(--ease)}
#nav ul a .roll span{display:block}
#nav ul a .roll span:last-child{position:absolute;top:100%;left:0;color:var(--coral)}
#nav ul a:hover .roll{transform:translateY(-100%)}
#nav.nav--light{color:var(--blue)}
#nav.nav--dark{color:var(--cream-on-night)}
#nav .nav-burger{display:none;flex-direction:column;gap:6px;padding:.6rem;z-index:1002}
#nav .nav-burger i{display:block;width:26px;height:2px;background:currentColor;transition:transform .45s var(--ease),opacity .3s}
@media(max-width:820px){
  #nav ul{display:none}
  #nav .nav-burger{display:flex}
}
body.menu-open #nav{z-index:1001} /* le burger doit rester cliquable au-dessus du menu */
body.menu-open #nav .nav-burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu-open #nav .nav-burger i:nth-child(2){opacity:0}
body.menu-open #nav .nav-burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
body.menu-open #nav{color:var(--cream)}

/* Menu plein écran mobile */
#menu{
  position:fixed;inset:0;z-index:1000;
  background:var(--blue);color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  padding:0 var(--gutter);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
  visibility:hidden;
}
#menu::before{
  content:"";position:absolute;inset:auto 0 0 0;height:60px;opacity:.5;
  background:repeating-conic-gradient(var(--cream) 0% 25%,transparent 0% 50%);
  background-size:52px 26px;
  animation:checker-run 12s linear infinite;
}
body.menu-open #menu{clip-path:inset(0 0 0% 0);visibility:visible}
#menu a{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(2.4rem,10vw,4.6rem);line-height:1.12;
  display:inline-block;
  transform:translateY(30px);opacity:0;
  transition:transform .6s var(--ease),opacity .6s var(--ease),color .3s;
}
#menu a:hover{color:var(--coral)}
body.menu-open #menu a{transform:none;opacity:1}
body.menu-open #menu a:nth-child(2){transition-delay:.08s}
body.menu-open #menu a:nth-child(3){transition-delay:.16s}
body.menu-open #menu a:nth-child(4){transition-delay:.24s}
#menu .menu-foot{position:absolute;bottom:80px;left:var(--gutter)}
#menu .menu-foot p{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;opacity:.8}

/* ============================================================
   SCÈNE 1 — LE MUR DES BURGERS
   ============================================================ */
#carte .scene-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,5vw,4rem)}
#carte h2{
  font-family:var(--f-display);font-size:var(--fs-giant);
  text-transform:uppercase;line-height:.95;
}
#carte .scene-head .mono{opacity:.65}

.burger-wall{position:relative;border-top:2px solid var(--blue)}
.burger-row{
  --accent:var(--blue);
  position:relative;
  border-bottom:2px solid var(--blue);
  padding:clamp(1rem,2.2vw,1.8rem) 0;
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 2rem;
}
.burger-name{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(1.7rem,5.2vw,4.4rem);line-height:1.02;
  position:relative;display:inline-block;overflow:hidden;
  transition:color .4s var(--ease);
}
.burger-name .roll{display:block;transition:transform .5s var(--ease)}
.burger-name .roll>span{display:block}
.burger-name .roll>span:last-child{position:absolute;top:100%;left:0;color:var(--accent)}
.burger-row:hover .burger-name .roll,
.burger-row:focus-within .burger-name .roll{transform:translateY(-100%)}
.burger-price{
  font-family:var(--f-mono);font-weight:500;
  font-size:clamp(1rem,2vw,1.5rem);letter-spacing:.08em;
  transition:color .4s var(--ease);
}
.burger-row:hover .burger-price{color:var(--accent)}
.burger-desc{
  grid-column:1/-1;
  font-family:var(--f-serif);font-style:italic;font-weight:450;
  font-size:clamp(1rem,1.6vw,1.3rem);
  color:var(--accent);
  max-width:62ch;
  max-height:0;opacity:0;overflow:clip;
  transform:translateY(8px);
  transition:max-height .55s var(--ease),opacity .45s var(--ease),transform .55s var(--ease);
}
.burger-row:hover .burger-desc,
.burger-row:focus-within .burger-desc{max-height:7em;opacity:1;transform:none;padding-top:.5em}
@media(hover:none){
  .burger-desc{max-height:none;opacity:1;transform:none;padding-top:.5em}
}
.burger-note{margin-top:1.4rem;display:flex;align-items:center;gap:.8rem;opacity:.75}

/* Mascottes rubber-hose */
.mascot{position:absolute;width:clamp(64px,8vw,110px);pointer-events:none;z-index:2}
.mascot svg{width:100%;height:auto}
#mascot-burger{top:-1.5rem;right:4%}
#mascot-hotdog{bottom:16%;left:-.5rem;transform:rotate(-8deg)}
#mascot-frites{bottom:-2rem;right:8%;transform:rotate(6deg)}
.mascot.is-bouncing{animation:mascot-bounce .7s var(--ease)}
@keyframes mascot-bounce{
  0%{transform:translateY(0) rotate(0deg)}
  30%{transform:translateY(-16px) rotate(-6deg) scale(1.06)}
  60%{transform:translateY(2px) rotate(3deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
@media(max-width:820px){#mascot-hotdog,#mascot-frites{display:none}}

/* Tapas / planches / buckets */
.snack-grid{
  margin-top:clamp(3rem,6vw,5rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:2px;background:var(--blue);border:2px solid var(--blue);
}
.snack-col{background:var(--cream);padding:1.6rem}
.snack-col h3{
  font-family:var(--f-display);font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;
  display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;
}
.snack-col li{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.42em 0;border-bottom:1px dashed color-mix(in srgb,var(--blue) 35%,transparent);
}
.snack-col li:last-child{border-bottom:none}
.snack-col li em{font-family:var(--f-serif);font-style:italic;font-weight:450}
.snack-col li .mono{letter-spacing:.05em}

/* Marquee frites */
.marquee{overflow:clip;white-space:nowrap;padding:1.1rem 0;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.marquee .marquee-track{display:inline-flex;gap:2.2rem;padding-right:2.2rem;animation:marquee-x 18s linear infinite;will-change:transform}
.marquee span{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(1.1rem,2.6vw,1.9rem);letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:2.2rem;
}
@keyframes marquee-x{to{transform:translateX(-50%)}}
#carte .marquee{margin-top:clamp(3rem,6vw,5rem);color:var(--orange)}

/* ============================================================
   SCÈNE 2 — MOOD & MOVES (bento)
   ============================================================ */
#lieu h2{
  font-family:var(--f-display);font-size:var(--fs-giant);text-transform:uppercase;line-height:.95;
  margin-bottom:clamp(2rem,5vw,4rem);
}
#lieu .scene-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.bento{
  display:grid;gap:clamp(.6rem,1.2vw,1rem);
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(150px,22vw,270px);
}
.bento-cell{
  position:relative;overflow:hidden;
  grid-column:span 2;
  background:var(--night-2);
  outline:1px solid color-mix(in srgb,var(--amber) 25%,transparent);
}
.bento-cell.is-wide{grid-column:span 4;grid-row:span 2}
.bento-cell.is-tall{grid-row:span 2}
@media(max-width:820px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(160px,38vw)}
  .bento-cell,.bento-cell.is-wide,.bento-cell.is-tall{grid-column:span 2;grid-row:span 1}
  .bento-cell.is-wide{grid-row:span 2}
}
.bento-cell img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.72);
  transform:scale(1.02);
  transition:filter .8s var(--ease),transform .8s var(--ease);
}
.bento-cell:hover img{filter:grayscale(0) brightness(.86);transform:scale(1.07)}
.bento-cell::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,10,8,.05) 30%,rgba(18,10,8,.88) 100%);
}
.bento-cell .cell-num{
  position:absolute;top:1rem;left:1.1rem;z-index:2;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.24em;color:var(--amber);
}
.bento-cell .cell-body{position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;z-index:2}
.bento-cell h3{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(1.05rem,2.2vw,1.7rem);line-height:1.05;
}
.bento-cell.is-wide h3{font-size:clamp(1.5rem,3.4vw,2.6rem)}
.bento-cell p{
  font-family:var(--f-serif);font-style:italic;font-weight:450;
  font-size:clamp(.9rem,1.4vw,1.1rem);color:var(--cream-on-night);
  opacity:.85;margin-top:.4em;max-width:44ch;
}
.bento-foot{margin-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;opacity:.7}

/* ============================================================
   SCÈNE 3 — VOTRE SOIRÉE
   ============================================================ */
#soiree .gps{display:block;margin-top:.8rem;opacity:.6;letter-spacing:.3em}
#soiree h2{
  font-family:var(--f-display);font-size:var(--fs-giant);text-transform:uppercase;line-height:.95;
}
#soiree .soiree-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,6rem);
  margin-top:clamp(2.5rem,5vw,4rem);align-items:start;
}
@media(max-width:820px){#soiree .soiree-grid{grid-template-columns:1fr}}
#soiree .soiree-text p{max-width:52ch}
#soiree .soiree-text p+p{margin-top:1em}
#soiree .soiree-text strong{font-weight:700}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--blue);border:2px solid var(--blue)}
.stat{background:var(--cream);padding:1.5rem 1.3rem}
.stat .stat-num{
  font-family:var(--f-mono);font-weight:500;
  font-size:clamp(1.9rem,4.5vw,3.2rem);
  font-variant-numeric:tabular-nums;line-height:1;
}
.stat .stat-label{margin-top:.55rem;opacity:.7}
.cta-circle{
  margin-top:2.6rem;
  width:clamp(150px,17vw,200px);aspect-ratio:1;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  background:var(--orange);color:var(--cream);
  font-family:var(--f-mono);font-weight:500;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  padding:1.2rem;
  transition:transform .5s var(--ease),background .4s var(--ease);
}
.cta-circle:hover{transform:scale(1.07) rotate(-4deg);background:var(--blue)}

/* ============================================================
   SCÈNE 4 — LE FEED
   ============================================================ */
#feed h2{
  font-family:var(--f-display);font-size:var(--fs-title);text-transform:uppercase;line-height:1;
  margin-bottom:clamp(2rem,4vw,3rem);
}
#feed .feed-wrap{display:grid;grid-template-columns:minmax(0,540px) 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:900px){#feed .feed-wrap{grid-template-columns:1fr}}
#feed .ig-shell{min-height:480px;background:var(--night-2);outline:1px solid color-mix(in srgb,var(--amber) 25%,transparent);display:flex;align-items:center;justify-content:center}
#feed .ig-shell blockquote{margin:0 !important;width:100%}
#feed .feed-side p{font-family:var(--f-serif);font-style:italic;font-weight:450;font-size:clamp(1.1rem,1.8vw,1.4rem);max-width:34ch}
#feed .feed-side .mono{display:inline-block;margin-top:1.6rem;opacity:.7}
#feed .marquee{margin-top:clamp(3rem,6vw,5rem);color:var(--amber)}

/* ============================================================
   SCÈNE 5 — FOOTER-FINALE
   ============================================================ */
#footer{
  background:linear-gradient(180deg,var(--night) 0%,#0A0505 70%,#050303 100%);
  color:var(--cream-on-night);
  padding-bottom:0;
}
#footer .foot-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(2rem,4vw,4rem);
  padding-bottom:clamp(3rem,6vw,5rem);
}
#footer .foot-block h3{font-family:var(--f-mono);font-weight:500;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--amber);margin-bottom:1rem}
#footer .foot-block p,#footer .foot-block a{font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.5}
#footer .foot-block a{position:relative}
#footer .foot-block a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:var(--amber);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
#footer .foot-block a:hover::after{transform:scaleX(1);transform-origin:left}
#footer .foot-social{display:flex;gap:1rem;margin-top:.6rem}
#footer .foot-social a{
  width:44px;height:44px;border:1px solid color-mix(in srgb,var(--cream-on-night) 40%,transparent);
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  transition:transform .4s var(--ease),border-color .4s,color .4s;
}
#footer .foot-social a:hover{transform:translateY(-4px);border-color:var(--amber);color:var(--amber)}
#footer .foot-social a::after{display:none}
#footer .foot-social svg{width:22px;height:22px}

.foot-giant{
  position:relative;overflow:clip;
  padding:0 0 1rem;text-align:center;
  user-select:none;
}
.foot-giant .giant{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:min(11.5vw,185px);line-height:.9;letter-spacing:.01em;
  color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--cream-on-night) 55%,transparent);
  position:relative;display:inline-block;white-space:nowrap;
}
.foot-giant .giant .giant-fill{
  position:absolute;inset:0;
  color:var(--amber);-webkit-text-stroke:0;
  clip-path:inset(100% 0 0 0);
  will-change:clip-path;
}
.foot-legal{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1.4rem 0 1.6rem;margin-top:1rem;
  border-top:1px solid color-mix(in srgb,var(--cream-on-night) 18%,transparent);
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;opacity:.75;
}
.foot-legal a:hover{color:var(--amber)}
#staffie{width:56px;height:auto;flex:none;opacity:.9}
#staffie .eye{transform-origin:center;transform-box:fill-box}
#staffie.blink .eye{animation:staffie-blink .5s ease-in-out 2}
@keyframes staffie-blink{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.06)}}

/* ============================================================
   PAGE CONTACT
   ============================================================ */
.contact-hero{padding-top:clamp(8rem,16vh,12rem)}
.contact-hero .kicker{opacity:.65}
.contact-hero h1{
  font-family:var(--f-display);font-size:min(15vw,180px);line-height:.92;text-transform:uppercase;
  margin:.2em 0 .1em;
}
.contact-hero .contact-intro{font-family:var(--f-serif);font-style:italic;font-weight:450;font-size:clamp(1.15rem,2vw,1.6rem);max-width:38ch}
.contact-grid{
  display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2.5rem,6vw,6rem);
  padding-top:clamp(3rem,6vw,5rem);
}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-infos p+p{margin-top:1em}
.contact-infos .mono{opacity:.65}
.contact-form{display:flex;flex-direction:column;gap:2.2rem}
.field{position:relative;display:flex;flex-direction:column;gap:.5rem}
.field label{font-family:var(--f-mono);font-weight:500;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;opacity:.75}
.field input,.field textarea,.field select{
  font:inherit;color:inherit;background:transparent;
  border:none;border-bottom:2px solid color-mix(in srgb,var(--blue) 40%,transparent);
  padding:.55em 0;border-radius:0;
  -webkit-appearance:none;appearance:none;
}
.field textarea{resize:vertical;min-height:110px}
.field .underline{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.field:focus-within .underline{transform:scaleX(1)}
.field select{cursor:pointer}
.field .select-arrow{position:absolute;right:0;bottom:.9em;pointer-events:none}
.contact-form .cta-circle{margin-top:.5rem;align-self:flex-start}
.contact-page .marquee{color:var(--orange);margin-top:clamp(4rem,8vw,7rem)}
.contact-page .marquee .pict{display:inline-flex;align-items:center}
.contact-page .marquee svg{width:30px;height:30px}

/* Page 404 */
.page-404{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.4rem;padding:var(--gutter)}
.page-404 h1{font-family:var(--f-display);font-size:min(24vw,240px);line-height:1;text-transform:uppercase}
.page-404 p{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.1rem,2.4vw,1.6rem)}
.page-404 img{
  width:min(150px,34vw);height:min(150px,34vw);
  border-radius:50%;object-fit:cover;object-position:50% 32%;
  border:3px solid var(--blue);
}

/* ============================================================
   Accessibilité / reduced motion
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01s !important;animation-iteration-count:1 !important;transition-duration:.01s !important}
  .grain{animation:none}
  .checker-strip,.marquee .marquee-track{animation:none}
  .reveal{opacity:1 !important;transform:none !important}
  #hero{height:100svh}
  #hero-canvas{display:none}
  #hero-fallback{display:block}
  .hero-overlay{opacity:0}
  #ov-final{opacity:1 !important;pointer-events:auto}
  #ov-final .ov-line>span{transform:none !important}
  .hero-hint{display:none}
  #cursor{display:none}
  body.has-cursor{cursor:auto}
  body.has-cursor a,body.has-cursor button{cursor:pointer}
}