/* ============================================================
   style.css — Seb Photographie
   ============================================================ */

:root {
  --bg: #0a0a0a; --surface: #111; --border: #1e1e1e;
  --text: #e8e4de; --muted: #6b6660; --accent: #c8a96e; --white: #f5f2ee;
  --transition: .3s ease; --nav-h: 64px;
}
body.light {
  --bg: #f7f4f0; --surface: #eeebe6; --border: #d8d4ce;
  --text: #1a1816; --muted: #888078; --accent: #9a6e2e; --white: #1a1816;
}

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

body {
  background: var(--bg); color: var(--text);
  font-family: 'Montserrat', sans-serif; font-weight: 300;
  min-height: 100vh; -webkit-tap-highlight-color: transparent;
  transition: background var(--transition), color var(--transition);
}

/* ---- SPA pages ---- */
.page {
  display: none;
  min-height: 100vh;
  animation: fadeIn .35s ease;
}
.page.active { display: block; }

/* Page home utilise flex */
#page-home.active {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
  padding: 0 48px 64px;
  position: relative;
  overflow: hidden;
}

/* Pages work et contact ont du padding-top pour la nav fixe */
#page-work.active  { padding-top: 120px; }
#page-contact.active { padding-top: 120px; }

#page-contact .page-inner { padding: 0 48px; }

