@import "charte/font/stylesheet.css";

/*
-----------------------------------------
                Thème
-----------------------------------------
*/
:root {
    --cta-bg: #257136;
    --cta-hover-bg: #3BB256;
    --cta-radius: 12px;
    --footer-bg: #253C3E;
    --red-text: #BE1722;
    --yellow-text: #dddc00;
    --green: #B2DA2F;
}

/*
----------------------------------------
                Structure
----------------------------------------
*/

html, body{width: 100%; max-width: 100vw; min-height: 100vh;overflow-x: hidden;background-color: #63a1d4;}
*, a{color: white;font-family: 'Uniform',sans-serif;}
#page{width: 100%;}
.container {
    max-width: 1600px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 0;
    margin: 0 auto;
    background: url("charte/imgs/bg.jpg") no-repeat;
    background-position: bottom center;
    background-size: cover;
}
img{width: 100%; max-width: max-content; height: auto;}

header, footer{position: relative; width: 100%;}
header{padding-top: 50px;}
footer{min-height: 225px;display: flex; justify-content: center; align-items:  flex-end;}
footer .mention{position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); width: 100%;display: none;}
.footer-text{margin-bottom: 0;font-size: 30px; font-family: 'UniformExtraCondensed-Light', sans-serif;letter-spacing: 3em;letter-spacing: 0.298em;width: 100%; background-color: var(--footer-bg); height: 66px;display: flex; align-items: center; justify-content: center;}

body.home footer .mention{display: inherit;}

/* Fenêtre modal */
.modal-header{background-color: var(--red-text)}
.modal-body{color: var(--footer-bg);}
.btn{font-size: 12px;color: white;}
.btn:hover{font-size: 16px;}

.cta, .btn{display: block; background-color: var(--cta-bg);text-transform: uppercase;font-size: 31px;border-radius: var(--cta-radius); -webkit-border-radius: var(--cta-radius);padding: 5px 45px;max-width: max-content;transition: background-color .5s ease, font-size .5s ease; will-change: background-color, font-size;text-decoration: none;height: 55px;display: flex; justify-content: center; align-items: center;min-width: 202px;outline: none; border: none;}
.cta:hover, .btn:hover{background-color: var(--cta-hover-bg);font-size: 23px;text-decoration: none;color: white;}
.text{text-transform: uppercase; text-shadow: rgba(0,0,0,0.16) 0 3px 6px;line-height: 1.0em;}

