/* ///////////////////////////// body ///////////////////////////// */
body {
    /* Dégradé de Gris Foncé à Gris Clair */
    /*background: linear-gradient(to bottom, #476e96, #BDC3C7);*/

    /* Définit le corps de la page comme un conteneur Flex, permettant une mise en page flexible */
    display: flex;
    /* Organise les éléments enfants en colonne, assurant un empilement vertical de haut en bas*/
    flex-direction: column;
    /* Assure que le corps de la page a une hauteur minimale de la hauteur de la fenêtre visible, garantissant un affichage plein écran */
    min-height: 100vh;
    /* Supprime les marges par défaut du corps de la page, garantissant aucun espace indésirable autour de la page  évite le scroll*/
    margin: 0;
    padding: 0;
    /* Font */
    font-family: Arial, sans-serif;
}

/* ///////////////////////////// Header ///////////////////////////// */

/* ///////////////////////////// main ///////////////////////////// */
main {
    /* Fait en sorte que le contenu principal (élément <main>) s'étende pour remplir tout l'espace vertical disponible dans le conteneur Flex du corps de la page, poussant ainsi le footer en bas de la page, même si le contenu est limité */
    flex: 1;
    /* Ajoutez pour afficher une barre de défilement verticale lorsque le contenu dépasse la hauteur de la fenêtre du navigateur */
    overflow-y: auto;
    overflow-x: hidden;
}

/*section {}*/

/* ///////////////////////////// Titre ///////////////////////////// */
.titre {
    text-align: center;
    padding: 20px;
}
.titre h1 {
    font-size: 50px;
}

/* Styles animation pour les sections invisibles */
/*.section-hidden {
    opacity: 0;
    transform: translateY(50px);
    transform: scale(0.9);
    transform: translateX(-100px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}*/

/* Styles lorsque les sections deviennent visibles */
/*.section-visible {
    opacity: 1;
    transform: translateY(0);
}*/

/* ///////////////////////////// Section hero ///////////////////////////// */
.hero {
    display: flex;
    background-color: #f2f2f2;
    padding: 100px;
}

/* /// Left /// */
.hero .hero_left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}

/* text */
.hero .hero_left h2 {
    margin-top: 0;
    position: relative;
}
.hero .hero_left h2::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 4px;
    background: #000;
    bottom: -7px;
    left: 3%;
    transform: translateX(-50%);
    border-radius: 5px;
}

.hero .hero_left p {
    margin-bottom: 10px;
    font-size: 18px;
}

/* button */
.hero .hero_left .div_button {
    text-align: center;
    padding: 30px;
}
.hero .hero_left .div_button .button_fonce {
    /*background: linear-gradient(135deg, #6a11cb, #2575fc);*/ /* Dégradé violet/bleu moderne */
    background: linear-gradient(135deg, #1f1f1f, #3a3a3a);
    color: #fff; /* Couleur du texte du bouton */
    border: none; /* Supprime les bordures du bouton */
    /*padding: 15px 30px;*/
    padding: 15px 35px;
    font-size: 18px; /* Taille de la police du texte */
    /*border-radius: 25px;*/
    border-radius: 30px;
    cursor: pointer; /* Change le curseur lorsqu'on survole le bouton */
    text-decoration: none; /* Supprime les soulignements */
    /*box-shadow: 0 8px 20px rgba(101, 99, 255, 0.3);*/
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    /*transition: transform 0.3s, background 0.3s;*/ /* Ajoute une transition pour les effets */
    /*transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;*/
    transition: all 0.4s ease;
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 1;
}
.hero .hero_left .div_button .button_fonce:hover {
    /*background: linear-gradient(135deg, #2575fc, #6a11cb);*/
    background: linear-gradient(135deg, #3a3a3a, #1f1f1f);
    /*transform: translateY(-7px) scale(1.05);*/
    transform: translateY(-5px) scale(1.03);
    /*box-shadow: 0 12px 24px rgba(101, 99, 255, 0.5);*/ /* Glow plus fort */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
}

.hero .hero_left .div_button .button_fonce i {
    margin-right: 12px; /* Ajoute un espace entre l'icône et le texte */
    font-size: 20px;
}

/* /// Right /// */
.hero .hero_right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.hero .hero_right .img_cv{
    width : 500px;
    height: 707px;
}

/* ///////////////////////////// Section aboutme ///////////////////////////// */
.aboutme {
    background-color: #c2c2c2;
    padding: 100px;
    display: flex;
}

/* /// Left /// */
.aboutme .aboutme_left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}
/*.aboutme .aboutme_left .sphère {}*/

/* sphère */
.tagcloud {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 650;
}
.tagcloud--item:hover {
    color: #ddd;
}

/* /// Right /// */
.aboutme .aboutme_right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}
.aboutme .aboutme_right h2 {
    margin-top: 0;
}

