/* =========================================================
   CONTACT — STRUCTURE
========================================================= */

.contact-main {
    --contact-padding-y: var(--page-padding-y);
    /* Fonds pleine largeur, contenu aligné sur le conteneur global du site. */
    --contact-outer-gutter: max(
        var(--gutter),
        calc((100vw - var(--container-wide)) / 2)
    );

    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}

.contact-main__heading {
    margin-bottom: clamp(24px, 2.5vw, 38px);
}

.contact-main__heading > .section-meta,
.contact-form__header {
    margin: 0;
}

.contact-main__heading .eyebrow,
.contact-form__header .eyebrow {
    margin-bottom: var(--section-label-title-gap);
}

.contact-main__heading .label,
.contact-form__header .label {
    opacity: .6;
}

.contact-main__heading h1 {
    margin-top: 0;
    font-size: var(--page-heading-size);
    line-height: var(--page-heading-leading);
    letter-spacing: var(--page-heading-tracking);
    color: var(--color-chocolate);
}

.contact-main__heading h1 em {
    display: block;
    margin-top: 10px;
}


/* =========================================================
   COLONNE GAUCHE — INFORMATIONS
========================================================= */

.contact-main__infos,
.contact-main__form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.contact-main__infos {
    position: relative;
    overflow: hidden;
    background: var(--color-milk);
    color: var(--color-chocolate);
}

.contact-main__infos > * {
    position: relative;
    z-index: 2;
}

.contact-main__form {
    position: relative;
    overflow: hidden;

    background: var(--color-chocolate);
    color: var(--color-milk);
}

.contact-main__infos {
    padding:
        var(--contact-padding-y)
        var(--gutter)
        var(--contact-padding-y)
        var(--contact-outer-gutter);
}

.contact-main__form {
    padding:
        var(--contact-padding-y)
        var(--contact-outer-gutter)
        var(--contact-padding-y)
        var(--gutter);
}


/* Conteneur des informations */

.contact-main__infos-inner {
    width: 100%;
    max-width: 620px;
}


/* =========================================================
   BLOC INFORMATION
========================================================= */

.contact-info {
    display: grid;
    grid-template-columns: clamp(36px, 3vw, 52px) minmax(0, 1fr);
    column-gap: clamp(18px, 2vw, 32px);

    padding:
        clamp(28px, 3vw, 42px)
        0;

    border-top: 1px solid var(--page-rule-light);
}

.contact-info:last-of-type {
    border-bottom: 1px solid var(--page-rule-light);
}


/* Numéro */

.contact-info__index {
    padding-top: 3px;

    font-family: var(--font-accent);
    font-size: 12px;
    line-height: 1;

    color: var(--color-chocolate);
    opacity: .45;
}


/* Label */

.contact-info .label {
    margin: 0 0 16px;

    font-family: var(--font-accent);
    font-size: 13px;
    line-height: 1.25;
}


/* Reset */

.contact-info a,
.contact-info p {
    margin: 0;
}


/* Grande information */

.contact-info__big {
    display: inline-block;

    font-family: var(--font-primary);
    font-size: clamp(24px, 2vw, 34px);
    font-weight: 400;
    line-height: 1.08;

    color: var(--color-chocolate);
}


/* Nom */

.contact-info__name {
    display: block;

    margin-bottom: 10px;

    font-family: var(--font-primary);
    font-size: 16px;
}


/* Téléphone / texte secondaire */

.contact-info:not(:first-child) a,
.contact-info:not(:first-child) p:not(.label) {
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.5;
}


/* Liens */

.contact-info a {
    color: inherit;
    text-decoration: none;

    transition: opacity .3s ease;
}
.contact-note {
    position: relative;
    margin: var(--space-sm) 0 0;
    max-width: 620px;
    border-left-color: var(--color-caramel);
    font-size: clamp(15px, 1vw, 19px);
    color: var(--color-chocolate);
}

.contact-note p {
    margin: 0;
}


