/* Start - Tools Responsive 
@media (max-width: 1200px)  {body {background-color: cadetblue;}}
@media (max-width: 992px)   {body {background-color: green;}}
@media (max-width: 768px)   {body {background-color: red;}}
/* End - Tools Responsive */

/* #00 Global */

@media (max-width: 992px) { 
    body > div.container {
        margin-left: 15px;
        margin-right: 15px;
    }
    section.sous-rubrique ul li.rubrique_section > span {
        padding: 20px 20px !important;
    }
    section.sous-rubrique ul li > span,
    body section.sous-rubrique ul li ul li > span {
        display: flex !important;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 25px !important;
    }
    section.sous-rubrique ul li > span div.lvl {
        position: static !important;
    }
    footer img#etsl_formation {
        display: none;
    }
    footer p{
        bottom: -115px; 
    }
    video{ 
        width: 100%;
        height: auto !important;
        object-fit: cover;
    }
    #desc_Banner {
        color: #6FC9AF;
        font-size: 30px;
        text-align: center;
        margin: 25px 25px 50px 25px !important;
        line-height: 50px;
    
    }
    footer{
        background-image: url(../../img/elements/Footer_phone.svg);
    }
    }


@media (max-width: 768px) { 
    body > div.container {
        margin-left: 15px;
        margin-right: 15px;
    }

    /* Liste de main.html */
    section.sous-rubrique ul li > span {
        flex-direction: column;
        gap: 14px;
    }
    section.sous-rubrique ul li > span div.lvl {
        position: static !important;
    }
    footer p{bottom: -115px; }

    video{ 
        width: 100%;
        height: auto !important;
        object-fit: cover;
    }
    
    #desc_Banner {
        color: #6FC9AF;
        font-size: 30px;
        text-align: center;
        margin: 0px 25px 50px 25px !important;
        line-height: 50px;
    
    }
    
}


