* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Red Hat Display', sans-serif; /* Application de la police à tout */
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgba(255,255,255,1);
    overflow: hidden;
    font-size: 0.9em;
}

a:link {
    text-decoration: none; 
    color: #000;
}

a:visited {
    text-decoration: none;
    color: #000;
}

a:hover, a:active, a:focus { 
    text-decoration: underline overline;
    color: #F00;
}

p {
    margin-bottom: 20px; /* Ajustez la valeur selon l'espace désiré */
        }

.container {
    display: flex;
    width: 100%;
    height: 100%;
}

.left {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2.5%;
    box-sizing: border-box;
    gap: 2%;
}

.header {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto; /* Ajout de la barre de défilement si nécessaire */
    flex: 0 0 20%; /* Retournez à flex si nécessaire pour la mise en page */
	height:20%;
}

.header-image {
    max-width: 100%; /* Assure que l'image ne dépasse pas la largeur disponible */
    height: auto; /* Permet à l'image de conserver ses proportions */
    margin: auto; /* Centre l'image horizontalement */
}

.header h1 {
    margin-bottom: 10px;
}

.header p {
    margin: 0 auto;
    width: 80%;
}

.left-image-container {
    flex: 0 0 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%;
}

.left-image {
    max-height: 100%;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    cursor: pointer;
}

.details-footer-container {
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.details {
    width: 100%;
    text-align: center;
}

.footer {
    text-align: center;
    width: 100%;
    margin-top: auto;
}

.right {
    flex: 1;
    position: relative;
    overflow: hidden;
    padding: 0;
}

.right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.caption {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0); /* Surbrillance noire */
    color: white; /* Texte en blanc */
    padding: 0px;
    border-radius: 0px;
}

.bold {
    font-weight: bold;
}

/* Fenetre modale */
#cv-modal .modal-content {
    display: flex;
    justify-content: center; /* Centrage horizontal */
    align-items: center; /* Centrage vertical */
    text-align: center; /* Centrer le texte */
    height: 100%; /* Assurez-vous que le conteneur prend toute la hauteur de la modale */
}

.cv-content {
  text-align: justify;
  margin: 0 auto; /* Centre horizontalement */
  max-width: 90%;
  margin: 0 auto;
}

.modal {
    display: none; /* Masqué par défaut */
    position: fixed; /* Reste en place */
    z-index: 1; /* Au-dessus de tout */
    left: 0;
    top: 0;
    width: 52.5%;
    height: 100%;
    overflow: hidden; /* Permet le défilement si nécessaire */
    background-color: rgba(255,255,255, 1); /* Fond avec opacité */
}

/* Styles pour le contenu de la modale */
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centre le contenu */
    background-color: none;
    padding: 10px;
    border-radius: 8px;
    width: 60%; /* Largeur maximale */
    max-height: 80%; /* Hauteur maximale */
    display: flex;
    justify-content: center; /* Centrage horizontal */
    align-items: center; /* Centrage vertical */
    text-align: center; /* Centre le texte */
}


/* Styles pour le lien clignotant */
@keyframes clignoter {
    0% { color: black; }
    50% { color: red; }
    100% { color: black; }
}

.blink {
    animation: clignoter 1s step-start infinite;
}



/* Media query pour les petits écrans */
@media (max-width: 768px) {
    body {
        overflow: auto; /* Permettre le scroll sur les téléphones */
    }

    .container {
        flex-direction: column;
    }

    .right {
        display: none;
    }

    .left {
        width: 100%;
        padding: 0;
    }

    .details-footer-container {
        height: auto; /* Ajustement de la hauteur disponible */
		flex: 0 0 20%;
    }

    .left-image-container {
		height: 50%;
		padding-top:28%;
    }
	
	.header-image {
    height: 40px; 
	}

	.header {
		position: fixed;
		flex: 0 0 20%;
    }
	
	 .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        color: #000; /* Texte en blanc */
    }
	
	.modal {
    width: 100%;}

.modal-content {
    width: 90%; /* Largeur maximale */
    margin-bottom: 10px; /* Ajustez la valeur selon l'espace désiré */
	    font-size: 0.85em;
        }

}