/* =========================================================
   LE PHOTOGRAPHE — Wilfrid Daffond
   Design system : "planche contact"
   - Blanc chaud, encre presque noire, accent braise volcanique
   - Fraunces (display) / Work Sans (texte) / IBM Plex Mono (data)
   - Signature : coins de viseur photo + numérotation "planche contact"
   ========================================================= */

:root{
  --bg:        #FAF9F5;
  --bg-alt:    #F0EDE6;
  --ink:       #17140F;
  --ink-soft:  #6B655A;
  --accent:    #B8390D;
  --accent-soft: #E7C9B8;
  --bordeaux:  #7B2233;
  --line:      #DEDACE;
  --overlay:   rgba(23,20,15,.56);
  --overlay-strong: rgba(15,13,10,.72);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--accent); color:#fff; }

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

.wrap{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0;
  z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  color:#fff;
  mix-blend-mode:normal;
}
.site-header.is-solid{
  background:var(--bg);
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.brand-logo{
  display:block;
  height:30px;
  width:auto;
}
/* En-tête transparent au-dessus du hero (texte blanc) : logo passé en blanc */
.site-header:not(.is-solid) .brand-logo{
  filter:brightness(0) invert(1);
}
.brand-name{
  font-family:var(--font-mono);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bordeaux);
}
.site-header:not(.is-solid) .brand-name{
  text-shadow:0 1px 2px rgba(0,0,0,.75), 0 0 12px rgba(0,0,0,.5);
}
@media (max-width:600px){
  .brand-logo{ height:24px; }
  .brand-name{ font-size:.6rem; letter-spacing:.18em; }
}
.nav{
  display:flex; align-items:center; gap:clamp(14px,3vw,34px);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.nav a{ position:relative; padding-bottom:4px; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-toggle{
  display:none;
  background:none; border:0; color:inherit; cursor:pointer;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}

/* ---------- Hero (viewfinder) ---------- */
.hero{
  position:relative;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  color:#fff;
  background:var(--ink);
}
.hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.86;
  transform:scale(1.06);
  animation:heroSettle 1.6s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes heroSettle{ to{ transform:scale(1); } }
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,13,10,.35) 0%, rgba(15,13,10,.15) 40%, rgba(15,13,10,.82) 100%);
}
.viewfinder{
  position:absolute; inset:clamp(16px,4vw,40px);
  pointer-events:none;
  z-index:2;
}
.vf-corner{
  position:absolute;
  width:26px; height:26px;
  border:1.5px solid rgba(255,255,255,.85);
  opacity:0;
  animation:vfIn .7s ease forwards;
}
.vf-corner.tl{ top:0; left:0; border-right:0; border-bottom:0; animation-delay:.5s; }
.vf-corner.tr{ top:0; right:0; border-left:0; border-bottom:0; animation-delay:.62s; }
.vf-corner.bl{ bottom:0; left:0; border-right:0; border-top:0; animation-delay:.74s; }
.vf-corner.br{ bottom:0; right:0; border-left:0; border-top:0; animation-delay:.86s; }
@keyframes vfIn{ from{ opacity:0; transform:scale(1.4); } to{ opacity:1; transform:scale(1); } }

.hero-meta{
  position:absolute; top:clamp(16px,4vw,40px); right:clamp(16px,4vw,40px);
  z-index:2;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:right;
  color:rgba(255,255,255,.75);
  opacity:0;
  animation:fadeUp .8s ease forwards; animation-delay:1s;
}
.hero-meta span{ display:block; }

.hero-content{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--gutter) clamp(56px,9vw,96px);
}
.hero-title{
  font-family:var(--font-display);
  font-weight:500;
  font-style:italic;
  font-size:clamp(2.2rem, 6vw, 4.4rem);
  line-height:1.06;
  max-width:15ch;
  margin:0 0 20px;
  opacity:0;
  animation:fadeUp .9s ease forwards; animation-delay:.85s;
}
.hero-sub{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.08em;
  max-width:46ch;
  color:rgba(255,255,255,.82);
  opacity:0;
  animation:fadeUp .9s ease forwards; animation-delay:1.05s;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

.scroll-cue{
  position:absolute; left:var(--gutter); bottom:28px; z-index:2;
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
  display:flex; align-items:center; gap:10px;
  opacity:0; animation:fadeUp .9s ease forwards; animation-delay:1.2s;
}
.scroll-cue .bar{ width:1px; height:28px; background:rgba(255,255,255,.5); position:relative; overflow:hidden; }
.scroll-cue .bar::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:#fff; animation:scrollBar 1.8s ease-in-out infinite;
}
@keyframes scrollBar{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---------- Quote strip ---------- */
.quote-strip{
  padding:clamp(72px,12vw,132px) 0;
  border-bottom:1px solid var(--line);
}
.quote-strip .wrap{ max-width:900px; text-align:center; }
.quote-mark{
  font-family:var(--font-display);
  font-size:3rem; color:var(--accent); line-height:1; margin-bottom:8px;
}
.quote-strip blockquote{
  margin:0 0 28px;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.4rem, 3.4vw, 2.1rem);
  line-height:1.4;
  color:var(--ink);
}
.quote-cite{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.quote-cite::before{ content:"— "; }

/* ---------- Section headings ---------- */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding:clamp(56px,8vw,84px) 0 clamp(28px,4vw,40px);
  border-top:1px solid var(--line);
}
.section-head h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  margin:8px 0 0;
}
.section-head .count{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--ink-soft);
  text-align:right;
  white-space:nowrap;
}

