@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans:wght@700&display=swap');
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

*
	{
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	box-sizing: border-box;
	}


body {
    background-color: #f4f4f9;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

#searchBarre form
	{
    display: flex;
    width: 100%;
    justify-content: space-between;
	}

#searchBarre div button {
    border: none;
    /* background: url("../images/recherche.svg") no-repeat; */
    width: 100%;
    height: 100%;
}

#searchBarre div button:hover {
    cursor: pointer;
}

section
	{
    display: flex;
    align-items: center;
    flex-direction: column;
	padding: 2vw 0 2vw 0;
	}

a
	{
	color: #fdc758;
	text-decoration: none;
	}

a:hover
	{
/*    text-decoration: underline;		*/
	font-weight: bold
	}

#logoTypo {
    top: 2%;
    left: 1%;
    position: absolute;
    font-size: 2.2rem;
	color: #f4f4f9;
}

@media screen and (max-width: 500px)
	{ #logoTypo { font-size: 1em; } }

#profil {
    width: 60px;
/*	height: 60px;					*/
    position: absolute;
    top: 1vh;
    right: 2vw;
    border: solid 2px white;
    border-radius: 100%;
/*	display: flex;					*/
    align-content: center;
    justify-content: center;
}

#profil svg {
    transform: scale(0.6);
    fill: white;
}


header img {
    width: 100vw;
    display: flex;
    align-self: baseline;
}

h1
	{
    font-size: 2.3rem;
	font-weight: bold;
	color: #4062bb;							/*		#3a76bd;				*/
	}

h2
	{
	font-size: 1.5em;
	padding-top: 0.5vw;
	padding-bottom: 1vw;
	color: #4062bb;							/*		#3a76bd;				*/
	display: block;
	width: 100%;
	}

h3
	{
	font-size : 1.1em;
	font-weight : bold;
	color: #4062bb;							/*		#3a76bd;				*/
	display: block;
	margin-bottom : 20px;
	}


/* #InfosPrincipales ***************************************************************************************/

#TitrePrincipal
	{
	display: grid;
	grid-template-columns: 1fr 60px 60px 60px 60px 60px;
	grid-column-gap: 20px;
	margin-bottom: 1vw;
	}

#Titre
	{
	font-size: 2.3rem;
	font-weight: bold;
	color: #4062BB;

	height: 50px;
	margin-bottom: 20px;
	}

#Date
	{
	text-align: right;
/*	margin-top: 1vw;				*/
	margin-bottom: 20px;
	}

#InfosPrincipales
	{
	display: grid;
	grid-template-columns: 1fr 800px;

	grid-template-areas:
		"InfosLieu ImagePrincipale";
	}

#ImagePrincipale
	{
/*	width: 800px;			*/
	}

#InfosLieu
	{
	}

#VilleVillageFleuri
	{
	float: right;
	display: inline;
	margin-left: 20px;
	}

#Titre ul
	{
    display: flex;
    list-style-type: none;
/*    justify-content: flex-start;		/*	space-evenly;			*/
/*    padding: 1vh 2vw 1vh 2vw;										*/
	}

#Titre li
	{
    display: flex;
    align-items: start;					/*    align-items: center;			*/
	}

/*
#fil-ariane ul li
	{
    display: flex;
    margin: 0 1vw 0 1vw;
	}
*/


/* Nav ******************************************************************************************************/
/* Nav ******************************************************************************************************/

nav
	{
    position: fixed;
	width: 12vw;								/* width: 10vw; */
    height: auto;
    background-color: #4062bb;
    border-radius: 0 30px 30px 0;

	padding-left: 1vw;
	}

nav a
	{
	text-decoration: none;
	}

nav li {
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
    list-style: none;
	padding: 3%;
	color: #e9f0f1;
}

nav li:hover
	{
	color: #1a181b;
	background-color: #d4b902;
    font-weight: bold;
	}

.SousMenuGras
	{
	font-weight: Bold;
	}


/* Menu *****************************************************************************************************/

#Menu
	{
	margin-left: 1vw;
	margin-bottom: 1vw;

	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 80vw;
	border-radius: 30px;
	border: solid 3px #4062BB;				/* border: none; */
	flex-wrap: wrap;
	}

#Menu span
	{
	color: #e9f0f1;
	}

#Menu span:hover
	{
	color: #1a181b;
	background-color: #d4b902;
	}

#Menu li
	{
	width: fit-content;
	height: auto;
	background: #4062BB;
/*	text-decoration: none;				*/
	display: block;
	margin: 1vh 1vw 1vh 1vw;
	font-size: 1rem;
	line-height: 1.4;
	position: relative;
	cursor: pointer;
	border-radius: 30px;
	padding: 1vh 1vw 1vh 1vw;
	}

#Menu a
	{
	text-decoration: none;
	}

#Menu li:hover
	{
	color: #1a181b;
	background-color: #d4b902;
    font-weight: bold;
	}

#Menu .MenuGras
	{
	font-weight: bold;
	font-size: 20px;
	}

#Menu .Menu
	{
	font-size: 20px;
	} 


/* ZoneCentrale *********************************************************************************************/

#ZoneCentrale
	{
	display: grid;
	margin-left: 14vw;
	margin-right: 20px;
	}


/* Footer ***************************************************************************************************/

footer
	{
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	background: #fdc758;
	padding: 1vw;
	}

footer a
	{
	color: #4062BB;
	text-decoration: none;
	}

footer a:hover
	{
	text-decoration: none;
	font-weight: bold;
	color: #4062BB;
	}

footer img
	{
	width: 4%;
	}


/* AccueilLaVie *********************************************************************************************/

#NuageDeMots
	{
    width: 100vw;
    display: flex;
    background-color: #4062BB;
    padding-left: 5vw;
	}

#NuageDeMots h1
	{
	color: #e9f0f1;
	}

#NuageDeMots ul
	{
    width: 40vw;
    display: flex;
	flex-direction: column;
	color: #e9f0f1;
    font-size: 1.4em;
	text-align: center;
	}

#NuageDeMots li
	{
	padding-bottom: 1.5vw;
	list-style-type: none;
	}

