.titre{
    font-size :64px;
    font-family: 'Roboto-Medium', sans-serif;
    margin-left:10%;
    margin-right:5%;
}

.titre h1{
    margin-bottom:1%;
}

.ligne1 {
    display: flex; 
    align-items: center; /* Aligne le texte et l'image verticalement */
}

.ligne1 h1 {
    margin-bottom: 0; /* Supprime le margin-bottom si nécessaire */
}

#etoiletitre {
    margin-left: 20px; /* Ajoute un espace entre le texte et l'image */
    height: 56px; /* Ajustez la taille de l'étoile si nécessaire */
    animation: rotateStar 10s linear infinite; /* Animation de rotation continue */
}

.ligne2 {
    display: flex;
    align-items: center; /* Aligne le texte et la flèche verticalement */
}

#flechetitre {
    margin-right: 20px; /* Ajoute un espace entre la flèche et le texte */
    height: 24px; /* Ajustez la taille de la flèche si nécessaire */
    animation: bounceArrow 2s infinite; /* Applique l'animation */
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); /* Effet de rebond */ 
}

.sommaire{
    font-family: 'Roboto-Medium', sans-serif;
    font-size: 27px;
    overflow: hidden; /* Empêche le débordement */

}

.sommaire a{
    text-decoration: none;
}

.grid1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 580px;
    margin-bottom:3%;
    margin-top:80px;
    overflow: hidden; /* Pour éviter tout débordement */

}
.grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 580px;
    gap: 30px;
    overflow: hidden; /* Pour éviter tout débordement */
}


/* Cartes du sommaire */
.gestion, .graphisme, .web, .audiovisuel {
    position: relative;
    background-color: white;
    border: 3px solid #C6AEBC;
    border-radius: 15px;
    text-align: center; /* Centre le texte horizontalement */
    padding: 20px;

    display: flex; /* Active Flexbox */
    flex-direction: column; /* Les enfants sont empilés verticalement */
    justify-content: center; /* Centre verticalement */
    align-items: center; /* Centre horizontalement */
    height: 171px; /* Hauteur fixe pour les cartes (à ajuster si nécessaire) */
    box-sizing: border-box; /* Prend en compte les bordures et paddings */
    color: rgb(0, 0, 0); /* Assure que le texte est visible */
    transition: width 0.3s ease, transform 0.3s ease; /* Transition fluide sur la largeur et la transformation */
}


/* Cartes avec fond violet */
.web, .audiovisuel {
    background-color: #C6AEBC;
}

.gestion{
    width:360px;

}

.web{
    width:189px;
}



.conteneur {
    display: flex; /* Aligne les enfants en ligne */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
}

main{
    margin-top:2%;
}

#gestiontitre{
    margin-bottom:2%;
}

#ligne{
    position: absolute;
    top:100px;
}

#web{
    position: absolute;
}

#audiovisuel{
    position: absolute;
}

#graph, #graph2{
    position: absolute;
}

#graph{
    right:230px;
    top: 35px;
}

#graph2{
    left:230px;
    bottom:35px;
}




.gestion:hover + .web {
    width: 155px; 
    transition: width 0.3s ease;
}

.gestion:hover{
    width: 400px; /* Nouvelle largeur lors du survol */

}

.gestion:hover + .web #web {
    transform: scale(0.8); /* Réduit la taille à 80% de l'original */
}

.gestion:hover + .web p {
    font-size:19px ;
}


#web, .web p {
    transition: all 0.3s ease-in-out;
}

/* Effet de survol : agrandissement de la largeur */
.web:hover{
    width: 220px; /* Nouvelle largeur lors du survol */
}

/* Animation de rotation légère de l'image dans .web */
.web:hover img {
    animation: rotateLight 3s linear infinite; /* Rotation continue à une vitesse de 3 secondes */
}

/* Définition de l'animation de rotation légère */
@keyframes rotateLight {
    0% {
        transform: rotate(0deg); /* Position initiale */
    }
    100% {
        transform: rotate(  80deg); /* Rotation de 10 degrés dans le sens des aiguilles d'une montre */
    }
}


.audiovisuel:hover{
    transition: all 0.3s ease; /* Applique la transition à toutes les propriétés */

}


/* Lorsque .audiovisuel est survolé, déplace les étoiles dans .graphisme */
.audiovisuel:hover ~ .graphisme #graph {
    transform: translateX(20px); /* Déplace l'étoile #graph vers la droite et vers le haut */
}

.audiovisuel:hover ~ .graphisme #graph2 {
    transform: translateX(-20px); /* Déplace l'étoile #graph2 vers la gauche et vers le bas */
}

/* Applique une transition fluide pour le changement de position des étoiles */
.graphisme #graph, .graphisme #graph2 {
    transition: transform 0.3s ease; /* Transition fluide sur la transformation (position) */
}


/* Effet de survol : agrandissement de la largeur */
.graphisme:hover{
    width: 338px; /* Nouvelle largeur lors du survol */
    transition: all 0.3s ease;
}



.graphisme p {
    transition: all 0.3s ease-in-out;
}

/* Animation de rotation continue pour les étoiles dans .graphisme */
.graphisme:hover #graph, 
.graphisme:hover #graph2 {
    animation: rotateStars 5s linear infinite; /* Rotation continue à une vitesse de 5 secondes */
}

/* Définition de l'animation de rotation des étoiles */
@keyframes rotateStars {
    0% {
        transform: rotate(0deg); /* Position initiale */
    }
    100% {
        transform: rotate(360deg); /* Rotation complète de 360 degrés */
    }
}


#scroll{
    font-family: 'Roboto-Medium', sans-serif;
}

