.sec-0 {--temps: 0s;}
.sec-1 {--temps: 1s;}
.sec-4 {--temps: 4s;}

.sec-7 {--temps: 7s;}
.duree-9 {--max: 9s; img:not(:first-child){animation-name: diapo-ani-9;}}

.sec-10 {--temps: 10s;}
.duree-12 {--max: 12s; img:not(:first-child){animation-name: diapo-ani-12;}}

.sec-13 {--temps: 13s;}
.duree-15 {--max: 15s; img:not(:first-child){animation-name: diapo-ani-15;}}

.sec-16 {--temps: 16s;}
.duree-18 {--max: 18s; img:not(:first-child){animation-name: diapo-ani-18;}}

.sec-19 {--temps: 19s;}
.duree-21 {--max: 21s; img:not(:first-child){animation-name: diapo-ani-21;}}

.sec-22 {--temps: 22s;}
.duree-24 {--max: 24s; img:not(:first-child){animation-name: diapo-ani-24;}}

.sec-25 {--temps: 25s;}
.duree-27 {--max: 27s; img:not(:first-child){animation-name: diapo-ani-27;}}

.diaporama{/*conflit avec text-flex img sans# recopier toutes ses valeur ici et les modifier*/
	position: relative;/*les images sont superposées, empilées*/
	display: block;/*supprime les espaces blancs autour de l'image*/
	height: auto;/*c'est padding-bottom de text-flex qui définit le height*/
	width: 100%;/*définit l'espace d'affichage (vide) pour la mise en page*/
}
.diaporama img{/*positionne la première image*/
	position: relative;
	display: block;
	margin: 0 auto;/*auto = centrer*/
	height: auto;
	box-shadow: -2px 5px 8px 0 rgba(0, 0, 0, 0.6), 0 0 0 2px var(--blec);
}
.diaporama img:not(:first-child){/*positionne les autres images*/
	position: absolute;
	display: block;
	top: 0;/*positionne les images par rapport à la première*/
	opacity: 0;/*cache les images 0 = transparent*/
	animation-duration: var(--max);
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	animation-delay: var(--temps);
}
@media (orientation: portrait){
.diaporama img{
	max-width: 100%;/*ajuster left en-dessous avec (x%-100)/2*/
}
.diaporama img:not(:first-child){
	left: 0;/*positionne les images par rapport à la première*/
}
}
@media (orientation: landscape){
.diaporama img{
	max-width: 70%;/*ajuster left en-dessous avec (x%-100)/2*/
}
.diaporama img:not(:first-child){
	left: 15%;/*positionne les images par rapport à la première*/
}
}
/*la 1e image étant fixe, elle n'est pas comptée dans le total et doit être répété en dernière position*/
@keyframes diapo-ani-9{/*définit l'animation pour 3 images*/
	0% {opacity: 0; z-index: 2;}/*toujours définir le point de départ*/
	11% {opacity: 1;}/*temps d'apparition de l'image*/
	44% {opacity: 1;}
	48% {opacity: 0; z-index: 1;}
	100% {opacity: 0;}/*toujours définir le point d'arrivée*/
}
@keyframes diapo-ani-12{/*4 images*/
	0% {opacity: 0; z-index: 2;}
	8% {opacity: 1;}
	33% {opacity: 1;}
	36% {opacity: 0; z-index: 1;}
	100% {opacity: 0;}
}
@keyframes diapo-ani-15{/*5 images*/
	0% {opacity: 0; z-index: 2;}
	7% {opacity: 1;}
	27% {opacity: 1;}
	29% {opacity: 0; z-index: 1;}
	100% {opacity: 0;}
}
@keyframes diapo-ani-18{/*6 images*/
	0% {opacity: 0; z-index: 2;}
	6% {opacity: 1;}
	22% {opacity: 1;}
	24% {opacity: 0; z-index: 1;}
	100% {opacity: 0;}
}
@keyframes diapo-ani-21{/*7 images*/
	0% {opacity: 0; z-index: 2;}
	5% {opacity: 1;}
	19% {opacity: 1;}
	20% {opacity: 0; z-index: 1;}
	100% {opacity: 0;}
}
@keyframes diapo-ani-24{/*8 images*/
	0% {opacity: 0; z-index: 2;}
	4% {opacity: 1;}
	17% {opacity: 1;}
	18% {opacity: 0; z-index: 1;}
	100% {opacity: 0;}
}
@keyframes diapo-ani-27{/*9 images*/
	0% {opacity: 0; z-index: 2;}
	4% {opacity: 1;}
	15% {opacity: 1;}
	16% {opacity: 0; z-index: 1;}
	100% {opacity: 0;}
}