* {
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
.titre_lieu_activity {
    margin-bottom: 20px;
    color:black;
    font-family: 'Roboto', sans-serif;
}
h3 {
    font-family: 'Roboto', sans-serif;
}
.container_flex_svg {
    color: white;
    margin-top: 80px;
    width: 100%;
    display: flex;
    gap: 100px;
    justify-content: center;
}
.flex_contact_container {
    display: flex;
    margin: 30px auto;
    width: 60%;
    justify-content: center;
    gap: 60px;
}
.contact_button a, .cv_button {
    text-decoration: none;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: bold; 
}
.contact_button {
    background: blue;
    padding: 20px 10px;
    border-radius: 5px;
    width: 50%;
    text-align:center;
    cursor: pointer;

}
.cv_button {
    background: rgb(255, 132, 0);
    padding: 20px 10px;
    border-radius: 5px;
    width: 50%;
    text-align:center;
    cursor: pointer;
}
.titre1 {
    color:rgb(141, 83, 141)
}
.titre2 {
    color: rgb(198, 105, 39);
}
.titre3 {
    color:rgb(141, 83, 141);
}

.titre4 {
    color: rgb(60, 146, 72);
}

.titre5 {
    color:rgb(76, 176, 162);
}

.titre6 {
    color: rgb(180, 73, 73);
}

.titre7 {
    color: rgb(160, 148, 36);
}
li{
    font-family: 'Roboto', sans-serif;
    margin-bottom: 10px;
    color: rgb(101, 101, 101);
}

.container_liste_site {
    background-color: #EBEBEB;
    display: flex;
    padding: 20px;
    gap: 30px;
    justify-content: center;
    max-width: 1200px;
}
.voile1, .voile2 {
    background-color: rgba(139, 138, 138, 0.5); /* Fond blanc avec 50% d'opacité */
    backdrop-filter: blur(10px); /* Effet de flou */
    position: absolute;
    z-index: 9999;
    width: 100%;
    bottom: 0px;
    z-index: 1;
    font-family: 'Roboto', sans-serif;
    /* padding:0px 0px; */
    height: 0%;
    transition: all 0.5s;
    -webkit-border-radius: 15px 0px 0px 15px;
    -moz-border-radius: 15px 0px 0px 15px;
    border-radius: 15px 0px 0px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.titre_voile1, .titre_voile2 {
    color:white;
    padding: 20px;
    border: white solid 2px;
    border-radius: 5px;
    text-decoration: none;
    position: absolute;
    top: 200px;
}
.lien_site, .lien_site2 {
    padding: 10px 30px;
    background: gray;
    border-radius: 5px;
    padding: 10px;
    width: fit-content;
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;  ;
}
.lien_site:hover, .lien_site2:hover {
    background: none;
    border: solid 2px gray;
    color: gray;
}

.tag {
    color: white;
    background: orange;
    padding: 5px;
    font-family: 'Roboto', sans-serif;  
}
.container_site_screen, .container_site_screen2 {
    width: 50%;
    position: relative;
    overflow: hidden;
    /* border-radius: 12px; */
}
.container_flex_vignete_site {
    display: flex;
    border-radius: 12px;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.16);
}
@media(max-width: 768px) {
    .container_flex_vignete_site {
        flex-direction: column;
    }
}

.vignete {
    background: white;
    width: 50%;
    border-radius: 0px 12px 12px 0px;
}

@media(max-width: 1235px) {
 .container_vignetes {
         align-items: center;
    }
    .container_site_screen, .container_site_screen2 {
        width: 80%;
    
    }
    .container_flex_vignete_site {
        width: 90%;
    }
    .container_vignetes {
        display: flex;
        gap: 20px;
        width: 80%;
        justify-content: center;
        /* flex-wrap: wrap; */
        flex-direction: column;
    
    }
    
}
.wrapper1 {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: center;
}
.container_vignetes {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: center;
    flex-direction: column;

}
.image_box, .image_box2 {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 326px;
    -webkit-border-radius: 15px 0px 0px 15px;
    -moz-border-radius: 15px 0px 0px 15px;
    border-radius: 15px 0px 0px 15px;
}
.image_box {
    background-image: url('./images/capture_image_site1.png');
}
.image_box2 {
    background-image: url('./images/capture_image_site2.png');
}
.image_box3 {
    background-image: url('./images/capture_image_site1.png');
}
.image_box4 {
    background-image: url('./images/capture_image_site2.png');
}
.image_box3, .image_box4 {
    width: 60%;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.flex_popup_content {
    display: flex; 
    width: 100%;
}
.popup1, .popup2 {
    display: none;
    width: 100%;
    height: 100vh;
    background: white;
    z-index: 9999;
    position: fixed;
    right: 0px;
    left: 0px;
    top: 0px;
    transition: all 0.5s ease;
}
.popup_details_button, .popup_details_button2 {
    color: grey;
    border: 2px solid grey;
    padding: 10px;
    width: fit-content;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;  
}
.popup_details_button:hover, .popup_details_button2:hover {
    background: gray;
    color: white;
    cursor: pointer;
}

.container_mission_site,.container_mission_site2 {
    height: 100vh; border-left: 10px solid black; width: 40%; text-align: left; overflow: auto; box-shadow: -5px 0 10px rgba(0, 0, 0, 0.3);
}

.liste_nav {
    text-align: right;
    list-style: none;
    padding: 0; /* Supprime le padding par défaut de la liste */
    margin: 0; /* Supprime le margin par défaut de la liste */
}

.liste_nav li {
    display: inline; /* Affiche les éléments de liste en ligne */
    margin-right: 20px; /* Espace entre les éléments */
}

.liste_nav li a {
    text-decoration: none; /* Supprime la décoration de texte (soulignement) des liens */
    color: white; /* Optionnel : conserve la couleur du texte parent */
    font-family: sans-serif;
}
.nav-container {
    height: auto;
}

nav {
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    background: black;
    opacity: 1;
    z-index: 2;
    position: relative;
    transition: all 0.3s ease-in-out;
}
.sidebar {
    display: none; /* Sidebar cachée par défaut */
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: black;
    z-index: 5;
    padding-top: 20px;
    transition: all 0.2s;
    padding-left: 10px;
    padding-top: 70px;
    text-align: center;
}

.sidebar_nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar_nav li {
    padding-bottom: 10px;
    padding-top: 10px;
    cursor: pointer;
}

.sidebar_nav li:hover {
    background: white;
}

.sidebar_nav li a {
    text-decoration: none;
    color: white;
    font-family: sans-serif;
    display: block; /* Ensure the link takes up the full width of the li */
    padding: 10px;
}

.sidebar_nav li a:hover {
    color: black;
    font-weight: bold;
}

#toggleSidebar {
    color: white;
    display: block;
    background: black;
    margin: 0;
    padding: 10px;
    border: 0;
    border-radius: 5px;
    opacity: 0.7;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 6;
    cursor: pointer;
}
#toggleSidebar:hover {
    background: white;
    color:black;
}
@media(max-width: 750px) {
    .sidebar {
        display: none;
    }
    nav {
        display: none;
    }
    #toggleSidebar {
        display: block;
    }

}
@media(min-width:750px) {
    #toggleSidebar {
        display: none;
    }
}

