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

/*
-----------------------------------------
                Thème
-----------------------------------------
*/
:root {
    --cta-bg: #257136;
    --cta-hover-bg: #3BB256;
    --cta-radius: 12px;
    --footer-bg: #253C3E;
    --red-text: #BE1722;
    --blue-text: #76C0FE;
    --yellow-text: #dddc00;
    --green: #B2DA2F;
    --green2: #AED118;
    --green3: #45A735;
}

/*
----------------------------------------
                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/fond.png") 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(--blue-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{color: var(--green3);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(--green3);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;color:var(--green3); border-radius: 50%;height: 30px; width: 30px;border: var(--green2) 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{
    text-transform: uppercase;
    font-size: 54px;
    line-height: 54px;
    text-align: center;
    color: #fff;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    padding-bottom: 20px;
    font-weight: bold;
}
.home-text2{
    font-size: 41px;
    line-height: 41px;
    text-align: center;
    color: #fff;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    font-weight: bold;
    text-transform: uppercase;
}
.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;}



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

.game-container{ width: 100%;}
.game-container form{display: flex; justify-content: center;margin: 0 auto; max-width: 1327px;margin-top: 20px;width: 100%;}
.game-container form section{ display: none}
.game-container > .col{width: 100%; max-width: 100%;padding: 0;}
.game-container form h2{
    font-size: 45px;
    text-align: center;
    color: #fff;
    font-weight: bold;
}

.game-container form h3{
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    color: #fff;
    padding-top: 20px;
    padding-bottom: 40px;
}
.game-container form .block-reponse label{
    font-weight: normal;
    font-size: 32px;
    line-height: 32px;
    text-align: left;
    color: #fff;

}
.game-container form .block-reponses{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.game-container form .block-reponse{
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 481px;
    margin-bottom: 30px;
}
.game-container form .block-reponse input{
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100%;
    max-width: 48px;
    height: 48px;
    margin-right: 35px;
}
.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;}


/*
----------------------------------------
                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: 5vw auto;font-size: 25px;padding: 5px 15px;}
.win-container .text{font-size: 50px; text-shadow: none;margin-top: 40px;}

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

.lost-container .text{font-size: 50px; text-shadow: none;margin-top: 40px;}


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

header img{max-width: 550px;}
.game header{
    position: absolute;
    left: 50%;
    top:0px;
    transform: translateX(-50%);
    z-index:  1;
}
#tapis{

    border-radius: 19px;
    /* Note: currently only Safari supports backdrop-filter */
    backdrop-filter: blur(7.384059906005859px);
    --webkit-backdrop-filter: blur(7.384059906005859px);
    background-color: rgba(255, 255, 255, 0.55);
    padding: 195px;
    max-width: 1140px !important;
    position: relative;
    z-index: 2;
    margin-top: 50px !important;

}
#timer{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color: #fff;
    font-weight: bold;
    font-size: 20px;
    color : #000;
    border-radius: 50px;
}
/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    #tapis{
        background-color: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(7.384059906005859px);
        --webkit-backdrop-filter: blur(7.384059906005859px);
    }
}

.home-img > img{max-width: 320px;}
.game-container .texte{margin-top: 30px;}

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

.next-action{
    display: flex;
    justify-content: center;
}
@media (max-width: 1600px) {
    .home-text{font-size: 34px; line-height: 34px; }
    .home-text2{font-size: 24px; line-height: 24px; }
    .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; line-height: 28px}
    .home-text2{font-size: 18px; line-height: 18px}
    .footer-text{font-size: 2.5vw;}
    #tapis{
        padding: 60px;
    }
    #timer{
        right: 15px;
        top: 15px;
    }
}

@media (max-width: 768px) {
    .home-text{font-size: 4vw; line-height: 4vw;}
    .home-text2{font-size: 3.5vw; line-height: 3.5vw;}
    .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) {
    .home-text {
    }
    .game-container #thegame{width: 400px; height: 400px; margin: 0 auto;}
    .game-container #thegame > canvas{width: 400px; height: 400px;}
}

@media (max-width: 480px) {
    header{
        padding-top: 25px;
    }

    #timer{
        top:5px;
        right: 15px;
        width: 30px;
        height: 30px;
        font-size: 15px;
    }

    #tapis{
        padding: 40px 15px 15px ;
        margin-top: 25px !important;
    }
    .win-container .cta, .lost-container .cta{
        margin-top: 16vw;
        margin-bottom: 16vw;
    }
    .game-container form .block-reponse input{
        max-width: 28px;
        margin-right: 15px;
    }
    .game-container form .block-reponse{
        margin-bottom: 0px;
    }
    .game-container form .block-reponse:last-of-type{
        margin-bottom: 15px;
    }
    section{
        padding-left: 15px;
        padding-right: 15px;
    }
    .next-action img{
        max-width: 70%;
        margin: 0 auto;
    }

    .game-container form h2{
        font-size: 35px;
    }
    .game-container form h3{
        font-size: 20px;
    }
    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, .lost-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;}
}