/************************************** Icones du menu */

html, body {
  height: 0px;
}

.icone-menu{
width:40px;
margin-left: 10px;
margin-right: -50px;
}

.plus {
margin-top:0px;
margin-right:10px;
color:#FFFFFF;
font-size: 2.5em;
}

.loupe {
margin-top:0px;
margin-right:10px;
z-index=3;
width:40px;
height:40px;
}

.maposition {
margin-top:0px;
margin-right:10px;
width:40px;
height:40px;
}

.icone-cat{
position : flex;
margin-right: 50px;
z-index:1;
width:65px;
}

/************************************ Tableaux */

.tabcenter{
   margin-left:auto;
   margin-right:auto;
}

tableau_balise {
border-collapse: separate;
border-spacing: 15px 15px;  
border-width:0px; 
 border-style:solid; 
 border-color:black;
vertical-align:middle;
}


table { 
border-width:0px; 
 border-style:solid; 
 border-color:black;
vertical-align:middle;
}

td{
margin-left: 0.7em;
margin-right: 0.79em;
}

.tab-edit,.tab-nbtraces{
text-align:center;
width:100%
}

.td-edit{
text-align:center;
width:100%;
}

.td-menu{
text-align:right;
}

.td-titre, td-right{
text-align:right;  
margin-top: 10px;
vertical-align:middle;
}

.td-esp,tr-esp{
border-spacing: 20px;
margin-top:25px;
padding:40px;
}

.tab-standard-ligne{
z-index:-1;
margin-top:15px;
margin-bottom: 15px;
}

/**************************************** Conteneurs */

.cont_vignettes_msg{
margin-left:25px;
margin-top : 15px;
display: relative;

}

.conteneur-test{
margin-top:30px;
display: flex;
}

.conteneur-bouton{
margin-top:30px;
display: flex;
justify-content: center;
}

.conteneur-test{
margin-top:30px;
display: flex;
}

.conteneur-www{
width:100%
margin-top:30px;
display: flex;
justify-content: right;
}

.conteneur-plus{
width:100%
margin-top:-30px;
position: relative;
justify-content: right;
}

.meta-contenu{
width:100%;
position : fixed;
top : 0px;
z-index:-1;
}

.contenu{
width:100%;
display:grid;
position :absolute;
top : 0px;
z-index:-1;
}

.scroll{
width:100%;
position:relative;
display: grid;
top : 0px;
z-index:-1;
}

.element{
 margin-top: 25px;
}

.centrer{
 text-align: center;
}

/* *************************************Cartes*/

#map{

width:90%;
height:1000px;
z-index:-1;
}

/* ************************************Titres*/

.lien_msg_trace{
display:relative;
font-size: 0.6em;
text-align: right;
margin-right:5%;
margin-bottom:12px;
color:#696969;
}

.msg_dateheure{
display:relative;
font-size: 0.6em;
text-align: left;
margin-left:5%;
margin-bottom:12px;
color:#696969;

}

.titre-edit{
display:relative;
font-size: 2em;
text-align: center;
color:#696969;
font-weight: bold;
font-family: 'Ubuntu', sans-serif;
}

.test-titre{
 margin-top: 90px;
font-size: 1.3em;
text-align:center;
 margin-bottom: 20px;
}

.titre{
font-size: 1.4em;
display: block;
text-align: center;
color:#696969;
margin-top:30px;
font-weight: bold;
font-family: 'Ubuntu', sans-serif;
}

.titre-htm{
font-size: 1.4em;
display: block;
text-align: center;
color:#696969;
margin-top:25px;
font-weight: bold;
font-family: 'Ubuntu', sans-serif;
}

.titre-gen{

font-size: 2em;
display: block;
text-align: left;
color:#FFFFFF;
vertical-align:middle;
margin-left:50px;
font-weight: normal;
font-family: 'Ubuntu', sans-serif;
}

.titre-recherche{
font-size: 1.3em;
display: block;
text-align: center;
color:#696969;
margin-top:15px;
margin-bottom:20px;
font-weight: normal;
font-family: 'Ubuntu', sans-serif;
}

/*********************************** Recherche*/


.zone-recherche{
z-index:1;
position:relative;
font-size: 1.1em;
}

/************************************ Boutons */

.bouton{
text-align: right;
margin-left: 10px;
}

.bt_map{
position : relative;
z-index:0;
top : 20px;
right:0px;
width:35px;
}

/********************************elements */

.adresse{
z-index:-1;
font-size: 0.8em;
display: block;
text-align: center;
color:#AABBCC;
margin: 10px;
font-weight: normal;
}

