/* =====================================
   VARIABLES
====================================== */

:root {
  --cream: #f8f2e7;
  --paper: #fffaf0;

  --olive: #556443;
  --olive-dark: #3e4a33;

  --sage: #93a07f;

  --ink: #35322d;
  --line: #d9cfbd;

  --wedding-gold: #b69049;
  --wedding-dark: #152016;
}


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

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  overflow-x: hidden;

  font-family:
    "Cormorant Garamond",
    serif;

  color: var(--ink);

  background:
    radial-gradient(
      circle at top,
      rgba(255, 255, 255, 0.55),
      transparent 45%
    ),
    var(--cream);
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}


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

.hero {
  position: relative;

  min-height: 820px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    url("assets/Mas1.jpg")
    center 48% / cover
    no-repeat;
}

.hero-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(12, 22, 15, 0.84) 0%,
      rgba(12, 22, 15, 0.65) 34%,
      rgba(12, 22, 15, 0.25) 65%,
      rgba(12, 22, 15, 0.08) 100%
    );
}

.hero-copy {
  position: relative;

  z-index: 2;

  width: min(760px, 92%);

  padding:
    100px
    35px
    165px
    7vw;

  text-align: center;

  color: white;
}

.hero h1 {
  margin: 0;

  font-size:
    clamp(70px, 8vw, 112px);

  font-weight: 500;

  line-height: 0.9;

  text-shadow:
    0 3px 20px
    rgba(0, 0, 0, 0.25);
}

.hero h1 span {
  display: inline;

  font-size: inherit;
}

.ampersand {
  font-family:
    "Parisienne",
    cursive !important;

  color:
    var(--wedding-gold);

  font-weight: 400;
}

.hero-eyebrow {
  margin:
    30px
    0
    15px;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 0.35em;
}

.hero-divider {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 16px;

  margin:
    15px
    auto
    18px;
}

.hero-divider span {
  display: block;

  width: 85px;

  height: 1px;

  background:
    rgba(255, 255, 255, 0.7);
}

.hero-divider b {
  color:
    var(--wedding-gold);

  font-size: 22px;

  font-weight: normal;
}

.hero-date {
  margin: 0;

  font-size: 20px;

  font-weight: 600;

  letter-spacing: 0.18em;
}

.hero-place {
  margin:
    12px
    0
    0;

  font-size: 14px;

  letter-spacing: 0.13em;
}

.hero-place span {
  margin:
    0
    7px;

  color:
    var(--wedding-gold);
}

.hero-intro {
  max-width: 630px;

  margin:
    30px
    auto
    0;

  font-size: 22px;

  line-height: 1.5;

  color:
    rgba(255, 255, 255, 0.92);
}


/* =====================================
   SECTIONS
====================================== */

.section {
  width:
    min(1150px, calc(100% - 40px));

  margin:
    0
    auto;

  padding:
    80px
    0;
}

.section-heading {
  max-width: 750px;

  margin:
    0
    auto
    50px;

  text-align: center;
}

.section-kicker {
  margin:
    0
    0
    8px;

  font-size: 13px;

  font-weight: 600;

  letter-spacing: 0.28em;

  color:
    var(--wedding-gold);
}

.section-heading h2 {
  margin: 0;

  font-family:
    "Italiana",
    serif;

  font-size:
    clamp(42px, 5vw, 62px);

  font-weight: 400;

  color:
    var(--olive-dark);
}

.section-ornament {
  margin:
    12px
    0
    18px;

  font-size: 26px;

  color:
    var(--wedding-gold);
}

.section-intro {
  margin: 0;

  font-size: 21px;

  line-height: 1.55;
}


/* =====================================
   PROGRAMME : GRAND CONTENEUR
====================================== */

.programme-stage {
  position: relative;

  width: 100%;

  min-height: 730px;

  margin-top: -115px;

  padding:
    0
    20px
    60px;

  overflow: hidden;
}


