:root{
  --forest-dark:#122a1d;
  --forest:#1f4430;
  --forest-mid:#2f5d3a;
  --sage:#7fa87a;
  --sage-light:#a9c9a0;
  --cream:#f6f3e9;
  --cream-deep:#eee9da;
  --gold:#c9a24b;
  --terracotta:#a8523a;
  --ink:#22301f;
  --shadow:0 10px 30px -12px rgba(18,42,29,.35);
  --radius:14px;
  font-size:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost',system-ui,-apple-system,Segoe UI,sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;margin:0}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer}

/* subtle paper/leaf watermark on the whole page */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.05;
  background-image:radial-gradient(circle at 20% 20%, var(--forest) 0, transparent 45%),
                    radial-gradient(circle at 80% 60%, var(--forest) 0, transparent 40%);
}

/* ---------- corner vines ---------- */
.corner-vine{
  position:fixed;
  width:120px;height:120px;
  color:var(--forest);
  pointer-events:none;
  z-index:5;
  opacity:.85;
}
.corner-vine--tl{top:-8px;left:-8px;transform:scaleX(1)}
.corner-vine--br{bottom:-8px;right:-8px;transform:rotate(180deg)}
@media (max-width:700px){
  .corner-vine{width:72px;height:72px}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#fff;
}
.hero__bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center 12%;
  transform:scale(1.08);
  filter:saturate(1.05);
}
.hero__overlay{
  position:absolute;inset:0;
  /* juste assez de dégradé en haut et en bas pour la lisibilité du texte,
     la photo reste visible et non délavée */
  background:
    linear-gradient(180deg, rgba(10,20,14,.28) 0%, rgba(10,20,14,0) 18%, rgba(10,20,14,0) 62%, rgba(10,20,14,.5) 100%);
}
.hero__leaves{position:absolute;inset:0;pointer-events:none}
.hero__leaves .leaf{position:absolute;width:40px;height:auto;color:var(--sage-light);opacity:.55;animation:drift 9s ease-in-out infinite}
.leaf--1{top:12%;left:10%;animation-delay:0s}
.leaf--2{top:60%;left:85%;animation-delay:2.5s;width:28px}
.leaf--3{top:30%;left:75%;animation-delay:5s;width:34px}
@keyframes drift{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-18px) rotate(12deg)}
}
.hero__content{
  position:relative;z-index:2;
  text-align:center;
  padding:0 1.25rem;
  max-width:840px;
}
.hero__eyebrow{
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  color:var(--sage-light);
  margin:0 0 1rem;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.hero__title{
  font-size:clamp(2.6rem,7vw,5rem);
  line-height:1.05;
  text-shadow:0 2px 10px rgba(0,0,0,.5), 0 8px 34px rgba(0,0,0,.4);
}
.hero__subtitle{
  margin:1.3rem auto 2.2rem;
  max-width:560px;
  font-weight:300;
  font-size:1.05rem;
  color:#f0ede2;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.hero__cta{
  display:inline-block;
  padding:.9rem 2.1rem;
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  letter-spacing:.05em;
  font-size:.9rem;
  transition:background .3s, transform .3s, border-color .3s;
  backdrop-filter:blur(2px);
}
.hero__cta:hover{background:rgba(255,255,255,.15);border-color:#fff;transform:translateY(-2px)}

.scroll-indicator{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  z-index:2;
}
.scroll-indicator span{
  display:block;width:22px;height:36px;border:2px solid rgba(255,255,255,.7);border-radius:12px;position:relative;
}
.scroll-indicator span::before{
  content:"";position:absolute;top:6px;left:50%;width:4px;height:8px;background:#fff;border-radius:2px;
  transform:translateX(-50%);
  animation:scrolldot 1.8s ease infinite;
}
@keyframes scrolldot{
  0%{opacity:1;top:6px}
  70%{opacity:0;top:18px}
  100%{opacity:0;top:6px}
}

/* ---------- INTRO ---------- */
.intro{
  position:relative;
  background:var(--cream);
  padding:4.5rem 1.5rem 3rem;
  text-align:center;
}
.divider-svg{width:100%;max-width:900px;height:24px;display:block;margin:0 auto 2.2rem}
.intro__text{
  max-width:640px;margin:0 auto;
  font-size:1.08rem;
  color:#3a4a37;
  font-weight:300;
}
.slideshow-cta{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin-top:2rem;
  padding:.75rem 1.6rem;
  border:1px solid var(--forest-mid);
  border-radius:999px;
  background:transparent;
  color:var(--forest);
  font-size:.9rem;
  letter-spacing:.03em;
  transition:background .25s, color .25s, transform .25s;
}
.slideshow-cta:hover{background:var(--forest);color:#fff;transform:translateY(-2px)}

/* ---------- GALLERY ---------- */
.gallery-section{
  position:relative;
  padding:1rem clamp(1rem,3vw,2.5rem) 3rem;
  z-index:1;
}
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  grid-auto-rows:320px;
  grid-auto-flow:dense;
  gap:clamp(10px,1.6vw,20px);
}
@media (max-width:520px){
  .gallery{
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    grid-auto-rows:260px;
  }
}
/* en dessous de 680px, une seule colonne de 320px tient dans la largeur :
   un item en span 2 colonnes ferait déborder la grille et couperait
   une photo sur deux à droite (visible notamment sur mobile Android) */
@media (max-width:680px){
  .photo-item--wide,
  .photo-item--big{
    grid-column:span 1;
  }
}
.photo-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  background:var(--cream-deep);
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.photo-item.is-visible{opacity:1;transform:translateY(0)}
.photo-item img{
  width:100%;height:100%;object-fit:cover;
  cursor:zoom-in;
  transition:transform .6s ease, filter .4s ease;
  display:block;
}
.photo-item:hover img{transform:scale(1.08)}
.photo-item::after{
  content:"";
  position:absolute;inset:0;
  border-radius:var(--radius);
  box-shadow:inset 0 0 0 0 var(--gold);
  transition:box-shadow .3s ease;
  pointer-events:none;
}
.photo-item:hover::after{box-shadow:inset 0 0 0 3px rgba(201,162,75,.85)}

.photo-item--wide{grid-column:span 2}
.photo-item--tall{grid-row:span 2}
.photo-item--big{grid-column:span 2;grid-row:span 2}

/* petit mot glissé à côté de la dernière photo */
.gallery-caption{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.6rem;
  border-radius:var(--radius);
  background:linear-gradient(135deg,var(--cream-deep),var(--cream));
  border:1px dashed var(--sage);
  color:var(--forest-dark);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:1.35rem;
  line-height:1.4;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.gallery-caption.is-visible{opacity:1;transform:translateY(0)}
.gallery-caption svg{width:32px;height:23px;color:var(--sage);margin-bottom:.9rem;flex:none}
.gallery-caption p{margin:0}

/* decorative divider strips inside the grid */
.leaf-divider{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.2rem;
  padding:1.6rem .5rem;
  color:var(--forest-mid);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s ease, transform .6s ease;
}
.leaf-divider.is-visible{opacity:1;transform:translateY(0)}
.leaf-divider svg{width:30px;height:22px;flex:none}
.leaf-divider svg:nth-child(2){width:22px;height:16px;opacity:.7;transform:rotate(-12deg)}
.leaf-divider svg:nth-child(4){width:22px;height:16px;opacity:.7;transform:rotate(12deg) scaleX(-1)}
.leaf-divider .line{
  height:1px;
  width:min(120px,18vw);
  background:linear-gradient(90deg,transparent,var(--sage),transparent);
}

/* ---------- FOOTER ---------- */
.site-footer{
  background:var(--forest-dark);
  color:var(--sage-light);
  text-align:center;
  padding:2.5rem 1.5rem 6.5rem;
  font-size:.85rem;
  letter-spacing:.03em;
}
.site-footer .leaf-icon{width:26px;height:19px;color:var(--sage);margin-bottom:.6rem}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed;inset:0;
  background:rgba(10,20,14,.94);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:1rem;
}
@media (max-width:600px){
  .lightbox{padding:.4rem}
}
.lightbox.is-open{display:flex}
.lightbox__stage{
  max-width:97vw;
  max-height:94vh;
  text-align:center;
}
.lightbox__stage img{
  max-width:97vw;
  max-height:90vh;
  width:auto;
  height:auto;
  margin:0 auto;
  border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox__counter{
  color:var(--sage-light);
  font-size:.85rem;
  margin-top:.9rem;
  letter-spacing:.05em;
}
.lightbox__close{
  position:absolute;top:18px;right:22px;
  background:none;border:none;color:#fff;
  font-size:2.2rem;line-height:1;
  opacity:.8;
}
.lightbox__close:hover{opacity:1}
.lightbox__slideshow{
  position:absolute;top:16px;left:22px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  width:40px;height:40px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.lightbox__slideshow:hover{background:rgba(255,255,255,.25)}
.lightbox__slideshow.is-playing{background:var(--gold);border-color:var(--gold);color:var(--forest-dark)}
@media (max-width:600px){
  .lightbox__slideshow{width:34px;height:34px;top:12px;left:12px}
  .lightbox__close{top:10px;right:14px}
}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  width:48px;height:48px;
  border-radius:50%;
  font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.lightbox__nav:hover{background:rgba(255,255,255,.2)}
.lightbox__nav--prev{left:16px}
.lightbox__nav--next{right:16px}
@media (max-width:600px){
  .lightbox__nav{width:38px;height:38px;font-size:.9rem}
  .lightbox__nav--prev{left:6px}
  .lightbox__nav--next{right:6px}
}

/* ---------- AUDIO PLAYER ---------- */
.player{
  position:fixed;
  left:50%;bottom:18px;
  transform:translateX(-50%);
  width:min(560px,calc(100% - 24px));
  background:linear-gradient(135deg,var(--forest) 0%,var(--forest-dark) 100%);
  color:#fff;
  border-radius:999px;
  box-shadow:0 14px 40px -10px rgba(0,0,0,.45);
  z-index:60;
  display:flex;
  align-items:center;
  padding:.5rem .6rem .5rem 1rem;
  gap:.6rem;
  transition:transform .35s ease, width .35s ease;
}
.player__leaf{
  position:absolute;
  top:-14px;left:22px;
  width:26px;height:19px;
  color:var(--sage);
  opacity:.9;
  pointer-events:none;
}
.player.is-collapsed .player__body{display:none}
.player.is-collapsed{padding:.45rem}
.player__toggle{
  order:5;
  background:rgba(255,255,255,.1);
  border:none;color:#fff;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex:none;
  transition:transform .3s;
}
.player.is-collapsed .player__toggle{transform:rotate(180deg)}
.player__body{
  display:flex;align-items:center;gap:.7rem;flex:1;min-width:0;
}
.player__btn{
  background:rgba(255,255,255,.12);
  border:none;color:#fff;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex:none;
  transition:background .2s;
}
.player__btn:hover{background:rgba(255,255,255,.25)}
.player__btn.is-active{background:var(--gold);color:var(--forest-dark)}
.player__btn.is-active:hover{background:#dab35c}
.player__btn--play{
  width:40px;height:40px;
  background:var(--gold);
  color:var(--forest-dark);
}
.player__btn--play:hover{background:#dab35c}
.player__info{flex:1;min-width:0}
.player__title{
  margin:0 0 .25rem;
  font-size:.82rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--sage-light);
  font-weight:500;
}
.player__bar{display:flex;align-items:center;gap:.5rem}
.player__time{font-size:.68rem;color:rgba(255,255,255,.6);flex:none;font-variant-numeric:tabular-nums}
.player__bar input[type=range]{
  flex:1;
  appearance:none;
  height:4px;
  background:rgba(255,255,255,.25);
  border-radius:999px;
  outline:none;
}
.player__bar input[type=range]::-webkit-slider-thumb{
  appearance:none;width:12px;height:12px;border-radius:50%;background:var(--gold);cursor:pointer;
}
.player__bar input[type=range]::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;background:var(--gold);border:none;cursor:pointer;
}
@media (max-width:480px){
  .player{padding:.45rem .5rem .45rem .8rem}
  .player__title{font-size:.75rem}
}

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