/**********  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;
	max-width:85%;
	justify-content: space-between;   /* clé */
	align-items: center;
	margin: 6em auto;
}

.menu-left {
  display: flex;
  align-items: center;
	width : 100%;
}

.site-name {
  font-family: 'minimal';
  font-size: 1.6rem;
  text-decoration: none;
  color: rgb(182 182 182);
}

.site-name span {
  color: #9f1d35;
}

.menu-right {
  position: relative;
}

.navUL {
  position: relative;
}

/* La ligne */
.navUL::after {
  content: "";
  position: absolute;
  bottom: -1.2em;
  left: var(--line-left, 0);
  width: var(--line-width, 0);
  height: 0.5px;
  background-color: #9f1d35;
  box-shadow: 0 0 10px #9f1d35;
  transition: left 0.35s ease, width 0.35s ease;
}

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


.gallery_accueil_container {

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

 .gallery_accueil {						/*Ancienne version de la gallerie (plus classique)*/
	 padding-bottom: 30px;
 }

 .gallery_accueil ul {

 	margin : 0 auto;
 	max-width : 85%;
 	display: -webkit-flex;  /* Safari version ancienne */
 	display: flex;
 	flex-wrap: wrap;        /* Ajoute un retour automatique*/
 	grid-gap: 30px;
 }

 .gallery_accueil 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;
	pointer-events: none;
 }

 .gallery_accueil ul li img {

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

 .fhree {
	width: 100%;
	height: auto;
	margin: 20% 0 20% 0;
 }


.fhree h2 {
	text-align: center;
	font-size: 50px;

}
.fhree .underline {         /** ANIMATION LIGNE (ChatGPT) **/
	position: relative;
  text-decoration: none;
  color: #9f1d35;
	}

.underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	height: 3px;
	width: 0;
	background: #9f1d35;
	animation: underline 2s infinite;
}

@keyframes underline {
	0% { width: 0%; }
  50% { width: 90%; }
  100% { width: 0%; }
}

 /************************************************/


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

.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;
	width : 100%;
	text-align: center;
	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: 30px;
	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 h2 {
font-family : 'Prata';
}


.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 :800px ;
	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;
}

/***MIAOU***/

.text_popup {
text-decoration: dashed underline #09c400;
color: black;
cursor: default;
position: relative; /* utile si tu ajustes plus tard */
}

figure .text_popup > img {
position: fixed;
visibility: hidden;
width: 40%;
margin: 20px;
}

figure .text_popup:hover > img {
visibility: visible;
top: 0;
left: 100px;
z-index: 1;
}
/******/


/**** Gallery Chaos ****/

.gallery_chaos {
  display: flex;
  flex-wrap: wrap; /* Permet aux images de se déplacer sur plusieurs lignes */
  gap: 20px;
	justify-content: space-between; /* Pour que les images soient réparties de manière fluide */
}

.gallery_chaos figure {
  width: 30%;
}

.gallery_chaos img {
  width: 100%;      /*Les images prennent toute la largeur disponible de leur élément parent (<figure> 30%), sans dépasser.*/
  height: auto;
  display: block;
}

/* tailles différentes */
.gallery_chaos figure:nth-child(3n) {
  width: 50%;   /* Les images multiples de 3 auront une largeur de 45% */
}

.gallery_chaos figure:nth-child(5n) {
  width: 40%;   /* Les images multiples de 5 auront une largeur de 25% */
	transform: translateX(-40px);
}

/* décalages */
.gallery_chaos figure:nth-child(2n) {
  transform: translateY(40px); /* Décale les images paires vers le bas */
}

.gallery_chaos figure:nth-child(4n) {
  transform: translateX(20px);  /* Décale les images multiples de 4 vers la droite */
}

/* rotation légère (optionnel) */
.gallery_chaos figure:nth-child(6n) {
  transform: rotate(-1deg);    /* Rotation légère des images multiples de 6 */
}

/****/

/********************** CONTACT *********************/


/* ---------- WRAPPER ---------- */
.contact-wrapper {
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ---------- CARD ---------- */
.contact-card {
    background: #f7f7f7;
    width: 100%;
    max-width: 420px;
    padding: 30px;
		margin-bottom : 5px;
    border-radius: 12px;
    box-shadow: 0 20px 20px rgba(0,0,0,0.2);
    animation: fadeUp 0.8s ease;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-card h2 {
    text-align: center;
    margin-bottom: 25px;
		color: #9f1d35;
		font-family : 'Prata';

}

/* ---------- FORM ---------- */
.contact-form .field {
    position: relative;
    margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}

.contact-form textarea {
    resize: none;
}

/* ---------- FLOATING LABEL ---------- */
.contact-form label {
    position: absolute;
    top: 50%;
    left: 12px;
    color: #888;
    font-size: 14px;
    pointer-events: none;
    transform: translateY(-50%);
    transition: 0.3s;
    background: #f7f7f7;
    padding: 0 5px;
}

.contact-form input:focus + label,
.contact-form textarea:focus + label,
.contact-form input:not(:placeholder-shown) + label,
.contact-form textarea:not(:placeholder-shown) + label {
    top: -6px;
    font-size: 12px;
    color: #9f1d35;
		background : transparent;
}

/* ---------- FOCUS ---------- */
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #f7f7f7;
    box-shadow: 0 0 0 2px rgba(102,126,234,0.2);
}

/* ---------- BUTTON ---------- */
.contact-btn {
    width: 100%;
    padding: 14px;
    border: none;
    background: linear-gradient(135deg, #white, #f7f7f7);
    color: #9f1d35;
    font-size: 16px;
		font-family: 'Prata';
		font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* ---------- SUCCESS ---------- */
.contact-success {
    text-align: center;
    color: #9f1d35;
    font-weight: bold;
    animation: fadeUp 0.6s ease;
}


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

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

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

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


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

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

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

		.text_popup {
			text-decoration: none;
		}

		.text_popup span {
			display:none;
		}

		.gallery_chaos figure {
	     width: 100%;  /* Chaque image prendra 100% de la largeur */
	   }

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

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

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

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

		ul.navUL li > a:hover {
    animation-name: none;
  }

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

		.navUL::after {
	 		width: 0 !important;
	 		opacity: 0 !important;
	 		transition: none !important;
 		}

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