/* ==========================
   RESET
========================== */

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


body {
    min-height: 100vh;

    background: #12120F;

    color: #FFFDF9;

    font-family: 'Montserrat', sans-serif;
}



/* ==========================
   PAGE DEVIS
========================== */

.devis-page {
    width: 100%;

    background: #12120F;

    animation: devisReveal 0.5s ease-out both;
}



/* ==========================
   INTRODUCTION
========================== */

.devis-intro {
    width: min(1400px, calc(100% - 160px));

    min-height: 690px;

    margin: 0 auto;

    padding: 130px 0 90px;
}



/* ==========================
   TITRE
========================== */

.devis-title {
    display: flex;

    align-items: center;

    gap: 15px;
}


.devis-title h1 {
    flex-shrink: 0;

    color: #FFFDF9;

    font-size: 40px;
    font-weight: 300;
}


.devis-title span {
    width: 100%;
    height: 3px;

    background: #B48A5A;
}



/* ==========================
   ACCROCHE
========================== */

.devis-hook {
    max-width: 1200px;

    margin-top: 25px;

    color: #FFFDF9;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.5;
}



/* ==========================
   SÉPARATEUR
========================== */

.devis-separator {
    width: 100%;
    height: 1px;

    margin: 35px 0;

    background: #FFFDF9;

    opacity: .8;
}



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

.devis-information {
    display: flex;

    flex-direction: column;

    gap: 25px;
}


.devis-information p {
    color: #FFFDF9;

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

    line-height: 1.5;

    text-align: justify;
}



/* ==========================
   LIEN TARIFS
========================== */

.tarifs-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 30px;

    color: #FFFDF9;

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

    text-decoration: underline;
    text-underline-offset: 4px;

    transition: color .3s ease;
}


.tarifs-link span {
    text-decoration: none;

    transition: transform .3s ease;
}


.tarifs-link:hover {
    color: #B48A5A;
}


.tarifs-link:hover span {
    transform: translateX(5px);
}



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

.devis-form-section {
    width: min(1400px, calc(100% - 160px));

    min-height: 690px;

    margin: 0 auto;

    padding: 70px 60px 110px;
}



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

.devis-form {
    display: flex;

    flex-direction: column;

    gap: 35px;
}



/* ==========================
   PREMIÈRE LIGNE
========================== */

.devis-fields-row {
    display: grid;

    grid-template-columns:
        minmax(150px, .8fr)
        minmax(150px, .8fr)
        minmax(160px, .8fr)
        minmax(280px, 1.7fr);

    gap: 40px;
}



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

.devis-form input[type="text"],
.devis-form input[type="email"],
.devis-form select,
.devis-form textarea {
    width: 100%;

    background: transparent;

    border: 2px solid #B48A5A;

    outline: none;

    color: #FFFDF9;

    font-family: 'Montserrat', sans-serif;

    font-size: 14px;

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


.devis-form input[type="text"],
.devis-form input[type="email"],
.devis-form select {
    height: 50px;

    padding: 0 25px;

    border-radius: 999px;

    text-align: center;
}



/* ==========================
   SELECT
========================== */

.devis-form select {
    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;

    text-align-last: center;
}


.devis-form select option {
    background: #12120F;

    color: #FFFDF9;
}



/* ==========================
   PLACEHOLDERS
========================== */

.devis-form input::placeholder,
.devis-form textarea::placeholder {
    color: #FFFDF9;

    opacity: .75;

    text-align: center;
}



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

.devis-form input:focus,
.devis-form select:focus,
.devis-form textarea:focus {
    border-color: #B48A5A;

    box-shadow: 0 0 0 3px rgba(180, 138, 90, .12);
}



/* ==========================
   DESCRIPTION
========================== */

.devis-form textarea {
    height: 250px;

    padding: 25px;

    border-radius: 35px;

    resize: none;

    text-align: left;
}



/* ==========================
   BAS DU FORMULAIRE
========================== */

.devis-form-bottom {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 50px;
}


.devis-legal {
    flex: 1;
}



/* ==========================
   CONFIDENTIALITÉ
========================== */

.form-privacy,
.devis-warning {
    max-width: 900px;

    color: #FFFDF9;

    font-size: 12px;

    line-height: 1.6;
}


.form-privacy {
    margin-bottom: 10px;
}


.devis-warning {
    margin-bottom: 12px;
}


.form-privacy a,
.privacy a {
    color: inherit;

    text-decoration: underline;

    text-underline-offset: 3px;

    transition: color .3s ease;
}


.form-privacy a:hover,
.privacy a:hover {
    color: #B48A5A;
}



/* ==========================
   CASE À COCHER
========================== */

.privacy {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #FFFDF9;

    font-size: 11px;

    cursor: pointer;
}


.privacy input {
    flex-shrink: 0;

    width: 18px;
    height: 18px;

    accent-color: #B48A5A;

    cursor: pointer;
}



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

.send-button {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 15px 28px;

    background: transparent;

    border: 2px solid #B48A5A;

    border-radius: 999px;

    color: #FFFDF9;

    font-family: 'Montserrat', sans-serif;

    letter-spacing: 1px;

    cursor: pointer;

    transition: .35s ease;
}


.send-button:hover {
    background: #B48A5A;

    color: #FFFDF9;
}


.send-button i {
    transition: transform .35s ease;
}


.send-button:hover i {
    transform: translateX(5px);
}



/* ==========================
   ERREURS
========================== */

.form-error {
    display: none;

    margin-top: 12px;

    color: #C0392B;

    font-size: 12px;
}



/* ==========================
   CONFIRMATION
========================== */

.form-success {
    display: none;

    margin-top: 12px;

    color: #B48A5A;

    font-size: 12px;
}



/* ==========================
   APPARITION PAGE
========================== */

@keyframes devisReveal {

    from {
        opacity: 0;

        filter: blur(6px);
    }

    to {
        opacity: 1;

        filter: blur(0);
    }
}