/* CARROUSEL #1 */

/* Définition d'un container pour gérer l'affichage */
.container1 {
    overflow: hidden;
    /* Cache les éléments qui dépassent du container */
}
/* Définition du carousel */
.carousel1 {
    position: relative;
    /* Le carousel est positionné relativement à son parent */
}
/* Définition de l'élément contenant les diapositives */
.carousel-inner1 {
    display: flex;
    /* Affiche les éléments en ligne */
    overflow: hidden;
    /* Cache les éléments qui dépassent */
    height: 50%;
    /* Hauteur égale à 100% de la hauteur de la vue */
    flex-wrap: nowrap;
    /* Empêche les éléments de se placer sur plusieurs lignes */
    margin: 30px 0px 20px 0px;
}
/* Définition des diapositives */
.slide1 {
    flex: 0 0 100%;
    /* Largeur de chaque diapositive est de 100% */
    height: 100%;
    /* Hauteur de chaque diapositive est de 100% */
    transition: .5s ease-in-out;
    /* Ajout d'une animation douce pour la transition entre les diapositives */
}
/* Définition de l'affichage de l'image de chaque diapositive */
.slide1 img {
    width: 100%;
    /* Largeur de l'image est de 100% */
    height: 100%;
    /* Hauteur de l'image est de 100% */
    object-fit: cover;
    /* Couvre tout l'espace disponible */
}

/* Définition des boutons de contrôle du carousel prev + next */
.carousel-controls1 {
    position: absolute;
    /* Les boutons sont absolument positionnés */
    z-index: -1;
    /* Ils sont placés au-dessus des autres éléments */
    left: 10%;
    /* La distance à gauche est de 10% */
    right: 10%;
    /* La distance à droite est de 10% */
    top: 50%;
    /* La distance du haut est de 50% */
    display: flex;
    /* Affiche les boutons en ligne */
    justify-content: space-between;
    /* Espacement égal entre les boutons */
}
/* Style des boutons de contrôle prev + next */
.carousel-controls1 button {
    padding: 10px;
    /* Ajout de padding pour un meilleur contrôle */
    background-color: rgba(255,255,255,0);
    /* Arrière-plan en aquamarine */
}

/* Définition des points de contrôle */
.carousel-dots1 {
    position: absolute;
    /* Les points sont absolument positionnés */
    z-index: 0;
    /* Ils sont placés au-dessus des autres éléments */
    left: 50%;
    /* La distance à gauche est de 50% */
    right: 50%;
    /* La distance à droite est de 50% */
    bottom: -3.5%;
    /*La distance du bas est de 10% */
    display: flex;
    /* Affiche les points en ligne */
    justify-content: center;
    /* Centrage des points */
}
/* Style des points de contrôle */
.carousel-dots1 .dot1 {
    border-radius: 50%;
    /* Les points sont en forme de cercle */
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 1px;
    /* Ajout d'un margin pour un meilleur contrôle */
    cursor: pointer;
    /* Curseur en forme de main pour un meilleur contrôle */
}
/* Styles pour les points de navigation du carrousel */
.carousel-dots1 .active {
    /* Border de 10px pour le point actif */
    border: 7px solid #71fbfd!important;
    /* !important permet de surcharger les autres styles éventuels */
}
.carousel-dots1 .inactive {
    /* Border de 10px pour les points inactifs */
    border: 7px solid #fd7371;
}


/* ------------------------------------------------------------------------------------ */


/* CARROUSEL #2 */

