/*
Theme Name: Khalfagang Wedding
Theme URI: https://khalfagang.fr
Description: Thème sur mesure pour le mariage de Chloé & Hugo.
Author: Chloé & Hugo
Version: 5.0
*/

:root {
    --cream: #f5f0df;
    --cream-light: #faf6f0;
    --blue: #1457a6;
    --orange: #ef6c35;
    --pink: #e9a0b3;
    --lavender: #a99bd4;
    --green: #708554;
    --ink: #153d76;
    --line: rgba(20, 87, 166, 0.24);
    --soft-line: rgba(20, 87, 166, 0.14);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--cream);
    color: var(--blue);
    font-family: Georgia, "Times New Roman", serif;
}

body.admin-bar .site-header {
    top: 32px;
}

a {
    color: inherit;
}

button,
input,
textarea {
    font: inherit;
}

img {
    max-width: 100%;
}

main {
    overflow: hidden;
}


/* =========================================
   HEADER
   ========================================= */

.site-header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 70px;
    padding: 0 30px;

    background: rgba(245, 240, 223, 0.91);
    border-bottom: 1px solid var(--soft-line);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.site-logo {
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
}

.site-logo span {
    color: var(--orange);
    font-style: italic;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

.main-nav a {
    position: relative;
    font-size: 0.9rem;
    text-decoration: none;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;

    width: 100%;
    height: 1px;

    background: var(--orange);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.2s ease;
}

.main-nav a:hover::after {
    transform: scaleX(1);
}

.menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    color: var(--blue);
}


/* =========================================
   GLOBAL
   ========================================= */

.section {
    position: relative;

    min-height: 100vh;
    overflow: hidden;

    padding: 135px 30px;

    background: var(--cream);
    border-top: 1px solid var(--soft-line);
}

.section-shell {
    position: relative;
    z-index: 10;

    width: min(1160px, 100%);
    margin: 0 auto;
}

.centered {
    text-align: center;
}

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

    color: var(--orange);

    font-size: 1rem;
    font-weight: 400;
}

.section-heading {
    display: grid;
    grid-template-columns: 0.35fr 1fr;

    gap: 40px;
    align-items: start;

    margin-bottom: 80px;
}

.section-heading h2,
.lieu h2,
.rsvp h2 {
    margin: 0;

    font-size: clamp(3.8rem, 8vw, 7.2rem);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: -0.055em;
}

.section-heading h2 em,
.lieu h2 em,
.rsvp h2 em,
.finale h2 em,
.contact h2 em {
    display: block;

    color: var(--orange);

    font-weight: 400;
}

.asset,
.day-asset {
    pointer-events: none;
    user-select: none;
}


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

.hero {
    position: relative;

    min-height: 100vh;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 105px 30px 45px;

    background: var(--cream);

    text-align: center;
}

.hero-content {
    position: relative;
    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(900px, 100%);
}

.hero h1 {
    margin: 0;

    color: var(--blue);

    font-size: clamp(5rem, 11vw, 9rem);
    font-weight: 400;
    line-height: 0.8;
    letter-spacing: -0.055em;
}

.hero h1 span {
    display: block;

    margin: 0.08em 0;

    color: var(--orange);

    font-size: 0.65em;
    font-style: italic;
}

.hero-date {
    margin: 40px 0 0;

    font-size: clamp(1rem, 2vw, 1.3rem);
    letter-spacing: 0.04em;
}

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

    color: var(--orange);

    font-size: 1.08rem;
    letter-spacing: 0.09em;
}

.pill-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 34px;
    padding: 14px 28px;

    border: 1.5px solid var(--blue);
    border-radius: 999px;

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.pill-button:hover {
    background: var(--blue);
    color: var(--cream);

    transform: rotate(-1deg);
}

.hero-dog {
    display: block;

    width: clamp(112px, 11vw, 165px);

    margin: 22px auto 0;
}

.asset {
    position: absolute;
    z-index: 2;

    height: auto;
}

.hero-sun {
    width: clamp(125px, 14vw, 205px);

    top: 9%;
    left: 5%;
}

.hero-disco {
    width: clamp(100px, 12vw, 175px);

    top: 10%;
    right: 6%;
}

.hero-olive {
    width: clamp(120px, 14vw, 205px);

    bottom: 5%;
    left: 5%;

    transform: rotate(-12deg);
}

.hero-coupes {
    width: clamp(76px, 8vw, 120px);

    bottom: 12%;
    left: 24%;

    transform: rotate(3deg);
}

.hero-fan {
    width: clamp(95px, 11vw, 160px);

    right: 4%;
    bottom: 6%;

    transform: rotate(8deg);
}

.hero-star {
    width: clamp(30px, 3.7vw, 52px);

    top: 34%;
    left: 18%;
}

.hero-note {
    width: clamp(30px, 3.7vw, 52px);

    top: 36%;
    right: 18%;

    transform: rotate(-12deg);
}


/* =========================================
   WEEK-END
   ========================================= */

.weekend::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: min(760px, 65vw);
    height: 10px;

    background: var(--blue);

    transform: translateX(-50%);
}

.weekend-intro {
    position: relative;

    max-width: 1040px;
    margin: 0 auto 110px;
}

.weekend .display-title {
    margin: 0 auto;

    max-width: 1000px;

    font-size: clamp(4.6rem, 10vw, 8.8rem);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: -0.055em;
}

.weekend .display-title em {
    display: block;

    color: var(--orange);

    font-weight: 400;
}

.lead {
    max-width: 560px;

    margin: 42px auto 0;

    font-size: 1.12rem;
    line-height: 1.7;
}

.weekend-disco {
    width: clamp(90px, 10vw, 150px);

    top: 7%;
    right: 5%;
}