#NuageDeMots img
	{
    width: 40vw;
    padding-left: 5vw;
	}


#CarteDeFrance
	{
	display: grid;
	grid-template-columns: 1fr 1fr;

	grid-template-areas:
		"ImageCarteDeFrance ImageCarteDeFrance";

	padding-left: 3vw;
	padding-right: 3vw;
	}

#ImageCarteDeFrance
	{
	width: 40vw;
	}

#DeptCarteDeFrance
	{
	width: 50vw;
    font-size: 0.9rem;
/*    border: solid #4062BB 2px;			*/
	border: none;
	}

#DeptCarteDeFrance .Dept
	{
/*    border: solid #4062BB 2px;		*/
	border: none;
	padding-right: 1vw;
	padding-left: 1vw;
	padding-bottom: 1vw;
	}


/* Accueil Dept *********************************************************************************************/

h1 #DeptH1
	{
	color: #e9f0f1;
    background-color: #4062BB;
	}

#Dept
	{
    width: 100vw;
    background-color: #4062BB;

	display: grid;
	grid-template-columns: 1fr 1fr;

	grid-template-areas:
		"DeptTexte DeptImage";

	padding-left: 3vw;
	padding-right: 3vw;
	}

#DeptTexte
	{
    width: 40vw;
    display: flex;
	flex-direction: column;
	color: #e9f0f1;
    font-size: 1.4em;
	text-align: center;
	}

#Dept p
	{
	padding-bottom: 1.5vw;
	}

#DeptImageH
	{ text-align: center; }

#DeptImageH img
	{ height: 500px; }

#DeptImageV
	{ text-align: center; }

#DeptImageV img
	{ width: 500px; }


/* CodePostaux **********************************************************************************************/

#codePostaux
	{
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5vh;
    justify-items: center;
	}

#codePostaux a
	{
    font-size: 0.9em;
    color: #4062BB;
	}

#codePostaux a:hover
	{
    font-size: 0.9em;
    color: #fdc758;
	}

#codePostaux div
	{
    width: 48vw;
    height: 26vh;

	border-collapse: collapse;
	border: solid #4062BB 3px;

	padding: 20px;
	overflow: auto; 
	}

#codePostaux div h2 {
    display: flex;
    padding-bottom: 3%;
    justify-self: flex-start;
    align-self: flex-start;
    font-size: 1.3em;
}


/* Accueil **************************************************************************************************/

#InfosPrincipalesAcceuil
	{
	display: grid;
	grid-template-columns: 1fr 300px;

	grid-template-areas:
		"AcceuilTexte ImagePrincipale";
	}

.Accueil
	{
	padding: 2vw;
	}

#AcceuilTexte
	{
	grid-area: AcceuilTexte;

	font-size: 1.5em;
	padding: 20px;
	margin: 20px;
	border-style: dashed;
	border-width: 2px;
	}

#AcceuilTexte h2
	{
	text-align: center;
	margin-bottom: 40px;
	}

#AcceuilMonuments
	{
	justify-content: space-around;
	display: flex;
	padding: 2vw;
	width: 100%; 
	}


/* Accueil Dept *********************************************************************************************/

.info
	{
    display: flex;
	flex-direction: row;

    justify-content: center;
    align-items: center;
    margin-bottom: 2vh
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
}

.info p {
    text-align: center;
/*    color: #e9f0f1;							*/
    padding: 2vh 5vw 2vh 5vw;
    font-size: 1em;
}

.info:nth-of-type(2):hover {
    z-index: 3;
}

.info:nth-of-type(4):hover {
    z-index: 2;
}


.infoLieux {
    width: 80vw;
    /* position: absolute; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2vh;
    /* width:250px;
    height:250px;
    background: #e9f0f1; */
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
}

.infoLieux p, .infoLieux a {
    text-align: center;
    color: #4062BB;
    padding: 2vh 5vw 2vh 5vw;
    font-size: 1em;
}

.infoLieux:nth-of-type(2):hover {
    z-index: 3;
}

.infoLieux:nth-of-type(4):hover {
    z-index: 2;
}


/* CarteGPS *************************************************************************************************/

#CarteGPS
	{
	height: 30vw;
	margin-bottom: 1vw;
	}


#divcarte
	{
/*	width: 83vw;				*/
    height: 30vw;
	margin-bottom: 1vw;

/*	max-width: 100%;			*/
/*	max-height: 100%;			*/
	}

img.leaflet-interactive
	{
	transform: scale(5);
	}


/* MiniaturesLieu *******************************************************************************************/

.GroupeDeMiniatures
	{
	display: flex;
	flex-wrap: wrap;

/*    justify-content: center;				*/
/*   margin-left: 5%;						*/
/*   margin-top: 10%;						*/
	}

.Miniature
	{
	text-align: center;
	margin-right: 20px;
	margin-bottom: 20px;
	}

.Miniature img
	{
	height: 267px;
	width: 200px;
	}

.Miniature figcaption
{
	padding-top: 10px;
	margin-bottom: 20px;

	text-align: center;
	background-color: #6597c9;
	color: #000000;

	width: 200px;
	height: 100px;
	margin: 0 auto;
}

.Miniature a
	{
	color: #000000;
	text-decoration:none;
	}


.GroupeImagesMiniature
	{
	display: flex;
	flex-wrap: wrap;
	grid-gap: 20px;
	}

.ImageMiniature
	{
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: center;
	}

.ImageMiniature img
	{
	width: 150px;
	height: 200px;
	}


#searchBarre {
    z-index: 2;
    margin: 3vh 0vw 0 36vw;
    display: flex;
    padding: 0 2% 0 2%;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    border: 2px solid #f4f4f9;
    width: 25vw;
    height: 6vh;
    border-radius: 50px;
    background: #e9f0f1;
}

#affichage.non-activeAffichage {
    margin: 3vh 0vw 0 36vw;
    padding: 0 2% 0 2%;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    border: 2px solid #f4f4f9;
    width: 25vw;
    height: 6vh;
    border-radius: 50px;
    background: #e9f0f1;
    display: none;
}

