/* =========================================================
   JUSTINE & YVAN — STYLE GLOBAL
   04.09.2027
========================================================= */


/* =========================================================
   POLICE + COULEURS
========================================================= */

@font-face {

    font-family: "Acumin";

    src:
        local("Acumin Variable Concept"),
        local("AcuminVariableConcept");

}


:root {

    --green: #4f6647;

    --khaki: #a09f85;

    --yellow: #ffcd07;

    --cream: #faf9e5;

    --ink: #32412e;

}


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

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background: var(--cream);

    color: var(--green);

    font-family:
        "Acumin",
        Arial,
        sans-serif;

    overflow-x: hidden;

}


img {

    max-width: 100%;

    display: block;

}


a {

    color: inherit;

}


button,
input,
textarea,
select {

    font: inherit;

}


section {

    scroll-margin-top: 92px;

}


/* =========================================================
   NAVIGATION
========================================================= */

nav {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    padding: 14px 36px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background:
        rgba(
            250,
            249,
            229,
            0.96
        );

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    border-bottom:
        1px solid
        rgba(
            79,
            102,
            71,
            0.08
        );

}


.logo-link {

    display: flex;

    align-items: center;

    text-decoration: none;

}


.logo-img {

    width: 58px;

    height: auto;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;

}


.logo-link:hover
.logo-img {

    transform:
        rotate(-5deg)
        scale(1.05);

    opacity: 0.85;

}


.nav-links {

    display: flex;

    gap: 24px;

    align-items: center;

}


.nav-links a {

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    font-size: 12px;

    white-space: nowrap;

    transition:
        opacity 0.2s ease;

}


.nav-links a:hover,
.nav-links a[aria-current="page"] {

    opacity: 0.5;

}


/* =========================================================
   TITRES DE PAGES
========================================================= */

.page-hero {

    padding:

        160px
        8vw
        76px;

    text-align: center;

}


.page-eyebrow {

    font-size: 11px;

    letter-spacing: 4px;

    text-transform: uppercase;

    margin-bottom: 24px;

}


.page-title {

    margin: 0;

    font-size:
        clamp(
            48px,
            7vw,
            90px
        );

    line-height: 0.95;

    font-weight: 400;

    letter-spacing: -3px;

}


.page-intro {

    max-width: 680px;

    margin:
        30px
        auto
        0;

    font-size: 17px;

    line-height: 1.72;

}


/* =========================================================
   BOUTONS
========================================================= */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 46px;

    padding:
        0
        22px;

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

    border-radius:
        999px;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 1.3px;

    font-size: 11px;

    transition:

        transform 0.2s ease,

        opacity 0.2s ease,

        background 0.2s ease,

        color 0.2s ease;

}


.btn:hover {

    transform:
        translateY(-2px);

}


.btn-yellow {

    background:
        var(--yellow);

    border-color:
        var(--yellow);

    color:
        var(--green);

}


.btn-outline {

    background:
        transparent;

    color:
        var(--green);

}


.btn-cream {

    border-color:
        var(--cream);

    color:
        var(--cream);

}


.btn-cream:hover {

    background:
        var(--cream);

    color:
        var(--green);

}


/* =========================================================
   ACCUEIL — HERO
========================================================= */

.hero {

    min-height: 100vh;

    padding:

        130px
        6vw
        80px;

    display: grid;

    grid-template-columns:

        minmax(
            0,
            1fr
        )

        minmax(
            0,
            1fr
        );

    gap: 7vw;

    align-items: center;

}


.hero-visual {

    display: flex;

    justify-content: center;

}


.photo-wrapper {

    width: 82%;

    max-width: 580px;

}


.photo-wrapper img {

    width: 100%;

    height: auto;

}


.hero-content {

    max-width: 650px;

}


.names {

    margin: 0;

    font-size:

        clamp(
            55px,
            7vw,
            105px
        );

    line-height:
        0.88;

    font-weight:
        500;

    letter-spacing:
        -4px;

}


.date {

    margin-top:
        35px;

    font-size:

        clamp(
            28px,
            4vw,
            52px
        );

    letter-spacing:
        3px;

}


.intro {

    margin-top:
        42px;

    max-width:
        570px;

    font-size:
        18px;

    line-height:
        1.68;

}


/* =========================================================
   COMPTE À REBOURS
========================================================= */

.countdown {

    margin-top:
        50px;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

}


.countdown-item {

    min-width:
        74px;

    text-align:
        center;

}


.number {

    font-size:
        38px;

    line-height:
        1;

    font-weight:
        500;

}


