@charset "UTF-8";

@font-face {
    font-family: ABCSocialCondensedEdu-Book;
    src: url('./../fonts/ABCSocialCondensedEdu-Book.woff2');
}


body, html {
    margin: 0;
    padding: 0;
    height: 100%;   
    font-size: 40px; /* Taille de police par défaut */
    font-weight: normal;
    font-family: 'ABCSocialCondensedEdu-Book';
    background-color: #5a4c18;
}

.grid-container {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 0px; /* Ajustement de l'espace entre les sections */
    width: calc(100vw); /* Largeur de la fenêtre moins le padding */
    height: calc(100vh); /* Hauteur de la fenêtre moins le padding */
    padding: 10px; /* Ajout de padding autour de la grille */
    margin: 0; /* Suppression de la marge extérieure */
    overflow: hidden; /* Empêche le défilement */
    box-sizing: border-box; /* inclut la bordure et le padding dans la taille totale */
    z-index: 1; /* Assure que square est au-dessus */



}

.merged-sectionhaut {
    grid-row: span 3; /* Fait en sorte que la section prenne 2 lignes */
    grid-column: span 5; /* Fait en sorte que la section prenne 5 colonnes */
    display: flex;
    overflow: hidden; /* Cache le contenu débordant */
    width: auto;
    height: auto;
    padding: 0%;
    margin: 10px; 
    background-color: #5a4c18;
    gap: 20px;
}

.merged-sectionbas {
    grid-row: span 3; /* Fait en sorte que la section prenne 2 lignes */
    grid-column: span 5; /* Fait en sorte que la section prenne 5 colonnes */
    display: flex;
    overflow: hidden; /* Cache le contenu débordant */
    width: auto;
    height: auto;
    padding: 0%;
    margin: 10px; 
    background-color: #5a4c18;
    gap: 20px;
}

.grid-item {
    background-color: #ffffff; /* Fond blanc pour les sections */
    display: flex;
    margin: 10px; 
    padding: 0px; 
    height: auto;
    box-sizing: border-box; /* inclut la bordure et le padding dans la taille totale */
    border: 0px solid #000; /* Bordure pour chaque section */   
}
  

.merged-section1 {
    width: 50%; /* Chacune prend 50% de la largeur */
    height: 100%; /* Assurez-vous qu'elles prennent toute la hauteur */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: auto; /* Ajout de défilement horizontal */
    white-space: nowrap; /* Empêche le retour à la ligne des éléments enfants */
    margin: 0px; 
}

.question {
    display: flex;
    width: 50%; /* Chacune prend 50% de la largeur */
    height: 100%; /* Assurez-vous qu'elles prennent toute la hauteur */
    box-sizing: border-box; /* Inclut la bordure et le padding dans la taille totale */
    position: relative;
    overflow: hidden; /* Cache le texte qui dépasse */
    margin: 0px; 
    border: 0px solid #000000; /* Bordure pour chaque section */
}

#question-text {
    padding: 10px; 
    position: relative;
    top: -1px; /* Utilisez la position pour déplacer l'élément vers le haut */
}

.merged-section {
    padding: 0px; /* Suppression du remplissage */
    grid-row: span 3; /* Fait en sorte que la section prenne 2 lignes */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: auto; /* Ajout de défilement horizontal */
    white-space: nowrap; /* Empêche le retour à la ligne des éléments enfants */
    grid-column: span 5; /* Fait en sorte que la section prenne 5 colonnes */
    width: auto;
}

.merged-section1 img {
    width: 100%; /* Assurez-vous que l'image remplit entièrement la section */
    height: 100%; /* Assurez-vous que l'image remplit entièrement la section */
    object-fit: cover;
    object-position: center center; /* Centrez l'image horizontalement et verticalement */
}




.horizontal-scroll {
    overflow-y: hidden; /* Empêcher le défilement vertical */
    white-space: nowrap;
    display: grid;
    grid-template-columns: repeat(11, auto);
    gap: 20px;
    padding: 0px;
    width: 100vw;
    height: 100%;
    scroll-snap-type: x mandatory;
    background-color: #5a4c18;
}


.horizontal-scroll::-webkit-scrollbar {
    display: none; /* Masquer la barre de défilement sur Chrome, Safari et Opera */
}


