/* ============================================================
   MOSAK PHOTOGRAPHIE — refonte 2026
   Palette monochrome : les photos apportent la couleur.
   Typo : Jost (héritage Century Gothic du site d'origine),
   Cormorant Garamond pour les titres, Plex Mono pour les numéros.
   ============================================================ */

:root{
  --ink:      #0c0c0c;
  --panel:    #141414;
  --line:     #262626;
  --paper:    #f1ede6;
  --grey:     #9a948a;
  --dim:      #5c574f;
  --maxw:     1180px;
  --f-body:   "Jost", "Century Gothic", sans-serif;
  --f-display:"Cormorant Garamond", Georgia, serif;
  --f-mono:   "IBM Plex Mono", monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:var(--paper); text-decoration:none; }

/* ---------- Header / navigation ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(12,12,12,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
}
.brand{ display:flex; flex-direction:column; line-height:1.1; }
.brand .b1{
  font-family:var(--f-body); font-weight:500;
  letter-spacing:.42em; font-size:1.05rem; text-transform:uppercase;
}
.brand .b2{
  font-family:var(--f-mono); font-size:.6rem; color:var(--grey);
  letter-spacing:.28em; text-transform:uppercase; margin-top:3px;
}

nav ul{ list-style:none; display:flex; gap:34px; }
nav li{ position:relative; }
nav a{
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--grey); transition:color .25s;
  padding:10px 0; display:inline-block;
}
nav a:hover, nav li.open > a, nav a.current{ color:var(--paper); }

nav .sub{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:var(--panel); border:1px solid var(--line);
  min-width:170px; padding:8px 0;
  display:none; flex-direction:column; gap:0;
}
nav li:hover .sub, nav li.open .sub{ display:flex; }
nav .sub a{
  padding:8px 18px; font-size:.72rem; letter-spacing:.18em;
  white-space:nowrap;
}
nav .sub a:hover{ background:#1c1c1c; color:var(--paper); }

.burger{
  display:none; background:none; border:1px solid var(--line);
  color:var(--paper); font-family:var(--f-mono); font-size:.7rem;
  letter-spacing:.2em; padding:8px 14px; cursor:pointer;
}

/* ---------- Page shell ---------- */
main{ max-width:var(--maxw); margin:0 auto; padding:0 24px 80px; }

.page-head{
  padding:64px 0 40px;
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  border-bottom:1px solid var(--line);
  margin-bottom:44px;
}
.page-head h1{
  font-family:var(--f-display); font-weight:300; font-style:italic;
  font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:.01em;
}
.page-head .count{
  font-family:var(--f-mono); font-size:.72rem; color:var(--dim);
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
}

/* ---------- Accueil : diaporama ---------- */
.hero{
  position:relative; max-width:var(--maxw); margin:48px auto 0;
  padding:0 24px;
}
.slideshow{
  position:relative; aspect-ratio:7/5; max-height:72vh;
  overflow:hidden; background:var(--panel);
}
.slideshow img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; opacity:0; transition:opacity 1.6s ease;
}
.slideshow img.on{ opacity:1; }
.hero-caption{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 4px 0;
  font-family:var(--f-mono); font-size:.68rem; color:var(--dim);
  letter-spacing:.22em; text-transform:uppercase;
}
.hero-title{
  text-align:center; padding:70px 24px 10px;
}
.hero-title h1{
  font-family:var(--f-display); font-style:italic; font-weight:300;
  font-size:clamp(2.4rem,6vw,4rem);
}
.hero-title p{
  margin-top:10px; color:var(--grey);
  font-size:.8rem; letter-spacing:.34em; text-transform:uppercase;
}

/* ---------- Galeries : planche contact ---------- */
.grid{
  display:grid; gap:26px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.frame{ cursor:pointer; }
.frame .ph{
  overflow:hidden; background:var(--panel); aspect-ratio:7/5;
}
.frame img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(12%) brightness(.96);
  transition:filter .4s ease, transform .6s ease;
}
.frame:hover img{ filter:none; transform:scale(1.025); }
.frame .num{
  font-family:var(--f-mono); font-size:.64rem; color:var(--dim);
  letter-spacing:.24em; padding-top:9px;
}