.aboutme .aboutme_right p {
    margin-bottom: 10px;
    font-size: 18px;
}

/* button */
.aboutme .aboutme_right .div_button {
    text-align: center;
    padding: 30px;
}
.aboutme .aboutme_right .div_button .button_fonce {
    /*background: linear-gradient(135deg, #6a11cb, #2575fc);*/ /* Dégradé violet/bleu moderne */
    background: linear-gradient(135deg, #1f1f1f, #3a3a3a);
    color: #fff; /* Couleur du texte du bouton */
    border: none; /* Supprime les bordures du bouton */
    /*padding: 15px 30px;*/
    padding: 15px 35px;
    font-size: 18px; /* Taille de la police du texte */
    /*border-radius: 25px;*/
    border-radius: 30px;
    cursor: pointer; /* Change le curseur lorsqu'on survole le bouton */
    text-decoration: none; /* Supprime les soulignements */
    /*box-shadow: 0 8px 20px rgba(101, 99, 255, 0.3);*/
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    /*transition: transform 0.3s, background 0.3s;*/ /* Ajoute une transition pour les effets */
    /*transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;*/
    transition: all 0.4s ease;
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 1;
}
.aboutme .aboutme_right .div_button .button_fonce:hover {
    /*background: linear-gradient(135deg, #2575fc, #6a11cb);*/
    background: linear-gradient(135deg, #3a3a3a, #1f1f1f);
    /*transform: translateY(-7px) scale(1.05);*/
    transform: translateY(-5px) scale(1.03);
    /*box-shadow: 0 12px 24px rgba(101, 99, 255, 0.5);*/ /* Glow plus fort */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
}

.aboutme .aboutme_right .div_button .button_fonce i {
    margin-right: 12px; /* Ajoute un espace entre l'icône et le texte */
    font-size: 20px;
}

/* Ancienne version du bouton équivalent hero_left*/
/*
.aboutme .aboutme_right .div_button .button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}
.aboutme .aboutme_right .div_button .button:hover {
    background-color: #555;
}*/

/* ///////////////////////////// Section portfolio ///////////////////////////// */
.portfolio {
    padding: 50px;
    max-height: 700px; /* Hauteur maximale de la section */
    overflow-y: auto; /* Activation du défilement vertical si nécessaire */
    background-color: #6e6c6c;
}

.portfolio h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 30px;
    position: relative;
}
.portfolio h2::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 5px;
    background: #000;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
}

/* carrousel */
.portfolio .carrousel_container {
    /*
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    */
    position: relative;
    overflow: hidden;
    padding-top : 10px;
    padding-bottom : 10px;
}

/* bouton */
.portfolio .carrousel_container .prec_btn, .next_btn {
    font-size: 16px;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(204, 204, 204, 0.5);
    border: 1px solid #ddd;
    padding: 10px 20px;
    cursor: pointer;
    /*opacity: 0.7;*/
}
.portfolio .carrousel_container .prec_btn {
    left: 10px;
}
.portfolio .carrousel_container .next_btn {
    right: 10px;
}

/* wrapper */
.portfolio .carrousel_container .carrousel_wrapper {
    display: flex;
    padding: 20px;
}
.portfolio .carrousel_container .carrousel_wrapper.slide-animation {
    transition: transform 0.5s ease-in-out; /* Durée et type de transition */
}
.portfolio .carrousel_container .carrousel_wrapper .projet_accueil {
    flex: 0 0 300px;
    /*margin-right: 80px;*/ /* Espacement entre les projets */
    padding: 40px; /* Espace à l'intérieur de chaque projet_accueil */
    background-color: #f9f9f9; /* Couleur de fond */
    border-radius: 24px; /* Coins arrondis */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* Ombre douce */
    cursor: pointer;

    transition: transform 0.3s ease; /* Effet de transition pour un agrandissement fluide */
}
.portfolio .carrousel_container .carrousel_wrapper .projet_accueil:hover {
    /* Agrandit l'image lorsqu'elle est survolée */
    transform: scale(1.1);
    box-shadow: none;
}