#affichage.activeAffichage {
    margin: 3vh 0vw 0 36vw;
    padding: 0 2% 0 2%;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    border: 2px solid #f4f4f9;
    width: 25vw;
    background: #e9f0f1;
    display: flex;
    justify-content: flex-start;
    border-radius: 30px;
    height: 20vh;
    transition: height 0.25s ease-in;
}


#menuProfil, #menuProfilAvant {
    display: flex;
    border: solid 2px #d4b902;
    z-index: 5;
    padding: 3vh 1vw 3vh 1vw;
    width: max-content;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    background-color: #4062BB;
    position: absolute;
    top: 4vh;
    right: 2vw;
}

#menuProfil a, #menuProfilAvant a {
    margin-top: 1vh;
    cursor: pointer;
    text-decoration: none;
    color: white;
}

#menuProfil a:hover, #menuProfilAvant a:hover {
    width: max-content;
    font-weight: bold;
}

.non-active {
    display: none;
}

.active {
    display: flex;
    flex-direction: column;
}

#profil:hover {
    cursor: pointer;
}

#menuProfilAvant.ouvrir, #menuProfil.ouvrir {
    animation: 0.6s ease-out 0.1s 1 alternate ouvrir;
    animation-fill-mode: forwards;
}

@keyframes ouvrir {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(40px);
    }
}

@keyframes fermer {
    0% {
        transform: translateY(0px);
        display: none;
    }

    100% {
        transform: translateY(-40px);
        display: initial;
    }
}

#searchBarre input {
    width: 90%;
    height: 50%;
    padding-right: 35%;
    color: #1a181b;
    font-size: 0.7rem;
    border: none;
    background: transparent;
}

input:focus {
    outline: none;
}



#positionLegal { 
     background-color: #f4f4f9;  
    width: 100vw;
}

#positionLegal section ul li{
    list-style-type: none;
    }

#responsable ul li a{
text-decoration: none;
color: #1D2026;
}

#responsable ul li a:hover{
    font-weight: bold;
    color: #1D2026;
    }

    #presentationSite, #cnil, #cookies, #responsable,#hebergement{
        width: 100vw;
        padding: 5vh 0 4vh 0;
    }

    #droitAuteur{
        width: 100vw;
        padding: 5vh 0 4vh 0;
        margin-bottom: 15vh;
    }

    #presentationSite h1, #cnil h1, #cookies h1, #responsable h1,#hebergement h1, #droitAuteur h1{
        padding: 3vh 0 4vh 0;
    }


#presentationSite ul, #responsable ul, #hebergement ul, #cnil ul, #cookies ul, #droitAuteur ul{
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


#presentationDepartement {
    width: 100vw;
    background-color: #4062BB;
}


#presentation h1, #presentationDepartement h1, #presentationCarte h1, #rechercheDepartement h1 {
    color: #e9f0f1;
}

.boxinfo, .boxInfoLieu {
    /* position: relative; */
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
}


#trouverLieux {
    width: 100vw;
    position: relative;
}

#recherche {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80vw;
}

#boutonRecherche {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e9f0f1;
    height: 200px;
    width: 200px;
    border-radius: 100%;
}

#boutonRecherche p {
    text-align: center;
    color: #1a181b;
    font-size: 1em
}

#boutonLieu {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #4062BB;
    height: 200px;
    width: 200px;
    border-radius: 100%;
}

#boutonLieu p {
    text-align: center;
    color: #e9f0f1;
    font-size: 1em
}

#research {
    width: 2vw;
}

#maCarte {
    border-radius: 30px;
    position: relative;
    display: flex;
    width: 50vw;
    height: 50vh;
    margin-left: 10%;
}

#maCarteDepartement {
    border-radius: 30px;
    position: relative;
    display: flex;
    width: 40vw;
    height: 60vh;
}

#imageSupp{
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}


.suppPhoto{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.suppPhoto input[type="checkbox"]{
    display: flex;
    margin-left: 1vw;
}

.photoValide{
    margin-bottom: 5vh;
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: flex-start;
}

.photoValide p span{
    font-weight: bold;
}

#imageSupp img {
    width: 80%;
    margin: 4vh 0 2vh 0;
}

#submitTaille{
    margin: 2vh 40vw 5vh 40vw;
    width: 5vw;
    justify-self: center;
    align-self: center;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.photoTexte{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#imageSupp form{
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}

#imageSupp form img{
    width: 80%;
    margin: 4vh 0 2vh 0;
}

.changementTitre{
    margin: 3vh;
    padding: 5vh 2vw 5vh 2vw;
    width: fit-content;
    /* margin-left: 14px; */
    background-color: #4062BB;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
}

.changementTitre h2{
   color: #e9f0f1;
   margin: 1vh 0 2vh 0; 
}

.changementTitre p{
    color: #e9f0f1;
    margin: 1vh 1vw 2vh 0;
 }

 .changementTitre input[type="checkbox"]{
    margin: 1vh 0 2vh 0; 
 }

 .check{
    display: flex;
 }


#choixAPresenter {
    position: relative;
    width: 100vw;

}

#boutonCodePostal {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #4062BB;
    height: 150px;
    width: 150px;
    border-radius: 100%;
}

#boutonCodePostal p {
    color: #e9f0f1;
}

#infoDepartement {
    color: #e9f0f1;
    margin: 0 0 0 10%;
    width: 60%;
}

#rechercheDepartement{
    background: #4062BB;
}

#rechercheDepartement svg{
    width: 40vw;
    height: auto;
}

#rechercheDepartement h1{
    margin: 0;
    padding: 0;
}

@media all and (min-width: 0px) and (max-width: 800px) {
    #Nom_departements g text{
        fill: #1D2026;
        font-size: 1.2em;
        font-family: 'Montserrat', sans-serif;
    }
}

@media all and (min-width: 0px) and (max-width: 600px) {
    #Nom_departements g text{
        display: none;
    }
}

#rechercheDepartement svg path{
    fill: #e9f0f1;
 
     }

#rechercheDepartement svg path:hover{
   fill: #fdc758;
    }

    #rechercheDepartement svg path:hover #Nom_departements g text{
        fill: white;
		}

