/* ==========================================================================
   MURCIELAGO DESIGN — Portfolio
   DA : poster sportif sombre, vert ASSE néon, grain, glitch, halftone
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* fonds */
  --ink:        #070907;
  --ink-2:      #0b0e0b;
  --ink-3:      #11160f;
  --line:       rgba(233,230,220,.12);
  --line-soft:  rgba(233,230,220,.07);

  /* encres */
  --paper:      #e9e6dc;
  --paper-dim:  rgba(233,230,220,.62);
  --paper-mute: rgba(233,230,220,.38);

  /* signature ASSE */
  --green:      #16d96b;
  --green-neon: #52ffa1;
  --green-deep: #0a2e1a;
  --green-dark: #06160d;

  /* accents projets */
  --orange:     #ff6a2b;
  --blaugrana:  #ff3d5a;
  --blau:       #4d7cff;
  --ucl:        #6b5bff;
  --gold:       #e8c264;
  --sky:        #6ec3ff;
  --silver:     #c9ccd4;

  /* glitch */
  --glitch-r:   #ff2d55;
  --glitch-c:   #00e5ff;

  /* typo */
  --f-display:  "Anton", "Arial Narrow", sans-serif;
  --f-body:     "Archivo", "Helvetica Neue", sans-serif;
  --f-script:   "Mea Culpa", cursive;

  /* rythme */
  --gutter:     clamp(20px, 4vw, 64px);
  --section:    clamp(90px, 14vh, 180px);

  /* divers */
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-snap:  cubic-bezier(.83,0,.17,1);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html:focus-within{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
::selection{background:var(--green);color:var(--ink);}
.vert{color:var(--green);}
[hidden]{display:none !important;}

:focus-visible{
  outline:2px solid var(--green-neon);
  outline-offset:3px;
}

/* scrollbar dans la DA */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:var(--green-deep);border:2px solid var(--ink);}
::-webkit-scrollbar-thumb:hover{background:var(--green);}

/* --------------------------------------------------------------------------
   3. TEXTURES GLOBALES — grain + vignette
   -------------------------------------------------------------------------- */
.grain{
  position:fixed;inset:-50%;
  width:200%;height:200%;
  pointer-events:none;
  z-index:9000;
  opacity:.055;
  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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-shift 1.2s steps(4) infinite;
}
@keyframes grain-shift{
  0%{transform:translate(0,0);}
  25%{transform:translate(-2%,1.5%);}
  50%{transform:translate(1.5%,-2%);}
  75%{transform:translate(-1%, -1%);}
  100%{transform:translate(0,0);}
}
.vignette{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:8990;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* --------------------------------------------------------------------------
   5. PRELOADER
   -------------------------------------------------------------------------- */
.loader{
  position:fixed;inset:0;
  z-index:9500;
  background:var(--ink);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:18px;
  transition:transform .8s var(--ease-snap);
}
.loader.is-done{transform:translateY(-101%);}
.loader__name{
  font-family:var(--f-display);
  font-size:clamp(2.4rem, 9vw, 6rem);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--paper);
}
.loader__name .accent{color:var(--green);}
.loader__bar{
  width:min(280px, 60vw);
  height:2px;
  background:var(--line);
  overflow:hidden;
}
.loader__bar i{
  display:block;height:100%;width:0;
  background:var(--green-neon);
  transition:width .2s linear;
}
.loader__pct{
  font-size:.75rem;
  letter-spacing:.35em;
  color:var(--paper-mute);
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-head{
  position:fixed;top:0;left:0;right:0;
  z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  transition:background .4s,backdrop-filter .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.site-head.is-scrolled{
  background:rgba(7,9,7,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding-top:12px;padding-bottom:12px;
  border-bottom-color:var(--line-soft);
}
.brand{
  display:flex;align-items:center;gap:12px;
  font-family:var(--f-display);
  font-size:1.05rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.brand__bat{
  width:30px;height:30px;flex:none;
  color:var(--green);
  filter:drop-shadow(0 0 8px rgba(22,217,107,.5));
}
.brand small{
  display:block;
  font-family:var(--f-body);
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.42em;
  color:var(--paper-mute);
}
.main-nav{display:flex;align-items:center;gap:34px;}
.main-nav a{
  position:relative;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--paper-dim);
  padding:6px 0;
  transition:color .25s;
}
.main-nav a::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:1px;
  background:var(--green-neon);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s var(--ease-out);
}
.main-nav a:hover{color:var(--paper);}
.main-nav a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav-cta{
  font-family:var(--f-body);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink) !important;
  background:var(--green);
  padding:12px 22px !important;
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition:background .25s,transform .25s !important;
}
.nav-cta::after{display:none;}
.nav-cta:hover{background:var(--green-neon);transform:translateY(-2px);}

/* burger */
.burger{
  display:none;
  flex-direction:column;gap:6px;
  padding:8px;
  z-index:1001;
}
.burger span{
  width:28px;height:2px;
  background:var(--paper);
  transition:transform .35s var(--ease-out),opacity .25s,background .25s;
}
.burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg);background:var(--green-neon);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);background:var(--green-neon);}

