/* ==================================================
   Layout
================================================== */

.contact-grid {
    grid-template-areas:
        "main main main main main main main main main sidebar sidebar sidebar";

    align-items: start;
}

/* ==================================================
   Areas
================================================== */

.contact-main {
    grid-area: main;
}

.contact-sidebar {
    grid-area: sidebar;
}

/* ==================================================
   Main
================================================== */

.contact-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ==================================================
   Sidebar
================================================== */

.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ==================================================
   Formulaire
================================================== */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    margin-top: var(--space-lg);
}

/* lignes à 2 colonnes */

.contact-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}


/* champs */

.contact-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.contact-form-field label {
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.contact-text {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* inputs */

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: var(--space-sm);

    border: 1px solid var(--color-blue-light);
    border-radius: var(--space-xs);

    background-color: #f6f7f9;
    color: var(--color-black);

    font-family: inherit;
    font-size: var(--font-size-sm);
}

.contact-form textarea {
    min-height: 160px;
    resize: vertical;
}


/* focus */

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

/* Mention Obligatoire */
.contact-required-note {
    margin: 0;
    font-size: var(--font-size-xs);
    font-style: italic;
    opacity: 0.75;
}

/* Confidentialité */
.contact-privacy-note {
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: 1.4;
    opacity: 0.75;
}

.contact-privacy-note a {
    text-decoration: underline;
}

/* bouton */

.contact-form button {
    align-self: flex-start;

    border: 0;
    appearance: none;
    cursor: pointer;
}


/* honeypot anti-spam : champ volontairement invisible pour piéger les bots */
.contact-extra-field {
    position: absolute;
    left: -9999px;
}

/* ==================================================
   Messages formulaire
================================================== */

.contact-message {
    margin-bottom: var(--space-md);
    padding: var(--space-sm);

    border-radius: var(--space-xs);

    font-size: var(--font-size-sm);
    font-weight: 700;
    text-align: center;
}

.contact-message-success {
    background-color: var(--color-green);
    color: var(--color-white);
}

.contact-message-error {
    background-color: var(--color-red);
    color: var(--color-white);
}


/* ==================================================
   Responsive
================================================== */

@media (max-width: 900px) {

    /* grille mobile */

    .contact-grid {
        grid-template-areas:
            "main main"
            "sidebar sidebar";
    }

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

}