.section {
    background-color: #fff; /* Fond blanc pour les sections */
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin: 0px; /* Suppression de la marge */
    padding: 0px; /* Ajout de remplissage */
    border: 0px solid #000; /* Bordure pour chaque section */
    box-sizing: border-box; /* inclut la bordure et le padding dans la taille totale */
    font-size: 16px; /* Taille de police par défaut */
    width: calc((100vw - 120px) / 5); /* Calcule la largeur en fonction de la fenêtre */
    height: auto;
    scroll-snap-align: center; /* Centre l'élément dans la vue du conteneur défilable horizontalement */

    
}


.answercontainera {
    display: flex;
    width: 50%; /* Chacune prend 50% de la largeur */
    height: 100%; /* Assurez-vous qu'elles prennent toute la hauteur */
    box-sizing: border-box; /* Inclut la bordure et le padding dans la taille totale */
    background-color: #ffffff; /* Fond blanc pour les sections */
    overflow: hidden; /* Cache le texte qui dépasse */
    overflow: hidden; /* Cache le texte qui dépasse */
    margin: 0px; 
    border: 0px solid #000000; /* Bordure pour chaque section */
    text-align: left !important;

}

.answercontainerb {
    display: flex;
    width: 50%; /* Chacune prend 50% de la largeur */
    height: 100%; /* Assurez-vous qu'elles prennent toute la hauteur */
    box-sizing: border-box; /* Inclut la bordure et le padding dans la taille totale */
    background-color: #ffffff; /* Fond blanc pour les sections */
    overflow: hidden; /* Cache le texte qui dépasse */
    overflow: hidden; /* Cache le texte qui dépasse */
    margin: 0px; 
    border: 0px solid #000000; /* Bordure pour chaque section */
    text-align: left !important;


}

.answercontainera:hover {
    background-color: #5a4c18;
}



.answercontainerb:hover {
    background-color: #5a4c18;

}


.merged-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.grilledudessus {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 0px; /* Ajustement de l'espace entre les sections */
    width: calc(100vw); /* Largeur de la fenêtre moins le padding */
    height: calc(100vh); /* Hauteur de la fenêtre moins le padding */
    padding: 10px; /* Ajout de padding autour de la grille */
    margin: 0; /* Suppression de la marge extérieure */
    overflow: hidden; /* Empêche le défilement */
    box-sizing: border-box; /* inclut la bordure et le padding dans la taille totale */
    z-index: 4; /* Assure que square est au-dessus */
    z-index:20;
    pointer-events: none;
    border: 0px solid #000; /* Bordure pour chaque section */

}


.containerspiralun {
    padding: 0px; /* Suppression du remplissage */
    grid-row: span 6; /* Fait en sorte que la section prenne 5 lignes */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Ajout de défilement si nécessaire */
    grid-column: span 3; /* Fait en sorte que la section prenne 3 colonnes */
    position: relative;
    overflow: hidden;
    z-index: 1000;
    border: 0px solid #000; /* Bordure pour chaque section */

}



.grid2-item2 {
    background-color: #ffffff00; /* Fond blanc pour les sections */
    display: flex;
    margin: 10px; 
    padding: 0px; 
    height: auto;
    box-sizing: border-box; /* inclut la bordure et le padding dans la taille totale */
    border: 0px solid #000; /* Bordure pour chaque section */
}


.containerspiral {
    padding: 0px; /* Suppression du remplissage */
    grid-row: span 6; /* Fait en sorte que la section prenne 5 lignes */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Ajout de défilement si nécessaire */
    grid-column: span 3; /* Fait en sorte que la section prenne 3 colonnes */
    position: relative;
    overflow: hidden;
    z-index: 1000;
    border: 0px solid #000; /* Bordure pour chaque section */

}

svg {
    width: 60%; /* Ajustez la largeur selon vos besoins */
    height: auto; /* Laissez la hauteur ajuster automatiquement en fonction de la largeur */
    overflow: visible;
    border: 0px solid #000; /* Bordure pour chaque section */
}

svg .path-anim {
    fill: none;
    stroke: #000000;
    stroke-width: 2px;
    stroke-dashoffset: 1;
    stroke-dasharray: 1;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
    position: fixed; /* L'élément est fixé par rapport à la fenêtre */
    mix-blend-mode: screen; /* Rend les couleurs plus claires */
    
}


.hidden{
    display: none;
}

#overlay.hidden{
    display: none;
}

#overlay {
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100svh;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 10;
}