/* =====================================
   CARTE DU PROGRAMME
====================================== */

.programme-card {
  position: relative;

  z-index: 4;

  width:
    min(1030px, calc(100% - 360px));

  min-height: 675px;

  margin:
    0
    auto;

  padding:
    48px
    70px
    36px;

  background:
    rgba(255, 250, 240, 0.98);

  border:
    1px
    solid
    rgba(182, 144, 73, 0.42);

  box-shadow:
    0
    25px
    65px
    rgba(29, 35, 24, 0.13);
}


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

.programme-heading {
  margin:
    0
    auto
    34px;

  text-align: center;
}

.programme-heading h2 {
  margin: 0;

  font-family:
    "Italiana",
    serif;

  font-size:
    clamp(42px, 4vw, 58px);

  font-weight: 400;

  color:
    var(--olive-dark);
}

.programme-heading .section-ornament {
  margin:
    9px
    0
    10px;
}


/* =====================================
   JOURS
====================================== */

.day-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;
}

.day-column {
  padding:
    5px
    42px;
}

.day-column:first-child {
  border-right:
    1px
    solid
    var(--line);
}

.day-label {
  margin:
    0
    0
    4px;

  text-align: center;

  font-size: 13px;

  font-weight: 600;

  letter-spacing: 0.25em;

  color:
    var(--wedding-gold);
}

.day-column h3 {
  margin:
    0
    0
    27px;

  text-align: center;

  font-family:
    "Italiana",
    serif;

  font-size: 30px;

  font-weight: 400;

  color:
    var(--olive-dark);
}


/* =====================================
   TIMELINE
====================================== */

.timeline {
  display: flex;

  flex-direction: column;

  gap: 18px;
}

.timeline-item {
  display: grid;

  grid-template-columns:
    58px
    1fr;

  gap: 12px;
}

.timeline-time {
  padding-top: 3px;

  font-size: 13px;

  font-weight: 600;

  color:
    var(--wedding-gold);
}

.timeline-item strong {
  display: block;

  margin-bottom: 2px;

  font-size: 18px;

  color:
    var(--olive-dark);
}

.timeline-item p {
  margin: 0;

  font-size: 16px;

  line-height: 1.35;
}


/* =====================================
   MAS DANS LE PROGRAMME
====================================== */

.venue-note {
  max-width: 690px;

  margin:
    34px
    auto
    0;

  padding:
    17px
    20px;

  text-align: center;

  border-top:
    1px
    solid
    var(--line);

  border-bottom:
    1px
    solid
    var(--line);

  font-size: 16px;

  line-height: 1.4;
}

.venue-note strong {
  font-family:
    "Italiana",
    serif;

  font-size: 21px;

  font-weight: 400;

  color:
    var(--olive-dark);
}

.adult-note {
  margin:
    18px
    0
    0;

  text-align: center;

  font-size: 15px;

  font-style: italic;
}


/* =====================================
   LAURA & MATHIEU À GAUCHE
====================================== */

.programme-couple {
  position: absolute;

  z-index: 7;

  left:
    max(
      15px,
      calc(50% - 780px)
    );

  bottom: -5px;

  width: 390px;

  pointer-events: none;
}

.programme-couple img {
  display: block;

  width: 100%;
  height: auto;

  /*
    On fait disparaître progressivement
    le bord droit et légèrement le bas.
    Ça évite l'effet "photo dans une colonne".
  */
  -webkit-mask-image:
    linear-gradient(
      to right,
      black 0%,
      black 72%,
      rgba(0, 0, 0, 0.85) 82%,
      rgba(0, 0, 0, 0.35) 94%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to right,
      black 0%,
      black 72%,
      rgba(0, 0, 0, 0.85) 82%,
      rgba(0, 0, 0, 0.35) 94%,
      transparent 100%
    );

  filter:
    drop-shadow(
      0
      14px
      18px
      rgba(20, 30, 20, 0.10)
    );
}