@keyframes fadeIn {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ---- Nav — liquid glass 3 colonnes (same as index.php) ---- */
nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; height: 66px; padding: 0 40px;
  background: rgba(15,15,15,.08);
  backdrop-filter: blur(48px) saturate(220%) brightness(1.12);
  -webkit-backdrop-filter: blur(48px) saturate(220%) brightness(1.12);
  transition: background var(--transition);
}
body.light nav {
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(48px) saturate(220%) brightness(1.08);
  -webkit-backdrop-filter: blur(48px) saturate(220%) brightness(1.08);
}
.nav-brand {
  font-family: 'Cormorant Garamond', serif; font-size: 1.38rem;
  font-weight: 300; letter-spacing: .12em; color: #f5f2ee;
  cursor: pointer; background: none; border: none; text-decoration: none;
  justify-self: start; transition: opacity var(--transition);
}
.nav-brand:hover { opacity: .72; }
body.light .nav-brand { color: #1a1816; }
.nav-brand em { font-style: italic; color: var(--accent); }

/* Centre — Work & Contact */
.nav-center { display: flex; gap: 44px; align-items: center; justify-content: center; }
.nav-center a, .nav-center button {
  background: none; border: none; color: rgba(245,242,238,.75);
  font-family: 'Montserrat', sans-serif; font-size: .76rem;
  letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer; padding: 0; text-decoration: none; transition: color .25s;
}
.nav-center a:hover, .nav-center button:hover,
.nav-center a.active, .nav-center button.active { color: #f5f2ee; }
body.light .nav-center a, body.light .nav-center button { color: rgba(26,24,22,.55); }
body.light .nav-center a:hover, body.light .nav-center button:hover { color: #1a1816; }

/* Right — theme + admin */
.nav-right { display: flex; gap: 16px; align-items: center; justify-content: flex-end; }
.btn-theme {
  background: none; border: 1px solid rgba(255,255,255,.2);
  color: rgba(245,242,238,.72); padding: 5px 10px; cursor: pointer;
  font-size: .95rem; line-height: 1; transition: all .25s; border-radius: 6px;
}
.btn-theme:hover { border-color: var(--accent); color: var(--accent); }
body.light .btn-theme { border-color: rgba(26,24,22,.18); color: rgba(26,24,22,.5); }
.btn-admin {
  border: 1px solid rgba(255,255,255,.18) !important; padding: 6px 14px !important;
  font-size: .65rem !important; color: rgba(245,242,238,.62) !important;
  letter-spacing: .15em; text-transform: uppercase; font-family: 'Montserrat', sans-serif;
  text-decoration: none; transition: all .25s; border-radius: 6px; display: inline-block;
}
.btn-admin:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
body.light .btn-admin { border-color: rgba(26,24,22,.18) !important; color: rgba(26,24,22,.45) !important; }

/* Compat — old .nav-links if still used */
.nav-links { display: none; }
.btn-theme {
  background: none; border: 1px solid var(--border); color: var(--muted);
  padding: 6px 10px; cursor: pointer; font-size: .9rem;
  transition: all var(--transition); line-height: 1;
}
.btn-theme:hover { border-color: var(--accent); color: var(--accent); }

/* ---- HOME ---- */
.hero-bg { position: absolute; inset:0; background: linear-gradient(135deg,#0a0a0a,#141414 50%,#0f0f0f); }
body.light .hero-bg { background: linear-gradient(135deg,#f7f4f0,#efecea 50%,#f2efeb); }
.hero-grid {
  position: absolute; inset:0;
  background-image: linear-gradient(rgba(200,169,110,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(200,169,110,.04) 1px,transparent 1px);
  background-size: 60px 60px;
}
.hero-slides { position: absolute; inset:0; z-index:0; overflow:hidden; }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; pointer-events:none; }
.hero-slide.active { opacity:1; }
.hero-slide img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.2) 50%,transparent 100%); }
.hero-text { position:relative; z-index:1; }
.hero-eyebrow { font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.hero-title { font-family:'Cormorant Garamond',serif; font-size:clamp(3.5rem,8vw,7rem); font-weight:300; line-height:.92; color:#f5f2ee; }
.hero-title em { font-style:italic; color:var(--accent); }
.hero-sub { margin-top:24px; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(245,242,238,.55); max-width:360px; line-height:1.8; }
.hero-cta {
  margin-top:40px; display:inline-block;
  background:none; border:none; border-bottom:1px solid var(--accent);
  color:var(--accent); font-family:'Montserrat',sans-serif;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  padding-bottom:6px; cursor:pointer; transition:opacity var(--transition); text-decoration:none;
}
.hero-cta:hover { opacity:.7; }
.hero-count {
  position:absolute; right:48px; bottom:64px;
  font-family:'Cormorant Garamond',serif; font-size:5rem; font-weight:300;
  color:rgba(200,169,110,.08); line-height:1; z-index:1; user-select:none;
}

/* ---- WORK ---- */
.work-header {
  padding: 0 48px 48px;
  display:flex; justify-content:space-between; align-items:flex-end;
  border-bottom:1px solid var(--border); margin-bottom:4px;
}
.work-title { font-family:'Cormorant Garamond',serif; font-size:2.8rem; font-weight:300; color:var(--white); }
.work-count { color:var(--muted); font-size:.72rem; letter-spacing:.15em; }
.projects-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:3px; padding:3px;
}
.project-card { position:relative; overflow:hidden; aspect-ratio:4/3; cursor:pointer; background:var(--surface); text-decoration:none; display:block; }
.project-card.featured { grid-column:span 2; aspect-ratio:16/9; }
.project-thumb { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.25,.46,.45,.94); display:block; }
.project-placeholder { width:100%; height:100%; background:linear-gradient(135deg,#1a1a1a,#222); display:flex; align-items:center; justify-content:center; font-size:2rem; opacity:.15; transition:transform .7s cubic-bezier(.25,.46,.45,.94); }
.project-card:hover .project-overlay { opacity:1; }
.project-card:hover .project-thumb, .project-card:hover .project-placeholder { transform:scale(1.04); }
.project-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0) 50%);
  opacity:0; transition:opacity .4s;
  display:flex; flex-direction:column; justify-content:flex-end; padding:28px;
}
.project-overlay-title { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:300; color:var(--white); line-height:1.2; }
.project-overlay-year { font-size:.65rem; letter-spacing:.2em; color:var(--accent); text-transform:uppercase; margin-top:6px; }

/* ---- PROJECT DETAIL (project.php) ---- */
#page-project { padding-top:90px; min-height:100vh; }
.project-detail-header { padding:40px 48px 32px; border-bottom:1px solid var(--border); }
.back-btn {
  background:none; border:none; color:var(--muted); font-family:'Montserrat',sans-serif;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer; margin-bottom:24px; display:inline-flex; align-items:center; gap:8px;
  transition:color var(--transition); text-decoration:none;
}
.back-btn:hover { color:var(--accent); }
.project-detail-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4vw,3.5rem); font-weight:300; color:var(--white); line-height:1.1; }
.project-detail-meta { margin-top:12px; display:flex; gap:32px; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.project-detail-desc { margin-top:16px; max-width:600px; font-size:.82rem; line-height:1.9; color:var(--muted); }
.project-images { padding:2px; columns:3 200px; column-gap:3px; }
.project-images .photo-item { break-inside:avoid; display:block; margin-bottom:2px; cursor:pointer; overflow:hidden; position:relative; }
.project-images .photo-item img { width:100%; height:auto; display:block; transition:opacity .3s, transform .5s cubic-bezier(.25,.46,.45,.94), filter .3s; }
.project-images .photo-item:hover img { opacity:1; transform:scale(1.04); filter:brightness(1.12) contrast(1.04); }
.no-photos { padding:80px; text-align:center; color:var(--muted); font-size:.82rem; line-height:2; }

/* ---- LIGHTBOX — fills screen height on PC ---- */
#lightbox {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.97); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; flex-direction:column;
}
#lightbox.open { display:flex; animation:lbIn .2s ease; }
@keyframes lbIn{from{opacity:0;}to{opacity:1;}}
/* Full viewport height: image fills the height */
.lb-img-wrap {
  flex:1; display:flex; align-items:center; justify-content:center;
  width:100%; padding:56px 88px 0;
  height:calc(100vh - 56px);
}
#lb-img {
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain; display:block;
  /* On PC: let the image fill to screen height */
  max-height:calc(100vh - 100px);
}
.lb-close { position:absolute; top:18px; right:24px; background:none; border:none; color:rgba(255,255,255,.45); font-size:1.4rem; cursor:pointer; transition:color var(--transition); line-height:1; padding:6px; }
.lb-close:hover { color:#fff; }
.lb-prev, .lb-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.65); font-size:1.2rem; padding:14px 18px; cursor:pointer; transition:all var(--transition); border-radius:4px; }
.lb-prev { left:16px; }
.lb-next { right:16px; }
.lb-prev:hover, .lb-next:hover { border-color:var(--accent); color:var(--accent); background:rgba(0,0,0,.5); }
.lb-counter { font-size:.62rem; letter-spacing:.22em; color:rgba(255,255,255,.35); text-transform:uppercase; padding:14px 0 18px; }