/* menu mobile plein écran */
.mobile-menu{
  position:fixed;inset:0;
  z-index:880;
  background:var(--ink);
  display:flex;flex-direction:column;
  justify-content:center;
  padding:0 var(--gutter);
  gap:6px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .6s var(--ease-snap);
}
.mobile-menu.is-open{clip-path:inset(0 0 0 0);}
.mobile-menu a{
  font-family:var(--f-display);
  font-size:clamp(2.6rem, 11vw, 4.6rem);
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--paper);
  line-height:1.06;
  display:flex;align-items:baseline;gap:16px;
  opacity:0;transform:translateY(28px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),color .25s;
}
.mobile-menu.is-open a{opacity:1;transform:none;}
.mobile-menu a:hover{color:var(--green-neon);}
.mobile-menu a i{
  font-style:normal;
  font-family:var(--f-body);
  font-size:.8rem;
  letter-spacing:.3em;
  color:var(--green);
}
.mobile-menu__foot{
  position:absolute;bottom:34px;left:var(--gutter);right:var(--gutter);
  display:flex;justify-content:space-between;
  font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--paper-mute);
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:102px var(--gutter) 64px;
  overflow:hidden;
  isolation:isolate;
}

/* grille perspective — balayage latéral doux */
.hero__grid{
  position:absolute;
  top:-4%;bottom:-4%;
  left:-10%;right:-10%;
  z-index:-3;
  background:url('/img/grid.svg') repeat-x center / auto 104%;
  opacity:.55;
  mask-image:radial-gradient(78% 72% at 50% 52%, black 26%, transparent 80%);
  -webkit-mask-image:radial-gradient(78% 72% at 50% 52%, black 26%, transparent 80%);
  animation:grid-sweep 10s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes grid-sweep{
  from{transform:translateX(-2.4%);}
  to{transform:translateX(2.4%);}
}

/* projecteurs de stade */
.hero__beams{position:absolute;inset:0;z-index:-3;overflow:hidden;}
.hero__beams i{
  position:absolute;top:-22%;
  width:46vw;height:130%;
  background:linear-gradient(180deg, rgba(22,217,107,.16), transparent 62%);
  filter:blur(36px);
  transform-origin:top center;
  animation:beam-sway 9s ease-in-out infinite alternate;
}
.hero__beams i:nth-child(1){left:-6%;transform:rotate(17deg);}
.hero__beams i:nth-child(2){right:-4%;transform:rotate(-15deg);animation-delay:-4.5s;
  background:linear-gradient(180deg, rgba(82,255,161,.1), transparent 60%);}
.hero__beams i:nth-child(3){left:38%;width:24vw;transform:rotate(3deg);animation-delay:-2s;
  background:linear-gradient(180deg, rgba(233,230,220,.05), transparent 55%);}
@keyframes beam-sway{
  from{transform:rotate(14deg);opacity:.65;}
  to{transform:rotate(20deg);opacity:1;}
}

/* chauve-souris fantôme — le murcielago veille sur le chaudron */
.hero__bat{
  position:absolute;
  right:-5%;top:12%;
  width:clamp(320px, 44vw, 700px);
  color:var(--green);
  opacity:.06;
  z-index:-1;
  filter:blur(1.5px) drop-shadow(0 0 60px rgba(22,217,107,.35));
  animation:bat-float 11s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes bat-float{
  from{transform:rotate(-12deg) translateY(0);}
  to{transform:rotate(-8deg) translateY(-30px);}
}

/* halo terrain + halftone */
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:-4;
  background:
    radial-gradient(70% 56% at 50% 108%, rgba(22,217,107,.2), transparent 64%),
    radial-gradient(40% 32% at 82% -4%, rgba(82,255,161,.07), transparent 70%),
    var(--ink);
}
.hero::after{
  content:"";
  position:absolute;inset:0;z-index:-2;
  background-image:radial-gradient(rgba(233,230,220,.13) 1px, transparent 1.4px);
  background-size:26px 26px;
  mask-image:radial-gradient(62% 52% at 50% 60%, black, transparent 75%);
  -webkit-mask-image:radial-gradient(62% 52% at 50% 60%, black, transparent 75%);
  opacity:.5;
}

.hero__title{
  font-family:var(--f-display);
  font-size:clamp(3.4rem, 10.5vw, 9.6rem);
  line-height:.88;
  text-transform:uppercase;
  letter-spacing:.005em;
}
.hero__title .row{display:block;}
.hero__title .outline{
  color:transparent;
  -webkit-text-stroke:2px rgba(233,230,220,.85);
}
.hero__title .fill{
  color:var(--paper);
  text-shadow:0 0 60px rgba(22,217,107,.25);
}

/* script signature — en travers, chevauche le bas du titre */
.hero__script{
  position:relative;
  z-index:2;
  display:block;
  font-family:var(--f-script);
  font-size:clamp(2.2rem, 5vw, 4.4rem);
  font-weight:400;
  color:var(--green-neon);
  transform:rotate(-8deg) translate(22%, -.55em);
  margin-bottom:-.3em;
  text-shadow:
    0 1px 2px rgba(0,0,0,.75),
    0 2px 8px rgba(0,0,0,.5),
    0 0 28px rgba(82,255,161,.4);
  pointer-events:none;
}

.hero__actions{
  display:flex;flex-wrap:wrap;gap:18px;
  justify-content:center;
  margin-top:30px;
}

/* glitch */
.glitch{position:relative;display:inline-block;}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute;inset:0;
  overflow:hidden;
  clip-path:inset(50% 0 50% 0);
  opacity:0;
}
.glitch::before{color:var(--glitch-r);z-index:-1;}
.glitch::after{color:var(--glitch-c);z-index:-2;}
.glitch.is-glitching::before{
  opacity:.85;
  animation:glitch-a .32s steps(2) both;
}
.glitch.is-glitching::after{
  opacity:.85;
  animation:glitch-b .32s steps(2) both;
}
@keyframes glitch-a{
  0%{clip-path:inset(12% 0 78% 0);transform:translate(-7px,-3px);}
  25%{clip-path:inset(64% 0 8% 0);transform:translate(6px,2px);}
  50%{clip-path:inset(34% 0 48% 0);transform:translate(-5px,1px);}
  75%{clip-path:inset(80% 0 4% 0);transform:translate(4px,-2px);}
  100%{clip-path:inset(50% 0 50% 0);transform:none;}
}
@keyframes glitch-b{
  0%{clip-path:inset(70% 0 16% 0);transform:translate(7px,3px);}
  25%{clip-path:inset(8% 0 80% 0);transform:translate(-6px,-1px);}
  50%{clip-path:inset(46% 0 38% 0);transform:translate(5px,-3px);}
  75%{clip-path:inset(20% 0 64% 0);transform:translate(-4px,2px);}
  100%{clip-path:inset(50% 0 50% 0);transform:none;}
}

