/* ==========================================================================
   CONTACT — PAGE
   ========================================================================== */

:root {
    --contact-bg: #070707;
    --contact-panel: rgba(14, 14, 14, .84);
    --contact-panel-soft: rgba(20, 20, 20, .68);

    --contact-border: rgba(255, 255, 255, .14);
    --contact-border-strong: rgba(255, 255, 255, .28);

    --contact-silver: #d8d8d8;
    --contact-silver-muted: #a5a5a5;

    --contact-burgundy: #701719;
    --contact-burgundy-light: #9b2629;

    --contact-gold: #c5a77b;

    /* sécurité sous le menu fixe */
    --contact-menu-offset: 110px;
}


/* ==========================================================================
   PAGE / FOND GÉNÉRAL
   ========================================================================== */

.contact-page {
    position: relative;

    min-height: 100vh;

    color: #f5f5f2;
    background: #070707;

    isolation: isolate;
}


/*
   Image attendue :
   /assets/images/contact/contact-bg.jpg
*/
.contact-page::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -3;

    background-image:
        url("../images/contact/contact-bg.jpg");

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    pointer-events: none;
}


/*
   Voile global léger.
   L'image reste visible mais le texte demeure lisible.
*/
.contact-page::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .22),
            rgba(0, 0, 0, .38)
        );

    pointer-events: none;
}


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

.contact-hero {
    position: relative;

    min-height: 62vh;

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

    padding:
        calc(var(--contact-menu-offset) + 55px)
        0
        85px;

    overflow: hidden;
    isolation: isolate;

    text-align: center;

    background: transparent;
}


.contact-hero__background {
    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        radial-gradient(
            ellipse at 50% 42%,
            rgba(112, 23, 25, .13),
            transparent 45%
        );

    pointer-events: none;
}


.contact-hero__shade {
    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .14) 0%,
            rgba(0, 0, 0, .20) 50%,
            rgba(0, 0, 0, .62) 100%
        ),
        radial-gradient(
            ellipse at center,
            transparent 20%,
            rgba(0, 0, 0, .18) 72%,
            rgba(0, 0, 0, .42) 100%
        );

    pointer-events: none;
}


.contact-hero__content {
    position: relative;
    z-index: 2;

    width: min(900px, 100%);

    margin-inline: auto;
}


.contact-hero .eyebrow {
    margin-bottom: 18px;

    color: var(--contact-burgundy-light);

    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, .9);
}


.contact-hero h1 {
    margin: 0;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(3.4rem, 7vw, 6.3rem);
    font-weight: 500;
    line-height: .95;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, .82),
        0 1px 3px #000;
}


.contact-hero__intro {
    max-width: 720px;

    margin:
        28px
        auto
        0;

    color: #dedbd6;

    font-size: 1.08rem;
    line-height: 1.8;

    text-shadow:
        0 2px 7px rgba(0, 0, 0, .92);
}


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

.contact-section {
    position: relative;

    padding:
        110px
        0
        125px;

    background:
        linear-gradient(
            rgba(5, 5, 5, .72),
            rgba(5, 5, 5, .82)
        );

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


/* séparation argentée */
.contact-section::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: min(900px, 72%);
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(220, 220, 220, .22),
            rgba(255, 255, 255, .62),
            rgba(220, 220, 220, .22),
            transparent
        );
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

.contact-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .78fr)
        minmax(0, 1.22fr);

    gap: clamp(55px, 7vw, 100px);

    align-items: start;
}


/* ==========================================================================
   TEXTE GAUCHE
   ========================================================================== */

.contact-intro {
    position: sticky;

    top: calc(var(--contact-menu-offset) + 45px);

    padding-top: 15px;
}


.contact-intro .eyebrow {
    margin:
        0
        0
        15px;

    color: var(--contact-burgundy-light);

    font-size: .74rem;
    font-weight: 800;

    letter-spacing: .18em;
    text-transform: uppercase;
}


