/* FF - BRYGADA 1918 */
@font-face {
    font-family: 'Brygada 1918';
    src: url("../fonts/Brygada1918-VariableFontwght-c90177223e0ebf354735e1bd9123f756.woff2") format('woff2'),
        url("../fonts/Brygada1918-VariableFontwght-e6ce59b13bc28e46cd4cf9224768e9da.woff") format('woff');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}
/* FF - OPEN SANS */
@font-face {
    font-family: 'Open Sans';
    src: url("../fonts/OpenSans-Regular-f42b430b68ecfab7fc99e67f0965d153.woff2") format('woff2'),
        url("../fonts/OpenSans-Regular-f0b82d5ee788d80e96a8ca5f5e09e0bb.woff") format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* FF - MONTSERRAT */
@font-face {
    font-family: 'Montserrat';
    src: url("../fonts/Montserrat-Regular-d2bb5179b57e9422b84b0002d7d78195.woff2") format('woff2'),
        url("../fonts/Montserrat-Regular-ad4a585bda8bf14623569a42e1e4c49e.woff") format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* FF - LOBSTER */
@font-face {
    font-family: 'Lobster';
    src: url("../fonts/Lobster-Regular-65e37724e4266394d851ad272990277c.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* FF - ROBOTO */
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-Thin-c1b89606584e781079cf90e492dbd1cb.ttf") format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-ThinItalic-7b5911103e5cd7bf8273d4de60c91982.ttf") format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-ExtraLight-5931127602568be418e14ddb4bb86a5c.ttf") format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-ExtraLightItalic-d91da07eff5c7ebccc527da906a4bdda.ttf") format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-Light-8eea736a3ca943ed0d71f153baa5d02b.ttf") format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-LightItalic-475e004ff22589807c344ccdf84763df.ttf") format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-Regular-1d440ca633514ca2ae6008300e99fe8d.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-Italic-a2e874fda025ec5bdd98d112a0943375.ttf") format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-Medium-cb5f9339a144ccea8f44d9cd7ec672b0.ttf") format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-MediumItalic-b636a48020ac44c1f03a8b5b19ec643f.ttf") format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-SemiBold-91c8049284b1aae1f6d551ff34835404.ttf") format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-SemiBoldItalic-2c5310bcf4d65d960ed79e5814e83b6a.ttf") format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-Bold-e27b9b7aa3056e6cb1cfe7b990774c32.ttf") format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-BoldItalic-59dae4b7e21e8e7613067488724d96ef.ttf") format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-ExtraBold-147a0aa8d3a6c7c9243b3aa707be2f02.ttf") format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-ExtraBoldItalic-7068ce8c4fcb877a9bb02b590950a0ff.ttf") format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-Black-90c8568278ed8403d8297993bb626053.ttf") format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-BlackItalic-305a2ebc0cfb2a7bf8c221135facc79b.ttf") format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --white: #fff;
    --dark-white: #EFEFEF80;
    --grey: #666666;
    --light-grey: #999999;
    --blue: #094DA5;
    --green: #00A652;
    --red: #E4222A;

    --ff-brygada: 'Brygada 1918';
    --ff-opensans: 'Open Sans';
    --ff-montserrat: 'Montserrat';
    --ff-roboto: 'Roboto';
    --ff-lobster: 'Lobster';
}

html {
    scroll-behavior: smooth;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%; /* Safari/Chrome, other WebKit */
    -moz-text-size-adjust: 100%; /* Firefox, other Gecko */
    text-size-adjust: 100%; /* Opera/IE 8+ */
    text-rendering: optimizelegibility;
}

body {
    box-sizing: border-box;
    margin: 0;
    background-color: var(--white);
    font-family: var(--ff-roboto);
}

main {
    max-width: 120rem; /* 1920px */
    min-height: 100vh;
    margin: 0 auto;
}

h1 {
    font-family: var(--ff-lobster);
    color: var(--blue);
    font-size: 2.25rem; /* 36px */
    line-height: 1em;
    font-weight: 400;
    margin-block-start: 0;
}

p {
    color: var(--grey);
    line-height: 1em;
}

picture img {
    display: block;
}

/* CUSTOM CLASSES */

.mobile-only {
    display: block;
}

.desktop-only {
    display: none;
}

.img-responsive {
    display: block;
    width: 100%;
    height: auto;
}

.hidden {
    display: none !important;
}

.hidden-visibility {
    visibility: hidden;
}

/* Components */

