/**********  GENERAL **********/

@font-face {

	font-family : 'Bebas';
	src : url('BebasNeue-Regular.otf') format('otf'),
	      url('BebasNeue-Regular.eot') format('eot'),
              url('FONT/BebasNeue-Regular.ttf') format('truetype')
}

@font-face {
	font-family : 'Caviar';
	src : url('FONT/CaviarDreams.ttf') format('truetype');

}

@font-face {
	font-family : 'LouisG';
	src : url('FONT/LouisGeorgeCafe.ttf') format('truetype');

}

@font-face{
	font-family: 'LouisGlight';
	src : url('FONT/LouisGeorgeCafeLight.ttf') format('truetype');
}


@font-face{
	font-family: 'Prata';
	src : url('FONT/Prata.ttf') format('truetype');
}

@font-face{
	font-family: 'Consolas';
	src : url('FONT/Consola.ttf') format('truetype');
}

@font-face {

	font-family : 'Minimal';
	src : url('FONT/minimal.otf') format('opentype'),
}

* {

	margin:0 ;
	padding:0;
	box-sizing : border-box;
}

body {
	background-color: #f7f7f7;
}


html {
	scroll-behavior: smooth;
}


/************* MENU *************/

.show-menu  .nav-icon {
	display:none;
}
.checkbox-menu{
  display:none;
}

.menu-block {

	display: -webkit-flex; /* Safari version ancienne */
	display:flex;
	width:100%;
	justify-content:center;
	margin : 8em auto 0 auto;

}

.line {
	display: block;
	width:30%;
	height:0.5px;
	background-color: #afafaf;
	margin: 2em auto 6em auto;
}


.menu-block ul.navUL {

	list-style:none;
	display:flex;
	gap:40px;
	padding: 0;
	align-items: center;

}

@keyframes onHoverAnimation {

/** Using transition makes the background of the items appear on click, Animation is a solution to this problem **/

    0% {
        color: rgb(182 182 182);
				text-shadow:  ;
    }
    100% {
        color: #9f1d35;
				text-shadow: 1px 1px 15px #9f1d35;
    }
}

ul.navUL li > a {

  font-family : 'Minimal';
	display:flex;
	text-decoration: none;
	color :  rgba(182 182 182);
	font-size : 1.5rem ;

  animation-duration: 0.7s;                     /** Better solution than transition **/
	animation-timing-function: ease-in-out;
	animation-delay: 0ms;
	animation-fill-mode: forwards;                /** let the animation run and not go back to the original state**/

}

ul.navUL li > a:hover {                                    /* Action lors du passage du pointeur*/

  text-decoration : none;                        /* Lien souligné lors de la selection*/
  animation-name: onHoverAnimation;
}

ul.navUL li > a.active {
	color : #9f1d35;
	text-shadow: 1px 1px 15px #9f1d35;
	animation-duration: 0s;
}
/****************** PRESENTATION / ACCEUIL *****************/

.container {

	padding-bottom: 30px;                     /* Donne de l'espace avec le footer */
}

.pres {

	display: -ms-grid;  /* Ancienne version d'IE et Safari */
	display : grid;
	grid-template-columns : repeat(1, minmax(0,1fr));
	margin : 0 auto;
	padding: 0 25%;

}

.pres .pres-content {

	margin : 0 50px;

}
.pres .pres-content h2 {

  font-family : 'Prata';
	font-size: 30px;
	text-align: center;
	margin-bottom:66px;

}

.pres .pres-content p {

  font-family : ;
	font-size : 20px;
	margin : 20px 0;
	text-align : justify;
	line-height : 2;
}

.text_popup {   						/* Texte laissant apparaître l'image en popup */

	text-decoration: dashed underline #09c400;
	color: black;
	cursor: default;
}

.text_popup span {					 /* Classe accuillant l'image associée au texte */

	position:fixed;
	visibility:hidden;
	width:20%;
	height:auto;
	margin:20px;

}

.text_popup span img { 					 /* Image pop-up */

	max-width : 100%;
	height    : 100%;

}

.text_popup:hover #popup_1 {

	visibility:visible;
	top:0;
	left:100px;
	z-index:1;

}


.text_popup:hover #popup_2 {

	visibility:visible;
	top:200px;
	left:500px;
	z-index:2;

}

.pres .pres-image {

	margin : 0 50px;
}

.pres .pres-image img {

	border: 1px solid white;
	height :auto;      /* Fill the image in the  */
	max-width : 100%;   /*      container         */
	object-fit : cover; /* Keep the proportion of the image as the screen shrink */
}

/****************** PAGE VOYAGES ******************/

.container_2 {                                  /* Contient l'ensemble des éléments pays sous forme de grille à deux colonnes */

	margin : 0 10em;
	display : grid;
	grid-template-columns : repeat(2,1fr);
	grid-gap : 2em;
}

