:root{
  --bg:#f6f1e3;
  --green:#3c6026;

  --font-body:"Cormorant Garamond", serif;
  --font-title:"Allura", cursive;

  --transition:.35s ease;
}

/* =========================
   BASE
========================= */

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  color:var(--green);
  font-family:var(--font-body);
  letter-spacing:.02em;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Grain subtil */

body::before{
  content:"";
  position:fixed;
  inset:0;

  background-image:url("images/grain.png");
  background-repeat:repeat;

  opacity:.025;
  pointer-events:none;
  z-index:999;
}

a,
a:link,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
}

/* =========================
   TYPOGRAPHY
========================= */

.display-title,
.section-title,
.info-subtitle,
.tagline{
  font-family:var(--font-title);
  font-weight:400;
  line-height:1.05;
  letter-spacing:0;
}

.display-title{
  font-size:clamp(48px,10vw,88px);
}

.section-title{
  font-size:clamp(42px,8vw,68px);
}

.info-subtitle{
  font-size:clamp(34px,7vw,52px);
}

.tagline{
  font-size:clamp(28px,5vw,38px);
}

.manifesto{
  font-size:clamp(30px,4vw,44px);
  line-height:1.45;
  font-weight:300;
  letter-spacing:.01em;
}

.body-copy{
  font-size:18px;
  line-height:1.9;
  opacity:.85;
}

.address{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.55;
}

.eyebrow{
  font-size:10px;
  letter-spacing:.32em;
  text-transform:uppercase;
  opacity:.55;
  margin-bottom:24px;
}

.itin-day{
  font-size:24px;
  margin-bottom:8px;
}

.itin-detail{
  font-size:17px;
  line-height:1.8;
  opacity:.7;
}

/* =========================
   SPACING
========================= */

.py-section{
  padding:110px 0;
}

.narrow{
  max-width:640px;
}

/* =========================
   IMAGES
========================= */

img{
  max-width:100%;
  display:block;
  margin-inline:auto;
}

.names-svg{
  width:min(360px,68vw);
}

.illustration{
  width:min(500px,58vw);
  animation:float 8s ease-in-out infinite;
}

.angel{
  width:clamp(180px,18vw,500px);
}

.bateau{
  width:clamp(500px,65vw,500px);
}

.itinerario-illo{
  width:clamp(160px,36vw,300px);
}

.info-illo{
  width:clamp(190px,24vw,150px);
}

.info-illo-wide{
  width:clamp(500px,45vw,300px);
}

.rsvp-fleurs{
  width:clamp(200px,38vw,240px);
}

/* =========================
   FLOAT ANIMATION
========================= */

@keyframes float{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-6px);
  }

  100%{
    transform:translateY(0px);
  }

}

/* =========================
   NAVBAR
========================= */

.topbar{
  background:rgba(246,241,227,.88);
  backdrop-filter:blur(10px);

  border-bottom:1px solid rgba(60,96,38,.08);

  padding:12px 0;
}

.lang-btn{
  border:none;
  background:none;

  color:var(--green);

  font-size:11px;
  letter-spacing:.18em;

  padding:4px 8px;

  transition:var(--transition);
}

.lang-btn.active{
  background:var(--green);
  color:var(--bg);
}

.lang-sep{
  opacity:.3;
}

/* =========================
   HERO
========================= */

.hero-section{
  min-height:auto;

  padding:
    120px
    24px
    90px;
}

.hero-container{
  max-width:720px;
}

.date{
  font-size:clamp(18px,4vw,24px);
  letter-spacing:.15em;
}

/* =========================
   BUTTON
========================= */

.cta-btn{
  display:inline-block;

  padding:16px 38px;

  border:1px solid rgba(60,96,38,.35);

  background:transparent;
  color:var(--green);

  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;

  transition:var(--transition);
}

.cta-btn:hover{
  background:var(--green);
  color:var(--bg);
}

/* =========================
   PROGRAMME
========================= */

.programme-head{
  text-align:center;
}

.timeline-item{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

/* =========================
   DIVIDER
========================= */

.divider{
  width:80px;
  height:1px;

  background:rgba(60,96,38,.15);

  border:none;

  margin:60px auto;
}

/* =========================
   INFORMATIONS
========================= */

.info-block{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.info-label{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.6;
  margin-bottom:0;
}

/* =========================
   RSVP
========================= */

.rsvp-form{
  max-width:460px;
}

.attendance-q{
  font-size:22px;
  margin-bottom:12px;
}

.form-check{
  padding-top:6px;
  padding-bottom:6px;
}

.form-check-label{
  font-size:18px;
}

.custom-input{
  min-height:52px;

  background:transparent;

  border:none;
  border-bottom:1px solid rgba(60,96,38,.25);

  border-radius:0;

  padding:14px 0;

  font-size:18px;
}

.custom-input:focus{
  box-shadow:none;
  background:transparent;
  border-color:var(--green);
}

.custom-input::placeholder{
  color:rgba(60,96,38,.45);
}

.form-check-input{
  border-color:rgba(60,96,38,.4);
}

.form-check-input:checked{
  background-color:var(--green);
  border-color:var(--green);
}

.hidden{
  display:none;
}

/* =========================
   ADDRESS LINKS
========================= */

.address-link{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(60,96,38,.25);
  transition:var(--transition);
  -webkit-text-decoration:none;
}

.address-link:hover,
.address-link:visited,
.address-link:active{
  color:inherit;
  text-decoration:none;
}

.address-link:hover{
  border-bottom-color:var(--green);
  opacity:1;
}

/* =========================
   FOOTER
========================= */

.footer{
  background:transparent;

  color:rgba(60,96,38,.45);

  padding:28px 20px 20px;

  border-top:1px solid rgba(60,96,38,.08);

  font-size:10px;
  letter-spacing:.25em;
  text-transform:uppercase;
}

/* =========================
   MOBILE FIRST REFINEMENTS
========================= */

@media (max-width:768px){

  .container,
  .container.narrow{
    padding-left:28px;
    padding-right:28px;
  }

  .py-section{
    padding:72px 0;
  }

  .display-title{
    font-size:56px;
  }

  .section-title{
    font-size:52px;
  }

  .info-subtitle{
    font-size:42px;
  }

  .manifesto{
    font-size:28px;
    line-height:1.5;
  }

  .body-copy{
    font-size:16px;
    line-height:1.85;
  }

  .itin-day{
    font-size:22px;
  }

  .itin-detail{
    font-size:16px;
  }

  .attendance-q{
    font-size:20px;
  }

  .form-check-label{
    font-size:17px;
  }

  .custom-input{
    font-size:17px;
  }

  .names-svg{
    width:78vw;
  }

  .illustration{
    width:70vw;
  }

  .cta-btn{
    width:100%;
    max-width:320px;

    padding:18px 24px;

    font-size:10px;
    letter-spacing:.28em;
  }

  .divider{
    margin:50px auto;
  }

}