/* 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: #99BBDD;}   */
/*a:visited {color: #FFFF11;} */
/*a:visited {color: #99BBDD;}
a:hover {color: #FF9900;}        */

/* les bandeaux du haut avec le titre */
.bandeau {           /* pour un écran de moins de 620px */
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: left;
  width: 100%;
  height: 300px;
  background-image: url("Titanic-10commandements-cine-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: 472px;
	  background-image: url("Titanic-10commandements-cine.jpg");
	 }
}

.bandeau1 {          /* pour un écran de moins de 620px */
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: left;
  width: 100%;
  height: 300px;
  background-image: url("ETChtis-soleil-cine-petit.jpg");
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.bandeau1 {
	  position: absolute;
	  top: 0px;
	  left: 0px;
	  text-align: left;
	  width: 100%;
	  height: 472px;
	  background-image: url("ETChtis-soleil-cine.jpg");
	}
}

.bandeau2 {
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: left;
  width: 100%;
  height: 300px;
  background-image: url("ETChtis-lune-cine-petit.jpg");
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.bandeau2 {
	  position: absolute;
	  top: 0px;
	  left: 0px;
	  text-align: left;
	  width: 100%;
	  height: 472px;
	  background-image: url("ETChtis-lune-cine.jpg");
	}
}

.bandeau3 {
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: left;
  width: 100%;
  height: 300px;
  background-image: url("Iletaitunefois-Asterix-cine-petit.jpg");
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.bandeau3 {
	  position: absolute;
	  top: 0px;
	  left: 0px;
	  text-align: left;
	  width: 100%;
	  height: 472px;
	  background-image: url("Iletaitunefois-Asterix-cine.jpg");
	}
}

.bandeau4 {
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: left;
  width: 100%;
  height: 300px;
  background-image: url("Kwai-Livrejungle-cine-petit.jpg");
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.bandeau4 {
	  position: absolute;
	  top: 0px;
	  left: 0px;
	  text-align: left;
	  width: 100%;
	  height: 472px;
	  background-image: url("Kwai-Livrejungle-cine.jpg");
	}
}

.bandeau5 {
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: left;
  width: 100%;
  height: 300px;
  background-image: url("Avengers-FF-DA-petit.jpg");
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.bandeau5 {
	  position: absolute;
	  top: 0px;
	  left: 0px;
	  text-align: left;
	  width: 100%;
	  height: 472px;
	  background-image: url("Avengers-FF-DA.jpg");
	}
}

.bandeauHP {
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: left;
  width: 100%;
  height: 300px;
  background-image: url("Harry-Potter-comparaison2-petit.jpg");
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.bandeauHP {
	  position: absolute;
	  top: 0px;
	  left: 0px;
	  text-align: left;
	  width: 100%;
	  height: 472px;
	  background-image: url("Harry-Potter-comparaison2.jpg");
	}
}

.bandeauSW {
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: left;
  width: 100%;
  height: 300px;
  background-image: url("Star-Wars-comparaison-petit.jpg");
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.bandeauSW {
	  position: absolute;
	  top: 0px;
	  left: 0px;
	  text-align: left;
	  width: 100%;
	  height: 472px;
	  background-image: url("Star-Wars-comparaison.jpg");
	}
}


/* titre "Les champions du box-office" - deux fois pour être en superposé noir et clair pour être plus visible */
.titre-champion {           /* pour un écran de moins de 620px */
  color: #000000;
  position: absolute;
  left: 20px;
  top: 45px;
  font-size: 24px;
  font-family: "Segoe Media Center Semibold" ;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
  .titre-champion {
	  color: #000000;
	  position: absolute;
	  left: 22px;
	  top: 62px;
	  font-size: 42px;
	  font-family: "Segoe Media Center Semibold" ;
	}
}

.titre-champion2 {
  color: #00FFFF;
  position: absolute;
  left: 18px;
  top: 43px;
  font-size: 24px;
  font-family: "Segoe Media Center Semibold" ;
}
@media (min-width: 620px) {
  .titre-champion2 {
	  color: #00FFFF;
	  position: absolute;
	  left: 20px;
	  top: 60px;
	  font-size: 42px;
	  font-family: "Segoe Media Center Semibold" ;
	}
}