/* Définition d'un container pour gérer l'affichage */
.container2 {
    overflow: hidden;
    /* Cache les éléments qui dépassent du container */
}
/* Définition du carousel */
.carousel2 {
    position: relative;
    /* Le carousel est positionné relativement à son parent */
}
/* Définition de l'élément contenant les diapositives */
.carousel-inner2 {
    display: flex;
    /* Affiche les éléments en ligne */
    overflow: hidden;
    /* Cache les éléments qui dépassent */
    height: 50%;
    /* Hauteur égale à 100% de la hauteur de la vue */
    flex-wrap: nowrap;
    /* Empêche les éléments de se placer sur plusieurs lignes */
    margin: 30px 0px 20px 0px;
}
/* Définition des diapositives */
.slide2 {
    flex: 0 0 100%;
    /* Largeur de chaque diapositive est de 100% */
    height: 100%;
    /* Hauteur de chaque diapositive est de 100% */
    transition: .5s ease-in-out;
    /* Ajout d'une animation douce pour la transition entre les diapositives */
}
/* Définition de l'affichage de l'image de chaque diapositive */
.slide2 img {
    width: 100%;
    /* Largeur de l'image est de 100% */
    height: 100%;
    /* Hauteur de l'image est de 100% */
    object-fit: cover;
    /* Couvre tout l'espace disponible */
}

/* Définition des boutons de contrôle du carousel prev + next */
.carousel-controls2 {
    position: absolute;
    /* Les boutons sont absolument positionnés */
    z-index: -1;
    /* Ils sont placés au-dessus des autres éléments */
    left: 10%;
    /* La distance à gauche est de 10% */
    right: 10%;
    /* La distance à droite est de 10% */
    top: 50%;
    /* La distance du haut est de 50% */
    display: flex;
    /* Affiche les boutons en ligne */
    justify-content: space-between;
    /* Espacement égal entre les boutons */
}
/* Style des boutons de contrôle prev + next */
.carousel-controls2 button {
    padding: 10px;
    /* Ajout de padding pour un meilleur contrôle */
    background-color: rgba(255,255,255,0);
    /* Arrière-plan en aquamarine */
}

/* Définition des points de contrôle */
.carousel-dots2 {
    position: absolute;
    /* Les points sont absolument positionnés */
    z-index: 0;
    /* Ils sont placés au-dessus des autres éléments */
    left: 50%;
    /* La distance à gauche est de 50% */
    right: 50%;
    /* La distance à droite est de 50% */
    bottom: -3.5%;
    /*La distance du bas est de 10% */
    display: flex;
    /* Affiche les points en ligne */
    justify-content: center;
    /* Centrage des points */
}
/* Style des points de contrôle */
.carousel-dots2 .dot2 {
    border-radius: 50%;
    /* Les points sont en forme de cercle */
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 1px;
    /* Ajout d'un margin pour un meilleur contrôle */
    cursor: pointer;
    /* Curseur en forme de main pour un meilleur contrôle */
}
/* Styles pour les points de navigation du carrousel */
.carousel-dots2 .active {
    /* Border de 10px pour le point actif */
    border: 7px solid #71fbfd!important;
    /* !important permet de surcharger les autres styles éventuels */
}
.carousel-dots2 .inactive {
    /* Border de 10px pour les points inactifs */
    border: 7px solid #fd7371;
}


/* ------------------------------------------------------------------------------------ */


/* CARROUSEL #3 */

/* Définition d'un container pour gérer l'affichage */
.container3 {
    overflow: hidden;
    /* Cache les éléments qui dépassent du container */
}
/* Définition du carousel */
.carousel3 {
    position: relative;
    /* Le carousel est positionné relativement à son parent */
}
/* Définition de l'élément contenant les diapositives */
.carousel-inner3 {
    display: flex;
    /* Affiche les éléments en ligne */
    overflow: hidden;
    /* Cache les éléments qui dépassent */
    height: 50%;
    /* Hauteur égale à 100% de la hauteur de la vue */
    flex-wrap: nowrap;
    /* Empêche les éléments de se placer sur plusieurs lignes */
    margin: 30px 0px 20px 0px;
}
/* Définition des diapositives */
.slide3 {
    flex: 0 0 100%;
    /* Largeur de chaque diapositive est de 100% */
    height: 100%;
    /* Hauteur de chaque diapositive est de 100% */
    transition: .5s ease-in-out;
    /* Ajout d'une animation douce pour la transition entre les diapositives */
}
/* Définition de l'affichage de l'image de chaque diapositive */
.slide3 img {
    width: 100%;
    /* Largeur de l'image est de 100% */
    height: 100%;
    /* Hauteur de l'image est de 100% */
    object-fit: cover;
    /* Couvre tout l'espace disponible */
}

