html, body
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    height: 180vh;
    display: flex;
    justify-content: left;
    align-items: left;
	background: no-repeat;
 	background: linear-gradient(#FDE6CC, #FDE6CC);
 	background-position: left;
}	


.gallery{
    display: flex;
    justify-content: left;
    gap: 0.4rem;
    width: 60rem;
}

img-wrapper { /* le cadre de l'image */
	width: 99%; 
  	padding: 0 0px; /* espace de la gouttière */
  	padding-bottom: 0px;
  	padding-top: 0px;
} 

.card{
    position: relative;
    left: 0;
    width: 3rem;
    border-radius: 5rem;
    height: 30rem;
    overflow: hidden;
    transition: .4s ease-in-out;
    box-shadow: 0 5 12px rgba(0, 0, 0, .3);
    flex: .15;
}

.card img{
    position: relative;
    height: 30rem;
    object-fit: cover;
}

.card:hover{
    flex: 1 1 0;
    cursor: pointer;
    border-radius: 1rem;
}


@media screen and (max-width: 700px) { /*s'appliqueront qu'aux écrans de tablette*/
  
.gallery {
	max-width: 99%;		
}
.img-wrapper {
    width: 99%;	
}
.tooltip-wrapper {
    min-width: max-content;
    }}

@media screen and (min-width: 400px) and (max-width: 1000px){

.gallery {
	max-width: 99%;		
}
.img-wrapper {
    width: 99%;	
}
.tooltip-wrapper {
    min-width: max-content;
    }}
    	
		title1 { 
		color: #000000;
		font-size: 170%;
		text-align: left;
		font-family: 'tahoma', sans-serif;
		line-height: 154%;
		letter-spacing: 1.2px;
		padding-left: 0.0px;
		position: float;	}
		
		title1B { 
		color: #000000;
		font-size: 186%;
		text-align: left;
		font-family: 'tahoma', sans-serif;
		line-height: 180%;
		letter-spacing: 1.2px;
		padding-left: 0.0px;
		position: float;	}
		
		title2 {
		color: #000000;
		font-size: 148%;
		text-align: left;
		font-family: 'tahoma', sans-serif;
		line-height: 154%;
		letter-spacing: 0.7px;
		padding-left: 0.0px;
		position: float;		}

		title2b {
		color: #000000;
		font-size: 148%;
		text-align: left;
		font-family: 'tahoma', sans-serif;
		line-height: 154%;
		letter-spacing: -0.3px;
		padding-left: 0.0px;
		position: float;		}
				
		title2S {
		color: #000000;
		background: #FFFFFF;
		font-size: 148%;
		text-align: left;
		font-family: 'tahoma', sans-serif;
		line-height: 154%;
		letter-spacing: 0.7px;
		padding-left: 0.0px;
		position: float;		}
		
		title3 { 
		color: #FDE6CC;		
		text-shadow: 1.2px 0 0 #000000, 1.2px 1.2px 0 #000000, 0 1.2px 0 #000000, -1.2px 1.2px 0 #000000, -1.2px 0 0 #000000, -1.2px -1.2px 0 #000000, 0 -1.2px 0 #000000, 1.2px -1.2px 0 #000000;
		letter-spacing: 0.1rem;
		font-size: 258%;
		text-align: left;
		font-family: 'tahoma', sans-serif;
		line-height: 133%;
		padding-right: 0.0px;		}
		
		title4 { 
		color:#000000;
		font-size: 160%;
		text-align: left;
		font-family: 'tahoma', sans-serif;
		line-height: 133%;
		letter-spacing: 0.4px;
		padding-right: 0.0px;		}

		title5 { 
		color:#000000;	
		font-size: 670%;
		text-align: left;
		font-family: 'tahoma', sans-serif;
		padding-right: 0.0px;
		text-decoration: none;		}
		
		hidden {
		color:#000000;
		font-size: 10%;
		text-align: left;
		font-family: 'tahoma', sans-serif;
		line-height: 100%;
		padding-left: 0%;		}	

		paralink {
		color: #000000;
		font-size: 125%;
		text-align: left;
		font-family: 'tahoma', sans-serif;
		line-height: 100%;
		padding-left: 0%;
		text-decoration: underline;		}

		img {
		height: 8%;
		border-radius: 4%;		}
		
		html, body {
 		margin top: 0.1px;
 		margin left: 0.1px;
 		margin right: 0.1px;
 		margin bottom: 0.1px;
 		padding: 0.1px;		}


map{
	margin:0;
	min-height:100vh;
	background-image:url("./map-RetC.png");
	background-size:1500px auto;
	cursor:none;
	overflow:hidden;

}
#loupe{
	width:300px;
	height:300px;
	border:6px pink;
	border-radius:200px;
	position:absolute;
	background-image:url("./map-RetC.png");
	background-size:1500px auto;
	box-shadow:0 0 10px rgba(0,0,0,0.6);
	filter:brightness(1.3);
}


		a {
		color: #000000;		}
		
		a:link {
		text-decoration: underlined; 	}
		
		a:visited {
		text-decoration: none;		}
		
		a:hover, a:focus, a:active {
		text-decoration: dotted;		}
						
		.tooltip:hover .tooltiptext {	
  		visibility: visible;
 		opacity: 1.8;		}

		.linear-gradient {
  		background: linear-gradient(#FFFFFF, #FDE6CC);
  		padding : 5px 5px;
  		border: none;
  		border-radius: 5px;		}
  		
  		
.read-more-state {
  display: none;    }

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .5s ease;    }

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;    }

.read-more-state ~ .read-more-trigger:before {
  content: 'plus';    }

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'moins';    }

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #000000;
  font-size: .9em;
  line-height: 1.8;
  border: 1px solid #000000;
  border-radius: .25em;    }


p {
  padding: 2%;
  background: none;
  color: #000000;
  border: none;
  border-radius: .25em;    }