.skills ul {
  list-style: none; /* Supprime les puces de liste */
  padding: 0;
  margin: 0;
}

.skills ul li {
  margin-bottom: 20px; /* Espace entre les compétences */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.skillMeasure {
  display: flex; /* Utilise Flexbox pour aligner les cercles */
  gap: 1em; /* Espace entre chaque cercle */
  justify-content: flex-start; /* Aligne les cercles à gauche */
  overflow-x: auto; /* Ajoute un défilement horizontal si nécessaire */
  white-space: nowrap; /* Empêche les cercles de passer à la ligne */
}


.container {
    columns: 2; /* Utiliser 2 colonnes */
    column-gap: 5%; /* Espace entre les colonnes */
    position: relative; /* Nécessaire pour le positionnement absolu */

}

.container::before {
    content: ''; /* Crée un pseudo-élément */
    position: absolute; /* Positionnement absolu */
    top: 0; /* Départ du haut du conteneur */
    left: 53%; /* Centre le séparateur avec un décalage */
    height: 98%; /* Prend la hauteur totale du conteneur */
    border-left: 2px solid #000; /* Ligne de séparation */
    z-index: 1; /* S'assure que la ligne est au-dessus des colonnes */
}

.container > * {
    position: relative; /* Permettre à la ligne de se positionner par rapport au conteneur */
    z-index: 0; /* Assurez-vous que le contenu est en dessous de la ligne */
}

.personality ul li article h4
{
    margin-bottom: 0.4em;
    margin-top: 1em;
}



p
{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 0.5em;
    margin-top: 0.1em;
}

li
{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

h3
{
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-decoration: underline;
}

article ul
{
    list-style: none;
}

article ul li {
  position: relative; /* Pour positionner l'image correctement */
  padding-left: 20px; /* Ajuste l'espace pour l'image */
  padding-bottom: 0.6em;
}

article ul li::before {
  content: '';
  margin-block-start: 0.3em;
  position: absolute;
  left: 0;
  top: 0;
  width: 10px; /* Largeur du losange */
  height: 10px; /* Hauteur du losange */
  background-image: url('../img/losange.png');
  background-size: contain; /* Ajuste l'image pour qu'elle rentre dans le cadre */
  background-repeat: no-repeat;
}


.skills ul li::before {
    margin-block-start: 0.6em;
}

.other-skills li::before{
  margin-block-start: 0.3em !important;
}

@media (max-width: 1150px) {
    .container{
       column-count: 1;
    }
    .container::before {
        content: '';
        border-left: 0;
    }
}