.label {

    margin-top:
        9px;

    font-size:
        9px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.separator {

    margin-top:
        -14px;

    font-size:
        27px;

}


.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        38px;

}


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

.quick-facts {

    padding:

        48px
        8vw;

    background:
        var(--khaki);

    color:
        var(--cream);

}


.quick-facts-grid {

    max-width:
        1100px;

    margin:
        auto;

    display:
        grid;

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

    gap:
        1px;

    background:
        rgba(
            250,
            249,
            229,
            0.25
        );

}


.quick-fact {

    padding:

        28px
        20px;

    text-align:
        center;

    background:
        var(--khaki);

}


.quick-fact strong {

    display:
        block;

    color:
        var(--yellow);

    font-size:
        20px;

    margin-bottom:
        6px;

}


.quick-fact span {

    font-size:
        12px;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


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

.program-section {

    background:
        var(--green);

    color:
        var(--cream);

    padding:

        120px
        8vw;

}


.program-container {

    max-width:
        1100px;

    margin:
        auto;

}


.program-header {

    text-align:
        center;

    margin-bottom:
        70px;

}


.program-title {

    margin:
        0;

    font-size:

        clamp(
            44px,
            6vw,
            78px
        );

    font-weight:
        400;

}


.timeline {

    max-width:
        820px;

    margin:
        auto;

    position:
        relative;

}


.timeline::before {

    content:
        "";

    position:
        absolute;

    left:
        28px;

    top:
        18px;

    bottom:
        18px;

    width:
        2px;

    background:

        rgba(
            250,
            249,
            229,
            0.72
        );

}


.timeline-item {

    position:
        relative;

    padding:

        0
        0
        54px
        88px;

}


.timeline-dot {

    position:
        absolute;

    left:
        18px;

    top:
        5px;

    width:
        22px;

    height:
        22px;

    border-radius:
        50%;

    background:
        var(--yellow);

    border:

        3px solid
        var(--green);

}


.timeline-time {

    color:
        var(--yellow);

    font-size:
        13px;

    letter-spacing:
        2px;

    margin-bottom:
        8px;

}


.timeline-item h3 {

    margin:

        0
        0
        10px;

    font-size:
        30px;

    font-weight:
        400;

}


.timeline-item p {

    margin:
        0;

    line-height:
        1.72;

    opacity:
        0.92;

}


.travel-time {

    margin:

        -6px
        0
        48px
        88px;

    color:
        var(--yellow);

    font-size:
        12px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.maps-button {

    display:
        inline-flex;

    margin-top:
        16px;

    padding:

        11px
        18px;

    border:

        1px solid
        var(--cream);

    border-radius:
        999px;

    color:
        var(--cream);

    text-decoration:
        none;

    font-size:
        11px;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

}


.maps-button:hover {

    background:
        var(--cream);

    color:
        var(--green);

}


/* =========================================================
   TRAJET ÉGLISE → DOMAINE
========================================================= */

.route-section {

    padding:

        95px
        8vw;

    background:
        var(--cream);

}


.route-card {

    max-width:
        980px;

    margin:
        auto;

    background:
        var(--khaki);

    color:
        var(--cream);

    padding:
        46px;

    border-radius:
        2px;

}


.route-title {

    margin:

        0
        0
        36px;

    text-align:
        center;

    font-size:

        clamp(
            34px,
            5vw,
            58px
        );

    font-weight:
        400;

}


.route-grid {

    display:
        grid;

    grid-template-columns:

        1fr
        auto
        1fr;

    gap:
        28px;

    align-items:
        center;

}


.route-place {

    text-align:
        center;

}


.route-place strong {

    display:
        block;

    color:
        var(--yellow);

    font-size:
        19px;

    margin-bottom:
        10px;

}


.route-place p {

    margin:
        0;

    line-height:
        1.65;

}


.route-arrow {

    text-align:
        center;

    color:
        var(--yellow);

    font-size:
        13px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.route-actions {

    display:
        flex;

    justify-content:
        center;

    gap:
        12px;

    flex-wrap:
        wrap;

    margin-top:
        34px;

}


/* =========================================================
   OÙ DORMIR
========================================================= */

.lodging-grid {

    max-width:
        1200px;

    margin:

        0
        auto;

    padding:

        0
        8vw
        120px;

    display:
        grid;

    grid-template-columns:

        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        28px;

}


.lodging-card {

    display:
        block;

    text-decoration:
        none;

    background:
        var(--green);

    color:
        var(--cream);

    overflow:
        hidden;

    transition:

        transform 0.25s ease,

        box-shadow 0.25s ease;

}


.lodging-card:hover {

    transform:
        translateY(-6px);

    box-shadow:

        0
        14px
        35px

        rgba(
            79,
            102,
            71,
            0.18
        );

}


.lodging-image,
.lodging-image-placeholder {

    width:
        100%;

    aspect-ratio:
        4 / 3;

}


.lodging-image {

    object-fit:
        cover;

}


.lodging-image-placeholder {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--khaki);

    color:
        var(--cream);

    font-size:
        12px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.lodging-content {

    padding:
        24px;

}


.lodging-number {

    color:
        var(--yellow);

    font-size:
        10px;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

    margin-bottom:
        10px;

}


.lodging-content h2 {

    margin:

        0
        0
        16px;

    font-size:
        25px;

    font-weight:
        400;

}


.lodging-meta {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    font-size:
        14px;

    line-height:
        1.5;

}


.lodging-link {

    display:
        inline-block;

    margin-top:
        22px;

    color:
        var(--yellow);

    font-size:
        11px;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

}


/* =========================================================
   BLOCS DE NOTE
========================================================= */

.note {

    max-width:
        900px;

    margin:

        0
        auto
        100px;

    padding:
        26px;

    background:

        rgba(
            160,
            159,
            133,
            0.15
        );

    text-align:
        center;

    line-height:
        1.7;

}


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

.rsvp-form-section {

    padding:

        0
        8vw
        120px;

}


.rsvp-container {

    max-width:
        900px;

    margin:
        auto;

}


.rsvp-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        52px;

}


.form-group {

    padding-bottom:
        46px;

    border-bottom:

        1px solid

        rgba(
            79,
            102,
            71,
            0.22
        );

    transition:
        opacity 0.3s ease;

}


.question-number {

    width:
        42px;

    height:
        42px;

    margin-bottom:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--yellow);

    color:
        var(--green);

    font-size:
        12px;

}


.question {

    display:
        block;

    margin-bottom:
        18px;

    font-size:
        23px;

    line-height:
        1.35;

}


.helper-text {

    margin:

        -3px
        0
        24px;

    font-size:
        14px;

    line-height:
        1.6;

    color:

        rgba(
            79,
            102,
            71,
            0.72
        );

}


.text-input,
.textarea-input {

    width:
        100%;

    padding:

        14px
        4px;

    border:
        none;

    border-bottom:

        1px solid
        var(--green);

    border-radius:
        0;

    background:
        transparent;

    color:
        var(--green);

    font-size:
        17px;

    outline:
        none;

}


.text-input:focus,
.textarea-input:focus {

    border-bottom-width:
        2px;

}


.textarea-input {

    min-height:
        105px;

    resize:
        vertical;

}


.select-wrapper {

    position:
        relative;

    max-width:
        320px;

    margin-top:
        12px;

}


.select-input {

    width:
        100%;

    appearance:
        none;

    -webkit-appearance:
        none;

    padding:

        15px
        44px
        15px
        15px;

    border:

        1px solid
        var(--green);

    background:
        var(--cream);

    color:
        var(--green);

    outline:
        none;

}


.select-wrapper::after {

    content:
        "↓";

    position:
        absolute;

    right:
        17px;

    top:
        50%;

    transform:
        translateY(-50%);

    pointer-events:
        none;

}


.choice-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;

}