/* ---- BACK TO TOP (project detail) ---- */
.back-to-top-wrap { display:flex; justify-content:center; padding:48px 0 24px; }
.btn-top {
  background:none; border:1px solid var(--border); color:var(--muted);
  font-family:'Montserrat',sans-serif; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; padding:10px 24px; cursor:pointer;
  transition:all var(--transition);
}
.btn-top:hover { border-color:var(--accent); color:var(--accent); }

/* ---- CONTACT ---- */
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding-top:40px; padding-bottom:40px; }
.contact-title { font-family:'Cormorant Garamond',serif; font-size:3rem; font-weight:300; color:var(--white); margin-bottom:8px; }
.contact-sub { color:var(--muted); font-size:.78rem; line-height:1.9; }
.contact-links { margin-top:40px; display:flex; flex-direction:column; gap:16px; }
.contact-link { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color var(--transition); display:flex; align-items:center; gap:12px; }
.contact-link:hover { color:var(--accent); }
.contact-link::before { content:'—'; color:var(--border); }
.contact-form { display:flex; flex-direction:column; gap:20px; }
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field label { font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.form-field input, .form-field textarea {
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  font-family:'Montserrat',sans-serif; font-size:.82rem; padding:12px 16px;
  outline:none; transition:border-color var(--transition); resize:none;
}
.form-field input:focus, .form-field textarea:focus { border-color:var(--accent); }
.form-submit {
  background:var(--accent); border:none; color:#0a0a0a; font-family:'Montserrat',sans-serif;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  padding:14px 32px; cursor:pointer; align-self:flex-start; font-weight:500; transition:opacity var(--transition);
}
.form-submit:hover { opacity:.85; }

/* ---- FOOTER ---- */
footer { padding:32px 48px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; margin-top:80px; }
.footer-brand { font-family:'Cormorant Garamond',serif; font-size:1rem; color:var(--muted); }
.footer-copy { font-size:.62rem; letter-spacing:.15em; color:var(--border); }

/* ---- RESPONSIVE — tablette (768px) ---- */
@media (max-width: 768px) {
  :root { --nav-h: 56px; }
  nav { padding: 0 20px; height: 56px; }
  .nav-links { display: none; }

  /* project detail */
  #page-project { padding-top: 56px; }
  .project-detail-header { padding: 24px 20px 20px; }
  .project-detail-title { font-size: clamp(1.6rem, 5vw, 2.4rem); }
  .project-detail-meta { flex-wrap: wrap; gap: 12px; font-size: .6rem; }

  /* photo grid — 2 cols */
  .project-images { columns: 2 140px; column-gap: 3px; padding: 0; }
  .project-images .photo-item { margin-bottom: 3px; }

  /* lightbox */
  .lb-img-wrap { padding: 60px 12px 12px; }
  .lb-prev { left: 4px; padding: 10px 12px; }
  .lb-next { right: 4px; padding: 10px 12px; }
  .lb-close { top: 14px; right: 16px; font-size: 1.2rem; }

  footer { padding: 24px 20px; flex-direction: column; gap: 8px; text-align: center; margin-top: 48px; }
}

/* ---- RESPONSIVE — mobile (420px) ---- */
@media (max-width: 420px) {
  nav { padding: 0 16px; }

  /* project detail */
  .project-detail-header { padding: 20px 16px 16px; }
  .back-btn { font-size: .6rem; }

  /* photo grid — 1 col on very small */
  .project-images { columns: 1; }

  footer { padding: 20px 16px; }
}

/* Touch: show nav links on tap-capable large screens */
@media (hover: none) and (min-width: 769px) {
  .nav-links { display: flex; }
}