/* =========================================================
   PASTRAMI — police de titre.
   ========================================================= */
@font-face {
  font-family: 'Pastrami';
  src: url('https://db.onlinewebfonts.com/t/pastrami.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}

:root{
  --clair:   #FEF9F5;
  --sombre:  #333336;
  --sombre-soft: #5a5a5e;
  --accent:  #333336;
  --vert:    #5B8A78;
  --or:      #C8A85C;
  --ligne:   rgba(51,51,54,.14);
  --ligne-clair: rgba(254,249,245,.18);
  --titre: 'Pastrami', 'Arial Black', 'Helvetica Neue', sans-serif;
  --texte: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--vert);
  color:var(--clair);
  font-family:var(--texte);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--or);color:var(--clair);}

/* grain texture overlay */
body::after{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- TYPOGRAPHIE ---------- */
.display{
  font-family:var(--titre);
  font-weight:normal;
  line-height:.92;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.eyebrow{
  font-family:var(--texte);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.5rem clamp(1.25rem,4vw,3.5rem);
  background:var(--vert);
  color:var(--clair);
}
nav .logo{
  font-family:var(--titre);font-size:1.5rem;text-transform:uppercase;
  letter-spacing:.02em;
}
nav .links{display:flex;gap:2rem;}
nav .links a{
  color:inherit;text-decoration:none;
  font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  position:relative;padding:.25rem 0;
}
nav .links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .4s var(--ease);
}
nav .links a:hover::after{width:100%;}
@media(max-width:680px){nav .links{display:none;}}

/* =========================================================
   SECTION 1 — HERO + OBJET 3D INTERACTIF
   ========================================================= */
#hero{
  position:relative;
  height:100vh;
  max-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:7rem clamp(1.25rem,4vw,3.5rem) 4rem;
  overflow:hidden;
  background:var(--clair);
}
#three-canvas{
  position:absolute;inset:0;
  z-index:1;
}
#hero .hero-inner{
  position:relative;z-index:2;
  pointer-events:none;
}
#hero h1{
  font-size:clamp(2.4rem,6vw,7.5rem);
  max-width:none;
  color:var(--or);
}
#hero h1 .line{display:block;overflow:hidden;}
#hero h1 .line span{
  display:block;
  transform:translateY(110%);
  animation:reveal 1.1s var(--ease) forwards;
}
#hero h1 .line:nth-child(2) span{animation-delay:.12s;}
@keyframes reveal{to{transform:translateY(0);}}

#hero .meta{
  display:flex;flex-wrap:wrap;gap:2.5rem;
  margin-top:2.5rem;
  opacity:0;animation:fade 1s var(--ease) .6s forwards;
}
@keyframes fade{to{opacity:1;}}
#hero .meta div{max-width:30ch;}
#hero .meta .eyebrow{color:var(--sombre-soft);margin-bottom:.5rem;}
#hero .meta p{font-size:.95rem;line-height:1.6;color:var(--sombre);}

#hero .scroll-hint{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--sombre-soft);
  opacity:0;animation:fade 1s var(--ease) 1s forwards;
}
#hero .scroll-hint .bar{
  width:1px;height:46px;background:var(--vert);
  transform-origin:top;animation:scrollbar 1.8s var(--ease) infinite;
}
@keyframes scrollbar{
  0%{transform:scaleY(0);} 40%{transform:scaleY(1);}
  60%{transform:scaleY(1);transform-origin:top;}
  60.1%{transform-origin:bottom;}
  100%{transform:scaleY(0);transform-origin:bottom;}
}

/* ---------- BANDEAU DÉFILANT ---------- */
.marquee{
  border-top:1px solid var(--ligne-clair);
  border-bottom:1px solid var(--ligne-clair);
  padding:1.1rem 0;
  overflow:hidden;
  white-space:nowrap;
  background:var(--vert);
}
.marquee .track{
  display:inline-block;
  animation:scrolltext 28s linear infinite;
}
.marquee span{
  font-family:var(--titre);
  font-size:1.6rem;text-transform:uppercase;
  padding:0 1.5rem;
  color:var(--clair);
}
.marquee span.dim{-webkit-text-stroke:1px var(--or);color:transparent;}
@keyframes scrolltext{to{transform:translateX(-50%);}}

/* =========================================================
   SECTION 2 — DÉMOREEL
   ========================================================= */
#showreel{
  padding:clamp(5rem,12vw,9rem) clamp(1.25rem,4vw,3.5rem);
}
.sec-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;flex-wrap:wrap;
  margin-bottom:2.8rem;
}
.sec-head .num{
  font-family:var(--titre);font-size:1rem;
  color:var(--or);
}
.sec-head h2{
  font-size:clamp(2.6rem,7vw,6rem);
  color:var(--clair);
}
.sec-head p{max-width:34ch;font-size:.92rem;line-height:1.6;color:rgba(254,249,245,.75);}