/* --------------------------------------------------------------------------
   8. BOUTONS
   -------------------------------------------------------------------------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:12px;
  padding:17px 34px;
  font-size:.76rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;
  overflow:hidden;
  isolation:isolate;
  transition:color .3s,transform .3s var(--ease-out);
  will-change:transform;
}
.btn .arrow{transition:transform .3s var(--ease-out);}
.btn:hover .arrow{transform:translateX(5px);}

.btn--solid{
  color:var(--ink);
  background:var(--green);
  clip-path:polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.btn--solid::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--green-neon);
  transform:translateX(-102%) skewX(-14deg) scaleX(1.2);
  transition:transform .45s var(--ease-snap);
}
.btn--solid:hover::before{transform:translateX(0) skewX(0) scaleX(1);}

.btn--ghost{
  color:var(--paper);
  border:1px solid var(--line);
  clip-path:polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.btn--ghost::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--paper);
  transform:translateY(101%);
  transition:transform .4s var(--ease-snap);
}
.btn--ghost:hover{color:var(--ink);}
.btn--ghost:hover::before{transform:translateY(0);}

/* --------------------------------------------------------------------------
   9. MARQUEE
   -------------------------------------------------------------------------- */
.marquee{
  position:relative;
  overflow:hidden;
  padding:22px 0;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:var(--ink-2);
}
/* bande inclinée façon sticker, à cheval sur les deux sections */
.marquee--tilt{
  transform:rotate(-1.8deg) scale(1.03);
  margin:-26px 0;
  position:relative;
  z-index:5;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.marquee__track{
  display:flex;gap:0;
  width:max-content;
  animation:marquee-run 26s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__chunk{
  display:flex;align-items:center;gap:34px;
  padding-right:34px;
  font-family:var(--f-display);
  font-size:clamp(1.4rem, 2.6vw, 2.3rem);
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
  color:var(--paper);
}
.marquee__chunk .out{
  color:transparent;
  -webkit-text-stroke:1px rgba(233,230,220,.5);
}
.marquee__chunk .star{color:var(--green);font-size:.8em;}
@keyframes marquee-run{to{transform:translateX(-50%);}}

/* --------------------------------------------------------------------------
   10. SECTIONS — entêtes communes
   -------------------------------------------------------------------------- */
.section{
  position:relative;
  padding:var(--section) var(--gutter);
}
.section__head{
  position:relative;
  margin-bottom:clamp(48px, 7vw, 90px);
}
.section__index{
  font-size:.72rem;font-weight:700;
  letter-spacing:.45em;
  color:var(--green);
  text-transform:uppercase;
  display:flex;align-items:center;gap:16px;
  margin-bottom:34px;
}
.section__index::after{content:"";flex:0 0 64px;height:1px;background:var(--green-deep);}
.section__title{
  font-family:var(--f-display);
  font-size:clamp(2.8rem, 8vw, 7rem);
  line-height:.92;
  text-transform:uppercase;
  color:var(--paper);
}
.section__title .outline{
  color:transparent;
  -webkit-text-stroke:1.6px rgba(233,230,220,.55);
}
.section__script{
  font-family:var(--f-script);
  font-size:clamp(1.8rem, 3.4vw, 3.1rem);
  color:var(--green-neon);
  text-transform:none;
  display:block;
  width:max-content;
  max-width:100%;
  transform:rotate(-3deg);
  margin:-.28em 0 0 clamp(60px, 22vw, 340px);
  text-shadow:0 0 26px rgba(82,255,161,.4);
}
/* immense mot fantôme derrière la section */
.section__ghost{
  position:absolute;
  top:-2vw;right:-2vw;
  font-family:var(--f-display);
  font-size:clamp(6rem, 20vw, 19rem);
  line-height:1;
  text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1px rgba(233,230,220,.07);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  z-index:-1;
}

/* révélations au scroll */
.reveal{
  opacity:0;
  transform:translateY(46px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
  transition-delay:var(--d, 0s);
}
.reveal.is-in{opacity:1;transform:none;}

/* --------------------------------------------------------------------------
   11. TRAVAUX — filtres + grille posters
   -------------------------------------------------------------------------- */
.work{background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);}

.filters{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:clamp(36px, 5vw, 60px);
}
.filter{
  padding:11px 22px;
  font-size:.72rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--paper-dim);
  border:1px solid var(--line);
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition:color .25s,border-color .25s,background .25s;
}
.filter:hover{color:var(--paper);border-color:var(--paper-dim);}
.filter.is-active{
  color:var(--ink);
  background:var(--green);
  border-color:var(--green);
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:clamp(16px, 2vw, 28px);
}
.work-card{
  position:relative;
  grid-column:span 4;
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
}
.work-card.is-hidden{
  opacity:0;
  transform:scale(.92);
  pointer-events:none;
  position:absolute;
  visibility:hidden;
}
/* rythme éditorial : certaines cartes plus larges / décalées */
.work-card:nth-child(6n+1){grid-column:span 5;}
.work-card:nth-child(6n+4){grid-column:span 5;margin-top:clamp(0px,4vw,70px);}
.work-card:nth-child(6n+2){grid-column:span 3;margin-top:clamp(0px,6vw,110px);}
.work-card:nth-child(6n+5){grid-column:span 3;}
.work-card:nth-child(6n+3){grid-column:span 4;margin-top:clamp(0px,2vw,40px);}
.work-card:nth-child(6n+6){grid-column:span 4;margin-top:clamp(0px,5vw,90px);}

/* ---- l'affiche elle-même ---- */
.poster{
  --pc: var(--green);
  --pc-soft: rgba(22,217,107,.32);
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--line-soft);
  transform-style:preserve-3d;
  transition:border-color .35s;
  isolation:isolate;
}
.work-card:hover .poster{border-color:var(--pc);}

