/* =========================================================
   Clément Lepage — style.css
   ========================================================= */

:root{
  --bg: #060606;
  --bg-raise: #101010;
  --text: #f3f1ec;
  --text-dim: #9c9a94;
  --text-faint: #6e6c67;
  --line: rgba(255,255,255,0.09);
  --gold: #c9a876;
  --font-title: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --nav-h: 84px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight:300;
  line-height:1.6;
  cursor:none;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:none; }

h1,h2,h3{ font-family: var(--font-title); font-weight:400; letter-spacing:.02em; }

::selection{ background: var(--gold); color:#000; }

/* ---------- custom cursor ---------- */
.cursor-dot{
  position:fixed; top:0; left:0; width:8px; height:8px;
  background:#fff; border-radius:50%;
  pointer-events:none; z-index:9999;
  transform: translate(-50%,-50%);
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .2s;
  mix-blend-mode: difference;
}
.cursor-dot.hover{ width:38px; height:38px; background:#fff; }
@media (hover:none), (pointer:coarse){
  .cursor-dot{ display:none; }
  body, button, a{ cursor:auto; }
}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 clamp(20px, 4vw, 56px);
  background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
  pointer-events:none;
}
.nav > *{ pointer-events:auto; }
.logo{
  font-family: var(--font-title);
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing:.08em;
  font-weight:400;
}
.nav-links{ display:flex; gap: clamp(20px, 3vw, 42px); }
.nav-links a{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--text-dim);
  transition: color .3s var(--ease);
  position:relative;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background: var(--gold); transition: width .3s var(--ease);
}
.nav-links a:hover{ color: var(--text); }
.nav-links a:hover::after{ width:100%; }

.nav-right{ display:flex; align-items:center; gap:22px; }
.lang-switch{
  display:flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:.1em;
  border:1px solid var(--line); padding:6px 12px; border-radius:2px;
  transition: border-color .3s;
}
.lang-switch:hover{ border-color: var(--gold); }
.lang-switch .lang-sep{ color: var(--text-faint); }
.lang-option{ color: var(--text-faint); transition: color .3s; }
.lang-option:hover{ color: var(--text); }
.lang-option.active{ color: var(--gold); }