#icone {
    display: flex;
    width: 50vw;
    justify-content: space-between;
}

.Avoir, .Voyager, .SportEtLoisirs, .ServicesPublics, .Santé, .CommercesEtServices, .DonnéesPubliques {
    margin-top: 3%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4062BB;
    width: 80px;
    height: 80px;
    border-radius: 30px;
}

#presentationCarte {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4062BB;
}

#presentationCarte h2 {
    display: flex;
    /* justify-self: self-start; */
    /* align-self: self-start; */
    margin-right: 70vw;
    color: white;
}

.positionPresentation {
    display: flex;
    justify-content: center;
    align-items: center;
}

#boxinfo {
    width: 60vw;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
}

.placement{
    width: 100vw;
    height: 100vh;
display: flex;
align-items: center;
}

.placement h2{
    color: #e9f0f1;
    margin: 1vh 0 2vh 0;
}

.placement h3{
    color: #e9f0f1;
    margin: 0vh 0vw 0vh 1vw;
}

.adminDepart{
    border-radius: 30px;
    padding: 2vh 2vw 2vh 2vh;
    background-color: #4062BB;
    margin-left: 5vw;
}

.adminDepart form input[type="checkbox"]{
    margin: 0.5vh 0 3vh 0;
    background-color: #4062BB;
    color: #d4b902;
}

.adminDepart form input[type="checkbox"]::after{
    background-color: #4062BB;
    color: #d4b902;
}

.adminDepart form p{
    color: #e9f0f1;
    font-size: 1em;
    font-weight: bold;
    margin: 1vh 0;
}

#fleche {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    align-content: center;
    width: 100vw;
}

.fleche.gauche {
    position: absolute;
    left: 5vw;
    margin-top: 50vh;
    color: #e9f0f1;
    width: 10vw;
}

.fleche.droite {
    position: absolute;
    right: -2vw;
    margin-top: 50vh;
    color: #e9f0f1;
    width: 10vw;
}

#boutonCodePostal {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #4062BB;
    height: 150px;
    width: 150px;
    border-radius: 100%;
}

#boutonCodePostal p {
    color: #e9f0f1;
}

#infoDepartement {
    margin: 0 0 0 10%;
    width: 60%;
}

#div_title_lieu {
    margin-left: 50px;
}

#title_lieu {
    margin-top: 3vh;
    text-align: center;
    color: #000000;
}

#ii {
    display: flex;
}

#infos-local {
    margin-left: 50px;
    width: 65%;
    font-size: 1em;
    line-height: 22px;
    line-height: 1.5em;
    color: #000000;
    position: relative;
}

#cont-img-infos {
    width: 100vw;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: -2vw;
    margin-right: 2vw;
    position: relative;
}

#img-lieu
	{
    background-image: url(https://27.monvillagenormand.fr/images/300/327000356.webp);
    background-repeat: no-repeat;
    width: 300px;
    height: 400px;
	}

#maCarte1 {
    border-radius: 10px;
    width: 300px;
    height: 40vh; 
    margin-bottom: 10vh; 
    z-index: 10;
}

#partenaire {
    width: 300px;
   
    margin-top: 20px;
    margin-bottom: 5vh;
    display: flex;
    flex-direction: row; 
    align-items: center;
    flex-wrap: wrap;
}

#partenaire div {
    width: 30px;
    height: 30px;
    margin: 20px;
    cursor: pointer;
    background-image: url("../images/logo/facebook.jpg");
    background-size: cover;
}
#partenaire div:nth-child(2) 
{
    background-image: url("../images/logo/LogoTwitter.jpg");
} 
#partenaire div:nth-child(3) 
{
    background-image: url("../images/logo/LogoInstagram.jpg");
} 
#partenaire div:nth-child(4)
{
    background-image: url("../images/logo/LogoWikipedia.jpg");
}

#txt-infos-lieu-bt {
    width: 60vw;
    margin-left: 20vw;
    margin-top: 15vh;
    background-color: #4062BB;
    color: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
    display: none;
} 


#txt-infos-lieu-bt p {
    display: flex;
    justify-content: center;
}

#txt-infos-lieu {
    margin-left: 50px;
    z-index: 2;
    margin-top: -55vh;
}

#txt-infos-lieu p {

    width: 65vw;
    font-size: 1em;
    line-height: 22px;
    line-height: 1.5em;
    color: #000000;
}


@media screen and (min-width: 1040px) {
    #txt-infos-lieu-bt {
        display: none;
    } 
    
}

@media screen and (max-width: 1040px) {
    #infos-local {
        margin-bottom: 2vh;
    }

    #txt-infos-lieu {
        display: none;
        margin-top: 6vh;
    }
    #txt-infos-lieu.active {
        display: block;
        margin-top: 6vh;
    }

    #txt-infos-lieu-bt {
        display: block;
    }

    #ii {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
    }

    #cont-img-infos {
        
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

}

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

    #cont-img-infos {
        width: 80vw;
        margin-left: 10vw;
    }
}

#hordou {

    display: flex;
    align-self: center;
    background-color: #4062BB;
    width: fit-content;
    height: auto;
    padding: 0px 0px 0px 0px;
    margin-top: 20vh;
    border-radius: 20px;
    color: #fff;

} 

#hordou h2 
{
    margin: 1vh 1vw 1vh 1vw; 
}

#journee-patrimoine {
    display: flex;
    margin-top: 10%;
    padding: 2%;
    /* font-family: 'Montserrat', sans-serif; */
    flex-direction: row;
    justify-content: space-around;
}

#journee-patrimoine ul {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    list-style: none;
    border-radius: 20px;
    color: #fff;
    background-color: #4062bb;
    margin: 1.75rem 0;

}

#journee-patrimoine li {

    counter-increment: gradient-counter;
    margin-top: 1rem;
    padding: 1rem 1rem 1rem 1rem;
} 

 #journee-patrimoine li:nth-child(4), #journee-patrimoine li:nth-child(5), #journee-patrimoine li:nth-child(6), #journee-patrimoine li:nth-child(7)
{
display: none;
} 
#journee-patrimoine li:nth-child(4).active, #journee-patrimoine li:nth-child(5).active, #journee-patrimoine li:nth-child(6).active, #journee-patrimoine li:nth-child(7).active
{
display: block;
}