.pays {
	position : relative;			/* Place le texte dans l'image*/
}


.pays .image a {
	display : block;                    /* Garde l'effet "blur" dans le cadre*/
	overflow : hidden;
}

.pays .image  img {

	width : 100%;
	height : 300px;
	object-fit : cover;		    /*Conserve les proportions de l'image */
	object-position : 50% 80%;
	transition : 0.4s;

}


.pays .image .speciale_image  img {         /* Spécialement pour l'image Méxique, pour ajuster ses valeurs dans "object-position" */

	width : 100%;
	height : 300px;
	object-fit : cover;
	object-position : 50% 30%;
	transition : 0.4s;

}

.pays img:hover {
	opacity : 0.8;
	webkit-filter: blur(4px); /* Chrome, Safari, Opera */
  filter: blur(4px);
}


.pays .text  {
	opacity : 0;
	position : absolute;
	top : 50%;
	left : 50%;
	transform : translate(-50%,-50%);
	z-index : 2;
	font-size : 40px;
	font-family : 'Prata';
	pointer-events : none;
	color : black;
	transition : 0.4s;
	color: #9f1d35;
}

.pays .text  a {
	text-decoration:none;
	color : black;
}

.pays:hover .text {
	opacity : 1;
	transition : 2s;
}

@media screen and (max-width : 700px){

	.pays .text  {
		opacity : 1;
}
	.container_2 {
	grid-template-columns : repeat(1,1fr);
	}
}

/*************************** PAGE AVENTURES ***************************/

/*.texte {
	display : flex;
	justify-content: center;
}*/

/** Créer un gradient de couleur en fond et avec l'option "background-clip : text"
 * le gradient n'apparait que dans le texte voulu, en associant la couleur "transparent", sinon l'option n'aura aucun effet **/

.title-gradient {

	display:flex;
	justify-content:center;
  font-size:35px ;
  background: radial-gradient(circle, #9f1d35, #afafaf, #afafaf);
  background-clip: text;
	color:transparent;

}

/* Grille à 2 colonnes pour la carte et les liens des étapes à côté */

.carte {

	display:grid;
	grid-template-columns: repeat(2,1fr);
	/*padding : 0px 200px 100px 200px;*/
	width:70%;
	margin:auto;
}
.carte_image {

	align-content: center;

}
.carte_list {

	display: flex;

}

.carte li + li {

 	 margin-top: 30px;
}

.carte ul {

	list-style:none;
	margin:50px auto;
	align-content: center;
}

.carte a {
	font-size:20px;
	text-decoration:none;
	color:#000000;
	font-family : 'Prata';
}


.carte path {

	fill : #ffffff ;
	stroke :#000000 ;
	stroke-width : 1px;
}

/** #circle:hover {
	fill: #f1ff;
	transition : 0.5s;
} **/

.is-active #circle {
	fill :  #000000  ;
	transition : 0.2s;
}

.carte a.is-active {
	color: #000000;
	font-weight: lighter;
	text-decoration: underline;
}
.carte circle {

	stroke:#000000;
	stroke-width:1;
	fill:#ffffff;
}

/********** MISCELLANEES **********/

.container_3 {

	display : grid;
	grid-template-columns : repeat(1,1fr);
	grid-gap : 30px;
	padding-bottom:40px;

}

.miscellaneous-item {

	width:590px;
	margin:auto;
	position : relative;
}

.miscellaneous-item.PCT {
	display : none;
}

.miscellaneous-item .image a {
	width : 100%;
	height : 100%;
	display : flex;
	justify-content : center;
	overflow : hidden;
}

.miscellaneous-item .image  img {

  cursor : pointer;
	width : 100%;
	height : 300px;
	object-fit : cover;
	object-position : 50% 80%;
	transition : 0.8s;

}


.miscellaneous-item .image .speciale_image  img {

  cursor : pointer;
	width : 100%;
	height : 300px;
	object-fit : cover;
	object-position : 50% 30%;
	transition : 0.8s;

}

.miscellaneous-item img:hover {

	opacity : 0.8;
	webkit-filter: blur(4px); /* Chrome, Safari, Opera */
  filter: blur(4px);
}


.miscellaneous-item .text  {
	opacity : 0;
	position : absolute;
	top : 50%;
	left : 50%;
	transform : translate(-50%,-50%);
	color : white;
	z-index : 2;
	font-size : 40px;
	font-family : 'Prata';
	pointer-events : none;
	color:#9f1d35;
}

.miscellaneous-item .text  a {
	text-decoration:none;
	color : black;
}

.miscellaneous-item:hover .text {
	opacity : 1;
	transition : 2s;
}

/********** PAGE GALLERIE **********/

.gallery {
	padding-bottom: 30px;
}