/* Case à cocher personnalisée */
label{font-size: 24px; margin-bottom: 0;}
.form-control-lg, select{height: 60px;border-radius: 5px;color: var(--footer-bg);width: 100%;text-align: center;font-size: 30px;border: none;border: var(--green) 2px solid;}
.form-control-lg::placeholder, .form-control-lg::-webkit-input-placeholder{color: var(--cta-hover-bg);text-align: center;}
.custom-control-label{font-family: Arial;font-size: 16px;text-align: left;margin-bottom: 20px;padding-left: 20px;}
.custom-checkbox .custom-control-label::before{border: none; border-radius: 50%;height: 30px; width: 30px;border: var(--green) 2px solid;}
.custom-control-input:checked~.custom-control-label::before{border-color: var(--input-text); background-color: white;}
.custom-control-label::after{width: 20px; height: 20px;top: 9px; left: -19px;}
.custom-checkbox .custom-control-input:checked~.custom-control-label::after{background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23257136' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e")}
.custom-control{max-width: max-content;}


/*
----------------------------------------
                Majeur
----------------------------------------
*/
.majeur .text{font-size: 37px;}
.majeur .majeur-choice{display: flex; width: 100%; max-width: 450px;margin: 20px auto; justify-content: space-between;gap: 15px;}

/*
----------------------------------------
                Accueil
----------------------------------------
*/

.home-text{font-size: 64px;margin-top: 27px;font-weight: 900;}
.home-img > img{width: 100%; max-width: max-content; height: auto;margin-top: 25px;}
.home-link{margin: 50px auto 50px auto;}

/*
----------------------------------------
                Formulaire
----------------------------------------
*/

.form form, .register, .sending, .mentions { display: none; }
.form form, .form .participate{max-width: 60%; margin: 0 auto;margin-top: 30px;}
.form .cta{margin: 0 auto;}

/*
----------------------------------------
                Choice
----------------------------------------
*/

.choice-text{font-size: 37px;max-width: 870px;margin: 15px auto 0;}
.choice-text > p:last-child{max-width: 760px;margin-left: auto; margin-right: auto;}
.choice-container{width: 100%; margin: 0 auto;display: flex; justify-content: space-between;margin-top: 20px;max-width: 1024px;}
.choice span{font-size: 35px; font-weight: bold; text-transform: uppercase;margin-top: 10px;display: inline-block;text-shadow: rgba(0, 0, 0, 0.16) 0 3px 5px;}
.choice:first-of-type > span{color: var(--red-text);}
.choice:nth-child(2) > span{color: var(--yellow-text);}
.choice-link{margin: 45px auto 0;}
.choice{cursor: pointer; border-radius: 15px;width: 100%;}
.choice img{transform: scale(0.8); transition: transform .5s ease;}
.choice:hover img{transform: scale(1);}
.choice.selected{background-color: rgba(0,0,0,0.2);}


/*
----------------------------------------
                Game
----------------------------------------
*/

.game-container{display: flex; gap: 15px;justify-content: space-between;margin: 0 auto; max-width: 1327px;margin-top: 20px;width: 100%;}
.game-container > .col{width: 100%; max-width: 100%;padding: 0;}
.game-container h2{font-size: 38px; font-weight: bold;text-align: left;text-transform: uppercase;line-height: 1.0em;margin-bottom: 0;}
.game-container .texte{/*font-size: 37px;*/font-size: 20px;text-align: left;line-height: 1.0em;margin-top: 7px;}
.game-container .texte > img{margin-right: 5px;}
.game-container #thegame{width: 500px; height: 500px;}
.game-container #thegame > canvas{width: 500px; height: 500px; border: var(--green) 5px solid;}
.game-container .cta{margin: -35px auto 0;position: relative; z-index: 3;display: none;}


/*
----------------------------------------
                Win
----------------------------------------
*/

.win-container h2, .lost-container h2{font-size: 90px;font-weight: bold;text-transform: uppercase;margin-top: 90px;}
.win-container .cta, .lost-container .cta{margin: 147px auto 0;font-size: 25px;padding: 5px 15px;}
.win-container .text{font-size: 50px; text-shadow: none;margin-top: 40px;}

/*
----------------------------------------
                Lost
----------------------------------------
*/

.lost-container .cta{margin-top: 15vw;}


/*
----------------------------------------
        Révision: 03/11/2021
----------------------------------------
*/

header img{max-width: 550px;}
.home-text{font-size: 34px;}
.home-img > img{max-width: 320px;}
.game-container .texte{margin-top: 30px;}

/*
-----------------------------------------
                Responsive
-----------------------------------------
*/

@media (max-width: 1600px) {
    .home-text{font-size: 34px;}
    .footer-text{letter-spacing: 0.1em;}
    .container > :not(footer){padding-right: 15px; padding-left: 15px;}
}

@media (max-width: 1024px) {
    .logo img{width: 80%;}
    .home-text{font-size: 28px;}
    .footer-text{font-size: 2.5vw;}
}

@media (max-width: 768px) {
    .home-text{font-size: 4vw;}
    .home-img > img{width: 60%;}
    .home-link{margin: 20px auto;}

    .form form, .form .participate{max-width: 100%;}
    .game-container{flex-direction: column;align-items: center;}
    .game-container > .col:last-of-type{display:none;}
    .game-container #thegame{margin: 0 auto;}
    .game-container .texte{text-align: center;}
}

@media (max-width: 600px) {
    .game-container #thegame{width: 400px; height: 400px; margin: 0 auto;}
    .game-container #thegame > canvas{width: 400px; height: 400px;}
}

@media (max-width: 480px) {
    input, input::placeholder, label{font-size: 16px!important;}
    input{height: 40px!important;}
    .btn, .cta{font-size: 20px!important;}
    .btn:hover, .cta:hover, .game-container h2, .game-container .texte, .win-container .text{font-size: 16px;text-align: center;}
    .game-container .texte img{width: auto;height: 24px;}
    .game-container .texte{padding: 0 15px; text-align: justify;}

    .choice-text, .win-container h2, .lost-container h2{font-size: 20px;}
    .choice span, .majeur .text{font-size: 16px;}
    .game-container #thegame, .game-container #thegame > canvas{width: calc(100vw - 30px); height: calc(100vw - 30px);padding: 0;}
    body.game #page{padding: 0!important;}
    .majeur .majeur-choice{justify-content: center;}
    .majeur .majeur-choice .cta{padding: 5px 45px;min-width: 0;}
    footer .mention{font-size: 12px;}
}