.container_entete {
    position: absolute;
    height: 100vh;
    overflow: hidden;
    top:1px;
    width:100%;
}

.parallax {
    background-image: url('/images/papiers-ordinateur-portable-table-bureau.jpg');
    height: 100%;
    width: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(0%);
    transition: transform 0.1s ease-out;
    color: white;
    font-family: sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.container-titre, .logo-container {
    z-index: 2;
    text-align: left;
    color: white;
}
@media(max-width:750px) {
    .container-titre {
        text-align: center;
    }
    
}

.titre_entete {
    font-size: 20px;
    margin-bottom: 10px;
    color: white;   
}

.sous-titre_entete {
    font-size: 40px;
    color: white;
}

.logo-container {
    display: flex;
    gap: 40px;
    justify-content: center;
    color: white;
    margin-top: 80px;
    position: relative;
    bottom: 200px;
}

.logo-container svg {
    width: 60px;
    height: 60px;
}

nav.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.8); /* Ajuster le fond si nécessaire */
    -webkit-box-shadow: 0 2px 5px rgba(9, 8, 5, 0.5);
    padding-top: 10px;
    padding-bottom: 10px;
}
.parallax::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Voile sombre */
    z-index: 1;
}
html, body, header {
    height: 100%;
    margin: 0;
    padding: 0;
}
/* Assurez-vous que l'image a une largeur correcte pour s'adapter */
.container-image img {
    float: left;
    width: 300px; /* Ajustez cette valeur selon vos besoins */
}
.container-image {
    display: flex;
    flex-direction: row;
}