/* le vrai poster */
.poster__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-out),filter .6s;
}
.work-card:hover .poster__img{
  transform:scale(1.06);
  filter:saturate(1.12) contrast(1.04);
}
/* halo couleur du projet au survol */
.poster::before{
  content:"";
  position:absolute;inset:0;z-index:2;
  background:radial-gradient(85% 60% at 50% 110%, var(--pc-soft), transparent 65%);
  opacity:0;
  transition:opacity .5s;
  pointer-events:none;
}
.work-card:hover .poster::before{opacity:.55;}

/* scanlines TV */
.poster__scan{
  position:absolute;inset:0;z-index:4;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 4px);
  opacity:.16;
  pointer-events:none;
}
/* éclat lumière en hover */
.poster::after{
  content:"";
  position:absolute;inset:0;z-index:5;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%);
  transform:translateX(-130%);
  transition:transform .9s var(--ease-out);
  pointer-events:none;
}
.work-card:hover .poster::after{transform:translateX(130%);}

/* étiquette catégorie collée sur l'affiche */
.poster__tag{
  position:absolute;
  top:14px;left:-6px;
  z-index:6;
  background:var(--pc);
  color:var(--ink);
  font-size:.6rem;font-weight:800;
  letter-spacing:.3em;text-transform:uppercase;
  padding:7px 14px 7px 18px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transform:rotate(-2deg);
}

