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

}


@media (min-width: 1025px)  { /* Desktop */
    
    .multirow { gap: 2em; }

    .diagrams .pics .block .pc { transform: translateY(7em); }

    #shell2oil .pic.p2 { gap: 11em; }
    #shell2oil .pic.p3 { gap: 10em; }
    #shell2oil .pic.p4 { gap: 8em; }

    #shell2oil .diagrams .pics { justify-content:space-evenly; }
    #shell2oil .pics .p1 { margin-top: 6.5em; }
    #shell2oil .pics .f1 { margin-top: 7em; }
    #shell2oil .pics .f2 { margin-top: 17em; }
    #shell2oil .pics .p3 { margin-top: 7em; }
    #shell2oil .pics .f3 { margin-top: 27em; }
    #shell2oil .pics .p4 { margin-top: 10em; }

    #shell2oil .fleches, #oil2app .fleches { width: 14em;}





    #shell2oil .diagrams .pics { justify-content: start; }
    #oil2app .p1 { align-self: flex-end; }
    #oil2app .p2 { }
    #oil2app .p3 { margin-top: 8em; }
    #oil2app .p4 { margin-top: 8em; }
    #oil2app .p5 { margin-top: 8em; }
    #oil2app .p6 { gap: 8em; }
    #oil2app .p7 { margin-top: 6em; }
    #oil2app .pics .pic.p8 {
        gap: 2em; margin-top: -2em;
    }

    #oil2app .p8 .block {
        display: flex; flex: none; flex-direction:row; align-items: center; justify-content: space-between; gap:2em;
    }
    #oil2app .p8 .block div, #oil2app .p8 .block span {
        width: 50%;
    }
    #oil2app .pics .p8 .block img { max-height: 10em; }

    #oil2app .dummy { width: 42em }

    #oil2app .f1 { align-self: center; margin-top:12em; }
    #oil2app .f2 { transform: scaleY(-1); margin-top: 4em; }
    #oil2app .f2 .flecheCt { transform: scaleY(-1); }
    #oil2app .f3 { margin-top: 10em;  }
    #oil2app .f4 { margin-top: 5em;  }
    #oil2app .f5 { width: 17em; }
}

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


    .multirow { gap: 2em; }

    .diagrams {
        padding: 1.5em 2em 8em;
    }

    .diagrams .entete {
        padding: 4em 0;
    }


    .diagrams .pics .block img {
        min-width: 6em; min-height: 6em; object-fit: scale-down;
        max-height: 10em; max-width: 10em;
    }

    #shell2oil .pics .pourcentage { font-size: 3em; }

    #oil2app .pics .block img { max-width: 10em; max-height: 10em; }


    .fleches {
        min-width: 7em; min-height: 7em;
        max-height: 12em; max-width: 12em;
    }
    .fleches a { border: 2px solid var(--second-text); font-size: 4em; width: 32px; height: 32px }


    #shell2oil .pic.p2 { gap: 6em; }
    #shell2oil .pic.p3 { gap: 6em; }
    #shell2oil .pic.p4 { gap: 6em; }

    #shell2oil .diagrams .pics { justify-content:space-evenly; }
    #shell2oil .pics .p1 { margin-top: 3em; }
    #shell2oil .pics .f1 { margin-top: 3.5em; }
    #shell2oil .pics .f2 { margin-top: 11em; }
    #shell2oil .pics .p3 { margin-top: 7em; }
    #shell2oil .pics .f3 { margin-top: 17em; }
    #shell2oil .pics .p4 { margin-top: 10em; }

    #shell2oil .fleches, #oil2app .fleches { width: 9em;}



    #shell2oil .diagrams .pics { justify-content: start; }
    #oil2app .p1 { align-self: flex-end;  }
    #oil2app .p2 { }
    #oil2app .p3 { margin-top: 4em; }
    #oil2app .p4 { margin-top: 7em; }
    #oil2app .p5 { margin-top: 4em; }
    #oil2app .p6 { gap: 4em; margin-top: 2em; }
    #oil2app .p7 { margin-top: 3em; }
    #oil2app .pics .pic.p8 {
        gap: 0em; margin-top: -2em;
    }
    #oil2app .p8 .block {
        display: flex; flex: none; flex-direction:row; align-items: center; justify-content: space-between; gap:1em;
    }
    #oil2app .p8 .block div, #oil2app .p8 .block span {
        width: 50%;
    }
    #oil2app .pics .p8 .block img { /*width: 7.5em;*/ max-height: 8em; }
    #oil2app .dummy { width: 42em }

    #oil2app .f1 { align-self: center; margin-top: 6em; }
    #oil2app .f2 { transform: scaleY(-1); margin-top: 4em; }
    #oil2app .f2 .flecheCt { transform: scaleY(-1); }
    #oil2app .f3 { margin-top: 5em;  }
    #oil2app .f4 { margin-top: 8em;  }
    #oil2app .f5 { margin-top: 2em; }

}

