/* Animation pour l'apparition des éléments */
@keyframes appear {
    from {
        opacity: 0; /* Opacité initiale */
        scale: 0; /* Échelle initiale */
        transform: translateY(-100px); /* Déplacement vers le haut */
    }
    to {
        opacity: 1; /* Opacité finale */
        scale: 1; /* Échelle finale */
        transform: translateX(0); /* Réinitialisation du déplacement */
    }
}

/* Style de fond pour le corps de la page */
body {
    background-color: #21252973; /* Couleur de fond avec transparence */
}

/* Animation appliquée à tous les éléments */
* {
    animation: appear alternate; /* Animation d'apparition alternée */
    animation-timeline: view(); /* Chronologie de l'animation */
    animation-range: entry 0; /* Plage de l'animation */
}

/* Style pour les titres de niveau 2 */
h2 {
    text-align: center; /* Centrer le texte */
    text-decoration: none; /* Souligner le texte */
}

/* Grille pour la mise en page des réalisations */
.grid {
    display: grid; /* Affichage en grille */
    grid-template-columns: 1fr 1fr 1fr; /* Trois colonnes de taille égale */
    gap: 20px; /* Espacement entre les éléments */
    padding: 20px; /* Remplissage autour de la grille */
    transition: 0.5s; /* Transition pour les changements */
}

/* Style pour les images de réalisations */
.img-realisations {
    display: block; /* Affichage en bloc */
    width: 100%; /* Largeur à 100% */
    height: 510px; /* Hauteur fixe */
    margin-bottom: 0; /* Pas de marge inférieure */
    object-fit: cover; /* Couvre l'espace sans déformation */
    border-radius: 8px; /* Coins arrondis */
    transition: transform 0.3s ease; /* Transition pour l'effet de transformation */
}

/* Effet de survol pour les images de réalisations */
.img-realisations:hover {
    transform: scale(1.05); /* Agrandissement au survol */
    transition: 0.5s; /* Transition pour l'effet de survol */
    box-shadow: 5px 5px 5px rgb(56, 54, 54); /* Ombre au survol */
}

/* Conteneur pour les images et les sliders */
.image-container {
    position: relative; /* Positionnement relatif pour le conteneur */
    max-width: 800px; /* Largeur maximale */
    max-height: 90vh; /* Hauteur maximale */
    aspect-ratio: 1/1; /* Ratio d'aspect carré */
    overflow: hidden; /* Masque le débordement */
}

/* Style pour les images du slider */
.slider-image {
    width: 100%; /* Largeur à 100% */
    height: 100%; /* Hauteur à 100% */
    object-fit: cover; /* Couvre l'espace sans déformation */
    object-position: left; /* Position de l'image à gauche */
}

/* Image avant dans le slider */
.image-before {
    position: absolute; /* Positionnement absolu */
    inset: 0; /* Remplit tout le conteneur */
    width: 100%; /* Largeur à 100% */
}

/* Image après dans le slider */
.image-after {
    position: absolute; /* Positionnement absolu */
    inset: 0; /* Remplit tout le conteneur */
    width: 100%; /* Largeur à 100% */
    clip-path: inset(0 calc(100% - var(--position)) 0 0); /* Masque selon la position */
}

/* Bouton du slider */
.slider-button {
    position: absolute; /* Positionnement absolu */
    background-color: rgba(255, 255, 255, 0.8); /* Couleur de fond blanche avec opacité */
    color: black; /* Couleur du texte noire */
    padding: .5rem; /* Remplissage */
    border-radius: 50%; /* Coins arrondis pour un look circulaire */
    display: grid; /* Affichage en grille */
    place-items: center; /* Centre le contenu */
    top: 50%; /* Positionnement vertical au centre */
    left: var(--position); /* Position à gauche selon la variable */
    transform: translate(-50%, -50%); /* Centre le bouton */
    pointer-events: auto; /* Active les événements de pointeur pour le bouton */
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); /* Ombre pour le bouton */
}

/* Styles pour les écrans de moins de 992px */
@media (max-width: 992px) {
    /* Assurez-vous que les marges et paddings sont appropriés */
    .navbar {
        margin: 0; /* Pas de marge */
        padding: 0; /* Pas de remplissage */
    }
    .content {
        margin: 0; /* Pas de marge */
        padding: 0; /* Pas de remplissage */
    }

    .image-container {
        margin: 0; /* Pas de marge */
        padding: 0; /* Pas de remplissage */
    }

    /* Vérifiez les styles spécifiques aux images */
    img {
        display: block; /* Affichage en bloc */
        max-width: 100%; /* Largeur maximale à 100% */
        height: auto; /* Hauteur automatique */
        margin: 0 auto; /* Centrer l'image sans ajouter d'espace */
    }

    .grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Grille réactive */
    }
}