/*** General ***/
:root {
    --main-color: #0B3D91;
    --second-color: #00509D;
    --third-color: #FDC500;
    --forth-color: #D90429;
    --fifth-color: #EAEAEA;
    --main-bg-color: #EAEAEA;
    --main-border-color: #EAEAEA;
    --main-txt-color: #000;
    --second-txt-color: #fff;
}
body {
    color: var(--main-txt-color);
    font-family: "Open Sans", sans-serif;
    margin: 0;
    padding: 0;
}
header, nav, main, footer {
    margin: 0 auto;
}
h1, h2 {
    font-family: "Anta", sans-serif;
}
section {
    flex: 1 1 70%;
}
aside {
    flex: 1 1 30%;
}


/*** Header ***/
#div-header {
    height: 120px;
}
.logo {
    display: inline-block;
    font-family: "Anta", sans-serif;
    font-size: 3em;
    text-transform: uppercase;
}
.logo a {
    color: black;
    display: inline-block;
    padding: 30px;
    text-decoration: none;
}
.profil-header p {
    margin: 0;
}
.profil-header {
    border: 1px solid #000;
    float: right;
    height: 80px;
    margin: 10px 0 10px 10px;
    padding: 5px 10px;
    width: 200px;
}
.calendrier-header {
    border: 1px solid #000;
    float: right;
    height: 80px;
    margin: 10px 0;
    padding: 5px 10px;
    width: 200px;
}

.profil-header .material-symbols-outlined, .calendrier-header .material-symbols-outlined {
    vertical-align: middle;
}
.profil-header.vert, .calendrier-header.vert {
    border-color: green;
}
.profil-header.bleu_fonce, .calendrier-header.bleu_fonce {
    border-color: darkblue;
}
.profil-header.bleu, .calendrier-header.bleu {
    border-color: blue;
}
.profil-header.vert, .calendrier-header.vert {
    border-color: green;
}
.profil-header.jaune, .calendrier-header.jaune {
    border-color: gold;
}
.profil-header.orange, .calendrier-header.orange {
    border-color: orange;
}
.profil-header.rouge, .calendrier-header.rouge {
    border-color: red;
}
.profil-header.violet, .calendrier-header.violet {
    border-color: violet;
}

/*** Header Menu ***/
#div-menu {
    background-color:  var(--main-color);
    width: 100%;
}
#menu-header ul {
    margin: 0;
    padding-left: 0;
    color: var(--second-txt-color);
}
#menu-header ul li {
    display: inline-block;
}
#menu-header ul li a:hover, #menu-header ul li a.selected {
    color: var(--third-color);
}
#menu-header ul li a {
    color: var(--second-txt-color);
    display: block;
    padding: 20px;
    text-decoration: none;
    text-transform: uppercase;
}

/*** Footer Menu ***/
#div-footer {
    background-color:  var(--main-color);
    color: var(--second-txt-color);
    height: 60px;
    line-height: 60px;
    text-align: center;
}
#menu-footer ul {
    padding-left: 0;
    margin: 0;
}
#menu-footer ul li {
    display: inline-block;
}
#menu-footer ul li a {
    color: var(--second-txt-color);
    padding: 0;
    display: block;
    text-decoration: none;
}
#menu-footer ul li a:hover {
    color: var(--third-color);
}

/*** Main  ***/
main > h1 {
}
#div-main {
    gap: 20px;
    padding-left: 20px;
}
#div-main h1 {
    border-bottom: 2px solid var(--third-color);
    padding-bottom: 10px;
    text-transform: uppercase;
}
#div-main h2 {
    border-bottom: 1px solid var(--main-border-color);
    clear: both;
    color: var(--second-color);
    padding-bottom: 5px;
}
#div-main h3 {
    text-transform: uppercase;
}

/*** Profil ***/
.profil input[type="radio"]{
    margin-bottom: 5px;
    vertical-align: middle;
}
#div-main .material-symbols-outlined {
    font-size: 34px;
    vertical-align: middle;
}
.noir, .noir a {
    color: black;
}
.bleu_fonce, .bleu_fonce a {
    color: darkblue;
}
.bleu, .bleu a {
    color: blue;
}
.vert, .vert a {
    color: green;
}
.jaune, .jaune a {
    color: gold;
}
.orange, .orange a {
    color: orange;
}
.rouge, .rouge a {
    color: red;
}
.violet, .violet a {
    color: violet;
}

