/* Velvet, Atelier de Tapisserie
   Palette : uniquement blanc + la couleur du logo (encre). Pas d'autre teinte. */

:root{
  --ink:#1c1c15;             /* couleur du logo */
  --ink-60: rgba(28,28,21,.6);
  --ink-35: rgba(28,28,21,.35);
  --ink-12: rgba(28,28,21,.12);
  --white:#ffffff;

  --max: 900px;
  --gap: 1.75rem;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,.lede{ font-family:'Fraunces', Georgia, serif; font-weight:500; margin:0; }

a{ color:inherit; }
img{ max-width:100%; display:block; }
address{ font-style:normal; }

.container{ max-width:var(--max); margin:0 auto; padding:0 1.5rem; }

.eyebrow{
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-60); margin:0 0 1rem;
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--ink-12);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1.1rem; padding-bottom:1.1rem; }
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand-logo{ height:38px; width:auto; aspect-ratio:215.875 / 73.195; display:block; }
.nav{ display:flex; gap:2rem; }
.nav a{ text-decoration:none; font-size:.9rem; color:var(--ink); }
.nav a:hover{ text-decoration:underline; text-underline-offset:4px; }
.nav-phone{ display:none; }
.header-actions{ display:flex; align-items:center; gap:.9rem; }

.header-phone{
  font-size:.85rem; text-decoration:none; color:var(--ink);
  border:1px solid var(--ink); padding:.5em 1em;
}
.header-phone:hover{ background:var(--ink); color:var(--white); }

.header-instagram{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex:none;
  opacity:.85; transition:opacity .25s ease;
}
.header-instagram:hover{ opacity:1; }
.header-instagram img{ width:20px; height:20px; display:block; }

.nav-toggle{ display:none; }

/* ---------- hero (image centrée, pas plein écran) ---------- */
.hero{ padding:4.5rem 0 4rem; text-align:center; }
.hero h1{ font-size:clamp(2.4rem,6vw,3.4rem); margin-bottom:.6rem; }
.hero-sub{
  max-width:44ch; margin:0 auto 2.75rem; color:var(--ink-60); font-size:1.05rem;
}
.hero-figure{ margin:0; max-width:640px; margin-inline:auto; }
.hero-figure img{ width:100%; height:auto; }
.hero-figure figcaption{
  margin-top:.85rem; font-size:.8rem; color:var(--ink-35);
}

/* ---------- about ---------- */
.about{ padding:4rem 0; border-top:1px solid var(--ink-12); }
.about-inner{ max-width:640px; }
.about .lede{ font-size:1.35rem; line-height:1.4; margin-bottom:1.25rem; }
.about p{ margin:0 0 1.15rem; color:var(--ink-60); }
.about p:last-child{ margin-bottom:0; }

/* ---------- gallery ---------- */
.gallery{ padding:4rem 0; border-top:1px solid var(--ink-12); }
.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
}
.gallery-grid figure{ margin:0; }
.gallery-grid img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
}

/* ---------- contact ---------- */
.contact{ padding:4rem 0; border-top:1px solid var(--ink-12); }
.contact-inner{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.contact-info address{ margin-bottom:1.25rem; }
.contact-info address span{ display:block; }
.contact-info p{ margin:0 0 .5rem; }
.contact-info a[href^="tel"],
.contact-info a[href^="mailto"]{ text-decoration:underline; text-underline-offset:3px; color:var(--ink); }
.contact-links{ display:flex; gap:1.5rem; margin-top:1.5rem; }
.contact-links a{ text-decoration:underline; text-underline-offset:3px; font-size:.9rem; }

.contact-map{ position:relative; border:1px solid var(--ink-12); }
.contact-map iframe{
  width:100%; height:320px; border:0; display:block;
}
.contact-map-link{
  position:absolute; inset:0;
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--ink-12); padding:3rem 0; text-align:center;
}
.footer-logo{ width:230px; height:auto; aspect-ratio:215.875 / 73.195; margin:0 auto 1rem; display:block; }
.site-footer p{ margin:0; font-size:.78rem; color:var(--ink-35); }
.footer-badge{ max-width:80px; margin:1.75rem auto 0; }

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

/* ---------- responsive ---------- */
@media (max-width:760px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); height:100vh;
    background:var(--white); flex-direction:column; justify-content:center; gap:1.75rem; padding:2rem;
    transform:translateX(100%); transition:transform .35s ease;
    border-left:1px solid var(--ink-12);
  }
  .nav.open{ transform:translateX(0); }
  .nav a{ font-size:1.05rem; }
  .nav-phone{
    display:inline-block; margin-top:.5rem; padding-top:1.5rem;
    border-top:1px solid var(--ink-12); color:var(--ink-60);
  }
  .header-phone{ display:none; }
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px; width:30px; height:24px;
    background:none; border:0; cursor:pointer; padding:0; z-index:101;
  }
  .nav-toggle span{ height:1.5px; width:100%; background:var(--ink); }

  .contact-inner{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:480px){
  .gallery-grid{ grid-template-columns:1fr 1fr; gap:1rem; }
}