/* conteneur projet_accueil */
.portfolio .carrousel_container .carrousel_wrapper .projet_accueil a img {
    width: 100%; /* Remplir l'espace disponible */
    height: auto;
    border-radius: 8px; /* Coins arrondis pour l'image */
}
.portfolio .carrousel_container .carrousel_wrapper .projet_accueil h3 {
    margin-top: 10px; /* Marge en haut du titre */
    font-size: 1.2em; /* Taille du titre */
}
.portfolio .carrousel_container .carrousel_wrapper .projet_accueil p {
    margin-top: 5px; /* Marge en haut du paragraphe */
    font-size: 1em; /* Taille du texte */
    margin-bottom: 2px;
}
.portfolio .carrousel_container .carrousel_wrapper .projet_accueil .infra_petit_h {
    margin-top: 8px;
    font-size: 1.1em;
    margin-bottom: 7px;
}
.portfolio .carrousel_container .carrousel_wrapper .projet_accueil .infra_petit_p{
    margin-top: 0;
    font-size: 0.9em;
    margin-bottom: 0;
}

/* ///////////////////////////// Section mini_menu ///////////////////////////// */
.mini_menu {
    background-color: #f2f2f2;
    padding: 1px;
    padding-bottom: 50px;
}

.mini_menu h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 30px;
    position: relative;
}
.mini_menu h2::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 5px;
    background: #000;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
}

/* ///////////////////////////// Section profil ///////////////////////////// */
.profil {
    padding: 100px;
    /*background-color: #c2c2c2;*/
    background-color: #dfdfdf;
}

.profil h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 30px;
    position: relative;
}
.profil h2::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 5px;
    background: #000;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
}

.profil .profil_container {
    display: flex;
}

/* /// Left /// */
.profil .profil_container .profil_left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}
.profil .profil_container .profil_left p {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.6;
}

/* /// Right /// */
.profil .profil_container .profil_right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}
.profil .profil_container .profil_right p {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.6;
}

/* ///////////////////////////// Section formations ///////////////////////////// */
.formations {
    padding: 50px;
    /*background-color: #6e6c6c;*/
    background-color: #cccccc;
}

.formations h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 30px;
    position: relative;
}
.formations h2::before {
    content: '';
    position: absolute;
    width: 70px;
    height: 5px;
    background: #000;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
}

/* Styles du tableau pour la section des formations */
.formations .formations_table {
    width: 100%; /* Occupe toute la largeur disponible */
    border-collapse: collapse; /* Supprime les espaces entre les cellules */
}

.formations .formations_table td {
    vertical-align: top; /* Aligne le texte et les images en haut */
    padding: 20px; /* Ajoute un peu d'espace autour du contenu */
}

/* Colonne pour les logos */
.formations .formations_table .logo_cell {
    width: 30%; /* La colonne des logos occupe 30% de la largeur totale */
    text-align: center; /* Centrer les images dans la colonne */
}

.formations .formations_table .logo_cell img {
    max-width: 100%;
    height: auto;
    max-height: 150px; /* Limiter la hauteur des images */
    transition: transform 0.2s ease;
}

.formations .formations_table .logo_cell img:hover {
    transform: scale(1.1); /* Agrandissement au survol */
}

/* Colonne pour le texte */
.formations .formations_table .text_cell {
    width: 70%; /* La colonne du texte occupe 70% de la largeur */
}

.formations .formations_table .text_cell h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.formations .formations_table .text_cell p {
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 1.6;
}
.formations .formations_table .text_cell p a {
    color: black;
}

/* button */
.formations .formations_right .div_button {
    text-align: center;
    padding: 50px;
}

/* ///////////////////////////// Section compétences (langages) ///////////////////////////// */
.competences {
    padding: 50px;
    background-color: #b9b9b9;
}

.competences h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 30px;
    position: relative;
}
.competences h2::before {
    content: '';
    position: absolute;
    width: 70px;
    height: 5px;
    background: #000;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
}

/* Container */
.competences .competences_container {
    margin-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
    /*overflow-x: hidden;*/ /* Empêche le scroll horizontal */
}

.competences .competences_container p {
    font-size: 18px;
    line-height: 1.6;
    margin: 0 50px; /* Ajustement des marges */
}

/* sous container */
.competences .competences_container .sous_competences_container {
    margin-top: 30px;
    margin-left: 50px;
}

.competences .competences_container .sous_competences_container h4{
    margin-bottom: 10px;
}

.competences .competences_container .sous_competences_container ul {
    margin-left: 70px;
    margin-bottom: 5px;
    margin-top: 0;
    padding: 10px; /* Ajout de padding pour un espacement intérieur */
}

