*::selection
{
background: rgba(0,0,0,0.5);
color: var(--clr);
}
:root
{
--pagesFond: rgb(25, 25, 35);
}
body {background: white;}
html, body, p, li, button, input, textarea, select
{
color: black;
font-family: 'Noto+Sans', Sans-Serif;
font-weight: 600;
font-size: 25px;
}
@media (max-width: 1650px) {
html, body, p, li, button, input, textarea, select {font-size: 20px;}
}
@media (max-width: 800px) {
html, body, p, li, button, input, textarea, select {font-size: 17px;}
}
@media (max-width: 600px) {
#accueil html, #accueil body, #accueil p, #accueil li, #accueil button, #accueil input, #accueil textarea, #accueil select {font-size: 15px;}
}
h1, h2, h3, h4, h5, h6, summary
{
color: black;
font-family: 'Parisienne', Sans-Serif;
font-weight: 400;
font-size: 3em;
}
a, a:visited {color: white;}
a:hover {color: white;}
hr
{
width: 100%;
background: white;
}
.infobulle:before
{
--fond: rgba(0,0,0,0.9)/*white*/;
--texte: white/*rgb(50,50,50)*/;
}

/* Retour à l'accueil */
main #retourAccueil
{
position: absolute;
width: 1em;
height: 1em;
left: 1.5em;
top: calc(9vmin - 1em);
padding: 1em;
}
main #retourAccueil:before
{
content: '';
display: block;
width: 1em;
height: 1em;
border-left: 8px solid rgb(200,200,200);
border-top: 8px solid rgb(200,200,200);
transform: rotate(-45deg);
}
main #retourAccueil:hover:before {border-color: white;}
main #retourAnim
{
z-index: 10;
content: '';
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: var(--pagesFond);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
clip-path: polygon(0 0,0% 0,0 0%);
transition: clip-path 1s;
}
main #retourAnim.on {clip-path: polygon(0 0,200% 0,0 200%);}
main #retourAnim:before
{
content: '';
z-index: 0;
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: radial-gradient(farthest-side circle at 35%, rgba(0,0,0,0.65), rgba(0,0,0,0));
}

/* Equipement de Georges */
.georgesEquip
{
display: inline-block;
position: relative;
}
.georgesEquip.off
{
filter: opacity(0);
transition: filter 0.85s ease-out;
}
.georgesEquip img {
width: 1em;
height: 1em;
padding: 0 0.25em;
object-fit: contain;
transform: scale(1.3);
animation: scintille 1s infinite;
cursor: pointer;
}
.georgesEquip img:hover {transform: scale(1.4);}
.georgesEquip.off img
{
transform: scale(0.5) rotate(-15deg);
transition: transform 0.5s ease-out;
}
.georgesEquip i
{
display: block;
position: absolute;
width: 4px;
height: 4px;
left: 0.5em;
top: 0.5em;
border-radius: 100%;
}
@keyframes georgesParticule {
	0% {background: rgb(255,225,150); transform: rotate(var(--orientation)) translateX(0em);}
	100% {background: rgb(255,225,150); transform: rotate(var(--orientation)) translateX(2em);}
}
#georgesTrouve
{
--clr: rgb(50,50,50);
z-index: 20;
display: flex;
flex-direction: column;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
justify-content: center;
align-items: center;
background: rgb(255,225,150);
color: rgb(50,50,50);
text-align: center;
animation: georgesTrouveAnim 0.5s 0.65s ease-out backwards;
}
@keyframes georgesTrouveAnim {
	0% {clip-path: circle(0%);}
	100% {clip-path: circle(100%);}
}
#georgesTrouve > button
{
display: block;
position: absolute;
right: 1em;
top: 0.75em;
background: transparent;
border: none;
color: var(--clr);
font-size: 2em;
}
#georgesTrouve > button:hover {transform: scale(1.2);}
#georgesTrouve > div
{
width: 80%;
max-width: 640px;
}
#georgesTrouve > div > img:first-of-type {animation: secoue5 1s infinite;}
#georgesTrouve h2 {color: var(--clr);}
#georgesTrouve strong:first-of-type
{
font-family: 'Parisienne', Sans-Serif;
font-size: 1.3em;
line-height: 1em;
}
#georgesTrouve hr
{
width: 50%;
max-width: 320px;
margin: 1em auto;
background: var(--clr);
}
#georgesTrouve ul
{
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style: none;
margin-top: 0.5em;
}
#georgesTrouve ul li {margin: 0.5em;}
#georgesTrouve ul li img
{
height: 2.5em;
--bordure: 0.085em;
filter: grayscale(100%) contrast(0%) brightness(0.5);
}
#georgesTrouve ul li img:hover, #georgesTrouve ul li.on img {filter: initial;}
#georgesTrouve img.sac
{
display: block;
}

/* Tetra */
.tetra
{
display: inline-block;
position: relative;
color: var(--pts);
font-weight: 800;
font-style: normal;
cursor: help;
}
.tetra:after
{
content: '';
display: inline-block;
position: relative;
vertical-align: middle;
width: 0.8em;
height: 0.75em;
top: -0.1em;
margin-left: 2px;
background-image: url(Georges/Tetra.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}