.scroll{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-top:7%;
    font-size: 14px;
    animation: scrollAnimation 2s ease-in-out infinite; /* Animation continue */

}

.scroll img{
    background-color: #C6AEBC;
    border-radius: 50%; /* Pour obtenir un cercle */
    width: 30px; /* Largeur du cercle (ajustez selon la taille souhaitée) */
    height: 30px; /* Hauteur du cercle (doit être égal à la largeur pour obtenir un cercle parfait) */
    margin-bottom:0.5%;
    padding:5px;
}

.scroll a{
    text-decoration: none;
    color: black;
}

/* Animation de la flèche qui bouge de haut en bas */
@keyframes scrollAnimation {
    0% {
        transform: translateY(0); /* Position initiale (en haut) */
    }
    50% {
        transform: translateY(10px); /* Déplacer vers le bas (ajustez la valeur selon vos besoins) */
    }
    100% {
        transform: translateY(0); /* Retour à la position initiale */
    }
}

@keyframes bounceArrow {
    0% {
        transform: translateX(0); /* Position initiale */
    }
    50% {
        transform: translateX(10px); /* Déplacement vers la droite */
    }
    100% {
        transform: translateX(0); /* Retour à la position initiale */
    }
}

/* Animation de la rotation de l'étoile */
@keyframes rotateStar {
    0% {
        transform: rotate(0deg); /* Position de départ (aucune rotation) */
    }
    100% {
        transform: rotate(360deg); /* Rotation complète (360 degrés) */
    }
}



::-webkit-scrollbar {
    width: 12px; /* Largeur de la barre verticale */
    height: 12px; /* Hauteur de la barre horizontale */
  }

  /* Couleur de fond de la piste de défilement */
  ::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 10px;
  }

  /* Couleur et style de la poignée (le thumb) */
  ::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 3px solid #f1f1f1; /* pour un effet d'espace autour du thumb */
  }

  /* Style au survol de la poignée */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }


  /* Responsive pour les écrans de taille inférieure à 768px (mobile) */
@media (max-width: 768px) {

    /* Modification de la mise en page des sections de texte */
    .conteneur {
        flex-direction: column; /* Empile les éléments de manière verticale */
        align-items: center;
        justify-content: flex-start; /* La phrase apparaît d'abord */
    }

    /* Modifier le style de .titre pour qu'il soit bien centré et visible */
    .titre {
        font-size: 48px; /* Réduit la taille du texte sur mobile */
        margin-left: 5%;
        margin-right: 5%;
        margin-top:10%;
        text-align: center; /* Centre le texte pour les petits écrans */
    }

    .ligne1, .ligne2 {
        flex-direction: column; /* Empile les éléments textuels et les images */
        align-items: center; /* Centre les éléments */
    }

    /* Ajuste les images dans les lignes pour les rendre plus petites sur mobile */
    #etoiletitre {
        width: 70px; /* Réduit la taille des icônes sur mobile */
        position: absolute;
        left:75%;
        top:18%;
    }

    #flechetitre{
        width: 80px; /* Réduit la taille des icônes sur mobile */
        position: absolute;
        top:42%;
    }

    /* Modifie la disposition du sommaire */
    .sommaire {
        font-size: 22px; /* Réduit la taille du texte */
    }
    .web img, .audiovisuel img, .graphisme img{
        display: none;
    }

    /* Utilise une seule colonne pour les éléments du sommaire */
    .grid1, .grid2 {
        grid-template-columns: 1fr; /* Une seule colonne au lieu de deux */
        max-width: 100%; /* S'adapte à la largeur de l'écran */
        gap: 20px; /* Réduit l'écart entre les éléments */
    }
    .grid2{
        margin-top:20px;
    }

    /* Ajuste la largeur des éléments du sommaire */
    .gestion, .web, .audiovisuel, .graphisme {
        width: 100%; /* Utilise toute la largeur disponible */
        height: auto; /* Ajuste la hauteur selon le contenu */
    }


    /* Réduit la taille des images dans les éléments du sommaire */
    #etoiletitre, #flechetitre, #ligne, #web, #audiovisuel, #graph, #graph2 {
        height: 40px; /* Réduit la taille des icônes */
    }

    /* Ajuste les styles de survol sur mobile pour éviter trop de changement */
    .gestion:hover, .web:hover, .audiovisuel:hover, .graphisme:hover {
        width: 100%; /* Ne pas agrandir les cartes au survol */
    }

    /* Empêche la transformation des images des cartes sur mobile */
    .gestion:hover + .web #web, .gestion:hover + .web p {
        transform: none;
        font-size: inherit;
    }

    .gestion:hover + .web {
        width: 100%; /* Enlève l'effet de survol sur mobile */
    }

    /* Modifie les animations pour les petits écrans */
    .web:hover img, .graphisme:hover #graph, .graphisme:hover #graph2 {
        animation: none; /* Désactive les animations sur mobile */
    }

    /* Ajuste la taille des flèches et étoiles sur mobile */
    #graph, #graph2 {
        width: 30px; /* Réduit la taille des étoiles */
        height: 30px;
    }

    /* Ajout de marges pour la partie scroll */
    .scroll {
        margin-top: 50px;
        margin-bottom:40px;
    }


    .titregestiondeprojet h1{
        font-size:40px;
        white-space: nowrap;
        padding-top:5%;
    }
    .titregestiondeprojet .plein{
        position: absolute;
        top:20%;
        left:9%;
    }
    .titregestiondeprojet .contour{
        position: absolute;
        top:5%;
        left:50%;
    }

    #etoileblanche, #etoilenoire{
        display: none;
    }
}