.competences .competences_container .sous_competences_container li {
    margin-bottom: 5px; /* Espacement entre les éléments de liste */
}

/* image langage */
.competences .competences_container .sous_competences_container .languages {
    display: flex;
    flex-wrap: wrap; /* Force le retour à la ligne si nécessaire */
    /*justify-content: flex-start;*/ /* Alignement des icônes à gauche */
    gap: 15px; /* Espace entre les images */
    /*align-items: center;*/
    margin-left: 70px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.competences .competences_container .sous_competences_container .languages img {
    width: 40px; /* Taille de chaque icône */
    height: auto;
    object-fit: contain; /* Assure que l'image reste dans les proportions */
    transition: transform 0.2s ease;
    cursor: pointer;
}

.competences .competences_container .sous_competences_container .languages img:hover {
    transform: scale(1.1); /* Agrandissement au survol */
}

/* icônes Perf */
.competences .competences_container .sous_competences_container .perf {
    margin-left: 70px;
    display: flex;
    gap: 15px; /* Espace entre les images */
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.competences .competences_container .sous_competences_container .perf img {
    width: 400px; /* Taille de chaque icône */
    height: auto;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.competences .competences_container .sous_competences_container .perf img:hover {
    transform: scale(1.1); /* Agrandissement au survol */
}

/* ///////////////////////////// Section outils ///////////////////////////// */
/*
.outils {
    padding: 50px;
    background-color: #a6a6a6;
}*/

/* ///////////////////////////// Section experiences ///////////////////////////// */
.experiences {
    padding: 50px;
    background-color: #929292;
}

.experiences h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 30px;
    position: relative;
}
.experiences h2::before {
    content: '';
    position: absolute;
    width: 70px;
    height: 5px;
    background: #000;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
}

/* Styles du tableau pour la section des formations */
.experiences .experiences_table {
    width: 100%; /* Occupe toute la largeur disponible */
    border-collapse: collapse; /* Supprime les espaces entre les cellules */
}

.experiences .experiences_table td {
    vertical-align: top; /* Aligne le texte et les images en haut */
    padding: 20px; /* Ajoute un peu d'espace autour du contenu */
}

/* Colonne pour les logos */
.experiences .experiences_table .logo_cell {
    width: 30%; /* La colonne des logos occupe 30% de la largeur totale */
    text-align: center; /* Centrer les images dans la colonne */
}

.experiences .experiences_table .logo_cell img {
    max-width: 100%;
    height: auto;
    max-height: 150px; /* Limiter la hauteur des images */
    transition: transform 0.2s ease;
}

.experiences .experiences_table .logo_cell img:hover {
    transform: scale(1.1); /* Agrandissement au survol */
}

/* Colonne pour le texte */
.experiences .experiences_table .text_cell {
    width: 70%; /* La colonne du texte occupe 70% de la largeur */
}

.experiences .experiences_table .text_cell h3 {
    font-size: 22px;
    margin-bottom: 10px;
}
.experiences .experiences_table .text_cell h3 .periode {
    /*font-weight: bold;*/
    margin-right: 20px; /* Contrôle de l'espace période et poste */
}
/*
.experiences .experiences_table .text_cell h3 .poste {
    font-weight: normal;
}
*/

.experiences .experiences_table .text_cell p {
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 1.6;
}
.experiences .experiences_table .text_cell p a {
    color: black;
}
.experiences .experiences_table .text_cell ul li {
    margin-bottom: 2px;
    font-size: 16px;
    line-height: 1.3;
}

/* ///////////////////////////// Section suivi ///////////////////////////// */
.suivi {
    padding: 50px;
    background-color: #7f7f7f;
    text-align: center;
}

.suivi h2 {
    font-size: 30px;
    margin-bottom: 30px;
    position: relative;
}
.suivi h2::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 5px;
    background: #000;
    bottom: -10px;
    left: 50%;
    transform: translateX(-20%);
    border-radius: 5px;
}

.suivi .suivi_container{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.suivi .suivi_container .suivi_container_logo {
    /*background-color: #fff;*/
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 1);
    padding: 40px 70px 70px 70px;
    /*width: 250px;*/
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.suivi .suivi_container .suivi_container_logo:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 1);
}

.suivi .suivi_container .suivi_container_logo .suivi_logo {
    /*background-color: #ccc;*/ /* Couleur de fond du logo */
    height: 350px;
    width: 350px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.suivi .suivi_container .suivi_container_logo .suivi_logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* controle l'image dans le conteneur sans rognage */
}