#journee-patrimoine li:hover {
    cursor: pointer;
    color: #d4b902; 
}
#presentation 
{
    background-color: #4062BB;
} 
#presentation h1
{
    color: #e9f0f1;
} 
#txt-card p {
    width: 50%;
    color: #fff;
}
#txt-journee-patrimoine {
    flex-direction: column;
    display: flex;
    width: 40%;
    height: auto;
    margin-left: auto;
    margin-left: -1%;
}

#proeve {
    width: 70vw;
    height: 30vh;
    margin-top: 15vh;
    margin-left: 15vw;
    background-color: #4062BB;
    border-radius: 20px;
    color: #fff;
}

#proeve p {
    margin: 20px;
}

#proeve div {
    margin-left: 10%;

    width: 80%;
    height: 50%;
    border: 5px solid #d4b902;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#icone div img {
    transform: scale(0.6);
}


#nom-ville {
    width: 25%;
    background-color: #4062bb;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    margin-bottom: 5%;
    margin-left: 1.2%;
    height: auto;
}

#txt-nom-ville, #code-postal, #village_fleuri {
    background-color: #4062bb;
    display: flex;
    flex-direction: row;
    margin-left: 5px;
    width: 30%;
    height: 100%;
}

#nom-ville p, #code-postal p {
    color: #fff;
}

#code-postal {
    margin-left: 10px;
}

#village_fleuri div {
    width: 100%;
    height: 5vh;
    border: solid #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#village_fleuri div p {
    font-size: small;
}

#txt-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
}

#txt-card p {
    width: 50%;
    color: #fff;
}

#carte-ville {
    display: flex;
    border: 1px solid #000000;
    height: 400px;
    width: 300px;
    border-radius: 30px;
    background-image: url("https://76.monvillagenormand.fr/images/300/176000077.webp");
}

/*test*/

.menu-link {
    width: fit-content;
    height: auto;
    background: #4062BB;
    text-decoration: none;
    display: block;
    margin: 0.5rem 0;
    font-size: 1rem;
    line-height: 1.4;
    position: relative;
    cursor: pointer;
    border-radius: 30px;
    padding: 1vh 1vw 1vh 1vw;
}


#test-presentation-cat {
    background-color: rebeccapurple;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#main_carrousel {
    display: flex;
    flex-direction: row;
    align-items: center;

    /* overflow-x: hidden; */
}

.w-img-nav_next, .w-img-nav_previous {
    height: 50px;
    width: 50px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 50;  
}

.w-img-nav_previous svg, .w-img-nav_next svg {
    stroke: #1D2026;
}

#img-primary-wrapper {
    border: solid red;
    width: 75vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.card_leo
/* fait en mobile fist */
    {
    background-color: #fff;
    border: solid 1px;
    border-radius: 20px;
    width: 25vw;
    height: 30vh;

}

/* #img-primary-wrapper :nth-of-type(2) 
  {
      /* margin-left: 30vw;
      margin-right: 30vw; 
  } */
.img-slider-fond, .img-slider-fond1 {
    width: 100%;
    height: 70%;
    border-radius: 20px 20px 0px 0px;
    background-image: url("../images/batiment-avec-fond/avoir/colombier.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}


.img-slider-fond1 {
    background-image: url("../images/batiment-avec-fond/avoir/chateau.jpg");
}

.info_card_leo {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
}

.info_card_leo div {
    background-color: #4062BB;
    width: 10px;
    border-radius: 50%;
}

.card_leo :nth-of-type(3) {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    font-size: 0.5em;
}

.info_card_leo p {
    font-size: 0.4em;
}

.seConnecter {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#arrow {
    border: solid #4062BB;
    border-radius: 100%;
    width: 7vh;
    height: 7vh;
    margin: 2vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#arrow svg {
    width: 75%;
    height: 75%;
}

#peopleandcracc {
    width: 70vw;
    height: auto;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
}

#people, #cracc {
    display: flex;
}

#people {
    background-color: lightgray;
    width: 40%;
    border-radius: 30px 0 0 30px;
    align-items: center;
    justify-content: center;
}
#people img 
{
    width: 100%;
    height: 100%;
    border-radius: 25px 0 0 25px;
}
#cracc {
    width: 60%;
    padding: 5vh 1vw 5vh 1vw;
    background-color: #4062BB;
    flex-direction: column;
    border-radius: 0 30px 30px 0;
}

#lcoin {
    margin: 3vh 3vw 3vh 3vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

#cracc h4 {
    color: #fff;
    font-size: 1.2rem;
}

#lcoin a {
    color: lightgray;
    font-size: 0.7rem;
}

#apigf {
    display: flex;
    justify-content: space-around;
}

#apig, #apif {
    width: fit-content;
    height: fit-content;
    padding: 1vh 1vw 1vh 1vw;
    background-color: white;
    border-radius: 25px;
    color: #fff;
    display: flex;
    align-items: center;
    cursor: pointer;
    /* flex-wrap: wrap; */
    flex-shrink: 2;
    justify-content: space-evenly;
}

#apig p, #apif p {
    font-size: 0.8rem;
    color: #4062BB;
}

#apig img {
    width: 4vh;
}

.form_modtext_form p, #formdepot p{
    margin-top: 3vh;
    color: #e9f0f1;
}