.contact-intro h2 {
    margin:
        0
        0
        28px;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2.6rem, 4.5vw, 4.5rem);
    font-weight: 500;

    line-height: 1.03;

    text-shadow:
        0 3px 15px rgba(0, 0, 0, .70);
}


.contact-intro p:not(.eyebrow) {
    max-width: 520px;

    margin:
        0
        0
        20px;

    color: #c1beb9;

    line-height: 1.85;
}


/* petit trait décoratif */
.contact-intro::after {
    content: "";

    display: block;

    width: 150px;
    height: 1px;

    margin-top: 38px;

    background:
        linear-gradient(
            90deg,
            rgba(216, 216, 216, .65),
            transparent
        );
}


/* ==========================================================================
   CONTENEUR DU FORMULAIRE
   ========================================================================== */

.contact-form-wrap {
    position: relative;

    padding:
        clamp(32px, 5vw, 58px);

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

    background:
        linear-gradient(
            145deg,
            rgba(20, 20, 20, .88),
            rgba(6, 6, 6, .92)
        );

    box-shadow:
        0 28px 75px rgba(0, 0, 0, .36);

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


/* double filet intérieur très discret */
.contact-form-wrap::before {
    content: "";

    position: absolute;
    inset: 6px;

    border:
        1px solid
        rgba(255, 255, 255, .045);

    pointer-events: none;
}


/* ==========================================================================
   FORMULAIRE
   ========================================================================== */

.contact-form {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap:
        25px
        22px;
}


/* ==========================================================================
   CHAMPS
   ========================================================================== */

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

    gap: 9px;
}


.contact-field--full {
    grid-column: 1 / -1;
}


.contact-field label {
    color: #ddd9d3;

    font-size: .75rem;
    font-weight: 700;

    letter-spacing: .10em;
    text-transform: uppercase;
}


.contact-field label span {
    color: var(--contact-burgundy-light);
}


.contact-field input,
.contact-field textarea {
    width: 100%;

    border:
        1px solid
        rgba(255, 255, 255, .17);

    border-radius: 0;

    outline: none;

    background:
        rgba(0, 0, 0, .40);

    color: #f5f3ef;

    font-family: inherit;
    font-size: 1rem;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.contact-field input {
    min-height: 52px;

    padding:
        0
        17px;
}


.contact-field textarea {
    min-height: 220px;

    padding:
        17px;

    resize: vertical;

    line-height: 1.7;
}


/* ==========================================================================
   FOCUS
   ========================================================================== */

.contact-field input:focus,
.contact-field textarea:focus {
    border-color:
        rgba(216, 216, 216, .65);

    background:
        rgba(8, 8, 8, .72);

    box-shadow:
        0 0 0 3px
        rgba(255, 255, 255, .035);
}


/* ==========================================================================
   AUTOFILL NAVIGATEUR
   ========================================================================== */

.contact-field input:-webkit-autofill,
.contact-field input:-webkit-autofill:hover,
.contact-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f5f3ef;

    box-shadow:
        0 0 0 1000px
        #0b0b0b
        inset;

    transition:
        background-color 9999s ease-in-out 0s;
}


/* ==========================================================================
   PIED DU FORMULAIRE
   ========================================================================== */

.contact-form__footer {
    grid-column: 1 / -1;

    display: flex;

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

    gap: 25px;

    margin-top: 8px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(255, 255, 255, .09);
}


.contact-form__footer p {
    margin: 0;

    color: #858585;

    font-size: .78rem;
    line-height: 1.5;
}


.contact-form__footer p span {
    color: var(--contact-burgundy-light);
}


/* ==========================================================================
   BOUTON ENVOYER
   ========================================================================== */