.choice {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    cursor:
        pointer;

    line-height:
        1.45;

}


.choice input {

    position:
        absolute;

    opacity:
        0;

}


.custom-radio {

    width:
        22px;

    height:
        22px;

    flex-shrink:
        0;

    border:

        1px solid
        var(--green);

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.choice input:checked
+
.custom-radio::after {

    content:
        "";

    width:
        12px;

    height:
        12px;

    border-radius:
        50%;

    background:
        var(--green);

}


.conditional-section {

    display:
        none;

    margin-top:
        28px;

    padding:
        26px;

    background:

        rgba(
            160,
            159,
            133,
            0.15
        );

}


.conditional-section.visible {

    display:
        block;

}


.rsvp-deadline {

    padding:

        38px
        28px;

    background:
        var(--green);

    color:
        var(--cream);

    text-align:
        center;

    line-height:
        1.7;

}


.rsvp-deadline strong {

    color:
        var(--yellow);

}


.submit-area {

    text-align:
        center;

}


.rsvp-submit {

    padding:

        18px
        38px;

    border:
        none;

    border-radius:
        999px;

    background:
        var(--yellow);

    color:
        var(--green);

    font-size:
        12px;

    letter-spacing:
        1.7px;

    text-transform:
        uppercase;

    cursor:
        pointer;

    transition:

        transform 0.2s ease,

        opacity 0.2s ease;

}


.rsvp-submit:hover {

    transform:
        translateY(-2px);

}


.rsvp-submit:disabled {

    opacity:
        0.6;

    cursor:
        wait;

}


.rsvp-success {

    display:
        none;

    margin-top:
        30px;

    padding:
        30px;

    background:

        rgba(
            79,
            102,
            71,
            0.1
        );

    line-height:
        1.65;

}


.rsvp-success.visible {

    display:
        block;

}


/* =========================================================
   PHOTOS
========================================================= */

.photos-content {

    padding:

        0
        8vw
        120px;

}


.photos-container {

    max-width:
        950px;

    margin:
        auto;

}


.photos-card {

    padding:

        68px
        48px;

    background:
        var(--green);

    color:
        var(--cream);

    text-align:
        center;

}


.photos-icon {

    font-size:
        42px;

    margin-bottom:
        24px;

}


.photos-card h2 {

    margin:
        0;

    font-size:

        clamp(
            34px,
            5vw,
            56px
        );

    font-weight:
        400;

}


.photos-card p {

    max-width:
        650px;

    margin:

        28px
        auto
        0;

    font-size:
        17px;

    line-height:
        1.72;

}


.photos-actions {

    margin-top:
        40px;

    display:
        flex;

    justify-content:
        center;

    gap:
        14px;

    flex-wrap:
        wrap;

}


.qr-wrap {

    margin:

        42px
        auto
        0;

    width:
        210px;

    height:
        210px;

    padding:
        14px;

    background:
        var(--cream);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--green);

    font-size:
        12px;

    line-height:
        1.4;

}


