@charset "utf-8";



* {
  box-sizing: border-box;
}


body {
background-image: url("Background/bleu.jpg");
background-size: cover;
}


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


header {
width: 96vw;
left: 0px;	
top: 2vh;
z-index: 2;
}



nav {
	display: block;
text-align: center;
}


nav a {
display: inline-block;
height: 3.1vw;
max-width: 39vw;
font-size: 1.9vw;
text-decoration: none;
font-weight: bold;
color: white;
padding: 0.3vw 1vw;
background: black;
color: white;
margin: 0 0.5vw 0 0;
border-radius: 5px;
}


nav2 {
display: block;
position: sticky;
top: 0px;
z-index: 2;
width: 96vw;
}


a, summary {
	display: inline;
left: -2vw;
max-width: 39vw;
font-size: 1.9vw;
text-decoration: none;
font-weight: bold;
color: black;

background-color: white;
border-radius: 5px;
}


a:hover, summary:hover {
font-weight: normal;
}


#men { 
max-height: 2.5vw;
position: sticky;
top: 10px;
z-index: 2;
}


details {
display: inline;
	font-weight: bold;
position: sticky;
top: 10px;
width: 13vw;
text-align: right;
left: 87vw;
}


details > summary {
list-style: none;
cursor: pointer;
}

details > summary::-webkit-details-marker {
	display: none;
}


details summary {
font-weight: bold;
}

details summary:hover {
font-weight: normal;
}




details[open] summary::before {
content: "";
width: 100vw;
height: 100vh;
position: fixed;
top:0;
left:0;
cursor: auto;
}


details ul {
  display: block;
 list-style: none; 
  position: absolute;
  width: 12vw;
  top: 3vh;
right: 0px;
  padding: 0 0;
  z-index: 1;
border-radius: 5px;
}


details ul a, details ul summary {
display: inline-block;
position: relative;
left: -8vw;
top: 0.2vw;
padding : 0.5vw 0vw 0.5vw 0;
font-weight: normal;
font-size: 1.8vw;
border: none;
text-align: left;
width: 20vw;
}

details ul a:hover, details ul summary {
cursor: pointer;
background: lightgrey;
}




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

main {
	position: relative;
	height: 100%;
}




#mod {
display: inline-block;
height: 3.1vw;
font-size: 1.9vw;
text-decoration: none;
font-weight: bold;
color: blue;
padding: 0.3vw 1vw;
background: purple;
border-radius: 5px;
position: relative;
left: 50%;
transform: translate(-50%);
}

picture {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 2vw 2vh;
margin: 2vh;
}

picture img {
	display: none;
  max-width: 45vw;
  object-fit: cover;
  border-radius: 5px;
position: fixed;
height:80vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid black;
}

picture li {
list-style: none; 
box-shadow: 0.5vw 1vh 10px #d4d4d4, -0.5vw -1vh 10px #d4d4d4 }


li[id^="img"] {
  object-fit: cover;
  border-radius: 5px;
  width: 100%;
 height: 300px;
  max-width: 25vh;
  max-height: 25vh;
 object-fit: cover;
}



li[id^="img"]:hover img {
display: block;
}

li[id^="img"]:hover  dialog {
display:block;
position: fixed;
top: 78%;
width: 20vh;
height: 20vh;
border: none;
opacity: 80%;
}

dialog p {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
font-size: 1.3vw;
background: none;
border: none;
}

[id^="img"]
{
background-position: center top;
background-size: cover;
}


/* ******************* Pied de page ************************************ */

footer {
padding : 1vh;
}