#container-svg {
    position: fixed;
    top:0;
    left:0;
    display: flex; /* Utilisation de flexbox pour centrer */
    justify-content: center; /* Centrage horizontal */
    align-items: center; /* Centrage vertical */
    width: 100%; /* Le conteneur SVG prend toute la largeur */
    height: 100%; /* Le conteneur SVG prend toute la hauteur */
    overflow: visible;
    z-index:20;
    pointer-events: none;
}

#answer-1-text {
    color: black; /* Remplacez par la couleur souhaitée */
    padding: 10px; 
    position: relative;
    top: -1px; /* Utilisez la position pour déplacer l'élément vers le haut */
}

#answer-2-text {
    color: black; /* Remplacez par la couleur souhaitée */
    text-align: left !important;
    padding: 10px; 
    position: relative;
    top: -1px; /* Utilisez la position pour déplacer l'élément vers le haut */
}


#overlay {
    background-color: #795f00;
    padding: 20px; /* Ajout de padding autour de la grille */
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 20px;
    width: calc(100vw); /* Largeur de la fenêtre moins le padding */
    height: calc(100vh); /* Hauteur de la fenêtre moins le padding */
    margin: 0; /* Suppression de la marge extérieure */
    overflow: hidden; /* Empêche le défilement */
    box-sizing: border-box; /* inclut la bordure et le padding dans la taille totale */
}

#message-container {
    background-color: #ffffff00; /* Fond blanc pour les sections */
    display: flex;
    width: 100%; /* Chacune prend 50% de la largeur */
    height: 100%; /* Assurez-vous qu'elles prennent toute la hauteur */
    box-sizing: border-box; /* Inclut la bordure et le padding dans la taille totale */
    position: relative;
    margin: 0px; 
    border: 0px solid #000000; /* Bordure pour chaque section */
    grid-row: span 3; /* Fait en sorte que la section prenne 2 lignes */
    grid-column: span 3; /* Fait en sorte que la section prenne 5 colonnes */

}

#message-text {
    padding: 10px; 
    position: relative;
    top: -1px; /* Utilisez la position pour déplacer l'élément vers le haut */

}

.imagereponse1 {
    background-color: #ffffff00; /* Fond blanc pour les sections */
    display: flex;
    width: 100%; /* Chacune prend 50% de la largeur */
    height: 100%; /* Assurez-vous qu'elles prennent toute la hauteur */
    box-sizing: border-box; /* Inclut la bordure et le padding dans la taille totale */
    position: relative;
    margin: 0px; 
    border: 0px solid #000000; /* Bordure pour chaque section */
    grid-row: span 3; /* Fait en sorte que la section prenne 2 lignes */
    grid-column: span 2; /* Fait en sorte que la section prenne 5 colonnes */
}

.imagereponse2 {
    background-color: #ffffff00; /* Fond blanc pour les sections */
    display: flex;
    width: 100%; /* Chacune prend 50% de la largeur */
    height: 100%; /* Assurez-vous qu'elles prennent toute la hauteur */
    box-sizing: border-box; /* Inclut la bordure et le padding dans la taille totale */
    position: relative;
    margin: 0px; 
    border: 0px solid #000000; /* Bordure pour chaque section */
    grid-row: span 3; /* Fait en sorte que la section prenne 2 lignes */
    grid-column: span 2; /* Fait en sorte que la section prenne 5 colonnes */
}

.imagereponse3 {
    background-color: #ffffff00; /* Fond blanc pour les sections */
    display: flex;
    width: 100%; /* Chacune prend 50% de la largeur */
    height: 100%; /* Assurez-vous qu'elles prennent toute la hauteur */
    box-sizing: border-box; /* Inclut la bordure et le padding dans la taille totale */
    position: relative;
    margin: 0px; 
    border: 0px solid #000000; /* Bordure pour chaque section */
    grid-row: span 3; /* Fait en sorte que la section prenne 2 lignes */
    grid-column: span 2; /* Fait en sorte que la section prenne 5 colonnes */
    
}

.imagereponse {
    background-color: #ffffff00; /* Fond blanc pour les sections */
    display: flex;
    width: 100%; /* Chacune prend 50% de la largeur */
    height: 100%; /* Assurez-vous qu'elles prennent toute la hauteur */
    box-sizing: border-box; /* Inclut la bordure et le padding dans la taille totale */
    position: relative;
    margin: 0px; 
    border: 0px solid #000000; /* Bordure pour chaque section */
    grid-row: span 3; /* Fait en sorte que la section prenne 2 lignes */
    grid-column: span 2; /* Fait en sorte que la section prenne 5 colonnes */
}