.qr-wrap img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}


/* =========================================================
   FAQ
========================================================= */

.faq-list {

    max-width:
        900px;

    margin:

        0
        auto;

    padding:

        0
        8vw
        120px;

}


.faq-item {

    border-bottom:

        1px solid

        rgba(
            79,
            102,
            71,
            0.22
        );

}


.faq-question {

    width:
        100%;

    padding:

        24px
        0;

    border:
        none;

    background:
        transparent;

    color:
        var(--green);

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    text-align:
        left;

    font-size:
        20px;

    cursor:
        pointer;

}


.faq-symbol {

    width:
        34px;

    height:
        34px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        var(--yellow);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        19px;

}


.faq-answer {

    display:
        none;

    padding:

        0
        52px
        24px
        0;

    font-size:
        16px;

    line-height:
        1.72;

    color:

        rgba(
            79,
            102,
            71,
            0.84
        );

}


.faq-item.open
.faq-answer {

    display:
        block;

}


/* =========================================================
   LISTE DE MARIAGE
========================================================= */

.gift-section {

    padding:

        0
        8vw
        120px;

}


.gift-card {

    max-width:
        900px;

    margin:
        auto;

    padding:

        64px
        48px;

    background:
        var(--green);

    color:
        var(--cream);

    text-align:
        center;

}


.gift-card h2 {

    margin:
        0;

    font-size:

        clamp(
            34px,
            5vw,
            58px
        );

    font-weight:
        400;

}


.gift-card p {

    max-width:
        680px;

    margin:

        28px
        auto
        0;

    line-height:
        1.75;

    font-size:
        17px;

}


.gift-actions {

    margin-top:
        36px;

    display:
        flex;

    justify-content:
        center;

    gap:
        12px;

    flex-wrap:
        wrap;

}


/* =========================================================
   PAGE 404
========================================================= */

.notfound {

    min-height:
        100vh;

    padding:

        120px
        24px
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

}


.notfound-inner {

    max-width:
        700px;

}


.notfound-logo {

    width:
        95px;

    margin:

        0
        auto
        24px;

}


.notfound h1 {

    margin:
        0;

    font-size:

        clamp(
            46px,
            8vw,
            90px
        );

    font-weight:
        400;

}


.notfound p {

    font-size:
        18px;

    line-height:
        1.7;

}


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

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

.site-footer {

    background: var(--green);

    color: var(--cream);

    padding: 45px 22px;

}


.footer-simple {

    width: 100%;

    max-width: 600px;

    margin: 0 auto;

    text-align: center;

}