/* titre de la sous catégorie, "à travers le monde", "en France", etc  - deux fois pour être en superposé noir et blanc pour être plus visible */
.titre-categorie {
  position: absolute;
  left: 20px;
  top: 68px;
  text-align: center;
  font-size: 22px;
  font-family: "Script MT Bold" ;
  color: #000000;
}
@media (min-width: 620px) {
  .titre-categorie {
	  position: absolute;
	  left: 327px;
	  top: 95px;
	  text-align: center;
	  font-size: 36px;
	  font-family: "Script MT Bold" ;
	  color: #000000;
	}
}
.titre-categorie2 {
  position: absolute;
  left: 18px;
  top: 66px;
  text-align: center;
  font-size: 22px;
  font-family: "Script MT Bold" ;
  color: #FFFFFF;
}
@media (min-width: 620px) {
  .titre-categorie2 {
	  position: absolute;
	  left: 326px;
	  top: 94px;
	  text-align: center;
	  font-size: 36px;
	  font-family: "Script MT Bold" ;
	  color: #FFFFFF;
	}
}


.titre-categorie-1 {
  position: absolute;
  left: 21px;
  top: 75px;
  text-align: center;
  font-size: 22px;
  font-family: "Script MT Bold" ;
  color: #FFFFFF;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.titre-categorie-1 {
	  position: absolute;
	  left: 347px;
	  top: 95px;
	  text-align: center;
	  font-size: 36px;
	  font-family: "Script MT Bold" ;
	  color: #FFFFFF;
	}
}
.titre-categorie2-1 {
  position: absolute;
  left: 20px;
  top: 74px;
  text-align: center;
  font-size: 22px;
  font-family: "Script MT Bold" ;
  color: #000000;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.titre-categorie2-1 {
	  position: absolute;
	  left: 346px;
	  top: 94px;
	  text-align: center;
	  font-size: 36px;
	  font-family: "Script MT Bold" ;
	  color: #000000;
	}
}


.titre-categorie-2 {
  position: absolute;
  left: 21px;
  top: 67px;
  text-align: center;
  font-size: 22px;
  font-family: "Script MT Bold" ;
  color: #000000;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.titre-categorie-2 {
	  position: absolute;
	  left: 431px;
	  top: 94px;
	  text-align: center;
	  font-size: 38px;
	  font-family: "Script MT Bold" ;
	  color: #000000;
	}
}
.titre-categorie2-2 {
  position: absolute;
  left: 20px;
  top: 68px;
  text-align: center;
  font-size: 22px;
  font-family: "Script MT Bold" ;
  color: #FFFFFF;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.titre-categorie2-2 {
	  position: absolute;
	  left: 430px;
	  top: 95px;
	  text-align: center;
	  font-size: 38px;
	  font-family: "Script MT Bold" ;
	  color: #FFFFFF;
	}
}


.titre-categorie-3 {
  position: absolute;
  left: 51px;
  top: 68px;
  text-align: center;
  font-size: 28px;
  font-family: "Script MT Bold" ;
  color: #000000;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
.titre-categorie-3 {
  position: absolute;
  left: 51px;
  top: 98px;
  text-align: center;
  font-size: 48px;
  font-family: "Script MT Bold" ;
  color: #000000;
}
}

.titre-categorie2-3 {
  position: absolute;
  left: 50px;
  top: 69px;
  text-align: center;
  font-size: 28px;
  font-family: "Script MT Bold" ;
  color: #FFFFFF;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
.titre-categorie2-3 {
  position: absolute;
  left: 50px;
  top: 99px;
  text-align: center;
  font-size: 48px;
  font-family: "Script MT Bold" ;
  color: #FFFFFF;
}
}

/***********************************************************************************************/
/* ---- 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: 385px;
	width: 100%;
}
@media (min-width: 620px) {  /* pour un écran d'au moins 620px */
	.bloc-vide {
		position: relative;
		height: 555px;
		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: #FFFFFF; /* 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: #FFFFFF;
		font-size: 17px;
	}
}
@media (min-width: 620px) {  /* pour un écran d'au moins 620px */
	.contenu-1000 {
		position: relative;
		text-align: left;
		color: #FFFFFF;
		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: #FFFFFF;
		font-size: 20px;
		margin-left: auto;
		margin-right: auto; 
		padding: 20px;
		max-width: 1000px;
	}
}


/* affichage du corps de la page, pour un menu en haut et horizontal */
.contenu {
  position: absolute;
  top: 640px;
  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;
}