@media (hover: hover) {
    .contact-info a:hover {
        opacity: .6;
    }
}


/* =========================================================
   COLONNE DROITE — FORMULAIRE
========================================================= */

.contact-main__form {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background: var(--color-chocolate);
    color: var(--color-milk);
}


/* =========================================================
   PETIT HEADER "VOTRE DEMANDE / 02"
========================================================= */

.contact-form__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    width: 100%;
    max-width: 760px;

    margin: 0 0 12px;
}

.contact-main__form h2 {
    width: 100%;

    margin: 0 0 clamp(42px, 4vw, 64px);

    font-family: var(--font-primary);
    font-size: var(--page-heading-size);
    font-weight: 600;
    line-height: var(--page-heading-leading);
    letter-spacing: var(--page-heading-tracking);

    color: var(--color-milk);
}

.contact-main__form h2 em {
    display: block;

    margin-top: var(--heading-accent-gap);

    font-family: var(--font-accent);
    font-size: .7em;
    font-weight: 400;
    line-height: 1;

    letter-spacing: -.02em;
}


/* =========================================================
   FORMULAIRE — LARGEUR
========================================================= */

.contact-main__form .wpcf7 {
    width: 100%;
}


/* =========================================================
   GRANDS NUMÉROS DÉCORATIFS
========================================================= */

.contact-main__infos::after,
.contact-main__form::after {
    position: absolute;
    z-index: 0;

    bottom: -2%;

    font-family: var(--font-primary);
    font-size: clamp(220px, 23vw, 430px);
    font-weight: 600;
    line-height: .7;

    pointer-events: none;
}

.contact-main__infos::after {
    content: "01";
    right: -4%;
    color: rgb(53 24 22 / .045);
}

.contact-main__form::after {
    content: "02";
    right: -4%;
    color: rgb(252 247 227 / .045);
}


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

@media (max-width: 1100px) {

    .contact-main {
        grid-template-columns: .9fr 1.1fr;
    }

    .contact-main__infos {
        padding:
            var(--contact-padding-y)
            var(--gutter);
    }

    .contact-main__form {
        padding:
            var(--contact-padding-y)
            var(--gutter);
    }

    .contact-main__form h2 {
        font-size: clamp(40px, 5vw, 58px);
    }
}


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

@media (max-width: 767px) {

    .contact-main {
        display: block;

        min-height: 0;
    }

    .contact-main__heading {
        margin-bottom: 30px;
    }

    /* GAUCHE */

    .contact-main__infos {
        padding:
            calc(var(--page-padding-y) + 32px)
            var(--gutter)
            var(--page-padding-y);
    }

    .contact-main__infos-inner {
        max-width: none;
    }

    .contact-info {
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 14px;

        padding: 26px 0;
    }

    .contact-info .label {
        margin-bottom: 10px;
    }

    .contact-info__big {
        font-size: clamp(23px, 7vw, 30px);
    }


    /* DROITE */

    .contact-main__form {
        justify-content: flex-start;

        min-height: auto;

        padding:
            var(--page-padding-y)
            var(--gutter)
            clamp(80px, 16vw, 110px);
    }

    .contact-main__form h2 {
        margin-bottom: 44px;

        font-size: clamp(38px, 11vw, 54px);
        line-height: .92;
    }

    .contact-main__infos::after,
    .contact-main__form::after {
        right: -8%;
        bottom: 0;

        font-size: 58vw;
    }
}

@media (max-width: 767px) {

    /* Page contact, zone claire */
    .page-contact .header:not(.nav-open):not(.on-dark) {
        color: var(--color-chocolate);
    }

    .page-contact .header:not(.nav-open):not(.on-dark) .burger {
        color: var(--color-chocolate);
        border-color: rgb(53 24 22 / .25);
    }

    /* Page contact, zone chocolat */
    .page-contact .header:not(.nav-open).on-dark {
        color: var(--color-milk);
    }

    .page-contact .header:not(.nav-open).on-dark .burger {
        color: var(--color-milk);
        border-color: rgb(249 236 197 / .35);
    }

    /* Menu ouvert, toujours clair */
    .page-contact .header.nav-open,
    .page-contact .header.nav-open .burger {
        color: var(--color-milk);
    }

    .page-contact .header.nav-open .burger {
        border-color: rgb(249 236 197 / .35);
    }
}

