/* --------------------------------------- */
/* ---------- MOBILE XS - 300px ---------- */
@media (min-width:1px) {
    main {
        background: #ffffff;
        overflow-x: hidden;
        max-width: 2400px;
        margin: 0 auto;
    }

    /* -- section "liens de proximité" -- */ @media screen, print {

        /* Conteneur section */
        #Section_generateur_proximite {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 20px;
            padding: 50px 30px 100px 30px;
            background: #ffffff;
        }

        /* Conteneur intermédiaire du visuel de section */
        .sgp--bloc-visuel {
            width: 100%;
            min-width: 250px;
            max-width: 500px;
            order: 1;
        }

        /* Visuel */
        #Visuel_generateur_proximite {
            border-radius: 10px;
            width: 100%;
            height: auto;
        }

        /*  Conteneur intermédiaire du texte de section */
        .sgp--bloc-txt {
            order: 2;
            max-width: 500px;
        }

    } /* -- FIN section "liens de proximité" -- */


    /* -- section "avantages bus" -- */ @media screen, print {

        /* Conteneur section */
        #Section_avantages_bus {
            background-color: var(--secondary);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            padding: 70px 30px 100px 30px;
        }

        /* Conteneur intermédiaire du titre/texte qui l'accompagne */
        .sab--ttr-grp {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* Titre de la section */
        .sab--sec-ttr {
            font-family: 'Teko', sans-serif;
            font-size: 34px;
            font-weight: 500;
            text-align: center;
            color: #ffffff;
            margin: 0;
            line-height: 1;
        }

        /* Sous-titre de la section */
        .sab--sec-subttr {
            font-family: 'Cabin', sans-serif;
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            color: #ffffff;
            margin: 0;
        }

        /* Conteneur intermédiaire des blocs d'arguments */
        .sab--arg-grp {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Bloc argument */
        .sab--arg-bloc {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            border-radius: 10px;
            padding: 18px 20px 22px 20px;
            box-shadow: 0px 2px 15px 1px rgba(0, 0, 0, 0.08);
            flex-grow: 1;
            max-width: 350px;
        }

        /* Visuel du bloc argument */
        .sab--arg-ico {
            width: 60px;
            height: auto;
            margin: 0 auto 5px auto;
        }

        /* Titre du bloc argument */
        .sab--arg-ttr {
            font-family: 'Cabin', sans-serif;
            font-size: 16px;
            font-weight: 600;
            text-align: center;
            color: var(--secondary);
            margin: 0 0 3px 0;
        }

        /* Phrases du bloc argument */
        .sab--arg-txt {
            font-family: 'Cabin', sans-serif;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            color: var(--noir-texte);
            margin: 0;
        }

    } /* -- FIN section "avantages bus" -- */


    /* -- section "repenser rôle bus" -- */ @media screen, print {

        /* Conteneur section */
        #Section_repenser_bus {
            background: var(--primary-light);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 40px;
            padding: 70px 30px 100px 30px;
            position: relative;
        }

        /* Grille décorative de fond */
        .srb--backgrid {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url("../svg/dashgrid06.svg");
            background-position: center;
            background-repeat: repeat;
            background-size: 1000px;
            opacity: 10%;
            z-index: 0;
            pointer-events: none;
        }

        /* Bloc contenant le titre et texte d'intro */
        .srb--ttr-bloc {
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 1;
        }

        /* Titre de la section */
        .srb--sec-ttr {
            font-family: 'Teko', sans-serif;
            font-size: 34px;
            font-weight: 500;
            text-align: center;
            color: #ffffff;
            margin: 0 0 5px 0;
            line-height: 1;
        }

        /* Texte d'intro */
        .srb--ttr-bloc p {
            text-align: center;
        }

        /* Contenu principal de la section */
        .srb--args-wrapper {
            display: flex;
            flex-direction: column;
            z-index: 1;
            flex-grow: 1;
            justify-content: center;
            align-items: center;
        }

        /* Animation lottie icones */
        #lottie-icones-map {
            display: none;
        }

        /* Conteneur des blocs d'arguments */
        .srb--arg-grp {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Bloc d'argument */
        .srb--arg-bloc {
            --offset:50px;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.12);
            padding: 18px 20px;
            flex-basis: 100%;
            max-width: 550px;
        }

        /* Titre de bloc argument */
        .srb--arg-ttr {
            font-family: 'Teko', sans-serif;
            font-size: 24px;
            font-weight: 500;
            text-align: start;
            color: var(--primary-grad2);
            margin: 0 0 5px 0;
            line-height: 1;
        }

        /* Paragraphe texte de bloc argument */
        .srb--arg-txt {
            font-family: 'Cabin', sans-serif;
            font-size: 14px;
            font-weight: 400;
            color: var(--noir-texte);
            margin: 0;
        }

    } /* -- FIN section "repenser rôle bus" -- */

    /* -- section "qui sommes nous" -- */ @media screen, print {

        /* Conteneur section */
        #Section_about_wotbus {
            background-color: var(--primary-extra-light);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 70px 30px 100px 30px;
        }

        /* Conteneur intermédiaire qui regroupe tous les éléments */
        .saw--content-bloc {
            background-color: #ffffff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            padding: 20px 20px 30px 20px;
            gap: 30px;
            max-width: 1000px;
            align-items: center;
        }

        /* Visuel (logo) du bloc */
        #Logo_about_wotbus {
            flex-basis: 100%;
            max-width: 150px;
        }

        /* Conteneur des textes du bloc */
        .saw--txt-grp {
            display: flex;
            flex-direction: column;
        }

        /* Titre du bloc */
        .saw--bloc-ttr {
            font-family: 'Teko', sans-serif;
            font-size: 32px;
            font-weight: 500;
            text-align: start;
            color: var(--primary);
            margin: 0 0 5px 0;
            line-height: 1;
        }

        /* Liste à puce du bloc */
        .saw--ul {
            padding-left: 20px;
            margin-bottom: 8px;
        }

        /* Éléments liste à puce */
        .saw--ul li {
            font-family: 'Cabin', sans-serif;
            font-size: 15px;
            font-weight: 400;
            color: var(--noir-texte);
            margin: 0;
        }

    } /* -- FIN section  "qui sommes nous" -- */

    

}