/* Définition des boutons de contrôle du carousel prev + next */
.carousel-controls3 {
    position: absolute;
    /* Les boutons sont absolument positionnés */
    z-index: -1;
    /* Ils sont placés au-dessus des autres éléments */
    left: 10%;
    /* La distance à gauche est de 10% */
    right: 10%;
    /* La distance à droite est de 10% */
    top: 50%;
    /* La distance du haut est de 50% */
    display: flex;
    /* Affiche les boutons en ligne */
    justify-content: space-between;
    /* Espacement égal entre les boutons */
}
/* Style des boutons de contrôle prev + next */
.carousel-controls3 button {
    padding: 10px;
    /* Ajout de padding pour un meilleur contrôle */
    background-color: rgba(255,255,255,0);
    /* Arrière-plan en aquamarine */
}

/* Définition des points de contrôle */
.carousel-dots3 {
    position: absolute;
    /* Les points sont absolument positionnés */
    z-index: 0;
    /* Ils sont placés au-dessus des autres éléments */
    left: 50%;
    /* La distance à gauche est de 50% */
    right: 50%;
    /* La distance à droite est de 50% */
    bottom: -3.5%;
    /*La distance du bas est de 10% */
    display: flex;
    /* Affiche les points en ligne */
    justify-content: center;
    /* Centrage des points */
}
/* Style des points de contrôle */
.carousel-dots3 .dot3 {
    border-radius: 50%;
    /* Les points sont en forme de cercle */
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 1px;
    /* Ajout d'un margin pour un meilleur contrôle */
    cursor: pointer;
    /* Curseur en forme de main pour un meilleur contrôle */
}
/* Styles pour les points de navigation du carrousel */
.carousel-dots3 .active {
    /* Border de 10px pour le point actif */
    border: 7px solid #71fbfd!important;
    /* !important permet de surcharger les autres styles éventuels */
}
.carousel-dots3 .inactive {
    /* Border de 10px pour les points inactifs */
    border: 7px solid #fd7371;
}


/* ------------------------------------------------------------------------------------ */


/* CARROUSEL #4 */

/* Définition d'un container pour gérer l'affichage */
.container4 {
    overflow: hidden;
    /* Cache les éléments qui dépassent du container */
}
/* Définition du carousel */
.carousel4 {
    position: relative;
    /* Le carousel est positionné relativement à son parent */
}
/* Définition de l'élément contenant les diapositives */
.carousel-inner4 {
    display: flex;
    /* Affiche les éléments en ligne */
    overflow: hidden;
    /* Cache les éléments qui dépassent */
    height: 50%;
    /* Hauteur égale à 100% de la hauteur de la vue */
    flex-wrap: nowrap;
    /* Empêche les éléments de se placer sur plusieurs lignes */
    margin: 30px 0px 20px 0px;
}
/* Définition des diapositives */
.slide4 {
    flex: 0 0 100%;
    /* Largeur de chaque diapositive est de 100% */
    height: 100%;
    /* Hauteur de chaque diapositive est de 100% */
    transition: .5s ease-in-out;
    /* Ajout d'une animation douce pour la transition entre les diapositives */
}
/* Définition de l'affichage de l'image de chaque diapositive */
.slide4 img {
    width: 100%;
    /* Largeur de l'image est de 100% */
    height: 100%;
    /* Hauteur de l'image est de 100% */
    object-fit: cover;
    /* Couvre tout l'espace disponible */
}

/* Définition des boutons de contrôle du carousel prev + next */
.carousel-controls4 {
    position: absolute;
    /* Les boutons sont absolument positionnés */
    z-index: -1;
    /* Ils sont placés au-dessus des autres éléments */
    left: 10%;
    /* La distance à gauche est de 10% */
    right: 10%;
    /* La distance à droite est de 10% */
    top: 50%;
    /* La distance du haut est de 50% */
    display: flex;
    /* Affiche les boutons en ligne */
    justify-content: space-between;
    /* Espacement égal entre les boutons */
}
/* Style des boutons de contrôle prev + next */
.carousel-controls4 button {
    padding: 10px;
    /* Ajout de padding pour un meilleur contrôle */
    background-color: rgba(255,255,255,0);
    /* Arrière-plan en aquamarine */
}