/* ---------- Lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:100;
  background:rgba(8,8,8,.96);
  display:none; align-items:center; justify-content:center;
}
.lb.on{ display:flex; }
.lb img{
  max-width:min(92vw,1000px); max-height:82vh; object-fit:contain;
}
.lb button{
  position:absolute; background:none; border:none; color:var(--grey);
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.2em;
  cursor:pointer; padding:18px; transition:color .2s;
}
.lb button:hover{ color:var(--paper); }
.lb .close{ top:18px; right:18px; }
.lb .prev{ left:6px; top:50%; transform:translateY(-50%); }
.lb .next{ right:6px; top:50%; transform:translateY(-50%); }
.lb .counter{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:.68rem; color:var(--dim);
  letter-spacing:.26em;
}

/* ---------- Bio ---------- */
.bio-layout{
  display:grid; grid-template-columns:1fr 1.4fr; gap:60px;
  align-items:start; padding-top:10px;
}
.bio-layout .portrait img{ width:100%; filter:grayscale(20%); }
.bio-text p{ margin-bottom:1.3em; color:#d8d3ca; font-size:1.02rem; }
.bio-text .sig{
  font-family:var(--f-display); font-style:italic; font-size:1.3rem;
  color:var(--grey); margin-top:2em;
}
.lang-switch{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em;
  color:var(--dim); text-transform:uppercase;
}
.lang-switch a{ color:var(--grey); border-bottom:1px solid var(--line); }
.lang-switch a:hover{ color:var(--paper); }

/* ---------- Contact ---------- */
.contact-layout{
  display:grid; grid-template-columns:1fr 1.3fr; gap:60px; padding-top:10px;
}
.contact-info p{ color:#d8d3ca; margin-bottom:1.2em; }
.contact-info .tel{
  font-family:var(--f-mono); font-size:1.05rem; letter-spacing:.12em;
  color:var(--paper); display:inline-block; margin-top:6px;
  border-bottom:1px solid var(--line); padding-bottom:2px;
}
form .field{ margin-bottom:22px; }
form label{
  display:block; font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
  margin-bottom:8px;
}
form input, form textarea{
  width:100%; background:var(--panel); border:1px solid var(--line);
  color:var(--paper); font-family:var(--f-body); font-size:.95rem;
  padding:12px 14px; transition:border-color .25s;
}
form input:focus, form textarea:focus{
  outline:none; border-color:var(--grey);
}
form textarea{ min-height:150px; resize:vertical; }
form button{
  background:var(--paper); color:var(--ink); border:none;
  font-family:var(--f-body); font-weight:500; font-size:.78rem;
  letter-spacing:.26em; text-transform:uppercase;
  padding:14px 34px; cursor:pointer; transition:opacity .25s;
}
form button:hover{ opacity:.85; }

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  margin-top:40px;
}
.foot-wrap{
  max-width:var(--maxw); margin:0 auto; padding:26px 24px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.64rem; color:var(--dim);
  letter-spacing:.18em; text-transform:uppercase;
}
.foot-wrap a{ color:var(--grey); }
.foot-wrap a:hover{ color:var(--paper); }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .burger{ display:block; }
  nav{ 
    position:absolute; top:100%; left:0; right:0;
    background:var(--ink); border-bottom:1px solid var(--line);
    display:none;
  }
  nav.open{ display:block; }
  nav ul{ flex-direction:column; gap:0; padding:10px 24px 20px; }
  nav a{ padding:12px 0; font-size:.82rem; }
  nav .sub{
    position:static; transform:none; display:flex; border:none;
    background:none; padding:0 0 6px 18px;
  }
  .bio-layout, .contact-layout{ grid-template-columns:1fr; gap:36px; }
  .page-head{ padding:40px 0 26px; flex-direction:column; gap:8px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none!important; animation:none!important; }
  .slideshow img{ transition:none; }
}