.gallery ul {

	margin : 0px auto;
	max-width : 1260px;
	display: -webkit-flex;  /* Safari version ancienne */
	display: flex;
	flex-wrap: wrap;        /* Ajoute un retour automatique*/
	grid-gap: 8px;
	padding : 0 20px;
}

.gallery ul::after {        /* Pseudo element se plaçant à la fin du conteneur*/

/*	content :'' ;        /* Ajoute un contenu vide*/
/*	display : block;
	flex-grow :  ;    */
}


.gallery li {

	list-style : none;
	height : 350px;
	flex: 1 1 300px;				/* grow, shrink , basis */
	/*flex-grow : 1;         /* Utilise tout l'espace, expansion maximale */
  overflow : hidden;
	cursor : pointer;
}

.gallery ul li img {

	width : 100%;
	height: 100%;
	object-fit: scale-down ; /*effet désordonné sur le cadrillage des photos */
	transition : 1s;
}

.gallery ul li img:hover {

	transform :scale(1.2);    /* Taille du grossissement de l'image lors du passage du pointeur*/
}

.gallery .popup-image {

	position : fixed;
	top : 0;
	background : rgba(0,0,0,0.8);
	height : 100%;
	width  : 100%;
	z-index: 5;
	display : none;
}

.gallery .popup-image span {              /* Croix pour fermer l'image en pop-up */

	position : absolute;
	right : 50px;
	font-size : 40px;
	font-weight : bolder;
	color : #fff;
	cursor : pointer;
	z-index : 2;
}

.gallery .popup-image img {

	position : absolute;
	top : 50%; left:50%;                          /* Permet de centrer l'image sur l'écran en association avec transform : translate (-50%,-50%) */
	transform : translate(-50%,-50%);
	width : auto;
	height : 90%;
	object-fit : cover;
	z-index : 2;
	cursor : zoom-out;
}

#gallery_buttons {
	display: flex;
	justify-content: center;
	margin-bottom: 4em;
}

#gallery_buttons button {
	margin : 0 40px;
	background: none;  /* Supprime le fond */
  border: none;      /* Supprime la bordure */
  padding: 0;        /* Enlève les espaces internes */
  font: inherit;     /* Hérite de la police du parent */
  cursor: pointer;   /* Garde le curseur comme pointeur pour l'interaction */
}
/**@media (max-width : 750px) {

	.gallery .popup-image img {
	       width : 50%;
       }
}*/

/**************** CARTE GOOGLE MY MAP********************/

.embed-container {

	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
  max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 114%;
	top:-14%;
}

/*********************** PAYS INDIVIDUELS & pct_i ******************/

.progress_bar {
	background: linear-gradient(0.25turn, #fff, #9f1d35 );
	position:fixed;
	top:0;
	left:0;
	height:5px;

}
.country-container {

  width : 60%;
	height : auto;
	display : flex;
	flex-direction : column;
	margin : 0 auto;

}

.top-intro{

  display: flex;
	flex-direction: column;
	margin-bottom : 40px;
	line-height : 2;
}

.top-intro h1 {

	font-family : 'Prata';
	font-size : 60px;
	text-indent: -7px;
	color:#9f1d35;
}

.top-intro .date {

	font-family : 'Didot';
	font-weight: bold;
	font-style : italic;
	font-size: 20px;
	margin-bottom:20px;
}

.top-intro .mile {

	font-family : 'Didot';
	font-style : italic;
	font-weight: bold;
	font-size : 20px;
}

#separ_couleur {
	color:#9f1d35;
	font-weight: bold;
	font-family: 'Caviar';
}


.top-intro .detail {

	font-family : 'LouisG';
	/*margin-left : 10px;*/
	font-size: 25px;
}

.main h3 {
	text-align: right;
	padding: 10px;
}

.main .date {
	font-family : 'Didot';
	font-weight: bold;
	margin : 30px 0;
	font-style : italic;
	font-size: 25px;
}

/* TEST AFFICHAGE CORRECT DATE PCT PHP*/
.main .TESTDAT {
	margin-top : 30px;
	font-style : italic;
	font-size: 25px;
}

.grid-2 {

	display : grid;
	grid-template-columns : repeat(2,1fr);
	grid-column-gap : 5px;

}

.grid-2 figure img {

	height :450px ;
}

.grid-2 .position {

	object-position : 10% 10%
}

.main figure img {

        width : 100%;
	max-height :600px ;
	object-fit : cover;
}


.main p {

	font-family:'Didot';
	width :100% ;
	line-height : 2;
	text-align : justify;
	font-size : 18px;
	margin : 30px 0 30px 0;
}

/*********** ARTICLE MISCELLANEES **********/


