@charset "utf-8";

* {
  box-sizing: border-box;
}


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


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

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

nav {
	display: block;
text-align: center;
margin: 0 0 2vw 0;
padding: 1vw 0 0 0;
}


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

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

a, summary {
display: inline;
left: -2vw;
max-width: 39vw;
font-size: calc(1.5vw + 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;
left: 90vw;
top: 10px;
z-index: 2;
}


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;
position: absolute;
right: 0vw;
top: 2vw;
padding: 0 0;
border-radius: 5px;
}


details ul a, details ul summary {
display: block;
position: relative;
text-align: left;
font-size: calc(1.4vw + 1.8vw);
font-weight: normal;
border: none;
padding: 0.5vh 1vh 0.5vh 0;
left: 0px;
}

details ul p {
text-decoration: underline;
font-size: calc(1.3vw + 1.7vw);
font-weight: normal;
border: none;
background: white;
color: black;
}

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



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


main {
	position: relative;
	top: -1.5vw;
	height: 100%;
counter-reset: h2 h3 h4;
}


main p {
display: inline-block;
font-size: 2.9vw;
text-decoration: none;
font-weight: bold;
color: black;
border: 1px solid black;
padding: 0 1vw;
background-color: white;
margin: 0 0.5vw;
}

#mod {
height: calc(2vw + 3.1vw);
max-width: 39vw;
font-size: calc(1.5vw + 1.9vw);
text-decoration: none;
font-weight: bold;
color: blue;
padding: 0.3vw 1vw;
background: purple;
margin: auto;
border-radius: 5px;
text-align: center;
}



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

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

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: 23vw;
 height: 23vw;
 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: 2.9vw;
background: none;
border: none;
}

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


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

footer {
padding : 1vh;
}