/* TITRE */
.debut {
    background-image: url("img/degrade.png");
    background-size: cover;
    background-position: center;
    margin-top: 1em;
    margin-bottom: 5em;
}

#titre {
    color: rgb(255, 255, 255);
    font-size: 6em;
    padding-bottom: 0.1em;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    font-weight: 400;
    margin: 0%;
    padding-bottom: 0%;
    padding-top: 8%;
}

@media screen and (max-width: 800px) {
    #titre {
        color: rgb(255, 255, 255);
        font-size: 5em;
        padding-bottom: 0.1em;
        background-size: cover;
        background-position: top;
        background-attachment: fixed;
        font-weight: 400;
        margin: 0%;
        padding-top: 20%;
    }

    #portfolio {
        color: white;
        font-size: 1.5em;
        padding-bottom: 3em;
        font-weight: 400;
        letter-spacing: 0.3em;
        margin: 0%;
        padding-top: 0%;
        padding-bottom: 5%;
    }
}

#portfolio {
    color: white;
    padding-bottom: 3em;
    font-weight: 400;
    letter-spacing: 0.3em;
    margin: 0%;
    padding-top: 0%;
    padding-bottom: 5%;
}

/* FIN TITRE */






/* BLOCKS*/
.soustitre {
    font-weight: 400;
}

.soustitre:hover {
    color: #00a4d6;
    transition: 0.3s;
}

a h3.soustitre {
    color: black;
    font-size: 2em;
    margin: 0.2em;
    text-align: justify;
    margin: 0%;
}

.block {
    text-align: justify;
    padding: 2em 5em 2em 5em;
}

@media screen and (max-width: 1200px) {
    .block {
        text-align: justify;
        padding: 2em 1.5em 2em 1.5em;
    }
}


.trio {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0em 5em 0em 5em;
}


.info {
    width: 15em;
    text-align: justify;
    padding-bottom: 1em;
    margin: auto;
    font-size: 1.3em;
}

.rounding {
    overflow: hidden;
    border-radius: 50%;
    width: 20em;
    height: 20em;
    object-fit: cover;

}

/* FIN BLOCKS*/




/* SUNSET */
.sunset {
    margin: 1em 0.5em 1em 0.5em;
    width: 15em;
    height: 25em;
    object-fit: cover;

}

.sectiontitle {
    font-size: 4em;
}



.sunsetinfo {
    font-size: 1.5em;
    margin: 0.5em 0em 1em 0em;
}

.sunsetsection {
    margin: 10em 0em 10em 0em;
}


@media screen and (max-width: 800px) {
    .sunsettitle {
        font-size: 2.5em;
    }

    .sunsetinfo {
        font-size: 1.3em;
        margin: 0.5em 0em 1em 0em;
    }

    .sunset {
        margin: 0.5em 0em 0.5em 0em;
        width: auto;
        object-fit: cover;

    }
}

/* FIN SUNSET */


/* CAROUSEL */

/* Définition d'un container pour gérer l'affichage */
.container {
    overflow: hidden;
    /* Cache les éléments qui dépassent du container */
}

/* Définition du carousel */
.carousel {
    position: relative;
    /* Le carousel est positionné relativement à son parent */
}

/* Définition de l'élément contenant les diapositives */
.carousel-inner {
    display: flex;
    /* Affiche les éléments en ligne */
    overflow: hidden;
    /* Cache les éléments qui dépassent */
    height: 100vh;
    /* Hauteur égale à 100% de la hauteur de la vue */
    flex-wrap: nowrap;
    /* Empêche les éléments de se placer sur plusieurs lignes */
}

/* Définition des diapositives */
.slide {
    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 */
.slide img {
    width: 60em;
    /* Largeur de l'image est de 100% */
    height: 60em;
    /* Hauteur de l'image est de 100% */
    object-fit: cover;
    /* Couvre tout l'espace disponible */
}

/* Définition des boutons de contrôle du carousel */
.carousel-controls {
    position: absolute;
    /* Les boutons sont absolument positionnés */
    z-index: 5;
    /* 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 */
}




/* ne pas afficher les boutons sur telephone */
@media screen and (max-width: 1000px) {
    .carousel-controls button {
        display: none
    }
}

/* Style des boutons de contrôle */
.carousel-controls button {
    padding: 10px;
    /* Ajout de padding pour un meilleur contrôle */
    width: 80px;
    height: 80px;
    background: grey;
    border: 2px solid grey;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}



.carousel-controls button:hover {
    background: #65d8e7;
    border-color: #65d8e7;
}



#prev2 {
    border: solid rgb(255, 255, 255);
    border-width: 0 5px 5px 0;
    display: inline-block;
    padding: 7px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}


#next2 {
    border: solid rgb(255, 255, 255);
    border-width: 0 5px 5px 0;
    display: inline-block;
    padding: 7px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}




/* Définition des points de contrôle */
.carousel-dots {
    position: absolute;
    /* Les points sont absolument positionnés */
    z-index: 5;
    /* 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: 10%;
    /*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-dots .dot {
    border-radius: 50%;
    /* Les points sont en forme de cercle */
    margin: 5px;
    /* 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-dots .active {
    /* Border de 10px pour le point actif */
    border: 10px solid #65d8e7 !important;
    /* !important permet de surcharger les autres styles éventuels */
}

.carousel-dots .inactive {
    /* Border de 10px pour les points inactifs */
    border: 10px solid #464646;
}