/* =========================
   BANNER CONTACT
========================= */


.contact-banner{

height:450px;

background:

linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.55)
),

url("../images/contact-banner.jpg");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:white;

}



.contact-banner span{

text-transform:uppercase;

letter-spacing:3px;

color:#ffccd5;

font-weight:600;

}



.contact-banner h1{

font-family:'Playfair Display',serif;

font-size:70px;

margin:20px 0;

}



.contact-banner p{

font-size:20px;

}









/* =========================
   CONTACT PRINCIPAL
========================= */


.contact-main{

padding:100px 7%;

}



.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:start;

}









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


.contact-details h2,
.contact-form-box h2{

font-family:'Playfair Display',serif;

font-size:40px;

margin-bottom:40px;

}



.contact-item{

display:flex;

align-items:center;

gap:25px;

padding:25px;

background:white;

border-radius:20px;

box-shadow:var(--shadow);

margin-bottom:20px;

transition:.4s;

}



.contact-item:hover{

transform:translateX(10px);

}



.contact-item i{

width:55px;

height:55px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:var(--green);

color:white;

font-size:22px;

}



.contact-item h3{

font-size:18px;

margin-bottom:5px;

}



.contact-item p{

color:#666;

}









/* =========================
   RESEAUX SOCIAUX
========================= */


.social-box{

margin-top:35px;

}



.social-box h3{

margin-bottom:20px;

}



.social-box a{

display:inline-flex;

width:50px;

height:50px;

background:#f5f5f5;

border-radius:50%;

align-items:center;

justify-content:center;

font-size:22px;

margin-right:10px;

color:var(--green);

transition:.3s;

}



.social-box a:hover{

background:var(--red);

color:white;

transform:translateY(-5px);

}









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


.contact-form-box{

background:white;

padding:45px;

border-radius:35px;

box-shadow:var(--shadow);

}



.form-group{

margin-bottom:25px;

}



.form-group label{

display:block;

font-weight:600;

margin-bottom:10px;

}



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

width:100%;

padding:17px 20px;

border-radius:15px;

border:1px solid #ddd;

outline:none;

font-size:15px;

transition:.3s;

}



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

border-color:var(--green);

box-shadow:

0 0 0 4px rgba(11,143,69,.1);

}



.form-group textarea{

resize:none;

}









/* =========================
   COMMANDE WHATSAPP
========================= */


.quick-order{

padding:80px 7%;

background:

linear-gradient(
135deg,
#0b8f45,
#05652f
);

color:white;

text-align:center;

}



.quick-order i{

font-size:70px;

margin-bottom:20px;

}



.quick-order h2{

font-family:'Playfair Display',serif;

font-size:45px;

}



.quick-order p{

font-size:18px;

margin:20px 0 35px;

}



.whatsapp-button{

display:inline-block;

background:white;

color:#0b8f45;

padding:18px 45px;

border-radius:50px;

font-weight:700;

transition:.4s;

}



.whatsapp-button:hover{

background:var(--red);

color:white;

transform:translateY(-5px);

}









/* =========================
   HORAIRES
========================= */


.opening-hours{

padding:80px 7%;

display:flex;

justify-content:center;

}



.hours-card{

text-align:center;

padding:45px;

border-radius:30px;

background:white;

box-shadow:var(--shadow);

max-width:450px;

}



.hours-card i{

font-size:45px;

color:var(--green);

margin-bottom:20px;

}



.hours-card h2{

font-family:'Playfair Display',serif;

margin-bottom:20px;

}









/* =========================
   CARTE
========================= */


.map{

padding:0 7% 100px;

}



.map iframe{

width:100%;

height:450px;

border:0;

border-radius:30px;

box-shadow:var(--shadow);

}









/* =========================
   FAQ
========================= */


.faq{

padding:100px 7%;

background:#fafafa;

}



.faq-container{

max-width:900px;

margin:auto;

}



.faq-item{

background:white;

padding:30px;

border-radius:20px;

margin-bottom:20px;

box-shadow:var(--shadow);

}



.faq-item h3{

font-family:'Playfair Display',serif;

margin-bottom:15px;

font-size:22px;

}



.faq-item p{

color:#666;

line-height:1.8;

}









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


@media(max-width:1000px){


.contact-wrapper{

grid-template-columns:1fr;

}



.contact-banner h1{

font-size:45px;

}



.contact-form-box{

padding:30px;

}


}



@media(max-width:600px){


.contact-item{

flex-direction:column;

text-align:center;

}



.quick-order h2{

font-size:35px;

}


}

.notification{

position:fixed;

right:30px;

top:30px;

padding:18px 30px;

background:white;

border-radius:15px;

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

transform:translateX(120%);

transition:.4s;

z-index:3000;

}


.notification.show{

transform:translateX(0);

}


.notification.success{

border-left:5px solid #0b8f45;

}


.notification.error{

border-left:5px solid #d90429;

}


#shopStatus{

display:inline-flex;

gap:10px;

padding:12px 25px;

border-radius:30px;

font-weight:600;

}


#shopStatus.open{

background:#d8f8e5;

color:#0b8f45;

}


#shopStatus.close{

background:#ffe1e1;

color:#d90429;

}

/* ===========================
          FOOTER
=========================== */

footer{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;
    flex-wrap: wrap;
    text-align: center;
    padding: 60px 20px;
}

footer div{
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer h3,
footer h4{
    margin-bottom: 15px;
}

footer p,
footer a{
    text-align: center;
}

footer a{
    text-decoration: none;
    margin: 5px 0;
}

.copyright{
    text-align: center;
    padding: 20px;
}