@charset "utf-8";
/* Style the body */
body {
	font-family: Arial;
	margin: 0;
	background-image: url(Images/fondsite4.jpg);
	width: 100%;
}

/* Header/logo Title */
.header {
	text-align: right;
	color: white;
	background-image: url(Images/Logo-MURACHAT-noir-NRM.png);
	background-repeat: no-repeat;
	background-position: center;
	position: fixed;
	margin-right: auto;
	margin-left: auto;
	width: 95%;
	z-index: 101;
	height: auto;
	padding: 60px;
	background-color: #FFF;
}
.centre{
	text-align: center;
}

/* Style the top navigation bar */
.navbar {
	display: flex;
	position: fixed;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	margin-top: 100px;
	z-index: 100;
	text-align: center;
}

/* Style the navigation bar links 
.navbar a {
    
	color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
} 

/* Change color on hover */
.navbar a:hover {
	background-color: #9999FF;
	color: black;	
}*/
.active {
	background-color: #CC3399;
	color: black;
}
/* Column container */
.row {
	display: flex;
	flex-wrap: wrap;
		
}

h1 {
	color: #000;
	background-image: url(Images/patte-chat-20-22.png);
	background-repeat: no-repeat;
	background-position: left top;
	width: 30%;
	margin-right: auto;
	margin-left: auto;
	}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */


/* Main column */

.col {
	flex: 45%;
	marging: auto;
	padding: 2%;
	display: inline-block;	
}
/* Fake image, just for this example */
.fakeimg {
    background-color: #aaa;
    width: 100%;
  
}

/* Footer */
.footer {
	padding: 10px;
	text-align: center;
	background-color: #CCCCCC;
}

#blocktexte{
	border-radius: 15px;
	font-family: 'Josefin Sans', sans-serif;
	height: auto;
	width: 100%;
	border: thin solid #999999;
	font-size: medium;
	display: inline-block;
	padding: 1%;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: 2%;
	margin-left: auto;
}
#blockvide{
	
	height: 127px;
	width: 100%;
	
	display: inline-block;
	
	
}
IMG.imagecentree {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 40%;
	
}
.video {
	text-align: center;
	margin-left:auto;margin-right:auto;
}
IMG.boutoncentree {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 20%;
}
IMG.imagegauche {
	display: block;
	float: left;
	width: 10%;
	margin: 2%;
	
}

IMG.imagegauchePT {
	display: block;
	float: left;
	width: 10%;
	margin-top: 0%;
	margin-right: 2%;
	margin-bottom: 5%;
	margin-left: 0%;
	}
IMG.icongauche {
	display: block;
	float: left;
	width: 10%;
	margin: 2%;
}
IMG.icon {
	
	width: 5%;

}

.bleu{
	color: #009fe3;
}
.bleugras{
	color: #009fe3;
	font-weight: bold;
}
#deconnect{
	float: left;
	height: 36px;
	width: 120px;
	position: fixed;
	margin-top: 40px;
}

.infobulle {
  position: relative;  /* les .infobulle deviennent référents */
  cursor: help;
}

/* on génère un élément :after lors du survol et du focus :*/

.infobulle:hover::after,
.infobulle:focus::after {
	content: attr(aria-label);  /* on affiche aria-label */
	position: absolute;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
	z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
	white-space: nowrap;  /* on interdit le retour à la ligne */
	color: #000;
	font-size: x-small;
	top: -4em;
}
.grosINPUT{
	font-size: large;
	font-weight: bold;
	text-align: center;
}

.image_modif {
	display: inline-block;
	position: relative;
	background: url(../images/logo_modifier2.png);
	background-repeat: no-repeat;
	height: 30px;
	width: 30px;
    }
      
   
      
    .image_modif:hover {
         background: url(../images/logo_modifier2.png);
    }