/* =====================================
   OLIVIERS
====================================== */

.olive-decoration {
  position: absolute;

  z-index: 2;

  width: 250px;

  height: 620px;

  fill:
    rgba(85, 100, 67, 0.56);

  opacity: 0.72;

  pointer-events: none;
}

.olive-stem {
  fill: none;

  stroke:
    rgba(85, 100, 67, 0.68);

  stroke-width: 5;

  stroke-linecap: round;
}

.olive-fruit {
  fill:
    rgba(62, 74, 51, 0.88);
}

.olive-left {
  left: -65px;

  bottom: -15px;

  transform:
    rotate(-8deg);
}

.olive-right {
  right: -50px;

  top: 40px;

  transform:
    scaleX(-1)
    rotate(-5deg);
}


/* =====================================
   PETITES AURÉOLES CRÈME
====================================== */

.programme-stage::before {
  content: "";

  position: absolute;

  left: -120px;

  bottom: -80px;

  width: 520px;

  height: 520px;

  z-index: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(182, 144, 73, 0.10),
      transparent 70%
    );
}

.programme-stage::after {
  content: "";

  position: absolute;

  right: -130px;

  top: 30px;

  width: 520px;

  height: 520px;

  z-index: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(147, 160, 127, 0.13),
      transparent 70%
    );
}


/* =====================================
   MAS
====================================== */

.mas-showcase {
  display: grid;

  grid-template-columns:
    58%
    42%;

  min-height: 610px;

  overflow: hidden;

  background:
    var(--wedding-dark);
}

.mas-showcase-photo {
  min-height: 610px;

  background:
    linear-gradient(
      90deg,
      transparent 70%,
      var(--wedding-dark) 100%
    ),
    url("assets/Mas2.jpg");

  background-size: cover;

  background-position: center;
}

.mas-showcase-text {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding:
    80px
    65px;

  text-align: center;

  color: white;
}

.mas-kicker {
  margin:
    0
    0
    8px;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 0.25em;

  color:
    var(--wedding-gold);
}

.mas-showcase-text h2 {
  margin: 0;

  font-family:
    "Italiana",
    serif;

  font-size:
    clamp(42px, 4vw, 60px);

  font-weight: 400;
}

.mas-ornament {
  margin:
    18px
    0;

  font-size: 28px;

  color:
    var(--wedding-gold);
}

.mas-showcase-text p {
  max-width: 440px;

  margin:
    8px
    auto;

  font-size: 21px;

  line-height: 1.5;

  color:
    rgba(255, 255, 255, 0.9);
}


/* =====================================
   HÉBERGEMENTS
====================================== */

.lodging {
  padding-top: 100px;
}

.hotel-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 25px;
}

.hotel-card {
  position: relative;

  padding:
    35px
    35px
    32px;

  background:
    rgba(255, 250, 240, 0.9);

  border:
    1px
    solid
    var(--line);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.hotel-card:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0
    16px
    35px
    rgba(34, 40, 28, 0.08);
}

.hotel-price {
  position: absolute;

  top: 20px;

  right: 24px;

  font-size: 15px;

  color:
    var(--wedding-gold);
}

.hotel-card h3 {
  max-width: 78%;

  margin:
    0
    0
    12px;

  font-family:
    "Italiana",
    serif;

  font-size: 25px;

  font-weight: 400;

  color:
    var(--olive-dark);
}

.hotel-card p {
  margin:
    0
    0
    12px;

  font-size: 17px;

  line-height: 1.45;
}

.hotel-location {
  color:
    var(--olive);

  font-style: italic;
}

.hotel-card a {
  display: inline-block;

  margin:
    7px
    14px
    0
    0;

  color:
    var(--olive-dark);

  font-weight: 600;

  text-decoration: underline;

  text-decoration-color:
    rgba(182, 144, 73, 0.55);

  text-underline-offset: 4px;
}