/* ══════════════════════════════════════════════════
   CF7 — Nouveau style Signé Madeleine
══════════════════════════════════════════════════ */

.wpcf7-form {
    display: flex;
    flex-direction: column;

    gap: clamp(18px, 1.8vw, 26px);

    padding: 0;

    background: transparent;
    color: var(--color-milk);
}

.cf7-row {
    display: flex;

    gap: clamp(24px, 2.5vw, 40px);

    width: 100%;
}

.cf7-field p {
    position: relative;
    display: block;

    margin: 0;
    padding-top: 16px;
}

.cf7-row .cf7-field {
    flex: 1 1 0;
    min-width: 0;
}

.cf7-field {
    position: relative;
}

.cf7-field p br {
    display: none;
}

.cf7-field .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* ══ INPUTS ══ */

.cf7-field input[type="text"],
.cf7-field input[type="email"],
.cf7-field input[type="tel"] {
    display: block;
    width: 100%;

    padding: 10px 0 11px;

    border: 0;
    border-bottom: 1px solid rgb(252 247 227 / .32);
    border-radius: 0;

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

    font-family: var(--font-primary);
    font-size: clamp(15px, 1vw, 18px);
    font-weight: 400;
    line-height: 1.4;

    outline: none;
    appearance: none;

    transition:
        border-color .35s ease,
        color .35s ease;
}

.cf7-field input[type="text"]:focus,
.cf7-field input[type="email"]:focus,
.cf7-field input[type="tel"]:focus {
    border-bottom-color: var(--color-caramel);
}

/* ══ TEXTAREA ══ */

.cf7-field textarea {
    display: block;
    width: 100%;
    min-height: 105px;
	height: 105px;

    padding: 16px 0;

    border: 0;
    border-bottom: 1px solid rgb(252 247 227 / .32);
    border-radius: 0;

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

    font-family: var(--font-primary);
    font-size: clamp(15px, 1vw, 18px);
    font-weight: 400;
    line-height: 1.5;

    outline: none;
    resize: none;
    appearance: none;

    transition: border-color .35s ease;
}

.cf7-field textarea:focus {
    border-bottom-color: var(--color-caramel);
}

/* Placeholder invisible pour float label */
.cf7-field input::placeholder,
.cf7-field textarea::placeholder {
    color: transparent;
}

/* ══ LABEL FLOTTANT ══ */

.cf7-field label {
    position: absolute;
    top: 29px;
    left: 0;

    font-family: var(--font-accent);
    font-size: clamp(13px, .9vw, 15px);
    line-height: 1;

    color: rgb(252 247 227 / .58);

    pointer-events: none;
    white-space: nowrap;
    transform-origin: left top;

    transition:
        top .3s var(--ease-main),
        font-size .3s var(--ease-main),
        color .3s ease,
        opacity .3s ease;
}

.cf7-field p:has(input:focus) label,
.cf7-field p:has(input:not(:placeholder-shown)) label,
.cf7-field p:has(textarea:focus) label,
.cf7-field p:has(textarea:not(:placeholder-shown)) label {
    top: 0;

    font-size: 11px;
    color: var(--color-caramel);
}

/* Textarea */
.cf7-field:has(textarea) label {
    top: 34px;
}

.cf7-field p:has(textarea:focus) label,
.cf7-field p:has(textarea:not(:placeholder-shown)) label {
    top: 0;
}

/* ══ ACCEPTATION ══ */

.cf7-acceptance {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin: 0;

    font-family: var(--font-primary);
    font-size: clamp(12px, .85vw, 14px);
    line-height: 1.5;

    color: rgb(252 247 227 / .58);
}