.contenu-tel {               /* pour un écran de moins de 320px  */ 
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding-left: 3px;
	text-align: left; 
	color: #FFFFFF; /* noire */
	font-size: 15px;
}
@media (min-width: 320px) {  /* pour un écran d'au moins 320px mais moins de 620  */
	.contenu-tel {
		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-tel {
		position: relative;
		text-align: left;
		color: #FFFFFF;
		font-size: 18px;
		margin-left: auto;
		margin-right: auto; 
		padding: 18px;
		max-width: 800px;
}
}
@media (min-width: 1020px) { 
	.contenu-tel {
		position: relative;
		text-align: left;
		color: #FFFFFF;
		font-size: 20px;
		margin-left: auto;
		margin-right: auto; 
		padding: 20px;
		max-width: 1000px;
	}
}




/* --------------------------------- POUR LE MENU HORIZONTAL ----------------------------------------- */
/* style pour le menu horizontal */
.lien-menu-h {           /* pour un écran de moins de 620px */
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  color: #99BBDD;
  font-size: 16px;
  font-weight: bold;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.lien-menu-h {
	  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
	  color: #99BBDD;
	  font-size: 22px;
	  font-weight: bold;
	}
}

.lien-menu-h:hover {
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  color: #FFFF11;        /* couleur jaune */
  font-size: 16px;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.lien-menu-h:hover {
    text-decoration: none; /* pour ne pas souligner les liens hypertextes */
    color: #FFFF11;        /* couleur jaune */
    font-size: 22px;
    }
}


/* menu horizontal */
nav {
  width: 100%;                 /* pour un écran de moins de 620px */
  position: absolute;
  top: 328px;
  left: 0px;
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  background-color: #000000;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	nav {
	  width: 100%;
	  position: absolute;
	  top: 500px;
	  left: 0px;
	  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
	  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 */
}

/* 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 */
}

/* 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: 1000;
  /* 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;
}


.conteneur{
  margin: 50px 20px;
  height: 1500px;
}






/* ------------------  LES DEUX BANDES ENCADRANT LE MENU HORIZONTAL  ---------------         */

