@media (min-device-aspect-ratio: 16/11) and (max-device-aspect-ratio: 16/10) { /*MACBOOK*/

}


@media (min-width: 1025px) { /* Desktop */


}

/* Tablette */
@media (min-width: 768px) and (max-width: 1024px) {

    #qui { padding: 0 8em 0 8em; }
    #orga { padding: 0 2em 0 8em; }

    #chiffrescle .chiffre-title { width: 80%; }
    #chiffrescle .figures { padding: 2em 4em; }
    #chiffrescle .figures .figure-row-name { margin: 0 .5em; }
    #chiffrescle .figures .figure .chiffre { font-size: 6em; }
    #chiffrescle .figures .figure .label { padding: 0 1em; }

    #mission { padding-bottom: 3em; }
    #mission .foreground { height: initial; min-width: unset; width: 60%; }
    #mission .foreground #mission-kps .mission-kps-arrow { top: -15%; width: 1.65em; }
    #mission .foreground .mission-kp { height: 12em; }
    #mission .foreground .mission-kp p { width: 40%; padding-right: unset; }
    #mission .foreground .mission-kp .icon-kps { max-width: 10em; max-height: 9em; }
    #mission .background { height: 75em; padding-top: 0; left: initial; overflow: visible; }


    #transfo {
      padding: 0 10em;
    }

    #transfo .border-container { gap: 1em; padding: 0 2em 2em; }

    #transfo .sticky-header { padding-bottom: 20em; }
    #transfo .sticky-header.is-sticky { top: 100px; }


    #transfo .transfo-row .num { font-size: 8em; }

    #orga article .texte { padding-left: 2em; }


    #sites { padding: 8em 12em 0 8em; }
    #sites .mapmonde {
        height: 65em;
        margin-left: -10em;
    }

    #contactForm { padding: 4em 2em; }

    #partners { padding: 2em 6em 4em; }
    #partners .logos {
        justify-content: flex-start;
        flex-wrap: wrap;
        column-gap: 6em;
        row-gap: 2em;
    }

}