.form_frontco_form, .form_modtext_form {
    /* height: 50%; */
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.form_frontco_form p{
color: #e9f0f1;
}

.form_frontco, .form_modtext_form {
    width: 60%;
    display: flex;
    justify-content: center;
}
.form_modtext:nth-child(3){
margin-bottom: 3vh;
}

.form_modtext_form {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
}

.form_frontco input[type=email] {
    display: flex;
    width: 100%;
    padding: 1vh 1vw;
    margin: 0 0 1vh 0;
    box-sizing: border-box;
    background-color: #4062BB;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    border: none;
    border-bottom: 2px solid #fff;
}

.form_frontco ::placeholder, .form_modtext ::placeholder {
    color: #fff;
}

.form_frontco input[type=password] {
    width: 100%;
    padding: 1vh 1vw;
    margin: 2vh 0 5vh 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    background-color: #4062BB;
    color: #fff;
    border: none;
    border-bottom: 2px solid #fff;
}

.form_frontco input[type=text] {
    width: 100%;
    padding: 1vh 1vw;
    margin: 8px 0;
    box-sizing: border-box;
    background-color: #4062BB;
    color: #fff;
    border: none;
    border-bottom: 2px solid #fff;
}

.form_modtext input[type=text] { 

    /* width: 50vw; */
    height: auto;
    padding: 1vh 1vw;
    margin: 8px 0;
    box-sizing: border-box;
    background-color: #4062BB;
    color: #fff;
    border: none;
    border-bottom: 2px solid #fff;
}

.form_frontco_button{
    display: flex;
    justify-content: center;
width: 100%;
}

.form_frontco_button input[type=submit] {
    display: flex;
    width: 80%;
    padding: 2vh 10vw 2vh 10vw;
    height: auto;
    /* margin-left: -100%; */
    /* margin-top: 50%; */
    color: #fff;
    background-color: #52b2cf;
    background: linear-gradient(to right, #4062BB, #52B2CF);
    border: none;
    border-radius: 10px;
    box-shadow: 0px 5px 20px #1D2026;
    cursor: pointer;
    justify-content: center;
}


.informationsMonument {
    border-radius: 10px;
    padding: 5vh 5vw 5vh 5vw;
    width: max-content;
    background: #4062BB;
}

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

    #apig p, #apif p {
        font-size: 0.6rem;

    }

    #peopleandcracc {
        justify-content: center;
    }

    #people {
        display: none;
    }

    #cracc {
        border-radius: 30px;
        flex: 1 0 auto;
    }

    #apig, #apif {
        width: fit-content;
    }

    #apigf p {
        font-size: 0.8em;
    }

}
#infoCarte{
    width: max-content;
}

.carteInformations {
    margin-top: 5%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 80vw;
}

.titreInfo {
    font-size: 1.5em;
    color: #e9f0f1;
}

.adresseInfo, .telephoneInfo, .type, .coordonneesGeo {
    font-size: 0.8em;
    margin-top: 0.8vh;
    color: #e9f0f1;
}

.adresseInfo span, .telephoneInfo span, .type span, .coordonneesGeo span {
    font-weight: bold;
    color: #e9f0f1;
}

.imageInfo {
    width: 300px;
    height: 400px;
    margin-bottom: 5%;
}

.pageAdmin {
    display: flex;
    width: 80vw;
    height: 100vh;
    align-items: center;
    justify-content: space-between;
}

#gestion_admin {
    margin: 3vh;
    padding: 5vh 1vw 5vh 1vw;
    width: 25vw;
    margin-left: 0px;
    background-color: #4062BB;
    display: flex;
    flex-direction: column;
    border-radius: 0px 20px 20px 0px;
}

#gestion_admin.active
	{
    display: initial;
	}

#membre
	{
    margin: 0vh 0vw 1vh 1vw;
	}

#admindep, #admin {
    margin: 5vh 0vw 1vh 1vw;
    display: flex;
    flex-direction: column;
}

#admindep:hover, #admin:hover, #membre:hover {
    cursor: pointer;
}

#admindep p, #admin p, #membre p {
    color: #fdc758;
    font-weight: bold;
    font-size: 1em;
}


#membre {
    display: flex;
    flex-direction: column;
}

#admindep a, #admin a, #membre a {
    margin: 2vh 0vw 1vh 1vw;
    width: fit-content;
    color: #fff;
}

#admindep a:hover, #admin a:hover, #membre a:hover {
    text-decoration: none;
}

.menu__item_gestion_membre, .menu__item_gestion_admin, .menu__item_gestion_admindep {
    margin-top: 2%;
    cursor: pointer;
}

.menu__item_gestion_membre, .menu__item_gestion_admin, .menu__item_gestion_admindep {
    top: -1vh;
    text-decoration: none;
    display: none;
    margin: 0.5rem 0;
    font-size: 1rem;
    line-height: 1.4;
    position: relative;
    /* used with absolute for positioning underline */
}

.lienActif {
    text-decoration: none;
    display: block;
    margin: 0.5rem 0;
    font-size: 1rem;
    line-height: 1.4;
    position: relative;
    /* used with absolute for positioning underline */
}

.menu__item_gestion_membre:after, .menu__item_gestion_admin::after, .menu__item_gestion_admindep:after {
    position: absolute;
    content: "";
    display: block;
    bottom: 0;
    left: 0;
    height: 2px;
    line-height: 1;
    width: 100%;
    background-color: #fdc758;
    transform-origin: right bottom;
    transform: scaleX(0);
    transition: transform 0.4s linear;
}

.menu__item_gestion_membre:hover:after,
.menu__item_gestion_membre:active:after {
    transform: scaleX(1);
    transform-origin: left bottom;
    transition: transform 0.4s linear;
}

.menu__item_gestion_admin:hover:after,
.menu__item_gestion_admin:active:after {
    transform: scaleX(1);
    transform-origin: left bottom;
    transition: transform 0.4s linear;
}

.menu__item_gestion_admindep:hover:after,
.menu__item_gestion_admindep:active:after {
    transform: scaleX(1);
    transform-origin: left bottom;
    transition: transform 0.4s linear;
}

#depot_photo, #modinfos {

    width: 35vw;
    padding: 3vh 3vw 3vh 3vw;
    border-radius: 40px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #4062BB;
}

#modinfos{
    width: max-content;
}

#depot_photo input[type="submit"] {
    border-radius: 20px;
    padding: 1vh 1vw 1vh 1vw;
    margin: 3vh;
    /* background: red; */
    /* width: 3vw; */
    /* height: 3vh; */
    outline: none;
    border: none;
}

#depot_photo input[type="submit"]:hover{
    cursor: pointer;
}

