/* reset des marges intérieures et extérieures des différents éléments de notre page
pour nous assurer d’avoir un affichage cohérent d’un navigateur à l’autre */
*{
    margin: 0px;
    padding: 0px;
}
.body {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
	/* background-image: url("fond-BKK5a.jpg");  FOND D ECRAN */
  background-color: #000000; /* noir */
}

a:link {color: #FFFFFF;} /* blanc */  
a:visited {color: #FFFFFF;}
a:hover {
	color: #FFFF66; /* jaune pale */  
	text-decoration: none; /* pour ne pas souligner les liens hypertextes */
	}  
/*	
.lien-jaune {           
	text-decoration: none;
	color: #FFFF66;
} */
.lien-jaune:link {          
	text-decoration: none; 
	color: #FFFF66; /* jaune pale */  
}
.lien-jaune:visited {          
	text-decoration: none; 
	color: #FFFF66; /* jaune pale */  
}
.lien-jaune:hover { text-decoration: underline; color: #FFFF66; }

/***********************************************************************************************/
/* --------------------------------- BANDEAU ----------------------------------------- */

/* le bandeau du haut  */
.bandeau {           /* pour un écran de moins de 620px */
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: left;
  width: 100%;
  height: 100px;
  background-image: url("bandeau2-petit.jpg");
 }
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
  .bandeau {          
	  position: absolute;
	  top: 0px;
	  left: 0px;
	  text-align: left;
	  width: 100%;
	  height: 200px;
	  background-image: url("bandeau2.jpg");
	 }
} 

/* titre, nom du pays */
.pays {
  color: #D7DCE8;
  position: absolute;
  left: 65px;
  top: 7px;
  font-size: 30px;
  font-family: "Segoe Media Center Semibold";
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
.pays {
  color: #D7DCE8;
  position: absolute;
  left: 150px;
  top: 15px;
  font-size: 60px;
  font-family: "Segoe Media Center Semibold";
}
}

/* titre, "en liberté" */
.liberte {
  position: absolute;
  left: 150px;
  top: 35px;
  font-size: 24px;
  font-family: "Script MT Bold";
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
.liberte {
  position: absolute;
  left: 325px;
  top: 75px;
  font-size: 48px;
  font-family: "Script MT Bold";
}
}


/***********************************************************************************************/
/* affichage du corps de la page, pour un menu en haut et horizontal */
.bloc-vide {    			/* bloc vide pour mettre le bloc du corps en dessous du menu */
	position: relative;
	height: 165px;
	width: 100%;
}
@media (min-width: 620px) {  /* pour un écran d'au moins 620px */
	.bloc-vide {
		position: relative;
		height: 275px;
		width: 100%;
	}
}

.photo-intro {    			/* pour mettre la photo d'intro en dessous du menu et sous les écrits */
  position: absolute;
  left: 0px;
  top: 160px;	
	width: 100%;
}
@media (min-width: 620px) {  /* pour un écran d'au moins 620px */
	.photo-intro {
	  position: absolute;
	  left: 0px;
	  top: 270px;
		width: 100%;
	}
}


.contenu {               /* pour un écran de moins de 320px  */ 
	position: relative;
	margin-left: auto;
	margin-right: auto;
	/*  left: 50%;                    /*  ATTENTION cela limite la largeur affichée sur le bloc le plus large */
	/*  transform: translate(-50%);   /* ATTENTION cela limite la largeur affichée sur le bloc le plus large */
	padding-left: 3px;
	text-align: left; 
	color: #EEEEEE; /* couleur du texte très légèrement grisée */
	font-size: 15px;
}
@media (min-width: 320px) {  /* pour un écran d'au moins 320px mais moins de 620  */
	.contenu {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		padding: 15px;
		text-align: left;
		color: #EEEEEE;
		font-size: 17px;
	}
}
@media (min-width: 620px) {  /* pour un écran d'au moins 620px */
	.contenu {
		position: relative;
		text-align: left;
		color: #EEEEEE;
		font-size: 18px;
		margin-left: auto;
		margin-right: auto; 
		padding: 18px;
		max-width: 800px;
}
}
@media (min-width: 1020px) { 
	.contenu {
		position: relative;
		text-align: left;
		color: #EEEEEE;
		font-size: 20px;
		margin-left: auto;
		margin-right: auto; 
		padding: 20px;
		max-width: 800px;
	}
}

.contenu-1000 {               /* pour un écran de moins de 320px  */ 
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding-left: 3px;
	text-align: left; 
	color: #EEEEEE;
	font-size: 15px;
}
@media (min-width: 320px) {  /* pour un écran d'au moins 320px mais moins de 620  */
	.contenu-1000 {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		padding: 15px;
		text-align: left;
		color: #EEEEEE;
		font-size: 17px;
	}
}
@media (min-width: 620px) {  /* pour un écran d'au moins 620px */
	.contenu-1000 {
		position: relative;
		text-align: left;
		color: #EEEEEE;
		font-size: 18px;
		margin-left: auto;
		margin-right: auto; 
		padding: 18px;
		max-width: 800px;
}
}
@media (min-width: 1020px) { 
	.contenu-1000 {
		position: relative;
		text-align: left;
		color: #EEEEEE;
		font-size: 20px;
		margin-left: auto;
		margin-right: auto; 
		padding: 20px;
		max-width: 1000px;
	}
}

.contenu-900 {               /* pour un écran de moins de 320px  */ 
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding-left: 3px;
	text-align: left; 
	color: #EEEEEE;
	font-size: 15px;
}
@media (min-width: 320px) {  /* pour un écran d'au moins 320px mais moins de 620  */
	.contenu-900 {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		padding: 15px;
		text-align: left;
		color: #EEEEEE;
		font-size: 17px;
	}
}
@media (min-width: 620px) {  /* pour un écran d'au moins 620px */
	.contenu-900 {
		position: relative;
		text-align: left;
		color: #EEEEEE;
		font-size: 18px;
		margin-left: auto;
		margin-right: auto; 
		padding: 18px;
		max-width: 800px;
}
}
@media (min-width: 1020px) { 
	.contenu-900 {
		position: relative;
		text-align: left;
		color: #EEEEEE;
		font-size: 20px;
		margin-left: auto;
		margin-right: auto; 
		padding: 20px;
		max-width: 900px;
	}
}

/*** corps du pied de page ***/
.pied {             
	position: relative;	 
	width: 100%;
	margin: 0px;
	text-align: left; 
	color: #CCCCCC; /* couleur du texte : gris clair */
	font-size: 15px;
	background-color: #222222; /* couleur du fond : gris foncé */
}	

/*** liens du pied de page, doit être identique que la couleur de police du pied de page ***/  
.lien-pp:link {
  text-decoration: none; 
  color: #CCCCCC;}   
.lien-pp:visited {
	color: #CCCCCC;
	text-decoration: none;}
.lien-pp:hover {
	color: #999999;  	
	text-decoration: none; 
	}  
	

/* l'affichage des infos : photos, texte, etc, dans un cadre gris arrondi de max 900 de large */
.contenu-infos {               
	padding-left: 5px;
	text-align: left; 
	color: #FFFFFF;
	font-size: 20px;
	background-color: #333333; /* couleur du fond : gris */
	border-radius: 10px;
}
@media (min-width: 620px) {  
	.contenu-infos {
		padding: 15px;
		text-align: left;
		color: #FFFFFF;
		font-size: 25px;
		background-color: #333333; 
		border-radius: 10px;
	}
}
@media (min-width: 1020px) {  
	.contenu-infos {
		padding: 25px;
		text-align: left;
		color: #FFFFFF;
		font-size: 25px;
		width: 900px;
		background-color: #333333; 
		border-radius: 10px;
	}
}


/* l'affichage des points forts dans un cadre vert arrondi */
.contenu-points-forts {               
	padding: 10px;
	text-align: left; 
	color: #000000; /* couleur du texte en noir */
	font-size: 15px;
	background-color: #22FF66; /* couleur du fond : vert */
	border-radius: 10px;
}
@media (min-width: 620px) {  
	.contenu-points-forts {
		padding: 15px;
		text-align: left;
		color: #000000;
		font-size: 17px;
		background-color: #22FF66; 
		border-radius: 10px;
	}
}
@media (min-width: 1020px) {  
	.contenu-points-forts {
		padding: 15px;
		text-align: left;
		color: #000000;
		font-size: 20px;
		background-color: #22FF66; 
		border-radius: 10px;
	}
}



/* l'affichage des points forts dans un cadre bleu arrondi */
.contenu-points-forts-bleu {               
	padding: 10px;
	text-align: left; 
	color: #000000; /* couleur du texte en noir */
	font-size: 15px;
	background-color: #00DCE8; /* couleur du fond : bleuté */
	border-radius: 10px;
}
@media (min-width: 620px) {  
	.contenu-points-forts-bleu {
		padding: 15px;
		text-align: left;
		color: #000000;
		font-size: 17px;
		background-color: #00DCE8; 
		border-radius: 10px;
	}
}
@media (min-width: 1020px) {  
	.contenu-points-forts-bleu {
		padding: 15px;
		text-align: left;
		color: #000000;
		font-size: 20px;
		background-color: #00DCE8; 
		border-radius: 10px;
	}
}



/* l'affichage des infos : photos, texte, etc, dans un cadre gris de 900 de large ou moins large selon les écrans */
.contenu-programme {                
	padding: 5px;
	text-align: left; 
	color: #FFFFFF;
	font-size: 15px;
	background-color: #333333; /* couleur du fond : gris */
	/*border-radius: 10px;*/
}
@media (min-width: 620px) {  
	.contenu-programme {
		padding: 15px;
		text-align: left;
		color: #FFFFFF;
		font-size: 17px;
		background-color: #333333; 
		/*border-radius: 10px;*/
	}
}
@media (min-width: 1020px) {  
	.contenu-programme {
		padding: 25px;
		text-align: left;
		color: #FFFFFF;
		font-size: 20px;
		background-color: #333333; 
		/*border-radius: 10px;*/
	}
}


/* l'affichage des avis : dans un cadre gris avec texte en jaune clair */
.contenu-avis {                
	padding: 5px;
	text-align: left; 
	color: #FFFF69; /* texte en jaune clair */
	font-size: 15px;
	background-color: #333333; /* couleur du fond : gris */
	/*border-radius: 10px;*/
}
@media (min-width: 620px) {  
	.contenu-avis {
		padding: 15px;
		text-align: left;
		color: #FFFF69;
		font-size: 17px;
		background-color: #333333; 
		/*border-radius: 10px;*/
	}
}
@media (min-width: 1020px) {  
	.contenu-avis {
		padding: 25px;
		text-align: left;
		color: #FFFF69;
		font-size: 20px;
		background-color: #333333; 
		/*border-radius: 10px;*/
	}
}


/* idem sans la couleur de police blanche */
.contenu-programme-FAQ {                
	padding: 5px;
	text-align: left; 
	font-size: 15px;
	background-color: #333333; /* couleur du fond : gris */
	color: #FFFF99; /* couleur paille des lettres  */
	}
@media (min-width: 620px) {  
	.contenu-programme-FAQ {
		padding: 15px;
		text-align: left;
		font-size: 17px;
		background-color: #333333; 
		color: #FFFF99; /* couleur paille des lettres  */
		}
}
@media (min-width: 1020px) {  
	.contenu-programme-FAQ {
		padding: 25px;
		text-align: left;
		font-size: 20px;
		background-color: #333333; 
		color: #FFFF99; /* couleur paille des lettres  */
		}
}





/* ----------- blocs divers et variés ------------------------------------------
RAPPEL : margin : marge extérieure, padding marge intérieure
(important pour les blocs colorés, et pour les 2 la taille des marges est à ajouter à la taille déclarée) */

.bloc-gris {
  background-color: #333333; /* couleur grisée du fond */
  padding: 10px;
}

.bloc-gris-foncé {
  background-color: #112222; /* couleur grisée du fond */
  
}

/* bloc centré, notamment pour les images */
.centré {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.large {
	width: 100%;
}

/* bordure noire de 1 de large */
.bordure1 {
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
}

/* gestion taille des images */
.image-auto {
	max-width : 100%;
	height : auto;
}

.iframe-auto {
  position: relative; 
  overflow: hidden; 
  padding-top: 87.5%; 
  max-width : 480px;
}	

.resp-iframe { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  max-height : 420px;
  border: 0; 
}

.largeur-480 {
	max-width : 480px;
}


/* ------------------  STYLES DE POLICE  ---------------         */
/* pour les commentaires sous les photos */
.police-commentaire {
  font-size: 15px;
  text-align: center;
  font-family: "Times";
}
@media (min-width: 620px) {  
	.police-commentaire {
	  font-size: 18px;
	  text-align: center;
	  font-family: "Times";
	  }
}

.police-centrée {
  text-align: center;
}

.italique {
  font-style: italic;
}


/* couleur rouge pour les titres (sans taille imposée, à utiliser avec <H2> notamment) */
.police-rouge {
  color: #FF4400;
}

/* notamment pour les avis et ce qui est inclus dans les tarifs */
.police-jaune {
  color: #FFFF69;
}
/* notamment pour les avis et ce qui est inclus dans les tarifs */
.police-paille {
  color: #FFFF99;
}

.boitetitredetail {
  font-weight: bold;
  background-color: #CC0011; /* rouge */
  color: #FFFFFF; /* blanc */
}

/* boite de déco des titres de page quand il n'y a pas un bandeau */
.boitetitre {
  font-weight: bold;
  background-color: #CC0011; /* rouge */
  font-size: 22px;
  padding: 8px;
  font-family: "Oleo Script";
  color: #FFFFFF; /* blanc */
}
@media (min-width: 500px) {
	.boitetitre {
	  font-weight: bold;
	  background-color: #CC0011; /* rouge */ 
	  font-size: 24px;
	  padding: 10px;
	  font-family: "Oleo Script";
	  color: #FFFFFF; /* blanc */
	}
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.boitetitre {
	  font-weight: bold;
	  background-color: #CC0011; /* rouge */
	  font-size: 34px;
	  padding-top: 10px;
	  padding-bottom: 10px;
	  padding-right: 30px;
	  padding-left: 30px;
	  font-family: "Oleo Script";
	  color: #FFFFFF; /* blanc */
	}
}

/* police plus grosse */
.police-info {               
	font-size: 18px;
}
@media (min-width: 500px) {  
	.police-info {
		font-size: 20px;
	}
}
@media (min-width: 620px) {  
	.police-info {
		font-size: 30px;
	}
}

/* police plus grosse */
.police-intro {               
	font-size: 18px;
	font-family: "Oleo Script";
}
@media (min-width: 500px) {
	.police-intro {
		font-size: 20px;
		font-family: "Oleo Script";
	}
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.police-intro {
		font-size: 30px;
		font-family: "Oleo Script";
	}
}

/**********************************************************************/
/* ------------------  STYLES DE PARAGRAPHES  ---------------         */
.paragraphe {
  font-size: 20px;
  font-family: "Monotype Corsiva" ;
  text-align: center;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.paragraphe {
	  font-size: 24px;
	  font-family: "Monotype Corsiva" ;
	  text-align: center;
	}
}

.paragraphe2 {
  font-size: 20px;
  font-family: "Sriracha";
  text-align: center;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.paragraphe2 {
	  font-size: 26px;
	  font-family: "Sriracha";
	  text-align: center;
	}
}

@media (max-width: 620px) { /* pour un écran d'au moins 620px */
	.paragraphe-prix {
	  font-size: 14px;
	}
}

.paragraphe-visite {
  font-size: 18px;
  padding-left: 20px;
}

.ombre-droite-bas {
  box-shadow: 20px 20px 10px #333333; /* largeur 20px en bas et à droite, flouté sur 10px, couleur grise */
}

/* ----------------***********************---------------------- */
/* ------------------  SECTIONS  ---------------         */
.section {
  display: flex;
  flex-wrap: wrap;   /* pour s'afficher sur plusieurs lignes si besoin est */ 
  max-width: 1000px; /* largeur max de l'écran - ou du moins de cette section */
  /* align-items: center;    si on veut centrer verticalement les deux éléments */
}
	
.section-pp {  /* pas de max-width: 1000px;  */
  display: flex;
  flex-wrap: wrap;   /* pour s'afficher sur plusieurs lignes si besoin est */ 
}
	
.section-unique	{ /* aucun effet si petit écran et s'affiche sur une seule colonne dans tous les cas */
	padding: 0px;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.section-unique	{ /* bloc de maximum 900 de large, et avec des marges intérieures de 10 */
		max-width: 900px;
		padding: 10px;
	}
}


.section-unique-1000	{ /* aucun effet si petit écran */
	padding: 0px;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.section-unique-1000	{ /* bloc de maximum 1000 de large, et avec des marges intérieures de 10 */
		max-width: 1000px;
		padding: 10px;
	}
}

.section2 {
  display: flex;
  flex-wrap: wrap;   /* pour s'afficher sur plusieurs lignes si besoin est */ 
  max-width: 800px; /* largeur max de l'écran - ou du moins de cette section */
}

.section-partage	{ /* bloc de maximum 600 de large, utilisé pour le cartouche "partager la page" */
	max-width: 600px;
	padding: 10px;
}


.largeur-article {
  flex: 1;
  margin: 10px;          /* marge extérieure partout de 10px */
  padding: 10px;         /* marge intérieure partout de 10px */
  min-width: 300px;      /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}  

.largeur-article-2 {
  flex: 1;
  margin: 0px;          /* marge extérieure partout de 0px */
  padding: 10px;         /* marge intérieure partout de 10px */
  min-width: 300px;      /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}  

.largeur-article-4 {
  flex: 20;
  margin: 0px;          /* marge extérieure partout de 0px */
  padding: 10px;         /* marge intérieure partout de 10px */
  min-width: 300px;      /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}  

.largeur-article-5 {
  flex: 1;
  margin: 0px;          /* marge extérieure partout de 0px */
  padding: 10px;         /* marge intérieure partout de 10px */
}  

.largeur-article-6 {
  flex: 4;
  margin: 0px;          /* marge extérieure partout de 0px */
  padding: 10px;         /* marge intérieure partout de 10px */
  min-width: 300px;      /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}  

.largeur-article-7 {
  flex: 1;
  margin: 0px;          /* marge extérieure partout de 0px */
  padding: 0px;         /* marge intérieure partout de 10px */
  min-width: 300px;      /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}  

.largeur-article-8 {
  flex: 1;
  margin: 0px;          /* marge extérieure partout de 0px */
  padding: 0px;         /* marge intérieure partout de 10px */
  min-width: 170px;      /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}  

.largeur-article-9 {
  flex: 1;
  margin: 0px;          /* marge extérieure partout de 0px */
  padding: 10px;         /* marge intérieure partout de 10px */
  min-width: 200px;      /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}  

.largeur-article-10 {
  flex: 1;
  margin: 0px;          /* marge extérieure partout de 0px */
  padding: 10px;         /* marge intérieure partout de 10px */
  min-width: 220px;      /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}  

.largeur-article-11 {
  flex: 1;
  margin: 0px;          /* marge extérieure partout de 0px */
  padding: 10px;         /* marge intérieure partout de 10px */
  min-width: 248px;      /* largeur minimal du bloc */
}  


/* ----------------***********************---------------------- */
/* ------------------  MARGES  ---------------         */
.marge-int-gauche-10 {
  padding-left: 0px;  /* pas marge intérieure pour les petits écrans */
}  
@media (min-width: 400px) { /* pour un écran d'au moins 400px */
	.marge-int-gauche-10 {
	  padding-left: 10px;  /* marge intérieure à gauche de 10px */
	}  
}

.marge-int-gauche-20 {
  padding-left: 0px;  /* pas marge intérieure pour les petits écrans */
}  
@media (min-width: 400px) { /* pour un écran d'au moins 400px */
	.marge-int-gauche-20 {
	  padding-left: 20px;  /* marge intérieure à gauche de 20px */
	}  
}
	
.marge-int-gauche-20-pp { /* pour le pied de page, même sur petits écrans on garde l'écart */
  padding-left: 20px; 
} 	

.marge-int-gauche-40 {
  padding-left: 0px;  /* pas marge intérieure pour les petits écrans */
}  
@media (min-width: 400px) { /* pour un écran d'au moins 400px */
	.marge-int-gauche-40 {
	  padding-left: 40px;  /* marge intérieure à gauche de 40px */
	}  
}
	

/***********************************************************************************************/
/* ------------------  STYLES DE TABLEAUX  ---------------         */
.tab-police {               /* pour un écran de moins de 500px */
  font-size: 12px;
  text-align: center;
  font-family: "Times";
  color: #000000; /* couleur noire des lettres */
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.tab-police {
	  font-size: 18px;
	  text-align: center;
	  font-family: "Times";
	  color: #000000; /* couleur noire des lettres */
	}
}

.tab1 {    /* pour mettre la meme bordure autour et dedans */
  border: 2px solid #252525;   /* bordure blanche (pour les sites fond noir) */
  border-collapse: collapse;   /* pour unifier entre elles les bordures des cases */
  table-layout: fixed;          /* pour automatiser la largeur des cases */
  background-color: #FFFFFF;
  /*margin: auto;                 /* pour centrer le tableau */
}

.tab1 td {    /* pour mettre la meme bordure autour et dedans */
  border: 2px solid #252525;   /* bordure blanche (pour les sites fond noir) */
  border-collapse: collapse;   /* pour unifier entre elles les bordures des cases */
  padding: 2px;
  table-layout: fixed;          /* pour automatiser la largeur des cases */
  background-color: #FFFFFF;
}
@media (min-width: 620px) { 
	.tab1 td {    /* pour mettre la meme bordure autour et dedans */
	  border: 2px solid #252525;   /* bordure blanche (pour les sites fond noir) */
	  border-collapse: collapse;   /* pour unifier entre elles les bordures des cases */
	  padding: 15px;
	  table-layout: fixed;          /* pour automatiser la largeur des cases */
	  background-color: #FFFFFF;
	}
}

.tab1 th {    /* pour mettre la meme bordure autour et dedans */
  border: 2px solid #252525;   /* bordure blanche (pour les sites fond noir) */
  border-collapse: collapse;   /* pour unifier entre elles les bordures des cases */
  padding: 2px;
  table-layout: fixed;          /* pour automatiser la largeur des cases */
  background-color: #FFFFFF;
}
@media (min-width: 620px) { 
	.tab1 th {    /* pour mettre la meme bordure autour et dedans */
	  border: 2px solid #252525;   /* bordure blanche (pour les sites fond noir) */
	  border-collapse: collapse;   /* pour unifier entre elles les bordures des cases */
	  padding: 10px;
	  table-layout: fixed;          /* pour automatiser la largeur des cases */
	  background-color: #FFFFFF;
	}
}



/***********************************************************************************************/
/* --------------------------------- POUR LE MENU HORIZONTAL ----------------------------------------- */
.lien-menu-h {           
	text-decoration: none; 
	color: #DDDDDD;        /* couleur gris clair */
	font-size: 10px;
	font-weight: bold;
	padding-right: 1px;
}
@media (min-width: 320px) { 
	.lien-menu-h {
		text-decoration: none;
		color: #DDDDDD;
		font-size: 14px;
		font-weight: bold;
		padding-right: 2px;
	}
}
@media (min-width: 620px) { 
	.lien-menu-h {
		text-decoration: none; 
		color: #DDDDDD;        
		font-size: 22px;
		font-weight: bold;
		padding-right: 5px;
	}
}

.lien-menu-h:link {          
	text-decoration: none; 
	color: #DDDDDD; 
	font-size: 10px;
	font-weight: bold;
	padding-right: 1px;
}
@media (min-width: 320px) { 
	.lien-menu-h:link {
		text-decoration: none;
		color: #DDDDDD;
		font-size: 14px;
		font-weight: bold;
		padding-right: 2px;
	}
}
@media (min-width: 620px) { 
	.lien-menu-h:link {
		text-decoration: none; 
		color: #DDDDDD;        
		font-size: 22px;
		font-weight: bold;
		padding-right: 5px;
	}
}

.lien-menu-h:visited {          
	text-decoration: none; 
	color: #DDDDDD; 
	font-size: 10px;
	font-weight: bold;
	padding-right: 1px;
}
@media (min-width: 320px) { 
	.lien-menu-h:visited {
		text-decoration: none; 
		color: #DDDDDD;
		font-size: 14px;
		font-weight: bold;
		padding-right: 2px;
	}
}@media (min-width: 620px) { 
	.lien-menu-h:visited {
		text-decoration: none; 
		color: #DDDDDD;        
		font-size: 22px;
		font-weight: bold;
		padding-right: 5px;
	}
}

.lien-menu-h:hover {
	text-decoration: none; 
	color: #000000;        /* couleur noire */
	font-size: 10px;
	padding-right: 1px;
}
@media (min-width: 320px) {
	.lien-menu-h:hover {
		text-decoration: none; 
		color: #000000;        
		font-size: 14px;
		padding-right: 2px;
    }
}@media (min-width: 620px) { 
	.lien-menu-h:hover {
		text-decoration: none; 
		color: #000000;        
		font-size: 22px;
		padding-right: 5px;
    }
}

nav {
  width: 100%;                
  position: absolute;
  top: 103px; 
  left: 0px;
  text-decoration: none; 
  background:black url("fond-menu-mt.jpg") repeat-x;
}
@media (min-width: 620px) { 
	nav {
	  width: 100%;
	  position: absolute;
	  top: 203px;
	  left: 0px;
	  text-decoration: none; 
	  background:black url("fond-menu-mt.jpg") repeat-x;
	}
}


nav ul {
  list-style-type: none; /* pour supprimer les puces de la liste */
  display: flex;
}

/* pour que le menu soit horizontal, et le pourcentage de chaque partie du menu (width);
le position relative est pour que les sous-menu restent bien sous leur menu parent de la même taille */
nav ul li {
  flex: 1 1 auto;
  text-align: center;
  position: relative; /* pour que le sous menu soit sous le menu parent, à remettre peut-être...  ne change rien quand on enlève */
  border-left:3px solid black;
}

/* pour mettre le gant de boxe à la place de la puce; margin-left pour avoir l'espace pour le gant; margin-top pour aérer le menu */
/*
nav ul li1 {
  flex: 1 1 auto;
  text-align: center;
  position: relative; 
  border-left:3px solid black;
  display : list-item;
 list-style-image : url(Muaythai-gant1.jpg);
 margin-left: 0px;
 margin-top: 0px;
}
*/


nav a {
  display: block;
  padding-bottom: 10px;
  border-bottom: 2px solid transparent; /* évite le décalage quand la bordure apparait quand le souris passe dessus */
  background:black url("fond-menu-mt.jpg") repeat-x;
}

/* pour mettre une bordure sous l'élément survolé */
nav a:hover {
  border-bottom: 2px solid #FFFFFF;        /* blanche */
}

/* sous menu : box-shadow est pour l'ombre; position et z-index est pour la position soit fixe et passe au-dessus du contenu */
.sous{
  display: none;     /* pour pas qu'il apparaisse quand on ne passe pas la souris */
  /*box-shadow: 6px 2px 0px #444444; */
  background-color: #000000;
  position: absolute;
  width: 150px;
  z-index: 80;
  /* text-align: center; */
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
.sous{
	  display: none;     /* pour pas qu'il apparaisse quand on ne passe pas la souris */
	  background-color: #000000;
	  position: absolute;
	  width: 200px;
	  z-index: 80;
	}
}

/* pour que ça s'actionne quand on passe la souris dessus */
nav > ul li:hover .sous{
  display: flex;
  flex-flow: column wrap;
}

/* pour que s'affiche les uns sous les autres et non pas horizontalement comme le parent */
.sous li{
  flex: 1 1 auto;
  text-align: left;
}

.sous a{
  padding: 10px;
  border-bottom: none;
}

.sous a :hover{
  border-bottom: none;
  /*background-color: #555555; /* couleur autour du texte quand on passe la souris : ça fait moche */
}

.conteneur{
  margin: 50px 20px;
  height: 1500px;
}



/* ------------------  LES DEUX BANDES ENCADRANT LE MENU HORIZONTAL  ---------------         */

/* séparateur entre le bandeau du haut et le reste POUR LE MOMENT MEME TAILLE!!! */
.separateur-haut {         /* pour un écran de mois de 620px */
  position: absolute;
  top: 101px;
  left: 0px;
  width: 100%;
  height: 15px;
  background-image: url("Muaythai-presentation-1-envers.jpg");
  background-repeat: repeat;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.separateur-haut {
	  position: absolute;
	  top: 201px;
	  left: 0px;
	  width: 100%;
	  height: 15px;
	  background-image: url("Muaythai-presentation-1-envers.jpg");
	  background-repeat: repeat;
	}
}
/* séparateur entre le menu horizontal et le reste */
.separateur-bas-menu-horizontal {         /* pour un écran de mois de 620px */
  position: absolute;
  top: 176px;
  left: 0px;
  width: 100%;
  height: 15px;
  background-image: url("Muaythai-presentation-1-envers.jpg");
  background-repeat: repeat;
}
@media (min-width: 620px) {                /* pour un écran d'au moins 620px */
	.separateur-bas-menu-horizontal {
	  position: absolute;
	  top: 286px;
	  left: 0px;
	  width: 100%;
	  height: 15px;
	  background-image: url("Muaythai-presentation-1-envers.jpg");
	  background-repeat: repeat;
	}
}

/* séparateur entre le contenu et le pied de page */
.separateur-pied {         
  left: 0px;
  width: 100%;
  height: 15px;
  background-image: url("Muaythai-presentation-1-envers.jpg");
  background-repeat: repeat;
}

/* séparateur : ligne noire illimitée */
.separateur-ligne-noire {         
  left: 0px;
  width: 100%;
  height: 1px;
  background-image: url("Muaythai-presentation-1.jpg");
  background-repeat: repeat;
}


/* ----------- FIN POUR LE MENU HORIZONTAL ----------- */



/***********************************************************************************************/
/* pour une image toujours positionnée sur la page au même endroit même lors du défilement, pour le bouton pour remonter en haut */
/* # est utilisé à la place du point quand c'est une id et non une class */ 
#scroll_to_top {
  position: fixed;
  width: 38px;
  height: 38px;
  bottom: 50px;
  right: 20px; /* à 20px du bord droit de la page */
}
#scroll_to_top img {
  width: 38px;
}