@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes wheelHueColor {
    from, to { color: hsl(180, 65%, 45%); }
    10%      { color: hsl(360, 65%, 45%); }
    20%      { color: hsl( 36, 80%, 45%); }
    30%      { color: hsl( 72, 75%, 35%); }
    40%      { color: hsl(108, 65%, 35%); }
    50%      { color: hsl(144, 75%, 35%); }
    60%      { color: hsl(180, 75%, 35%); }
    70%      { color: hsl(216, 60%, 45%); }
    80%      { color: hsl(252, 65%, 50%); }
    90%      { color: hsl(288, 60%, 40%); }
}

@keyframes couleur_decodeur {
    from {
        transform: scale(0);
    }
    10% {
        transform: scale(1);
    }
    50% {
        transform: scale(1);
    }
    60% {
        transform: scale(0);
    }
    to {
        transform: scale(0);
    }
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
	text-align: center;
	height: 100vh;
	overflow: hidden;
    /* color: hsl(224, 99%, 35%); */
    /* Teste background anim */
    color:hsl(180, 50%, 50%);
    /* animation: wheelHueColor 100s infinite; */
    background-color: currentColor;
}
@supports (background-blend-mode: overlay) {
    body {
        background-image: radial-gradient(white, black);
        background-size: 300% 300%;
        animation: gradient 10s ease infinite;
        background-blend-mode: overlay;
    }
}

/* DÉBUT */

#menu {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
	background: linear-gradient(135deg,var(--or) 20%,var(--orC),var(--bleuC) 70%,var(--bleuC));
	background-size: 300% 300%;
	animation: gradient 7s ease infinite;
	overflow: hidden;
	position: relative;
}

#illustration {
	position: relative;
	width: 30%;
}

#illustration img {
	position: absolute;
	top: 60%;
	width: 50%;
}

svg * { 
    transform-box: fill-box;
}

svg .decodeurSvg path[class*=cls] {
    transform: scale(0);
    
}

.cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9 {
    transform-origin: center;
    animation: couleur_decodeur 6s ease-in-out infinite;
}

.cls-2 {
    animation-delay: 0s;
}
.cls-3 {
    animation-delay: 0.25s;
}
.cls-4 {
    animation-delay: 0.5s;
}
.cls-5 {
    animation-delay: 0.75s;
}
.cls-6 {
    animation-delay: 1s;
}
.cls-7 {
    animation-delay: 1.25s;
}
.cls-8 {
    animation-delay: 1.5s;
}
.cls-9 {
    animation-delay: 1.75s;
}

#menu article {
	width: 30%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#menu article > *:not(#menu article:last-child) {
	width: 100%;
	margin-bottom: 20px;
}

#menu #sonDiv, #menu #expressDiv {
	width: 30%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	font-family: LexendM;
	font-size: 1.5rem;
}

#menu #express {
	transform: scale(1.5);
}

#menu button {
	width: 100%;
	font-size: 2rem;
	font-family: "Agency_Gras";
	border: 3px solid white;
	background: black;
	color: white;
	transition: color 0.5s, background 0.5s, border-color 0.5s;
	padding: 10px 0;
	cursor: pointer;
}

#menu button.retour {
	background: #03224c;
	border-color: white;
}

#menu button:hover {
	color: black;
	background: white;
	border-color: black;
}

#menu button.retour:hover {
	color: #03224c;
	background: white;
	border-color: #03224c;
}

.aspiration {
	transform: scale(0);
	opacity: 0;
	transition: all 1s;
}

.aspiration > article:last-child {
	display: none;
}

.cache {
	display: none;
}

/* MASTERMIND */

main {
    text-align: center;
}
main * {
    margin: 0 auto;
}
#tableau-jeu {
    position: relative;
}

table * {
    width: 30px;
    height: 30px;
    color: black;
}
#tableau,.mal-place,.bien-place,#reponse {
    width: 200px;
}
#tableau {
    background: #18232c;
    border-collapse: collapse;
}
#tableau div {
    background: black;
    border: 1px solid black;
    border-radius: 50px;
}
.parentC > *, #tableau div, #reponse table div {
    margin: 5px;
    border-radius: 50px;
}
#tableau div, #reponse table div {
    margin: 5px auto;
}
.parentC > * {
    border: 1px solid black;
}

/* Indication */
.mal-place, .bien-place {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: -1;
    border-collapse: collapse;
    font-family: "BigItalic";
    font-size: 2.1rem;
}
.mal-place tr, .bien-place tr {
    height: 40px;
    position: relative;
}
.mal-place tr {
    /* left: 80px; */
    background: orange;
}
.bien-place tr {
    /* right: 80px; */
    background: #19e519;
}

.bien-place td:nth-child(even) {
    background: #65f065;
}
.mal-place td:nth-child(even) {
    background: #f5c263;
}

/* Réponse */
#reponse table {
    border-collapse: collapse;
}
#reponse table td {
    margin: auto;
}
#reponse table td:not(:last-child) {
    padding-right: 10px;
}
#reponse table div {
    border: 1px solid black;
}

/* Fin du jeu */
article#resultat {
    display: none;
    color: black;
    width: 100%;
}
#resultat h1 {
    font-family: "LexendM";
}
#resultat > p, #gainDiv {
    border-radius: 15px;
}
#resultat #gainDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    border-radius: 25px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
    width: 75%;
    color: white;
    background: linear-gradient(-34deg, black 0%, rgb(68, 68, 68) 50%, black);
    margin: 20px auto;
}
p.argent {
    font-size: 5rem;
    margin: 20px;
    font-family: "Agency_Black";
}
#gainDiv > img {
    width: clamp(26px,2.5vw,45px);
    margin: 0;
}
p.grade {
    font-size: 3rem;
    color: white;
    background-image: linear-gradient(135deg, #2B310A, #6A7337, #2B310A, #6A7337, #2B310A);
    font-family: "LexendM";
    width: fit-content;
    padding: 15px
}

.menuBtn {
    font-size: clamp(1rem, 3vw, 2rem);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
    border: clamp(2px, 1vw, 5px) solid black;
    padding: clamp(2px, 2vw, 17px);
    cursor: pointer;
    font-family: "Agency_Gras";
    transition: color 0.5s, background 0.5s, border-color 0.5s;
}
.menuBtn:hover {
    background: black;
    color: white;
    border-color: white;
}

/* Couleur choix */
#choix {
    background: black;
    border-radius: 300px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.parentC:first-child {
    border-radius: 200px 0 0 200px;
}
.parentC:last-child {
    border-radius: 0 200px 200px 0;
}
#color1 {
    background: #ff0000;
}
#color2 {
    background: #0000ff;
}
#color3 {
    background: #00ff00;
}
#color4 {
    background: #ffff00;
}
#color5 {
    background: #ffa500;
}
#color6 {
    background: fuchsia;
}
#color7 {
    background: #7711e4;
}
#color8 {
    background: #808080;
}

/* ligne actuelle */
.actuelle {
    background: #ffff9e;
}

#btnVerif {
    font-size: 1.5rem;
    border-radius: 10px;
    padding: 5px;
    background: black;
    color: white;
    border: 2px solid white;
    font-family: "Lexend";
    transition: transform .2s;
    cursor: pointer;
}
#btnVerif:hover {
    transform: scale(0.9);
}

/* DISABLED */

*[disabled="disabled"] {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    border-color: #666 !important;
}