/* méta sous l'affiche */
.work-card__meta{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;
  padding:16px 2px 0;
}
.work-card__title{
  font-family:var(--f-display);
  font-size:1.15rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--paper);
}
.work-card__title small{
  display:block;
  font-family:var(--f-body);
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.22em;
  color:var(--paper-mute);
  margin-top:5px;
}
.work-card__year{
  font-size:.7rem;font-weight:700;
  letter-spacing:.2em;
  color:var(--green);
  font-variant-numeric:tabular-nums;
}

/* bandeau CTA fin de grille */
.work__more{
  margin-top:clamp(54px, 7vw, 90px);
  text-align:center;
}
.work__more p{
  font-family:var(--f-script);
  font-size:clamp(1.9rem, 3.4vw, 2.9rem);
  color:var(--paper-dim);
  margin-bottom:24px;
  transform:rotate(-2deg);
}
.work__more p b{color:var(--green-neon);font-weight:400;}

/* --------------------------------------------------------------------------
   12. SERVICES
   -------------------------------------------------------------------------- */
.services{border-top:1px solid var(--line-soft);}
.service-list{border-top:1px solid var(--line);}
.service{
  position:relative;
  display:grid;
  grid-template-columns:90px 1fr auto;
  align-items:center;
  gap:clamp(18px, 4vw, 60px);
  padding:clamp(30px, 4.5vw, 52px) 8px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  transition:padding-left .4s var(--ease-out);
}
.service:hover{padding-left:26px;}
.service::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, var(--green-dark), transparent 70%);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s var(--ease-snap);
}
.service:hover::before{transform:scaleX(1);}
.service__num{
  font-family:var(--f-display);
  font-size:1.5rem;
  color:transparent;
  -webkit-text-stroke:1px rgba(233,230,220,.4);
  transition:color .35s,-webkit-text-stroke-color .35s;
}
.service:hover .service__num{color:var(--green-neon);-webkit-text-stroke-color:var(--green-neon);}
.service__name{
  font-family:var(--f-display);
  font-size:clamp(1.7rem, 4.4vw, 3.4rem);
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1;
}
.service__desc{
  margin-top:10px;
  max-width:560px;
  color:var(--paper-dim);
  font-size:.92rem;
  line-height:1.7;
}
.service__badges{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:14px;
}
.service__badges span{
  font-size:.62rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--green-neon);
  border:1px solid var(--green-deep);
  padding:5px 12px;
}
.service__arrow{
  font-family:var(--f-display);
  font-size:2rem;
  color:var(--paper-mute);
  transform:rotate(-45deg);
  transition:transform .4s var(--ease-out),color .3s;
}
.service:hover .service__arrow{transform:rotate(0);color:var(--green-neon);}
.service.is-open .service__arrow{transform:rotate(90deg);color:var(--green-neon);}

/* panneau dépliable — exemples & détails */
.service__more{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .6s var(--ease-out),opacity .45s,margin-top .4s;
}
.service.is-open .service__more{
  max-height:560px;
  opacity:1;
  margin-top:24px;
}
.service__more > p{
  max-width:62ch;
  color:var(--paper-dim);
  font-size:.92rem;
  line-height:1.75;
  border-left:2px solid var(--green-deep);
  padding-left:16px;
}
.service__examples{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:18px;
}
.service__examples img{
  width:96px;
  aspect-ratio:4/5;
  object-fit:cover;
  border:1px solid var(--line);
  transition:transform .35s var(--ease-out),border-color .3s;
}
.service__examples img:hover{
  transform:translateY(-5px);
  border-color:var(--green);
}
.service__link{
  display:inline-block;
  margin-top:18px;
  font-size:.72rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--green-neon);
  border-bottom:1px solid var(--green-deep);
  padding-bottom:5px;
  transition:border-color .3s,letter-spacing .3s;
}
.service__link:hover{border-color:var(--green-neon);letter-spacing:.32em;}

/* --------------------------------------------------------------------------
   14. À PROPOS
   -------------------------------------------------------------------------- */
.about{overflow:hidden;}
.about__grid{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
  gap:clamp(40px, 6vw, 110px);
  align-items:center;
}

/* portrait traité duotone, encadré poster */
.about__portrait{
  position:relative;
  aspect-ratio:4/5;
  max-width:480px;
}
.about__portrait::before{
  content:"";
  position:absolute;inset:0;
  transform:translate(18px,18px);
  border:1px solid var(--green-deep);
  z-index:-1;
}
.about__frame{
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
  background:
    radial-gradient(70% 52% at 50% 16%, rgba(233,230,220,.2), transparent 72%),
    radial-gradient(95% 70% at 50% 115%, rgba(22,217,107,.4), transparent 65%),
    linear-gradient(165deg, #131812, var(--ink) 85%);
  border:1px solid var(--line);
}
/* photo de profil dans le cadre */
.about__photo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  transition:filter .5s;
}
.about__portrait:hover .about__photo{filter:grayscale(.35) contrast(1.04);}
.about__frame::after{
  content:"";
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 4px),
    radial-gradient(rgba(82,255,161,.12) 1px, transparent 1.4px);
  background-size:auto, 10px 10px;
  mix-blend-mode:overlay;
  pointer-events:none;
}