/* ----------------------------------------- */
/* ---------- TABLETTE MD - 768px ---------- */
@media (min-width:768px) {


    /* -- section "liens de proximité" -- */ @media screen, print {
    } /* -- FIN section "liens de proximité" -- */

    /* -- section "avantages bus" -- */ @media screen, print {

        /* Titre de la section */
        .sab--sec-ttr {
            font-size: 42px;
        }

        /* Sous-titre de la section */
        .sab--sec-subttr {
            font-size: 17px;
        }

        /* Conteneur intermédiaire des blocs d'arguments */
        .sab--arg-grp {
            flex-direction: row;
            gap: 30px;
        }

    } /* -- FIN section "avantages bus" -- */

    /* -- section "repenser rôle bus" -- */ @media screen, print {

        /* Titre de la section */
        .srb--sec-ttr {
            font-size: 42px;
        }

        /* Décalage bloc pair */
        .srb--arg-bloc:nth-child(even) {
            margin-left: var(--offset);
        }

        /* Décalage bloc impair */
        .srb--arg-bloc:nth-child(odd) {
            margin-right: var(--offset);
        }

    } /* -- FIN section "repenser rôle bus" -- */

    /* -- section "qui sommes nous" -- */ @media screen, print {

        /* Conteneur intermédiaire qui regroupe tous les éléments */
        .saw--content-bloc {
            flex-direction: row;
            padding: 30px 50px;
            gap: 50px;
        }

        /* Visuel (logo) du bloc */
        #Logo_about_wotbus {
            flex-basis: 33%;
            max-width: 175px;
        }

        /* Titre du bloc */
        .saw--bloc-ttr {
            font-size: 40px;
        }

    } /* -- FIN section  "qui sommes nous" -- */

}



