/* 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: #99D0FF; /* 99CCFF bleuté, ATTENTION : si changé alors à changer à d'autres endroits, notamment dans le menu  */
}

a:link {color: #000000;} /* noir */  
a:visited {color: #000000;}
a:hover {
	color: #0000FF; /* bleu */  
	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: "Kaushan Script";
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
.liberte {
  position: absolute;
  left: 325px;
  top: 75px;
  font-size: 48px;
  font-family: "Kaushan Script";
}
}

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

.bloc-vide-bis {    			/* bloc vide pour mettre le bloc du corps en dessous du menu */
	position: relative;
	height: 140px;
	width: 100%;
}
@media (min-width: 620px) {  /* pour un écran d'au moins 620px */
	.bloc-vide-bis {
		position: relative;
		height: 248px;
		width: 100%;
	}
}


.contenu-1000 {               /* pour un écran de moins de 320px  */ 
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding-left: 3px;
	text-align: left; 
	color: #000000; /* noire */
	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: #000000;
		font-size: 17px;
	}
}
@media (min-width: 620px) {  /* pour un écran d'au moins 620px */
	.contenu-1000 {
		position: relative;
		text-align: left;
		color: #000000;
		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: #000000;
		font-size: 20px;
		margin-left: auto;
		margin-right: auto; 
		padding: 20px;
		max-width: 1000px;
	}
}


/* l'affichage dans un cadre plus clair */
.contenu-programme-FAQ {                
	padding: 5px;
	text-align: left; 
	font-size: 15px;
	background-color: #B9F0FF; /* couleur du fond : plus claire que celle du fond de page */
	color: #000000; /* couleur noire des lettres  */
	}
@media (min-width: 620px) {  
	.contenu-programme-FAQ {
		padding: 15px;
		text-align: left;
		font-size: 17px;
		background-color: #B9F0FF; 
		color: #000000; 
		}
}
@media (min-width: 1020px) {  
	.contenu-programme-FAQ {
		padding: 25px;
		text-align: left;
		font-size: 20px;
		background-color: #B9F0FF; 
		color: #000000; 
		}
}


/* l'affichage des infos : photos, texte, etc, dans un cadre de même couleur que le contenu-programme-FAQ, arrondi de max 900 de large */
.contenu-infos {               
	padding: 10px;
	text-align: left; 
	color: #000000;
	font-size: 20px;
	background-color: #B9F0FF; 
	border-radius: 10px;
}
@media (min-width: 620px) {  
	.contenu-infos {
		padding: 15px;
		text-align: left;
		color: #000000;
		font-size: 22px;
		background-color: #B9F0FF;  
		border-radius: 10px;
	}
}
@media (min-width: 1020px) {  
	.contenu-infos {
		padding: 25px;
		text-align: left;
		color: #000000;
		font-size: 25px;
		width: 900px;
		background-color: #B9F0FF;  
		border-radius: 10px;
	}
}



/***********************************************************************************************/
/* --------------------------------- POUR LE MENU HORIZONTAL ----------------------------------------- */
.lien-menu-h {           
	text-decoration: none; 
	color: #FFFFFF;        /* couleur blanche */
	font-size: 10px;
	padding-right: 1px;
	font-family: "Oleo Script";
}
@media (min-width: 320px) { 
	.lien-menu-h {
		text-decoration: none;
		color: #FFFFFF;
		font-size: 16px;
		padding-right: 2px;
		font-family: "Oleo Script";
	}
}
@media (min-width: 620px) { 
	.lien-menu-h {
		text-decoration: none; 
		color: #FFFFFF;        /* couleur blanche */
		font-size: 24px;
		padding-right: 5px;
		font-family: "Oleo Script";
	}
}

.lien-menu-h:link {          
	text-decoration: none; 
	color: #FFFFFF; 
	font-size: 10px;
	padding-right: 1px;
	font-family: "Oleo Script";
}
@media (min-width: 320px) { 
	.lien-menu-h:link {
		text-decoration: none;
		color: #FFFFFF;
		font-size: 16px;
		padding-right: 2px;
		font-family: "Oleo Script";
	}
}
@media (min-width: 620px) { 
	.lien-menu-h:link {
		text-decoration: none; 
		color: #FFFFFF;        /* couleur blanche */
		font-size: 24px;
		padding-right: 5px;
		font-family: "Oleo Script";
	}
}

.lien-menu-h:visited {          
	text-decoration: none; 
	color: #FFFFFF; 
	font-size: 10px;
	padding-right: 1px;
	font-family: "Oleo Script";
}
@media (min-width: 320px) { 
	.lien-menu-h:visited {
		text-decoration: none; 
		color: #FFFFFF;
		font-size: 16px;
		padding-right: 2px;
		font-family: "Oleo Script";
	}
}@media (min-width: 620px) { 
	.lien-menu-h:visited {
		text-decoration: none; 
		color: #FFFFFF;        /* couleur blanche */
		font-size: 24px;
		padding-right: 5px;
		font-family: "Oleo Script";
	}
}

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


nav {
  width: 100%;                
  position: absolute;
  top: 103px; 
  left: 0px;
  text-decoration: none; 
  background:#99D0FF url("fond-menu-retraite.jpg") repeat-x;
}
@media (min-width: 620px) { 
	nav {
	  width: 100%;
	  position: absolute;
	  top: 203px;
	  left: 0px;
	  text-decoration: none; 
	  background:#99D0FF url("fond-menu-retraite.jpg") repeat-x;
	}
}
nav:hover {
  width: 100%;                
  position: absolute;
  top: 103px; 
  left: 0px;
  text-decoration: none; 
  background:#99D0FF url("fond-menu-retraite2.jpg") repeat-x;
}
@media (min-width: 620px) { 
	nav:hover {
	  width: 100%;
	  position: absolute;
	  top: 203px;
	  left: 0px;
	  text-decoration: none; 
	  background:#99D0FF url("fond-menu-retraite2.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:2px solid #99D0FF; /* largeur séparateur cellule, et même couleur que celle du fond */
}

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:#99D0FF url("fond-menu-retraite.jpg") repeat-x;
}

/* pour mettre une bordure sous l'élément survolé */
nav a:hover {
  display: block;
  padding-bottom: 10px;
  border-bottom: 2px solid transparent; /* évite le décalage quand la bordure apparait quand le souris passe dessus */
  background:#99D0FF url("fond-menu-retraite2.jpg") repeat-x;
}

/* 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: 230px; /* largeur de la case du sous menu */
  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: 350px;
	  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 */
}