.about__body .section__head{margin-bottom:34px;}
.about__lead{
  font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  line-height:1.8;
  color:var(--paper);
  margin-bottom:20px;
}
.about__lead .hl{
  color:var(--green-neon);
  font-weight:600;
}
.about__text{
  color:var(--paper-dim);
  line-height:1.85;
  margin-bottom:34px;
  max-width:56ch;
}
.about__tools{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:38px;
}
.about__tools span{
  font-size:.66rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  padding:9px 16px;
  border:1px solid var(--line);
  color:var(--paper-dim);
  transition:color .25s,border-color .25s,background .25s;
}
.about__tools span:hover{
  color:var(--ink);
  background:var(--green-neon);
  border-color:var(--green-neon);
}

/* --------------------------------------------------------------------------
   16. TÉMOIGNAGES
   -------------------------------------------------------------------------- */
.quotes__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px, 2.4vw, 34px);
}
.quote{
  position:relative;
  padding:38px 30px 32px;
  border:1px solid var(--line-soft);
  background:linear-gradient(165deg, rgba(233,230,220,.03), transparent 60%);
  transition:transform .4s var(--ease-out),border-color .35s;
}
.quote:hover{transform:translateY(-8px);border-color:var(--green-deep);}
.quote:nth-child(2){margin-top:clamp(0px, 3vw, 44px);}
.quote::before{
  content:"“";
  position:absolute;
  top:-30px;left:18px;
  font-family:var(--f-display);
  font-size:6rem;
  color:var(--green);
  opacity:.85;
}
.quote p{
  font-size:.95rem;
  line-height:1.8;
  color:var(--paper-dim);
  margin-bottom:24px;
}
.quote footer{
  display:flex;align-items:center;gap:14px;
}
.quote__avatar{
  width:42px;height:42px;flex:none;
  border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--f-display);
  font-size:1rem;
  color:var(--ink);
  background:linear-gradient(140deg, var(--green-neon), var(--green));
}
.quote cite{
  font-style:normal;
  font-weight:700;
  font-size:.86rem;
  color:var(--paper);
}
.quote cite small{
  display:block;
  font-weight:500;
  font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-mute);
  margin-top:4px;
}

/* --------------------------------------------------------------------------
   17. CONTACT
   -------------------------------------------------------------------------- */
.contact{
  position:relative;
  text-align:center;
  padding-top:calc(var(--section) * 1.1);
  padding-bottom:calc(var(--section) * .9);
  overflow:hidden;
  isolation:isolate;
}
.contact::before{
  content:"";
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(58% 60% at 50% 100%, rgba(22,217,107,.22), transparent 70%),
    var(--ink);
}
.contact::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(rgba(233,230,220,.12) 1px, transparent 1.4px);
  background-size:22px 22px;
  mask-image:radial-gradient(58% 54% at 50% 80%, black, transparent 78%);
  -webkit-mask-image:radial-gradient(58% 54% at 50% 80%, black, transparent 78%);
  opacity:.5;
}
.contact__script{
  font-family:var(--f-script);
  font-size:clamp(2.4rem, 5vw, 4.4rem);
  color:var(--green-neon);
  display:block;
  transform:rotate(-3deg);
  margin-bottom:6px;
  text-shadow:0 0 30px rgba(82,255,161,.45);
}
.contact__title{
  font-family:var(--f-display);
  font-size:clamp(3.4rem, 12.5vw, 12rem);
  line-height:.9;
  text-transform:uppercase;
  margin-bottom:4vh;
}
.contact__title a{
  display:block;
  transition:color .3s;
}
.contact__title .outline{
  color:transparent;
  -webkit-text-stroke:2px rgba(233,230,220,.8);
  transition:-webkit-text-stroke-color .3s,color .3s;
}
.contact__title a:hover .outline{
  color:var(--green-neon);
  -webkit-text-stroke-color:var(--green-neon);
  text-shadow:0 0 70px rgba(82,255,161,.4);
}
.contact__sub{
  max-width:480px;
  margin:0 auto 5vh;
  color:var(--paper-dim);
  line-height:1.8;
}
.contact__actions{
  display:flex;flex-wrap:wrap;gap:18px;
  justify-content:center;
  margin-top:5vh;
}