/* Définition des points de contrôle */
.carousel-dots4 {
    position: absolute;
    /* Les points sont absolument positionnés */
    z-index: 0;
    /* Ils sont placés au-dessus des autres éléments */
    left: 50%;
    /* La distance à gauche est de 50% */
    right: 50%;
    /* La distance à droite est de 50% */
    bottom: -3.5%;
    /*La distance du bas est de 10% */
    display: flex;
    /* Affiche les points en ligne */
    justify-content: center;
    /* Centrage des points */
}
/* Style des points de contrôle */
.carousel-dots4 .dot4 {
    border-radius: 50%;
    /* Les points sont en forme de cercle */
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 1px;
    /* Ajout d'un margin pour un meilleur contrôle */
    cursor: pointer;
    /* Curseur en forme de main pour un meilleur contrôle */
}
/* Styles pour les points de navigation du carrousel */
.carousel-dots4 .active {
    /* Border de 10px pour le point actif */
    border: 7px solid #71fbfd!important;
    /* !important permet de surcharger les autres styles éventuels */
}
.carousel-dots4 .inactive {
    /* Border de 10px pour les points inactifs */
    border: 7px solid #fd7371;
}


/* ------------------------------------------------------------------------------------ */


/* CARROUSEL #5 */

/* Définition d'un container pour gérer l'affichage */
.container5 {
    overflow: hidden;
    /* Cache les éléments qui dépassent du container */
}
/* Définition du carousel */
.carousel5 {
    position: relative;
    /* Le carousel est positionné relativement à son parent */
}
/* Définition de l'élément contenant les diapositives */
.carousel-inner5 {
    display: flex;
    /* Affiche les éléments en ligne */
    overflow: hidden;
    /* Cache les éléments qui dépassent */
    height: 50%;
    /* Hauteur égale à 100% de la hauteur de la vue */
    flex-wrap: nowrap;
    /* Empêche les éléments de se placer sur plusieurs lignes */
    margin: 30px 0px 20px 0px;
}
/* Définition des diapositives */
.slide5 {
    flex: 0 0 100%;
    /* Largeur de chaque diapositive est de 100% */
    height: 100%;
    /* Hauteur de chaque diapositive est de 100% */
    transition: .5s ease-in-out;
    /* Ajout d'une animation douce pour la transition entre les diapositives */
}
/* Définition de l'affichage de l'image de chaque diapositive */
.slide5 img {
    width: 100%;
    /* Largeur de l'image est de 100% */
    height: 100%;
    /* Hauteur de l'image est de 100% */
    object-fit: cover;
    /* Couvre tout l'espace disponible */
}

/* Définition des boutons de contrôle du carousel prev + next */
.carousel-controls5 {
    position: absolute;
    /* Les boutons sont absolument positionnés */
    z-index: -1;
    /* Ils sont placés au-dessus des autres éléments */
    left: 10%;
    /* La distance à gauche est de 10% */
    right: 10%;
    /* La distance à droite est de 10% */
    top: 50%;
    /* La distance du haut est de 50% */
    display: flex;
    /* Affiche les boutons en ligne */
    justify-content: space-between;
    /* Espacement égal entre les boutons */
}
/* Style des boutons de contrôle prev + next */
.carousel-controls5 button {
    padding: 10px;
    /* Ajout de padding pour un meilleur contrôle */
    background-color: rgba(255,255,255,0);
    /* Arrière-plan en aquamarine */
}

