/* 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");  /*
  background-color: #000000; /* noir A CHANGER AVEC FOND D ECRAN */
}

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 */
	}  

/***********************************************************************************************/
/* --------------------------------- 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";
}
}

/* titre, "guide francophone" */
.guide {
  position: absolute;
  left: 150px;
  top: 435px;
  font-size: 0px; /* pour invisible */
  font-family: "Script MT Bold";
}
@media (min-width: 850px) { /* pour un écran d'au moins 850px */
.guide {
  position: absolute;
  left: 380px;
  top: 280px;
  font-size: 48px;
  font-family: "Script MT Bold";
  color: #EEEEEE;
}
}
@media (min-width: 1000px) { 
.guide {
  position: absolute;
  left: 450px;
  top: 280px;
  font-size: 48px;
  font-family: "Script MT Bold";
  color: #EEEEEE;
}
}
@media (min-width: 1250px) { 
.guide {
  position: absolute;
  left: 500px;
  top: 280px;
  font-size: 60px;
  font-family: "Script MT Bold";
  color: #EEEEEE;
}
}


/***********************************************************************************************/
/* 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: 150px;
	width: 100%;
}
@media (min-width: 620px) {  /* pour un écran d'au moins 620px */
	.bloc-vide {
		position: relative;
		height: 260px;
		width: 100%;
	}
}

.bloc-vide-bis {    			/* bloc vide pour mettre le bloc du corps en dessous du menu */
	position: relative;
	height: 150px;
	width: 100%;
}
@media (min-width: 620px) {  /* pour un écran d'au moins 620px */
	.bloc-vide-bis {
		position: relative;
		height: 237px;
		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: #FFFFFF;
	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: #FFFFFF;
		font-size: 17px;
	}
}
@media (min-width: 620px) {  /* pour un écran d'au moins 620px */
	.contenu {
		position: relative;
		text-align: left;
		color: #FFFFFF;
		font-size: 18px;
		margin-left: auto;
		margin-right: auto; 
		padding: 18px;
	}
}
@media (min-width: 1020px) { 
	.contenu {
		position: relative;
		text-align: left;
		color: #FFFFFF;
		font-size: 20px;
		margin-left: auto;
		margin-right: auto; 
		padding: 20px;
		max-width: 1000px;
	}
}


/*** 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 */
.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 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;
		/*width: 900px;*/
		background-color: #333333; 
		border-radius: 10px;
	}
}



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

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

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

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


nav {
  width: 100%;                
  position: absolute;
  top: 100px; 
  left: 0px;
  text-decoration: none; 
  background-color: #000000;
}
@media (min-width: 620px) { 
	nav {
	  width: 100%;
	  position: absolute;
	  top: 200px;
	  left: 0px;
	  text-decoration: none; 
	  background-color: #000000;
	}
}


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 une bordure sous l'élément survolé */
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("essai-bouton-3.jpg") repeat-x;
}

nav a:hover {
  border-bottom: 2px solid #FFFF11;        /* jaune */
}

/* 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: 200px;
  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 */
  /*box-shadow: 6px 2px 0px #444444; */
  background-color: #000000;
  position: absolute;
  width: 350px;
  z-index: 80;
  /* text-align: center; */
}
}

/* 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; /* mais à quoi ça sert??? */
}

.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 ----------- */





/* ----------- 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-noir {
  background-color: #000000; /* couleur noire du fond */
  color: #EEEEEE; /* couleur légèrement grisée des lettres */
}

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

.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;
}

.centre {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.large {
	width: 100%;
}




/* ------------------  STYLES DE POLICE  ---------------         */
/* pour les commentaires sous les photos */
.police-commentaire {
  font-size: 18px;
  text-align: center;
  font-family: "Times";
}

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




/**********************************************************************/
/* ------------------  STYLES DE PARAGRAPHES  ---------------         */
/* en cas de modification de la couleur, modifier aussi le "lien-paragraphe" ci-dessous */
.paragraphe {
  font-size: 24px;
  font-family: "Monotype Corsiva" ;
  text-align: center;
}

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



/* ----------------***********************---------------------- */
/* ------------------  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 650px */
	.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;
	}
}



/* ----------------***********************---------------------- */
/* ------------------  COMPATIBLE MULTI-FORMATS  ---------------         */
.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-3 {
  flex: 1 300px;
  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!!!! */
}  


.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; 
} 	


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

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

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

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

/***********************************************************************************************/
/* 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;
}