/* ==========================================
   CONTACT PAGE
========================================== */

.contact-page{
    background:var(--off-white);
}

/* ==========================================
   HERO
========================================== */

.contact-hero{

    position:relative;

    height:80vh;

    background:url("/public_html/assets/images/contact-hero.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}



.contact-hero .hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

}



.contact-hero .hero-content{

    position:relative;

    z-index:2;

    max-width:800px;

    padding:25px;

    color:var(--white);

}



.contact-hero .hero-content span{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:var(--fs-18);

}



.contact-hero h1{

    font-family:var(--font-title);

    font-size:var(--fs-60);

    margin:20px 0;

}



.contact-hero h1::after{

    content:"";

    display:block;

    width:80px;

    height:3px;

    background:var(--gold);

    margin:20px auto;

}



.contact-hero p{

    font-size:var(--fs-18);

    line-height:1.8;

}

@media(max-width:768px){


    .contact-hero{

        height:65vh;

    }


    .contact-hero h1{

        font-size:var(--fs-36);

    }


    .contact-hero p{

        font-size:var(--fs-16);

    }


}


/* ==========================================
   CONTACT MAIN
========================================== */

.contact-main{

    padding:90px 20px;

}

.contact-container{

    max-width:1250px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1.3fr 1fr;

    gap:0;

    align-items:stretch;

    background:var(--white);

    border-radius:16px;

    overflow:hidden;

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

}


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

.contact-info{

    padding:40px;

    background:var(--white);

    border-right:1px solid var(--gray-200);

}

.contact-info h2,
.contact-form h2{

    margin:12px 0 15px;

    font-family:var(--font-title);

    font-size:28px;

    color:var(--black);

}

.contact-info > p{

    margin-bottom:35px;

    color:var(--gray-700);

    line-height:1.8;

}

.section-badge{

    display:inline-block;

    color:var(--gold-dark);

    font-size:13px;

    font-weight:600;

    letter-spacing:1.5px;

    text-transform:uppercase;

}

.contact-info-list{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.contact-info-item{

    display:flex;

    align-items:flex-start;

    gap:15px;

}

.contact-icon{

    min-width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(201,162,39,.12);

    color:var(--gold-dark);

}

.contact-info-item strong{

    display:block;

    margin-bottom:5px;

    color:var(--black);

    font-size:15px;

}

.contact-info-item span{

    color:var(--gray-700);

    font-size:14px;

    line-height:1.5;

}


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

.contact-form{

    padding:40px;

    background:var(--white);

    border-right:1px solid var(--gray-200);

}

.contact-form form{

    margin-top:30px;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:7px;

}

.form-group label{

    font-size:14px;

    font-weight:600;

    color:var(--gray-700);

}

.form-group input,
.form-group textarea{

    width:100%;

    padding:13px 15px;

    border:1px solid var(--gray-300);

    border-radius:8px;

    background:var(--white);

    color:var(--black);

    font-family:var(--font-text);

    font-size:14px;

    outline:none;

    transition:.25s;

}

.form-group textarea{

    resize:vertical;

    min-height:140px;

}

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

    border-color:var(--gold);

    box-shadow:0 0 0 3px rgba(201,162,39,.12);

}

.btn-contact{

    align-self:flex-start;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    padding:13px 24px;

    border:0;

    border-radius:8px;

    background:var(--gold);

    color:var(--white);

    font-family:var(--font-text);

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.btn-contact:hover{

    background:var(--gold-dark);

    transform:translateY(-2px);

}


/* ==========================================
   IMAGE
========================================== */

.contact-image{

    min-height:100%;

    overflow:hidden;

}

.contact-image img{

    width:100%;

    height:100%;

    min-height:500px;

    object-fit:cover;

    display:block;

}

.contact-image:hover img{

    transform:scale(1.04);

}


/* ==========================================
   ALERTS
========================================== */

.alert-success,
.alert-error{

    margin-top:20px;

    padding:13px 15px;

    border-radius:8px;

    font-size:14px;

}

.alert-success{

    background:#e8f5e9;

    color:#2e7d32;

    border:1px solid #c8e6c9;

}

.alert-error{

    background:#ffebee;

    color:#c62828;

    border:1px solid #ffcdd2;

}


/* ==========================================
   RESPONSIVE
========================================== */
@media(max-width:768px){

    .contact-main{
        padding:40px 8px;
    }

    .contact-container{

        width:100%;

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

    }

    .contact-info,
    .contact-form{

        padding:20px 12px;

    }

    .contact-info h2,
    .contact-form h2{

        font-size:20px;

    }

    .contact-info > p{

        font-size:12px;

        line-height:1.5;

    }

    .contact-info-list{

        gap:15px;

    }

    .contact-info-item{

        gap:8px;

    }

    .contact-icon{

        min-width:32px;

        width:32px;

        height:32px;

        font-size:12px;

    }

    .contact-info-item strong{

        font-size:12px;

    }

    .contact-info-item span{

        font-size:11px;

        overflow-wrap:anywhere;

    }

    .contact-form form{

        margin-top:20px;

        gap:10px;

    }

    .form-row{

        gap:10px;

    }

    .form-group{

        gap:4px;

    }

    .form-group label{

        font-size:11px;

    }

    .form-group input,
    .form-group textarea{

        padding:9px 8px;

        font-size:11px;

    }

    .form-group textarea{

        min-height:90px;

    }

    .btn-contact{

        width:100%;

        padding:10px 8px;

        font-size:11px;

    }

    .contact-image img{

        min-height:100%;

        height:100%;

        object-fit:cover;

    }

}

@media(max-width:480px){

    .contact-main{

        padding:25px 5px;

    }

    .contact-container{

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

        border-radius:10px;

    }

    .contact-info,
    .contact-form{

        padding:15px 8px;

    }

    .contact-info h2,
    .contact-form h2{

        font-size:16px;

    }

    .contact-info > p{

        font-size:10px;

    }

    .contact-info-item{

        gap:5px;

    }

    .contact-icon{

        min-width:25px;

        width:25px;

        height:25px;

        font-size:9px;

    }

    .contact-info-item strong{

        font-size:10px;

    }

    .contact-info-item span{

        font-size:9px;

    }

    .form-row{

        grid-template-columns:1fr;

        gap:8px;

    }

    .form-group label{

        font-size:10px;

    }

    .form-group input,
    .form-group textarea{

        padding:7px 6px;

        font-size:9px;

    }

    .form-group textarea{

        min-height:70px;

    }

    .btn-contact{

        padding:8px 5px;

        font-size:9px;

    }

}