P, ul{
	width: 70%;
	margin-right: auto;
	margin-left: auto;
	list-style-image: url(Images/patte-chat-noir-15.png);
	}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
	#blockvide{
	
	height: 135px;
	width: 100%;
	
	display: inline-block;
	
	
}
   
	.row,  {   
        flex-direction: column;
    }
	.header {
	width: 90%;
	text-align: center;
	background-image: url(Images/Logo-MURACHAT-noir-MN.png);
	margin-right: auto;
	margin-left: auto;
	background-position: center;	
	}
	.col {
	flex: 100%;
	marging: auto;
	
	display: inline-block;
}
#blocktexte{
	border-radius: 15px;
	font-family: 'Josefin Sans', sans-serif;
	height: auto;
	width: 98%;
	border: thin solid #009fe3;
	font-size: medium;
	display: inline-block;
	padding: 1%;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: 2%;
	margin-left: auto;
}	
P, ul{
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	list-style-image: url(Images/patte-chat-noir-15.png);
	}
IMG.imagecentree {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	
	}
	IMG.boutoncentree {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 40%;
}
	
IMG.imagegauche {
	display: block;
	float: left;
	width: 20%;
	margin-top: 20%;
	margin-right: 3%;
	margin-bottom: 20%;
	margin-left: 0%;	
	}
	IMG.imagegauchePT {
	display: block;
	float: left;
	width: 20%;
	margin-top: 0%;
	margin-right: 3%;
	margin-bottom: 15%;
	margin-left: 0%;	
	}
	
	#deconnect{
	float: left;
	height: 36px;
	width: 120px;
	position: fixed;
	margin-top: 40px;
}
h1 {
	color: #000;
	background-image: url(Images/patte-chat-20-22.png);
	background-repeat: no-repeat;
	background-position: left top;
	width: 50%;
	margin-right: auto;
	margin-left: auto;
	}
}

@media screen and (max-width: 700px) {
    .row{   
        flex-direction: column;
		position: relative;
    }
	
	.header {
	display: flex;
	text-align: center;
	background-image: url(Images/Logo-MURACHAT-noir-PT.png);
	position: relative;
	padding-top: 10px;
	background-position: center;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	width: 70%;
	}
	.col {
	marging: auto;
	width: 94%;
	display: inline-block;
}

IMG.imagecentree {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	
	}
	IMG.boutoncentree {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 40%;
}
	
IMG.imagegauche {
	display: block;
	margin-left: 0%;
	margin-right: 2%;
	width: 30%;
	margin-top: 0%;
	margin-bottom: 0%;
	}
IMG.imagegauchePT {
	display: block;
	float: left;
	width: 20%;
	margin-top: 0%;
	margin-right: 3%;
	margin-bottom: 5%;
	margin-left: 0%;	
	}	
IMG.icongauche {
	display: block;
	float: left;
	width: 20%;
	margin: 2%;
}
#blockvide{
	height: 5px;
	width: 100%;
	display: inline-block;
	;
}
.navbar {
	flex-direction: column;
	position: relative;
	background-color: #1983d1;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	margin-top: 5px;}
#deconnect{
	float: left;
	height: 36px;
	width: 120px;
	position: fixed;
	margin-top: 30px;
}

IMG.icon {
	
	width: 10%;

}

h1 {
	color: #000;
	background-image: url(Images/patte-chat-20-22.png);
	background-repeat: no-repeat;
	background-position: left top;
	width: 98%;
	margin-right: auto;
	margin-left: auto;
	}
	
	#blocktexte{
	border-radius: 15px;
	font-family: 'Josefin Sans', sans-serif;
	height: auto;
	width: 98%;
	border: thin solid #009fe3;
	font-size: medium;
	display: inline-block;
	padding: 1%;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: 2%;
	margin-left: auto;
	background-color: #F00;
}	
P, ul{
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	list-style-image: url(Images/patte-chat-noir-15.png);
	}
}/* CSS Document */
/* CSS Document */