@charset "utf-8";


* {
  box-sizing: border-box;
}


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


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

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

nav {
	display: block;
text-align: center;
background-image: url("Background/rouge.jpg");
background-size: cover;
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: 0px;
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 {
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;
}

#det0 {
display: inline;
}

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

.det1[open] .det1{
text-decoration: underline;
}

.det1[open] .det1::after {
content:"\2304";
}

.det2[open] summary {
text-decoration: underline;
}

.det2[open] summary::after {
content:"\2304";
}

/*
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;
left: 0px;
width: 30vw;
}

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


.sum1 {
font-size: 2.8vw;
padding: 0.5vw 0vw  0.5vw 1vw;
}

.sum2 {
font-size: 2.6vw;
padding: 0.5vw 0vw  0.5vw 2vw;
}



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

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


.niv1 {
background : orange;
color: red;
margin: auto;
text-align: center;
font-size: calc(3vw + 3vw);
width: calc(20vw + 20vw);
border-radius: 5px;
}



h2:before {
content: counter(h2) ". ";
counter-increment: h2;
}



.niv2 {
background : white;
font-size: calc(2vw + 2.5vw);
width: 68vw;
border-radius: 5px;
counter-reset: h3;
}


h3:before {
content: counter(h2) "." counter(h3) " " ;
counter-increment: h3;
}


.niv3 {
background : white;
font-size: calc(2vw + 2vw);
width: 56vw;
position: relative;
left: 2vw;
border-radius: 5px;
counter-reset: h4;
}


h4:before {
content: counter(h2) "." counter(h3) "." counter(h4) " " ;
counter-increment: h4;
}


.niv4 {
background : white;
font-size: calc(1.5vw + 1.5vw);
width: 55vw;
position: relative;
left: 4vw;
border-radius: 5px;
}


ul li {
font-size: calc(1.5vw + 1vw);
width: calc(12vw + 9vw);
background: white;
position: relative;
left: 6vw;
border-radius: 5px;
}

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

}

dialog {
display: block;
}

dialog:not(:target):not([open]) {
display: none;
}