.reel{
  position:relative;
  border-radius:6px;
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--sombre);
  cursor:pointer;
}
.reel .placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.2rem;
  background:radial-gradient(120% 120% at 30% 20%, #45454a 0%, #333336 55%, #232325 100%);
  color:var(--clair);
}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.reel .play{
  width:92px;height:92px;border-radius:50%;
  border:1px solid var(--vert);
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s var(--ease),background .4s;
}
.reel:hover .play{transform:scale(1.12);background:rgba(91,138,120,.15);}
.reel .play::after{
  content:"";
  border-left:18px solid var(--clair);
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  margin-left:5px;
}
.reel .ph-label{
  font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;
  color:rgba(254,249,245,.6);
}
.reel .corner{
  position:absolute;
  font-family:var(--titre);font-size:1.1rem;text-transform:uppercase;
  color:rgba(254,249,245,.85);
}
.reel .corner.tl{top:1.4rem;left:1.6rem;}
.reel .corner.br{bottom:1.4rem;right:1.6rem;}

/* =========================================================
   PLAYER CUSTOM
   ========================================================= */
.v-overlay{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:opacity .4s var(--ease);
}
.v-overlay.playing{opacity:0;pointer-events:none;}
.reel:hover .v-overlay.playing{opacity:1;pointer-events:auto;}

.v-big-play{
  width:88px;height:88px;border-radius:50%;
  border:1px solid var(--vert);
  background:rgba(30,30,32,.4);
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s var(--ease),background .4s;
}
.v-overlay:hover .v-big-play{
  transform:scale(1.1);
  background:rgba(91,138,120,.25);
}
.v-big-play svg{width:26px;height:26px;fill:var(--clair);}
.v-big-play .ico-play{margin-left:4px;}

.v-controls{
  position:absolute;bottom:0;left:0;right:0;z-index:4;
  padding:.7rem 1.4rem .95rem;
  background:linear-gradient(0deg,rgba(20,20,22,.92) 0%,transparent 100%);
  display:flex;align-items:center;gap:.85rem;
  opacity:0;transition:opacity .3s var(--ease);
  pointer-events:none;
}
.reel:hover .v-controls{opacity:1;pointer-events:auto;}

.v-progress{
  flex:1;height:3px;
  background:rgba(254,249,245,.2);
  border-radius:100px;cursor:pointer;
  position:relative;transition:height .15s;
}
.v-progress:hover{height:5px;}
.v-progress-fill{
  height:100%;background:var(--or);
  border-radius:100px;width:0%;
  pointer-events:none;position:relative;
}
.v-progress-fill::after{
  content:'';
  position:absolute;right:-5px;top:50%;
  transform:translateY(-50%);
  width:11px;height:11px;border-radius:50%;
  background:var(--or);opacity:0;transition:opacity .15s;
}
.v-progress:hover .v-progress-fill::after{opacity:1;}

.v-btn{
  background:none;border:none;padding:.25rem;
  cursor:pointer;color:var(--clair);
  display:flex;align-items:center;flex-shrink:0;
  opacity:.75;transition:opacity .2s,transform .2s;
}
.v-btn:hover{opacity:1;transform:scale(1.12);}
.v-btn svg{width:17px;height:17px;fill:currentColor;}

.v-time{
  font-family:var(--texte);font-size:.68rem;
  letter-spacing:.08em;color:var(--clair);
  opacity:.75;white-space:nowrap;flex-shrink:0;
}

/* =========================================================
   SECTION 3 — PROJETS (ARTICLES)
   ========================================================= */
#projets{
  padding:clamp(3rem,8vw,6rem) clamp(1.25rem,4vw,3.5rem) clamp(5rem,12vw,9rem);
}
.article{
  border-top:1px solid var(--ligne-clair);
  padding:clamp(3rem,7vw,6rem) 0;
}
.article:last-child{border-bottom:1px solid var(--ligne-clair);}

.article .art-head{
  display:flex;align-items:baseline;gap:1.5rem;flex-wrap:wrap;
  margin-bottom:2rem;
}
.article .art-index{
  font-family:var(--titre);font-size:1.1rem;color:var(--or);
}
.article h3{
  font-family:var(--titre);
  font-size:clamp(2.2rem,6vw,5rem);
  text-transform:uppercase;line-height:.95;letter-spacing:-.02em;
  color:var(--clair);
}
.article .tag{
  margin-left:auto;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--or);
  padding:.45rem .9rem;border-radius:100px;
  color:var(--or);
}

