#splash{ display: flex; flex: none; align-items: center; justify-content: center; padding: 1em 3em 3em; }
#splash div{ display: flex; flex: none; width: 100%; aspect-ratio: 2.75/1; background: url(images/splash.jpg) top -14em center no-repeat; background-size: cover; border-radius: 4em;  }

.diagrams{ display: flex; flex: none; flex-direction: column; align-items: stretch; padding: 1.5em 14em 4em; }
.diagrams .entete{ padding: 1em 6em; font-size: 2.5em; border-bottom: 4px solid var(--main-text);  }
.diagrams .entete h2{ font-size: 1.66em; margin-top: 0; }
.diagrams .entete h3{ font-weight: 500; }

.diagrams .pics{ display: flex; flex: none; align-items: flex-start; justify-content: space-between; margin-top: 4em; }
.diagrams .pics .block{ text-align: center; }

.diagrams .pics .block div{ text-align: center; font-size: 1.5em; }
.diagrams .pics .block.pc div{ margin-top: -3em; }
.diagrams .pics .block div h4{ margin: 0; font-size: 2.25em; font-family: 'Corbert ExtraBold Wide', sans-serif; } 

#shell2oil{ background: var(--main-color-grad2); color: var(--reverse-text) }
#shell2oil .entete{ border-bottom: 4px solid var(--reverse-text);  }
#shell2oil .pics .block div{ text-shadow: -2px -2px 0 var(--main-color-grad2), 2px -2px 0 var(--main-color-grad2), -2px 2px 0 var(--main-color-grad2), 2px 2px 0 var(--main-color-grad2); }
#shell2oil .pics .block img{ width: 14em; height: auto; }
#shell2oil .pics .square img{ width: 12em; height: auto; }
#shell2oil .pics .v img{ height: 12em; width: auto; }

#oil2app{ border-bottom: 4em solid var(--main-color); }
#oil2app .pics .block img{ width: 10em; height: auto; }
#oil2app .pics .square img{ width: 10em; height: auto; }
#oil2app .pics .v img{ height: 9em; width: auto; }
/*--- ajustement des fleches et des block dans responsive/desktop ----*/

/*---------- fleches --------------*/
.fleches{ display: inline-flex; flex: none; flex-direction: column; align-items: center; justify-content: center;  background: center center no-repeat; background-size: contain; width: 9em; position: relative; }
.fleches a{ 
    display: inline-flex; flex: none; align-items: center; justify-content: center; text-decoration: none; width: 2em; aspect-ratio: 1/1; 
    background: var(--reverse-text); color: var(--second-text);  border: 3px solid var(--second-text); border-radius: 100%;
}
.fleches .flecheCt{ font-size: 1.5em; }
.fleches a:hover, .fleches a.in{ 
   background: var(--second-text); color: var(--reverse-text); border-radius: 100%;
}
.fleches .panel{ 
    display: none; position: absolute; left: -2em; width: 10em; text-align: center; padding: 1em; z-index: 5;
    background: var(--second-text); color: var(--reverse-text); border-radius: 0.5em; 
}

.fleches.double.w{ background-image: url(images/fleches/fleches_double_w_h.svg); aspect-ratio: 841/1253; }
.fleches.double.b{ background-image: url(images/fleches/fleches_double_b_h.svg); aspect-ratio: 841/1253; }
.fleches.triple.b{ background-image: url(images/fleches/fleches_triple_b_h.svg); aspect-ratio: 841/1253; }
.fleches.simple.b{ background-image: url(images/fleches/fleches_simple_b_h.svg); aspect-ratio: 593/465; }
.fleches.droite.b{ background-image: url(images/fleches/fleches_droite_b_h.svg); aspect-ratio: 831/126; }