:root {font-size: 15px;}

/* FILTRES */

menu
{
z-index: 5;
display: flex;
flex-wrap: nowrap;
position: fixed;
box-sizing: border-box;
width: 100%;
padding: 0.5em;
place-content: center;
place-items: start;
background: black;
box-shadow: 0 1em 1.5em rgba(0,0,0,0.65);
white-space: nowrap;
}
menu > button
{
padding: 0.1em 0.5em;
border: none;
}
menu > button.on {visibility: collapse;}
menu fieldset
{
display: flex;
gap: 0.5em;
padding: 0.5em;
border: 1px solid grey;
}
menu > button + fieldset {visibility: collapse;}
menu > button.on + fieldset {visibility: visible;}
menu > button em
{
display: block;
width: fit-content;
margin: auto;
margin-top: 0.25em;
padding: 0.35em 0.5em;
background: var(--clr);
color: black;
font-style: normal;
}
menu fieldset legend 
{
margin-top: -0.25em;
margin-bottom: -0.25em;
padding: 0 0.5em;
font-weight: 800;
}
menu label {}
menu label input {display: none;}
menu label input + span
{
display: block;
padding: 0.35em 0.5em;
background: rgb(50,50,50);
cursor: pointer;
user-select: none;
}
menu label input:checked + span
{
background: var(--clr);
color: var(--bg);
}
@media (max-width: 1300px) {
	menu.reduit > button {visibility: collapse;}
}
@media (max-width: 550px) {
	menu {font-size: 0.9em;}
	menu > button em, menu label input + span
	{
	overflow: hidden;
	max-width: 3em;
	outline: 0.3em solid;
	outline-offset: -0.25em;
	}
	menu > button em, menu label input:checked + span {outline-color: var(--clr);}
	menu label input + span {outline-color: rgb(50,50,50);}
	menu fieldset:nth-of-type(2) {transform: scale(0.7, 1);}
}

/* Pages */
menu nav
{
display: flex;
position: absolute;
height: 100%;
left: 1em;
top: 0;
place-content: center;
place-items: center;
font-size: 1.25em;
user-select: none;
}
menu nav.off {opacity: 0.5;}
menu nav button
{
padding: 0.25em;
border: none;
}
menu nav.off button {cursor: wait !important;}
menu nav p {white-space: nowrap;}
menu nav strong {font-weight: inherit;}
@media (max-width: 1300px) {
	menu nav
	{
	height: auto;
	left: 0.5em;
	top: 4.25em;
	padding: 0.15em 0.2em;
	background: rgba(0,0,0,0.75);
	border-radius: 12px;
	}
	section
	{
	padding-top: 8.5em !important;
	}
}

/* MOTS */

section
{
--gris: rgb(125,135,150);
display: flex;
flex-wrap: wrap;
padding: 1em;
padding-top: 7em;
gap: 0.5em;
justify-content: center;
white-space: nowrap;
}
section.charge:before
{
content: '⌛';
margin-top: 4em;
font-size: 2em;
animation: tourne 1s linear infinite;
}
section article
{
min-width: 6em;
padding: 0.5em;
background: rgb(35,35,35);
text-align: center;
}
section article[data-actif="0"] {outline: 1px solid darkred;}
section article.passe, section article.traduit {opacity: 0.85;}
section article.passe {background: rgb(50,25,25);}
section article.traduit {background: rgb(25,50,25);}
section article h2 {font-size: 1.5em;}
section article em
{
display: block;
position: relative;
margin-top: -0.2em;
margin-bottom: 0.2em;
color: var(--gris);
}
section article ul
{
display: flex;
flex-direction: column;
}
section article ul li {color: white;}
section article hr
{
width: 100%;
margin-top: 0.5em;
margin-bottom: 0.5em;
background: var(--gris);
}
section article span
{
display: inline-block;
width: 30%;
font-size: 0.8em;
font-weight: 800;
text-align: center;
user-select: none;
cursor: help;
}
section article.passe span {color: red;}
section article.traduit span {color: green;}
section article span i
{
display: block;
margin-bottom: 0.15em;
font-size: 0.8em;
}
section > #pages_bdd {display: none;}