* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --beige-fond-page: #F8E6C6;
    --vert-pomme-banniere-section: #A7C957;
    --vert-pomme-border: #85A146;
    --vert-foret-btn1-btn4: #31824A;
    --vert-foret-border: #64B57D;
    --rouge-btn2: #BC4749;
    --rouge-btn2-border: #D79192;
    --mauve-btn3: #985277;
    --mauve-btn3-border: #C197AD;
    --vert-ultraclair-panneau: #DCE9BC;
    --vert-clair-inputs-border: #CADF9A;
    --beige-avatar: #F7CA9C;
    --beige-avatar-border: #F5B87B;

    --shadow-section: 0px 6px 10px rgba(61, 42, 22, 0.25);
    --shadow-bouton : 0px 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-avatar : 0px 10px 10px rgba(0, 0, 0, 0.40);
}

body {
    min-height: 100vh;
    min-width: 100vw;
    background-color: var(--beige-fond-page);
    display: flex;
    flex-direction: column;
    font-family: "Roboto", sans-serif;
    line-height: 1.5;
    flex-grow: 1;
}

a {
    text-decoration: none;
    color: black;
    font-size: 1rem;
}

a:hover {
    font-weight: bold;
}

button {
    font-family: "Roboto", sans-serif;
    text-align: center;
}

h1 {
    font-size:2rem;
    font-weight:normal;
    margin:1rem;
}

h2 {
    font-size: 1.5rem;
    font-weight: normal;
    margin:1rem;
}

header {
    background-color: var(--vert-pomme-banniere-section);
    border-bottom: 2px solid  var(--vert-pomme-border);
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    margin-bottom:2rem;

    .logo-titre {
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap:1.5rem;
    }

    nav {
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        flex-grow: 1;
        gap: 3%;

        .navPage {
            font-weight:bold;
        }
    }

    .connexion-pseudo-money {
        position:relative;
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;

        .money-pseudo {
            display:flex;
            flex-direction: column;
            justify-content: center;

            .porteMonnaie {
                font-size: 1.7rem;;
            }
        }

        .iconeLogout i {
            font-size: 2rem;
            border-style: none;
        }

        .btnLogout {
            font-size: 1rem;
            color:white;
            background-color: var(--vert-foret-btn1-btn4);
            border:none;
            border-radius:0.6rem;
            padding:1rem;

        }
        .hide {
                display:none; /* OU visibility:hidden ?*/
        }

        .show {
            display:flex;
            position: absolute;
            bottom: -2.1rem;
            right: 1rem;
        }

        .show:hover {
            font-weight: bold;
        }

    }
}

.btn1 {
    font-size: 1rem;
    background-color: var(--vert-foret-btn1-btn4);
    border: 2px solid var(--vert-foret-border);
    color: white;
    border-radius:0.6rem;
    padding:0.7rem;
}

.btn1:hover {
    background-color: white;
    border:2px solid var(--vert-foret-btn1-btn4);
    color: var(--vert-foret-btn1-btn4);
}

.btn2 {
    font-size: 1rem;
    background-color: var(--rouge-btn2);
    border: 2px solid var(--rouge-btn2-border);
    color: white;
    border-radius:0.6rem;
    padding:0.7rem;
}

.btn2:hover {
    background-color: white;
    border: 2px solid var(--rouge-btn2);
    color: var(--rouge-btn2);
}

.btn3 {
    font-size: 1rem;
    background-color: var(--mauve-btn3);
    border: 2px solid var(--mauve-btn3-border);
    color: white;
    border-radius:0.6rem;
    padding:0.7rem;
}

.btn3:hover {
    background-color: white;
    border: 2px solid var(--mauve-btn3);
    color: var(--mauve-btn3);
}

.btn4 {
    font-size: 1rem;
    background-color: white;
    border: var(--vert-foret-btn1-btn4);
    color: var(--vert-foret-btn1-btn4);
    border-radius:0.6rem;
    padding:0.7rem;
}

.btn4:hover {
    background-color: var(--vert-foret-btn1-btn4);
    border: 2px solid var(--vert-foret-border);
    color: white;
}

input {
    font-size: 1rem;
    width:18rem;
    height:1.5rem;
    border: 2px solid var(--vert-clair-inputs-border);
    border-radius: 0.4rem;
}

input:hover {
    border: 2px solid var(--vert-foret-btn1-btn4);
}

main {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width:90%;
    margin:auto;
    flex-grow: 1; /* = évite que le footer se balade au milieu de la page */
}

.container {
    background-color: var(--vert-pomme-banniere-section);
    border:2px solid var(--vert-pomme-border);
    box-shadow: var(--shadow-section);
    border-radius: 2rem;
    padding: 2rem;
}

footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--vert-pomme-banniere-section);
    border-top:2px solid var(--vert-pomme-border);;
    width: 100%;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-top:2rem;

    .nomsCredits {
        display:flex;
        flex-direction: row;
        gap:1rem;
    }
}