/* ==========================
#00 Exercices
========================== */
@media (max-width: 992px) {
    #banner { position: absolute; bottom: 0px !important;}
    section.page-exercices #filtre fieldset.lvl { font-size: 12px; border: none; text-align: left; vertical-align: middle; display: flex; justify-content: center; align-items: center;}
    section.page-exercices #filtre fieldset.time { font-size: 12px; border: none; text-align: left; vertical-align: middle; display: flex; justify-content: space-between; align-items: center;}
    section.page-exercices #filtre fieldset.nbr { font-size: 12px; border: none; text-align: left; vertical-align: middle; display: flex; justify-content: space-between; align-items: center;}
    .lvl p { color: #6FC9AF !important; font-size: 45px !important;}
    .lvl button { font-size: 45px !important;}
    section.page-exercices #questions > header, section.page-exercices #questions > header > * {display: flex; flex-direction: column; align-content: center; align-items: center; justify-content: center;}
    table#mobileMoveBrowsers tr { overflow: auto; max-width: 100vw; padding: 0px 10px 0px 10px;}
    #fil li a { font-size: 25px !important;}
    #fil li { bottom: 85px !important;}
    img.imgforsize { width: 100%;}
}

/* ==========================
#00 Exercices
========================== */
@media (max-width: 768px) {
    #banner { position: absolute; bottom: 0px !important;}
    section.page-exercices #filtre fieldset.lvl { font-size: 12px; border: none; text-align: left; vertical-align: middle; display: flex; justify-content: center; align-items: center;}
    section.page-exercices #filtre fieldset.time { font-size: 12px; border: none; text-align: left; vertical-align: middle; display: flex; justify-content: space-between; align-items: center;}
    section.page-exercices #filtre fieldset.nbr { font-size: 12px; border: none; text-align: left; vertical-align: middle; display: flex; justify-content: space-between; align-items: center;}
    .lvl p { color: #6FC9AF !important; font-size: 45px !important;}
    .lvl button { font-size: 45px !important;}
    section.page-exercices #questions > header {display: flex !important; flex-direction: column; align-content: center; align-items: center; justify-content: center;}
    table#mobileMoveBrowsers tr { overflow: auto; max-width: 100vw; padding: 0px 10px 0px 10px;}
    #fil li a { font-size: 25px !important;}
    #fil li { bottom: 85px !important;}
    img.imgforsize { width: 100%;}
}

/* ==========================
#01 Associations
========================== */

@media (max-width: 768px) { 
    /* Transcrption - Code culturel et chiffre -  Zéros inutiles */
    body .question.mod_associations > .zoneQS div.choixcontent {
        width: 100%;
        padding: 0; 
    }
    body .question.mod_associations > .zoneQS div.options {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        gap: 1rem;
        margin: 1.5rem 0;
    }
    body .question.mod_associations > .zoneQS div.options div.option {
        margin: 0;
        width: 195px;
    }

    /* Association avec l'image */
    body .question.mod_associations.images > .zoneQS div.choixcontent {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
    }

    body .question.mod_associations.images > .zoneQS div.options {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
    }
}

/* ==========================
#02 Liste d'unités de mesure 
========================== */
@media (max-width: 768px) { 
    body .question.mod_briqueEnonce > .zoneQS div.choixcontent {
            width: 100%;
            padding: 0;
    }
    
    body .question.mod_briqueEnonce > .zoneQS div.options {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }   
}

/* ==========================
#03 Compléments et calculs
========================== */

/* -> Developpeur Web BackEnd à faire ce section : Ajouter BOUTON "Valider" <- */


/* ==========================
#04 Dominos
========================== */
@media (max-width: 768px) {
    body .question.mod_dominos .choixImg {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    } 
}

/* ==========================
#05 Fractions
========================== */

/* -> Developpeur Web BackEnd à faire ce section : Ajouter BOUTON "Valider" <- */

/* ==========================
#06 FractionsFormes (schéma cliquable)
========================== */
@media (max-width: 768px) {
    body section.page-exercices #questions article.mod_fractionsformes div div.forme div.carre, 
    body section.page-exercices #questions article.mod_fractionsformes div div.forme div.rectangle {
        width: 25px;
        height: 25px;
        margin: 0 2.5px;
    }
    body section.page-exercices #questions article.mod_fractionsformes div div.forme {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30px !important;
    }

    body section.page-exercices #questions article.mod_fractionsformes div div.forme div.carre {
        margin: 2.5px;
    }
}

/* ==========================
#07 Geometrie
========================== */

@media (max-width: 768px) { 
    /* Géométrie - Symétrie axiale */ 
    body .zoneQS {
        max-width: 100%;
    }
    body .grid {
        width: 100% !important;
        height: 100%;
    }
    /* === Demande par Olivier du 9 aout 2024 - Désactiver cet CSS pour montrer l'équipe aux formateurs ===
    body .grid > svg {
        display: none;
    }*/
    body .grid.axe45::after,
    body .grid.axe-45::after {
        width: calc(100% + 200px);
    }
    body .grid div.row div span em {
        font-size: 16px;
    }
    body .zoneQS .row {
        height: calc(100% / 21);
    }
    body .zoneQS .probleme {
        font-size: 14px;
    }
    body .zoneQS #valid_0 {
        font-size: 16px;
        padding: 8px 16px;
    }
    /*body .grid.axeh::after, body .grid.axev::after, body .grid.axe45::after, body .grid.axe-45::after {
        display: none;
    }*/ 
    body .grid div.row div span em {
        font-size: 1.5rem;
    }
}

/* -> Developpeur Web BackEnd à faire ce section : Régler le problème de géographie en mobile <- */

/* ==========================
#08 Graphiques
========================== */

/* Tests psychotechniques - Graphique - Info: Custom dans JS : www/mods/graphiques/run.js */
body #zone_questions div.zoneQS {
    border: 0 none;
    box-shadow: none;
}