/* Mobile */
@media (max-width: 767px) {
    #splash{ padding: 1em; }
    #splash div{ aspect-ratio: 1/1; border-radius: 2em; background-position: calc(100% + 2.5em) center; }
    .mainBlock .border-section { padding: 0 0 2em 0; border: none; }
    .mainBlock{ padding: 0 1em; }
    .mainBlock section{ border: none; min-height: 25em; }

    #qui { padding: 0 1em; }
    #qui-content { gap: 1em; }
    #qui p { width: auto; }
    #qui p.intro { width: auto; margin-bottom: 0; }
    #qui h2, #orga h2 { padding: 0; margin: 0 0 1em 0; }
    .en #qui h2 .texte{ /*font-size: 0.8em;*/ }
    .en #qui h2 .texte br{ display: none; }



    #chiffrescle { padding: 0; /*font-size: 0.66em;*/ }
    .chiffre-title { width: auto; padding: 1em 1.5em; }
    #chiffrescle .logos { padding: 0 0 2em 0; gap:1.5em; }
    #chiffrescle .logos span img { height: 4.25em; }
    #chiffrescle .figures { padding: 1em 1em 2em; justify-content: space-around; row-gap: 1em; }
    #chiffrescle .figures .figure-row-name { margin: 0 7em; }
    #chiffrescle .figures .figure { width: 50%; }
    #chiffrescle .figures .figure:last-child { flex: 1 1 0; }
    #chiffrescle .figures .figure .chiffre { font-size: 3em; font-weight: 800; }
    #chiffrescle .figures .figure .label { width: 10em; padding: 0; }


    /*#mission { font-size: 0.75em; }*/
    #mission .background { height:35em; padding-top: 0; left: initial; gap: 3em; }
    #mission .background span { width: 100%; }
    #mission .background .left { margin-left: -20%; }
    #mission .background .right { margin-right: -20%; margin-top: 4em; }
    #mission .foreground { padding: 2em 1em; min-width: unset; width: unset; gap: 2.5em;}
    #mission .foreground #mission-entete h2 { margin-bottom: 10em; }
    #mission .foreground #mission-entete .heavy-texts { font-size: 2.75em; padding: 0 0.2em; }
    #mission .foreground br { display: none; }

    #mission .foreground .mission-kp-title { margin-top: -3em; }
    #mission .foreground #mission-kps .mission-kps-arrow { width: 1.5em; top: -15%; }
    #mission .foreground .mission-kp { height: 11em; }
    #mission .foreground .mission-kp p { padding-right: 0; }
    #mission .foreground .mission-kp .icon-kps {
        max-width: 8em; max-height: 7em;
    }


    #transfo { padding: 2em 1em; width: 100vw; gap: 1em; }
    #transfo .sticky-header { width: auto; padding-bottom: 12em; }
    #transfo .sticky-header.is-sticky { top: 100px; }

    #transfo .border-container {
        width: auto; height: auto; aspect-ratio: unset;
        padding: 0; margin-top: 0; border-left: none; /*gap: 2em;*/
    }

    #transfo .transfo-row {
        width: 100%; margin: 0; gap: 1em;
    }
    #transfo .transfo-row .transfo-item {
        width: 12em; height: 12em; aspect-ratio: initial;
        position: relative; justify-content: flex-end;
    }

    #transfo .transfo-row .transfo-item img {
        max-width: 12em; max-height: 10em;
        position: absolute; z-index: -5; transform: none;
    }

    #transfo .transfo-row .detail { white-space: normal; }

    #transfo .transfo-row .num {
      font-size: 5em;
      letter-spacing: -0.05em;
      line-height: 1;
    }
    #transfo .transfo-row .num::after {
        top: 20%;
    }

    #transfo .transfo-row .transfo-arrow img {
        width: 100%; height: 12em; padding: 0 3em; margin: 0;
    }



    #orga { padding: 1em 1em; }
    #orga-content { gap:2em; }
    #orga article { flex-wrap: wrap; padding:0 1em; margin-bottom:0; gap:1em; }
    #orga article .num{ width: 34%; margin: 0; }
    #orga article .logo { width: 46%;  margin-right: 0; /*font-size: 0.66em;*/ }
    #orga article .logo img { width: 100%; }
    #orga article .texte { flex: none; width: 100%; padding: 0; }






    #sites { padding: 0 1em;}
    #sites h2 { padding: 0; margin:0.5em 0 1em; }
    #sites section { padding: 0; }
    #sites .mapmonde { flex-direction: column; margin-left: 0; width: 100%; height: 24em; background-position: center center; background-size: 116% auto; transform: none;  }
    #sites .mapmonde .pins { height: 24em; }
    #sites .mapmonde .pins a { width: 3em; }
    #sites .mapmonde .pins a#france { top: 0em;  left: 8em; }
    #sites .mapmonde .pins a#afrique { top: 7em; left: 6.5em; }
    #sites .mapmonde .nfo { width: 100%; height: 0; }
    #sites .mapmonde .nfo article in { padding: 1em 0.5em; gap: 1em; }
    #sites .mapmonde .nfo article .map { padding:1em 0; }
    #sites .mapmonde .nfo article .texte { flex: unset; width: 100%; }

    #sites .mapmonde .nfo #site_france { top: -17em; }
    #sites .mapmonde .nfo #site_afrique { top: -16em; }


    #contactForm { flex-direction: column; padding: 1.5em 1.5em 3em; }
    #contactForm .texte { width: 100%; margin-bottom: 1em; }
    #contactForm .form { width: 100%; }



    #partners { padding: 1em; /*font-size: 0.5em;*/ }
    #partners h2 { margin-bottom: 1em; }
    #partners .logos { flex-wrap: wrap; row-gap:1em; }
    #partners .logos span { flex-basis: 33%; }
    #partners .logos img { height: auto; width: 100%; max-height: 4em; max-width: 6em; }

}