/*====================================================
CONTACT SIMAR
====================================================*/


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

.contact{

    width:100%;
    max-width:100%;

    padding:120px 0;

    background:#f8fafc;

    overflow:hidden;

}


.contact .container{

    width:min(92%,1300px);
    max-width:100%;

    margin:auto;

}


/*=========================
CONTACT WRAPPER
=========================*/

.contact-wrapper{

    display:grid;

    grid-template-columns:
        minmax(0, 380px)
        minmax(0, 1fr);

    gap:50px;

    margin-top:70px;

    width:100%;
    max-width:100%;

}


/* Très important pour CSS Grid */

.contact-wrapper > *{

    min-width:0;
    max-width:100%;

}


/*=========================
INFO
=========================*/

.contact-info{

    display:flex;

    flex-direction:column;

    gap:25px;

    min-width:0;

    max-width:100%;

}


/*=========================
INFO CARD
=========================*/

.info-card{

    width:100%;
    max-width:100%;

    min-width:0;

    background:#fff;

    border-radius:22px;

    padding:25px;

    display:flex;

    align-items:flex-start;

    gap:18px;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:.35s;

}


.info-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,92,255,.12);

}


/*=========================
ICON
=========================*/

.info-card .icon{

    width:65px;

    height:65px;

    min-width:65px;

    flex-shrink:0;

    border-radius:18px;

    background:linear-gradient(135deg,#005eff,#00cfff);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:24px;

}


/*=========================
INFO CONTENT
=========================*/

/*
Le div contenant le texte
doit pouvoir rétrécir.
*/

.info-card > div:last-child{

    flex:1;

    min-width:0;

}


.info-card h3{

    margin:0 0 8px;

    font-size:20px;

    color:#03284d;

    font-weight:700;

    overflow-wrap:break-word;

}


.info-card p{

    margin:0;

    color:#64748b;

    line-height:1.8;

    overflow-wrap:break-word;

    word-break:break-word;

}


/*=========================
SOCIAL
=========================*/

.socials{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:15px;

    width:100%;

    max-width:100%;

}


.socials a{

    width:52px;

    height:52px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    background:linear-gradient(135deg,#005eff,#00cfff);

    transition:.35s;

    text-decoration:none;

}


.socials a:hover{

    transform:translateY(-6px) rotate(8deg);

}


/*=========================
FORM
=========================*/

.contact-form{

    width:100%;

    max-width:100%;

    min-width:0;

    background:#fff;

    border-radius:30px;

    padding:45px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}


/*=========================
FORM ROW
=========================*/

.contact-form .row{

    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:20px;

    margin-bottom:20px;

    width:100%;

    max-width:100%;

}


.contact-form .row > *{

    min-width:0;

}


/*=========================
INPUT
=========================*/

.contact-form input,
.contact-form textarea{

    width:100%;

    max-width:100%;

    min-width:0;

    border:none;

    outline:none;

    background:#f4f7fb;

    border:2px solid transparent;

    border-radius:18px;

    padding:18px 20px;

    font-size:16px;

    transition:.3s;

    font-family:Poppins,sans-serif;

}


.contact-form textarea{

    resize:none;

    margin-top:20px;

}


.contact-form input:focus,
.contact-form textarea:focus{

    border-color:#009dff;

    background:#fff;

}


/*=========================
BUTTON
=========================*/

.contact-form button{

    margin-top:25px;

    border:none;

    cursor:pointer;

    padding:18px 35px;

    border-radius:50px;

    background:linear-gradient(135deg,#005eff,#00cfff);

    color:#fff;

    font-size:16px;

    font-weight:600;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    transition:.35s;

    max-width:100%;

}


.contact-form button:hover{

    transform:translateY(-5px);

}


/*=========================
MAP
=========================*/

.map{

    width:100%;

    max-width:100%;

    min-width:0;

    margin-top:80px;

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 25px 70px rgba(0,0,0,.10);

}


.map iframe{

    display:block;

    width:100%;

    max-width:100%;

    height:500px;

    border:none;

}


/*====================================================
TABLET
====================================================*/

@media(max-width:992px){

    .contact{

        padding:90px 0;

    }


    .contact-wrapper{

        grid-template-columns:1fr;

        gap:40px;

    }


    .contact-info{

        display:grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap:20px;

    }


    .contact-form{

        padding:35px;

    }

}


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

@media(max-width:768px){

    .contact-wrapper{

        gap:35px;

    }


    .contact-info{

        grid-template-columns:1fr;

    }


    .contact-form .row{

        grid-template-columns:1fr;

        gap:15px;

    }

}


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

@media(max-width:576px){

    .contact{

        padding:70px 0;

    }


    .contact-form{

        padding:25px;

        border-radius:22px;

    }


    .contact-form input,
    .contact-form textarea{

        padding:16px;

        font-size:15px;

    }


    .contact-form button{

        width:100%;

        justify-content:center;

    }


    .info-card{

        padding:20px;

        gap:15px;

    }


    .info-card .icon{

        width:58px;

        height:58px;

        min-width:58px;

        font-size:20px;

    }


    .map{

        margin-top:60px;

        border-radius:22px;

    }


    .map iframe{

        height:350px;

    }

}


/*====================================================
TRES PETIT MOBILE
====================================================*/

@media(max-width:380px){

    .contact-form{

        padding:20px;

    }


    .info-card{

        padding:16px;

        gap:12px;

    }


    .info-card .icon{

        width:52px;

        height:52px;

        min-width:52px;

        border-radius:15px;

    }


    .info-card h3{

        font-size:18px;

    }


    .info-card p{

        font-size:14px;

    }

}