.footer-heading {

    margin-bottom: 24px;

    color: var(--yellow);

    font-size: 11px;

    letter-spacing: 3px;

    text-transform: uppercase;

}


.footer-contacts {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

}


.footer-contacts a {

    color: var(--cream);

    text-decoration: none;

    font-size: 16px;

    line-height: 1.5;

    transition: opacity 0.2s ease;

}


.footer-contacts a:hover {

    opacity: 0.65;

}


.footer-contacts a span {

    margin-right: 8px;

    color: var(--yellow);

}


.footer-email {

    margin-top: 5px;

    overflow-wrap: anywhere;

    word-break: break-word;

}


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

@media (max-width: 700px) {

    .site-footer {

        padding:
            38px
            20px;

    }


    .footer-heading {

        margin-bottom: 18px;

    }


    .footer-contacts {

        width: 100%;

        gap: 0;

    }


    .footer-contacts a {

        display: flex;

        justify-content: center;

        align-items: center;

        flex-wrap: wrap;

        gap: 6px;

        width: 100%;

        min-height: 48px;

        padding: 9px 5px;

        font-size: 15px;

    }


    .footer-contacts a span {

        margin-right: 0;

    }


    .footer-email {

        font-size: 14px;

        overflow-wrap: anywhere;

        word-break: break-word;

    }

}
/* =========================================================
   TABLETTES
========================================================= */