.arrondi_gris{
border-radius: 10px;
background-color : #D3D3D3;
}

.arrondi_vert{
border-radius: 10px;
background-color : #63E990;
}

.arrondi_bleu{
border-radius: 10px;
background-color : #50BEEB;
}

.message_de_moi
{
z-index:-2;
display: relative;
margin-top:25px;  
margin: 40px;
padding: 20px;
color:#696969;
border-radius: 10px;
background-color : #90EE90;
opacity:1;
 box-shadow:4px 4px 5px 0 rgba(0,0,0,0.5);
font-family: 'Ubuntu', sans-serif;

}

.message_a_moi
{
z-index:-2;
display: relative;
margin-top:15px; 
width:70%  
margin: 40px;
padding: 20px;
color:#696969;
border-radius: 10px;
background-color : #87CEEB;
opacity:1;
 box-shadow:4px 4px 5px 0 rgba(0,0,0,0.5);
font-family: 'Ubuntu', sans-serif;

}

.message_entre_eux
{
z-index:-2;
display: relative;
margin-top:15px; 
width:70%  
margin: 40px;
padding: 20px;
color:#696969;
border-radius: 10px;
background-color : #EDEDED;
opacity:1;
 box-shadow:4px 4px 5px 0 rgba(0,0,0,0.5);
font-family: 'Ubuntu', sans-serif;

}


.description
{
z-index:-2;
display: relative;
margin-top:15px;  
margin: 40px;
padding: 20px;
color:#696969;
border-radius: 10px;
background-color : #EDEDED;
opacity:1;
 box-shadow:4px 4px 5px 0 rgba(0,0,0,0.5);
font-family: 'Ubuntu', sans-serif;

}


/********************************** Images */

.partage{
position : absolute;
z-index:1;
top : -15px;
left:0px;
width:35px;
}

.clipzone
{
  position:relative;
  width:100px; 
  height:100px;
  margin-left:25px;
  margin-bottom : 10px;
  margin-top : 5px;
  overflow:hidden;
}

.clipped
{
  position:absolute;
  clip:rect(10x, 50px, auto, 10px);
}

.vignette_msg{
z-index:1;
height:120px;
width:auto;
 box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
}


.img1{
z-index:1;
top : 25px;
width:40px;
}

.img4{
z-index:1;
top : 25px;
width:20px;
}

.img5{
position : absolute;
z-index:1;
top : -15px;
right:-15px;
width:35px;
}

img {
vertical-align:middle;
height:auto;
width:100%;
}

.img-couche{
position : absolute;
z-index:3;
top : 20px;
left:20px;
height:50px;
width:50px;
 box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
}

.img-couche2{
position : absolute;
z-index:3;
Bottom : 20px;
left:20px;
width:50px;
 box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
}



.img6{
position : absolute;
z-index:1;
bottom : -15px;
left:-5px;;
width: 35px;

}

.img8{
position : absolute;
z-index:1;
bottom : 20px;
right:15px;
width: 45px;

}

.img-cat
{
width:100px;
}

.img-map
{
width:250px;
}

.i100{
top : 25px;
width:100px;
}

.img2{
z-index:1;
display: block;
width:90%;
margin-left:auto;
margin-right:auto;
 box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
  margin: 10px;
  padding: 10px;
}

.parent_img {
display: block;
width:90%;
margin-left:auto;
margin-right:auto;
 box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
  margin: 10px;
  padding: 10px;
}

.img7{
display: block;
width:30px;
margin-right:15px;
z-index:3;
}

.img3{
display: block;
width:20%;
margin-left:auto;
margin-right:auto;
 box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
  margin: 10px;
  padding: 10px;
}

.el0{
z-index:-1;
position: relative;
width:90%;
margin-left:auto;
margin-right:auto;
 box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
  margin: 10px;
  padding: 10px;
}

/***************************** divers */
.www{
position : relative;
z-index:1;
bottom : 40px;
margin-right:25px;
width:35px;
}

.tel{
position : absolute;
z-index:1;
bottom : -0px;
left:-10px;
width:45px;
}

couleur{
color=#FF55GG;
}

h1 { 
color: #FF0000;
}

.topoi
{
text-align:center;
margin-left:auto;
margin-right:auto;
font-size: 0.8em;
margin-top:15px;  
margin: 0px;
  padding: 0px;
color:#696969;
font-family: 'Ubuntu', sans-serif;
}

.connexion
{
text-align:center;
margin-left:auto;
margin-right:auto;
font-size: 1.1em;
margin-top:35px;  
margin: 0px;
  padding: 0px;
color:#696969;
font-family: 'Ubuntu', sans-serif;
}