/* Mobile */
@media (max-width: 767px)  {



    #splash { padding: 1em; }
    #splash div { aspect-ratio: 1/1; border-radius: 2em; background-position: center center; }

    .diagrams { padding: 0 1em 4em; }
    .diagrams .entete { padding: 1em 0.5em; }
    .diagrams .entete br { display: none; }
    .diagrams .pics {
        flex-direction: column; align-items: center; justify-content: flex-start;
        font-size:1.1em;
    }
    .diagrams .pics .pic {
        display: flex; flex: none; align-items: center; justify-content: space-between;
        width: 100%;
    }
    .diagrams .pics .pic:has(>:only-child) { justify-content: center; }
    .diagrams .pics .block { min-width: 6em; }
    .diagrams .pics .block .pc { transform: translateY(3em); }
    
    #shell2oil { padding-top: 1em; padding-bottom:6em; gap: 1em; }
    #shell2oil .pics { gap: 0.5em; }
    #shell2oil .pics .pourcentage { font-size: 3em; }
    #shell2oil .pics .p1 .block { margin: 0 auto; }
    #shell2oil .fleches.f1 { width: 40%; }
    #shell2oil .pics .p2 { flex-direction:row; }
    #shell2oil .fleches.f2 { width: 60%; }
    #shell2oil .pics .p3 { flex-direction: row-reverse; margin-bottom:3em; }
    #shell2oil .pics .f3 { width: 60%; transform: scaleX(-1); }
    #shell2oil .pics .p4 { flex-direction: row; }
    #shell2oil .pics .pic .block { width: 40%; }
    #shell2oil .pics .pic .block img,
    #oil2app .pics .pic .block img {
        min-width: 4em; height: auto; object-fit: scale-down;
        max-height: 7em; max-width: 7em;
    }

    #oil2app { border-bottom: 1px solid var(--main-color); }
    #oil2app .multirow { display: flex; flex: none; flex-direction: row; }
    #oil2app .pics { width: 50%; }
    #oil2app .pics:first-child { padding-right: 3em; }
    #oil2app .pics:last-child { padding-left: 3em; }
    #oil2app .pics .v img { height: 10em; }

    #oil2app .p6 { flex-direction: row-reverse; width: 120%; margin-right: 4em;
        width: 200%;
        margin-right: 8em;
    }
    #oil2app .p6 .block { width:6em; }
    #oil2app .p8 {
        width: 90vw;
        margin: 0 auto;
        flex-direction: row;
        justify-content: space-around;
    }
    #oil2app .p8 .block { width: 30%; }

    #oil2app .f1 .panel, #oil2app .f3 .panel { transform: translate(33%,-0%); left: 0; top: 0;  }
    #oil2app .f2 .panel { transform: translate(-105%,-0%); left: 0; top: 0; }
    #oil2app .f4 {
        margin-left: -8em;
        aspect-ratio: 3/2;
    }
    #oil2app .f5 {
        width: 70vw;
        height: auto;
        margin: 0 auto;
        aspect-ratio: 3/1;
        width: 70vw;
        align-self: baseline;
        margin-left: 2em;
    }


    /*---------- fleches --------------*/
    .fleches { height: 6.25em; }
    .fleches a { border: 2px solid var(--second-text); font-size: 4em; }


    .fleches.double.w {
        background-image: url(images/fleches/fleches_double_w_v.svg);
        aspect-ratio: 3/2;
    }
    .fleches.double.w.diag {
        background-image: url(images/fleches/fleches_double_w_v_diag.svg);
        aspect-ratio: 3/2;
    }
    .fleches.double.b {
        background-image: url(images/fleches/fleches_double_b_v.svg);
    }
    .fleches.triple.b {
        background-image: url(images/fleches/fleches_triple_b_v.svg);
    }
    .fleches.simple.b, .fleches.droite.b {
        background-image: url(images/fleches/fleches_simple_b_v.svg);
        aspect-ratio: unset;
        height: 14em;
        width: 20%;
    }

}