@media
(
    max-width: 900px
) {

    .quick-facts-grid {

        grid-template-columns:

            repeat(
                2,
                1fr
            );

    }


    .lodging-grid {

        grid-template-columns:

            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .route-grid {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


}


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

@media
(
    max-width: 700px
) {


    /* NAVIGATION */

    nav {

        padding:

            12px
            16px;

    }


    .logo-img {

        width:
            46px;

    }


    .nav-links {

        gap:
            11px;

        overflow-x:
            auto;

        max-width:

            calc(
                100vw
                -
                78px
            );

        scrollbar-width:
            none;

    }


    .nav-links::-webkit-scrollbar {

        display:
            none;

    }


    .nav-links a {

        font-size:
            9px;

    }


    /* ACCUEIL */

    .hero {

        min-height:
            auto;

        padding:

            105px
            22px
            72px;

        display:
            flex;

        flex-direction:
            column;

        gap:
            48px;

    }


    .photo-wrapper {

        width:
            100%;

    }


    .hero-content {

        text-align:
            center;

    }


    .names {

        font-size:
            62px;

        letter-spacing:
            -3px;

    }


    .date {

        font-size:
            29px;

    }


    .intro {

        font-size:
            16px;

    }


    .countdown {

        justify-content:
            center;

        gap:
            6px;

    }


    .countdown-item {

        min-width:
            56px;

    }


    .number {

        font-size:
            26px;

    }


    .label {

        font-size:
            7px;

        letter-spacing:
            1px;

    }


    .separator {

        font-size:
            18px;

    }


    .hero-actions {

        justify-content:
            center;

    }


    /* INFOS */

    .quick-facts {

        padding:

            30px
            20px;

    }


    .quick-facts-grid {

        grid-template-columns:

            1fr
            1fr;

    }


    .quick-fact {

        padding:

            22px
            12px;

    }


    /* PROGRAMME */

    .program-section {

        padding:

            90px
            22px;

    }


    .timeline-item {

        padding-left:
            68px;

    }


    .travel-time {

        margin-left:
            68px;

    }


    /* TRAJET */

    .route-section {

        padding:

            70px
            22px;

    }


    .route-card {

        padding:

            32px
            22px;

    }


    /* PAGES */

    .page-hero {

        padding:

            125px
            22px
            58px;

    }


    .page-title {

        font-size:
            50px;

        letter-spacing:
            -2px;

    }


    /* HÉBERGEMENTS */

    .lodging-grid {

        grid-template-columns:
            1fr;

        padding:

            0
            22px
            90px;

    }


    /* RSVP */

    .rsvp-form-section {

        padding:

            0
            22px
            90px;

    }


    .question {

        font-size:
            20px;

    }


    /* PHOTOS */

    .photos-content {

        padding:

            0
            22px
            90px;

    }


    .photos-card {

        padding:

            48px
            22px;

    }


    .photos-actions {

        flex-direction:
            column;

    }


    .photos-actions
    .btn {

        width:
            100%;

    }


    /* FAQ */

    .faq-list {

        padding:

            0
            22px
            90px;

    }


    .faq-question {

        font-size:
            18px;

    }


    .faq-answer {

        padding-right:
            0;

    }


    /* LISTE DE MARIAGE */

    .gift-section {

        padding:

            0
            22px
            90px;

    }


    .gift-card {

        padding:

            48px
            22px;

    }


    .gift-actions {

        flex-direction:
            column;

    }


    .gift-actions
    .btn {

        width:
            100%;

    }


    /* FOOTER */

    footer {

        padding:

            52px
            22px
            25px;

    }


    .footer-main {

        grid-template-columns:
            1fr;

        gap:
            40px;

    }


    .footer-bottom {

        flex-direction:
            column;

    }


}

/* =========================================================
   PAGE PHOTOS — WEDSHOOTS
========================================================= */

.photos-hero {
    padding-bottom: 60px;
}


/* =========================================================
   CARTE WEDSHOOTS
========================================================= */

.wedshoots-section {
    padding: 0 8vw 110px;
}

.wedshoots-card {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    padding: 65px 55px;
    background: var(--green);
    color: var(--cream);
    text-align: center;
}

.wedshoots-small-title {
    margin-bottom: 20px;
    color: var(--yellow);
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.wedshoots-card h2 {
    margin: 0;
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 400;
    line-height: 1.05;
}

.wedshoots-intro {
    max-width: 610px;
    margin: 28px auto 0;
    font-size: 17px;
    line-height: 1.7;
}


/* BOUTON */

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

    min-height: 52px;

    margin-top: 35px;
    padding: 0 30px;

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

    border-radius: 999px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 500;

    letter-spacing: 1.5px;
    text-transform: uppercase;

    transition:
        transform .2s ease,
        opacity .2s ease;
}

.wedshoots-button:hover {
    transform: translateY(-2px);
    opacity: .9;
}

.wedshoots-mobile-note {
    margin: 15px auto 0;
    font-size: 12px;
    line-height: 1.5;
    opacity: .75;
}


/* CODE ALBUM */

.album-code-box {
    max-width: 390px;
    margin: 38px auto 0;
    padding: 22px;

    border:
        1px solid
        rgba(250, 249, 229, .35);
}

.album-code-box span {
    display: block;

    margin-bottom: 8px;

    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;

    opacity: .75;
}

.album-code-box strong {
    display: block;

    color: var(--yellow);

    font-size: clamp(22px, 4vw, 30px);
    font-weight: 400;

    letter-spacing: 2px;

    overflow-wrap: anywhere;
}


/* QR CODE */

.wedshoots-qr {
    margin-top: 42px;
}

.qr-title {
    margin-bottom: 15px;

    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.qr-box {
    width: 180px;
    height: 180px;

    margin: 0 auto;

    padding: 10px;

    background: white;
}

.qr-box img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.wedshoots-qr p {
    margin: 13px 0 0;

    font-size: 11px;
    opacity: .65;
}

.wedshoots-message {
    margin-top: 42px;

    color: var(--yellow);

    font-size: 18px;
    line-height: 1.6;
}


/* =========================================================
   GALERIE
========================================================= */

.memories-section {
    padding: 95px 6vw 120px;

    background: var(--cream);
}

.memories-heading {
    margin-bottom: 55px;

    text-align: center;
}

.memories-heading h2 {
    margin: 0;

    color: var(--green);

    font-size: clamp(40px, 6vw, 68px);
    font-weight: 400;

    line-height: 1;
}


/* GALERIE TYPE ALBUM */

.memory-gallery {
    width: 100%;
    max-width: 1150px;

    margin: 0 auto;

    display: grid;

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

    grid-auto-rows: 70px;

    gap: 18px;
}

.memory-photo {
    margin: 0;

    overflow: hidden;

    background: var(--khaki);
}

.memory-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;
}

.memory-photo:hover img {
    transform: scale(1.025);
}


/* DISPOSITION ASYMÉTRIQUE */

.memory-photo-1 {
    grid-column: 1 / 5;
    grid-row: 1 / 7;
}

.memory-photo-2 {
    grid-column: 5 / 9;
    grid-row: 1 / 5;
}

.memory-photo-3 {
    grid-column: 9 / 13;
    grid-row: 1 / 7;
}

.memory-photo-4 {
    grid-column: 5 / 9;
    grid-row: 5 / 10;
}

.memory-photo-5 {
    grid-column: 1 / 5;
    grid-row: 7 / 12;
}


/* =========================================================
   PHOTOS — TABLETTE
========================================================= */

@media (max-width: 900px) {

    .memory-gallery {
        grid-auto-rows: 60px;
    }

}


/* =========================================================
   PHOTOS — MOBILE
========================================================= */

@media (max-width: 700px) {

    .photos-hero {
        padding-bottom: 45px;
    }


    .wedshoots-section {
        padding:
            0
            20px
            75px;
    }


    .wedshoots-card {
        padding:
            45px
            20px;
    }


    .wedshoots-card h2 {
        font-size: 37px;
    }


    .wedshoots-intro {
        font-size: 15px;
    }


    .wedshoots-button {
        width: 100%;

        min-height: 54px;

        padding:
            0
            18px;

        font-size: 11px;
    }


    .album-code-box {
        width: 100%;

        margin-top: 30px;

        padding: 18px 10px;
    }


    .qr-box {
        width: 160px;
        height: 160px;
    }


    .memories-section {
        padding:
            70px
            16px
            80px;
    }


    .memories-heading {
        margin-bottom: 35px;
    }


    /*
       Sur téléphone on abandonne la grille
       complexe et on crée un album simple
       en 2 colonnes.
    */

    .memory-gallery {
        display: grid;

        grid-template-columns:
            1fr
            1fr;

        grid-auto-rows: auto;

        gap: 8px;
    }


    .memory-photo-1,
    .memory-photo-2,
    .memory-photo-3,
    .memory-photo-4,
    .memory-photo-5 {

        grid-column: auto;
        grid-row: auto;

        aspect-ratio: 3 / 4;

    }


    /*
       La deuxième photo est horizontale,
       donc elle prend toute la largeur.
    */

    .memory-photo-2 {

        grid-column: 1 / -1;

        aspect-ratio: 16 / 9;

    }


    /*
       La dernière photo prend également
       toute la largeur pour terminer l'album.
    */

    .memory-photo-5 {

        grid-column: 1 / -1;

        aspect-ratio: 4 / 5;

        max-height: 520px;

    }

}
/* =========================================================
   NOUVELLE PAGE PHOTOS
   Cette partie prend la priorité sur les anciens styles
========================================================= */

.photos-hero {
    padding-bottom: 55px !important;
}


/* BLOC PRINCIPAL */

.wedshoots-section {
    padding: 0 22px 100px !important;
}

.wedshoots-card {
    width: min(820px, 100%) !important;
    margin: 0 auto !important;
    padding: 65px 55px !important;

    background: #4f6647 !important;
    color: #faf9e5 !important;

    text-align: center !important;
}

.wedshoots-small-title {
    margin-bottom: 20px !important;

    color: #ffcd07 !important;

    font-size: 11px !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
}

.wedshoots-card h2 {
    margin: 0 !important;

    color: #faf9e5 !important;

    font-size: clamp(38px, 5vw, 58px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
}

.wedshoots-intro {
    max-width: 610px !important;

    margin: 28px auto 0 !important;

    color: #faf9e5 !important;

    font-size: 17px !important;
    line-height: 1.7 !important;
}


/* =========================================================
   BOUTON PRINCIPAL
========================================================= */

.wedshoots-button {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin-top: 34px !important;

    min-height: 54px !important;

    padding: 0 30px !important;

    background: #ffcd07 !important;
    color: #4f6647 !important;

    border-radius: 999px !important;

    text-decoration: none !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

.wedshoots-button:hover {
    transform: translateY(-2px);
}


/* PETITE PHRASE */

.wedshoots-mobile-note {
    max-width: 500px !important;

    margin: 16px auto 0 !important;

    color: #faf9e5 !important;

    font-size: 12px !important;
    line-height: 1.5 !important;

    opacity: .75 !important;
}


/* =========================================================
   CODE ALBUM
========================================================= */

.album-code-box {
    width: min(360px, 100%) !important;

    margin: 38px auto 0 !important;

    padding: 22px 15px !important;

    border: 1px solid rgba(250,249,229,.35) !important;
}

.album-code-box span {
    display: block !important;

    margin-bottom: 8px !important;

    color: #faf9e5 !important;

    font-size: 10px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.album-code-box strong {
    display: block !important;

    color: #ffcd07 !important;

    font-size: 25px !important;
    font-weight: 500 !important;

    letter-spacing: 2px !important;
}


/* =========================================================
   QR CODE — SURTOUT PAS GÉANT
========================================================= */

.wedshoots-qr {
    margin-top: 40px !important;

    text-align: center !important;
}

.qr-title {
    margin-bottom: 15px !important;

    color: #faf9e5 !important;

    font-size: 10px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.qr-box {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 150px !important;
    height: 150px !important;

    margin: 0 auto !important;

    padding: 9px !important;

    background: #faf9e5 !important;
}

.qr-box img {
    display: block !important;

    width: 132px !important;
    height: 132px !important;

    max-width: 132px !important;

    object-fit: contain !important;
}

.wedshoots-qr p {
    margin: 12px auto 0 !important;

    color: #faf9e5 !important;

    font-size: 11px !important;

    opacity: .65 !important;
}

.wedshoots-message {
    margin-top: 38px !important;

    color: #ffcd07 !important;

    font-size: 18px !important;
    line-height: 1.6 !important;
}


/* =========================================================
   ALBUM PHOTOS
========================================================= */

.memories-section {
    padding: 95px 5vw 110px !important;

    background: #faf9e5 !important;
}

.memories-heading {
    margin-bottom: 48px !important;

    text-align: center !important;
}

.memories-heading h2 {
    margin: 0 !important;

    color: #4f6647 !important;

    font-size: clamp(40px, 6vw, 68px) !important;
    font-weight: 400 !important;
}


/* GRILLE */

.memory-gallery {
    width: min(1100px, 100%) !important;

    margin: 0 auto !important;

    display: grid !important;

    grid-template-columns:
        repeat(12, 1fr) !important;

    grid-auto-rows: 65px !important;

    gap: 12px !important;
}

.memory-photo {
    margin: 0 !important;

    overflow: hidden !important;

    background: #a09f85 !important;
}

.memory-photo img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
}


/* MOSAÏQUE */

.memory-photo-1 {
    grid-column: 1 / 5 !important;
    grid-row: 1 / 7 !important;
}

.memory-photo-2 {
    grid-column: 5 / 9 !important;
    grid-row: 1 / 5 !important;
}

.memory-photo-3 {
    grid-column: 9 / 13 !important;
    grid-row: 1 / 7 !important;
}

.memory-photo-4 {
    grid-column: 5 / 9 !important;
    grid-row: 5 / 10 !important;
}

.memory-photo-5 {
    grid-column: 1 / 5 !important;
    grid-row: 7 / 12 !important;
}


/* =========================================================
   VERSION TÉLÉPHONE
========================================================= */

@media (max-width: 700px) {

    .photos-hero {
        padding-bottom: 40px !important;
    }


    .wedshoots-section {
        padding:
            0
            16px
            70px !important;
    }


    .wedshoots-card {
        padding:
            42px
            20px !important;
    }


    .wedshoots-small-title {
        font-size: 9px !important;

        letter-spacing: 3px !important;
    }


    .wedshoots-card h2 {
        font-size: 36px !important;
    }


    .wedshoots-intro {
        font-size: 15px !important;
    }


    /* Gros bouton facile à toucher */

    .wedshoots-button {
        width: 100% !important;

        min-height: 56px !important;

        margin-top: 30px !important;

        padding:
            0
            15px !important;

        font-size: 11px !important;
    }


    .album-code-box {
        margin-top: 30px !important;
    }


    /*
       QR volontairement plus petit sur téléphone :
       le bouton est le moyen principal.
    */

    .qr-box {
        width: 125px !important;
        height: 125px !important;
    }


    .qr-box img {
        width: 107px !important;
        height: 107px !important;

        max-width: 107px !important;
    }


    .wedshoots-message {
        font-size: 16px !important;
    }


    /* ALBUM */

    .memories-section {
        padding:
            65px
            10px
            75px !important;
    }


    .memories-heading {
        margin-bottom: 32px !important;
    }


    .memory-gallery {
        display: grid !important;

        grid-template-columns:
            1fr
            1fr !important;

        grid-auto-rows: auto !important;

        gap: 7px !important;
    }


    .memory-photo-1,
    .memory-photo-2,
    .memory-photo-3,
    .memory-photo-4,
    .memory-photo-5 {

        grid-column: auto !important;
        grid-row: auto !important;

        aspect-ratio: 3 / 4 !important;

    }


    /* photo horizontale */

    .memory-photo-2 {

        grid-column: 1 / -1 !important;

        aspect-ratio: 16 / 9 !important;

    }


    /* dernière photo large */

    .memory-photo-5 {

        grid-column: 1 / -1 !important;

        aspect-ratio: 4 / 5 !important;

    }

}


@media (max-width: 700px) {

    .wedshoots-card {
        background: #4f6647 !important;
        border: none !important;
    }

    .wedshoots-button {
        background: #ffcd07 !important;
        color: #4f6647 !important;
    }

}