/* =====================================
   NAVETTES
====================================== */

.shuttle-box {
  margin-top: 45px;

  padding:
    45px
    50px;

  text-align: center;

  color: white;

  background:
    var(--olive-dark);

  border:
    1px
    solid
    var(--wedding-gold);
}

.shuttle-kicker {
  margin:
    0
    0
    8px;

  font-size: 13px;

  font-weight: 600;

  letter-spacing: 0.25em;

  color:
    var(--wedding-gold);
}

.shuttle-box h3 {
  max-width: 750px;

  margin:
    0
    auto
    12px;

  font-family:
    "Italiana",
    serif;

  font-size: 29px;

  font-weight: 400;
}

.shuttle-box p:last-child {
  max-width: 780px;

  margin:
    0
    auto;

  font-size: 18px;

  line-height: 1.5;

  color:
    rgba(255, 255, 255, 0.88);
}


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

.rsvp {
  width:
    min(900px, calc(100% - 40px));

  margin-bottom: 80px;
}

.rsvp form {
  padding: 55px;

  background:
    rgba(255, 250, 240, 0.96);

  border:
    1px
    solid
    var(--line);

  box-shadow:
    0
    20px
    50px
    rgba(38, 45, 31, 0.08);
}

.form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 28px;
}

.form-field {
  display: flex;

  flex-direction: column;

  gap: 8px;
}

.form-full {
  grid-column:
    1 / -1;
}

.form-field label,
.form-field legend {
  font-size: 18px;

  font-weight: 600;

  color:
    var(--olive-dark);
}

fieldset.form-field {
  margin: 0;

  padding: 0;

  border: 0;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;

  padding:
    14px
    15px;

  border:
    1px
    solid
    var(--line);

  border-radius: 0;

  outline: none;

  background:
    rgba(255, 255, 255, 0.72);

  font-family: inherit;

  font-size: 17px;

  color:
    var(--ink);
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color:
    var(--wedding-gold);

  box-shadow:
    0
    0
    0
    3px
    rgba(182, 144, 73, 0.10);
}

textarea {
  resize: vertical;
}

.radio-group {
  display: flex;

  flex-wrap: wrap;

  gap:
    14px
    26px;

  margin-top: 7px;
}

.radio-column {
  flex-direction: column;

  align-items: flex-start;

  gap: 12px;
}

.radio-group label {
  display: flex;

  align-items: center;

  gap: 8px;

  font-weight: 400;

  cursor: pointer;
}

.radio-group input {
  accent-color:
    var(--olive-dark);
}

.disabled-fieldset {
  opacity: 0.4;
}

.submit-button {
  display: block;

  min-width: 230px;

  margin:
    45px
    auto
    0;

  padding:
    16px
    28px;

  border:
    1px
    solid
    var(--wedding-gold);

  background:
    var(--olive-dark);

  color: white;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 18px;

  font-weight: 600;

  letter-spacing: 0.06em;

  cursor: pointer;
}

.submit-button:hover {
  background:
    var(--wedding-dark);
}

.form-status {
  min-height: 24px;

  margin:
    20px
    0
    0;

  text-align: center;

  font-size: 17px;

  color:
    var(--olive-dark);
}


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

footer {
  padding:
    75px
    25px;

  text-align: center;

  color: white;

  background:
    var(--wedding-dark);
}

.footer-heart {
  margin-bottom: 13px;

  font-size: 25px;

  color:
    var(--wedding-gold);
}

.footer-title {
  margin:
    0
    0
    20px;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 0.18em;
}

.footer-names {
  margin:
    0
    0
    12px;

  font-family:
    "Parisienne",
    cursive;

  font-size: 55px;

  color:
    var(--wedding-gold);
}

.footer-date {
  margin: 0;

  font-size: 16px;

  color:
    rgba(255, 255, 255, 0.75);
}


