/* ========================

   QUESTION SCREEN - Louis XVI (1792) & Flaubert (1857) & Patrick Henry (1977)

   ======================== */



.question-screen-1792,

.question-screen-1857,

.question-screen-1977 {

    background-color: var(--bg-white);

    height: 100vh;

    position: relative;

    overflow: hidden;

}



/* Watermark G */

.question-watermark {

    position: absolute;

    left: -50px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 1;

    pointer-events: none;

}



.watermark-g-question {

    width: 450px;

    height: auto;

    opacity: 0.15;

}



/* Question Layout - 3 columns */

.question-layout {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: calc(100vh - 80px);

    padding: 40px 60px;

    position: relative;

    z-index: 2;

}



/* Left column - Back button */

.question-left {

    flex: 0 0 60px;

    display: flex;

    align-items: flex-start;

    align-self: center;

    margin-left: 240px;

    margin-top: -250px;

}



#btn-back-1792,

#btn-back-1857,

#btn-back-1977 {

    width: 50px;

    height: 50px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #fff;

}



#btn-back-1792 svg,

#btn-back-1857 svg,

#btn-back-1977 svg {

    width: 24px;

    height: 24px;

    stroke: #1A1A1A;

}



/* Center column - Question content */

.question-center {

    flex: 1;

    max-width: 850px;

    text-align: center;

    padding: 0 40px;

}



.trial-title {

    font-family: Poppins;

    font-size: 42px;

    font-weight: 700;

    color: var(--gold);

    margin-bottom: 25px;

}



.question-text-new {

    font-family: var(--font-body);

    font-size: 16px;

    font-weight: 400;

    color: var(--text-black);

    line-height: 1.6;

    margin-bottom: 40px;

}



/* New Answer buttons */

.answers-container-new {

    display: flex;

    flex-direction: column;

    gap: 25px;

}



/* Right column - Louis XVI image */

.question-right {

    flex: 0 0 350px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

}



.louis-img {

    max-width: 170%;

    height: auto;

    max-height: 70vh;

    object-fit: contain;

    float: left;

}



/* ========================

   RESPONSIVE

   ======================== */

@media (max-width: 1200px) {

    .question-layout {

        padding: 40px 30px;

    }



    .question-right {

        flex: 0 0 280px;

    }



    .trial-title {

        font-size: 36px;

    }

}



@media (max-width: 992px) {

    .question-layout {

        flex-direction: column;

        padding: 20px;

    }



    .question-left {

        position: absolute;

        left: 20px;

        top: 100px;

        margin-left: 0;

        margin-top: 0;

    }



    .question-center {

        order: 1;

        padding: 20px;

        max-width: 100%;

    }



    .question-right {

        order: 2;

        flex: 0 0 auto;

        justify-content: center;

    }



    .louis-img {

        max-height: 40vh;

    }



    .question-watermark {

        display: none;

    }

}



@media (max-width: 768px) {

    .trial-title {

        font-size: 28px;

    }



    .question-text-new {

        font-size: 14px;

    }

}



/* ========================

   CORRECT ANSWER SCREEN

   ======================== */



.correct-screen {

    background-color: #EBBE27;

    background-image: url('../images/bg-gold-g.png');

    background-size: 40%;

    background-repeat: no-repeat;

    background-position: bottom left;

    height: 100vh;

    position: relative;

    overflow: hidden;

}



.correct-layout {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: calc(100vh - 80px);

    padding: 40px 60px;

    position: relative;

    z-index: 2;

}



.correct-left {

    flex: 0 0 60px;

    margin-left: 100px;

}



.correct-content {

    flex: 1;

    max-width: 950px;

    text-align: center;

    padding: 0 20px;

}



/* All correct screen buttons should be white */

#btn-back-hall-1792,

#btn-back-hall-1857,

#btn-reward-1977 {

    background-color: #fff !important;

}



.correct-title {

    font-family: Poppins;

    font-size: 48px;

    font-weight: 700;

    color: #fff;

    margin-bottom: 20px;

}



.correct-text {

    font-family: var(--font-body);

    font-size: 20px;

    font-weight: 700;

    color: var(--text-black);

    line-height: 1.5;

    margin-bottom: 30px;

    max-width: 700px;

    margin-left: auto;

    margin-right: auto;

}



.correct-image {

    flex: 0 0 350px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

}



.louis-happy-img {

    max-width: 170%;

    height: auto;

    max-height: 70vh;

    object-fit: contain;

    float: left;

}



/* ========================

   WRONG ANSWER SCREEN

   ======================== */



.wrong-screen {

    background-color: #FFFFFF;

    height: 100vh;

    position: relative;

    overflow: hidden;

}



/* Watermark G for wrong screen */

.wrong-watermark {

    position: absolute;

    left: -50px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 1;

    pointer-events: none;

}



.watermark-g-wrong {

    width: 450px;

    height: auto;

    opacity: 0.15;

}



.wrong-layout {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: calc(100vh - 80px);

    padding: 40px 60px;

    position: relative;

    z-index: 2;

}



.wrong-left {

    flex: 0 0 60px;

    margin-left: 240px;

}



.wrong-content {

    flex: 1;

    max-width: 850px;

    text-align: center;

    padding: 0 40px;

}



.wrong-title {

    font-family: Poppins;

    font-size: 48px;

    font-weight: 700;

    color: var(--gold);

    margin-bottom: 40px;

}



#btn-retry-1792,

#btn-retry-1857,

#btn-retry-1977 {

    background-color: #fff !important;

    margin-bottom: 25px;

}



