/* Variables CSS : Définition des couleurs et des espacements */
:root {
    --bleu: #17BEBB; 
    --orange: #F18724;
    --noir: #191716;
    --sidebar: #FFFDEE; 
    --padding-large: 16px;
}

.bluecolor {
    color: var(--bleu) !important;
}
.orangecolor {
    color: var(--orange);
}
.noircolor {
    color: var(--noir);
}
.ytd-masthead{
    display:none !important;
}
.sidebarbackground {
    background-color: var(--sidebar);
}
body {
    font-family: 'Inter', sans-serif !important;
}
h1, h2, h3 {
    font-weight: bold;
    color : var(--noir);

}
h1 {
    font-size: 2.8em !important;
    opacity: 0;  /* Définir initialement l'opacité à 0 */
    animation: fadeIn 1s ease-out forwards; 
}
h2 {
    font-size: 2.3em !important;
    animation: fadeIn 1s ease-out forwards; 

}
h3 {
    font-size: 2em !important;
}
label {
    font-size: 1.2em !important;
    color : var(--noir);}
p {
    color : var(--noir);

    font-size: 1.2em !important;
    font-weight: 400;
    animation: fadeIn 1s ease-out forwards; 

}
button{
    font-weight:bold;
    font-size: 1.1em !important;

}
li a {
    font-size: 1.1em !important;

    transition : transform 0.3s smooth;
}
.nav-item:hover {
    transform: translateX(5%); /* Moves the link 10 pixels to the right */
    font-weight: bold;
    transition : transform 0.8s smooth;        
}
.orangehover:hover {
    color: var(--orange) !important;
}
.bluehover:hover {
    color: var(--bleu) !important;
}
.redhover:hover {
    color: red !important;
}
.orange {
    color: var(--orange) !important;
}
.blue{
    color: var(--bleu) !important;
}
.listeprojetscol{
    max-width: 50%;
}
.password-icon {
    cursor: pointer;
}
.fade-in-from-left {
    animation: fadeInFromLeft 1s ease-out forwards; /* Animation spécifique pour PC */
}
.fondnoir {
    background-color: rgba(0, 0, 0, 0.5); /* Noir semi-transparent, ajustez l'opacité comme nécessaire */
    transition: background-color 0.5s ease, padding 0.5s ease; /* Animation douce pour le fond et le padding */
}

.fondnoir:hover {
    padding: 8% !important; /* Augmentation du padding lors du survol */
    background-color: rgba(0, 0, 0, 0.8); /* Noir plus opaque au survol */
}



.card-text {
    font-size:1em !important;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-10%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeInFromRight {
    from {
        opacity: 0;
        transform: translateX(+10%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in {
    opacity: 0;  /* Initialement rendu invisible */
    animation: fadeIn 2s ease-out forwards; /* Durée de l'animation, type d'accélération et maintien de l'état final */
}

#Carte:hover {
    transform: scale(1.05);
    transition: transform .2s;

}
.card-text{
    color : gray;
}
#Carte:hover .card-text {
    color : var(--bleu);
    font-weight: regular;
}
#Carte:hover .card-title {
    color : var(--bleu);
}


@media (max-width:768px) {
    .custom-image-height{
        height: 30vh;
    }
    .listeprojetscol {
        width: 100%;
    }
    
}
@media (min-width: 768px) {  /* 768px est généralement la largeur minimale pour md dans Bootstrap */
.custom-vh-100 {
    height: 100vh;
}
.custom-image-height{
        max-height: 50vh;
}
h1, #texteaccueil {
animation: fadeInFromLeft 1s ease-out forwards; /* Animation spécifique pour PC */
}


}