body {
    margin: 0;                                  /* neutraliser les marges */
    padding: 0;
    background-image: url(images/fond.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;                     /* couverture de la fenêtre */
    background-attachment: fixed;
}
#diaporama {
    width: 90%;
    max-width: 640px;                           /* max largeur des images */

    margin: auto;                               /* centrer */
}
#diaporama img {
    /* Toutes les images sont superposées dans la boite = 1 seule image la dernière */
    position: absolute;

    top: 50%;                                   
    transform: translateY(-50%);            /* corrige l'écart de hauteur de boite */

    width: 90%;
    max-width: 640px;                           /* max largeur des images */

    border-radius: 50px;
    border: 3px solid #ddd;

    animation-duration: 12s;                    /* 6 images * 2 */
    animation-iteration-count: infinite;        /* En boucle */
}
.image1 {
    animation-name: image1;
}
.image2 {
    animation-name: image2;
}
.image3 {
    animation-name: image3;
}
.image4 {
    animation-name: image4;
}
.image5 {
    animation-name: image5;
}
.image6 {
    animation-name: image6;
}

/* 6 Règles d'animation : invisible 0 ou visible 1 */
@keyframes image1 {
    0%   { opacity: 1; }
    16%  { opacity: 0; }
    32%  { opacity: 0; }
    48%  { opacity: 0; }
    64%  { opacity: 0; }
    80%  { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes image2 {
    0%   { opacity: 0; }
    16%  { opacity: 1; }
    32%  { opacity: 0; }
    48%  { opacity: 0; }
    64%  { opacity: 0; }
    80%  { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes image3 {
    0%   { opacity: 0; }
    16%  { opacity: 0; }
    32%  { opacity: 1; }
    48%  { opacity: 0; }
    64%  { opacity: 0; }
    80%  { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes image4 {
    0%   { opacity: 0; }
    16%  { opacity: 0; }
    32%  { opacity: 0; }
    48%  { opacity: 1; }
    64%  { opacity: 0; }
    80%  { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes image5 {
    0%   { opacity: 0; }
    16%  { opacity: 0; }
    32%  { opacity: 0; }
    48%  { opacity: 0; }
    64%  { opacity: 1; }
    80%  { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes image6 {
    0%   { opacity: 0; }
    16%  { opacity: 0; }
    32%  { opacity: 0; }
    48%  { opacity: 0; }
    64%  { opacity: 0; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}