/* --------------------------------------- */
/* ---------- MOBILE XS - 300px ---------- */
@media (min-width:1px) {

    main {
        background: #ffffff;
        overflow-x: hidden;
        max-width: 2400px;
        margin: 0 auto;
    }

    .z-index-plus {
        z-index: 2;
        position: relative;
    }

    .sec-contact-01 {
        background: #ffffff;
        padding: 40px 30px 80px 30px;
        position: relative;
        min-height: 88vh;
    }

    .content-box {
        width: 100%;
        max-width: 100%;
        margin: auto;
    }

    .sec01-backdash {
        background: url("../svg/dashgrid04.svg");
        background-size: 100%;
        width: 770px;
        height: 200px;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 0;
    }

    .sec01-backdash2 {
        background: url("../svg/dashgrid04.svg");
        background-size: 100%;
        width: 770px;
        height: 150px;
        position: absolute;
        bottom: 0px;
        right: 0px;
        z-index: 0;
    }

    .sec01-title {
        font-family: 'Teko', sans-serif;
        font-size: 50px;
        font-weight: 500;
        line-height: 1;
        color: var(--primary);
        text-align: center;
    }

    .sec01-subtitle {
        font-family: 'Cabin', sans-serif;
        font-size: 22px;
        font-weight: 500;
        line-height: 1.4;
        color: var(--noir-texte);
        text-align: center;
        margin-bottom: 35px;
    }

    form {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #prenom ~ .ico-input-right, #nom ~ .ico-input-right {
        background: url("../svg/ico-bonhomme-gris.svg");
    }

    #prenom:hover ~ .ico-input-right, #nom:hover ~ .ico-input-right, #prenom:focus-visible ~ .ico-input-right, #nom:focus-visible ~ .ico-input-right {
        background: url("../svg/ico-bonhomme-prune.svg");
    }

    #mail ~ .ico-input-right {
        background: url("../svg/ico-arobase-gris.svg");
    }

    #mail:hover ~ .ico-input-right, #mail:focus-visible ~ .ico-input-right {
        background: url("../svg/ico-arobase-prune.svg");
    }

    #numtel ~ .ico-input-right {
        background: url("../svg/ico-tel-gris.svg");
    }

    #numtel:hover ~ .ico-input-right, #numtel:focus-visible ~ .ico-input-right {
        background: url("../svg/ico-tel-prune.svg");
    }

    #btn-submit {
        max-width: 300px;
        margin: auto;
    }

    .bot-bloc {
        display: flex;
        justify-content: center;
    }

    /* Style tooltip contact */
    .contact-btn-tooltip {
        --bs-tooltip-bg: #11101E;
        --bs-tooltip-padding-x: 15px;
        --bs-tooltip-padding-y: 6px;
        --bs-tooltip-font-size: 14px;
        --bs-tooltip-border-radius: 5px;
        font-weight: 400;
        font-family: 'Cabin', sans-serif;
    }

}



/* ----------------------------------------------- */
/* ---------- PETIT TABLETTE SM - 576px ---------- */
@media (min-width:576px) {

    #btn-submit  {
        max-width: 200px;
        margin: auto 0 auto auto;
    }

    .bot-bloc {
        justify-content: start;
    }

}




/* ----------------------------------------- */
/* ---------- TABLETTE MD - 768px ---------- */
@media (min-width:768px) {

    .sec-contact-01 {
        padding: 60px 50px 80px 50px;
    }

    .content-box {
        max-width: 40rem;
    }

    .sec01-backdash {
        background-size: 80%;
        width: 1000px;
        height: 260px;
    }

    .sec01-backdash2 {
        background-size: 80%;
        width: 1000px;
        height: 260px;
    }

    .sec01-title {
        font-size: 64px;
    }

    .sec01-subtitle {
        font-size: 26px;
        margin-bottom: 50px;
    }
}



/* -------------------------------------- */
/* ---------- ECRAN LG - 992px ---------- */
@media (min-width:992px) {
    
    .sec01-backdash {
        background-size: 200%;
        width: 500px;
        height: 280px;
        top: 0px;
        left: 0px;
    
    }

    .sec01-backdash2 {
        background-size: 200%;
        width: 500px;
        height: 280px;
        bottom: 0px;
        right: 0px;
    
    }

}



/* --------------------------------------------- */
/* ---------- ECRAN MOYEN XL - 1200px ---------- */
@media (min-width:1200px) {

    .sec-contact-01 {
        padding: 60px 50px 100px 50px;
    }

}



/* ---------------------------------------------- */
/* ---------- ECRAN LARGE XXL - 1400px ---------- */
@media (min-width:1400px) {

    .sec01-backdash {
        background-size: 200%;
        width: 500px;
        height: 400px;
    }

    .sec01-backdash2 {
        background-size: 200%;
        width: 500px;
        height: 400px;
    }
    
}

/* ------------------------------------------------------------ */
/* ---------- FIX PAGE TROP COURTE - fenetre > 950px ---------- */
@media (min-height:950px) {


}