/* séparateur entre le bandeau du haut et le reste */
.separateur-haut {         /* pour un écran de mois de 620px */
  position: absolute;
  top: 301px;
  left: 0px;
  width: 100%;
  height: 15px;
  background-image: url("Muaythai-presentation-1.jpg");
  background-repeat: repeat;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.separateur-haut {
	  position: absolute;
	  top: 473px;
	  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 {         /* pour un écran de mois de 620px */
  position: absolute;
  top: 366px;
  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: 538px;
	  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;
}

.taille-bloc820 {
  width: 820px;
}

.taille-bloc800-margé {
  width: 800px;
  padding-left: 20px;
}

.taille-bloc780-margé {
  width: 780px;
  padding-left: 20px;
}

/* 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-bloc520-margé {
  width: 500px;
  padding-right: 20px;
}

.taille-bloc500 {
  width: 500px;
  /*  border-width: 1px;
  border-style: solid;
  border-color: 444444; */
}

.taille-bloc490 {
  width: 490px;
}

.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-bloc320-margé {
  width: 300px;
  padding-right: 20px;
}

.taille-bloc300-margé {
  width: 300px;
  padding-right: 20px;
}

.taille-bloc275-margé {
  width: 275px;
  margin-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-bloc176-margé {
  width: 176px;
  margin-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;
}

/* pour que les images soient à gauche */
.àgauche {
  float: left;
}

/* ------------------  STYLES DE POLICE  ---------------         */
/* pour les commentaires sous les photos */
.police-commentaire {
  font-size: 18px;
  text-align: center;
  font-family: "Times";
}

.police-centre {
  text-align: center;
}

/* notamment pour les avis et ce qui est inclus dans les tarifs */
.police-jaune {
  color: #FFFF69; /* couleur jaune des lettres FFFF69 */
}

/* style lien pour le texte jaune */
.lien-jaune {
  /*text-decoration: none;*/ /* pour ne pas souligner les liens hypertextes */
  color: #FFFF69;
}
.lien-jaune:hover {
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  color: #FFFF69;        /* couleur jaune */
}


/* style lien pour le texte noir, pour les titres dans la liste simple */
.lien-noir {
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  color: #000000;
}
.lien-noir:hover {
  text-decoration: underline; /* pour souligner les liens hypertextes */
  color: #666600;        /* couleur rouge */
}

/* style lien pour le texte blanc, pour les sources */
.lien-blanc {
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  color: #FFFFFF;
}
.lien-blanc:hover {
  text-decoration: underline; /* pour souligner les liens hypertextes */
  color: #00DCE8;        /* couleur violette comme les titres */
}

/* style pour les liens du menu de la liste détaillée */
.lien-menu-detail {
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  color: #FFFFFF;        /* couleur blanche */
}

.lien-menu-detail:hover {
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  color: #FFFF11;        /* couleur jaune */
}

/* style pour la page de comparaison : idem lien-menu-h mais sans changement de taille pour un petit écran */
.lien-comparaison {           
	  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
	  color: #99BBDD;
	  font-size: 22px;
	  font-weight: bold;
}

.lien-comparaison:hover {
    text-decoration: none; /* pour ne pas souligner les liens hypertextes */
    color: #FFFF11;        /* couleur jaune */
    font-size: 22px;
}


/* pour savoir qu'on est sur telle page */
.police-jaune {
  color: #FFFF11;
}



/* notamment pour la FAQ */
.police-paille {
  color: #FFFF99; /* couleur paille des lettres  */
}

.italique {
  font-style: italic;
}

/* couleur rouge pour les titres (sans taille imposée, à utiliser avec <H2> notamment) */
.titre-couleur1 {
  color: #FF4400;
}

/* couleur bleue pour les titres (sans taille imposée, à utiliser avec <H2> ) */
.titre-couleur2 {
  color: #00DCE8;
}


/* couleur essai pour les titres (sans taille imposée, à utiliser avec <H2> notamment) */
.titre-couleur3 {
  color: #00FFFF;
}

/* en cas de modification de la couleur, modifier aussi le "lien-paragraphe" ci-dessous */
.paragraphe {
  font-size: 24px;
  font-family: "Monotype Corsiva" ;
  color: #00DCE8;
  text-align: center;
}

/* style lien pour le "paragraphe" ci-dessus */
.lien-paragraphe {
  font-size: 24px;
  font-family: "Monotype Corsiva" ;
  color: #00DCE8;
  text-align: center;
}
.lien-paragraphe:hover {
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  font-size: 24px;
  font-family: "Monotype Corsiva" ;
  color: #00DCE8;
  text-align: center;
}

.paragraphe3 {
  font-size: 28px;
  font-family: "Monotype Corsiva" ;
  color: #55FFFF;
  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;
}

/* ----------------***********************---------------------- */
/* ------------------  STYLES DE TABLEAUX  ---------------         */

.largeur50 {
  width: 50px;
}

.largeur100 {
  width: 100px;
}

.largeur140 {
  width: 140px;
}

.largeur180-min {
  min-width: 100px;
}
@media (min-width: 500px) { /* pour un écran d'au moins 500px */
.largeur180-min {
  min-width: 180px;
}
}

/* tableau des listes simples pour petits et grands écrans */
.tab-police {               /* pour un écran de moins de 500px */
  font-size: 14px;
  text-align: center;
  font-family: "Times";
  color: #000000; /* couleur noire des lettres */
}
@media (min-width: 500px) { /* pour un écran d'au moins 500px */
	.tab-police {
	  font-size: 18px;
	  text-align: center;
	  font-family: "Times";
	  color: #000000; /* couleur noire des lettres */
	}
}

.tab1-tel {    /* 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-tel 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: 4px;
  table-layout: fixed;          /* pour automatiser la largeur des cases */
  background-color: #FFFFFF;
}
@media (min-width: 500px) { /* pour un écran d'au moins 500px */
	.tab1-tel 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-tel 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: 4px;
  table-layout: fixed;          /* pour automatiser la largeur des cases */
  background-color: #00DCE8;
}
@media (min-width: 500px) { /* pour un écran d'au moins 500px */
	.tab1-tel 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: #00DCE8;
	}
}

/* ----------------***********************---------------------- */


/* ------------------  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 */
}
	
.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-unique	{ /* aucun effet si petit écran */
	padding: 0px;
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
	.section-unique	{ /* bloc de maximum 800 de large, et avec des marges intérieures de 10 */
		max-width: 800px;
		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;
	}
}

.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: 10px;  /* marge intérieure à gauche de 10px */
}  

.marge-int-gauche-20 {
  padding-left: 20px;  /* marge intérieure à gauche de 20px */
}  

.contenu-infos {               
	padding: 5px;
	text-align: left; 
	color: #000000;
	font-size: 20px;
	background-color: #EEEEEE;  
	/* background-color: #00DCE8;   */
	border-radius: 20px;
}
@media (min-width: 620px) {  
	.contenu-infos {
		padding: 15px;
		text-align: left;
		color: #000000;
		font-size: 25px;
		background-color: #EEEEEE;  
		border-radius: 20px;
	}
}
@media (min-width: 1020px) {  
	.contenu-infos {
		padding: 25px;
		text-align: left;
		color: #000000;
		font-size: 25px;
		width: 900px;
		background-color: #EEEEEE;  
		border-radius: 20px;
	}
}