.cta {
    display: block;
    font-family: var(--ff-lobster);
    font-size: 2rem;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
    color: var(--white);
    background-color: var(--blue);
    border-radius: 100px;
    padding: 0.75rem 3.75rem;
    cursor: pointer;
}
.cta.cta-s {
    width: fit-content;
}

/* Header */

.campaign--logo--wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    width: 30%;
    max-width: 16.125rem; /* 258px */
}

/* Page - Languages */

.languages {
    background-image: none;
}

.languages-select--wrapper {
    width: 80%;
    max-width: 20rem;
    margin: 0 auto;
    padding: 2rem 0;
    text-align: center;
}

.languages-select--title {
    font-family: var(--ff-lobster);
    color: var(--blue);
    font-size: 2.25rem; /* 36px */
    font-weight: 400;
}

.component-accordion__languages {
    font-family: var(--ff-roboto);
    color: var(--blue);
    font-size: 1.125rem;
    line-height: 1em;

    padding: 1.375rem;
    border: 1px solid var(--blue);
    border-radius: 0.375rem;
}

.component-accordion__languages--title {
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    cursor: pointer;
}

.component-accordion__languages--title .languages--items {
    flex: 1;
}

.component-accordion__languages--content {
    --content-h: 15rem;

    max-height: var(--content-h);
    overflow-y: scroll;
}
.component-accordion__languages--content.hidden {
    --content-h: 0;
}
.component-accordion__languages--title svg {
    transition: transform ease 0.3s;
}
.component-accordion__languages--title svg.rotate-180 {
    transform: rotate(180deg);
}

.component-accordion__languages--content:has(::-webkit-scrollbar-thumb) {
    padding-right: 1rem;
}
.component-accordion__languages--content::-webkit-scrollbar-thumb {
    background: var(--blue);
    border-radius: 2rem;
}
.component-accordion__languages--content::-webkit-scrollbar {
    width: 0.25rem; /* 4px */
}
.component-accordion__languages--content::-webkit-scrollbar-track {
    position: relative;
    opacity: 0;
}

.languages--items {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.component-accordion__languages--content .languages--item {
    margin-top: 1.375rem;
}

.languages--item a,
.language--link {
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    color: var(--blue);
    text-decoration: none;
}

.languages--item--flag {
    width: 2.25rem;
    height: 2.25rem;
}

.languages--item--label {
    flex: 1;
    text-align: left;
}

/* Page - Start */

.columns {
    display: flex;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: center;
}

.column {
    position: relative;
}

.column--content {
    padding: 1.75rem 4rem; /* 28px 64px */
}

/* Page - Tutorial */

.game-tutorial--steps {
    color: var(--grey);
    font-size: 1.2rem;
    line-height: 1.5em;
    font-weight: 700;
}

.game-tutorial--image-secondary--wrapper {
    border-top: 3px solid var(--blue);
}

/* Page - Quiz */

.game-quiz--background {
    position: relative;
    top: unset;
    left: unset;
    right: unset;
    margin: 0 auto;
    transform: unset;
    background-size: cover;
    background-position: center
}

.product-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: unset;
    position: absolute;
    height: auto;
    left: 0;
    top: -22vh;
}

.game-quiz--background .game-quiz--product--wrapper {
    top: 75%;
}

.game-quiz--background .game-quiz--product--wrapper.mobile-only{
    top: 79%;
    width: 75%;
}



.game-quiz--score {
    color: var(--green);
    font-weight: 700;
    text-transform: uppercase;
}

.game-quiz--answers {
    list-style: none;
    padding-left: 0;
}

.game-quiz--answer {
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;

    border: 2px solid var(--blue);
    border-radius: 1.5rem;

    font-family: var(--ff-lobster);
    font-size: 1.5rem;
    line-height: 1em;
    color: var(--blue);

    padding: 0.625rem 0.875rem;
    margin-bottom: 0.5rem;
}
.game-quiz--answer:hover {
    cursor: pointer;
}

.game-quiz--checkmark {
    width: 1.5rem;
    height: 1.5rem;

    border: 2px solid var(--blue);
    border-radius: 100%;

    background-position: center center;
    background-size: auto 50%;
    background-repeat: no-repeat;
}

.game-quiz--answer.wrong {
    border-color: var(--red);
    pointer-events: none;
}
.game-quiz--answer.wrong .game-quiz--checkmark {
    border-color: var(--red);
    background-color: var(--red);
    background-image: url("../img/VECTOR-cross-white-deee5518f18ef134aca71bb40da82b21.svg");
}