/* Définition des points de contrôle */
.carousel-dots5 {
    position: absolute;
    /* Les points sont absolument positionnés */
    z-index: 0;
    /* Ils sont placés au-dessus des autres éléments */
    left: 50%;
    /* La distance à gauche est de 50% */
    right: 50%;
    /* La distance à droite est de 50% */
    bottom: -3.5%;
    /*La distance du bas est de 10% */
    display: flex;
    /* Affiche les points en ligne */
    justify-content: center;
    /* Centrage des points */
}
/* Style des points de contrôle */
.carousel-dots5 .dot5 {
    border-radius: 50%;
    /* Les points sont en forme de cercle */
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 1px;
    /* Ajout d'un margin pour un meilleur contrôle */
    cursor: pointer;
    /* Curseur en forme de main pour un meilleur contrôle */
}
/* Styles pour les points de navigation du carrousel */
.carousel-dots5 .active {
    /* Border de 10px pour le point actif */
    border: 7px solid #71fbfd!important;
    /* !important permet de surcharger les autres styles éventuels */
}
.carousel-dots5 .inactive {
    /* Border de 10px pour les points inactifs */
    border: 7px solid #fd7371;
}


/* ------------------------------------------------------------------------------------ */


/* CARROUSEL #6 */

/* Définition d'un container pour gérer l'affichage */
.container6 {
    overflow: hidden;
    /* Cache les éléments qui dépassent du container */
}
/* Définition du carousel */
.carousel6 {
    position: relative;
    /* Le carousel est positionné relativement à son parent */
}
/* Définition de l'élément contenant les diapositives */
.carousel-inner6 {
    display: flex;
    /* Affiche les éléments en ligne */
    overflow: hidden;
    /* Cache les éléments qui dépassent */
    height: 50%;
    /* Hauteur égale à 100% de la hauteur de la vue */
    flex-wrap: nowrap;
    /* Empêche les éléments de se placer sur plusieurs lignes */
    margin: 30px 0px 20px 0px;
}
/* Définition des diapositives */
.slide6 {
    flex: 0 0 100%;
    /* Largeur de chaque diapositive est de 100% */
    height: 100%;
    /* Hauteur de chaque diapositive est de 100% */
    transition: .5s ease-in-out;
    /* Ajout d'une animation douce pour la transition entre les diapositives */
}
/* Définition de l'affichage de l'image de chaque diapositive */
.slide6 img {
    width: 100%;
    /* Largeur de l'image est de 100% */
    height: 100%;
    /* Hauteur de l'image est de 100% */
    object-fit: cover;
    /* Couvre tout l'espace disponible */
}

/* Définition des boutons de contrôle du carousel prev + next */
.carousel-controls6 {
    position: absolute;
    /* Les boutons sont absolument positionnés */
    z-index: -1;
    /* Ils sont placés au-dessus des autres éléments */
    left: 10%;
    /* La distance à gauche est de 10% */
    right: 10%;
    /* La distance à droite est de 10% */
    top: 50%;
    /* La distance du haut est de 50% */
    display: flex;
    /* Affiche les boutons en ligne */
    justify-content: space-between;
    /* Espacement égal entre les boutons */
}
/* Style des boutons de contrôle prev + next */
.carousel-controls6 button {
    padding: 10px;
    /* Ajout de padding pour un meilleur contrôle */
    background-color: rgba(255,255,255,0);
    /* Arrière-plan en aquamarine */
}

/* Définition des points de contrôle */
.carousel-dots6 {
    position: absolute;
    /* Les points sont absolument positionnés */
    z-index: 0;
    /* Ils sont placés au-dessus des autres éléments */
    left: 50%;
    /* La distance à gauche est de 50% */
    right: 50%;
    /* La distance à droite est de 50% */
    bottom: -3.5%;
    /*La distance du bas est de 10% */
    display: flex;
    /* Affiche les points en ligne */
    justify-content: center;
    /* Centrage des points */
}
/* Style des points de contrôle */
.carousel-dots6 .dot6 {
    border-radius: 50%;
    /* Les points sont en forme de cercle */
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 1px;
    /* Ajout d'un margin pour un meilleur contrôle */
    cursor: pointer;
    /* Curseur en forme de main pour un meilleur contrôle */
}
/* Styles pour les points de navigation du carrousel */
.carousel-dots6 .active {
    /* Border de 10px pour le point actif */
    border: 7px solid #71fbfd!important;
    /* !important permet de surcharger les autres styles éventuels */
}
.carousel-dots6 .inactive {
    /* Border de 10px pour les points inactifs */
    border: 7px solid #fd7371;
}