/* -------------------------------------- */
/* ---------- ECRAN LG - 992px ---------- */
@media (min-width:992px) {

    /* -- section "liens de proximité" -- */ @media screen, print {

        /* Conteneur section */
        #Section_generateur_proximite {
            flex-direction: row;
            padding: 110px 30px 150px 30px;
            gap: 50px;
        }

        /* Conteneur intermédiaire du visuel de section */
        .sgp--bloc-visuel {
            order: 2;
            max-width: 400px;
        }

        /*  Conteneur intermédiaire du texte de section */
        .sgp--bloc-txt {
            order: 1;
            max-width: 600px;
        }


    } /* -- FIN section "liens de proximité" -- */

    /* -- section "avantages bus" -- */ @media screen, print {

        /* Conteneur section */
        #Section_avantages_bus {
            padding: 90px 30px 150px 30px;
            gap: 50px;
        }

        /* Titre de la section */
        .sab--sec-ttr {
            font-size: 48px;
        }

        /* Titre de la section */
        .sab--sec-subttr {
            font-size: 18px;
        }

        /* Conteneur intermédiaire des blocs d'arguments */
        .sab--arg-grp {
            gap: 50px;
        }

        /* Bloc argument */
        .sab--arg-bloc {
            padding: 22px 30px 26px 30px;
        }

        /* Visuel du bloc argument */
        .sab--arg-ico {
            width: 80px;
        }

        /* Titre du bloc argument */
        .sab--arg-ttr {
            font-size: 17px;
        }

        /* Phrases du bloc argument */
        .sab--arg-txt {
            font-size: 15px;
        }
        
    } /* -- FIN section "avantages bus" -- */

    /* -- section "repenser rôle bus" -- */ @media screen, print {

        /* Titre de la section */
        .srb--sec-ttr {
            font-size: 48px;
        }

        /* Paragraphe texte de bloc argument */
        .srb--arg-txt {
            font-size: 15px;
        }

    } /* -- FIN section "repenser rôle bus" -- */

    /* -- section "qui sommes nous" -- */ @media screen, print {

        /* Conteneur intermédiaire qui regroupe tous les éléments */
        .saw--content-bloc {
            padding: 36px 60px;
        }

        /* Visuel (logo) du bloc */
        #Logo_about_wotbus {
            max-width: 200px;
        }

        /* Titre du bloc */
        .saw--bloc-ttr {
            font-size: 50px;
        }

        /* Éléments liste à puce */
        .saw--ul li {
            font-size: 17px;
        }

    } /* -- FIN section  "qui sommes nous" -- */
}



/* --------------------------------------------- */
/* ---------- ECRAN MOYEN XL - 1200px ---------- */
@media (min-width:1200px) {

    /* -- section "liens de proximité" -- */ @media screen, print {

        /* Conteneur section */
        #Section_generateur_proximite {
            gap: 80px;
        }

        /* Conteneur intermédiaire du visuel de section */
        .sgp--bloc-visuel {
            max-width: 550px;
        }

    } /* -- FIN section "liens de proximité" -- */

    /* -- section "avantages bus" -- */ @media screen, print {
    } /* -- FIN section "avantages bus" -- */

    /* -- section "repenser rôle bus" -- */ @media screen, print {

        /* Conteneur section */
        #Section_repenser_bus {
            padding: 100px 30px 140px 30px;
        }

        /* Contenu principal de la section */
        .srb--args-wrapper {
            flex-direction: row;
        }

         /* Animation lottie icones */
         #lottie-icones-map {
            display: block;
            flex-grow: 1;
            flex-shrink: 1;
            max-width: 700px;
        }


    } /* -- FIN section "repenser rôle bus" -- */

    /* -- section "qui sommes nous" -- */ @media screen, print {

    } /* -- FIN section  "qui sommes nous" -- */

}



/* ---------------------------------------------- */
/* ---------- ECRAN LARGE XXL - 1400px ---------- */
@media (min-width:1400px) {
    
    /* -- section "liens de proximité" -- */ @media screen, print {

        /* Conteneur section */
        #Section_generateur_proximite {
            gap: 125px;
            padding: 120px 30px 170px 30px;
        }

    } /* -- FIN section "liens de proximité" -- */

    /* -- section "avantages bus" -- */ @media screen, print {
    } /* -- FIN section "avantages bus" -- */

    /* -- section "repenser rôle bus" -- */ @media screen, print {

        /* Contenu principal de la section */
        .srb--args-wrapper {
            gap: 60px;
        }

        /* Bloc d'argument */
        .srb--arg-bloc {
            --offset:100px;
        }

    } /* -- FIN section "repenser rôle bus" -- */

    
}

/* ---------------------------------------------- */
/* ---------- EXCEPTION XXXL - 1700px ---------- */
@media (min-width:1700px) {


    
}

/* ---------------------------------------------- */
/* ---------- EXCEPTION - 2400px ---------- */
@media (min-width:2400px) {

    
}