.game-quiz--answer.success {
    border-color: var(--green);
    pointer-events: none;
}
.game-quiz--answer.success .game-quiz--checkmark {
    border-color: var(--green);
    background-color: var(--green);
    background-image: url("../img/VECTOR-checkmark-white-bf6d50727d71598987ed5932a0a97130.svg");
}

.game-quiz--answer.passive {
    opacity: 50%;
    pointer-events: none;
}

.game-quiz .column.column-right {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.game-quiz--product--wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--white);
    padding: 2rem;
    border-radius: 1.5rem;
}

.game-quiz--product--title {
    color: var(--green);
    font-family: var(--ff-lobster);
    font-size: 2rem;
    /*line-height: 2em;*/
    margin-block-start: 0;
    margin-block-end: 0;
    text-align: center;
}

.game-quiz--product--recipe {
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

.game-quiz--product--recipe--image {
    aspect-ratio: 1;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.game-quiz--product--text {
    color: var(--blue);
}

/* Page - Form */

.finish .banner {
    padding-top: min(30%, 16.125rem);
    width: 80%;
    max-width: 46.875rem;
    margin: 0 auto;
}

.finish--subtitle {
    color: var(--blue);
    font-size: 1.5rem;
    line-height: 1em;
}

.finish--description {
    color: var(--blue);
    text-align: justify;
}

.form--wrapper {
    width: 80%;
    max-width: 46.875rem; /* 750px */
    margin: 0 auto;
}

.form--row:not(:has(.form--row)) {
    margin-bottom: 1.75rem;
}

.form--row input, .form--row select {
    box-sizing: border-box;
    width: 100%;
    border: 2px solid var(--blue);
    border-radius: 1.5rem;
    padding: 1.5rem;
    color: var(--blue);
    font-size: 1.5rem;
    background-color: var(--dark-white);
}
.form--row select {
    color: var(--grey);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* On ajoute une flèche personnalisée (SVG pour la netteté) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
    background-repeat: no-repeat;

    /* POSITION ET TAILLE DE LA FLÈCHE */
    background-position: right 1rem center; /* Ajuste la position à droite */
    background-size: 2rem;                 /* ICI : Modifie la taille de ta flèche ! */

    /* Un peu de padding à droite pour que le texte ne chevauche pas la flèche */
    padding-right: 3rem;
}
.form--row input::placeholder,
.form--row select::placeholder{
    color: var(--grey);
    font-size: 1.5rem;
}

.form--row:has(input[type="file"]) {
    box-sizing: border-box;
    width: 100%;
    border: 2px solid var(--blue);
    border-radius: 1.5rem;
    padding: 1.5rem;
    color: var(--blue);
    font-size: 1.5rem;
    background-color: var(--dark-white);
}
.form--row input[type="file"] {
    border: none;
    border-radius: 0;
    background-color: transparent;
    padding: 0 0 1.5rem 0;
}

.form--column:has(.form--checkbox--row) {
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.form--checkbox--row {
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}
.form--checkbox--row input,
.form--checkbox--row select{
    width: auto;
}
.form--checkbox--column label {
    color: var(--grey);
    font-size: 1.5rem;
}

.form--legals {
    font-size: 0.75rem;
    color: var(--light-grey);
    text-align: justify;
}

/* Page - Thanks */

.thanks .banner {
    padding-top: 1.5rem;
    width: 80%;
    max-width: 46.875rem;
    margin: 0 auto;
}

.thanks--subtitle {
    color: var(--blue);
    font-size: 1.5rem;
}

.thanks--text {
    color: var(--blue);
}

.thanks--text-secondary {
    font-weight: 700;
}

/* Page - Already played */

.already-played .columns {
    width: 100%;
}

.already-played--subtitle {
    font-size: 1.5rem;
    line-height: 1em;
    font-weight: 700;
    color: var(--red);
}

.game-quiz--product--image{
    height: auto;
    display: block;
    position: relative;
    max-width: 180px;
}

@media screen and (min-width: 64rem) /* 1024px */ {

    /*main:has(.columns) {
        display: flex;
        justify-self: flex-start;
    }*/

    h1 {
        font-size: min(6.49vh, 4.23vw, 4rem); /* 64px */
    }

    p {
        font-size: min(2.84vh, 1.81vw, 1.75rem); /* 28px */
    }

    /* CUSTOM CLASSES */

    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: block;
    }

    .game-quiz--product--image{
        position: absolute;
        height: 15rem;
        width: auto;
        left: -12.2rem;
        top: -1rem;
        max-width: unset;
    }

    .question-3 .game-quiz--product--image{
        left: -13.2rem;
        height: 13.5rem;
        top: 1rem;
    }

    .question-4 .game-quiz--product--image {
        left: -13.2rem;
        height: 15rem;
        top: 0rem;
    }

    /* Components */

    .cta {
        font-size: min(3.175vw, 3rem);
        padding: 1.275rem min(2.93vw, 5.5rem);
        width: 20vw;
        margin: 0 auto;
    }

    /* Header */

    .campaign--logo--wrapper {
        width: min(18%, 26vh);
    }

    /* Displaying */

    .columns {
        -ms-flex-direction: row;
        flex-direction: row;
        align-items: stretch;
        /*width: 100rem;
        min-height: 35rem;
        max-width: 100rem;*/
    }

    .columns .column {
        flex: 1;
    }

    .columns .column.column-left {
        flex: 4;
    }

    .columns .column.column-right {
        flex: 6;

        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .column--content {
        padding: 4.875rem min(5.5555vw, 5.25rem); /* 78px 84px */
    }

    .column--content strong{
        line-height: 1.6rem;
    }

    /* Page - Languages */

    .languages {
        background-image: var(--main-image);
        background-size: 125%;
        background-position: left center;
        background-repeat: no-repeat;
    }

    .languages-select--wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--white);
        padding: 1.5rem;
        border-radius: 1rem;
    }

    .component-accordion__languages--content{
        max-height: 20vh;
        width: 83%;
    }

    .float{
        float: right;
    }

    /* Page - Tutorial */

    .game-tutorial--steps {
        font-size: min(1.85vw, 1.4rem);
        /*line-height: 1.7em;*/
    }

    .game-tutorial--step {
        margin-bottom: 1.5rem;
    }

    .game-tutorial--image-secondary--wrapper {
        border-top: 15px solid var(--blue);
    }

    /* Page - Quiz */

    .game-quiz--answer {
        font-size: min(3.175vw, 3rem);
        margin-bottom: 1rem;
    }

    .game-quiz--checkmark {
        width: 2.5625rem;
        height: 2.5625rem;
    }

    .game-quiz--product--wrapper {
        padding: 0.75rem 2rem 1.125rem;
    }

    .game-quiz--product--title {
        font-size: 2.625rem;
    }

    .game-quiz--product--recipe--image {
        width: 7.375rem;
        height: 7.375rem;
    }

    .game-quiz--product--text {
        font-size: 1.125rem;
    }

    .game-quiz--cta--next,
    .game-quiz--cta--restart {
        position: absolute;
        right: 3.5rem;
        bottom: 4.75rem;
    }

    /* Page - Form */

    .banner {
        position: relative;
        height: 34.52vw;
        max-height: 32.625rem; /* 522px */
        background-image: url("../img/main-image-65388d9287aaf171cf4c03efc76501be.webp");
        background-position: left center;
        background-size: min(135vw, 160rem);
        background-repeat: no-repeat;
    }

    .finish .banner {
        padding-top: 0;
        width: 100%;
        max-width: 100%;
    }

    .banner--title {
        position: absolute;
        top: 50%;
        left: 8.25rem;
        transform: translateY(-50%);
        color: var(--white);
    }

    .form--wrapper {
        width: 100%;
        margin: 0 auto;
    }

    .finish--subtitle {
        font-size: 2.625rem;
    }

    .form--columns {
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        gap: 1rem;
    }

    .form--column {
        flex: 1;
    }

    .form--row input,
    .form--row select {
        padding: 1rem 1.5rem;
    }

    .form--legals {
        font-size: 0.75rem;
    }

    /* Page - Thanks */

    .thanks .banner {
        padding-top: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Page - Already played */

    .already-played--subtitle {
        font-size: min(2.78vw, 2.625rem);
    }
}

header {
    background-color: var(--blue);
    color: white;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

header li {
    list-style: none;
}

header a {
    color: white;
    text-decoration: none;
    font-family: sans-serif;
    font-weight: 500;
    transition: opacity 0.3s;
}

header a:hover {
    opacity: 0.7;
}

@media (min-width: 768px) {
    header {
        flex-direction: row; /* Aligne les liens horizontalement sur grand écran */
        justify-content: center; /* Centre le groupe de liens au milieu de la page */
    }
}