.miscellaneous-container {

  max-width : 750px;
	width : 100%;
	height : auto;
	display : flex;
	flex-direction : column;
	margin-left : auto;
	margin-right: auto;
}

.m_items p {

	font-family:'Didot';
	width :100% ;
	line-height : 2;
	text-align : center;
	font-size : 18px;
	margin : 30px 0 30px 0;
}


.m_items figure img {

        width : 100%;
	max-height :600px ;
	object-fit : cover;
}

.m_items h2 {
	 text-align : center;
	 margin : 40px;
}

.m_items .justify_left {
	text-align:left;
}

.m_items .justify_right {
	text-align:right;
}

.m_items em {
	font-family: 'Prata';
	font-weight: bold;
	color:#9f1d35;
}


/************BOUTON RETOUR HAUT DE PAGE*************/

#myBtn {
  display: none ;    /* Hidden by default */
  position: fixed;   /* Fixed/sticky position */
  bottom: 143px;     /* Place the button at the bottom of the page */
  right: 2%;         /* Place the button 30px from the right */
  z-index: 99;       /* Make sure it does not overlap */
  border: none;      /* Remove borders */
  outline: none;     /* Remove outline */
  background-color: white ; /* Set a background color */
  color: black;             /* Text color */
  cursor: pointer;          /* Add a mouse pointer on hover */
  padding: 10px;            /* Some padding */
  border-radius: 30px;      /* Rounded corners */
  font-size: 18px;          /* Increase font size */
	background-color: #f7f7f7;
}

#myBtn:hover {
  background-color: white; /* Add a colored background on hover */
  border: solid thin;
}

/************ FOOTER ************/

.footer {

  position: relative;
  padding : 80px 0 40px 0;
  left: 0;
  bottom: 0;
  width: auto;
  background-color: #f7f7f7;
  color: grey;
  text-align: center;
  z-index : 1;
}

.footer p {

	font-family : 'LouisG';
}

.footer a {
	text-decoration: none ;
	color : grey;
}

/***************************MEDIA QUERIES***************************/

/********************* 571<width<900px *********************/

	@media screen and (max-width : 900px)  {

	/************* PAGE INDEX *************/


			.pres {
			/*	grid-template-columns : repeat(1,1fr);
				width :100%; */
				padding: 0 15%;
			}
			.text_popup {
				text-decoration: none;
			}

			.text_popup span {
				display:none;
			}


		/************* PAGE VOYAGES *************/

		.pays .text  {
			opacity : 1;
		}

		.container_2 {
			grid-template-columns : repeat(1,1fr);
			margin : 20px;
			grid-gap : 20px;
		}

		/************* PAGE AVENTURES *************/

		.carte {
			grid-template-columns : repeat(1,1fr);
			width :100%;
			padding:0;
		}

		.carte_image  {
			display : none;
		}

		.carte ul {
			display: flex;
			flex-direction:column;
			align-items: center;
		}

	}
/********************* 0<width<570px *********************/

	@media screen and (max-width : 600px)  {

	/************* MENU *************/

		.line {
			display: none;
		}

		ul.navUL li > a  {
			color : black;
			animation-duration : 0s;
		}

		.show-menu .nav-icon {
	  	cursor: pointer;
	  	display: inline-flex;
	  	font-size: 1.5em;
	  	padding: 0.5em;
		}

		input.checkbox-menu[type="checkbox"] {
	  	display: none;
	  	-webkit-appearance: none;
		}

		.menu-block {

			margin:0;
			transition: all 1s ease-out;
		}

		.menu-block ul.navUL {

			opacity:0;
			visibility: hidden;
			flex-direction:column ;
			gap:0;
			transition: all 1s ease-out;
		}

		input.checkbox-menu[type="checkbox"]:checked ~ div.menu-block {

			opacity : 1;
	  	visibility: visible;
			margin:30px auto;
		}

		input.checkbox-menu[type="checkbox"]:checked ~  div.menu-block ul.navUL {

			opacity : 1;
	  	visibility: visible;
			gap:30px;
		}


		/************* PAGE INDEX *************/

		.pres {
			padding: 0;
		}

		.pres .pres-content {
			margin :10px;
		}

		.pres .pres-image {

			margin : 10px;
		}

		.pres .pres-content p{
			font-size: 18px;
		}

		/************* PAGE AVENTURES *************/

		.title-gradient {
			font-size:20px ;
		}
		/************* PAGE MISCELLANEES *************/

		.miscellaneous-item {
			width:90%;
		}

		.miscellaneous-item .text  {
			opacity : 1;
		}

		/************* PAGE GALLERIE *************/
		.gallery .popup-image img {
			width : 90%;
			height : auto;
		}
	/************* PAGE PAYS & PCT_i *************/

		.country-container {

		  width : 90%;
		}

		.grid-2 figure img {
			height:200px;
		}
}