.contact-form__footer .button {
    position: relative;

    min-width: 205px;

    cursor: pointer;

    border:
        1px solid
        rgba(216, 216, 216, .46);

    background:
        linear-gradient(
            145deg,
            rgba(112, 23, 25, .95),
            rgba(63, 12, 14, .95)
        );

    color: #fff;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, .28);

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.contact-form__footer .button:hover {
    transform: translateY(-3px);

    border-color:
        rgba(235, 235, 235, .75);

    background:
        linear-gradient(
            145deg,
            rgba(147, 34, 37, .98),
            rgba(82, 15, 17, .98)
        );

    box-shadow:
        0 17px 38px
        rgba(0, 0, 0, .40);
}


/* ==========================================================================
   MESSAGES SUCCÈS / ERREUR
   ========================================================================== */

.contact-alert {
    position: relative;
    z-index: 2;

    margin-bottom: 30px;

    padding:
        22px
        25px;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    color: #d8d5d0;

    line-height: 1.65;
}


.contact-alert strong {
    display: block;

    margin-bottom: 7px;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.15rem;
}


.contact-alert p {
    margin: 0;
}


.contact-alert ul {
    margin:
        10px
        0
        0;

    padding-left: 20px;
}


.contact-alert--success {
    border-left:
        3px solid
        rgba(185, 205, 173, .85);

    background:
        rgba(70, 95, 61, .16);
}


.contact-alert--error {
    border-left:
        3px solid
        var(--contact-burgundy-light);

    background:
        rgba(112, 23, 25, .16);
}


/* ==========================================================================
   HONEYPOT ANTI-SPAM
   ========================================================================== */

.contact-honeypot {
    position: absolute !important;

    left: -10000px !important;
    top: auto !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


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

.page-contact .site-footer,
.page-contact footer {
    position: relative;

    z-index: 10;

    display: block;

    width: 100%;

    background: #050505;
}


/* ==========================================================================
   RESPONSIVE — TABLETTE
   ========================================================================== */

@media (max-width: 950px) {

    :root {
        --contact-menu-offset: 90px;
    }


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

        gap: 50px;
    }


    .contact-intro {
        position: static;

        max-width: 750px;

        margin-inline: auto;

        text-align: center;
    }


    .contact-intro p:not(.eyebrow) {
        max-width: 680px;

        margin-left: auto;
        margin-right: auto;
    }


    .contact-intro::after {
        margin:
            38px
            auto
            0;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(216, 216, 216, .65),
                transparent
            );
    }


    .contact-form-wrap {
        max-width: 800px;

        width: 100%;

        margin-inline: auto;
    }

}


/* ==========================================================================
   RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    :root {
        --contact-menu-offset: 78px;
    }


    /*
       Sur mobile, évite certains problèmes de background fixed.
    */
    .contact-page::before,
    .contact-page::after {
        position: absolute;
    }


    .contact-page::before {
        background-position:
            center
            top;
    }


    .contact-hero {
        min-height: auto;

        padding:
            calc(
                var(--contact-menu-offset)
                + 45px
            )
            0
            70px;
    }


    .contact-hero h1 {
        font-size:
            clamp(2.8rem, 14vw, 4.2rem);
    }


    .contact-hero__intro {
        font-size: .98rem;
    }


    .contact-section {
        padding:
            80px
            0
            90px;
    }


    .contact-layout {
        gap: 42px;
    }


    .contact-intro h2 {
        font-size:
            clamp(2.4rem, 11vw, 3.5rem);
    }


    .contact-form-wrap {
        padding:
            32px
            24px;
    }


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

        gap: 22px;
    }


    .contact-field,
    .contact-field--full {
        grid-column: 1;
    }


    .contact-field textarea {
        min-height: 200px;
    }


    .contact-form__footer {
        flex-direction: column;

        align-items: stretch;

        text-align: center;
    }


    .contact-form__footer .button {
        width: 100%;
    }

}


/* ==========================================================================
   TRÈS PETITS ÉCRANS
   ========================================================================== */

@media (max-width: 420px) {

    .contact-form-wrap {
        padding:
            28px
            18px;
    }


    .contact-field input {
        padding:
            0
            14px;
    }


    .contact-field textarea {
        padding:
            14px;
    }

}