body{
  background:var(--night);
  line-height:1.55;
  overflow-x:hidden;
}
/* HERO — même ambiance que les autres pages */
.hero{
  min-height:78vh;
  display:grid;
  place-items:end center;
  position:relative;
  background:
    linear-gradient(180deg,rgba(3,13,19,.14),rgba(3,13,19,.40) 50%,#071722 100%),
    url("../mervent-soiree.png") center/cover no-repeat;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 75%,rgba(231,139,50,.18),transparent 36%);
}
.hero-box{
  width:min(920px,92%);
  text-align:center;
  position:relative;
  z-index:2;
  padding:70px 20px 72px;
  text-shadow:0 4px 22px #000;
}
.hero h1{
  font:800 clamp(3rem,8vw,6.2rem)/.94 Georgia,serif;
  margin:.18em 0;
}
.hero p{
  max-width:800px;
  margin:16px auto 24px;
  color:var(--cream);
  font-size:clamp(1.08rem,2.4vw,1.35rem);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--fire);
  color:#21150a;
  border:none;
  padding:14px 21px;
  box-shadow:0 9px 28px #0002;
  transition:.2s transform,.2s box-shadow;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 11px 34px #0004}
/* INTRO */
.intro{padding:58px 0 42px;text-align:center}
.title{
  margin:0 0 15px;
}
.lead{
  max-width:830px;
  font-size:1.12rem;
}
.story-note{
  max-width:900px;
  margin:30px auto 0;
  padding:22px 24px;
  border-radius:20px;
  background:linear-gradient(145deg,#123341,#0b202a);
  border:1px solid #ffffff18;
  color:#dce6e7;
}
.story-note strong{color:var(--gold)}

/* NAVIGATION ANNÉES */
.year-nav{
  width:min(1060px,92%);
  margin:0 auto 34px;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.year-nav a{
  text-decoration:none;
  padding:8px 12px;
  border-radius:999px;
  background:#102d3a;
  border:1px solid #ffffff18;
  color:#dce6e7;
  font-weight:800;
  transition:.2s;
}
.year-nav a:hover{background:#173d4c;color:var(--gold)}

/* CHAPITRES */
.timeline{padding:0 0 70px}
.chapter{
  width:min(1080px,92%);
  margin:0 auto 54px;
  scroll-margin-top:18px;
}
.year{
  color:var(--gold);
  font:800 clamp(2rem,5vw,3.1rem)/1 Georgia,serif;
  margin:0 0 13px;
}
.chapter-card{
  background:linear-gradient(145deg,#123341,#0b202a);
  border:1px solid #ffffff18;
  border-radius:24px;
  padding:clamp(18px,3vw,28px);
  box-shadow:0 18px 48px #0002;
}
.copy{
  max-width:880px;
  margin-bottom:22px;
}
.copy h2{
  margin:0 0 10px;
  color:var(--cream);
  font:700 clamp(1.55rem,4vw,2.35rem) Georgia,serif;
}
.copy p{
  margin:0;
  color:#dbe5e5;
  font-size:1.06rem;
  line-height:1.7;
}
.memory-line{
  margin-top:14px;
  color:var(--gold);
  font-weight:800;
}

/* GALERIE */
.gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.gallery.one{grid-template-columns:1fr}
.gallery.three{grid-template-columns:repeat(3,minmax(0,1fr))}
figure{
  margin:0;
  min-width:0;
  background:#091b24;
  border:1px solid #ffffff16;
  border-radius:18px;
  overflow:hidden;
}
figure button{
  all:unset;
  display:block;
  width:100%;
  cursor:zoom-in;
}
figure img{
  display:block;
  width:100%;
  height:285px;
  object-fit:cover;
  transition:.25s transform,.25s filter;
}
figure button:hover img{transform:scale(1.025);filter:brightness(1.05)}
figcaption{
  padding:11px 13px 13px;
  color:#cbd7d9;
  font-size:.92rem;
}

/* FIN DE L'HISTOIRE */
.final-story{
  background:var(--paper);
  color:var(--ink);
  padding:70px 0;
}
.final-card{
  max-width:900px;
  margin:auto;
  background:#fff8e9;
  border-radius:26px;
  padding:clamp(28px,5vw,52px);
  box-shadow:0 20px 55px #0003;
  text-align:center;
}
.final-card .years{
  color:#70421f;
  font-weight:900;
  letter-spacing:.1em;
}
.final-card h2{
  color:#70421f;
  font:800 clamp(2.1rem,5vw,3.8rem)/1.05 Georgia,serif;
  margin:12px 0 20px;
}
.final-card p{
  max-width:760px;
  margin:0 auto 16px;
  font-size:1.12rem;
  line-height:1.75;
}
.final-card .next{
  margin-top:26px;
  padding-top:22px;
  border-top:1px dashed #cbb48e;
  font-weight:900;
  font-size:1.18rem;
  color:#70421f;
}

/* LIGHTBOX */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:24px;
  background:rgba(0,0,0,.94);
}
.lightbox.open{display:flex}
.lightbox img{
  max-width:96vw;
  max-height:88vh;
  object-fit:contain;
  border-radius:14px;
  box-shadow:0 20px 70px #000;
}
.lightbox button{
  position:absolute;
  top:18px;
  right:18px;
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:#ffffff20;
  color:#fff;
  font-size:1.7rem;
  cursor:pointer;
}
footer{
  text-align:center;
  padding:42px 15px;
  color:#b9c7c9;
  border-top:1px solid #ffffff17;
}
@media(max-width:900px){
  .gallery.three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .hero{min-height:68vh}
  .gallery,.gallery.three{grid-template-columns:1fr}
  figure img{height:auto;max-height:none;object-fit:contain}
}