.nav-burger{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav-burger span{ display:block; height:1px; background:#fff; width:100%; }

@media (max-width: 820px){
  .nav-links{
    position:fixed; inset:0; height:100vh; width:100%;
    background: var(--bg);
    flex-direction:column; align-items:center; justify-content:center; gap:34px;
    transform: translateX(100%); transition: transform .45s var(--ease);
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ font-size:16px; }
  .nav-burger{ display:flex; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; width:100%; height:100vh; overflow:hidden; background:#000;
}
.hero-track{ position:relative; width:100%; height:100%; }
.hero-slide{
  position:absolute; inset:0;
  display:flex; align-items:center;
  padding-top: 72px; box-sizing:border-box;
  opacity:0; transition: opacity 1.1s var(--ease);
  pointer-events:none;
}
.hero-slide.active{ opacity:1; pointer-events:auto; }

.hero-slide .hero-media{
  position:relative; height:100%; width:60%;
  display:flex; align-items:center; justify-content:center;
}
.hero-slide.side-right .hero-media{ margin-left:4%; }
.hero-slide.side-left  .hero-media{ margin-right:4%; margin-left:auto; }

.hero-slide img{
  max-width:100%; max-height:80vh;
  object-fit:contain;
  filter: saturate(1.02);
}

/* text sits centered in the empty band between the photo and the screen edge,
   not pinned to the edge itself */
.hero-text{
  position:absolute; top:50%; transform: translateY(-50%);
  width: 36%;
  box-sizing:border-box;
  text-align:center;
  font-family: var(--font-title);
  font-style:italic; font-weight:400;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height:1.5;
  color: rgba(243,241,236,.86);
  opacity:0; transition: opacity 1.4s var(--ease) .3s, transform 1.4s var(--ease) .3s;
}
.hero-slide.active .hero-text{ opacity:1; }

.hero-slide.side-right .hero-text{ right:0; text-align:left; padding-left:5%; transform: translateY(-50%) translateX(14px); }
.hero-slide.side-right.active .hero-text{ transform: translateY(-50%) translateX(0); }
.hero-slide.side-left .hero-text{ left:0; text-align:right; padding-right:5%; transform: translateY(-50%) translateX(-14px); }
.hero-slide.side-left.active .hero-text{ transform: translateY(-50%) translateX(0); }

.hero-dots{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; z-index:20;
}
.hero-dots button{
  width:7px; height:7px; border-radius:50%; background: rgba(255,255,255,.32);
  transition: background .3s, transform .3s;
}
.hero-dots button.active{ background: var(--gold); transform:scale(1.3); }

.hero-scroll-cue{
  position:absolute; bottom:34px; right:clamp(20px,4vw,56px);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color: var(--text-faint);
  writing-mode: vertical-rl;
}

@media (max-width: 820px){
  .hero-slide{ flex-direction:column; justify-content:center; }
  .hero-slide .hero-media{ width:100%; height:66%; margin:0 !important; }
  .hero-slide img{ max-height:60vh; }
  .hero-text{
    position:relative; top:auto; transform:none !important; width:auto;
    padding: 0 30px; margin-top:18px; text-align:center !important;
  }
  .hero-scroll-cue{ display:none; }
}

/* ---------- generic section ---------- */
.section{
  padding: 130px clamp(20px, 6vw, 80px);
}
.section-head{ margin-bottom: 54px; }
.section-head h2, .apropos h2, .services h2{
  font-size: clamp(30px, 4vw, 46px);
  font-weight:300;
}
.section-head h2::after{
  content:''; display:block; width:46px; height:1px; background:var(--gold); margin-top:18px;
}

/* ---------- galerie : category scroller ---------- */
.category-scroller{
  display:flex; gap: 22px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; padding-bottom: 10px;
  -ms-overflow-style:none; scrollbar-width:none;
}
.category-scroller::-webkit-scrollbar{ display:none; }

.category-card{
  position:relative; flex: 0 0 auto;
  width: min(58vw, 340px); height: min(78vw, 460px);
  scroll-snap-align:start;
  overflow:hidden; border-radius:2px;
}
.category-card img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s var(--ease), filter .5s;
  filter: brightness(.82);
}
.category-card:hover img{ transform: scale(1.045); filter:brightness(.68); }
.category-card .cat-overlay{
  position:absolute; left:0; right:0; bottom:0; padding:26px;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent 60%);
}
.category-card h3{ font-size:24px; font-weight:400; }
.category-card span{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; color: var(--text-dim); }

/* ---------- projets grid ---------- */
.projets-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.projet-card{ position:relative; aspect-ratio: 1/1; overflow:hidden; border-radius:2px; }
.projet-card img{ width:100%; height:100%; object-fit:cover; filter:brightness(.8); transition: transform .7s var(--ease), filter .5s; }
.projet-card:hover img{ transform:scale(1.045); filter:brightness(.65); }
.projet-card .cat-overlay{
  position:absolute; left:0; right:0; bottom:0; padding:24px;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent 65%);
}
.projet-card h3{ font-size:22px; }
.projet-card .projet-meta{ font-size:11px; letter-spacing:.1em; color:var(--text-dim); margin-top:4px; }

@media (max-width: 820px){
  .projets-grid{ grid-template-columns: 1fr; }
}

/* ---------- panels (category / projet grid overlay) ---------- */
.panel{
  position:fixed; inset:0; z-index:700; background: var(--bg);
  transform: translateY(100%); transition: transform .55s var(--ease);
  overflow-y:auto; padding: 110px clamp(20px,5vw,70px) 80px;
}
.panel.open{ transform: translateY(0); }
.panel-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom: 40px;
}
.panel-head h3{ font-size: clamp(26px,3.4vw,38px); font-weight:300; }
.panel-subtitle{ color:var(--text-dim); font-size:13px; margin-top:6px; letter-spacing:.03em; }
.btn-back{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 28px;
  border:1px solid var(--line); border-radius:999px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--text-dim); white-space:nowrap;
  transition: border-color .3s, color .3s, background .3s;
}
.btn-back:hover{ border-color: var(--gold); color: var(--gold); background: rgba(201,168,118,.08); }

.square-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.square-grid .sq-item{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.square-grid img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s var(--ease), filter .4s;
  filter: brightness(.92);
}
.square-grid .sq-item:hover img{ transform: scale(1.04); filter:brightness(.75); }
.sq-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 10px 12px 8px;
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color: rgba(243,241,236,.85);
  background: linear-gradient(to top, rgba(0,0,0,.7), transparent 75%);
  opacity:0; transition: opacity .35s var(--ease);
  pointer-events:none;
}
.sq-item:hover .sq-caption{ opacity:1; }

