@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:600);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:700);
@import url(http://fonts.googleapis.com/css?family=Wallpoet);





 html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
            background-color: rgb(207, 207, 207);
        }

        #conteneur {
            width: 95%;
            max-width: 100%;
             margin-right: auto;
            margin-left: auto;
            /* Prend toute la hauteur de la fenêtre */
            margin: 2.5% auto;
            overflow: visible;
            

            line-height: 1.8;
        }

#nav {
	background-color: #AC0306;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content : space-around;
	align-items: center;
	
	
}

/*DEBUT DU FORMATAGE DES LIENS SIMPLES*/
/*style the dropdown button */

.BoutonSimple{
	background-color: #AC0306;
	color : #cccccc;
	padding: 12px;
	/* font-size: 100%; */
	font-family: 'Titillium Web'; font-weight: 600;
	font-weight: bold;
	text-shadow:1px 1px 0px rgba(0, 0, 0, 0.4);
	text-transform: uppercase; text-align: center;
	text-decoration: none;
	border: none;
	cursor: pointer;
	
	
}



/* change the background color of the BoutonSimple when the dropdown content is shown */
.BoutonSimple:hover{
	background-color:#580a0c;
	
}



/*FIN DU FORMATAGE DES LIENS SIMPLES*/

/*DEBUT DU FORMATAGE DES MENUS DEROULANTS*/

/*style the dropdown button */
.dropbtn{
	background-color: #AC0306;
	color : #cccccc;
	padding: 12px;
	font-size: 100%;
	font-family: 'Titillium Web'; font-weight: 400;
	font-weight: bold;
	text-shadow:1px 1px 0px rgba(0, 0, 0, 0.4);
	text-transform: uppercase; text-align: center;
	border: none;
	cursor: pointer;
	width: 130px ;
	
}



/* change the background color of the dropdown when the dropdown content is shown */
.dropbtn:hover.dropbtn{
	background-color:#580a0c;
	/* width: 150px ; */
}

.dropbtn:focus.dropbtn{
	outline: none;
	/* background-color: #489; */
}

.dropdown-content{
	background-color: #333;
	color : #AC0306;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  /* position: relative; */
  display: inline-block;
  width: 130px ;
  
}



/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	width :12%;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	
	
	
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  width: inherit;
}


/* <Links inside the dropdown */
.dropdown-content a{
	color:#AC0306;
	font-family: 'Titillium Web'; font-weight: 400;
	font-weight: bold;
	padding: 3px 6px;
	text-decoration: none;
	display:block;
	
}


/* change the background color of the dropdown item when the dropdown item is pointed */
.dropdown-content a:hover {
	background-color:  #232323;
	color:#ccc;
	}
	
a.dropdown {
    display: inline-block;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/*FIN DU FORMATAGE DES MENUS DEROULANTS*/



/*DEBUT DU FORMATAGE DE LA ZONE  BANDEAU, LOGO MW ET CHOIX LANGUE*/

#bandeau {
	 
	background-color: #eee;
	width: 100%;
}

#shadow1{
	width: 100%;
}

#zonelogo {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background-color: #eee;
			height: 130px; 
			width: 100%;
			box-sizing: border-box;
			margin-top: -30px;
		}

		#logo {
			width: 265px;
			height: 85%;
			
			margin : 0 20px;
		}

		#langue {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items:center;
			width: 100px;
			height: 50px;
			margin-right: 20px;
			
		}

/*FIN DU FORMATAGE DE LA ZONE BANDEAU, LOGO MW ET CHOIX LANGUE*/

/*FORMATAGE DU BOUTON Totop*/


#myBtn {
			background-color: #f1f1f1;
			border: none;
			border-radius: .4rem;
			padding: 12px 16px;
			cursor: pointer;
			box-shadow: 0 2px 6px rgba(0,0,0,0.2);
			color: #333;
			transition: background 0.2s;
			position: fixed;
			bottom: 5px;
			right: 40px;
			z-index: 1000;
			rotate: 90deg;
		}
		#myBtn:hover {
			background-color: #ddd;
		}

/*DEBUT DU FORMATAGE CORPS PRINCIPAL*/	

.textecadre {
            width:60% ;
        }

        


        .photo {
            max-width: 100vw;
            margin-right: auto;
            margin-left: auto;
        }

        

        .photocadre img {
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 5px;
            

        }

        .photo img {
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 5px;
            margin-right: 0;

        }

        .photoséparation img {
            max-width: 100%;
            height: auto;

        }

        .CadreTextePhoto {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
            margin-top: 20px;
            margin-bottom: 20px;
            
        }

        .textecadre {
    width: 35%;
    text-align: left; /* contenu collé à gauche */
}

.photocadre {
    width: 40%;
    text-align: left; /* contenu collé à gauche */
}

/*FIN DU FORMATAGE CORPS PRINCIPAL*/

/*DEBUT DU FORMATAGE FOOTER*/


.boitefooter{
	 display: flex;
	 flex-direction: row;
	 justify-content: space-between;
	 align-items: center;	
	 height:80px;
	 background-color: #eee;
	 	
}



#basdepage{ 
	text-transform: uppercase;
	text-decoration: none;
	color: #666666;
	/* background-color: #AC0306; */
	padding: 2.5%;
	font-family: arial; 
	font-weight: bold;
	
	}
	
#adressemail{ 
	
	text-transform: uppercase;
	text-decoration: none;
	color: #666666;
	padding: 2.5%;
	font-family: arial; 
	font-weight: bold;
	}
	
a{	
		text-decoration: inherit;
		color: inherit;
	}
/*FIN DU FORMATAGE FOOTER*/

/*DEBUT DU FORMATAGE DES MEDIA QUERIES*/

@media (max-width: 1000px) {
    .CadreTextePhoto {
        flex-direction: column;
        align-items: center;
    }
}

  

@media (max-width: 600px) {
  #nav {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 0;
  }

  #nav > * {
    width: 100%;
    text-align: center;
    margin: 5px 0;
  }

  .BoutonSimple, .BoutonSimple2{
		width: 230px ;
		border-bottom : 1px solid #232323;
		
	}
	.dropdown, .dropbtn{
	
	border-bottom : 0.25px solid #232323;
	width: 254px;
	}
}







@media (max-width: 440px) {
	
	.txt1 {
			font-size: 20px;
			
		}
	
	.BoutonSimple, .BoutonSimple2{
		width: 230px ;
		border-bottom : 1px solid #232323;
		
	}
	
	.dropdown, .dropbtn{
	
	border-bottom : 0.25px solid #232323;
	width: 254px;
	}

	#zonelogo{
		
	flex-direction: column;
	justify-content: flex-center;
	align-items: flex-center;
	margin-top:	0px;
	height: 170px;
	}

	#logo {
			width: 265px;
			height: 85%;
			
			margin: 10px;
		}
	#langue {
			margin: 10px;
			
		}

	}