/* ###############################################         HEADER                ####################################################################### */




#logosentete                     
{
 display: flex;                        /* placement des images côte à côte logo SAP - WEB48 - TEL en entête du site */
 justify-content:space-between;
 width:90%;
 margin-left: auto;
 margin-right: auto;	
	
} 

#logosentete a
{
text-decoration:none; 	
}

 #imagesap
 {
 border-width:2px;               /* Logo SAP à gauche de l'entête */
 border-style:solid;
 border-color:white;
 border-radius:10px;
 width: 125px;
 height:100px;
 } 
 
 
 
 #imagesap:hover
 {
 border-width:2px;               /* Logo SAP à gauche de l'entête */
 border-style:solid;
 border-color:red;
 border-radius:10px;
 width: 125px;
 height:100px;
 } 
 
  .imagelogo
 {
 border-width:2px;               /* bordure de l'images  logo WEB48   */
 border-style:solid;
 border-color:white;
 border-radius:0px;
 margin: 10px;
 width: 500px;
 height:80px;
 } 
 
 .imagelogo:hover
 {
 border-width:2px;               /* bordure des images de l'entête*/
 border-style:solid;
 border-color:red;
 border-radius:0px;
 margin: 10px;
 width: 500px;
 height:80px;
 } 
 
 
 #logotelandnumbertel
 {
 display:flex;
 flex-direction:column;
 justify-content:center;
 border-width:2px;
 border-style:solid;
 border-radius:10px;
 border-color:white;
 padding:3px;
 
 } 
 
 
 #logotelandnumbertel:hover
 {
 display:flex;
 flex-direction:column;
 justify-content:center;
 border-width:2px;
 border-style:solid;
 border-radius:10px;
 border-color:red;
 padding:3px;

 } 

 #logotel
 
 {
 margin-left:10px;
 border-width:2px;               /* Logo tel à droite de l'entête */
 border-style:solid;
 border-color:white;
 border-radius:5px;
 width: 80px;
 height:80px;
 } 
 
#numbertel
{
font-family: sans-serif;
color: grey;
font-weight:bold;

}
 
caption
{
font-weight: bold;
}


/* ###############################################         MENU NAVIGATION                ####################################################################### */



#menu                    
{
    display: flex;                         /* placement des elements menu côte à côte */
    justify-content: space-around;
	margin-top: 20px;
	padding:5px;
	border-width:2px;              
    border-style:solid;
    border-color:white;
    border-radius:5px;
    background-color: grey;
	width:90%;
	margin-left: auto;
    margin-right: auto;
	
	
} 

.liennav

{
	text-decoration: none;
	font-family: sans-serif;
	color: black;
	font-weight:bold;
}


.nav1, .nav2, .nav3, .nav4, .nav5, .nav6       /*border: 1px  solid;   bordure du bouton de navigation  */
{	
	border-radius: 0px;
	padding:2px;
	background-color: white;
	border:2px solid grey;
	
	
}

.nav1:hover, .nav2:hover, .nav3:hover, .nav4:hover, .nav5:hover, .nav6:hover  /* modification du menu de navigation au passage de la souris*/

{ 
   border-radius: 0x;
   padding:2px;
   background-color:#71be03;
   border:2px solid grey;   
   
}

.navactif
{

  border-radius: 0px;
  padding:2px;
  background-color:#71be03;
  border:2px solid grey; 
	
}

/* ###############################################         SECTION FOOTER         ####################################################################### */




.footer
{
display: block;
margin-left: auto;
margin-right: auto;	
height: 100px;
width: 90%;
border: 5px solid grey;
margin-top:50px;
background-color:#dcdcdc;
}

.partenaire

{
display:flex;
justify-content:center;
}


#hyperu, #webrank, #bourgs
{
width:150px;	
height:80px;
border:1px solid black;
margin-top:10px;
margin-left:20px;

}

#hyperu:hover, #webrank:hover, #bourgs:hover

{
border:2px solid red;	
}

.mentions 
{
margin-left:auto;
margin-right:auto;
margin-top:20px;
display:flex;	
justify-content:center;
width:90%;
height:15px;
border: 1px solid black;
color:white;
background-color:black;
font-size:0.8em;
}



/* ###############################################         SECTION COMMUNE     Installation-Depannage-Assistance          ####################################################################### */


.phototext
{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
margin-top:30px;
}




.photo
{
 
 border-width:1px;
 border-style:solid;
 border-radius:0px;
 border-color:black;
 padding:0px;	
 width:90%;
 height:300px;
}


/* ###############################################         SECTION ACCUEIL             ####################################################################### */	


#photoaccueil
{

display: block;
margin-left: auto;
margin-right: auto;	
height: 300px;
width: 100%;

}

.commentaireaccueil
{
 
 border-top:0px;
 border-bottom:0px;
 border-style:solid;
 border-color:#71be03;
 margin-bottom:50px;
 margin-top:50px;
 padding:5px;	
 width: 90%;
 height:800px;
 font-size:1.7em;
}



.commentaireaccueil h2
{
text-align:center;

}
 