.imagereponse img {
    max-width: 100%; /* Définit la largeur maximale de l'image à 100% de la largeur disponible */
    max-height: 100%; /* Définit la hauteur maximale de l'image à 100% de la hauteur disponible */
    width: 100%; /* Définit la largeur de l'image à 100% de son conteneur parent */
    height: auto; /* Permet à la hauteur de l'image de s'ajuster automatiquement pour maintenir les proportions */
    object-fit: cover;
    object-position: center center; /* Centrez l'image horizontalement et verticalement */

}

@media (max-width: 1200px) {
    #message-container {
        grid-column: span 5; /* Fait en sorte que la section prenne 6 colonnes */
    }
}

@media (max-width: 900px) {

    body, html {
        font-size: 23px; /* Taille de police par défaut */
    }
    #message-container {
        grid-column: span 6; /* Fait en sorte que la section prenne 6 colonnes */
    }

    .merged-sectionhaut {
        flex-direction: column; 
    }

    .question {
        width: 100%; /* Chacune prend 100% de la largeur */
        height: 100%; /* Assurez-vous qu'elles prennent 50% de la hauteur chacune */
    }

    .merged-section1 {
        display: none;
    }

    .merged-section {
        padding: 0px; /* Suppression du remplissage */
        grid-row: span 3; /* Fait en sorte que la section prenne 2 lignes */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-x: auto; /* Ajout de défilement horizontal */
        white-space: nowrap; /* Empêche le retour à la ligne des éléments enfants */
        grid-column: span 5; /* Fait en sorte que la section prenne 5 colonnes */
        width: auto;
    }

    .horizontal-scroll {
        overflow-y: hidden; /* Empêcher le défilement vertical */
        white-space: nowrap;
        display: grid;
        grid-template-columns: repeat(11, auto);
        gap: 20px;
        padding: 0px;
        width: 100vw;
        height: 100%;
        scroll-snap-type: x mandatory;
        background-color: #795f00;
    }

    .section {
        background-color: #fff; /* Fond blanc pour les sections */
        display: inline-block;
        align-items: center;
        justify-content: center;
        margin: 0px; /* Suppression de la marge */
        padding: 0px; /* Ajout de remplissage */
        border: 0px solid #000; /* Bordure pour chaque section */
        box-sizing: border-box; /* inclut la bordure et le padding dans la taille totale */
        font-size: 16px; /* Taille de police par défaut */
        width: calc((100vw - 80px) / 3); /* Calcule la largeur en fonction de la fenêtre */
        height: auto;
        scroll-snap-align: center; /* Centre l'élément dans la vue du conteneur défilable horizontalement */  
    }
    
    .containerspiral {
        grid-row: span 9; /* Fait en sorte que la section prenne 5 lignes */
        grid-column: span 6; /* Fait en sorte que la section prenne 3 colonnes */
    }

    .containerspiralun {
        display: none;
    }

    svg {
        width: 90%; /* Ajustez la largeur selon vos besoins */
        height: auto; /* Laissez la hauteur ajuster automatiquement en fonction de la largeur */
        overflow: visible;
        border: 0px solid #000; /* Bordure pour chaque section */
    }

    .imagereponse3 {
        display: none;
    }


}

@media (max-width: 700px) {
    .imagereponse {
        grid-row: span 3; /* Fait en sorte que la section prenne 2 lignes */
        grid-column: span 4; /* Fait en sorte que la section prenne 5 colonnes */
    }
    
    .imagereponse2 {
        display: none;
    }

    .imagereponse3 {
        display: none;
    }

}


#overlay.question-1-overlay{
    background-color: #64c864;
    
}

#overlay.question-2-overlay{
    background-color: #64c864;
    
}

#overlay.question-3-overlay{
    background-color: #64c864;
    
}

#overlay.question-4-overlay{
    background-color: #64c864; 
}

#overlay.question-5-overlay{
    background-color: #64c864; 
}

#overlay.question-6-overlay{
    background-color: #64c864; 
}

#overlay.question-1-overlay .overlay-false{
    background-color: #ff0000;
}

#overlay.question-2-overlay .overlay-false{
    background-color: #ff0000;
}

#overlay.question-3-overlay .overlay-false{
    background-color: #ff0000;
}

#overlay.question-4-overlay .overlay-false{
    background-color: #ff0000;
}

#overlay.question-5-overlay .overlay-false{
    background-color: #ff0000;
}

#overlay.question-6-overlay .overlay-false{
    background-color: #ff0000;
}