.paragraph_intro, p {
    font-size: 18px;
    line-height: 1.5;
    color: rgb(125, 125, 125);
    font-family: 'Roboto', sans-serif;  
}
.bold{
    font-weight: bold;
    color: black;
}
.container_infos {
    padding: 10px;
    border: 1px solid rgb(200, 197, 197);
}

.section_1 {
    display: flex;
    width: 70%;
    margin: 20px auto; /* Ajouté pour centrer la section */
    gap: 40px;
}
.container_image_infos{
    display: flex;
    flex-direction: column;
}
.container_intro {
    text-align: justify;
}
.container_cv {
    background: rgb(230, 230, 230);
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: center;
}
.wrapper {
    padding: 20px 60px;
    max-width: 1200px;
    position: relative;
}
.tableau_comp {
    display: flex;
    background: white;
    width: 100%;
}
.container_front-end {
    width: 33%;
    position: relative;
    bottom:650px;
    transition: all 1s;
    z-index: 3;
    opacity: 0;
}
.container_back-end {
    width: 33%;
    position: relative;
    bottom:650px;
    transition: all 1s;
    z-index: 2;
    opacity: 0;
}
.container_cms {
    width: 33%;
    position: relative;
    bottom:650px;
    transition: all 1s;
    z-index: 1;
    opacity: 0;
}
.testDIV, .testDIV1 {
    display: none;
}
.container_flex_comp1 {
    width: 70%;
    display: flex;
    position: relative;
    margin-top: 75px;
    gap: 20px;
    justify-content: center;
}
.divScrollEffect{
    position: absolute;
    top: 300px;
    width: 10px;
    height: 10px;
}
.container_flex_comp2 {
    display: flex;
    overflow: hidden;
    margin-top: 40px;
    position: relative;
    width: 70%;
    height: 320px;
    transition: all 0.5s;
}
.container_flex_comp3 {
    display: flex;
    overflow: hidden;
    margin-top: 40px;
    position: relative;
    width: 70%;
    height: 300px;
    transition: all 0.5s;
}
.container_timeLine {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    position: relative;
    max-width: 100%;
    margin-left: 0 auto;
    margin-top: 40px;
    animation-delay: 0.5s;
    background: white;
}
.container_cv_1 {
    padding: 30px 40px 20px 40px;
    font-size: 16px;
    background-color: #EBEBEB;
    position: relative;
    line-height: 26px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.16);
    margin-right: 100px;
}
.titre_periode {
    margin-bottom: 20px;
    display: none;
}
/* .timeLine {
} */
.container_timeLine::after {
    content: '';
    position: absolute;
    width: 5px;
    background-color: #EBEBEB;
    top: 0;
    bottom: 0;
    left: 190px;
}
.right{
    padding: 20px 0px 40px;
    position: relative;
    background-color: inherit;
    margin-left: 290px;
}
.left {
    position: absolute;
    top: calc(50% - 40px);
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    line-height: 20px;
    width: 132px;
    left: 0;
}
.container_bulle_infos {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.5s ease-out;
}

