/* ============================================================
   Thomas Migevant — Directeur de la photographie
   Feuille de style partagée par toutes les pages
   ============================================================ */

:root{
  --bg: #0b0b0c;
  --panel: #131314;
  --panel-2: #18181a;
  --hairline: #262628;
  --ink: #e9e7e3;
  --ink-dim: #7a7a7a;
  --accent: #d4d2cd; /* blanc cassé légèrement estompé, sert d'accent discret */
  --accent-dim: #4a4a4c;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent); color:#0b0b0c;}
img, video{display:block; max-width:100%;}
a{color:inherit;}

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 5vw;
  background:linear-gradient(180deg, rgba(11,11,12,0.75), transparent);
}
.logo{
  font-family:'Fraunces', serif;
  font-size:15px;
  letter-spacing:0.1em;
  color:var(--ink);
  text-transform:uppercase;
  text-decoration:none;
}
.navlinks{display:flex; gap:38px; list-style:none;}
.navlinks a{
  text-decoration:none;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--ink);
  position:relative;
  padding-bottom:4px;
}
.navlinks a.active{color:var(--accent);}
.navlinks a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--accent); transition:width .3s ease;
}
.navlinks a:hover::after, .navlinks a.active::after{width:100%;}

@media(max-width:800px){
  .navlinks{gap:22px;}
  .logo{font-size:13px;}
}

/* ---------- HERO (page d'accueil / showreel) ---------- */
.hero{
  height:100vh;
  min-height:640px;
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  background:#000;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* Repère visuel tant qu'aucune vraie vidéo n'est branchée */
.hero-video-placeholder{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.05), transparent 55%),
    linear-gradient(160deg, #1a1a1b 0%, #0b0b0c 45%, #050505 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter', sans-serif;
  font-size:12px; letter-spacing:0.08em; color:var(--ink-dim);
  border:1px dashed var(--hairline);
  margin:2px;
}
.hero-vignette{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.7) 100%);
  pointer-events:none;
}
.hero-content{
  position:relative;
  padding:0 5vw 5vw;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.hero-name{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:clamp(20px, 2.4vw, 30px);
  color:var(--ink);
}
.hero-name span{
  display:block;
  font-family:'Inter', sans-serif;
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--ink-dim);
  margin-top:6px;
  font-weight:300;
}
.sound-toggle{
  display:flex; align-items:center; gap:10px;
  font-family:'Inter', sans-serif;
  font-size:11px; letter-spacing:0.06em; color:var(--ink-dim);
  background:transparent;
  border:1px solid var(--hairline);
  padding:9px 16px;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.sound-toggle:hover{border-color:var(--accent-dim); color:var(--ink);}
.sound-toggle::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--ink-dim);
}

/* ---------- SECTION (Pub / Clip / Corporate) ---------- */
.page-head{
  padding:170px 5vw 0;
}
.section{padding:0 5vw 120px;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:40px;
  border-bottom:1px solid var(--hairline);
  padding-bottom:28px;
}
.section-eyebrow{
  font-family:'Inter', sans-serif;
  font-size:11px; letter-spacing:0.12em; color:var(--accent);
  text-transform:uppercase;
  margin-bottom:14px;
  display:block;
}
.section-head h1{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:clamp(30px, 4vw, 52px);
  color:var(--ink);
}
.section-intro{
  max-width:560px;
  font-size:15px;
  line-height:1.75;
  color:var(--ink-dim);
  font-weight:300;
  margin-bottom:56px;
}
.section-intro strong{color:var(--ink); font-weight:500;}

