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

}


@media (min-width: 1025px) { /* Desktop */
    
    #shell2oil .pics .block{ margin-bottom: 4em; }

    #shell2oil .pics .f1{ margin-top: 6em; }
    #shell2oil .pics .p2{ margin-top: 2em; }
    #shell2oil .pics .f2{ margin-top: 12em; }
    #shell2oil .pics .p3{ margin-top: 6em; }
    #shell2oil .pics .f3{ margin-top: 22em; }
    #shell2oil .pics .p4{ margin-top: 14em; }

    #oil2app .p1{ align-self: flex-end; width: 10em; }
    #oil2app .p2{ width: 10em; }
    #oil2app .p3{ margin-top: 6em; }
    #oil2app .p4{ margin-top: 6em; }
    #oil2app .p5{ margin-top: 6em; }
    #oil2app .p6{ margin-top: 2em; }
    #oil2app .p7{ margin-top: 6em; }
    #oil2app .p8 .block{ display: flex; flex: none; align-items: center; justify-content: space-between; width: 23em; }
    #oil2app .p8 .block div{ width: 5.5em; }
    #oil2app .dummy{ width: 42em }

    #oil2app .f1{ align-self: flex-end; }
    #oil2app .f1 .panel{ top: -3.3em;  }
    #oil2app .f2{ transform: scaleY(-1); margin-top: 2em; }
    #oil2app .f2 .flecheCt{ transform: scaleY(-1); }
    #oil2app .f2 .panel{ top: -5em; left: -4em;  }
    #oil2app .f3{ margin-top: 8em;  }
    #oil2app .f3 .panel{ top: -3.6em; }
    #oil2app .f4{ margin-top: 5em;  }
    #oil2app .f5{ margin-top: 1em; width: 13em; }
}

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


}

/* 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; font-size: 1.25em; }
    .diagrams .entete br{ display: none; }
    .diagrams .pics{ flex-direction: column; align-items: center; justify-content: flex-start; }
    .diagrams .pics .pic{ display: flex; flex: none; align-items: flex-end; justify-content: space-between; width: 100%; }
    .diagrams .pics .pic:has(>:only-child){ justify-content: center; }
    
    #shell2oil .pics{ font-size: 0.75em; }
    #shell2oil .pics .f3{ transform: scaleX(-1); }
    #shell2oil .pics .pic .block{ width: 40%; }

    #oil2app .multirow{ display: flex; flex: none; }
    #oil2app .pics{ width: 50%; }
    #oil2app .pics .v img{ height: 10em; }

    #oil2app .p6{ margin-left: -8.5em; font-size: 0.88em; }
    #oil2app .p8{ font-size: 0.88em; width: 200%; margin-left: 100%; }

    #oil2app .f1 .panel{ top: 1.45em; left: 8em;  }
    #oil2app .f2 .panel{ top: 0.75em; left: -9em; }
    #oil2app .f3{ height: 22.3em; background-size: 10% 100%; }
    #oil2app .f3 .panel{ top: 1.45em; left: 8em; }
    #oil2app .f4{ margin-left: -4em; background-size: 70% 100%; }
    #oil2app .f5{ width: 186%; margin-left: 92%; background-size: 70% 100%; }


    /*---------- fleches --------------*/
    .fleches{ width: 100%; height: 9.25em; margin: 0.5em 0; }
    .fleches .panel{ left: -0.5em;}

    .fleches.double.w{ background-image: url(images/fleches/fleches_double_w_v.svg); aspect-ratio: 841/1253; }
    .fleches.double.w.diag{ background-image: url(images/fleches/fleches_double_w_v_diag.svg); aspect-ratio: 841/1253; }
    .fleches.double.b{ background-image: url(images/fleches/fleches_double_b_v.svg); aspect-ratio: 841/1253; }
    .fleches.triple.b{ background-image: url(images/fleches/fleches_triple_b_v.svg); aspect-ratio: 2370/937; }
    .fleches.simple.b, .fleches.droite.b{ background-image: url(images/fleches/fleches_simple_b_v.svg); aspect-ratio: 126/1481; }

}