@media (max-width: 700px){
  .square-grid{ grid-template-columns: repeat(3, 1fr); gap:2px; }
}

/* ---------- à propos ---------- */
.apropos{
  display:grid; grid-template-columns: 42% 1fr; gap: 70px;
}
.apropos-photo{ position:sticky; top: calc(var(--nav-h) + 24px); align-self:start; height: calc(100vh - var(--nav-h) - 90px); }
.apropos-photo img{ width:100%; height:100%; object-fit:cover; border-radius:2px; }
.apropos-content h2{ margin-bottom:30px; }
.apropos-text{ font-family: var(--font-title); font-weight:400; font-size: clamp(17px,1.5vw,20px); line-height:1.65; color: rgba(243,241,236,.88); max-width:60ch; }
.bh-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin: 42px 0; }
.bh-grid img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; }
.apropos-materiel{ font-size:13px; color: var(--text-dim); margin-bottom:8px; }
.apropos-materiel .label{ color: var(--gold); letter-spacing:.1em; text-transform:uppercase; font-size:11px; margin-right:10px; }
.apropos-loc{ font-size:13px; color: var(--text-faint); }

@media (max-width: 900px){
  .apropos{ grid-template-columns: 1fr; }
  .apropos-photo{ position:relative; top:auto; height: 62vh; }
}

/* ---------- services ---------- */
.services-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 50px;
}
.service-card{ border-top: 1px solid var(--line); padding-top:26px; }
.service-index{ font-family:var(--font-title); font-size:14px; color: var(--gold); letter-spacing:.1em; }
.service-card h3{ font-size:24px; margin: 14px 0 16px; }
.service-card p{ font-size:14px; color: var(--text-dim); }

@media (max-width: 900px){
  .services-grid{ grid-template-columns:1fr; gap:36px; }
}

/* ---------- vidéo ---------- */
.video{ text-align:center; padding-top:150px; padding-bottom:150px; }
.video h2{ font-size: clamp(28px,3.6vw,42px); font-weight:300; }
.video p{ color: var(--text-dim); margin-top:16px; font-size:14px; letter-spacing:.02em; }
.gold-line{ width:64px; height:1px; background:var(--gold); margin: 34px auto 0; }

/* ---------- contact ---------- */
.contact{ text-align:center; padding-top:150px; padding-bottom:180px; }
.contact h2{ font-size: clamp(28px,3.6vw,42px); font-weight:300; }
.contact p{ color: var(--text-dim); max-width:46ch; margin: 18px auto 34px; font-size:14px; }
.contact-email{
  display:inline-block; font-family: var(--font-title); font-style:italic;
  font-size: clamp(20px,2.4vw,28px); border-bottom:1px solid var(--line); padding-bottom:6px;
  transition: border-color .3s, color .3s;
}
.contact-email:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- footer ---------- */
.site-footer{
  display:flex; justify-content:space-between; padding: 30px clamp(20px,6vw,80px) 40px;
  font-size:11px; letter-spacing:.08em; color: var(--text-faint);
  border-top: 1px solid var(--line);
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:900; background: rgba(3,3,3,.97);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease);
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-frame{ max-width:88vw; max-height:86vh; overflow:hidden; cursor: none; }
.lightbox-frame img{
  max-width:88vw; max-height:86vh; object-fit:contain;
  transition: transform .35s var(--ease);
  transform-origin: center;
}
.lightbox-frame.zoomed img{ transform: scale(1.75); cursor: none; }
.lightbox-close{
  position:absolute; top:26px; right:clamp(20px,4vw,56px);
  z-index:2;
}
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:34px; color: var(--text-dim); padding:10px 16px;
  transition: color .3s;
}
.lightbox-arrow:hover{ color:#fff; }
.lightbox-prev{ left: clamp(6px,2vw,30px); }
.lightbox-next{ right: clamp(6px,2vw,30px); }
.lightbox-caption{
  position:absolute; left:0; right:0; bottom: clamp(16px,3vh,32px);
  text-align:center;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--text-dim);
  pointer-events:none;
}

@media (max-width: 700px){
  .lightbox-arrow{ font-size:26px; }
}