
.filiere-slide { padding: 2rem 0; }


.filiere-row { flex-direction: column;}

/* Pas de distinction img-droite / img-gauche sur mobile */
.filiere-row--img-droite,
.filiere-row--img-gauche { flex-direction: column; }

.filiere-media {flex: 0 0 auto; width: 100%;  margin: 0 auto 2.5rem; align-items: center; justify-content: center; position: relative; padding: 0 .5rem;}

.filiere-slide .filiere-media::before {content: ""; position: absolute; top: -1.5rem; width: 12rem; background: var(--couleur-scotch); box-shadow: var(--ombre-scotch); display: block; margin: auto; height: 3.5rem; }

.filiere-media img {border-color: rgba(181, 165, 155, .25); border-width: .15rem 0 0 .15rem; border-style: solid; padding: 1rem; box-shadow: 10px 12px 0 0 rgba(181, 165, 155, .15), 1px 1px 0 0 rgba(181, 165, 155, .25), 10px 12px 0 0 rgba(181, 165, 155, .1), 1px 1px 0 0 rgba(181, 165, 155, .25), 3px 3px 0 0 rgba(181, 165, 155, .4), 1px 1px 0 0 rgba(181, 165, 155, .4);}
/*.filiere-media img {border-radius: 2rem; box-shadow: rgba(137, 108, 74, 0.15) 10px 8px;}*/

.filiere-text {flex: 1; flex-direction: column;}

.filiere-row .filiere-titre {align-items: center; justify-content: flex-start; column-gap: 3rem;}
.filiere-row .filiere-titre h2 { margin: 0; text-transform: none; text-align: left; }
.filiere-row .filiere-titre .filiere-picto {display: none;}
.filiere-row.filiere-row--img-droite .filiere-picto {order: 1;}

.filiere-intro { line-height: 1.75; }

.filiere-lien { align-self: flex-start; }



@media (min-width: 768px) {

    .filiere-slide {margin: 8rem 0 9rem; padding: 0;}
    .filiere-row { flex-direction: row; align-items: center; column-gap: 5rem; }
    .filiere-row--img-droite { flex-direction: row-reverse; }
    .filiere-row--img-gauche { flex-direction: row; }
    .filiere-row .filiere-titre .filiere-picto {max-width: 10rem; max-height: 8rem; display: block;}
    .filiere-media {flex: 0 0 38%; max-width: none; margin: 0; padding: 0;}
    .filiere-row.filiere-row--img-droite .filiere-media {transform: rotate(-4deg); margin-bottom: 3.5rem;}
    .filiere-row.filiere-row--img-gauche .filiere-media {transform: rotate(3deg);}
    .filiere-slide:nth-child(2n) .filiere-media::before {left: -3rem; top: 0; transform: rotate(-35deg); width: 10rem;} 
    .filiere-slide:nth-child(3n) .filiere-media::before {right: -4rem; top: 1rem; transform: rotate(45deg); width: 12rem;} 

    
}

@media (min-width: 1400px) {
    .filiere-row {column-gap: 10rem;}

}