.btn-context-link {

    display: block;

    font-family: var(--font-body);

    font-size: 16px;

    color: var(--text-black);

    text-decoration: underline;

    cursor: pointer;

}



.btn-context-link:hover {

    color: var(--gold);

}



.wrong-image {

    flex: 0 0 350px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

}



.louis-angry-img {

    max-width: 170%;

    height: auto;

    max-height: 70vh;

    object-fit: contain;

    float: left;

}



/* ========================

   REWARD SCREEN - Bravo

   ======================== */



.reward-screen {

    background-color: #FFFFFF;

    height: 100vh;

    position: relative;

    overflow: hidden;

}



.reward-layout {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 60px;

    height: calc(100vh - 80px);

    padding: 40px 80px;

}



.reward-book {

    flex: 0 0 auto;

}



.book-img {

    max-width: 650px;

    height: auto;

    max-height: 60vh;

    object-fit: contain;

}



.reward-content {

    flex: 1;

    max-width: 800px;

}



.reward-title {

    font-family: Poppins;

    font-size: 60px;

    font-weight: 700;

    color: var(--gold);

    margin-bottom: 20px;

    line-height: 1.2;

}



.reward-intro {

    font-family: var(--font-body);

    font-size: 20px;

    color: var(--text-black);

    margin-bottom: 15px;

}



.reward-text {

    font-family: var(--font-body);

    font-size: 20px;

    color: var(--text-black);

    margin-bottom: 30px;

}



#btn-get-bd {

    background-color: #fff !important;

}

.reglement-link {
    display: block;
    margin-top: 15px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-black);
    opacity: 0.6;
    text-decoration: underline;
}

.reglement-link:hover {
    opacity: 1;
}



/* ========================

   EMAIL SCREEN - Form

   ======================== */



.email-screen {

    background-color: #FFFFFF;

    height: 100vh;

    position: relative;

    overflow: auto;

}



.email-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: calc(100vh - 200px);

    padding: 40px;

    text-align: center;

}



.email-title {

    font-family: Poppins;

    font-size: 60px;

    font-weight: 700;

    color: var(--gold);

    margin-top: 30vh;

    margin-bottom: 15px;

}



.email-subtitle {

    font-family: var(--font-body);

    font-size: 20px;

    color: var(--text-black);

    margin-bottom: 30px;

}



.email-form {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

    margin-bottom: 0;

}

#btn-send-email {
    margin-bottom: 10px;
}



.email-input {

    width: 350px;

    padding: 15px 20px;

    border: 1px solid #ddd;

    border-radius: 0;

    font-family: var(--font-body);

    font-size: 16px;

    text-align: center;

    outline: none;

}



.email-input:focus {

    border-color: var(--gold);

}



.email-footer {

    margin-top: auto;

    padding-bottom: 100px;

    text-align: center;

}



.email-discover {

    font-family: var(--font-body);

    font-size: 14px;

    color: var(--text-black);

    margin-bottom: 15px;

}



.btn-outline {

    background-color: transparent !important;

    border: 1px solid var(--text-black) !important;

    color: var(--text-black) !important;

}



.btn-outline:hover {

    background-color: var(--text-black) !important;

    color: #fff !important;

}

/* RGPD text */
.rgpd-text {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-gray);
    max-width: 600px;
    margin: 10px auto 0;
    padding-bottom: 20px;
    line-height: 1.4;
    text-align: center;
}

.rgpd-text a {
    color: var(--text-gray);
}



/* Extended email form styles */

.email-form-extended {

    width: 100%;

    max-width: 500px;

}



.email-form-extended .email-input {

    width: 100%;

    text-align: left;

}



.email-form-extended .form-row {

    display: flex;

    gap: 15px;

    width: 100%;

}



.email-form-extended .form-row .email-input {

    flex: 1;

}



/* ========================

   CONFIRMATION SCREEN

   ======================== */



.confirmation-screen {

    background-color: #EBBE27;

    background-image: url('../images/bg-gold-g.png');

    background-size: 40%;

    background-repeat: no-repeat;

    background-position: bottom left;

    height: 100vh;

    position: relative;

    overflow: hidden;

}



.confirmation-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: calc(100vh - 80px);

    padding: 40px;

    text-align: center;

}



.confirmation-title {

    font-family: Poppins;

    font-size: 60px;

    font-weight: 700;

    color: #fff;

    margin-top: 15vh;

    margin-bottom: 10px;

}



.confirmation-thanks {

    font-family: var(--font-body);

    font-size: 20px;

    color: var(--text-black);

    margin-bottom: 20px;

}



.confirmation-text {

    font-family: var(--font-body);

    font-size: 20px;

    color: var(--text-black);

    margin-bottom: 30px;

    line-height: 1.6;

}



.confirmation-footer {

    margin-top: auto;

    padding-bottom: 20px;

    text-align: center;

}



.confirmation-discover {

    font-family: var(--font-body);

    font-size: 14px;

    color: var(--text-black);

    margin-bottom: 15px;

}



#btn-expertises-confirm {

    background-color: #fff !important;

}



/* ========================

   RESPONSIVE - Small screens (13" and below)

   ======================== */

@media (max-height: 800px) {

    .email-content {

        height: calc(100vh - 200px);

    }

    .email-footer {
        padding-bottom: 20px;
    }

    .email-form {

        margin-bottom: 0;

        padding-bottom: 0px !important;

    }

    .rgpd-text {
        font-size: 9px;
        margin: 10px auto 0;
        max-width: 500px;
    }

    .email-screen {
        overflow-y: auto;
    }

    .email-title {
        margin-top: 10vh;
        margin-bottom: 10px;
    }
}