@media (max-width: 768px) {   
    /* Tests psychotechniques - Graphique - Info: Custom dans JS : www/mods/graphiques/run.js */
    body #zone_questions div.zoneQS {
        border: 0 none;
        box-shadow: none;
    }
}

/* Developpeur Web BackEnd à faire ce section : Ajouter un bouton "Valider" + Un petit correction -> Je laisse un développeur web back-end régle un petit problème avec SVG */

/* ==========================
#09 Calcul de pourcentage (schéma grille)
========================== */

/* Ex: Pourcentage - Tableau pourcentage */

body section.page-exercices #questions article.mod_grillepourcentages div div.forme {
    margin: 0 auto;
}

@media (max-width: 992px) { 
    body section.page-exercices #questions article.mod_grillepourcentages div div.forme {
        width: 100%;
        margin: 0;
    }
}

@media (max-width: 768px) { 
    body section.page-exercices #questions article.mod_grillepourcentages div.zoneQS {
        padding: 38px 15px;
    }

    body section.page-exercices #questions article.mod_grillepourcentages div div.forme div.carre {
        width: 15px;
        height: 15px;
    }

    body section.page-exercices #questions article.mod_grillepourcentages div div.forme div.unselected {
        border-color: #999;
    }
}

/* ==========================
#10 Machines
========================== */

@media (max-width: 768px) {   

    /* Tests psychotechniques - Mécanique */
    body .question.mod_machines > .zoneQS > div.machine > section > article.itineraire {
        background-color: red !important;
    }

    body .question.mod_machines > .zoneQS {
        display: inline-block;
        height: 100% !important;
    }

    body .question.mod_machines > .zoneQS > div.machine,
    body .question.mod_machines > .zoneQS > div.machine > section,
    body .question.mod_machines > .zoneQS > div.machine > section > article.itineraire {
        display: block !important;
        width: 100% !important;
        margin:0 !important;
    }

    body .question.mod_machines > .zoneQS > div.machine > section.grapin-2 > article.itineraire {
        margin: 0 0 30px !important;
    }

    body .question.mod_machines > .zoneQS > div.machine > section.grapin-1 > article.fleches-grapin,
    body .question.mod_machines > .zoneQS > div.machine > section.grapin-2 > article.fleches-grapin,
    body .question.mod_machines > .zoneQS > div.machine > section.sous-marin > article.fleches-sous-marin,
    body .question.mod_machines > .zoneQS > div.machine > section.labyrinthe-programme > article.labyrinthe-buttons,  
    body .question.mod_machines > .zoneQS > div.machine > section.tapis-roulant > article.tapis-fleches {
        float: none;
        margin-top: 20px;
    }

    body .question.mod_machines > .zoneQS > div.machine > section.grapin-1 > article.fleches-grapin,
    body .question.mod_machines > .zoneQS > div.machine > section.grapin-2 > article.fleches-grapin {
        position: relative;
        margin-top: 20px;
    }

    body .question.mod_machines > .zoneQS > div.machine > section.sous-marin > article.sous-marin-buttons,
    body .question.mod_machines > .zoneQS > div.machine > section.grapin-1 > article.grapin-buttons,
    body .question.mod_machines > .zoneQS > div.machine > section.grapin-2 > article.grapin-buttons,
    body .question.mod_machines > .zoneQS > div.machine > section.tapis-roulant > article.tapis-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        float: none;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body .question.mod_machines > .zoneQS > div.machine > section.grapin-1 > article.fleches-grapin > button.open, 
    body .question.mod_machines > .zoneQS > div.machine > section.grapin-1 > article.fleches-grapin > button.close,
    body .question.mod_machines > .zoneQS > div.machine > section.grapin-2 > article.fleches-grapin > button.open,
    body .question.mod_machines > .zoneQS > div.machine > section.grapin-2 > article.fleches-grapin > button.close{
        position: absolute;
        
    }
      
    body .question.mod_machines > .zoneQS > div.machine > section.grapin-1 > article.fleches-grapin > button.open,
    body .question.mod_machines > .zoneQS > div.machine > section.grapin-1 > article.fleches-grapin > button.close,
    body .question.mod_machines > .zoneQS > div.machine > section.grapin-2 > article.fleches-grapin > button.open,
    body .question.mod_machines > .zoneQS > div.machine > section.grapin-2 > article.fleches-grapin > button.close{
        top: 0;
    }

    body .question.mod_machines > .zoneQS > div.machine > section.grapin-1 > article.fleches-grapin > button.open,
    body .question.mod_machines > .zoneQS > div.machine > section.grapin-2 > article.fleches-grapin > button.open {
        right: -100px;
    }

    body .question.mod_machines > .zoneQS > div.machine > section.grapin-1 > article.fleches-grapin > button.close,
    body .question.mod_machines > .zoneQS > div.machine > section.grapin-2 > article.fleches-grapin > button.close{
        right: -155px;
    }

    body .question.mod_machines > .zoneQS > div.machine > section.mission-depart {
        margin-bottom: 20px !important;
    }

    body .question.mod_machines > .zoneQS > div.machine > section.tapis-roulant > article.tapis-roulant,
    body .question.mod_machines > .zoneQS > div.machine > section.sous-marin > section.sous-marin-ocean {
        transform: scale(0.80, 1);
    }

    body .question.mod_machines > .zoneQS > div.machine > section.sous-marin > section.sous-marin-ocean {
        margin-left: -45px;
    }

    body .question.mod_machines > .zoneQS > div.machine > section.labyrinthe-programme > article.labyrinthe-matrice {
        margin: 20px 0 ;
        transform: scale(0.95, 1);
    }

    /* Mesure et calcul */
    body .question.mod_machines > .zoneQS > div.machine > section.action-chrono {
        width: 50px !important;
        float: left;
        margin-top: 20px !important;
        margin-right: 20px !important;
    }

    /* Quelques exercices dans la mesure et calcul sont buggé, à voir avec John -> un développeur web back-end réglera le problème */

    /* Ecouter et écrire : Blanc donc il y a rien */
    
}

