/* style.css */

/* Section du Diaporama CSS */
.fotos {
    position: relative;
    width: 100%; /* Prend toute la largeur disponible */
    height: 385px; /* **IMPORTANT: Définissez une hauteur pour votre diaporama** */
    margin-bottom: 0;
    background-position: center center; /* Centre l'image de fond */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-size: cover; /* Recouvre l'élément sans déformer l'image, en coupant si nécessaire */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Ombre plus douce et moderne */
    border-radius: 0.5rem; /* Coins légèrement arrondis */
    animation: slider 60s linear infinite; /* L'animation de changement d'image */
    display: flex; /* Pour centrer le contenu interne */
    align-items: center; /* Centre verticalement le contenu */
    justify-content: center; /* Centre horizontalement le contenu */
    text-align: center; /* Pour le texte */
    color: white; /* Couleur du texte par défaut dans le diaporama */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Ombre pour la lisibilité du texte */
}

@keyframes slider {
    0% { background-image: url('../img/diap/1.jpg'); opacity: 1; } /* Assurez-vous que les chemins sont corrects */
    10% { background-image: url('../img/diap/2.jpg'); opacity: 1; } /* Reste sur la première image */
    20% { background-image: url('../img/diap/3.jpg'); opacity: 1; }
    30% { background-image: url('../img/diap/4.jpg'); opacity: 1; } /* Reste sur la deuxième image */
    40% { background-image: url('../img/diap/5.jpg'); opacity: 1; }
    50% { background-image: url('../img/diap/6.jpg'); opacity: 1; }
    60% { background-image: url('../img/diap/7.jpg'); opacity: 1; }
    70% { background-image: url('../img/diap/8.jpg'); opacity: 1; }
    80% { background-image: url('../img/diap/9.jpg'); opacity: 1; }
    90% { background-image: url('../img/diap/11.jpg'); opacity: 1; }
    100% { background-image: url('../img/diap/12.jpg'); opacity: 1; }
    /*85% { background-image: url('assets/img/khelifa.jpg'); opacity: 1; }  Reste sur la troisième image */
   /* 90% { background-image: url('../img/chef-holding-vegetables.jpg'); opacity: 1; }
    100% { background-image: url('../img/chef-holding-vegetables.jpg'); opacity: 1; }  Reste sur la quatrième image */
}

/* Si vous voulez un effet de fondu entre les images (un peu plus complexe) */
/*
.fotos::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/DGRSDT.png');
    background-size: cover;
    background-position: center;
    animation: fadeSlider 10s linear infinite;
    z-index: -1; // Pour s'assurer que le contenu est par-dessus
    border-radius: 0.5rem;
}

@keyframes fadeSlider {
    0%, 25% { background-image: url('../img/DGRSDT.png'); opacity: 1; }
    28%, 30% { opacity: 0; } // Fondu sortant de la première
    30.1%, 55% { background-image: url('../img/DGRSDT2.png'); opacity: 1; } // Fondu entrant de la deuxième
    58%, 60% { opacity: 0; } // Fondu sortant de la deuxième
    60.1%, 85% { background-image: url('../img/ben.jpg'); opacity: 1; } // Fondu entrant de la troisième
    88%, 90% { opacity: 0; } // Fondu sortant de la troisième
    90.1%, 100% { background-image: url('../img/chef-holding-vegetables.jpg'); opacity: 1; } // Fondu entrant de la quatrième
}
*/

/* Styles pour le contenu interne du diaporama */