.weekend-cocktail {
    width: clamp(85px, 10vw, 150px);

    top: 22%;
    left: 4%;

    transform: rotate(-6deg);
}

.weekend-branch {
    width: clamp(95px, 11vw, 170px);

    top: 23%;
    right: 7%;

    transform: rotate(8deg);
}

.weekend-confetti-left {
    width: 52px;

    top: 13%;
    left: 20%;
}

.weekend-confetti-right {
    width: 48px;

    top: 15%;
    right: 22%;
}

.weekend-programme {
    position: relative;
    z-index: 10;

    display: grid;
    gap: 92px;
}

.day {
    position: relative;

    padding: 34px 38px 18px;

    border: 1.5px solid var(--blue);
    border-radius: 34px;

    background: rgba(250, 246, 240, 0.46);
}

.day::after {
    content: "";

    position: absolute;
    z-index: -1;
    inset: 10px -9px -10px 9px;

    border: 1px solid rgba(239, 108, 53, 0.44);
    border-radius: 34px;
}

.day-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 20px;

    border-bottom: 2px solid var(--blue);
}

.day-heading p {
    margin: 0;

    font-size: clamp(2rem, 4.8vw, 4.1rem);
}

.day-heading span {
    max-width: 310px;

    color: var(--orange);

    font-style: italic;
    text-align: right;
}

.timeline {
    display: grid;
}

