/* Réinitialisation des styles */
body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: 'Roboto', sans-serif; /* Appliquer Roboto comme police par défaut */
}

/* Styles pour l'animation de fond */
.animation-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(49,125,163,1) 100%);
}

.smooth-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(49,125,163,1) 100%);
    opacity: 0;
    animation: smoothFade 5s infinite linear;
    mix-blend-mode: screen; /* Effet de mélange pour plus de visibilité */
    z-index: 1; /* Au-dessus du fond */
}

@keyframes smoothFade {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Styles pour le conteneur du CV */
.cv-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%; /* Largeur initiale du conteneur du CV */
    height: 95%; /* Hauteur initiale du conteneur du CV */
    padding: 30px; /* Espacement interne */
    background-color: rgba(255, 255, 255, 0.9); /* Couleur de fond semi-transparente */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); /* Ombre légère */
    border-radius: 10px; /* Coins arrondis */
    z-index: 2; /* Au-dessus de l'animation */
    animation: expandCV 1s ease forwards; /* Animation pour faire agrandir */
    opacity: 0.2; /* Initialement invisible */
    scrollbar-width: thin; /* Réduit la largeur de l'ascenseur */
    scrollbar-color: #317da3 rgba(0, 0, 0, 0.1); /* Couleurs de l'ascenseur */
}

/* Animation pour agrandir le bloc CV */
@keyframes expandCV {
    0% {
        width: 0%;
        height: 0%;
        opacity: 0;
    }
    100% {
        width: 90%; /* Largeur finale du conteneur du CV */
        height: 90%; /* Hauteur finale du conteneur du CV */
        opacity: 1;
    }
}

/* Styles pour le contenu du CV */
.cv-content {
    color: #333; /* Couleur du texte */
    text-align: left; /* Alignement du texte */
    overflow-y: auto; /* Activation du défilement vertical si nécessaire */
    height: 100%; /* Hauteur maximale pour le défilement */
    padding-right: 15px; /* Espacement à droite pour éviter le débordement */
}

.cv-content h1 {
    font-size: 3.5rem;
    margin-bottom: 10px; /* Marge basse pour séparation */
    text-align: center;
}

.cv-content h2 {
    font-size: 1.5rem;
    margin-top: 20px; /* Marge haute pour séparation */
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(49,125,163,1) 100%);
    color: #ffffff;
    padding-left: 10px;
    border-radius: 10px;
    text-align: center; /* Centrage horizontal du texte */
}

.cv-content h3 {
    font-size: 1.5rem;
    margin-top: 5px; /* Marge haute pour séparation */
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(49,125,163,1) 100%);
    color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    text-align: center; /* Centrage horizontal du texte */
}

.cv-content h5 {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: left; /* Alignement du texte */
}

.cv-content p {
    font-size: 1.1rem;
    line-height: 1.6; /* Hauteur de ligne agréable */
    margin-bottom: 10px; /* Espacement entre les paragraphes */
}

.cv-content a {
    color: #007bff; /* Couleur du lien */
    text-decoration: none; /* Suppression du soulignement par défaut */
    font-weight: bold; /* Texte en gras */
}

.cv-content a:hover {
    text-decoration: underline; /* Soulignement au survol */
}

.personal-info {
    display: flex;
    justify-content: center; /* Centre les éléments horizontalement */
    align-items: center; /* Centre les éléments verticalement */
    flex-wrap: wrap; /* Permet l'ajustement sur les petits écrans */
    gap: 15px; /* Espacement entre les éléments */
    margin-bottom: 30px; /* Espacement en bas du bloc */
    text-align: center; /* Centre le texte à l'intérieur des éléments */
}

.personal-info span, .personal-info a {
    font-size: 1.1rem;
}

.externalLinks {
    background: linear-gradient(90deg, rgba(102,102,102,1) 0%, rgba(185,185,185,1) 50%, rgba(102,102,102,1) 100%);
    padding: 0 0 10px 0; /* haut, droite, bas, gauche */
    border-radius: 10px;
    margin-bottom: 20px;
}

.externalLinksTitle {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 0px;
    border-radius: 10px 10px 0 0;
    background-color: #2e2e2e;
    color: #ffffff;
    text-align: center;
}

.date {
    font-size: 1.2rem;
    margin-top: 5px; /* Marge haute pour séparation */
    background: linear-gradient(-90deg, rgb(201, 201, 201) 0%, rgba(49,125,163,1) 100%);
    color: #ffffff;
    padding: 2px 2px 2px 10px; /*haut, droite, bas, gauche*/
    border-radius: 10px;
    text-align: left; /* Alignement du texte */
}

.OrganisationContainer {
    display: flex;
    align-items: center;
    margin: 10px;
}

.LogoContainer {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de s'ajuster à la ligne suivante */
    gap: 10px; /* Espacement entre les éléments */
    justify-content: center; /* Centre les éléments horizontalement */
}