/* vidéo principale de l'article */
.art-video{
  position:relative;
  aspect-ratio:16/9;
  border-radius:6px;overflow:hidden;
  background:var(--sombre);
  cursor:pointer;
}
.art-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.art-video .placeholder{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:1rem;
  background:radial-gradient(120% 120% at 70% 30%, #45454a 0%, #333336 60%, #232325 100%);
  color:rgba(254,249,245,.6);
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
}
.art-video .play-sm{
  width:64px;height:64px;border-radius:50%;
  border:1px solid var(--vert);
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s var(--ease),background .4s;
}
.art-video:hover .play-sm{transform:scale(1.12);background:rgba(91,138,120,.15);}
.art-video .play-sm::after{
  content:"";
  border-left:13px solid var(--clair);
  border-top:8px solid transparent;border-bottom:8px solid transparent;
  margin-left:4px;
}

/* corps de l'article : description + grille */
.art-body{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  margin-top:2.2rem;
}
@media(min-width:880px){
  .art-body{grid-template-columns:.85fr 1.5fr;gap:3.5rem;}
}
.art-desc .eyebrow{color:rgba(254,249,245,.65);margin-bottom:.9rem;}
.art-desc p{font-size:1rem;line-height:1.7;margin-bottom:1rem;}
.art-desc ul{list-style:none;margin-top:1.4rem;}
.art-desc li{
  display:flex;justify-content:space-between;
  padding:.7rem 0;border-bottom:1px solid var(--ligne-clair);
  font-size:.85rem;
}
.art-desc li span:last-child{color:rgba(254,249,245,.6);}

/* grille d'images des technicités */
.art-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:.7rem;
}
.art-grid .cell{
  position:relative;
  border-radius:4px;overflow:hidden;
}
.art-grid .cell img{width:100%;height:100%;object-fit:cover;display:block;}
.art-grid .cell .ph{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;
  padding:.7rem;
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(254,249,245,.75);
}
/* 2 rectangles horizontaux — colonne gauche */
.art-grid .cell:nth-child(1),
.art-grid .cell:nth-child(2){aspect-ratio:2.5/1;}
/* rectangle vertical — colonne droite, 2 lignes */
.art-grid .cell:nth-child(3){grid-column:2;grid-row:1 / span 2;}
/* couleurs */
.art-grid .cell:nth-child(1){background:linear-gradient(135deg,#8fbfb0,#5B8A78);}
.art-grid .cell:nth-child(2){background:linear-gradient(135deg,#3d3d42,#28282b);}
.art-grid .cell:nth-child(2) .ph{color:rgba(254,249,245,.55);}
.art-grid .cell:nth-child(3){background:linear-gradient(135deg,#ddc87c,#C8A85C);}

/* variante 6 cellules */
.art-grid-six{grid-template-columns:repeat(3,1fr);}
.art-grid-six .cell{aspect-ratio:1;grid-column:auto;grid-row:auto;}
.art-grid-six .cell:nth-child(1),
.art-grid-six .cell:nth-child(2){aspect-ratio:1;}
.art-grid-six .cell:nth-child(1){background:linear-gradient(135deg,#8fbfb0,#5B8A78);}
.art-grid-six .cell:nth-child(2){background:linear-gradient(135deg,#3d3d42,#28282b);}
.art-grid-six .cell:nth-child(2) .ph{color:rgba(254,249,245,.55);}
.art-grid-six .cell:nth-child(3){background:linear-gradient(135deg,#ddc87c,#C8A85C);grid-column:auto;grid-row:auto;aspect-ratio:1;}
.art-grid-six .cell:nth-child(4){background:linear-gradient(135deg,#333336,#454449);}
.art-grid-six .cell:nth-child(4) .ph{color:rgba(254,249,245,.55);}
.art-grid-six .cell:nth-child(5){background:linear-gradient(135deg,#a5cfc3,#7aaa9c);}
.art-grid-six .cell:nth-child(6){background:linear-gradient(135deg,#3d3d42,#28282b);}
.art-grid-six .cell:nth-child(6) .ph{color:rgba(254,249,245,.55);}

/* variante 2 carrés */
.art-grid-two{grid-template-columns:1fr 1fr;}
.art-grid-two .cell:nth-child(1),
.art-grid-two .cell:nth-child(2){aspect-ratio:1;grid-column:auto;grid-row:auto;}
.art-grid-two .cell:nth-child(2){background:linear-gradient(135deg,#ddc87c,#C8A85C);}
.art-grid-two .cell:nth-child(2) .ph{color:rgba(254,249,245,.75);}

/* ---------- reveal au scroll ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- FOOTER ---------- */
footer{
  background:var(--vert);
  color:var(--clair);
  padding:clamp(4rem,10vw,8rem) clamp(1.25rem,4vw,3.5rem) 2.5rem;
}
footer .ft-big{
  font-family:var(--titre);
  font-size:clamp(2.6rem,9vw,8rem);
  text-transform:uppercase;line-height:.95;
  margin-bottom:3rem;
  color:var(--clair);
}
footer .ft-big a{color:inherit;text-decoration:none;display:inline-block;}
footer .ft-big a:hover{-webkit-text-stroke:1px var(--or);color:transparent;}
footer .ft-row{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;
  border-top:1px solid rgba(254,249,245,.18);
  padding-top:2rem;
  font-size:.8rem;letter-spacing:.05em;
}
footer .ft-row .social{display:flex;gap:1.6rem;}
footer .ft-row a{color:rgba(254,249,245,.7);text-decoration:none;}
footer .ft-row a:hover{color:var(--clair);}