/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#14181C;
  --ink-soft:#3A3F45;
  --paper:#EDE8DE;
  --paper-soft:#F6F3EC;
  --ochre:#B5652D;
  --teal:#3C6E71;
  --grey:#8C8577;
  --line:rgba(20,24,28,.14);
  --line-soft:rgba(20,24,28,.08);

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand: "Caveat", cursive;

  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

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

/* ============================================================
   NAV
   ============================================================ */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(237,232,222,.86);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-soft);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; padding-bottom:18px;
}
.site-nav .logo{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:.01em;
  text-decoration:none;
  color:var(--ink);
}
.site-nav .logo span{color:var(--ochre);}
.site-nav ul{
  list-style:none; display:flex; gap:28px; margin:0; padding:0;
}
.site-nav a{
  text-decoration:none;
  font-size:.95rem;
  color:var(--ink-soft);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .15s ease, color .15s ease;
}
.site-nav a:hover, .site-nav a.active{
  color:var(--ink);
  border-color:var(--ochre);
}
.nav-toggle{display:none;}

/* ============================================================
   HERO (accueil)
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  padding:96px 0 70px;
  border-bottom:1px solid var(--line-soft);
}
.hero .wrap{position:relative; z-index:2;}
.hero-map{
  position:absolute; inset:0; z-index:1;
  opacity:.55;
}
.hero-eyebrow{
  font-family:var(--hand);
  font-size:1.4rem;
  color:var(--ochre);
  display:block;
  margin-bottom:6px;
  transform:rotate(-1.5deg);
}
.hero h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.4rem, 6vw, 4.2rem);
  line-height:1.04;
  margin:0 0 22px;
  max-width:14ch;
}
.hero p{
  max-width:46ch;
  font-size:1.08rem;
  color:var(--ink-soft);
  margin:0 0 34px;
}
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:.95rem;
  text-decoration:none;
  color:var(--paper-soft);
  background:var(--ink);
  padding:13px 26px;
  border-radius:2px;
  transition:background .15s ease;
}
.btn:hover{background:var(--ochre);}
.btn-outline{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
  padding:12px 25px;
}
.btn-outline:hover{border-color:var(--ochre); color:var(--ochre); background:transparent;}

/* ============================================================
   CARNETS — bande de cartes façon cartes postales
   ============================================================ */
.section{padding:80px 0;}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:38px; gap:20px; flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:2rem;
  margin:0;
}
.section-head .see-all{
  font-size:.9rem;
  text-decoration:none;
  color:var(--teal);
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
}

.postcards{
  display:flex;
  gap:34px;
  overflow-x:auto;
  padding:14px 4px 26px;
  scrollbar-width:thin;
}
.postcard{
  flex:0 0 300px;
  text-decoration:none;
  color:var(--ink);
  background:var(--paper-soft);
  border:1px solid var(--line);
  padding:14px 14px 20px;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 1px 0 var(--line);
}
.postcard:nth-child(odd){transform:rotate(-1.1deg);}
.postcard:nth-child(even){transform:rotate(1.1deg);}
.postcard:hover{transform:rotate(0deg) translateY(-4px);}
.postcard .thumb{
  width:100%; height:190px; object-fit:cover;
  background:linear-gradient(135deg,var(--teal),var(--ink));
  margin-bottom:14px;
}
.postcard .stamp{
  font-family:var(--hand);
  font-size:1.1rem;
  color:var(--ochre);
}
.postcard h3{
  font-family:var(--serif);
  font-size:1.35rem;
  margin:2px 0 6px;
}
.postcard p{
  font-size:.92rem;
  color:var(--ink-soft);
  margin:0;
}

/* ============================================================
   GALERIE — grille
   ============================================================ */
.filters{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px;
}
.filters button{
  font-family:var(--sans);
  font-size:.85rem;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-soft);
  padding:8px 16px;
  border-radius:20px;
  cursor:pointer;
  transition:all .15s ease;
}
.filters button:hover{border-color:var(--ochre); color:var(--ink);}
.filters button.active{
  background:var(--ink); color:var(--paper-soft); border-color:var(--ink);
}

.grid-gallery{
  columns:3 260px;
  column-gap:18px;
}
.grid-gallery figure{
  margin:0 0 18px;
  break-inside:avoid;
  position:relative;
  overflow:hidden;
}
.grid-gallery img{
  width:100%;
  display:block;
  background:linear-gradient(160deg,var(--teal),var(--ink));
  transition:transform .3s ease;
}
.grid-gallery a:hover img{transform:scale(1.03);}
.grid-gallery figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px;
  font-size:.8rem;
  color:#fff;
  background:linear-gradient(to top, rgba(20,24,28,.75), rgba(20,24,28,0));
  opacity:0;
  transition:opacity .2s ease;
}
.grid-gallery figure:hover figcaption{opacity:1;}

/* ============================================================
   PAGE CARNET
   ============================================================ */
.carnet-hero{
  padding:70px 0 50px;
  border-bottom:1px solid var(--line-soft);
}
.carnet-hero .lieu{
  font-family:var(--hand);
  color:var(--ochre);
  font-size:1.3rem;
}
.carnet-hero h1{
  font-family:var(--serif);
  font-size:clamp(2.1rem, 5vw, 3.4rem);
  margin:6px 0 10px;
}
.carnet-hero .meta{
  color:var(--grey);
  font-size:.95rem;
}
.carnet-cover{
  width:100%; height:46vh; min-height:280px; object-fit:cover;
  background:linear-gradient(135deg,var(--teal),var(--ink));
}

.carnet-body{padding:60px 0;}
.carnet-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  margin-bottom:70px;
}
.carnet-block:nth-child(even) .carnet-block-text{order:2;}
.carnet-block h3{
  font-family:var(--serif);
  font-size:1.6rem;
  margin:0 0 14px;
}
.carnet-block p{
  color:var(--ink-soft);
  max-width:52ch;
}
.carnet-block img{
  width:100%; height:340px; object-fit:cover;
  background:linear-gradient(135deg,var(--teal),var(--ink));
}

.carnet-gallery{padding-bottom:80px;}
.carnet-gallery h2{
  font-family:var(--serif);
  font-size:1.6rem;
  margin-bottom:26px;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  border-top:1px solid var(--line-soft);
  padding:50px 0;
  margin-top:40px;
}
footer .wrap{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
}
footer p{margin:0; font-size:.88rem; color:var(--grey);}
footer a{text-decoration:none; color:var(--ink-soft); font-size:.88rem;}
footer a:hover{color:var(--ochre);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:760px){
  .site-nav ul{gap:16px;}
  .site-nav a{font-size:.85rem;}
  .carnet-block, .carnet-block:nth-child(even) .carnet-block-text{
    grid-template-columns:1fr; order:0;
  }
  .carnet-block{grid-template-columns:1fr;}
  .grid-gallery{columns:2 160px;}
  .section{padding:56px 0;}
}
@media (max-width:520px){
  .grid-gallery{columns:1;}
  .site-nav .wrap{flex-direction:column; align-items:flex-start; gap:10px;}
}