.event {
    display: grid;
    grid-template-columns: minmax(150px, 220px) 1fr;

    gap: 55px;

    padding: 35px 0;

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

.event:last-child {
    border-bottom: 0;
}

.event time {
    color: var(--orange);

    font-size: clamp(2.25rem, 4.8vw, 4.2rem);
    line-height: 1;
}

.event h3 {
    margin: 0;

    font-size: clamp(1.9rem, 3.8vw, 3.35rem);
    font-weight: 400;
    line-height: 1.06;
}

.event p {
    margin: 12px 0 0;

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

.event-full {
    grid-template-columns: 1fr;

    padding-right: 170px;
}

.event-full h3 {
    max-width: 850px;
}

.suspense {
    opacity: 0.73;
}

.text-link {
    display: inline-block;

    margin-top: 14px;

    color: var(--orange);

    font-size: 0.92rem;
    text-decoration: none;
}

.text-link:hover {
    text-decoration: underline;
}

.day-asset {
    position: absolute;
    z-index: 3;

    height: auto;
}

.day-car {
    width: clamp(125px, 15vw, 210px);

    right: 2%;
    top: -72px;

    transform: rotate(4deg);
}

.day-table {
    width: clamp(150px, 18vw, 240px);

    right: 1%;
    bottom: -52px;
}

.day-note {
    width: 38px;

    left: -18px;
    top: 38%;

    transform: rotate(-10deg);
}

.day-sun {
    width: clamp(92px, 10vw, 145px);

    right: 5%;
    bottom: -28px;
}

.day-waves {
    width: 84px;

    right: 18%;
    top: -36px;
}


/* =========================================
   LIEU
   ========================================= */

.lieu {
    min-height: 88vh;

    padding-top: 180px;
    padding-bottom: 185px;
}

.lieu::before {
    content: "";

    position: absolute;
    inset: 78px 6% 72px;

    border: 1.5px solid var(--blue);
    border-radius: 46% 54% 44% 56% / 54% 42% 58% 46%;

    pointer-events: none;
}

.lieu-shell {
    display: grid;
    grid-template-columns: 0.95fr 0.8fr;

    gap: 80px;
    align-items: center;
}

.lieu-heading {
    padding-left: 24px;
}

.lieu h2 {
    max-width: 620px;
}

.lieu-guirlande {
    z-index: 4;

    width: clamp(350px, 52vw, 720px);

    top: 55px;
    left: 50%;

    transform: translateX(-50%) rotate(-1deg);
}

.lieu-cabanes {
    z-index: 3;

    width: clamp(250px, 33vw, 470px);

    left: 50%;
    bottom: 18px;

    transform: translateX(-50%);
}

.lieu-lavande {
    width: clamp(90px, 10vw, 150px);

    right: 5%;
    bottom: 14%;

    transform: rotate(8deg);
}

.lieu-star {
    width: 46px;

    left: 7%;
    top: 38%;

    transform: rotate(-8deg);
}

.venue-card {
    position: relative;
    z-index: 10;

    padding: 44px;

    border: 1.5px solid var(--orange);
    border-radius: 30px;

    background: rgba(245, 240, 223, 0.88);
}

.venue-name {
    margin: 0;

    font-size: clamp(2rem, 3.6vw, 3.15rem);
}

.venue-address {
    margin: 16px 0 0;

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

.venue-link {
    display: inline-block;

    margin-top: 25px;
    padding-bottom: 4px;

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

    color: var(--orange);

    text-decoration: none;
}


/* =========================================
   INFOS
   ========================================= */

.infos::before {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    top: 0;

    height: 8px;

    background:
        repeating-linear-gradient(
            90deg,
            var(--orange) 0 70px,
            var(--cream) 70px 92px,
            var(--blue) 92px 162px,
            var(--cream) 162px 184px
        );
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}

.info-card {
    position: relative;

    min-height: 560px;

    padding: 22px 28px 32px;

    border: 1.5px solid var(--blue);
    border-radius: 30px;

    background: var(--cream-light);
}

.info-card:nth-child(2) {
    transform: translateY(24px) rotate(0.6deg);
}

.info-card:nth-child(3) {
    transform: rotate(-0.7deg);
}

.info-visual {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 210px;
    margin: -8px -8px 10px;

    overflow: hidden;

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

.info-visual img {
    display: block;

    width: auto;
    max-width: 95%;
    max-height: 200px;
}

.info-card > span {
    display: block;

    margin-top: 20px;

    color: var(--orange);

    font-size: 0.9rem;
}

.info-card h3 {
    margin: 16px 0 22px;

    font-size: 2.4rem;
    font-weight: 400;
}

.info-card p {
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.65;
}

.info-card p + p {
    margin-top: 20px;
}

.infos-bow {
    width: clamp(82px, 9vw, 130px);

    right: 4%;
    bottom: 3%;
}

.infos-lemon {
    width: clamp(48px, 5.5vw, 78px);

    left: 5%;
    bottom: 7%;
}


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

.rsvp::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    background: var(--line);
}

.rsvp-grid {
    display: grid;
    grid-template-columns: 0.9fr 1fr;

    gap: 90px;
    align-items: start;
}

.rsvp-copy {
    position: sticky;
    top: 120px;
}

.rsvp-copy p:last-child {
    max-width: 420px;

    margin-top: 35px;

    font-size: 1.1rem;
    line-height: 1.7;
}

.rsvp-panel {
    position: relative;
    z-index: 10;

    padding: 40px;

    border: 1.5px solid var(--blue);
    border-radius: 30px;

    background: rgba(250, 246, 240, 0.78);
}

.rsvp-form {
    display: grid;
    gap: 30px;
}

.rsvp-form > label {
    display: block;

    font-size: 1rem;
}

.rsvp-form textarea {
    width: 100%;
    min-height: 120px;

    margin-top: 12px;
    padding: 16px;

    border: 1.5px solid var(--blue);
    border-radius: 18px;
    outline: none;

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

    resize: vertical;
}

.rsvp-form textarea:focus {
    border-color: var(--orange);
}

.rsvp-form fieldset {
    display: grid;
    gap: 12px;

    margin: 0;
    padding: 24px 0;

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

.rsvp-form legend {
    margin-bottom: 14px;

    font-size: 1rem;
}

.radio-option {
    display: flex;
    align-items: center;

    gap: 12px;

    cursor: pointer;
}

.radio-option input {
    width: 18px;
    height: 18px;

    accent-color: var(--orange);
}

.submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;

    padding: 14px 25px;

    border: 1.5px solid var(--blue);
    border-radius: 999px;

    background: var(--blue);
    color: var(--cream);

    cursor: pointer;
}

.submit-button:hover {
    border-color: var(--orange);

    background: var(--orange);
}

.form-message {
    margin-bottom: 28px;
    padding: 16px 18px;

    border-radius: 16px;

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

.form-success {
    border: 1px solid var(--blue);
}

.form-error {
    border: 1px solid var(--orange);
}

.rsvp-coupes {
    width: clamp(90px, 10vw, 140px);

    left: 4%;
    bottom: 5%;
}

.rsvp-flower {
    width: clamp(90px, 10vw, 145px);

    right: 4%;
    top: 5%;
}

.rsvp-heart {
    width: 48px;

    left: 42%;
    top: 9%;

    transform: rotate(-8deg);
}


/* =========================================
   CONTACT
   ========================================= */

.contact {
    min-height: 72vh;
}

.contact-shell {
    text-align: center;
}

.contact h2 {
    margin: 0 auto;

    max-width: 950px;

    font-size: clamp(4rem, 9vw, 8rem);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: -0.055em;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

    max-width: 800px;
    margin: 70px auto 0;
}

.contact-person {
    display: flex;
    flex-direction: column;

    gap: 10px;

    padding: 30px 20px;

    border: 1.5px solid var(--blue);
    border-radius: 999px;

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.contact-person:hover {
    background: var(--blue);
    color: var(--cream);

    transform: rotate(-1deg);
}

.contact-person span {
    color: var(--orange);

    font-style: italic;
}

.contact-person:hover span {
    color: var(--cream);
}

.contact-person strong {
    font-size: clamp(1.25rem, 2.5vw, 1.8rem);
    font-weight: 400;
}

.contact-heart {
    width: clamp(42px, 5vw, 70px);

    right: 6%;
    bottom: 8%;
}

.contact-flower {
    width: clamp(72px, 8vw, 115px);

    left: 6%;
    bottom: 10%;
}

.contact-star {
    width: 42px;

    right: 18%;
    top: 17%;
}


/* =========================================
   FINALE
   ========================================= */

.finale {
    position: relative;

    min-height: 85vh;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 100px 30px;

    background: var(--cream);
    border-top: 2px solid var(--blue);

    text-align: center;
}

.finale > p {
    margin: 0 0 30px;

    color: var(--orange);
}

.finale h2 {
    margin: 0;

    font-size: clamp(4.5rem, 10vw, 8rem);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: -0.055em;
}

.finale a {
    margin-top: 45px;

    text-decoration: none;
}

.finale-speaker {
    width: clamp(125px, 15vw, 220px);

    left: 4%;
    bottom: 5%;
}

.finale-disco {
    width: clamp(105px, 12vw, 180px);

    top: 7%;
    right: 5%;
}

.finale-notes {
    width: clamp(78px, 8.5vw, 125px);

    right: 12%;
    bottom: 13%;
}

.finale-camera {
    width: clamp(90px, 10vw, 145px);

    left: 14%;
    top: 12%;

    transform: rotate(-6deg);
}


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

.site-footer {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    padding: 24px 30px;

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

    background: var(--cream);

    font-size: 0.85rem;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 900px) {

    body.admin-bar .site-header {
        top: 46px;
    }

    .site-header {
        padding: 0 20px;
    }

    .menu-toggle {
        display: block;

        cursor: pointer;
    }

    .main-nav {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;

        display: none;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        padding: 10px 20px 20px;

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

    .main-nav.is-open {
        display: flex;
    }

    .main-nav a {
        padding: 13px 0;

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

    .section {
        min-height: auto;

        padding: 105px 20px;
    }

    .section-heading,
    .rsvp-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .rsvp::after {
        display: none;
    }

    .rsvp-copy {
        position: static;
    }

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

    .info-card {
        min-height: auto;
    }

    .info-card:nth-child(2),
    .info-card:nth-child(3) {
        transform: none;
    }

    .lieu-shell {
        grid-template-columns: 1fr;

        gap: 45px;

        text-align: center;
    }

    .lieu-heading {
        padding-left: 0;
    }

    .lieu h2 {
        margin: 0 auto;
    }

    .venue-card {
        width: min(580px, 100%);
        margin: 0 auto 110px;
    }

    .event {
        grid-template-columns: 120px 1fr;

        gap: 30px;
    }

    .event-full {
        grid-template-columns: 1fr;

        padding-right: 130px;
    }
}


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

@media (max-width: 600px) {

    .hero {
        min-height: 100svh;

        padding: 100px 18px 42px;
    }

    .hero h1 {
        font-size: clamp(4rem, 21vw, 6rem);
    }

    .hero-date {
        margin-top: 29px;

        font-size: 0.98rem;
    }

    .hero-place {
        font-size: 1rem;
    }

    .hero-dog {
        width: 98px;

        margin-top: 18px;
    }

    .hero-sun {
        width: 88px;

        top: 10%;
        left: -14px;
    }

    .hero-disco {
        width: 74px;

        top: 11%;
        right: -8px;
    }

    .hero-olive {
        width: 88px;

        bottom: 1%;
        left: -20px;
    }

    .hero-coupes {
        width: 58px;

        bottom: 14%;
        left: 8%;
    }

    .hero-fan {
        width: 75px;

        right: -12px;
        bottom: 2%;
    }

    .hero-star {
        width: 26px;

        top: 29%;
        left: 2%;
    }

    .hero-note {
        width: 26px;

        top: 30%;
        right: 2%;
    }


    .section {
        padding: 92px 18px;
    }

    .section-heading {
        margin-bottom: 55px;
    }

    .weekend-intro {
        margin-bottom: 76px;
    }

    .weekend .display-title,
    .section-heading h2,
    .lieu h2,
    .rsvp h2 {
        font-size: clamp(3.55rem, 17vw, 5.35rem);
    }

    .weekend-disco {
        width: 72px;

        top: 2%;
        right: -10px;
    }

    .weekend-cocktail {
        width: 64px;

        top: 17%;
        left: -12px;
    }

    .weekend-branch {
        width: 70px;

        top: 19%;
        right: -15px;
    }

    .weekend-confetti-left,
    .weekend-confetti-right {
        display: none;
    }

    .weekend-programme {
        gap: 68px;
    }

    .day {
        padding: 26px 18px 10px;

        border-radius: 24px;
    }

    .day::after {
        inset: 7px -5px -7px 5px;

        border-radius: 24px;
    }

    .day-heading {
        align-items: flex-end;

        gap: 12px;
    }

    .day-heading p {
        font-size: 2rem;
    }

    .day-heading span {
        max-width: 120px;

        font-size: 0.82rem;
    }

    .event {
        grid-template-columns: 1fr;

        gap: 16px;

        padding: 28px 0;
    }

    .event time {
        font-size: 2.9rem;
    }

    .event h3 {
        font-size: 2.15rem;
    }

    .event-full {
        padding-right: 0;
    }

    .day-car {
        width: 105px;

        right: 0;
        top: -52px;
    }

    .day-table {
        width: 118px;

        right: 0;
        bottom: -42px;

        opacity: 0.36;
    }

    .day-note {
        width: 26px;

        left: -8px;
        top: 42%;
    }

    .day-sun {
        width: 78px;

        right: 0;
        bottom: -32px;

        opacity: 0.42;
    }

    .day-waves {
        width: 55px;

        right: 20%;
        top: -28px;
    }


    .lieu {
        padding-top: 135px;
        padding-bottom: 150px;
    }

    .lieu::before {
        inset: 54px 10px 55px;
    }

    .lieu-guirlande {
        width: 280px;

        top: 45px;
    }

    .lieu-cabanes {
        width: 220px;

        bottom: 16px;
    }

    .lieu-lavande {
        width: 70px;

        right: -15px;
        bottom: 13%;
    }

    .lieu-star {
        width: 32px;

        left: 3%;
        top: 39%;
    }

    .venue-card {
        padding: 30px 22px;

        margin-bottom: 90px;
    }


    .info-grid {
        gap: 25px;
    }

    .info-visual {
        height: 180px;
    }

    .info-visual img {
        max-height: 172px;
    }

    .infos-bow {
        width: 72px;

        right: -12px;
        bottom: 1%;
    }

    .infos-lemon {
        width: 45px;

        left: 2%;
        bottom: 3%;
    }


    .rsvp-panel {
        padding: 25px 20px;
    }

    .rsvp-heart {
        display: none;
    }

    .rsvp-coupes {
        width: 78px;

        left: -15px;
        bottom: 1%;
    }

    .rsvp-flower {
        width: 80px;

        right: -15px;
        top: 2%;
    }


    .contact-grid {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .contact h2 {
        font-size: clamp(3.7rem, 17vw, 5.5rem);
    }

    .contact-flower {
        width: 68px;

        left: -15px;
        bottom: 4%;
    }

    .contact-star {
        width: 30px;

        right: 7%;
        top: 8%;
    }


    .finale {
        min-height: 75vh;

        padding: 100px 20px;
    }

    .finale h2 {
        font-size: clamp(3.8rem, 18vw, 5.7rem);
    }

    .finale-speaker {
        width: 105px;

        left: -25px;
        bottom: 2%;
    }

    .finale-disco {
        width: 82px;

        right: -15px;
        top: 4%;
    }

    .finale-notes {
        width: 65px;

        right: 3%;
        bottom: 5%;
    }

    .finale-camera {
        width: 78px;

        left: -15px;
        top: 8%;
    }


    .site-footer {
        flex-direction: column;
        align-items: center;

        text-align: center;
    }
}


/* =========================================================
   V7 — LAYOUT / ASSET CORRECTIONS
   ========================================================= */

/* WEEK-END — three columns again on desktop */
@media (min-width: 901px) {
    .weekend-programme {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        align-items: start;
    }

    .day {
        min-width: 0;
        height: 100%;
        padding: 30px 24px 18px;
    }

    .day-heading {
        display: block;
        min-height: 118px;
        padding-bottom: 18px;
    }

    .day-heading p {
        font-size: clamp(1.85rem, 2.7vw, 2.75rem);
        line-height: 0.98;
    }

    .day-heading span {
        display: block;
        max-width: none;
        margin-top: 13px;
        font-size: 0.88rem;
        line-height: 1.35;
        text-align: left;
    }

    .day .event {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 23px 0;
    }

    .day .event time {
        font-size: clamp(1.8rem, 2.5vw, 2.45rem);
    }

    .day .event h3 {
        font-size: clamp(1.55rem, 2.15vw, 2.05rem);
        line-height: 1.08;
    }

    .day .event p {
        font-size: 0.92rem;
    }

    .day .event-full {
        padding-right: 0;
    }

    .day-table {
        width: clamp(115px, 11vw, 160px);
        right: -8px;
        bottom: -40px;
        opacity: 0.30;
    }

    .day-note {
        width: 30px;
        left: -12px;
    }

    .day-sun {
        width: clamp(78px, 8vw, 110px);
        right: 8px;
        bottom: -28px;
        opacity: 0.34;
    }

    .day-waves {
        width: 62px;
        right: 15%;
        top: -28px;
    }
}

/* LE LIEU — guirlande hanging from the upper-right corner */
.lieu-guirlande {
    z-index: 5;
    width: clamp(220px, 27vw, 370px);
    top: 28px;
    right: -24px;
    left: auto;
    transform: rotate(4deg);
    transform-origin: top right;
}

/* INFOS — RSVP styling */
.rsvp-panel {
    background: var(--cream);
}

/* CONTACT — one clean asset on each lower corner */
.contact-note {
    width: clamp(38px, 4.5vw, 62px);
    left: 7%;
    bottom: 10%;
    transform: rotate(-9deg);
}

.contact-heart {
    width: clamp(44px, 5vw, 68px);
    right: 7%;
    bottom: 10%;
}

/* Remove any residual styling attached to the old contact assets. */
.contact-flower,
.contact-star {
    display: none !important;
}

@media (max-width: 900px) {
    .weekend-programme {
        grid-template-columns: 1fr;
    }

    .lieu-guirlande {
        width: 245px;
        top: 24px;
        right: -32px;
        left: auto;
        transform: rotate(5deg);
    }
}

@media (max-width: 600px) {
    .lieu-guirlande {
        width: 190px;
        top: 24px;
        right: -34px;
    }

    .contact-note {
        width: 38px;
        left: 8%;
        bottom: 6%;
    }

    .contact-heart {
        width: 46px;
        right: 8%;
        bottom: 6%;
    }
}


/* =========================================================
   V8 — WEEK-END VISUAL TUNING
   ========================================================= */

/* Disperse the decorative assets more around the section */
.weekend-cocktail {
    width: clamp(92px, 10.5vw, 155px);
    top: 30%;
    left: 1.2%;
    transform: rotate(-9deg);
}

.weekend-disco {
    width: clamp(96px, 10.5vw, 150px);
    top: 8%;
    right: 2.8%;
}

.weekend-branch {
    width: clamp(100px, 11vw, 170px);
    top: 27%;
    right: 4%;
    transform: rotate(10deg);
}

.weekend-confetti-left {
    top: 10%;
    left: 17%;
}

.weekend-confetti-right {
    top: 12%;
    right: 19%;
}

/* Desktop layout refinements */
@media (min-width: 901px) {
    .weekend .section-shell {
        width: min(1220px, 100%);
    }

    .weekend-intro {
        margin: 0 auto 84px;
    }

    .weekend-programme {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 34px;
    }

    .day {
        overflow: visible;
    }

    /* Move the decorative assets outside the cards and make them visible */
    .day-table {
        width: clamp(128px, 12vw, 172px);
        right: -30px;
        bottom: -26px;
        opacity: 0.92;
    }

    .day-sun {
        width: clamp(88px, 8.5vw, 122px);
        right: -24px;
        bottom: -18px;
        opacity: 0.95;
    }

    .day-note {
        left: -16px;
        top: 39%;
    }

    .day-waves {
        right: 18px;
        top: -18px;
    }
}

/* Tablet / mobile keep the decoration but clearer */
@media (max-width: 900px) {
    .weekend-cocktail {
        top: 19%;
        left: -8px;
    }

    .weekend-disco {
        right: -8px;
        top: 3%;
    }

    .weekend-branch {
        top: 21%;
        right: -10px;
    }
}

@media (max-width: 600px) {
    .day-table {
        right: -6px;
        bottom: -22px;
        opacity: 0.72;
    }

    .day-sun {
        right: -4px;
        bottom: -24px;
        opacity: 0.72;
    }
}


/* =========================================================
   V9 — LIEU / GUIRLANDE POSITIONING
   ========================================================= */

/* Reposition the garland so it hangs from the upper-left area,
   with its upper-right extremity visually touching the thin blue outline. */
.lieu-guirlande {
    z-index: 5;
    width: clamp(270px, 31vw, 430px);
    top: 18px;
    left: 78px;
    right: auto;
    transform: rotate(-3deg);
    transform-origin: top right;
}

@media (max-width: 900px) {
    .lieu-guirlande {
        width: 235px;
        top: 18px;
        left: 26px;
        right: auto;
        transform: rotate(-4deg);
    }
}

@media (max-width: 600px) {
    .lieu-guirlande {
        width: 180px;
        top: 18px;
        left: 10px;
        transform: rotate(-5deg);
    }
}


/* =========================================================
   V10 — CONTACT KICKER TYPO
   ========================================================= */
.contact .section-kicker {
    margin: 0 0 18px;
    color: var(--orange);
    font-size: clamp(1.8rem, 3.4vw, 3.1rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.04em;
}

@media (max-width: 900px) {
    .contact .section-kicker {
        margin-bottom: 14px;
        font-size: clamp(1.55rem, 6vw, 2.35rem);
    }
}


/* =========================================================
   V11 — FINALE / CENTERED MUSIC ASSET
   ========================================================= */

/* Old lower-corner finale assets are no longer used. */
.finale-speaker,
.finale-notes {
    display: none !important;
}

/* Speaker + music notes are now one centered composition. */
.finale-music-cluster {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 24px;
    width: clamp(150px, 15vw, 215px);
    height: clamp(125px, 13vw, 185px);
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
}

.finale-music-speaker {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: auto;
    transform: translateX(-50%);
}

.finale-music-notes {
    position: absolute;
    z-index: 2;
    width: 45%;
    height: auto;
    top: 0;
    right: -8%;
    transform: rotate(8deg);
}

/* Keep top-corner decorations, but give the centered bottom asset clear air. */
.finale-camera {
    left: 12%;
    top: 10%;
}

.finale-disco {
    right: 5%;
    top: 7%;
}

@media (max-width: 600px) {
    .finale-music-cluster {
        bottom: 16px;
        width: 132px;
        height: 115px;
    }

    .finale-music-notes {
        width: 42%;
        right: -5%;
    }
}


/* =========================================================
   V13 — FINALE SIMPLIFIÉE
   ========================================================= */

.finale {
    min-height: 82vh;
    padding: 90px 30px 80px;
}

/* Hide all legacy decorative elements from previous versions. */
.finale > p,
.finale-camera,
.finale-music-cluster,
.finale-speaker,
.finale-notes,
.finale-disco {
    display: none !important;
}

/* Single centered disco ball, directly above the title. */
.finale-disco-inline {
    position: relative;
    display: block;
    width: clamp(105px, 10vw, 155px);
    height: auto;
    margin: 0 auto 34px;
    pointer-events: none;
    user-select: none;
}

.finale h2 {
    position: relative;
    z-index: 2;
}

@media (max-width: 600px) {
    .finale {
        min-height: 72vh;
        padding: 80px 20px 65px;
    }

    .finale-disco-inline {
        width: 92px;
        margin-bottom: 26px;
    }
}


/* =========================================================
   V14 — WEEK-END ASSET CLEANUP
   ========================================================= */

/* Remove the stray decorative assets that feel lost */
.day-note,
.day-waves {
    display: none !important;
}

/* Keep the table and sun, but clearly outside the columns */
@media (min-width: 901px) {
    .day-table {
        right: -58px !important;
        bottom: -34px !important;
        opacity: 0.96 !important;
        z-index: 4;
    }

    .day-sun {
        right: -42px !important;
        bottom: -30px !important;
        opacity: 0.96 !important;
        z-index: 4;
    }
}

@media (max-width: 900px) {
    .day-table {
        right: -18px !important;
        bottom: -22px !important;
        opacity: 0.82 !important;
    }

    .day-sun {
        right: -16px !important;
        bottom: -20px !important;
        opacity: 0.82 !important;
    }
}


/* =========================================================
   V15 — MOBILE-FIRST IPHONE PASS
   Desktop (> 768px) is intentionally untouched.
   ========================================================= */

@media (max-width: 768px) {

    html {
        -webkit-text-size-adjust: 100%;
        scroll-padding-top: 72px;
    }

    body {
        min-width: 320px;
    }

    section[id] {
        scroll-margin-top: 72px;
    }

    /* -----------------------------------------
       HEADER / NAV
       ----------------------------------------- */

    .site-header {
        min-height: 64px;
        padding:
            env(safe-area-inset-top, 0)
            18px
            0;
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
    }

    .site-logo {
        font-size: 1.05rem;
    }

    .menu-toggle {
        min-width: 52px;
        min-height: 44px;
        padding: 0;
        font-size: 0.95rem;
    }

    .main-nav {
        top: 64px;
        padding:
            8px
            max(20px, env(safe-area-inset-right))
            22px
            max(20px, env(safe-area-inset-left));
        background: rgba(245, 240, 223, 0.98);
    }

    .main-nav a {
        min-height: 50px;
        display: flex;
        align-items: center;
        font-size: 1.05rem;
    }

    /* -----------------------------------------
       GLOBAL MOBILE RHYTHM
       ----------------------------------------- */

    .section {
        min-height: auto;
        padding: 96px 18px;
    }

    .section-shell {
        width: 100%;
    }

    .section-kicker {
        margin-bottom: 20px;
        font-size: 0.95rem;
    }

    .section-heading {
        display: block;
        margin-bottom: 44px;
    }

    .section-heading h2,
    .lieu h2,
    .rsvp h2 {
        font-size: clamp(3.4rem, 16vw, 5rem);
        line-height: 0.88;
    }

    /* -----------------------------------------
       HERO
       ----------------------------------------- */

    .hero {
        min-height: 100svh;
        min-height: 100dvh;
        padding:
            94px
            18px
            max(34px, env(safe-area-inset-bottom));
    }

    .hero-content {
        width: 100%;
        max-width: 520px;
    }

    .hero h1 {
        font-size: clamp(4.15rem, 20vw, 6.25rem);
        line-height: 0.82;
    }

    .hero h1 span {
        margin: 0.05em 0;
        font-size: 0.62em;
    }

    .hero-date {
        max-width: 280px;
        margin-top: 28px;
        font-size: 1rem;
        line-height: 1.35;
        letter-spacing: 0.02em;
    }

    .hero-place {
        margin-top: 7px;
        font-size: 0.98rem;
    }

    .pill-button {
        min-height: 48px;
        margin-top: 26px;
        padding: 12px 23px;
        font-size: 0.94rem;
    }

    .hero-dog {
        width: 96px;
        margin-top: 18px;
    }

    /* Keep the same visual language as desktop, with fewer collisions */
    .hero-sun {
        width: 82px;
        top: 10%;
        left: -18px;
    }

    .hero-disco {
        width: 72px;
        top: 11%;
        right: -8px;
    }

    .hero-olive {
        width: 88px;
        left: -24px;
        bottom: 2%;
    }

    .hero-coupes {
        width: 56px;
        left: 7%;
        bottom: 16%;
    }

    .hero-fan {
        width: 72px;
        right: -13px;
        bottom: 3%;
    }

    .hero-star {
        width: 25px;
        top: 31%;
        left: 2%;
    }

    .hero-note {
        width: 25px;
        top: 32%;
        right: 3%;
    }

    /* -----------------------------------------
       WEEK-END / PROGRAMME
       ----------------------------------------- */

    .weekend {
        padding-top: 102px;
        padding-bottom: 112px;
    }

    .weekend::before {
        width: 54vw;
        height: 7px;
    }

    .weekend-intro {
        max-width: 100%;
        margin: 0 auto 68px;
        padding: 0 8px;
    }

    .weekend .display-title {
        max-width: 420px;
        font-size: clamp(3.55rem, 17vw, 5.15rem);
        line-height: 0.9;
    }

    .lead {
        max-width: 330px;
        margin-top: 28px;
        font-size: 1rem;
        line-height: 1.55;
    }

    /* Decorative assets remain peripheral */
    .weekend-disco {
        width: 66px;
        top: 2.2%;
        right: -8px;
    }

    .weekend-cocktail {
        width: 58px;
        top: 14%;
        left: -12px;
    }

    .weekend-branch {
        width: 65px;
        top: 16%;
        right: -14px;
    }

    .weekend-confetti-left,
    .weekend-confetti-right {
        display: none !important;
    }

    .weekend-programme {
        display: grid;
        grid-template-columns: 1fr;
        gap: 52px;
        width: 100%;
    }

    .day {
        width: calc(100% - 8px);
        margin: 0 auto;
        padding: 24px 18px 16px;
        overflow: visible;
        border-radius: 25px;
    }

    .day::after {
        inset: 6px -5px -6px 5px;
        border-radius: 25px;
    }

    .day-heading {
        display: block;
        min-height: 0;
        padding-bottom: 16px;
    }

    .day-heading p {
        font-size: clamp(2rem, 10vw, 2.8rem);
        line-height: 0.97;
    }

    .day-heading span {
        display: block;
        max-width: 100%;
        margin-top: 9px;
        font-size: 0.8rem;
        line-height: 1.35;
        text-align: left;
    }

    .event,
    .day .event {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 23px 0;
    }

    .event time,
    .day .event time {
        font-size: 2.35rem;
        line-height: 1;
    }

    .event h3,
    .day .event h3 {
        font-size: 1.85rem;
        line-height: 1.08;
    }

    .event p,
    .day .event p {
        margin-top: 9px;
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .event-full {
        padding-right: 0;
    }

    .text-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        margin-top: 8px;
    }

    /* Keep the two meaningful assets just outside the cards */
    .day-note,
    .day-waves,
    .day-car {
        display: none !important;
    }

    .day-table {
        width: 105px;
        right: -7px !important;
        bottom: -38px !important;
        opacity: 0.92 !important;
    }

    .day-sun {
        width: 76px;
        right: -4px !important;
        bottom: -30px !important;
        opacity: 0.94 !important;
    }

    /* -----------------------------------------
       LIEU
       ----------------------------------------- */

    .lieu {
        min-height: 760px;
        padding: 122px 18px 155px;
    }

    .lieu::before {
        inset: 48px 9px 48px;
        border-radius: 48% 52% 47% 53% / 20% 18% 82% 80%;
    }

    .lieu-shell {
        display: block;
        text-align: center;
    }

    .lieu-heading {
        padding: 0 12px;
    }

    .lieu h2 {
        max-width: 390px;
        margin: 0 auto;
    }

    /* Garland still "hooks" onto the upper-left edge */
    .lieu-guirlande {
        width: 190px;
        top: 17px;
        left: -12px;
        right: auto;
        transform: rotate(-4deg);
    }

    .venue-card {
        width: calc(100% - 36px);
        max-width: 370px;
        margin: 46px auto 126px;
        padding: 28px 20px;
        border-radius: 24px;
        text-align: left;
    }

    .venue-name {
        font-size: 2rem;
        line-height: 1.05;
    }

    .venue-address {
        margin-top: 12px;
        font-size: 0.9rem;
    }

    .venue-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        margin-top: 16px;
    }

    .lieu-cabanes {
        width: 205px;
        bottom: 17px;
    }

    .lieu-lavande {
        width: 62px;
        right: -12px;
        bottom: 12%;
    }

    .lieu-star {
        width: 28px;
        left: 3%;
        top: 37%;
    }

    /* -----------------------------------------
       INFOS PRATIQUES
       ----------------------------------------- */

    .infos {
        padding-bottom: 118px;
    }

    .infos .section-heading h2 em {
        display: inline;
    }

    .info-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .info-card {
        min-height: 0;
        width: 100%;
        padding: 18px 20px 28px;
        border-radius: 26px;
        transform: none !important;
    }

    .info-visual {
        height: 168px;
        margin: -4px -4px 8px;
    }

    .info-visual img {
        max-width: 92%;
        max-height: 158px;
    }

    .info-card > span {
        margin-top: 16px;
    }

    .info-card h3 {
        margin: 12px 0 16px;
        font-size: 2.15rem;
    }

    .info-card p {
        font-size: 0.95rem;
        line-height: 1.55;
    }

    .infos-bow {
        width: 60px;
        right: -10px;
        bottom: 1%;
    }

    .infos-lemon {
        width: 40px;
        left: 2%;
        bottom: 2.5%;
    }

    /* -----------------------------------------
       RSVP
       ----------------------------------------- */

    .rsvp {
        padding-top: 100px;
        padding-bottom: 116px;
    }

    .rsvp::after {
        display: none;
    }

    .rsvp-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .rsvp-copy {
        position: static;
        text-align: center;
    }

    .rsvp-copy p:last-child {
        max-width: 330px;
        margin: 26px auto 0;
        font-size: 1rem;
        line-height: 1.55;
    }

    .rsvp-panel {
        width: 100%;
        padding: 24px 18px;
        border-radius: 25px;
        background: var(--cream);
    }

    .rsvp-form {
        gap: 24px;
    }

    .rsvp-form textarea {
        min-height: 112px;
        padding: 15px;
        font-size: 16px; /* avoids iOS zoom */
    }

    .rsvp-form fieldset {
        gap: 10px;
        padding: 20px 0;
    }

    .radio-option {
        min-height: 50px;
        padding: 0 16px;
        border: 1px solid var(--blue);
        border-radius: 999px;
    }

    .radio-option input {
        width: 20px;
        height: 20px;
    }

    .submit-button {
        min-height: 50px;
        width: 100%;
        padding: 13px 20px;
    }

    .rsvp-heart {
        display: none !important;
    }

    .rsvp-coupes {
        width: 70px;
        left: -12px;
        bottom: 1.5%;
    }

    .rsvp-flower {
        width: 72px;
        right: -14px;
        top: 1.5%;
    }

    /* -----------------------------------------
       CONTACT / UNE QUESTION ?
       ----------------------------------------- */

    .contact {
        min-height: 650px;
        padding-top: 100px;
        padding-bottom: 105px;
    }

    .contact .section-kicker {
        margin-bottom: 13px;
        font-size: clamp(1.75rem, 8vw, 2.4rem);
    }

    .contact h2 {
        font-size: clamp(3.9rem, 18vw, 5.4rem);
        line-height: 0.9;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 340px;
        margin-top: 43px;
    }

    .contact-person {
        min-height: 74px;
        padding: 18px 20px;
    }

    .contact-person strong {
        font-size: 1.45rem;
    }

    .contact-note {
        width: 36px;
        left: 8%;
        bottom: 6%;
    }

    .contact-heart {
        width: 44px;
        right: 8%;
        bottom: 6%;
    }

    /* -----------------------------------------
       FINAL
       ----------------------------------------- */

    .finale {
        min-height: 72svh;
        min-height: 72dvh;
        padding:
            84px
            20px
            max(64px, env(safe-area-inset-bottom));
    }

    .finale-disco-inline {
        width: 88px;
        margin-bottom: 24px;
    }

    .finale h2 {
        max-width: 390px;
        font-size: clamp(3.55rem, 17vw, 5.25rem);
        line-height: 0.9;
    }

    .finale a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        margin-top: 34px;
    }

    /* -----------------------------------------
       FOOTER
       ----------------------------------------- */

    .site-footer {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding:
            22px
            18px
            max(22px, env(safe-area-inset-bottom));
        text-align: center;
        font-size: 0.78rem;
    }
}


/* Extra tuning for iPhone-sized widths */
@media (max-width: 430px) {

    .hero h1 {
        font-size: clamp(4rem, 21.5vw, 5.65rem);
    }

    .hero-date {
        max-width: 245px;
    }

    .weekend .display-title {
        font-size: clamp(3.35rem, 18vw, 4.85rem);
    }

    .day {
        width: calc(100% - 4px);
    }

    .day-heading p {
        font-size: clamp(1.95rem, 10.5vw, 2.55rem);
    }

    .event h3,
    .day .event h3 {
        font-size: 1.72rem;
    }

    .lieu {
        min-height: 735px;
    }

    .lieu h2 {
        font-size: clamp(3.25rem, 16.2vw, 4.45rem);
    }

    .lieu-guirlande {
        width: 170px;
        left: -18px;
    }

    .venue-card {
        width: calc(100% - 28px);
        margin-top: 40px;
    }

    .section-heading h2,
    .rsvp h2 {
        font-size: clamp(3.3rem, 16vw, 4.55rem);
    }

    .contact h2 {
        font-size: clamp(3.65rem, 18.5vw, 5rem);
    }

    .finale h2 {
        font-size: clamp(3.35rem, 17vw, 4.8rem);
    }
}