.container_bulle_infos.visible {
    opacity: 1;
    transform: translateY(0);
}
.container_bloc1,.container_bloc2,.container_bloc3,.container_bloc4,.container_bloc5,.container_bloc6,.container_bloc7{
    position: relative;
    /* top:680px; */
}

.container_timeLine .right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: calc(50% - 18px);
    width: 0;
    z-index: 1;
    left: -10px;
    border: medium solid #EBEBEB;
    border-width: 10px 10px 10px 0;
    border-color: transparent #EBEBEB transparent transparent;
}
.container_timeLine .right::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    left: -140px;
    background-color: #EBEBEB;
    top: calc(50% - 21px);
    border-radius: 50%;
    z-index: 1;
}
.container_comp_logo{
    display: flex;
    margin: 10px;
    gap: 30px;
    float:right;
}
/* .container_comp{

} */
.container_list_comp {
    display: flex;
    flex-direction: column;
    align-items: end;
}
.container_list_env {
    display: flex;
    flex-direction: column;
    align-items: start;
}
.container_web-design {
    width: 100%;
    position: relative;
    left: 2000px;
    transition: all 0.5s;
    height: 360px;
}
.container_env {
    width: 100%;
    position: relative;
    right: 2000px;
    transition: all 0.5s;
    height: 360px;
}
.titre_comp{
    margin: 20px 10px;
}
.titre_front-end {
    color:rgb(170, 75, 253)
}
.titre_back-end {
    color:rgb(107, 181, 157)
}
.titre_cms {
    color:rgb(255, 198, 65)
}
.container_flex_comp2, .container_flex_comp3 {
    width: 90%;
}