.LogoContainer a {
    display: flex;
    flex-direction: column; /* Empile les éléments verticalement */
    align-items: center; /* Centre les éléments horizontalement */
    text-decoration: none; /* Supprime le soulignement des liens */
    color: #000000; /* Couleur du texte */
    font-weight: bold; /* Texte en gras */
    transition: transform 0.3s ease; /* Transition pour l'effet de survol */
    padding: 10px;
    margin: 5px;
}

.LogoContainer a:hover {
    transform: scale(1.1); /* Agrandit légèrement au survol */
    box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    background-color: #007bff;
}

.LogoContainer img {
    max-width: 50px; /* Ajustez la largeur maximale selon vos besoins */
    height: auto; /* Assurez-vous que la hauteur s'ajuste proportionnellement */
}

.LogoContainer span {
    margin-top: 5px; /* Espacement au-dessus du texte */
    font-size: 0.9rem; /* Taille de police pour le texte */
    color: #ffffff; /* Couleur du texte */
}

.LocationContainer {
    flex: 1;
    font-size: 1rem;
    color: #555;
    background-color: #f2f2f2;
    padding: 8px;
    border-radius: 8px;
    text-align: center; /* Centrage horizontal du texte */
}

.historique {
    font-size: 1.1rem;
    margin-top: 20px;
    padding: 10px;
    background-color: #f2f2f2;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center; /* Centrage horizontal du texte */
}

/* Styles pour le bouton de téléchargement */
.download-section {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement si nécessaire */
    margin-top: 20px; /* Espacement au-dessus du bouton */
}

.download-section button {
    padding: 10px 10px; /* Espace interne du bouton */
    font-size: 1.2rem; /* Taille de la police */
    border: none; /* Supprime la bordure par défaut */
    border-radius: 25px; /* Coins arrondis */
    background: linear-gradient(135deg, #007bff, #00aaff); /* Dégradé de couleur */
    color: white; /* Couleur du texte du bouton */
    cursor: pointer; /* Change le curseur au survol */
    transition: all 0.3s ease; /* Transition fluide pour le changement d'état */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre légère */
    font-weight: bold; /* Texte en gras */
    text-transform: uppercase; /* Transforme le texte en majuscules */
    margin: 10px; /* Assure qu'il n'y a pas de marge supplémentaire */
}

.download-section button:hover {
    background: linear-gradient(135deg, #0056b3, #0099ff); /* Dégradé de couleur au survol */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Ombre plus prononcée au survol */
    transform: translateY(-2px); /* Légère élévation au survol */
}

.download-section button:active {
    background: linear-gradient(135deg, #004494, #0080cc); /* Dégradé plus foncé lors du clic */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ombre réduite lors du clic */
    transform: translateY(0); /* Remet le bouton à sa position d'origine lors du clic */
}

/* Conteneur pour le QR code */
.qrcode-container {
    display: flex;
    justify-content: center; /* Centre horizontalement le QR code */
}

/* Styles pour le QR code */
.qrcode {
    width: 150px; /* Largeur du QR Code */
    height: 150px; /* Hauteur du QR Code */
    margin: 10px;
}

/* Media Query pour la version mobile */
@media (max-width: 768px) {
    .cv-container {
        width: 95%; /* Augmentation de la largeur pour les petits écrans */
        height: 95%; /* Augmentation de la hauteur pour les petits écrans */
        padding: 10px; /* Espacement interne légèrement ajusté pour les petits écrans */
    }

    .cv-content {
        font-size: 1rem; /* Réduction de la taille de la police pour les petits écrans, légèrement augmentée par rapport à la valeur précédente */
    }

    .personal-info {
        gap: 10px; /* Réduction de l'espacement sur petits écrans */
    }

    .qrcode {
        width: 100px; /* Réduction de la largeur du QR Code pour les petits écrans */
        height: 100px; /* Réduction de la hauteur du QR Code pour les petits écrans */
    }
}

/* Style général pour les liens */
a {
    color: #ffffff; /* Couleur de lien par défaut */
    text-decoration: none; /* Supprime le soulignement par défaut */
    transition: color 0.3s ease; /* Transition fluide de la couleur */
    font-weight: bold; /* Texte en gras */
}

a:hover {
    color: #002750; /* couleur au survol */
    text-decoration: none !important; /* Supprime le soulignement au survol */
}

/* Styles spécifiques pour l'impression */
@media print {
    body {
        font-size: 12pt; /* Ajustez la taille de la police pour l'impression si nécessaire */
        color: black; /* Assurez-vous que le texte est en noir pour une meilleure lisibilité */
    }

    /* Assurez-vous que les couleurs de fond et les bordures sont visibles */
    .cv-container, .cv-content, .personal-info, .OrganisationContainer {
        background-color: white;
        color: black;
    }

    /* Masquer les éléments inutiles pour l'impression (comme les boutons) */
    button {
        display: none;
    }

    /* Autres ajustements spécifiques à l'impression */
}