#show_res {
    display: none;
}

/*** General links class ***/
.lien, .lien_details {
    color: var(--main-color);
    text-decoration: none;
}
.lien:hover, .lien_details:hover {
    color: var(--third-color);
}
.lien_details::after {
    content: "➔";
    padding-left: 5px;
}
.liens_navigation {
    font-family: "Anta", sans-serif;
}
.liens_navigation a {
    background-color: var(--main-color);
    border-radius: 5px;
    color: var(--second-txt-color);
    display: inline-block;
    text-decoration: none;
    padding: 10px;
}
.liens_navigation a:hover {
    color: var(--third-color);
}
.liens_navigation_before::before {
    content: "«";
    font-size: 1.3em;
    padding-right: 5px;
}
.liens_navigation_before {
    margin-bottom: 10px;
}
.liens_navigation_after::after {
    content: "»";
    font-size: 1.3em;
    padding-left: 5px;
}

/*** Reponses ***/
.reponse-correct {
    color: green;
    background-color: lightgreen;
}
.reponse-incorrect {
    color: red;
    background-color: lightpink;
}

/*** Memoire ***/
.memoire-cartes {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 900px;
}
.memoire_carte .memoire_carte_dos a {
    width: 100%;
    height: 100%;
    display: block;
}
.memoire_carte_dos_lien span {
    display: none;
}
.memoire_carte_dos_lien span.show, .memoire_carte_dos_lien span.fixe {
    display: block;
}
.memoire_carte {
    width: 200px;
    height: 200px;
    text-align: center;
    border: 1px solid black;
}

.memoire_carte .memoire_carte_face {
    width: 20px;
    height: 20px;
    display: none;
}
.memoire_nouveau {
    display: none;
    text-align: center;
    width: 200px;
    height: 200px;
    border: 1px solid black;
}
/*** Avance ***/
#avance-plateau {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 20px;
}
#dice {
    width: 80px;
    height: 30px;
    padding: 30px 10px;
    text-align: center;
    border: 1px solid green;
}
#plateau-des {
}
#plateau-nouveau {
    display: none;
}
#des-1, #des-2, #des-3, #des-4, #des-5, #des-6 {
    display: none;
}
.avance_case {
    width: 60px;
    height: 60px;
    padding: 20px;
    text-align: center;
    border: 1px solid black;
}
.avance_case_nouvelle_partie {
    width: 120px;
    height: 60px;
    padding: 20px;
    text-align: center;
    border: 1px solid black;
    display: none;
}
.pion1 {
    display: none;
    font-weight: bold;
}
/*** Calendrier ***/
#calendrier-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 20px;
}
.calendrier_noday {
    flex: 0 0 10%;
    width: 80px;
    height: 90px;
    padding:  5px 10px;
    border: 1px solid transparent;
}
.calendrier_jour {
    flex: 0 0 10%;
    width: 80px;
    height: 100px;
    padding: 5px 10px;
    border: 1px solid black;
}
.calendrier_jour_semaine {
    flex: 0 0 10%;
    width: 80px;
    height: 30px;
    padding: 5px 10px;
    border: 1px solid black;
    text-align: center;
    background-color: black;
    color: white;
}
.calendrier_jour_courrant {
    font-weight: bold;
    padding: 4px 9px;
    border: 2px solid black;
}
.calendrier_jour_passe {
    background-color: lightgrey;
}
.calendrier_vacances {
    background-color: lightblue;
    font-size: 12px;
    padding: 2px 5px;
    margin: 5px 0 0 0;
}
.calendrier_rentree {
    background-color: lightgreen;
    font-size: 12px;
    padding: 2px 5px;
}

del{
    color: red;
}

/*** Media pc ***/
@media only screen and (min-width : 1224px) {

    header, nav, main, footer {
        width: 1200px;
    }

}