:root
{
--marges: 0;
}
main {}

/* HEADER */

header
{
width: 100%;
height: 100vh;
background: url(Fonds/Entete.jpg) no-repeat center / cover fixed;
}
header h1
{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
header h1 img
{
width: 90vmin;
height: 90vmin;
object-fit: contain;
filter: drop-shadow(0 0 5vw black);
}
#defile
{
--couleur: black;
--ombre: transparent;
}

/* SECTIONS */

main > section
{
position: relative;
overflow: hidden;
box-sizing: border-box;
width: 100%;
padding: var(--marges);
background: no-repeat center / cover;
text-align: justify;
}
main > section h2
{
margin-bottom: calc(var(--marges) / 2);
}

/* */
main
{
display: flex;
box-sizing: border-box;
max-width: 20em;
margin: auto;
padding: 1em;
flex-direction: column;
gap: 1em;
}
.microsoft
{
display: block;
padding: 0.5em;
border: 4px solid lightgrey;
border-radius: 8px;
font-weight: 600;
text-align: center;
& img
{
display: block;
margin: 0 auto 0.25em;
}
}

/* Popin */
dialog
{
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
place-content: center;
place-items: center;
background: white;
text-align: center;
}
dialog form
{
display: flex;
place-content: center;
place-items: center;
gap: 1.25em;
}
dialog form input
{
padding: 0.2em;
background: gainsboro;
border: transparent;
border-radius: 0.5em;
outline: 2px solid lightgrey;
outline-offset: 4px;
width: 1em;
font-size: 2.5em;
font-weight: 800;
text-align: center;
text-transform: uppercase;
&:focus {outline-color: grey;}
&::selection {background: transparent; color: black;}
}

/* Message */
main > strong
{
display: block;
color: grey;
font-size: 0.75em;
font-weight: 800;
text-align: center;
text-transform: uppercase;
& i
{
display: block;
font-size: 2.5em;
}
}

/* Clés (liste) */
table {width: 100%;}
table tr {}
table tr:nth-of-type(even) {background: gainsboro;}
table tr td {padding: 0.25em;}
table tr td img
{
display: block;
height: 1em;
}
table tr td a.lien
{
display: block;
overflow: hidden;
max-width: 13em;
color: grey;
font-size: 0.75em;
text-decoration: underline;
white-space: nowrap;
}
table tr td .🗑️ {border: none;}

/* Nouvelle clé */
main > form
{
display: grid;
width: 100%;
grid-template-columns: 4em 1fr auto;
gap: 1em;
}
main > form :is(input, button)
{
width: 100%;
padding: 0.35em;
background: gainsboro;
border: none;
border-radius: 8px;
font-size: 0.9em;
}
main > form button[type=submit]
{
background: transparent;
transform: scale(1.5) translateY(-0.1em);
&:hover {filter: drop-shadow(0 0 0.25em cyan);}
}