/* !!!! PENSER A SAUVEGARDER A CHAQUE MODIFICATION FAITE --- > CRTL + S !!!!! */

@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

*
{
	padding: 0;
	margin:0;
	font-family: 'Nunito', sans-serif;
}

h2
{
	text-align: center;
	padding-bottom: 50px;
	padding-left: 30px;
	padding-top: 50px;
}

h3
{
	text-align: center;
	padding-bottom: 30px;
}

h4
{
	padding-bottom: 5px;
	color : red;
}

h5
{
	text-align: center;
	padding-bottom: 50px;
	color: red;
}

h6
{
	text-align: right;
	padding-bottom: 50px;
	font-size: 12px; 	
}

body
{
	background-color: #f7f4f0;
}

/* HEADER*/

header

/* Début - Reduction image de tête*/
{
	display:flex;
	flex-direction:row;
	justify-content: space-between;
	background-image: url(img/forest2.jpg);
	background-size: cover;
	height: 100%;
}
/* Fin - Reduction image de tête*/

/* Début - Réduction et centrage logo*/

#logoclubasc
{
	width: 50%;
	height: auto;
	display: block;
    margin: auto;
    margin-top: 7%;
    margin-bottom: 7%
}

/* Fin - Réduction et centrage logo*/

/*LOGO*/

#logo
{
	width: 300px;
	margin-left: 20px;
	margin-top: -170px;
}

#logo2
{
	width: 140px;
	margin-left: 150px;
}

#logo3
{
	width: 75%;
	height: auto;
	display: block;
    margin: auto;
}

/*Début - MENU*/

#menu
{
	margin-bottom: 20px;
	background-color: white;
	height: 50px; 
	margin-top: -20px;
	box-shadow: 10px 5px 5px #ece9e9;
}

#menu ul 
{
	padding-top: 20px;
}

#menu li 
{
	list-style: none;
	padding-right: 30px;
	font-weight: bold;
	color: black;
}

#menu a
{
	text-decoration: none;
	color: black;
}

/* Fin - MENU*/

/* Début - SOUS-MENU*/

#sous_menu_01 , #sous_menu_02 , #sous_menu_03 
{
	background-color: #5AB161;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

#sous_menu_01 li , #sous_menu_02 li , #sous_menu_03 li
{
	padding-top: 3px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 3px;
	color: white;
	font-size: 14px;
}

#sous_menu_01 li a , #sous_menu_02 li a , #sous_menu_03 li a
{
	color: white;
}

#menu-deroulant, #menu-deroulant ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#menu-deroulant {
/* menu à droite dans la page */
    text-align: right;
}
#menu-deroulant li {
/* on place les liens du menu horizontalement */
    display: inline-block;
}
#menu-deroulant ul li {
/* on enlève ce comportement pour les liens du sous menu */
    display: inherit;
}
#menu-deroulant a {
    text-decoration: none;
    display: block;
	color:#000;
}
#menu-deroulant ul {
    position: absolute;
/* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
    z-index: 1000;
}
#menu-deroulant li:hover ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
}

/* Fin SOUS-MENU*/

/* Début - Couleur MENU */

#leclub , #leclub a
{
	color:red;
}

#actualites, #actualites a
{
	color:blue;
}

/* Fin - Couleur MENU */

/* Début - Modele Article */

#modelearticle1
{
	width: 87%;
	margin-left: 40px;
	margin-right: 40px; 
	margin-top: 20px;
	background-color: white;
	padding-left: 4%;
	padding-right: 4%;
	padding-top: 4%;
	padding-bottom: 35px;
	box-shadow: 10px 5px 5px #ece9e9;
	margin-bottom: 30px;
}

#modelearticle1 p 
{
	text-align: justify;
}

#modelearticle1 ul
{
	display: flex;
	flex-direction: row;
}

#modelearticle1 li
{
	list-style: none;
}

/* Fin - Modele Article */

/* Début - Image/photos */

#photo
{
	width: 100%;
	height: auto;
	display: block;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
	border: solid 1px grey;
}

/* Fin - Image/photos */

/* Début - Définition des sections */