#depot_photo h3, #modinfos h3 {
    color: #fff;
    margin: 3vh 0 3vh 0;
}

#togadmin {
    height: 20px;
    width: 20px;
    background-color: black;
    z-index: 4;
    display: none;
}

@media(max-width: 700px) { 

#cont-hor
	{
	flex-direction: column;
	}
    

.form_modtext input[type=text] {
    width: 50vw;
}
    .placement{
        flex-direction: column;
    }

    #gestion_admin.active {
        display: block;
    }

    #membre, #admin, #admindep {
        margin: 0vh;
    }

    /* #depot_photo h4 {
        font-size: 0.7em;
    } */

    .menu__item_gestion_membre, .menu__item_gestion_admin, .menu__item_gestion_admindep {
        font-size: 0.5em;
    }

    #membre p, #admin p {
        font-size: 0.7em;
    }

    #admindep p {
        font-size: 0.6em;
    }

    #gestion_admin {
        display: flex;
        width: 80vw;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-evenly;
        align-items: flex-start;
        border-radius: 20px;
        margin-left: 10vw;
    }

    #membre {
        margin: 0px;
    }
}

input[type="file"] {
    border-style: none;
    border-radius: 5px;
    background-color: #fdc758;
    width: 100%;
}

#zonededepot {
    margin-top: 2vh;
    width: 60%;
    height: 50%;
    border-color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
}

#zonededepot div {
    margin-bottom: 5%;
}

#zonededepot p {
    color: #4062BB;
}

#formdepot {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* .btn-upload {
    background-color: #e9f0f1;
    border: 21px solid #000;
    color: #000;
    padding: 1vh 1vw;
    border-radius: 10px;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
  }

  .parent-div {
    display: inline-block;
    position: relative;
    overflow: hidden;
  }
  .parent-div input[type=file] {
    left: 0;
    top: 0;
    opacity: 0;
    position: absolute;
    font-size: 2rem;
  } */

@media(max-width: 700px) {

    /* #modinfos {
        width: 80vw;
        height: 80vh;
        margin-left: 10vw;

    } */
    .pageAdmin 
    {
        flex-direction: column; 
        justify-content: space-around;
        align-items: center; 
        margin-left: 10vw;
    } 
    #depot_photo
    {
        width: 80vw;
    height: 70vh; 
    margin-left: -1vw;
    } 
    #gestion_admin 
    {
        width: 80vw;
        /* margin-left: 2vw; */
    }
    #formedepot 
    {
        height: 100%;
    }

    .form_modtext_form {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-evenly;
    }
}


#apparitionMenu {
    display: none;
}

#trier {
    width: fit-content;
    margin-bottom: 2vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    left: 5vw;
    top: 2vh;
    background-color: #4062BB;
    color: #f4f4f9;
    padding: 0 2vw 0 2vw;
}

#trier p {
    margin-right: 1vw;
    width: max-content;
    display: flex;
}

#trier svg {
    margin: 2vh 1vw 2vh 1vw;
    display: flex;
}

#trier svg line {
    display: flex;
    stroke: #fdc758;
}

@media(max-width: 750px) {
    #searchBarre{
        margin: 1vh 0vw 0 33vw;
        width: 25vw;
        height: 5vh;
    }

    #affichage.non-activeAffichage {
        margin: 1vh 0vw 0 33vw;
        width: 25vw;
        height: 5vh;  
    }

    #affichage.activeAffichage {
        margin: 1vh 0vw 0 20vw;
        width: 25vw;
        height: 5vh;  
    }
}



@media(max-width: 585px)
	{
    #apparitionMenu
		{
        display: initial;
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
		}

    #apparitionMenu.active {
        width: 100vw;
        height: 100vh;
        background-color: #4063bbab;
        opacity: 0.8;
        z-index: 1;
        position: fixed;
        left: 0;
        top: 0;
    }

    #menuToggleDiv {
        display: none;
    }

    #menuToggleDiv.active {
        display: initial;
    }

    .menuToggle {
        margin-left: 2%;
        font-family: "D-DIN Bold", serif;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 4em;
        color: #fdc758;
        text-decoration: none;
        /*enlever attributs texte (ici underline) */
        width: fit-content;
    }

    /***************/
    .menuToggle:hover {
        /* quand survoler */
        transition-duration: 0.2s;
        /*temps de la transition */
        transition-timing-function: ease-out;
        text-decoration: underline 2px #fdc758;
        opacity: 0.9;
    }

    #toggle {
        margin: 2%;
        z-index: 10;
        border-radius: 100%;
        position: relative;
        width: 60px;
        height: 60px;
        background: blue;
        background-size: cover;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.5s;
    }

    #toggle.active {
        background: #d4b902;
    }

    #toggle.active::before {
        transform: translateY(0px) rotate(45deg);
        box-shadow: 0 0 0 #fff;
    }

    #toggle::before {
        content: '';
        position: absolute;
        width: 28px;
        height: 2px;
        background: #fff;
        transition: 0.2s;
        transform: translateY(-10px);
        box-shadow: 0 10px 0 #fff;
    }

    #toggle::after {
        content: '';
        position: absolute;
        width: 28px;
        height: 2px;
        background: #fff;
        transition: 0.2s;
        transform: translateY(10px);
    }

    #toggle.active::after {
        transform: translateY(0px)rotate(-45deg);
    }
}

.cards {
    display: flex;
    padding: 1% 0 1% 0;
    /* scroll-snap-type: x mandatory; */
}

.card {
    border-radius: 20px;
    margin: 2vw;
    display: flex;
    flex: 1 0 300px;
    position: relative;
    overflow: hidden;
    height: 400px;
    width: 100%;
    color: white;
    background-color: #000000;
}

.card * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.card div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    opacity: 0.7;
    background-color: #4062BB;
    width: 50%;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    align-content: flex-end;
    flex-wrap: wrap;
}

.card h3,
.card p {
    width: 75%;
    -webkit-transform: translateX(-2vw);
    transform: translateX(-2vh);
    margin: 0;
}

.card p {
    font-size: 0.8em;
}