.cf7-acceptance br {
    display: none;
}

.cf7-acceptance .wpcf7-form-control-wrap,
.cf7-acceptance .wpcf7-acceptance,
.cf7-acceptance .wpcf7-list-item {
    display: contents;
}

.cf7-acceptance input[type="checkbox"] {
    position: relative;
    flex-shrink: 0;

    width: 16px;
    height: 16px;

    margin: 2px 0 0;

    appearance: none;
    border: 1px solid rgb(252 247 227 / .35);
    border-radius: 0;

    background: transparent;
    cursor: pointer;

    transition:
        background .3s ease,
        border-color .3s ease;
}

.cf7-acceptance input[type="checkbox"]:checked {
    background: var(--color-caramel);
    border-color: var(--color-caramel);
}

.cf7-acceptance input[type="checkbox"]:checked::after {
    content: "";

    position: absolute;
    top: 2px;
    left: 5px;

    width: 4px;
    height: 7px;

    border-right: 1px solid var(--color-chocolate);
    border-bottom: 1px solid var(--color-chocolate);

    transform: rotate(45deg);
}

/* CF7 : le submit garde son comportement natif dans le cadre animé. */
.contact-main__form .btn { display: inline-flex; max-width: 100%; margin-top: 8px; }
.contact-main__form .btn p { position: relative; margin: 0; padding: 0; }
.contact-main__form .btn p br { display: none; }
.contact-main__form .btn p::after { content: none; }
.contact-main__form .btn-aura--submit { padding: 0; margin-top: 0; }
.contact-main__form input[type="submit"] {
    appearance: none;
    min-height: 58px;
    padding: 18px 28px;
    border: 2px solid rgb(252 247 227 / .075);
    border-radius: 0;
    background: color-mix(in srgb, var(--page-accent) 12%, transparent);
    color: var(--color-milk) !important;
    font: 600 clamp(14px, 1vw, 17px)/1.35 var(--font-primary);
    letter-spacing: -.025em;
    cursor: pointer;
    box-shadow: none;
}
.contact-main__form input[type="submit"]:disabled {
	opacity:1 !important;
}
.contact-main__form .btn-aura--submit input[type="submit"] {
    border: 0;
    background: transparent;
    color: inherit;
    max-width: 100%;
}
.contact-main__form .btn-aura--submit:focus-within { outline: 2px solid var(--color-milk); outline-offset: 6px; }
.contact-main__form .btn-aura--submit:focus-within::before { transform: scaleX(1); opacity: 1; }
.contact-main__form input[type="submit"]:disabled { cursor: not-allowed; opacity: .5; }

/* Spinner */
.wpcf7-spinner {
    display: none !important;
}

/* ══ VALIDATION ══ */

.wpcf7-not-valid-tip {
    display: block;

    margin-top: 7px;

    font-family: var(--font-accent);
    font-size: 11px;
    line-height: 1.3;

    color: var(--color-ruby);
}

.wpcf7-form-control.wpcf7-not-valid {
    border-color: var(--color-ruby) !important;
}

.wpcf7-response-output {
    margin: 8px 0 0 !important;
    padding: 14px 0 !important;

    border: 0 !important;
    border-top: 1px solid rgb(252 247 227 / .25) !important;

    font-family: var(--font-accent);
    font-size: clamp(13px, .9vw, 15px);

    color: rgb(252 247 227 / .7);
}

.wpcf7-form.sent .wpcf7-response-output {
    border-top-color: var(--color-caramel) !important;
    color: var(--color-caramel);
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
    border-top-color: var(--color-ruby) !important;
    color: var(--color-ruby);
}

/* ══ MOBILE ══ */

@media (max-width: 640px) {
    .wpcf7-form {
        gap: 22px;
    }

    .cf7-row {
        flex-direction: column;
        gap: 22px;
    }

    .cf7-field textarea {
        min-height: 120px;
    }
}