/* ---- faux Calendly (maquette) ---- */
.cal{
  display:grid;
  grid-template-columns:minmax(250px, 5fr) 7fr;
  max-width:960px;
  margin:0 auto;
  text-align:left;
  border:1px solid var(--line);
  background:
    linear-gradient(165deg, rgba(233,230,220,.035), transparent 55%),
    var(--ink-2);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.cal__info{
  padding:clamp(26px, 3vw, 40px);
  border-right:1px solid var(--line-soft);
  display:flex;flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.cal__avatar{
  width:58px;height:58px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--green);
  filter:grayscale(1);
}
.cal__brand{
  font-size:.64rem;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--paper-mute);
}
.cal__event{
  font-family:var(--f-display);
  font-size:clamp(1.5rem, 2.4vw, 2.1rem);
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--paper);
  margin-top:-8px;
}
.cal__meta{display:flex;flex-direction:column;gap:8px;}
.cal__meta li{
  font-size:.8rem;
  color:var(--paper-dim);
  display:flex;align-items:center;gap:10px;
}
.cal__meta li span{color:var(--green-neon);}
.cal__desc{
  font-size:.85rem;
  line-height:1.7;
  color:var(--paper-dim);
}
.cal__demo{
  font-size:.6rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);
  border:1px dashed rgba(232,194,100,.45);
  padding:7px 12px;
  margin-top:auto;
}
.cal__right{padding:clamp(26px, 3vw, 40px);}
.cal__head{
  display:flex;align-items:center;justify-content:space-between;
}
.cal__month{
  font-family:var(--f-display);
  font-size:1.1rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.cal__nav i{
  font-style:normal;
  color:var(--paper-mute);
  padding:0 8px;
  font-size:1.2rem;
}
.cal__week{
  display:grid;grid-template-columns:repeat(7, 1fr);
  gap:6px;
  text-align:center;
  font-size:.6rem;font-weight:700;
  letter-spacing:.2em;
  color:var(--paper-mute);
  margin:20px 0 10px;
}
.cal__days{
  display:grid;grid-template-columns:repeat(7, 1fr);
  gap:6px;
}
.cal__day{
  aspect-ratio:1;
  display:grid;place-items:center;
  font-size:.82rem;
  font-variant-numeric:tabular-nums;
  color:var(--paper-mute);
  border:1px solid transparent;
}
.cal__day.is-past{opacity:.28;}
.cal__day.is-avail{
  color:var(--green-neon);
  font-weight:700;
  background:rgba(22,217,107,.08);
  border-color:var(--green-deep);
  cursor:pointer;
  transition:background .25s,color .25s,transform .2s;
}
.cal__day.is-avail:hover{
  background:var(--green-deep);
  transform:translateY(-2px);
}
.cal__day.is-selected{
  background:var(--green);
  color:var(--ink);
  border-color:var(--green);
}
.cal__slots{
  margin-top:22px;
  border-top:1px solid var(--line-soft);
  padding-top:18px;
}
.cal__slots-title{
  font-size:.74rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-dim);
  margin-bottom:14px;
}
.cal__slots-title b{color:var(--green-neon);}
.cal__slot-list{display:flex;flex-wrap:wrap;gap:8px;}
.cal__slot{
  padding:11px 18px;
  font-size:.8rem;font-weight:600;
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  color:var(--paper-dim);
  border:1px solid var(--line);
  transition:color .25s,border-color .25s,background .25s;
}
.cal__slot:hover{color:var(--paper);border-color:var(--green);}
.cal__slot.is-selected{
  background:var(--green);
  border-color:var(--green);
  color:var(--ink);
}
.cal__confirm{margin-top:20px;}
.cal__success{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  gap:14px;
  min-height:340px;
}
.cal__check{
  width:64px;height:64px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--green);
  color:var(--ink);
  font-size:1.8rem;font-weight:700;
  box-shadow:0 0 40px rgba(22,217,107,.5);
}
.cal__success h4{
  font-family:var(--f-display);
  font-size:1.7rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.cal__success p{
  font-size:.88rem;
  color:var(--paper-dim);
  line-height:1.7;
}
.cal__success p b{color:var(--green-neon);}
.cal__reset{
  font-size:.7rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--paper-dim);
  border-bottom:1px solid var(--line);
  padding-bottom:5px;
  transition:color .25s,border-color .25s;
}
.cal__reset:hover{color:var(--green-neon);border-color:var(--green-neon);}
.contact__links{
  margin-top:7vh;
  display:flex;flex-wrap:wrap;gap:clamp(20px, 4vw, 54px);
  justify-content:center;
  font-size:.72rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;
}
.contact__links a{
  color:var(--paper-mute);
  display:inline-flex;align-items:center;gap:10px;
  transition:color .25s;
}
.contact__links a::before{
  content:"";
  width:7px;height:7px;
  background:var(--green-deep);
  transform:rotate(45deg);
  transition:background .25s;
}
.contact__links a:hover{color:var(--green-neon);}
.contact__links a:hover::before{background:var(--green-neon);}

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.site-foot{
  position:relative;
  border-top:1px solid var(--line-soft);
  background:
    radial-gradient(55% 70% at 50% 130%, rgba(22,217,107,.1), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  padding:clamp(56px, 7vw, 96px) var(--gutter) 0;
  overflow:hidden;
}
.site-foot__main{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px, 5vw, 90px);
  padding-bottom:clamp(40px, 5vw, 64px);
}
.site-foot__brand{
  display:flex;flex-direction:column;
  align-items:flex-start;
  gap:22px;
}
.site-foot__tag{
  max-width:34ch;
  color:var(--paper-dim);
  font-size:.9rem;
  line-height:1.75;
}
.site-foot__col h4{
  font-size:.64rem;font-weight:700;
  letter-spacing:.4em;text-transform:uppercase;
  color:var(--green);
  margin-bottom:20px;
}
.site-foot__col a{
  display:block;
  width:max-content;
  padding:7px 0;
  font-size:.92rem;
  color:var(--paper-dim);
  transition:color .25s,transform .3s var(--ease-out);
}
.site-foot__col a:hover{
  color:var(--green-neon);
  transform:translateX(6px);
}
.site-foot__bottom{
  display:flex;flex-wrap:wrap;gap:14px 26px;
  align-items:center;justify-content:space-between;
  padding:22px 0;
  border-top:1px solid var(--line-soft);
  font-size:.64rem;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--paper-mute);
}
.site-foot__bottom a:hover{color:var(--paper);}
.site-foot__ghost{
  display:block;
  margin:10px calc(var(--gutter) * -1) 0;
  text-align:center;
  font-family:var(--f-display);
  font-size:clamp(4.2rem, 14.5vw, 13.5rem);
  line-height:.78;
  text-transform:uppercase;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(233,230,220,.09);
  transform:translateY(.16em);
  user-select:none;
  pointer-events:none;
}
.totop{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;
  color:var(--paper-dim);
  transition:color .25s;
}
.totop:hover{color:var(--green-neon);}
.totop i{
  font-style:normal;
  display:inline-block;
  transition:transform .3s var(--ease-out);
}
.totop:hover i{transform:translateY(-4px);}

