/* ==========================================================================
   HEADER
   ========================================================================== */

section.header {
    position: relative;
}

section.header > div.overlay {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 1;
    background-image: linear-gradient(black, transparent, transparent);
}


/* ==========================================================================
   FORMULAIRES (GRAVITY FORMS) - GÉNÉRAL
   ========================================================================== */

fieldset {
    color: #1A1818;
}

label > span {
    color: #1A1818;
}

.gform_wrapper.gravity-theme span.gfield_required {
    display: none;
}

div.gform_wrapper.gravity-theme .gfield textarea.large {
    height: auto;
}

.gform-footer.gform_footer.top_label > button {
    background-color: #BB501E;
    font-size: 90%;
    text-transform: uppercase;
    color: white;
    padding: 20px 55px;
    cursor: pointer;
    font-weight: 600;
    display: inline-block;
    border: none;
}


/* ==========================================================================
   FORMULAIRES - SELECT
   ========================================================================== */

select {
    border: none;
    background-color: #1A1818;
    color: white;
}

/* Texte "placeholder" dans le champ fermé (première option vide) */
select:has(option[value=""]:checked) {
    color: #999;
}

/* Options dans la liste ouverte */
select option {
    background-color: #333;
    color: #fff;
}

/* Première option (placeholder) dans la liste ouverte */
select option[value=""] {
    color: white;
}


/* ==========================================================================
   FORMULAIRES - CHECKBOX
   ========================================================================== */

.gform_wrapper .gfield input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;


    background: #1A1818;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    vertical-align: middle;
}

.gform_wrapper .gfield input[type="checkbox"]:checked {
    background: #BB501E;
}

/* Crochet */
.gform_wrapper .gfield input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #1A1818;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transition: transform 0.15s ease;
}

.gform_wrapper .gfield input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.gform_wrapper .gfield input[type="checkbox"]:focus-visible {
    outline: 2px solid #BB501E;
    outline-offset: 2px;
}


/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */

section.pied_page > div.row h2 {
    text-transform: uppercase;
    font-size: 350%;
   
    margin-bottom: 0;
}

section.pied_page > div.row .colonne-0 p {
    color: black;
}

section.pied_page .gform_wrapper.gravity-theme .ginput_complex {
    display: block;
    padding-right: 18px;
}

.modele_soumission section.pied_page textarea,
.modele_soumission section.pied_page input:not([type="checkbox"]):not([type="radio"]) {
    background-color: #1A1818;
    color: white;
}

section.pied_page #gform_submit_button_4,
section.pied_page #gform_submit_button_2 {
    background-color: #BB501E;
    font-size: 105%;
    text-transform: uppercase;
    color: white;
    padding: 20px 55px;
    cursor: pointer;
    font-weight: 600;
    display: inline-block;
}

.pied_page div.contact > div:first-child:before {
    content: "";
    position: absolute;
    left: -50px;
    top: 0px;
    background-image: url(https://www.termaco.com/wp-content/uploads/2023/05/icon_adresse.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 28px;
    height: 35px;
    z-index: 5;
    transition: all 0.4s ease-in-out;
    filter: invert(1);
}

.pied_page div.contact > div{
    position: relative;
}

.pied_page .social img{
    filter: invert(1);
    max-width: 20px;
}

.pied_page .contact{
    padding-left: 50px;
}

.modele_soumission #gform_confirmation_message_6,
.modele_soumission #gform_confirmation_message_7{
    color: black;
    font-size: 21px;
    text-align: center;
    font-weight: bold;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */


   
@media screen and (max-width: 1024px) {

    section.pied_page > div.row h2 {
        font-size: 250%;
    }


}

@media screen and (max-width: 640px) {

    section.pied_page .gform_wrapper.gravity-theme .ginput_complex {
        display: block;
        padding-right: 10px;
    }

    .gform-footer.gform_footer.top_label > button {
        width: 100%;
    }
}