/* Fonts */
@font-face {
    font-family: "Kalam";
    src: url("/squelettes/css/tante-alice/assets/fonts/Kalam-Regular.ttf");
}

@font-face {
    font-family: "Poppins";
    src: url("/squelettes/css/tante-alice/assets/fonts/Poppins-Regular.ttf");
}

@font-face {
    font-family: "Kalam Bold";
    src: url("/squelettes/css/tante-alice/assets/fonts/Kalam-Bold.ttf");
}

@font-face {
    font-family: "Poppins Bold";
    src: url("/squelettes/css/tante-alice/assets/fonts/Poppins-Bold.ttf");
}

/* Variables CSS */
:root {
    --secondary-color: #FADB17;
    --primary-color: #DEE7ED;
    --primary-color-text: #F7F8FA;
    --pimary-font-family: "Poppins";
    --pimary-font-family-bold: "Poppins Bold";
    --secondary-font-family: "Kalam";
    --secondary-font-family-bold: "Kalam Bold";
    --custom-blue: #007693;
    --custom-blue-contrast: #00769366;
    --custom-orange: #DB5627;
}


h1,
h2,
.sous-titre {
    font-family: var(--secondary-font-family-bold);
}

.sous-titre {
    font-size: 1.5rem;
}

.mcj-titre2 {
    font-size: 3rem;
}

h1,
h2 {
    color: var(--secondary-color);
}

p {
    font-family: var(--pimary-font-family);
    color: var(--primary-color-text);
}

li {
    font-family: var(--pimary-font-family);
    color: var(--primary-color-text);
}

.mcj-titre {
    text-align: center;
    font-size: 2.25rem;
    line-height: 2.5rem;
    text-transform: inherit;
}

.avis {
    text-align: center;
}

.avis strong {
    font-family: var(--secondary-font-family-bold);
    font-size: 1rem;
    text-transform: uppercase;
    color: white;
    font-weight: 700;
}

.text .first-paragraph strong {
    color: #fff;
}

.presentation-regle strong,
.text-enigme strong,
.container-presentation strong {
    color: var(--secondary-color);
    font-family: var(--pimary-font-family-bold);
}

.logo_site {
    position: fixed;
    top: 0;
    z-index: 100;
}



body {
    background-color: #004869;
    margin: 0;
}


/* Titre et auteur */
.section-intro {
    margin: auto;
    background-image: url("/squelettes/css/tante-alice/assets/image/fond2.0.png");
    background-size: 140%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top 35% right 80%;
    position: relative;
    z-index: -2;
    transition: 0s;
}

.intro-text {
    background-image: url("/squelettes/css/tante-alice/assets/image/second-plan.png");
    background-position: top 30% left 50%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 55rem;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 72, 105, 1) 90%, rgba(0, 72, 105, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 72, 105, 1) 90%, rgba(0, 72, 105, 0) 100%);
    z-index: 1;
}

.cover-up {
    width: 100%;
    height: 13rem;
    position: absolute;
    bottom: 0;
    background-color: #004869;
    z-index: -1;
}

.intro-text {
    margin: auto;
    padding-top: 5rem;
}

.escape {
    margin: 0;
    text-transform: uppercase;
    font-family: var(--pimary-font-family-bold);
    text-align: center;
    font-size: 1.25rem;
    color: #fff;
    font-weight: 700;
}

.titre-livre,
.auteur-livre {
    font-family: var(--secondary-font-family);
    color: #1A2431;
    text-align: center;
    font-weight: 700;
    margin: 0;
}

.titre-livre-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.titre-livre {
    width: 20%;
    margin: auto;
}

/* Présentation et regles */
.section1 .container {
    margin: 0;
    width: 100%;
}

.clearfix {
    padding-bottom: 4.75rem;
}

.presentation {
    display: flex;
    gap: 3.5rem;
    padding: 3.75rem 3.5rem;
}

.presentation-intro {
    width: 50%;
}

.button-rule {
    background-image: url("/squelettes/css/tante-alice/assets/image/help-circle.png");
    background-color: rgba(0, 72, 105, 0.5);
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    top: 4rem;
    right: 6.5rem;
    width: 3.25rem;
    height: 3.25rem;
    border: solid 1px #007693;
    border-radius: 6.5rem;
    z-index: 100;
}

.button-rule.close {
    background-image: url("/squelettes/css/tante-alice/assets/image/close-circle.png");
}

.zoom-out:hover,
.button-rule:hover {
    cursor: pointer;
}

#regle-fixe {
    padding: 1.75rem;
    width: 19.5rem;
    left: -19.9rem;
    position: absolute;
    top: 4rem;
    z-index: 100;
    backdrop-filter: blur(10px);
}

#regle-fixe:hover {
    cursor: default;
}

#regle-fixe p {
    padding: 0;
}

.presentation-regle {
    width: 40%;
    border: solid 1px var(--custom-blue);
    background-color: var(--custom-blue-contrast);
    border-radius: 15px;
    padding: 1.75rem;
}

.presentation-regle li {
    padding-bottom: 1rem;
}

.zoom-out {
    width: fit-content;
}

.presentation-regle p {
    padding: 1rem 0;
}

.container-presentation {
    display: flex;
    border: solid 1px var(--custom-blue);
    background-color: var(--custom-blue-contrast);
    border-radius: 15px;
    padding: 0.5rem 4rem;
    gap: 5rem;
}