/**********************************************************************/
/* ------------------  STYLES DE PARAGRAPHES  ---------------         */
/* en cas de modification de la couleur, modifier aussi le "lien-paragraphe" ci-dessous */
.paragraphe {
  font-size: 26px;
  font-family: "Rouge Script";
  text-align: center;
  color: #0000CC;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.paragraphe {
	  font-size: 32px;
	  font-family: "Rouge Script";
	  text-align: center;
	  color: #0000CC;
	}
}

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



/* ------------------  STYLES DE POLICE  ---------------         */
.titre1 {
  color: #3300CC;
  font-family: "Oleo Script";
  /*background-image: url("fond-titre-2.png"); 
  background-repeat: no-repeat; */
}

.police-centre {
  text-align: center;
}

/* boite de déco des titres de page quand il n'y a pas un bandeau */
.boitetitre {
  font-weight: bold;
  background-image: url("fond-menu-retraite.jpg"); 
  background-repeat: repeat-x; 
  font-size: 22px;
  padding: 8px;
  font-family: "Oleo Script";
  color: #FFFFFF; /* blanc */
}
@media (min-width: 500px) {
	.boitetitre {
	  font-weight: bold;
	  background-image: url("fond-menu-retraite.jpg"); 
	  background-repeat: repeat-x; 
	  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-image: url("fond-menu-retraite.jpg"); 
	  background-repeat: repeat-x; 
	  font-size: 34px;
	  padding-top: 10px;
	  padding-bottom: 10px;
	  padding-right: 30px;
	  padding-left: 30px;
	  font-family: "Oleo Script";
	  color: #FFFFFF; /* blanc */
	}
}

.police-commentaire {
  font-size: 18px;
  text-align: center;
  font-family: "Times";
}

.italique {
  font-style: italic;
}



/************************************************/
/* ------------------  MARGES  ---------------- */
.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 */
	}  
}
	
/*********************************************************************************************/
/* ------------------------- 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) */
/* gestion taille des images */
.image-auto {
	max-width : 100%;
	height : auto;
}

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



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

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


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

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

.section-pp {  /* pas de max-width: 1000px;  */
  display: flex;
  flex-wrap: wrap;   /* pour s'afficher sur plusieurs lignes si besoin est */ 
}

.marge-int-gauche-20-pp { /* pour le pied de page, même sur petits écrans on garde l'écart */
  padding-left: 20px; 
} 	

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


/***********************************************************************************************/
/* ------------------  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 les cartes : */
/* Bangkok */
.Bangkok {
  position: absolute;
  top: 570px;
  left: 374px;
  background: url(puce09b.gif);}
.Bangkok:hover {
  background: url(puce02b.gif);}

.Bangkok-photo {
  position: absolute;
  top: 595px;
  left: 160px;}

/* Chiang Mai */
.Chiang_Mai {
  position: absolute;
  top: 153px;
  left: 254px;
  background: url(puce09b.gif);}
.Chiang_Mai:hover {
  background: url(puce02b.gif);}

.Chiang_Mai-photo {
  position: absolute;
  top: 174px;
  left: 271px;}

/* près de Koh Samet */
.SSB {
  position: absolute;
  top: 659px;
  left: 447px;
  background: url(puce09b.gif);}
.SSB:hover {
  background: url(puce02b.gif);}

.SSB-photo {
  position: absolute;
  top: 680px;
  left: 477px;}

/* Ayutthaya */
.Ayutthaya {
  position: absolute;
  top: 518px;
  left: 381px;
  background: url(puce09b.gif);}
.Ayutthaya:hover {
  background: url(puce02b.gif);}