.suivi .suivi_container .suivi_container_logo p {
    /*margin-top: 10px;*/
    font-size: 30px;
    font-weight: bold;
    color: #333;
    margin-bottom: 3px;
}
.suivi .suivi_container .suivi_container_logo .classement{
    font-size : 18px;
    color: #333;
}

/* ///////////////////////////// Section langues ///////////////////////////// */
.langues {
    padding: 50px;
    background-color: #6c6c6c;
}

.langues h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 30px;
    position: relative;
}
.langues h2::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 5px;
    background: #000;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
}

/* Styles du tableau pour la section des formations */
.langues .langues_table {
    width: 100%; /* Occupe toute la largeur disponible */
    border-collapse: collapse; /* Supprime les espaces entre les cellules */
}

.langues .langues_table td {
    vertical-align: top; /* Aligne le texte et les images en haut */
    padding: 20px; /* Ajoute un peu d'espace autour du contenu */
}

/* Colonne pour le texte */
.langues .langues_table .text_cell {
    width: 55%; /* La colonne du texte occupe 70% de la largeur */
    padding-left: 300px; /* Ajout d'un espace supplémentaire à gauche */
}
.langues .langues_table .text_cell h3 {
    font-size: 22px;
    margin-bottom: 10px;
}
.langues .langues_table .text_cell p {
    margin-bottom: 5px;
    font-size: 22px;
    line-height: 1.6;
}

/* Colonne pour les logos */
.langues .langues_table .logo_cell {
    width: 45%; /* La colonne des logos occupe 50% de la largeur totale */
    /*text-align: center;*/ /* Centrer les images dans la colonne */
}
.langues .langues_table .logo_cell img {
    max-width: 100%;
    height: auto;
    max-height: 250px; /* Limiter la hauteur des images */
    transition: transform 0.2s ease;
    margin-top: 22px;
}
.langues .langues_table .logo_cell img:hover {
    transform: scale(1.1); /* Agrandissement au survol */
}

/* ///////////////////////////// Section centres interets ///////////////////////////// */
.centres_interets {
    padding: 50px;
    background-color: #595959;
}

.centres_interets h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 30px;
    position: relative;
}
.centres_interets h2::before {
    content: '';
    position: absolute;
    width: 70px;
    height: 5px;
    background: #000;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
}

/* Styles pour la grille */
.centres_interets .centres_interets_container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Ajuste le nombre de colonnes en fonction de la largeur disponible */
    gap: 20px; /* Espace entre les éléments */

    /*
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    */
}

.centres_interets .centres_interets_container .centres_interets_item {
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 1);
    padding: 40px 30px 70px 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.centres_interets .centres_interets_container .centres_interets_item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 1);
}

.centres_interets .centres_interets_container .centres_interets_item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* controle l'image dans le conteneur sans rognage */
}

.centres_interets .centres_interets_container .centres_interets_item h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.centres_interets .centres_interets_container .centres_interets_item p {
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 1.3;
}

/* ///////////////////////////// Section projets_cv ///////////////////////////// */
.projets_cv {
    padding: 50px;
    background-color: #464646;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Bulles */
.projets_cv::before, .projets_cv::after, .projets_cv .bubble-top, .projets_cv .bubble-bottom, .projets_cv .bubble-between_right, .projets_cv .bubble-between_left{
    content: '';
    position: absolute;
    width: 100px; /* Taille des bulles */
    height: 100px; /* Taille des bulles */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%; /* Forme circulaire */
    pointer-events: none;
    /*z-index: -1;*/ /* Pour s'assurer que les bulles sont derrière le contenu */
    animation: float 5s infinite ease-in-out;
}
/* Bulle en haut à gauche */
.projets_cv .bubble-top {
    left: 20%;
    top: 10px;
}
/* Bulle entre gauche */
.projets_cv .bubble-between_left {
    left: 40%;
    top: 50%;
}
/* Bulle entre droit*/
.projets_cv .bubble-between_right {
    right: 40%;
    bottom: 50%;
}
/* Bulle en bas à droite */
.projets_cv .bubble-bottom {
    right: 20%;
    bottom: 10px;
    animation-delay: 2.5s;
}
/* Bulle à gauche */
.projets_cv::before {
    top: 20%;
    left: 10px; /* Position à gauche */
    transform: translateY(-50%);
    animation-delay: 2.5s;
}
/* Bulle à droite */
.projets_cv::after {
    top: 20%;
    right: 10px; /* Position à droite */
    transform: translateY(-50%);
}
/*
.projets_cv::before {
    top: -50px;
    left: 30%;
    animation-delay: 0s;
}
.projets_cv::after {
    bottom: -50px;
    right: 30%;
    animation-delay: 2.5s;
}*/
/* Changement d'oppacité selon position */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.1;
    }
    50% {
        transform: translateY(-20px);
        opacity: 0.3;
    }
}