/* ==========================
#11 Memory
========================== */

@media (max-width: 768px) {   
    /* Tests psychotechniques - Cartes de mémoire */
    body .question.mod_memory > .zoneQS > .flip-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        width: 100%;
        margin: 40px 0 20px 0;
    }

    body .question.mod_memory > .zoneQS > .flip-container .card {
        grid-template-columns: repeat(3, 1fr);
        margin: 0;
        float: none;
    }
}

@media (max-width: 675px) {
    /* Tests psychotechniques- Cartes de mémoire */
    body .question.mod_memory > .zoneQS > .flip-container > *:nth-child(odd) {
        justify-self: end;
    }

    body .question.mod_memory > .zoneQS > .flip-container {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================
 #12 Addition et Soustraction de pourcentage
========================== */

/* -> Developpeur Web BackEnd à faire ce section : Ajouter BOUTON "Valider" <- */

/* ==========================
#13 Plan 3D
========================== */

/* -> Developpeur Web BackEnd à faire ce section <- */

/* ==========================
#14 Programmes
========================== */

/* -> Developpeur Web BackEnd à faire ce section <- */

/* ==========================
#15 Questions à choix multiples (textes ou images)
========================== */

/* -> Developpeur Web BackEnd à faire ce section : Ajouter BOUTON "Valider" <- */

/* ==========================
#16 Question ouverte
========================== */

/* -> Developpeur Web BackEnd à faire ce section : Ajouter BOUTON "Valider" <- */

/* ==========================
#17 Questions avec image ou son
========================== */

/* -> Developpeur Web BackEnd à faire ce section : Ajouter BOUTON "Valider" <- */

/* ==========================
#18 Visualisation 3D
========================== */

/* -> Developpeur Web BackEnd à faire ce section <- */