/* ---------- PROJECT GRID ---------- */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  background:var(--bg);
}
.card{
  background:var(--panel);
  aspect-ratio:2.39/1;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  width:80%;
  margin:0 auto;
}
.card-visual{
  position:absolute; inset:0;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.card-visual video, .card-visual img{
  width:100%; height:100%; object-fit:cover;
}
.card:hover .card-visual{transform:scale(1.06);}
.card::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
}
.card-label{
  position:absolute; left:32px; right:32px; bottom:28px; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.card-label h3{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:clamp(20px, 2.6vw, 34px);
  color:var(--ink);
}
.card-meta{
  font-family:'Inter', sans-serif;
  font-size:12px;
  color:var(--accent);
  letter-spacing:0.06em;
  text-align:right;
  text-transform:uppercase;
}
.card-sound{
  position:absolute; top:28px; right:32px; z-index:3;
  background:transparent;
  border:1px solid rgba(233,231,227,0.3);
  color:var(--ink-dim);
  font-family:'Inter', sans-serif;
  font-size:11px; letter-spacing:0.06em;
  padding:9px 16px;
  opacity:0; transition:opacity .3s ease, border-color .2s ease, color .2s ease;
  cursor:pointer;
}
.card:hover .card-sound{opacity:1;}
.card-sound:hover{border-color:var(--accent-dim); color:var(--ink);}

/* Barre de lecture des vidéos de projet */
.card-progress{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  height:18px; cursor:pointer;
  display:flex; align-items:flex-end;
  touch-action:none;
}
.card-progress::before{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:3px; background:rgba(233,231,227,0.18);
  opacity:0; transition:opacity .3s ease, height .15s ease;
}
.card-progress-fill{
  position:relative; height:3px; width:0;
  background:var(--ink); opacity:0;
  transition:opacity .3s ease, height .15s ease;
}
.card:hover .card-progress::before,
.card:hover .card-progress-fill{opacity:1;}
.card-progress.started .card-progress-fill{opacity:.55;}
.card:hover .card-progress.started .card-progress-fill{opacity:1;}
.card-progress:hover::before,
.card-progress:hover .card-progress-fill{height:6px;}

/* Placeholders de couleur en attendant les vraies images/vidéos de projet */
.v1{background:linear-gradient(135deg,#2b1f16,#0f0d0b);}
.v2{background:linear-gradient(135deg,#1a2126,#0a0d0f);}
.v3{background:linear-gradient(135deg,#241a1a,#0d0909);}
.v4{background:linear-gradient(135deg,#1c2018,#0a0c09);}
.v5{background:linear-gradient(135deg,#231d10,#0c0a05);}
.v6{background:linear-gradient(135deg,#141c22,#080b0d);}

/* ---------- ABOUT (page Corporate) ---------- */
.about{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:80px;
  padding:0 5vw 120px;
  align-items:start;
}
.about-visual{
  aspect-ratio:4/5;
  background:linear-gradient(160deg,#1c1a16,#08080a 70%);
  position:relative;
  border:1px solid var(--hairline);
  overflow:hidden;
}
.about-visual img{width:100%; height:100%; object-fit:cover;}
.about-visual .tag{
  position:absolute; bottom:20px; left:20px;
  font-family:'Inter', sans-serif;
  font-size:10px; color:var(--ink-dim); letter-spacing:0.06em;
}
.about p{
  font-size:15px; line-height:1.8; color:var(--ink-dim); font-weight:300;
  margin-bottom:16px;
}
.about p + p{
  margin-top:24px;
}
.clients{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  margin-top:56px;
  font-family:'Inter', sans-serif;
  font-size:11px; letter-spacing:0.06em; color:var(--ink-dim);
  text-transform:uppercase;
}

/* ---------- FOOTER ---------- */
footer{
  padding:60px 5vw;
  border-top:1px solid var(--hairline);
}
.footer-grid{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  font-family:'Inter', sans-serif;
  font-size:11px; letter-spacing:0.06em; color:var(--ink-dim);
}
.footer-grid a{text-decoration:none;}
.footer-grid a:hover{color:var(--ink);}
.footer-contact{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:800px){
  .grid{grid-template-columns:1fr;}
  .about{grid-template-columns:1fr;}
  .page-head{padding-top:130px;}
}