/* --------------------------------------------------------------------------
   19. PAGE 404
   -------------------------------------------------------------------------- */
.page-404{
  min-height:100svh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:40px var(--gutter);
  position:relative;
  overflow:hidden;
}
.page-404::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 50% at 50% 110%, rgba(22,217,107,.18), transparent 70%),
    var(--ink);
}
.page-404 h1{
  font-family:var(--f-display);
  font-size:clamp(7rem, 30vw, 22rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:2.5px rgba(233,230,220,.85);
}
.page-404 .script{
  font-family:var(--f-script);
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  color:var(--green-neon);
  transform:rotate(-3deg);
  margin:-1.2em 0 1.6em;
  text-shadow:0 0 26px rgba(82,255,161,.4);
}
.page-404 p{
  color:var(--paper-dim);
  margin-bottom:38px;
  max-width:42ch;
}

/* --------------------------------------------------------------------------
   20. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .work-grid .work-card,
  .work-card:nth-child(6n+1),
  .work-card:nth-child(6n+2),
  .work-card:nth-child(6n+3),
  .work-card:nth-child(6n+4),
  .work-card:nth-child(6n+5),
  .work-card:nth-child(6n+6){grid-column:span 6;margin-top:0;}
  .work-card:nth-child(even){margin-top:clamp(0px, 4vw, 60px);}
  .quotes__grid{grid-template-columns:1fr;max-width:620px;margin:0 auto;}
  .quote:nth-child(2){margin-top:0;}
  .about__grid{grid-template-columns:1fr;}
  .about__portrait{margin:0 auto;}
}
@media (max-width:760px){
  .main-nav{display:none;}
  .burger{display:flex;}
  .hero__title{font-size:clamp(3.4rem, 19vw, 7rem);}
  .work-grid .work-card,
  .work-card:nth-child(even){grid-column:span 12;margin-top:0;}
  .service{grid-template-columns:1fr;gap:10px;}
  .service__num{font-size:1.1rem;}
  .service__arrow{display:none;}
  .contact__actions{flex-direction:column;align-items:center;}
  .site-foot__main{grid-template-columns:1fr;gap:38px;}
  .site-foot__bottom{justify-content:center;text-align:center;}
  .cal{grid-template-columns:1fr;}
  .cal__info{border-right:0;border-bottom:1px solid var(--line-soft);}
}

/* --------------------------------------------------------------------------
   21. ACCESSIBILITÉ — mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
  .grain{animation:none;}
  .marquee__track{animation:none;}
  .loader{display:none;}
}