/* =====================================
   TABLETTE
====================================== */

@media (max-width: 1250px) {

  .programme-card {
    width:
      min(920px, calc(100% - 180px));
  }

  .programme-couple {
    left: -20px;

    width: 310px;
  }

  .olive-left {
    left: -130px;
  }

  .olive-right {
    right: -120px;
  }
}


/* =====================================
   MOBILE
====================================== */

@media (max-width: 800px) {

  /* HERO */

  .hero {
    min-height: 760px;

    background-position: center;
  }

  .hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(12, 22, 15, 0.30) 0%,
        rgba(12, 22, 15, 0.55) 45%,
        rgba(12, 22, 15, 0.80) 100%
      );
  }

  .hero-copy {
    width: 100%;

    padding:
      160px
      24px
      135px;

    align-self: flex-end;
  }

  .hero h1 {
    font-size:
      clamp(58px, 17vw, 82px);
  }

  .hero-date {
    font-size: 16px;
  }

  .hero-place {
    font-size: 12px;

    line-height: 1.6;
  }

  .hero-intro {
    font-size: 19px;
  }


  /* PROGRAMME */

  .programme-stage {
    min-height: auto;

    margin-top: -80px;

    padding:
      0
      14px
      25px;
  }

  .programme-card {
    width: 100%;

    min-height: auto;

    padding:
      42px
      22px
      34px;
  }

  .programme-heading {
    margin-bottom: 25px;
  }

  .programme-heading h2 {
    font-size: 39px;
  }

  .day-grid {
    grid-template-columns:
      1fr;
  }

  .day-column {
    padding:
      8px
      5px
      28px;
  }

  .day-column:first-child {
    margin-bottom: 28px;

    border-right: 0;

    border-bottom:
      1px
      solid
      var(--line);
  }

  .timeline {
    gap: 16px;
  }

  .timeline-item {
    grid-template-columns:
      55px
      1fr;
  }

  .timeline-item strong {
    font-size: 17px;
  }

  .timeline-item p {
    font-size: 15px;
  }


  /* PHOTO SOUS LA CARTE SUR MOBILE */

  .programme-couple {
    position: relative;

    left: auto;

    bottom: auto;

    z-index: 5;

    width:
      min(310px, 85%);

    margin:
      -18px
      auto
      0;
  }


  /* OLIVIERS PLUS DISCRETS SUR MOBILE */

  .olive-decoration {
    width: 150px;

    height: 380px;

    opacity: 0.22;
  }

  .olive-left {
    left: -110px;

    bottom: 150px;
  }

  .olive-right {
    right: -110px;

    top: 450px;
  }


  /* MAS */

  .mas-showcase {
    grid-template-columns:
      1fr;
  }

  .mas-showcase-photo {
    min-height: 430px;

    background:
      linear-gradient(
        180deg,
        transparent 72%,
        var(--wedding-dark) 100%
      ),
      url("assets/Mas2.jpg");

    background-size: cover;

    background-position: center;
  }

  .mas-showcase-text {
    padding:
      55px
      28px
      70px;
  }


  /* SECTIONS */

  .section {
    width:
      calc(100% - 30px);

    padding:
      65px
      0;
  }


  /* HÔTELS */

  .hotel-grid {
    grid-template-columns:
      1fr;
  }

  .hotel-card {
    padding:
      30px
      25px;
  }

  .shuttle-box {
    padding:
      38px
      25px;
  }


  /* RSVP */

  .rsvp {
    width:
      calc(100% - 30px);
  }

  .rsvp form {
    padding:
      38px
      22px;
  }

  .form-grid {
    grid-template-columns:
      1fr;
  }

  .form-full {
    grid-column: auto;
  }

  .radio-group {
    flex-direction: column;

    align-items: flex-start;
  }


  /* FOOTER */

  footer {
    padding:
      60px
      20px;
  }

  .footer-names {
    font-size: 47px;
  }
}