.commentaireaccueil h3 
{
padding-left:20px;
} 


.commentaireaccueil ul
{
padding-left:60px;
} 





.commentaireaccueil ul
{
list-style-type:circle;	
}


.zone

{
columns:190px;	
}



/* ###############################################         SECTION INSTALLATION              ####################################################################### */	

#photoinstallation

{
display: block;
margin-left: auto;
margin-right: auto;	
height: 300px;
width: 100%;

}

.commentaireinstallation

{
 
 border-top:0px;
 border-bottom:0px;
 border-style:solid;
 border-color:#71be03;
 margin-bottom:50px;
 margin-top:50px;
 padding:5px;	
 width: 90%;
 height:650px;
 font-size:1.7em;
}




.commentaireinstallation h2
{
text-align:center;

}
 


.commentaireinstallation h3 
{
padding-left:20px;
} 


.commentaireinstallation ul
{
padding-left:60px;
} 





.commentaireinstallation ul
{
list-style-type:circle;	
}









/* ###############################################         SECTION DEPANNAGE               ####################################################################### */

#photodepannage
{
display: block;
margin-left: auto;
margin-right: auto;
height:300px;
width:100%;	
}

.commentairedepannage
{
 
 border-top:0px;
 border-bottom:0px;
 border-style:solid;
 border-color:#71be03;
 margin-bottom:50px;
 margin-top:50px;
 padding:5px;	
 width: 90%;
 height:850px;
 font-size:1.7em;
}


.commentairedepannage h2
{
text-align:center;
}
 
.commentairedepannage h3 
{
padding-left:20px;
} 

.commentairedepannage ul
{
padding-left:60px;
} 


.commentairedepannage ul
{
list-style-type:circle;	
}
/* ###############################################         SECTION ASSISTANCE               ####################################################################### */

#photoassistance
{
display: block;
margin-left: auto;
margin-right: auto;
height:300px;
width:100%;	
}


.commentaireassistance
{
 
 border-top:0px;
 border-bottom:0px;
 border-style:solid;
 border-color:#71be03;
 margin-bottom:50px;
 margin-top:50px;
 padding:5px;	
 width: 90%;
 height:450px;
 font-size:1.7em;
}


.commentaireassistance h2
{
text-align:center;
}
 
.commentaireassistance h3 
{
padding-left:20px;
} 

.commentaireassistance ul
{
padding-left:60px;
} 

.commentaireassistance ul
{
list-style-type:circle;	
}



/* ###############################################         SECTION TARIFS               ####################################################################### */



#phototarifs
{
display: block;
margin-left: auto;
margin-right: auto;	
height:300px;
width:100%;	
}





.commentairetarifs
{
 
 border-top:0px;
 border-bottom:0px;
 border-style:solid;
 border-color:#71be03;
 margin-bottom:50px;
 margin-top:50px;
 padding:5px;	
 width: 90%;
 height:900px;
 font-size:1.7em;
}


.commentairetarifs h2
{
text-align:center;
}
 
.commentairetarifs h3 
{
padding-left:20px;
} 

.commentairetarifs ul
{
padding-left:60px;
} 

.commentairetarifs ul
{
list-style-type:circle;	
}


.listetarifs

{
list-style-type:"> ";

}


.surligne
{
background-color:yellow;	
	
}
.gras
{
font-weight:bold;	
	
}


.souligne
{
text-decoration:underline;	
text-decoration-color:red;
text-decoration-thickness:3px;

}


.conditions

{
color:red;	
}


.commentairetarifs a

{
text-decoration:none;

}

.commentairetarifs a:link 

{
color:black;
font-weight:bold;

}
.commentairetarifs a:visited 

{
color:black;
font-weight:bold;

}


/* ###############################################         SECTION CONTACT              ####################################################################### */

.formcontact
{
margin-right:auto;
margin-left:auto;	
width:90%	
}

.contact         /* bloc de 3 element: formulaire de contact(fieldset) + logo telephone et numero(container) + logo mail et adresse mail(container)*/
{
display:flex;
flex-direction:row;
justify-content:space-around;
align-items:center;
margin-top:0px;	
}




fieldset               /* formulaire de contact */
{
margin-top:30px;
padding-left:20px;
border-radius:20px;	
border:1px solid black;
background-color:#71be03;
width:300px;
height:400px;

}


.container  /* contient les logos du telephone et du mail */
{

border-radius:20px;	
border:1px solid black;
background-color:white;
width:200px;
height:200px;
margin-top:auto;
margin-bottom:auto;

}
.tel, .mail /* police du telephone et du mail */
{
font-family: sans-serif;
color: grey;
font-weight:bold;
text-align:center;
font-size:1em;
}

 .logotext /* logo +texte */
 
 {
 margin-left:10px;
 border-style:solid;
 border-color:white;
 border-radius:5px;
 width: 160px;
 height:160px;
 } 

.champs

{
color:red;	
}

.exp:hover
{

background-color:red;
	
}







 /* ##########################################################################################         END             ####################################################################### */