* {
    margin: 0;
    padding: 0;
}

/*ZONE INDEX*/
    /*ZONE Main Accueil*/
    #main_index {
        position: relative;
        height: 100vh;
        width: 100%;
        background-color: #141414;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: aliceblue;
        overflow-y: hidden;
    }
    /*Fin Main Acceuil*/

    /*BOX Navigation*/
    #nav_box{
        height: 300px;
        width: 300px;
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 200px;
        rotate: 90deg;
    }   
    #rotate {
        height: 100px;
        width: 100px;
        background-color: blue;
        z-index: 10000;
    }
    /*Fin Box Navigation*/

 /* ── SIDEBAR (cohérente avec ton site) ── */
    .sidebar {
      position: fixed;
      top: 0; left: 0;
      height: 100vh;
      width: 200px;
      background-color: #0d1b2a;
      display: flex;
      flex-direction: column;
      padding: 30px 20px;
      border-right: 1px solid #1e2f48;
      z-index: 100;
    }
    .nom-prenom-sidebar {
      color: #ffffff;
      font-size: 13px;
      letter-spacing: 1px;
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid #1e2f48;
    }
    .sidebar h2 {
      font-size: 11px;
      letter-spacing: 3px;
      color: #4a5a72;
      text-transform: uppercase;
      margin-bottom: 16px;
      font-family: 'JetBrains Mono', monospace;
    }
    .sidebar ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .sidebar ul li a {
      color: #8899aa;
      text-decoration: none;
      font-size: 13px;
      padding: 7px 10px;
      border-radius: 6px;
      display: block;
      transition: all 0.2s;
    }
    .sidebar ul li a:hover,
    .sidebar ul li a.active {
      background-color: #1e2f48;
      color: #ffffff;
    }
    .sidebar ul li a.active {
      color: #3b82f6;
      border-left: 2px solid #3b82f6;
    }

    /* ── CONTENU PRINCIPAL ── */
    .page-content {
      margin-left: 200px;
      flex: 1;
      padding: 40px 40px 80px;
      max-width: 900px;
    }






    
    /*Menu de navigation bis*/
    #main_index {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    .main_nav {
        padding-top: 200px ;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
        height: 100%;
        width: 150px;
        background-color: white;
        z-index: 10;
    }
    .main_nav a {
        background-color: white;
        font-size: 17px;
        text-decoration: none;
        font-weight: bold;
    }
    .clic_menu {
        align-self: center;
        height: 50px;
        transition: 0.2s;
    }
    .main_nav a:hover{
        color: red;
    }


    /*Nav*/
    #bouton_nav1, #bouton_nav2, #bouton_nav3, #bouton_nav4, #bouton_nav5 {
        height: 50px;
        width: 50px;
        border-radius: 100px;
        background-color:rgb(0, 0, 0);
        transition: 1s;
        position: absolute;
        border: 2px solid rgb(255, 255, 255);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #bouton_nav5 {
        background-color: #141414;
        height: 28px;
        width: 28px;
        border: 10px solid rgb(255, 255, 255);
    }
    .icone {
        transform: rotate(-90deg);
        font-size: 35px;
        color: #afb4c2 ;
        pointer-events: none;
    }
    /*Fin Nav*/

    /*bouton*/
    #bouton {
        position: absolute;
        opacity: calc(0);
    }
    label {
        height: 100px;
        width: 100px;
        border-radius: 100px;
        position: relative;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #icone_label {
        width: 100px;
        rotate: -90deg;
    }
    /*FIN Bouton*/

    /*checkbox checked*/
    /* Checkbox checked : ajoute une classe à main */
        #nav_box:has(#bouton:checked) #bouton_nav1 {
            transform: translate(70px, 70px);
        }
        #nav_box:has(#bouton:checked) #bouton_nav2 {
            transform: translate(-70px, 70px);
        }
        #nav_box:has(#bouton:checked) #bouton_nav3 {
            transform: translate(70px, -70px);
        }
        #nav_box:has(#bouton:checked) #bouton_nav4 {
            transform: translate(-70px, -70px);
        }
        #nav_box:has(#bouton:checked) {
            transform: rotate();
            transition: transform 1s;
        }
        #nav_box:not(:has(#bouton:checked)) {
            transform: rotate();
            transition: transform 1s;
        }
/*FIN Zone INDEX*/

/*ZONE PROFIL*/
    /*Header profil*/

    /*Zone CV main*/
        #header_cv {
            display: flex;
            flex-direction: row;
            height: 100px;
            width: 100%;
            justify-content: center;
            align-items: center;
            background-color: #0d1b2a;
            box-shadow: 0px 0px 0px 0px red;
        }
        #body_cv header p {
            font-size: 50px;
        }
        #body_cv main {
            height: 100%;
            width: 100%;
            color: black;
        }
        .title_profil {
            color: rgb(16, 74, 74);
            font-size: 20px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .liste-type {
            list-style-type: square;
            margin-left: 25px;
        }
        #fibre_box {
            display: flex;
            margin-left: 50px;
        }
        #fibre_box img {
            position: relative;
            top: 50px;
            left: 50px;
            height: 200px;
            width: 400px;
        }
        #cv_box {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
        }
        #cv_img {
            height: 500px;
        }
    /*FIN zone CV main*/
/*FIN ZONE PROFIL*/