/* 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-color: #000000; /* noir */
}

a:link {color: #FF4400;}
a:visited {color: #FF4400;}
a:hover {color: #FF9900;}

/* le bandeau du haut avec le titre */
.bandeau {
  position: absolute;
  top: 0em;
  left: 0em;
  text-align: left;
  width: 100%;
  height: 200px;
  background-image: url("bandeau2.jpg");
}

/* titre, nom du pays */
.pays {
  color: #D7DCE8;
  position: absolute;
  left: 2em;
  top: 22px;
  font-size: 48pt;
  font-family: "Segoe Media Center Semibold" ;
}

/* titre, "en liberté" */
.liberte {
  position: absolute;
  left: 11em;
  top: 65px;
  text-align: center;
  font-size: 26pt;
  font-family: "Script MT Bold" ;
}

/* boite bleutée pour le titre des pages détails (doit être identique à boitetitre ci-dessous!!!!!!!!!!!)*/
.boitetitredetail {
  font-weight: bold;
  background-color: #FF0011;
  color: #000000;
}

/* affichage du coprs de la page, pour un menu en haut et horizontal */
.contenu3 {
  position: absolute;
  top: 350px;
  left: 50%;                    /* pour que le contenu soit centré dans la page */
  transform: translate(-50%);   /* pour que le contenu soit centré dans la page */
  /*left: 10px;*/
  text-align: left;
  color: #FFFFFF;
  font-size: 20px;
  width: 900px;
}

/* angle arrondi vert (pour le cartouche des "points forts") */
.angle {
  border-radius: 10px;
  background-color: #22FF66;
}

/* angle arrondi bleuté ( pour le cartouche des "points forts" ) */
.angle2 {
  border-radius: 10px;
  background-color: #00DCE8;
}

/* style dans le cartouche des "points forts"    */
.encart-essai {
  font-size: 16px;
  font-family: "Arial" ;
  color: #000000;
  padding: 10px;
}

/* pour le titre de la cartouche des points forts */
.points-forts {
  font-size: 30px;
  color: #000000;
  text-align: center;
  font-family: "Arial";
  font-weight: bold;
}

.paragraphe3 {
  font-size: 28px;
  font-family: "Monotype Corsiva" ;
  /* color: #55FFFF; */
  color: #FFFFFF;
  text-align: center;
}

.paragraphe4 {
  font-size: 20px;
  font-family: "Georgia" ;
  color: #FFFFFF;
  text-align: center;
}

.paragraphe5 {
  font-size: 28px;
  font-family: "Monotype Corsiva" ;
  text-align: center;
}

             /* ----------- POUR LE MENU HORIZONTAL ----------- */
/* style pour le menu horizontal */
.lien-menu-h {
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  color: #FF4400;
  font-size: 25px;
}
.lien-menu-h:hover {
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  color: #FFFF11;
  font-size: 25px;
}

/* menu horizontal */
.menu-horizontal {
  position: absolute;
  top: 218px;
  left: 0px;
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  background-color: #000000;
  /* width: 100%;*/
}

/* pour la largeur du menu, avec un margin-bottom à 10px, un margin-right à 20px, et 0px ailleurs */
nav {
  width: 100%;
  margin: 0px 20px 10px 0px;
/*  position: sticky;  c'était pour que le menu reste tj affiché sur l'écran et ne défile pas */
}

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

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

/* 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 li {
  float: left;
  width: 20%;
  text-align: center;
  position: relative;
  left: 0px;
}

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

/* pour éviter hauteur nulle (mais ??? ne change rien en l'enlevant!! ???) */
/*nav ul::after {
  content: "";
  display: table;
  clear: both;
} */

/* 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 {
 display : list-item;
 list-style-image : url(Muaythai-gant1.jpg);
 margin-left: 70px;
 margin-top: 30px;
}

nav li2 {
 display : list-item;
 list-style-image : url(Muaythai-gant2.jpg);
 margin-left: 70px;
 margin-top: 10px;
}

nav li3 {
 display : list-item;
 list-style-image : url(Muaythai-gant5.jpg);
 margin-left: 70px;
 margin-top: 10px;
}

nav li4 {
 display : list-item;
 list-style-image : url(Muaythai-gant3b.jpg);
 margin-left: 70px;
 margin-top: 10px;
}

nav li5 {
 display : list-item;
 list-style-image : url(Muaythai-gant6.jpg);
 margin-left: 70px;
 margin-top: 10px;
}

nav li6 {
 display : list-item;
 list-style-image : url(Muaythai-gant7.jpg);
 margin-left: 70px;
 margin-top: 10px;
}

/* 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;
  box-shadow: 6px 0px 6px #444444;    /* seconde ombre : à gauche noire pour être sous les gants qui sinon débordaient du menu , -70px 0px #000000 */
  background-color: #000000;
  position: absolute;
  width: 210px;
  z-index: 1000;
}

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

/* pour que s'affiche les uns sous les autres et non pas horizontalement comme le parent */
.sous li{
  float: none;
  width: 100%;
  text-align: left;
}

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

/* séparateur entre le bandeau du haut et le reste */
.separateur-haut {
  position: absolute;
  top: 200px;
  left: 0px;
  width: 100%;
  height: 15px;
  background-image: url("Muaythai-presentation-1.jpg");
  background-repeat: repeat;
}

/* séparateur entre le menu horizontal et le reste */
.separateur-bas-menu-horizontal {
  position: absolute;
  top:305px;
  left: 0px;
  width: 100%;
  height: 15px;
  background-image: url("Muaythai-presentation-1-envers.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) */

/* pour que les images occupent toute la ligne */
.imageligne {
  display: block;
}

/* pour que les images soient à droite avec le texte autour (voir exemple page MT CM */
.àdroite {
  float: right;
}

/* pour que les images soient à gauche */
.àgauche {
  float: left;
}

/* pour centrer verticalement une image dans un bloc à la hauteur plus grande que l'image;
   en cas de blocs alignés, on peut le encadrer dans des <div> avec "enligne", voir la page Réservation */
.centré-verticalement {
  display: table-cell;
  vertical-align: middle;
}

/* pour que les blocks soient alignés horizontalement en ayant le même positionnement de leurs sommets */
.enligne {
  display: inline-block;
  vertical-align: top;
}

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

/* bloc de couleur grisée sans taille définie */
.bloc-grisé {
  background-color: #252525; /* couleur grisée du fond */
  /* color: FFFFFF; */ /* couleur blanche des lettres */
}

/* le bloc de base de la largeur de la page */
.taille-bloc900 {
  width: 900px;
}

/* le bloc de base de la largeur de la page avec hauteur de 500px */
.taille-bloc900-photos {
  width: 900px;
  height: 500px;
  display: block;
}

/* le bloc de base de la largeur de la page avec marges spécial avis (pour être aligné avec les avis sans fond grisé) */
.taille-bloc880-margé-avis {
  width: 880px;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 0px;
  padding-bottom: 10px;
}

/* le bloc de base de la largeur de la page avec marges symétriques */
.taille-bloc880-margé-FAQ {
  width: 880px;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}

.taille-bloc860-margé-FAQ {
  width: 860px;
  padding-left: 20px;
}

.taille-bloc864-margé {
  width: 864px;
  padding-left: 30px;
}

.taille-bloc860-margé {
  width: 860px;
  padding-left: 30px;
}

.taille-bloc860-margé-2 {
  width: 860px;
  padding-top: 10px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
}

.taille-bloc820-margé {
  width: 820px;
  padding-left: 30px;
}

/* pour centrer le bouton addthis, ça ne marchait pas avec class="centré" */
.taille-bloc700-margé {
  width: 700px;
  padding-left: 150px;
}

/* pour centrer le bouton addthis, ça ne marchait pas avec class="centré" */
.taille-bloc690-margé {
  width: 690px;
  padding-left: 210px;
}

.taille-bloc670 {
  width: 670px;
}

/* pour englober plusieurs blocs verticalement - notamment cela permet de centrer le dessin séparateur de paragraphe */
.taille-bloc655 {
  width: 655px;
}

/* au total avec les marges, cela fait une largeur de 655px */
.taille-bloc615-margé {
  width: 615px;
  padding-top: 5px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
}

/* au total avec les marges, cela fait une largeur de 650px */
.taille-bloc610-margé {
  width: 610px;
  padding-top: 5px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
}

.taille-bloc590 {
  width: 590px;
}

.taille-bloc580-margé {
  width: 580px;
  padding-left: 20px;
}

.taille-bloc565-margé {
  width: 565px;
  padding-left: 30px;
}

.taille-bloc535 {
  width: 535px;
}

.taille-bloc500 {
  width: 500px;
  /*  border-width: 1px;
  border-style: solid;
  border-color: 444444; */
}

.taille-bloc440 {
  width: 440px;
}

.taille-bloc410 {
  width: 410px;
}

.taille-bloc400-margé {
  width: 400px;
  padding-right: 20px;
}

.taille-bloc370-margé {
  width: 370px;
  padding-left: 20px;
}

.taille-bloc355 {
  width: 355px;
}

.taille-bloc373-margé {
  width: 373px;
  padding-right: 20px;
}

.taille-bloc350-margé {
  width: 350px;
  padding-left: 20px;
}

.taille-bloc300-margé {
  width: 300px;
  padding-right: 20px;
}

.taille-bloc270-margé {
  width: 270px;
  padding-left: 20px;
}

.taille-bloc266-margé {
  width: 266px;
  margin-right: 20px;
}

.taille-bloc250-margé {
  width: 250px;
  margin-right: 20px;
}

.taille-bloc240-margé {
  width: 240px;
  margin-left: 20px;
}

/* pour le cartouche des points forts, 240px de large de total */
.taille-bloc230-margé {
  width: 230px;
  margin-left: 10px;
}

.taille-bloc220-margé {
  width: 220px;
  padding-right: 20px;
}

.taille-bloc220-margé-gauche {
  width: 220px;
  padding-left: 20px;
}

.taille-bloc200-margé {
  width: 200px;
  padding-right: 20px;
}

.taille-bloc165-margé {
  width: 165px;
  margin-left: 20px;
}

.taille-bloc150-margé {
  width: 150px;
  margin-right: 20px;
}

/* pour une photo de 88 de large, avec un bloc total de 108px de large, marge à droite */
.taille-bloc88-espacedroite {
  width: 88px;
  padding-right: 20px;
  height: 360px;
}

/* pour une photo de 88 de large, avec un bloc total de 108px de large, marge à gauche */
.taille-bloc88-espacegauche {
  width: 88px;
  height: 360px;
  padding-left: 20px;
}

.hauteur-bloc220 {
  height: 220px;
  /* border-width: 1px;
  border-style: solid;
  border-color: 444444; */
}

.hauteur-bloc360 {
  height: 360px;
}

/* en cas de besoin de voir la taille du bloc lors du développement */
.bordure {
  border-width: 1px;
  border-style: solid;
  border-color: #444444;
}

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


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

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

/* notamment pour la FAQ */
.police-paille {
  color: #FFFF99; /* couleur paille des lettres  */
}

.italique {
  font-style: italic;
}

/* couleur bleue pour les titres (sans taille imposée, à utiliser avec <H2> ) */
.titre-couleur2-900 {
  color: #00DCE8;
}


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

/* ----------------***********************---------------------- */


/* ------------------  STYLES DE TABLEAUX  ---------------         */
/* tableau des prix boxe thaï */
.tab-police {
  font-size: 18px;
  text-align: center;
  font-family: "Times";
  color: #FFFFFF; /* couleur blanche des lettres (pour les sites sur fond noir) */
}

.tab1, .tab1 td, .tab1 th {    /* pour mettre la meme bordure autour et dedans */
  border: 2px solid #FFFFFF;   /* bordure blanche (pour les sites fond noir) */
  border-collapse: collapse;   /* pour unifier entre elles les bordures des cases */
  padding: 5px;
  table-layout: auto;          /* pour automatiser la largeur des cases */
  width: 820px;
}

/* ----------------**************************---------------------- */

/********* Pai ***********/
.Pai {
  position: absolute;
  top: 113px;
  left: 218px;
  background: url(puce09b.gif);}
.Pai:hover {
  background: url(puce02b.gif);}

.Pai-photo {
  position: absolute;
  top: 153px;
  left: 65px;
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
}

.Pai-fleche {
  position: absolute;
  top: 134px;
  left: 171px;}

.Pai-stage {
  position: absolute;
  top: 86px;
  left: 55px;}

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

.Chiang_Mai-photo {
  position: absolute;
  top: 120px;
  left: 350px;
  border-width: 1px;
  border-style: solid;
  border-color: #000000;}

.Chiang_Mai-stage {
  position: absolute;
  top: 35px;
  left: 326px;}

.Chiang_Mai-fleche {
  position: absolute;
  top: 85px;
  left: 257px;}

/********* Bangkok ********/
.Bangkok {
  position: absolute;
  top: 570px;
  left: 374px;
  background: url(puce09b.gif);}
.Bangkok:hover {
  background: url(puce02b.gif);}

.Bangkok-photo {
  position: absolute;
  top: 632px;
  left: 220px;}

.Bangkok-stage {
  position: absolute;
  top: 550px;
  left: 200px;}

.Bangkok-fleche {
  position: absolute;
  top: 580px;
  left: 330px;}

/********* Champion ********/
.champion-photo {
  position: absolute;
  top: 432px;
  left: 439px;}

.champion-stage {
  position: absolute;
  top: 441px;
  left: 540px;}

.champion-flèche {
  position: absolute;
  top: 533px;
  left: 395px;}


/******* Koh Samui **********/
.Koh_Samui {
  position: absolute;
  top: 915px;
  left: 334px;
  background: url(puce09b.gif);}
.Koh_Samui:hover {
  background: url(puce02b.gif);}

.Koh_Samui-photo {
  position: absolute;
  top: 987px;
  left: 370px;}

.Koh_Samui-stage {
  position: absolute;
  top: 1005px;
  left: 480px;}

.Koh_Samui-fleche {
  position: absolute;
  top: 920px;
  left: 350px;}

.MMA-stage {
  position: absolute;
  top: 1005px;
  left: 268px;}