.contact-section{
    padding:80px 0;
    background:#f8fafc;
}

/* =========================
   INFOS GRID
========================= */

.contact-info-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:50px;
}

.info-card{
    background:white;
    border-radius:18px;
    padding:25px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    transition:.3s;
}

.info-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(0,0,0,.1);
}

.info-card i{
    font-size:26px;
    color:#6366f1;
    margin-bottom:12px;
}

.info-card h4{
    margin:10px 0;
    color:#111827;
    font-size:18px;
}

.info-card p{
    margin:3px 0;
    color:#475569;
    font-size:14px;
}

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

.contact-form-wrapper{
    background:white;
    padding:40px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.contact-form-wrapper input,
.contact-form-wrapper textarea{
    width:100%;
    padding:14px 16px;
    margin-bottom:15px;

    border:1px solid #e5e7eb;
    border-radius:12px;

    outline:none;

    transition:.3s;
}

.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus{
    border-color:#6366f1;
    box-shadow:0 0 0 3px rgba(99,102,241,.15);
}

.contact-form-wrapper button{
    background:linear-gradient(135deg,#6366f1,#4338ca);
    color:white;

    padding:14px 25px;
    border:none;
    border-radius:12px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;
}

.contact-form-wrapper button:hover{
    transform:translateY(-3px);
}

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

@media(max-width:991px){
    .contact-info-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .contact-info-grid{
        grid-template-columns:1fr;
    }
}