.col_1 {width: 8.333333%;}
.col_2 {width: 16.666666%;}
.col_3 {width: 25%;}
.col_4 {width: 33.333333%;}
.col_5 {width: 41.666666%;}
.col_6 {width: 50%;}
.col_7 {width: 58.333333%;}
.col_8 {width: 66.666666%;}
.col_9 {width: 75%;}
.col_10 {width: 83.333333%;}
.col_11 {width:91.666666%;}
.col_12 {width: 100%;}


*{
    margin: 0;
    background-color: #00849E;
    padding: 0;
}
 li  {
      list-style-type: none;
      font-weight: bold;
      font-family: "Poppins", sans-serif ;
   }

   .links a {
        text-decoration: none;
        font-size: 1rem;
        color:  aquamarine;
    } 

   a:hover{
    color: white;
   }

   header{
       position: relative;
       padding:  0.5%;
   }
   .navbar{
    width: 90%;
   display: flex;
   /* justify-content: center; */
   }
   .para span{
        color: whitesmoke;
        font-weight: bold;
        font-size: 25px;      
   }
   .para span:hover{
    color: white;
   }

   .navbar .links {
    display: flex;
    width: 25%;
    margin: auto;
    justify-content: space-around;
   }

   .navbar .button {
    cursor: pointer;
    color: white;
    display: flex;
    font-size: 1.5rem;
   }

  section{
    padding: 3.3%;
    
  }
  
  .accueil-0{      
    display: flex;
    justify-content: center;
  }
  .accueil-1{
    margin-top: 5%;
  }

  .accueil-1 h3{
      color: white;
      font-weight: bold;
  }

  .accueil-1 span {
     color:  white;
     font-weight: bold;
  }
  /* .accueil-img img {
    width: 25vw;
    margin: 5%;
  } */
  .accueil-1 p {
    color: aqua;
    font-weight: bold;
  } 
 .btn{
    box-shadow: 0 0 1rem blue;
    font-size: 1.5px;
    letter-spacing: 0.3rem;
    font-weight: 600;
  }
  .social a {
    background-color: aliceblue;
    margin-top: 5%;
    padding: 15px;
  }
  .propos1 p {
         text-align: center;
         font-weight: bold;
           color: aquamarine;
             font-size: 19px;
           font-family: "Poppins", sans-serif ;
  }


  .p1 p {
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 19px;
  }
     .comp{
    display: flex;
    justify-content: center;
    gap: 2.8REM;
   }
     .competence-img  :hover{
      color: blue;
     } 
      
   
   .comp  .competence-img { 
       background-color: white;
       padding: 3.1%;
       margin-top: 4.5%;
       border-radius: 1PX;
       text-align: center;
       border: 1px solid aqua;

   }
  .competence-img img{
      height: 36px;
      /* margin-bottom: 10PX; */
  }

  .competence-img1 img{
      height: 80px;
  }
  .comp1{
    display: flex;
    margin-top: 2.0%;
    gap: 2.8rem;
    justify-content: center;
  }

   .competence-img1 h3:hover{
      color: aqua;
   } */
   
.competence-img1 img{
      height: 50px; 
  }

.row{
  display: flex;
  grid-template-columns: repeat(3,ifr);
  gap: 30px;

}
   

  
.w25{
   width: 8%;
   gap: 20%;
}
.skill{
     background: white;
     padding: 1.2%;
     box-sizing: border-box;
     border-radius: 15px;
}
.skill img{
    width: 100px;
    gap: 25%;
}
.skill h3 {
  margin-top: 2%;
  text-align: center;
  position: absolute;
  border: 5px solid black;
  border-radius: 15% ;
  color: white;
}
.flex{
  display: flex;
  gap: 3%;
  margin-top: 5%;
  justify-content: center;
}

.css h3 {
  margin-top: 2%;
  margin-left: 0.9%;
  text-align: center;
  position: absolute;
  border: 5px solid black;
  border-radius:15% ;
  color:  white;
}
.css1 h3 {
  margin-top: 2%;
  margin-left: -0.85%;
  text-align: center;
  position: absolute;
  border: 5px solid black;
  border-radius: 15% ;
  color: white;
}

.portfolio h2{
   text-align: center;
   color: white;
}

 *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    padding: 0;
    /* background-image: url("/img/fond.png"); */
    background-repeat: no-repeat;
    background-position: center;
    background-color: black;
    background-size: cover;  
}

/* ===================== HEADER ===================== */
header{
    position: relative;
    padding: 0.8%;
}

.navbar{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .links {
    display: flex;
    gap: 25px;
}

.navbar .links a {
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    color: aquamarine;
}

.navbar .links a:hover {
    color: white;
}

/* ===================== SECTIONS ===================== */
section{
    padding: 3%;
}

.accueil-0{      
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

.accueil-1{
    margin-top: 5%;
}

.accueil-1 h3, .accueil-1 span {
    color: white;
    font-weight: bold;
}

.accueil-1 p {
    color: aqua;
    font-weight: bold;
}

/* ===================== COMPETENCES ===================== */
.comp, .comp1 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.competence-img, .competence-img1 {
    background-color: white;
    padding: 3%;
    border-radius: 8px;
    border: 1px solid aqua;
    text-align: center;
}

/* ===================== PORTFOLIO ===================== */
.portfolio h2 {
    text-align: center;
    color: white;
}

/* ===================== RESPONSIVE ===================== */
/* .row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
  */
/* Boxes */
.skill_card, .portfolio_card, .contact_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #5dade2;
    color: #1a1f36;
    padding: 20px;
    width: 150px;
   margin: 0%;
    height: 150px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}
 
.skill_card img, .portfolio_card img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    object-fit: contain;
}
 
.skill_card p, .portfolio_card p, .contact_card p {
    font-weight: bold;
    text-align: center;
}
 
.skill_card:hover, .portfolio_card:hover, .contact_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
 
.skills_columns, .portfolio_columns, .contact_columns {
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
 
.skill_category {
    display: flex;
    justify-content: center;
    gap: 20px;
}

 .contact_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: blue;
    color: #1a1f36;
    padding: 40px;
    width: 100%; /* prend toute la largeur disponible dans la colonne */
    /* max-width: 300px; limite la largeur sur grand écran */
    min-height: 120px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    /* word-wrap: break-word; /* autorise le texte à se couper */
    /* overflow-wrap: anywhere; /* assure que les emails très longs se coupent correctement */
}
 

.contact , h3 {
    text-align: center;
}

footer{
    text-align: center;
}


/* Tablette */
@media (max-width: 992px) {
    .navbar .links {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .accueil-0 {
        flex-direction: column;
        text-align: center;
    }

    .comp, .comp1 {
        gap: 1.5rem;
    }
}

/* Mobile */
@media (max-width: 576px) {
    header {
        padding: 10px;
    }

    .navbar {
        flex-direction: column;
        gap: 10px;
    }

    .navbar .links {
        flex-direction: column;
        gap: 15px;
    }

    section {
        padding: 20px;
    }

    .accueil-0 {
        flex-direction: column;
    }

    .comp, .comp1 {
        flex-direction: column;
        align-items: center;
    }

    .competence-img, .competence-img1 {
        width: 80%;
    }
      .skill_category {
        flex-direction: column;
        align-items: center;
    }
}