.card:hover img {
    opacity: 0.6;
}

.card:hover:after,
.card.hover:after,
.card:hover div {

    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 0.9;
}

#slider-lieu {
/*    width: 100vw;					*/
/*    height: 50vh;					*/
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0%;
    position: relative;
}

#main-slider {
    width: 80vw;
    /* height: 100%; */
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.card-slider {
    /* background-color: #fff;
    border: solid 1px; */
    border-radius: 20px;
    width: 12vw;
/*    height: 40vh;		*/
	flex: 0 1 auto;
}

#image-slider, #image-slider1, #image-slider2 {
    height: 100%;
    width: 100%;

    background-repeat: no-repeat;
    background-size: cover;
}

#image-slider img, #image-slider1 img, #image-slider2 img {
    height: 100%;
    width: 100%;
    border-radius: 20px;
}


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

    #image-slider1, #image-slider2, .card-slider:nth-child(2), .card-slider:nth-child(3) {
        display: none;
    }

    #main-slider {
        justify-content: center;
    }

    #image-slider, .card-slider:nth-child(1) {

        width: 30vw;
        height: 40vh;
    }
}



 #voir-photos {
    color: purple;
    position: absolute;
    text-decoration: underline;
    font-size: 0.5em;
    cursor: pointer;
    margin-top: 15%;
    bottom: 10px;
}

#test-slider-lieu {
    display: none;
} 
#test-slider-lieu.active 
{
    display: block;
}

.card h3,
.card p {
    -webkit-transform: translateX(-2vw);
    transform: translateX(-2vh);
    margin: 0;
}

.card p {
    font-size: 0.8em;
}

.card:hover img {
    opacity: 0.6;
}

.card:hover:after,
.card.hover:after,
.card:hover div {

    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}

@media all and (min-width: 0px) and (max-width: 1100px) {
    html {
        overflow-x: hidden;
        font-size: 12px;
    }

    body {
        background-color: white;
    }

    #nuageDeMots img {
        width: 30vw;
    }

    #FeteDesNormands img {
        width: 15vw;
    }



    #boutonLieu {
        display: none;
    }

    .carteInformations {
        margin-top: 7vh;
        display: flex;
        flex-direction: column;
    }

    #maCarteDepartement {
        position: relative;
        display: flex;
        width: 80vw;
        height: 60vh;
        margin-bottom: 5vh;
    }

    #recherche {
        display: flex;
        flex-direction: column-reverse;
    }

    #maCarte {
        position: relative;
        display: flex;
        width: 80vw;
        height: 60vh;
        margin-bottom: 5vh;
        margin-left: 0;
    }

    #boutonLieu {
        height: 120px;
        width: 120px;
        border-radius: 100%;
    }

    #boutonRecherche {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #e9f0f1;
        height: 80px;
        width: 80px;
        border-radius: 100%;
    }

    #affichage.non-activeAffichage {
        margin: 3vh 0vw 0 36vw;
        padding: 0 2% 0 2%;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        border: 2px solid #f4f4f9;
        width: 25vw;
        height: 5vh;
        border-radius: 50px;
        background: #e9f0f1;
        display: none;
    }

    #affichage.activeAffichage {
    margin: 3vh 0vw 0 36vw;
    padding: 0 2% 0 2%;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    border: 2px solid #f4f4f9;
    width: 25vw;
    background: #e9f0f1;
    display: flex;
    border-radius: 30px;
    height: 15vh;
    transition: height 0.25s ease-in;
    }

    #profil {
        width: 25px;
        height: 25px;
        position: absolute;
        top: 1vh;
        right: 8vw;
        border: solid 2px white;
        border-radius: 100%;
        display: flex;
        align-content: center;
        justify-content: center;
    }

    @keyframes ouvrir {
        0% {
            transform: translateY(0px);
            opacity: 0;
        }

        100% {
            transform: translateY(15px);
            opacity: 1;
        }
    }
}

@media all and (min-width: 0px) and (max-width: 1150px) {
    .card:nth-child(3){
        display: none;
    }
}

@media all and (min-width: 0px) and (max-width: 780px) {
    .card:nth-child(2), .card:nth-child(3){
        display: none;
    }
    #rechercheDepartement svg {
        width: 60vw;
        height: auto;
    }
}

@media all and (min-width: 0px) and (max-width: 450px) {
    html {
        overflow-x: hidden;
        font-size: 10px;
    }

    .info p {
        font-size: 1.2em;
    }
}

@media all and (min-width: 0px) and (max-width: 420px) {
    .w-img-nav_next, .w-img-nav_previous{
    height: 30px;
    width: 30px;
    }

    .w-img-nav_next i svg, .w-img-nav_previous i svg{
        transform: scale(0.6);
        }
    }

#form-validep input[type=submit] {
    margin-top: 2vh;
    margin-left: 40vw;
    margin-right: 40vw;
    margin-bottom: 5vh;
}

#pphoto {
    border: 3px solid #4062BB;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 33vh;
    margin-top: 5vh;
    margin-left: 2vw;
    margin-right: 2vw;
}

#pphoto img 
{
    /* width: 20%; */
    height: 20%;
}

@media all and (min-width:0) and (max-width: 1190px) {

}
#histoire
{

    width: 100vw; 

   margin-bottom: 5vh;
}

#histoire p:nth-child(1)
{
    margin-left: 5vw; 
    font-size: 1.5em; 
    width: 100vw;
}

#histoire p:nth-child(2)
{
    width: 75vw; 
    margin-left: 10vw; 
    margin-top: 5vh; 
    margin-bottom: 5vh;
}

#rechercheDepartement h1{
    margin: 0;
    padding: 0;
}

@media(max-width: 500px)
	{
	#profil
		{
		right: 3vw;
		}

    #searchBarre
		{
        margin: 1vh 0vw 0 33vw;
        width: 40vw;
        height: 5vh;
		}

	#affichage.non-activeAffichage
		{
		margin: 1vh 0vw 0 33vw;
		width: 40vw;
		}

	#affichage.activeAffichage
		{
        margin: 1vh 0vw 0 33vw;
        width: 40vw;
		}
	}