#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 {
    display: flex; flex-direction: column; gap: 2em;
    padding: 4em 14em; border-bottom: 3px solid var(--main-text);
}
.diagrams .entete h2 { margin-top: 0; }
.diagrams .entete p { font-weight: 500; }

.diagrams .pics {
    display: flex; flex: none; align-items: flex-start; justify-content: space-between;
 }

#shell2oil .pic {
  text-align: center;
  display: flex;
  flex-direction: column;
}

.diagrams .pics .block {
    display: flex; flex-direction: column; justify-content: end; align-items: center;
    text-align: center;
    position: relative; height: 100%; min-width: 10em;
}
.diagrams .pics .block:hover img {
    transform: scale(1.2);
    transform-origin: center bottom;
    transition: ease 0.2s;
}

.diagrams .pics .block img {
    transition: ease 0.2s;
    min-width: 4em; height: auto; object-fit: scale-down;
    max-height: 12em; max-width: 12em;
}

.diagrams .pics .block span { text-align: center; font-weight:500; }
.diagrams .pics .block .pc {
    display: flex; flex-direction: column;
    transform: translateY(5em);
    position: absolute;
    width: 200%;
}

.quantity-text, .pourcentage {
    font-family: 'Krona One', sans-serif;
}

.pourcentage { 
    font-size: 6em; line-height: 1;
    letter-spacing: -0.02em;
}
.pourcentage:after { 
    content:"%";
    font-size: 0.5em;
}

#shell2oil { background: var(--main-color-grad2); color: var(--reverse-text); gap: 4em; }
#shell2oil .entete { border-bottom: 3px solid var(--reverse-text);  }
#shell2oil .pics .v img { height: 12em; width: auto; }



#oil2app { border-bottom: 3px solid var(--main-color); gap: 4em; }
.multirow { display: flex; flex-direction: column; }
#oil2app .pic { 
  text-align: center;
  display: flex; flex-direction: column;
 }
#oil2app .pics .block img { max-width: 14em; max-height: 11em; }
#oil2app .pics .square img { width: 12em; height: 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;
    position: relative;
}
.fleches a { 
    display: inline-flex; flex: none; align-items: center; justify-content: center;
    text-decoration: none; aspect-ratio: 1/1; 
    background: var(--reverse-text); color: var(--second-text);  border: 3px solid var(--second-text); border-radius: 100%;
    font-size: 5em;
    padding: 0 0 0.04em 0;
    font-weight: 100;
    transition: 0.2s ease;
    height: 62px;
    width: 62px;
}
.fleches .flecheCt { position: relative; }
.fleches a:hover, .fleches a.in { 
   background: var(--second-text); color: var(--reverse-text); border-radius: 100%;
   transition: 0.2s ease;
}
.fleches a:hover + .panel { 
    display: inline-block;
    transition: 0.2s ease;
}

.fleches .panel { 
    display: none; position: absolute;
    width: 12em; text-align: center; padding: 1em; z-index: 5;
    background: var(--second-text); color: var(--reverse-text); border-radius: 0.5em; 
    transition: 0.2s ease;
    left: -4.5em;
    top: -5em;
    font-weight: bold;
}

.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; }