#section
{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

#sectiondroite
{
	margin-left: 20px;
	margin-right: 20px;
	width: 350px;
}

#sectiongauche
{
	margin-left: 0px;
	margin-right: 0px;
	width: 100%;
}

/* Fin - Définition des sections */

/* Début - Définition Boites latérales - Section droite */

#mascotte
{
	background-color: white;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 20px;
	box-shadow: 10px 5px 5px  #ece9e9;
	margin-top: 20px;
}

#partenaires, #photos
{
	background-color: white;
	box-shadow: 10px 5px 5px  #ece9e9;
	padding-left: 12px;
}

#partenaires img 
{
	height: 50px;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 10px;
}

#photos img
{
	width: 296px;
	margin-left: 8px;
}

#boite2, #boite3
{
	padding-top: 10px;
}

/* Fin - Définition Boites latérales - Section droite */

/*FOOTER*/

footer p 
{
	text-align: center;
	font-size: 12px;
	margin-top: 20px;
}

/* MEDIA QUERIES - RESPONSIVE*/

@media (min-width: 1001px) and (max-width: 1200px)
{
	#logo
	{
		width: 200px;
		margin-left: 20px;
		margin-top: -170px;
	}

	#logo2
	{
		width: 140px;
		margin-left: 60px;
		margin-top: 10px;
	}

	#menu li 
	{
		list-style: none;
		padding-right: 20px;
		font-weight: bold;
		font-size: 16px;
		color: black;
	}

	#menu-deroulant 
	{
	  	text-align: right;
	}

	#sous_menu_01 li , #sous_menu_02 li , #sous_menu_03 li
	{
		font-size: 12px;
	}

	#sectiongauche
	{
		margin-left: 0px;
		margin-right: 10px;
		width: 100%;
	}

	#modelearticle1 h2
	{
		text-align: center;
		padding-bottom: 50px;
		padding-left: 15px;
		padding-top: 65px;
		font-size: 18px;
	}
}

@media (min-width: 601px) and (max-width: 1000px)
{
	#logo
	{
		display: none;
	}

	#logo2
	{
		width: 140px;
		margin-left: 10px;
		margin-top: 30px;
	}

	#menu li 
	{
		list-style: none;
		padding-right: 20px;
		font-weight: bold;
		color: black;
	}

	#menu-deroulant 
	{
	  	text-align: right;
	}

	#sous_menu_01 li , #sous_menu_02 li , #sous_menu_03 li
	{
		font-size: 12px;
	}

	#sectiongauche
	{
		margin-left: 0px;
		margin-right: 15px;
		width: 100%;
	}

	#modelearticle1 h2
	{
		text-align: center;
		padding-bottom: 50px;
		padding-left: 15px;
		padding-top: 65px;
		font-size: 18px;
	}
}

@media (max-width: 600px)

{
	header

	/* Début - Reduction image de tête*/
	{
		display:flex;
		flex-direction:row;
		justify-content: space-between;
		background-image: url(img/forest1.jpg);
		background-size: cover;
		height: 100%;
	}
	
	/* Fin - Reduction image de tête*/

	/* Début - Réduction et centrage logo*/

	#logoclubasc
	{
		width: 80%;
		height: auto;
		display: block;
    	margin: auto;
    	margin-top: 16%;
    	margin-bottom: 17%
	}
	
	/* Fin - Réduction et centrage logo*/

	#logo
	{
		display: none;
	}

	#logo2
	{
		width: 140px;
		margin-left: 10px;
		margin-top: 30px;
	}

	#menu
	{
		margin-bottom: 20px;
		background-color: white;
		height: 50px; 
		margin-top: -20px;
		box-shadow: 10px 5px 5px #ece9e9;
	}

	#menu ul 
	{
		padding-top: 5px;
	}

	#menu li 
	{
		padding-left: 10px;
		padding-right: 20px;
		font-size: 14px;
	}

	#menu-deroulant 
	{
	/* menu à droite dans la page */
    	text-align: center;
	}


	#sous_menu_01 li , #sous_menu_02 li , #sous_menu_03 li
	{
		padding-top: 3px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 3px;
		color: white;
		font-size: 12px;
	}

	#modelearticle1 
	{
		width: 87%;
		margin-left: 20px;
		margin-right: 20px; 
		margin-top: 20px;
		background-color: white;
		padding-left: 4%;
		padding-right: 4%;
		padding-top: 4%;
		padding-bottom: 35px;
		box-shadow: 10px 5px 5px #ece9e9;
		margin-bottom: 30px;
	}

	#modelearticle1 h2
	{
		text-align: center;
		padding-bottom: 50px;
		padding-left: 15px;
		padding-top: 65px;
		font-size: 18px;
	}

	#section
	{
		display: block;
	}
	
	#sectiongauche
	{
		margin-left: 0px;
		margin-right: 20px;
		width: 95%;
	}

	#sectiondroite
	{
		margin-left: 20px;
		margin-right: 20px;
		width: 90%;	
	}

	#partenaires , #videos , #photos
	{
		background-color: white;
		box-shadow: 10px 5px 5px  #ece9e9;
		padding-left: 40px;
	}