/* ---------- Contact sheet (categories grid) ---------- */
.sheet{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:clamp(60px,8vw,100px);
}
.frame{
  position:relative;
  background:var(--ink);
  aspect-ratio:4/5;
  overflow:hidden;
  display:block;
}
.frame-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease;
  filter:saturate(.92);
}
.frame:hover .frame-img{ transform:scale(1.045); filter:saturate(1.05); }
.frame::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,13,10,0) 45%, rgba(15,13,10,.88) 100%);
  z-index:1;
}
.frame-vf{
  position:absolute; inset:14px;
  pointer-events:none; z-index:2;
}
.frame-vf i{
  position:absolute; width:16px; height:16px;
  border:1.2px solid rgba(255,255,255,.9);
  opacity:0; transition:opacity .4s ease, transform .4s ease;
  transform:scale(1.3);
}
.frame-vf i.tl{ top:0; left:0; border-right:0; border-bottom:0; }
.frame-vf i.tr{ top:0; right:0; border-left:0; border-bottom:0; }
.frame-vf i.bl{ bottom:0; left:0; border-right:0; border-top:0; }
.frame-vf i.br{ bottom:0; right:0; border-left:0; border-top:0; }
.frame:hover .frame-vf i{ opacity:1; transform:scale(1); }

.frame-num{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em;
  color:rgba(255,255,255,.75);
}
.frame-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:22px;
  color:#fff;
}
.frame-body h3{
  font-family:var(--font-display);
  font-style:italic; font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  margin:0 0 6px;
}
.frame-body p{
  margin:0 0 14px;
  font-size:.86rem;
  color:rgba(255,255,255,.78);
  max-width:36ch;
}
.frame-cta{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px;
}
.frame-cta .arrow{ display:inline-block; transition:transform .3s ease; }
.frame:hover .frame-cta .arrow{ transform:translateX(5px); }

@media (max-width:760px){
  .sheet{ grid-template-columns:1fr; }
  .frame{ aspect-ratio:4/4.6; }
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Contact / Footer ---------- */
.contact{
  background:var(--ink);
  color:var(--bg);
  padding:clamp(72px,10vw,120px) 0 40px;
}
.contact .wrap{
  display:grid; grid-template-columns:1.3fr 1fr; gap:48px;
}
.contact-lede{
  font-family:var(--font-display);
  font-style:italic; font-weight:500;
  font-size:clamp(1.7rem,4vw,2.6rem);
  line-height:1.25;
  max-width:16ch;
}
.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{
  border-top:1px solid rgba(250,249,245,.16);
  padding:18px 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.contact-list li:last-child{ border-bottom:1px solid rgba(250,249,245,.16); }
.contact-list .label{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(250,249,245,.55);
}
.contact-list a{
  font-family:var(--font-body); font-size:1.05rem;
}
.contact-list a:hover{ color:var(--accent-soft); }

.footer-base{
  margin-top:clamp(56px,8vw,90px);
  padding-top:24px;
  border-top:1px solid rgba(250,249,245,.16);
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(250,249,245,.45);
}

@media (max-width:760px){
  .contact .wrap{ grid-template-columns:1fr; }
  .nav{ display:none; }
  .nav-toggle{ display:inline-block; }
  .nav.is-open{
    display:flex; position:fixed; inset:0; flex-direction:column; justify-content:center; align-items:flex-start;
    gap:28px; padding:0 var(--gutter); background:var(--ink); color:#fff; font-size:1.1rem;
  }
}

/* ---------- Gallery page ---------- */
.gallery-hero{
  padding:clamp(140px,20vw,190px) 0 40px;
  border-bottom:1px solid var(--line);
}
.gallery-hero .eyebrow{ margin-bottom:14px; }
.gallery-hero h1{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(2.2rem,6vw,3.8rem);
  margin:0 0 18px;
  max-width:18ch;
}
.gallery-hero p{
  max-width:60ch;
  color:var(--ink-soft);
  font-size:1.02rem;
}
.gallery-tabs{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  margin-top:32px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}
.gallery-tabs a{
  padding-bottom:5px; border-bottom:1px solid transparent; color:var(--ink-soft);
}
.gallery-tabs a[aria-current="page"], .gallery-tabs a:hover{
  color:var(--ink); border-color:var(--accent);
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2px;
  background:var(--line);
  padding:2px 0 clamp(70px,9vw,110px);
}
.plate{
  position:relative; overflow:hidden; background:var(--ink);
  aspect-ratio:1/1;
  cursor:zoom-in;
}
.plate img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease, filter .6s ease;
  filter:saturate(.94);
}
.plate:hover img{ transform:scale(1.06); filter:saturate(1.08); }
.plate .plate-num{
  position:absolute; top:10px; left:10px; z-index:2;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; color:rgba(255,255,255,.7);
  opacity:0; transition:opacity .3s ease;
}
.plate:hover .plate-num{ opacity:1; }

@media (max-width:900px){
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(15,13,10,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{
  max-width:min(90vw, 1100px); max-height:82vh; object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lightbox-close{
  position:absolute; top:24px; right:clamp(16px,4vw,40px);
  background:none; border:1px solid rgba(255,255,255,.4); color:#fff;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  font-family:var(--font-mono); font-size:.9rem;
}
.lightbox-caption{
  position:absolute; bottom:28px; left:0; right:0; text-align:center;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; color:rgba(255,255,255,.7);
  text-transform:uppercase;
}