/* COULEURS */

:root{

--jaune:#FDD131;
--bleu:#2E86C1;
--gris:#333;
--fond:#f0f0f0;

}


/* BODY */

body{
margin:0;
padding-top:45px;
font-family:Arial, Helvetica, sans-serif;
background:var(--fond);
}


/* CONTENEUR */

#mainblock{

width:900px;
margin:auto;
background:white;
box-shadow:0px 0px 15px rgba(0,0,0,0.2);

}


/* HEADER */

#headerblock{
background:#e6b800;
text-align:center;
padding:20px 25px 25px 25px;
}
#headerblock p{
text-align: center;
}

#logo{
width:250px;
}

.slogan{

font-size:20px;
font-weight:bold;
color:#333;

}


/* MENU */

#menu{
background:#3b82b1;
display:flex;
justify-content:center;
gap:20px;
padding:15px;
box-shadow:0 4px 8px rgba(0,0,0,0.2);
}

#menu a{
display:inline-block;
padding:10px 15px;
background:#333;
color:white;
text-decoration:none;
border-radius:6px;
font-weight:bold;
}

#menu a:hover{
background:#FDD131;
color:#333;
}



/* CONTENU */

#contentblock{
padding:70px 40px 40px 40px;
}

#contentblock h2{
margin-top:40px;
margin-bottom:40px;
}
#contentblock a{
color:#333;          /* couleur normale du site */
text-decoration:none;
}

#contentblock a:hover{
color:#2f7fb3;       /* bleu quand on passe la souris */
}
/* SECTION ACCUEIL */

.accueil{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:40px;
}

.texte{
flex:1;
margin-top:5px;
}

.formulaire{
flex:1;
}

.image img{
width:420px;
border-radius:10px;
border:8px solid #2f7fb3; 
}

.texte h2{
margin-bottom:25px;
color:#2E86C1;
}
.texte h2{
font-size:24px;
white-space:nowrap;
}
form{
margin-top:20px;
}

input, textarea, select{
width:100%;
padding:8px;
margin-top:5px;
border-radius:5px;
border:1px solid #ccc;
font-family:Arial, Helvetica, sans-serif;
}

input[type="submit"]{
background:#2E86C1;
color:white;
border:none;
cursor:pointer;
font-weight:bold;
}

input[type="submit"]:hover{
background:#FDD131;
color:#333;
}
.formulaire{
flex:1;
}
.formulaire h2{
color:#2E86C1;
}
.map-title{
text-align:center;
margin-top:40px;
color:#2E86C1;
}
.formulaire input[type="submit"]{
background:#3c82b0;
color:white;
border:none;
padding:12px 25px;
border-radius:6px;
font-size:16px;
cursor:pointer;
transition:0.3s;
width:100%;
}

.formulaire input[type="submit"]:hover{
background:#f1c232;
color:#333;
}
.map{
margin-top:20px;
}

.map iframe{
box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

.btn-call{
display:inline-block;
background:#2E86C1;
color:white;
padding:12px 20px;
border-radius:8px;
font-weight:bold;
text-decoration:none;
}

.btn-call:hover{
background:#FDD131;
color:#333;
}
/* BOUTONS ACCUEIL */

.boutons-accueil{
margin:25px 0;
display:flex;
gap:15px;
}

.btn-contact,
.btn-tarif{
display:inline-block;
padding:12px 22px;
border-radius:8px;
font-weight:bold;
text-decoration:none;
color:white;
background:#2E86C1;
transition:all 0.3s ease;
}

.btn-contact:hover,
.btn-tarif:hover{
background:#FDD131;
color:#333;
transform:translateY(-3px);
box-shadow:0 5px 10px rgba(0,0,0,0.2);
}

/* BANDEAU INTERVENTION */

.bandeau-urgence{
background:#2E86C1;
color:white;
text-align:center;
padding:10px;
font-weight:bold;
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
}

.bandeau-urgence a{
color:white;
text-decoration:none;
font-weight:bold;
}

.bandeau-urgence a:hover{
color:#FDD131;
}
/* VERSION TELEPHONE */

@media (max-width:768px){

#mainblock{
width:100%;
}

.accueil{
flex-direction:column;
}

.image img{
width:100%;
}

.services{
flex-direction:column;
}

#menu{
flex-direction:column;
gap:10px;
}

.boutons-accueil{
flex-direction:column;
}

}
/* LIGNE AVANT FOOTER */

#foot{
border-top:4px solid #2E86C1;
}
/* FOOTER */

#foot{
background:#333;
color:white;
margin-top:30px;
font-size:14px;
padding:20px;
text-align:center;
}
#foot p{
text-align:center;
}
p{
text-align: justify;
}
.footer-container{
display:flex;
justify-content:space-between;
max-width:1000px;
margin:auto;
padding:15px 20px;
flex-wrap:wrap;
}

.footer-col{
flex:1;
min-width:180px;
}

.footer-col h4{
color:#FDD131;
margin-bottom:5px;
font-size:16px;
}

.footer-col p{
margin:3px 0;
}

.footer-col a{
color:white;
text-decoration:none;
}

.footer-col a:hover{
color:#2E86C1;
}

.footer-bottom{
text-align:center;
padding:8px;
background:#222;
font-size:12px;
}