/* Définition des couleurs */
:root {
    --body-bg: #ee114b;
    --bloc-bg: #fe6d00;
    --color: #212121;
    --color-reverse: white;
    --main: #39ff14;
    --formation: #ff1495;
    --finance: #c000fe;
    --entreprise: #d7fafa;
    --immobilier: #fff34e;
    --disabled: #173359;
}
/* Propriétés de la page */
body {
    font-family: 'Arial', sans-serif;
    color: var(--color);
    background-color: var(--body-bg);
    background-image:  radial-gradient(var(--color) 1.5px, transparent 1.5px), radial-gradient(var(--color) 1.5px, var(--body-bg) 1.5px);
    background-size: 20px 20px;
    background-position: 0 0,10px 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
}
/* Gestion des blocs */
.responsive-container {
    display: flex;
    flex-direction: column;
    gap: 2em;
    width: 60%;
}
.section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bloc-bg);
    padding: .5em;
    background-color: var(--bloc-bg);
    border: .5em solid var(--color);
    box-shadow: 1em 1em 0px var(--color-reverse);
    border-radius: .5em;
}
#game, #endgame, #win, #game-over, #evenementOverlay {
    display: none;
}
/* Jeu */
#game {
    flex-direction: row;
    gap: 2em;
    justify-content: center;
    opacity: 1;
}
/* Boutons de clics */
#boutons {
    display: flex;
    flex-direction: row;
}
.clickzone-section button, .indic-btn {
    padding: .5em;
    margin: .5em;
    cursor: pointer;
    color: var(--color);
    border-radius: .5em;
    border: .2em solid var(--color);

}
.clickzone-section button:disabled {
    border: .2em solid var(--color);
    cursor: not-allowed;
    opacity: 0.4;
}
.indic-btn {
    font-size: 0.7em;
    opacity: .4;
}
.indic-btn span {font-weight: bold;}

.edc-btn {background: var(--formation);}
.act-btn {background: var(--finance);}
.ent-btn {background: var(--entreprise);}
.immo-btn {background: var(--immobilier);}

#click-btn {
    padding: 2em;
    font-size: 1em;
    cursor: pointer;
    background-color: var(--main);
    color: var(--color);
    border: none;
    border-radius: 3em;
    transition: transform 0.1s;
    box-shadow: none;
}
#click-btn:active { transform: scale(0.95); }
#click-btn:disabled {
    background-color: var(--body-bg);
    color: var(--color-reverse);
    cursor: not-allowed;
    opacity: 0.6;
}
/* Masquage des éléments d'entreprise */
.hidden { display: none; }
/* Section d'infos */
#infos table {
    margin: auto;
    border-spacing: .5em;
}
#infos td {
    border-radius: .5em;
    padding: .5em;
    font-size: .7em;
}
.infos-educ td {background: var(--formation);}
.infos-finance td {background: var(--finance);}
.infos-entreprise td {background: var(--entreprise);}
.infos-immobilier td {background: var(--immobilier);}
/* Zone d'introduction */
#selection-difficulte {
    display: flex;
    flex-direction: column;
}
.diff-btn {
    padding: 1em;
    border: .4em solid var(--color);
    border-radius: .5em;
    box-shadow: .5em .5em 0px var(--color-reverse);
    margin-bottom: 1em;
    cursor: pointer;
    transition: transform 0.1s;
    font-size: 0.7em;
}
.diff-btn:hover {transform: scale(1.05);}
.diff-btn:active {transform: scale(0.95);}
.diff-btn h4 {margin: 0px;}
.diff-btn[data-val="prolo"] {background: var(--body-bg);}
.diff-btn[data-val="etudiant"] {background: var(--formation);}
.diff-btn[data-val="jeunesse-doree"] {background: var(--main);}
.diff-btn[data-val="heritier"] {background: var(--immobilier);}
.diff-btn[data-val="pistonne"] {background: var(--entreprise);}
.diff-btn[data-val="epargnant"] {background: var(--finance);}
/* Écrans de fin */
#endgame .section span {font-weight: bold;}
#endgame .section img {
    width: 50%;
    height: auto;
    border-radius: 4em;
}
#endgame .section button {
    padding: 2em;
    margin: 2em;
    font-size: 1em;
    cursor: pointer;
    background-color: var(--main);
    color: var(--color);
    border: none;
    border-radius: 3em;
    transition: transform 0.1s;    
}
/* Gestion des évenements */
#evenementOverlay img {
    width: 50%;
    height: auto;
    border-radius: 4em;
}
#evenementOverlay button {
    padding: 2em;
    margin: 2em;
    font-size: 1em;
    cursor: pointer;
    background-color: var(--main);
    color: var(--color);
    border: none;
    border-radius: 3em;
    transition: transform 0.1s;  
}
/* Gestion responsive */
@media (max-width: 1000px) {
    #game {
	flex-direction: column;
	width: auto;
    }
    #intro, #endgame {
	width: auto;
    }
}