.container-presentation strong {
    color: #fff;
}

.pres-remp-container,
.pres-chance-container {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    width: 35%;
}

.presentation .pres-remp-container {
    width: 45%;
}

.presentation-regle ul {
    list-style: disc;
    padding-left: 1.5rem;
}

.vertical-hr {
    width: 1px;
    height: 100px;
    background-color: var(--custom-blue-contrast);
    border: none;
}

.col-total {
    margin: auto;
}

.grid {
    display: flex;
    margin: auto;
    width: 70%;
    gap: 7.75rem;
}

.grid:nth-last-child(even) {
    flex-direction: row-reverse;
}

/* Énigmes */
.section2 .clearfix {
    gap: 6.25rem;
    display: flex;
    flex-direction: column;
}



.grid .left,
.grid .right {
    width: 50%;
}

/* Images */
.parent-block-image {
    display: flex;
    gap: 2rem;

}

.block-image {
    width: 100%;
}

.block-image img {
    width: 100%;
}

.block-image img:hover {
    filter: sepia(100%) saturate(500%) hue-rotate(-45deg);
    cursor: pointer;
}

.col-img-left {
    padding-top: 3.75rem;
}

.col-img-right {
    padding-bottom: 3.75rem;
}

.col-img-right,
.col-img-left {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    width: 50%;
}

/* Formulaire */
.form-banner {
    background-image: url('/squelettes/css/tante-alice/assets/image/banniere-formulaire.png');
    background-size: cover;
    background-position: center;
    height: 6rem;
    width: 100%;

}


.game-formulaire {
    background-image: url('/squelettes/css/tante-alice/assets/image/premier.png');
    background-position: left 100% bottom 0%;
    background-size: 60%;
    background-repeat: no-repeat;
}


.game-formulaire .grid {
    flex-direction: row;
    align-items: center;
}

form .container-formulaire {
    padding: 0;
    margin: 0;
    width: 100%;
}

form .container-formulaire .col-1-2 {
    width: 100%;
}

.livre-logo,
.ajax-form-container {
    width: 50%;
}

.livre-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
}

.livre-logo-2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 9rem;
}

img.pocket {
    width: 50px;
}

img.pocket2 {
    width: 60px;
}

fieldset {
    padding: 0;
}

ul {
    padding: 0;
}

input {
    width: 100%;
}

.boutons input {
    background-color: var(--custom-orange);
    border: 1px solid var(--custom-orange);
    font-family: var(--secondary-font-family);
}

.boutons input:hover {
    background-color: #A13B00;
    border: 1px solid #A13B00;
}

.game-formulaire .container .grid:nth-child(2) {
    display: flex;
    justify-content: center;
}

input[type="text"] {
    height: 2rem;
}

/* Big screen */
@media screen and (min-width: 1640px) {
    .intro-text {
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 72, 105, 1) 90%, rgba(0, 72, 105, 0) 100%);
        mask-image: linear-gradient(to bottom, rgba(0, 72, 105, 1) 90%, rgba(0, 72, 105, 0) 100%);
    }

    .cover-up {
        height: 6rem;
    }
}

@media screen and (min-width: 1640px) {
    .intro-text {
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 72, 105, 1) 95%, rgba(0, 72, 105, 0) 100%);
        mask-image: linear-gradient(to bottom, rgba(0, 72, 105, 1) 95%, rgba(0, 72, 105, 0) 100%);
    }

    .cover-up {
        height: 3rem;
    }
}

/* Mobile */
@media screen and (max-width: 640px) {
    .logo_site {
        top: 1rem;
    }

    .button-rule {
        top: 1rem;
        right: 1rem;
    }

    #regle-fixe {
        left: -19rem;
    }

    .section-intro {
        background-position: top 0% right 80%;
        padding-top: 1rem;
    }

    .titre {
        padding-bottom: 3rem;
    }

    .titre-livre {
        width: 50%;
    }

    .col-total {
        width: 100%;
    }

    .presentation {
        flex-direction: column;
        padding: 0;
    }

    .presentation-intro {
        width: 100%;
    }

    .intro-text {
        padding-top: 0;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: flex-end;
    }

    .intro-text .escape {
        padding-top: 6rem;
    }

    .titre-livre {
        padding-top: 0;
    }

    .presentation-regle {
        width: 80%;
    }

    .clearfix {
        display: flex;
        flex-direction: column;
        gap: 5rem;
    }

    .clearfix .grid {
        gap: 0;
        flex-direction: column;
    }

    .grid .left,
    .grid .right {
        width: 100%;
    }

    .container-presentation {
        padding: 0.5rem 0.5rem;
        gap: 1rem;
        flex-direction: column;
        width: 100%;
        margin-top: 3.5rem;
    }

    .pres-chance-container {
        width: 100%;
        justify-content: center;
    }

    .vertical-hr {
        display: none;
    }

    .form-banner {
        height: 4rem;
    }

    .game-formulaire {
        background-image: none;
    }

    .game-formulaire .grid {
        width: 100%;
        flex-direction: column;
        gap: 1rem;
    }

    .livre-logo,
    .ajax-form-container {
        width: 100%;
        padding-top: 0;
    }

    .pres-remp-container {
        width: 100%;
        flex-direction: column;
    }
}