/* titre */
.projets_cv h2 {
    font-size: 30px;
    margin-bottom: 30px;
    position: relative;
}
.projets_cv h2::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 5px;
    background: #000;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
}
/**/

.projets_cv .cv_div_projet_button {
    margin-top: 50px;
    margin-bottom: 50px;
}

/* trait coté*/
/*
.projets_cv .cv_div_projet_button::before, .projets_cv .cv_div_projet_button::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    top: 0;
}
.projets_cv .cv_div_projet_button::before {
    left: -20px;
}
.projets_cv .cv_div_projet_button::after {
    right: -20px;
}
*/

.projets_cv .cv_div_projet_button .button_claire {
    /*background: linear-gradient(135deg, #ff7e5f, #feb47b);*/ /* Fond dégradé pour le bouton */
    background: linear-gradient(135deg, #f0f0f0, #c0c0c0); /* Fond dégradé pour le bouton */
    color: #333; /* Couleur du texte du bouton */
    border: none; /* Supprime les bordures du bouton */
    padding: 15px 35px;
    font-size: 20px; /* Taille de la police du texte */
    border-radius: 30px; /* Ajoute des coins arrondis au bouton */
    cursor: pointer; /* Change le curseur lorsqu'on survole le bouton */
    text-decoration: none; /* Supprime les soulignements */
    box-shadow: 0 10px 20px rgba(125, 125, 125, 0.4); /* Ajoute une ombre au bouton */
    /*transition: transform 0.3s, background 0.3s;*/ /* Ajoute une transition pour les effets */
    transition: all 0.4s ease;
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 1;
}
.projets_cv .cv_div_projet_button .button_claire:hover {
    /*background: linear-gradient(135deg, #feb47b, #ff7e5f);*/ /* Change le fond dégradé au survol */
    background: linear-gradient(135deg, #c0c0c0, #f0f0f0); /* Change le fond dégradé au survol */
    transform: translateY(-5px) scale(1.03); /* Ajoute un effet de soulèvement au survol */
    box-shadow: 0 12px 24px rgba(125, 125, 125, 0.6);
}
.projets_cv .cv_div_projet_button .button_claire i {
    margin-right: 12px; /* Ajoute un espace entre l'icône et le texte */
    font-size: 20px;
}

/* ///////////////////////////// Section Total CV mini-menu ///////////////////////////// */
/* mini menu */
.mini-menu {
    text-align: center; /* Centrer le menu */
    margin-bottom: 20px; /* Espacement sous le menu */
}

.mini-menu ul {
    list-style: none; /* Supprime les puces de la liste */
    padding: 0; /* Enlève le padding par défaut */
    display: flex; /* Utilise flexbox pour aligner les éléments en ligne */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    justify-content: center; /* Centre les éléments du menu */
    gap: 10px;
}

.mini-menu ul li {
    margin: 0 10px; /* Espace entre les éléments */
}

.mini-menu .button_mini-menu {
    display: inline-block; /* Rend le lien comme un bloc en ligne */
    padding: 10px 20px; /* Ajout de padding pour le style du bouton */
    background-color: #333; /* Couleur de fond du bouton */
    color: white; /* Couleur du texte du bouton */
    border-radius: 5px; /* Coins arrondis */
    text-decoration: none; /* Supprime le soulignement */
    transition: background-color 0.3s; /* Animation lors du survol */
}

.mini-menu .button_mini-menu:hover {
    background-color: #555; /* Couleur de fond au survol */
}

/* ///////////////////////////// Section projets ///////////////////////////// */
.projets_body {
    animation: animateBackground 5s infinite alternate; /* Change la couleur de fond */
}
/*.projets_body {
    background-image: url('../image/projets/p2/c2_accueil.webp');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    color: #f8fafc;
}*/
/*@keyframes animateBackground {
    0% { background-color: #38bdf8; }
    50% { background-color: #1e293b; }
    100% { background-color: #38bdf8; }
}*/
/*@keyframes animateBackground {
    0% { background-color: #1f4478; }
    100% { background-color: red; }
}*/
@keyframes animateBackground {
    /*0% { background-color: #f2f2f2; }*/
    0% { background-color: #6e6d6d; }
    /*20% { background-color: #929292 }
    30% { background-color: #595959 }*/
    50% { background-color: #1e293b; }
    100% { background-color: #6e6d6d; }
    /*100% { background-color: #464646; }*/
    /*100% { background-color: #333;  }*/
}

#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.projets {
    padding: 2rem;
    max-width: 1000px;
    margin: auto;
    animation: fadeIn 1s ease;
}
/* Animation douce */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/*.projets h1 {
    text-align: center;
    font-size: 2.2rem;
    color: #38bdf8;
    margin-bottom: 2.5rem;
    position: relative;
}*/
.projets h1::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: #38bdf8;
    border-radius: 5px;
    margin: 0.5rem auto;
}
.projets h1 {
    animation: animateTextColor 5s infinite alternate;
}
@keyframes animateTextColor {
    0% { color: #000000; }  /* couleur normale (noir) */
    50% { color: #ffffff; } /* blanc sur fond sombre */
    100% { color: #000000; }
}

.projet {
    background-color: #1e293b;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    border-left: 5px solid #38bdf8;
    border-radius: 12px;
    color: #f8fafc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    /*background: url('../image/projets/p1/portfolio_acceuil.webp') no-repeat center center fixed;
    background-size: cover;*/
}
.projet:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(56, 189, 248, 0.4);
}

.projet-entete {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.projet-image {
    width: 250px;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}
.projet-image:hover {
    transform: scale(1.05); /* Zoom léger */
    transition: transform 0.3s ease;
}

.projet-titre {
    flex: 1;
}

.projet h2 {
    color: #facc15;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.3rem;
}
.projet h2 i {
    color: #38bdf8;
}
.projet-anim {
    background: linear-gradient(90deg, #eeff41, #eeff41, #ff418f, #5241ff, #5241ff);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 3s ease infinite alternate;
}
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.projet-details {
    margin-top: 1rem;
    line-height: 1.2;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease, opacity 0.6s ease;
    opacity: 0;
}
/*.projet-details.ouvert {
    max-height: 500px;
    opacity: 1;
}*/
.projet:hover .projet-details {
    max-height: none;
    opacity: 1;
}

.projet-logos {
    display: flex;
    gap: 10px;
    margin: 0.8rem 0;
    flex-wrap: wrap;
}

.projet-logos img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background-color: white;
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(255,255,255,0.1);
    transition: transform 0.3s ease;
}
.projet-logos img:hover {
    transform: scale(1.1);
}

.projet p {
    margin: 0.5rem 0;
}

.arrow-container {
    width: 100%;
    text-align: center;
    /*margin-top: 1rem;*/
}
.arrow-down {
    font-size: 1.5rem;
    color: #38bdf8;
    transition: transform 0.4s ease, opacity 0.4s ease;
    display: inline-block;
}
.projet:hover .arrow-container {
    display: none;
}

.invisible {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ///////////////////////////// Section services ///////////////////////////// */

.services {
    text-align: center;
    padding: 4rem 2rem;
    background-color: #f2f2f2;
    border-radius: 20px;
    margin: 2rem auto 3rem;
    max-width: 800px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.services p {
    font-size: 30px;
    font-weight: bold;
    color: #333;
}
.services strong {
    color: #c0392b;
}

/* ///////////////////////////// Section Coordonnees Map ///////////////////////////// */
.coordonnees_map {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    background-color: #dfdfdf;
    /*color: #333;*/
    padding: 60px 40px;
    text-align: left;
}


.coordonnees_map .coordonnees_block {
    flex: 1 1 350px;
    max-width: 450px;
    /*padding-left: 50px;*/
}

.coordonnees_map .coordonnees_block h2, .coordonnees_map .map_block h2 {
    font-size: 30px;
    margin-bottom: 20px;
    /*color: #222;*/
    text-align: center;
}

.coordonnees_map .coordonnees_block p {
    margin: 12px 0;
    padding-left: 50px;
    font-size: 18px;
}

.coordonnees_map .coordonnees_block a {
    color: #444;
    font-size: 18px;
    text-decoration: underline;
}

.coordonnees_map .map_block {
    flex: 1 1 500px;
    max-width: 650px;
}

.coordonnees_map .map_block iframe {
    width: 100%;
    height: 320px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ///////////////////////////// Section contact ///////////////////////////// */
.contact {
    background-color: #333; /* Couleur de fond de la section */
    color: #fff; /* Couleur du texte */
    padding: 100px; /* Espacement interne */
    text-align: center; /* Centrage du contenu */
}

.contact h2 {
    margin-top: 0; /* Suppression de la marge supérieure */
    font-size: 30px; /* Taille du titre */
    position: relative;
}
.contact h2::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 5px;
    background: #fff;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
}

/* // formulaire //*/
.contact form {
    display: flex; /* Affichage en ligne des éléments du formulaire */
    flex-direction: column; /* Disposition en colonne */
    justify-content: center;
    max-width: 500px; /* Largeur maximale du formulaire */
    margin: 0 auto; /* Centrage horizontal du formulaire */
}

.contact input[type="text"], .contact input[type="email"], .contact textarea {
    width: 100%; /* Largeur de 100% */
    padding: 10px; /* Espacement interne */
    margin-bottom: 20px; /* Marge inférieure entre les champs */
    border: 1px solid #fff; /* Bordure avec couleur blanche */
    border-radius: 5px; /* Coins arrondis */
    background-color: transparent; /* Fond transparent */
    color: #fff; /* Couleur du texte */
}
.contact input[type="text"]:hover, .contact input[type="email"]:hover, .contact textarea:hover{
    background-color: #6e6c6c;
}
.contact input[type="text"], .contact input[type="email"] {
    height: 40px; /* Hauteur des champs de texte */
}
.contact textarea {
    min-height: 150px; /* Hauteur minimale du champ de texte */
}

.contact .contact_valide {
    background: linear-gradient(135deg, #f0f0f0, #c0c0c0); /* Fond dégradé pour le bouton */
    color: #333; /* Couleur du texte du bouton */

    width: 50%; /* Largeur de 100% */
    padding: 15px 35px; /* Ajoute un espace intérieur au bouton */

    border: none; /* Suppression de la bordure */
    border-radius: 30px; /* Coins arrondis */

    font-weight: bold; /* Police en gras */
    font-size: 20px; /* Taille de la police du texte */

    cursor: pointer; /* Curseur de type pointeur */
    /*box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);*/ /* Ajoute une ombre au bouton */
    box-shadow: 0 10px 20px rgba(125, 125, 125, 0.4);
    /*transition: transform 0.3s, background 0.3s;*/ /* Ajoute une transition pour les effets */
    transition: all 0.4s ease;
    display: inline-flex;
    margin: 0 auto 0 auto; /* Centre le bouton horizontalement */
    justify-content: center;
    /*align-items: center;*/
    /*position: relative;*/
    /*z-index: 1;*/
}
.contact .contact_valide:hover {
    background: linear-gradient(135deg, #c0c0c0, #f0f0f0); /* Change le fond dégradé au survol */
    transform: translateY(-5px) scale(1.03); /* Ajoute un effet de soulèvement au survol */
    box-shadow: 0 12px 24px rgba(125, 125, 125, 0.6);
    opacity: 0.5;
    /*cursor: not-allowed;*/
}
.contact .contact_valide i {
    margin-right: 12px; /* Ajoute un espace entre l'icône et le texte */
    font-size: 20px;
}

/* ///////////////////////////// button top ///////////////////////////// */
#retour_haut_btn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #333; /* Couleur de fond du bouton */
    color: #fff; /* Couleur du texte */
    border: none; /* Suppression de la bordure */
    border-radius: 50%; /* Forme arrondie du bouton */
    width: 40px; /* Largeur du bouton */
    height: 40px; /* Hauteur du bouton */
    font-size: 20px; /* Taille de la police du texte */
    line-height: 40px; /* Centrage vertical du texte */
    text-align: center; /* Centrage horizontal du texte */
    cursor: pointer; /* Curseur de type pointeur */
    z-index: 99; /* Assurer que le bouton reste au-dessus des autres éléments */
    transition: background-color 0.3s; /* Transition douce de couleur de fond */
}
#retour_haut_btn:hover {
    background-color: #555; /* Couleur de fond au survol */
}

/* ///////////////////////////// Footer ///////////////////////////// */
footer {
    margin-top: auto; /* Le footer est aligné en bas de la page */
    background-color: #333; /* Couleur de fond du footer */
    color: #fff; /* Couleur du texte */
    text-align: center; /* Centrage du contenu */
    padding: 20px 0; /* Espacement interne haut/bas */
}

footer p {
    margin: 0; /* Suppression des marges */
    font-size: 14px; /* Taille du texte */
}