html {
    scroll-behavior: smooth; /* Active un défilement fluide */
}

/* Conteneur principal */
.titregestiondeprojet {
    position: relative; /* Position relative pour l'alignement */
    text-align: center; /* Centre le texte horizontalement */
    background-color: #C6AEBC; /* Couleur de fond similaire */
    padding: 43px 0; /* Espacement vertical */
    font-size: 80px; /* Taille de police */
}

/* Texte en contour */
.contour ,.contourmoins {
    position: absolute; /* Superposition des titres */
    top: 0; /* Alignement en haut */
    left: 50%; /* Centre horizontalement */
    transform: translateX(-50%); /* Ajuste pour un centrage parfait */
    font-family: 'Roboto', sans-serif; /* Police utilisée */
    color: transparent; /* Texte transparent */
    -webkit-text-stroke: 0.5px white; /* Contour blanc */
    z-index: 1; /* Derrière le texte plein */
}

/* Positionnement spécifique des titres en contour */
.contourmoins {
    top: -13px; /* Légèrement déplacé vers le haut */
    left: 50%; /* Décalage à gauche */
    opacity: 0.2; /* Opacité réduite pour un effet atténué */
    margin-top:3%;
}

.contour {
    top: 13px; /* Légèrement déplacé vers le bas */
    left: 50%; /* Décalage à droite */
    opacity: 0.6; /* Opacité réduite pour un effet atténué */
    margin-top:3%;
 
}

/* Texte plein au premier plan */
.plein {
    position: relative; /* Superposé au texte contour */
    font-family: 'Roboto-Medium', sans-serif; /* Police utilisée */
    color: white; /* Texte blanc */
    z-index: 2; /* Devant les contours */
    margin-top:3%;

}


.titregestiondeprojet{
    margin-top:5%;
}

.gestiondeprojet{
    height: 680px;
    background-color: #C6AEBC;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


.card{
    height:219px;
    width:405px;
    border-radius: 15px;
    background-color: #ffffff;
    box-shadow: none;
    transition: box-shadow 0.3s ease-in-out; /* Transition douce de l'ombre */
    margin-top:12%;
}

/* Pas d'ombre au survol */
.card:hover{
    box-shadow: 7px 7px 0px 0px  rgb(0, 0, 0);
    transition: box-shadow 0.3s ease-in-out;
  }

.etoilegestion1{
    display: flex;
    grid-column-start: 1;
}

#etoileblanche{
    width:60px;
    position: absolute;
    margin-left:7%;
    z-index: 1;
    animation: scintillement 2.5s infinite; /* Animation continue avec un délai de 1.5 secondes */
    animation-delay: 0s; /* Début immédiat */

}
#etoilenoire{
    width:60px;
    position: absolute;
    margin-left:6%;
    animation: scintillement 2.5s infinite; /* Animation continue avec un délai de 1.5 secondes */
    animation-delay: 0.7s; /* Début immédiat */


}

.etoilegestion2{
    display: flex;
    grid-column-start: 4;
}

#etoileblanche1{
    width:60px;
    position: absolute;
    margin-top:20%;
    margin-left:6%;
    z-index: 1;
    animation: scintillement 2.5s infinite; /* Animation continue avec un délai de 1.5 secondes */
    animation-delay: 0s; /* Début immédiat */

}
#etoilenoire1{
    margin-top:20%;
    width:60px;
    position: absolute;
    margin-left:7%;
    animation: scintillement 2.5s infinite; /* Animation continue avec un délai de 1.5 secondes */
    animation-delay: 0.7s; /* Début immédiat */


}


#imgskop{
    height:100px;
    margin-top:4%;
    margin-left:15%;
    position: absolute;
}


.grid a{
    text-decoration: none;
}

#titre{
    font-family: 'Roboto-Medium';
    position: absolute;
    text-align: center;
    color: black;
    font-size: 27px;
    margin-top:6%;
    margin-left:3%;
}



@keyframes scintillement {
    0% {
        opacity: 1; /* Pleine visibilité au début */
    }
    50% {
        opacity: 0; /* Disparaît à 50% */
    }
    100% {
        opacity: 1; /* Réapparaît à 100% */
    }
}

#flechegestion{
    position: absolute;
    margin-top:11.5%;
    margin-left:3%;
}

#decouvrir{
    color: #C6AEBC;
    font-family: 'Roboto-Regular';
    position:absolute;
    margin-top:11.65%;
    margin-left:5.5%;
}

/* Cacher la flèche et le texte "découvrir" par défaut */
#flechegestion,
#decouvrir {
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Transition douce pour l'apparition */
}

/* Afficher la flèche et le texte au survol */
.card:hover #flechegestion,
.card:hover #decouvrir {
    opacity: 1; /* Rendre visible au survol */
}

/* Optionnel : Animation de déplacement */
#flechegestion {
    transform: translateY(10px);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.card:hover #flechegestion {
    transform: translateY(0); /* Remonte à sa position initiale */
}


/* Animation du soulignement sur le texte "découvrir" */
#decouvrir {
    cursor: pointer; /* Curseur pointeur pour indiquer un élément cliquable */
    overflow: hidden;
}

#decouvrir::after {
    content: '';
    display: block;
    width: 0%;
    height: 1.5px;
    background-color: #C6AEBC; /* Couleur de soulignement */
    transition: width 0.3s ease-in-out; /* Transition fluide */
    margin-top: 5px;
}

#decouvrir:hover::after { 
    width: 100%; /* Étend le soulignement sur toute la largeur */
}

/* Styles responsive pour les appareils mobiles */
@media only screen and (max-width: 768px) {

 
    .gestiondeprojet .grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    }

    .gestiondeprojet .grid .card{
        width:80%;
        margin-left:10%;
    }

    .gestiondeprojet .grid .card #titre{
        white-space: nowrap; /* Empêche les retours à la ligne */  
        margin-left: 0;     
    }

    
    .gestiondeprojet .grid .card .imgskop{
       position: absolute;
       bottom: 35px;  
       margin: 0;  
    }
    .gestiondeprojet .grid .card .imgsemaine{
        position: absolute;
        bottom: 30px;  
        margin: 0;  
     }

    #imgskop {
        margin-left: 0 !important;
    }


    /* Alignement des icônes */
    #gestiondeprojet .etoilegestion1, #gestiondeprojet .etoilegestion2 {
        display: none; /* Cache les étoiles sur mobile */
    }
    
}
/* Sur mobile, désactiver le hover et enlever les éléments inutiles */
@media only screen and (max-width: 768px) {
    /* Cacher la flèche et le texte "découvrir" sur mobile */
    #flechegestion,
    #decouvrir {
        display: none !important; /* Cacher les éléments */
    }

    /* Sur mobile, il n'y a plus d'ombre au survol */
    .card:hover {
        box-shadow: none !important; /* Pas d'ombre sur mobile */
    }

    .card {
        position: relative;
        display: flex;
        justify-content: center;
    }

    /* La carte doit être cliquable directement, sans effet hover */
    .card a {
        display: block; /* S'assurer que la carte est un bloc cliquable */
        pointer-events: auto; /* Rendre la carte cliquable */
        width: 100%; /* Prendre toute la largeur */
        text-decoration: none; /* Retirer le soulignement si présent */
    }

    /* La carte ne doit pas avoir d'effet de hover */
    .card:hover {
        box-shadow: none !important; /* Désactiver l'effet d'ombre au survol */
    }
}