:root{--bg:#fbfaf8;--paper:#ffffff;--ink:#111113;--muted:#6f6f73;--rule:#e8e5e0;--gold:#b9a069;--radius:18px;--shadow:0 14px 38px rgba(17,17,23,.06);--max:1200px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.7 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.section{padding:84px 0}


header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:var(--ink)}
.brand strong{font:600 22px 'Playfair Display', Georgia, serif;letter-spacing:.2px}
.brand small{color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.nav-links{display:flex;gap:8px;align-items:center}
.nav-links a{text-transform:uppercase;letter-spacing:.09em;font-size:12px;color:var(--muted);text-decoration:none;padding:12px 14px;border-radius:10px;transition:transform .2s ease, background .2s ease,color .2s ease}
.nav-links a:hover{color:var(--ink);background:rgba(0,0,0,.04);transform:translateY(-1px)}
.burger{display:none;border:none;background:transparent;color:var(--ink);font-size:22px}
@media (max-width: 900px){.nav-links{display:none}.burger{display:inline-flex}}


.mobile-panel{position:fixed;inset:0 0 0 auto;width:min(84vw,420px);background:#fff;box-shadow:var(--shadow);transform:translateX(100%);transition:transform .28s ease-in-out;z-index:50;display:flex;flex-direction:column;border-left:1px solid var(--rule)}
.mobile-panel.open{transform:translateX(0)}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--rule)}
.panel-links{display:flex;flex-direction:column;padding:18px}
.panel-links a{padding:14px;border-radius:12px;color:var(--ink);text-decoration:none;background:rgba(0,0,0,.03);margin-bottom:10px}
.close{border:none;background:transparent;color:var(--ink);font-size:22px}


.hero{padding:96px 0 56px}
.hero-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:999px;padding:8px 14px;color:var(--muted);margin-bottom:18px;background:#fff;text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.hero h1{font-family:'Playfair Display', Georgia, serif;font-weight:600;font-size:clamp(46px,6.5vw,78px);line-height:1.02;margin:0 0 14px}
.hero p{color:#3f3f45;margin:0 0 24px;max-width:60ch}
.cta{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid var(--rule);background:#fff;color:var(--ink);text-decoration:none}
.cta:focus-visible{outline:2px solid var(--gold)}
.hero-visual{position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;min-height:360px;border:1px solid var(--rule);box-shadow:var(--shadow)}
.hero-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}


.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow)}


.about{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.about .blurb{padding:28px}
.about .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:28px;border-top:1px solid var(--rule)}
.fact{padding:14px;border-radius:14px;background:#faf9f7;text-align:center}
.fact b{display:block;font-size:22px}
.about-figure{margin:0}
.about-figure img{border-radius:var(--radius)}
@media (max-width: 900px){.about{grid-template-columns:1fr}}


/* Projets — Grille standard (cartes régulières) */
.projects-head h2{font:600 36px 'Playfair Display', Georgia, serif;margin:0}
.projects-head .lead{color:var(--muted);margin-top:6px}
.projects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:18px}
.project-card{background:var(--paper);border:1px solid var(--rule);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.project-card img{width:100%;height:240px;object-fit:cover}
.project-body{padding:16px 16px 12px}
.project-title{margin:0;font:600 18px 'Playfair Display', Georgia, serif}
.project-meta{color:var(--muted);font-size:13px;margin-top:4px}
.project-link{margin-top:auto;color:var(--ink);text-decoration:none;border-top:1px solid var(--rule);padding:12px 16px}
.project-link:hover{text-decoration:underline}
@media(max-width:1000px){.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.projects-grid{grid-template-columns:1fr}}


footer{padding:28px 0;color:var(--muted);border-top:1px solid var(--rule)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px}

/* Lightbox (fond + image centrée) */
.lightbox-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.lightbox-overlay .close,
.lightbox-overlay .prev,
.lightbox-overlay .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.lightbox-overlay .close {
  top: 20px;
  right: 30px;
  transform: none;
}
.lightbox-overlay .prev { left: 30px; }
.lightbox-overlay .next { right: 30px; }

.hero-visual {
  width: 400px;   /* largeur du bloc */
  height: 280px;  /* hauteur du bloc */
  border-radius: 12px; /* option : angles arrondis */
}

@media (max-width: 900px){
  .hero-wrap{
    grid-template-columns: 1fr;      /* empile le texte et la photo */
    gap: 22px;
  }
  .hero-visual{
    order: -1;                       /* (option) affiche la photo au-dessus du texte */
    margin: 0 auto;
    max-width: 520px;                /* évite une image trop large */
    width: 100%;
  }
}

@media (max-width: 600px){
  .hero-visual{
    aspect-ratio: 1 / 1;   /* carré sur mobile = joli pour un portrait */
  }
}