.section_contact {
    margin: 50px 50px;
}
.container_recherche_emploi {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 60px;
}
.contact_container {
    display: flex;
    justify-content: center;
    gap: 50px;
}
.vignette_phone {
    text-align: center;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%;
    border-radius: 15px;
    padding: 20px;
    background: rgb(254, 177, 177);
    color: rgb(176, 66, 66);
}
.vignette_mail {
    text-align: center;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%;
    border-radius: 15px;
    padding: 20px;
    background: rgb(166, 250, 216);
    color: rgb(38, 165, 115);
}
.vignette_loc {
    text-align: center;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%;
    border-radius: 15px;
    padding: 20px;
    background: rgb(214, 231, 244);
    color: rgb(45, 119, 171);
}
.flex_container_postes {
    display: flex;
    gap: 5px;
}
.video-container {
    /* position: relative;
    width: 100%; /* La vidéo occupe 50% de la largeur 
    height: 0; */
    padding-bottom: 28.125%; /* 16:9 ratio (9/16 * 50%) */
   /* margin: 0 auto; /* Centrer la div horizontalement */
    display: flex;
    width: 100%;
    justify-content: center;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
#design{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 768px) {

    .container_site_screen,  .container_site_screen2 {
        width: 100%;
        
    }
    .vignete {
        width: 100%;
        padding-bottom: 20px;
        border-radius: 0px 0px 20px 20px;
    }
    .image_box, .image_box2 {
        border-radius: 20px 20px 0px 0px;
    }
    .voile1, .voile2 {
        border-radius: 20px 20px 0px 0px;
    }

    .container_image_infos{
        margin-top: 50px;
    }
    .container_flex_comp2, .container_flex_comp3 {
        width: 90%;
    }
    .contact_container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .vignette_phone {
        width: 90%;
    }
    .vignette_mail {
        width: 90%;
    }
    .vignette_loc {
        width: 90%;
    }
    .titre_entete {
        font-size: 20px;
    }
    .sous-titre_entete {
       font-size: 30px; 
    }
    .logo-container svg {
        width: 50px;
        height: 50px;
    }
    /* Sur les petits écrans, laissez chaque élément occuper toute la largeur */
    .container-image, .paragraph_intro {
        flex: 1 1 100%;
    }
    main {
        margin: 20px 20px auto;
    }
    .section_1 {
        flex-direction: column;
        width: 100%;
        margin: 20px auto; /* Ajouté pour centrer la section */
        

    }
    .flex_contact_container {
        flex-direction: column;
        width: 100%;
        align-items: center;
        gap: 15px;

    }
    .contact_button {
        width: 50%;
    }
    .cv_button {
        width: 50%;
    
    }
    .container_image_infos {
        flex-direction: row;
    }
    .container_cv_1 {
        margin: 0;
    }
    .right {
        
        margin-left: 115px;
    }
    .left {
        top: calc(50% - 40px);
    }
    .left p {
        font-size: 12px;
    }
    .container_timeLine::after, .container_timeLine .right::after {
        display: none;
    }
    .tableau_comp {
        margin:0px;
    }
    .iframe {
        width: 100%;
        height: 100px;
    }
}
.tableau_comp_env, .tableau_comp_design {
    display: flex;
    background: white;
    width: 50%;
    opacity: 0;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.tableau_comp_env {
    position: absolute;
    /* left: 2000px; */
    transition: all 0.5s;
}
.tableau_comp_design {
    position: absolute;
    /* right: 2000px; */
    transition: all 0.5s;
}

.tableau_comp, .tableau_comp_bis{
    left:40px;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.tableau_comp_bis {
  height: 300px;
}
.cross_toggle1, .cross_toggle2 {
    z-index: 9999;
    position: fixed;
    right: 0px;
    color: white;
    margin: 10px;
    cursor: pointer;
}
.cross_toggle1:hover, .cross_toggle2:hover {
    color: gray;
}
@media (max-width:550px) {
    .flex_popup_content {
        flex-direction: column;
        /* overflow: hidden; */
    }
    .flex_popup_content {
        height: 100%;
    }
    .image_box3, .image_box4 {
        height: 30%;
        width: 100%;
    }
    .container_mission_site, .container_mission_site2 {
        height: 70%;
        width: 100%;
        box-shadow: 5px 0px 0px rgba(0, 0, 0, 0.1);
    }
    .sidebar_nav li a {
        padding: 0px;
    }
    .tableau_comp_design, .tableau_comp_env {
        width: 95%;
    }
    .titre_entete {
        font-size: 10px;
    }
    .sous-titre_entete {
       font-size: 20px; 
    }
    .logo-container svg {
        width: 30px;
        height: 30px;
    }
    .container_flex_svg {
        gap:30px;
    }
    .container_image_infos {
        flex-direction: column;
        align-items: center;
    }
    .titre_periode {
        margin-bottom: 20px;
        display: block;
    }
    .titre_lieu_activity {
        margin-bottom: 0;
    }
    .left p {
        display: none;
    }
    .right {
        margin-left: 0px
    }
     .right::before {
        display: none;
     }
     .container_flex_comp1 {
        width: 90%;
     }
     .tableau_comp {
        margin: 0px;
     }
     .container_front-end {
        width: 100%;
     }
     p, .paragraph_intro, .contact_button a, .cv_button, .container_comp_logo a, .container_comp_logo p, .titre_lieu_activity, .titre_periode, .container_cv_1, .tag, .liste_taches {
        font-size: 14px;

     }
     .titre1,.titre2, .container_intro h2, .titre_comp, .container_timeLine h2 {
        font-size: 16px;
     }
     .flex_container_postes {
        flex-direction: column;
        align-items: center;
        gap: 0px;
     }
}

h2{
    margin-bottom: 30px;
    font-family: 'Roboto', sans-serif;
}

@media (min-width: 550px) and (max-width: 768px ) {
    .container_flex_comp1 {
        width: 90%;
    }
    .tableau_comp {
        margin: 0px;
    }

}
.container_timeLine h2 {
    font-size: 30px;
}