:root {
  --skill-name-width: 135px;   /*Mettre à jour à chaque ajout de compétences ou changements de noms*/

  --skill-bar-landscape-width: 250px;
  --skill-bar-portrait-width: 150px;
  --skill-bar-landscape-height: 24px;
  --skill-bar-portrait-height: 20px;
  
  --skill-bar-graduation-width: 2px;
}

section.skills {
  display: flex;
  flex-direction: column;
  overflow: visible;
  justify-content: center;
  align-items: center;
}

.skills .title {
  margin-bottom: 50px;
}

.skills .categories {
  display: flex;
  flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 30px;
  justify-content: center;
  align-items: start;
  @media only screen and (orientation: portrait), (max-width: 800px) {
	column-gap: calc(10px + var(--skill-bar-portrait-height) + 30px);
  }
}

.skills .category {
  display: flex;
  flex-direction: column;
  padding-right: calc(15px + var(--skill-bar-landscape-height));
}

.skills h2 {
  margin-top: 30px;
  margin-bottom: 30px;
  text-wrap: balance;
  text-align: center;
  @media only screen and (orientation: portrait), (max-width: 800px) {
	margin-top: 15px;
	margin-bottom: 15px;
  }
}

.skills .items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: end;
}

.skills .item {
  display: flex;
  flex-direction: row;
  gap: 15px;
  justify-content: start;
  align-items: center;
  position: relative;
}

.skills .item .name {
  width: var(--skill-name-width);
  text-wrap: nowrap;
  text-align: end;
  /*background-color: red;   /*DEBUG*/
}

.skills .bar-container {
  display: flex;
  overflow: hidden;
  width: var(--skill-bar-landscape-width);
  height: var(--skill-bar-landscape-height);
  border-radius: calc(var(--skill-bar-landscape-height) / 2);
  background-color: var(--light-grey);
  box-shadow: 2px 2px 1px 0px var(--shadow-color);
  position: relative;
  @media only screen and (orientation: portrait), (max-width: 800px) {
	width: var(--skill-bar-portrait-width);
    height: var(--skill-bar-portrait-height);
	border-radius: calc(var(--skill-bar-portrait-height) / 2);
  }
}

.skills .bar-graduations {
  display: flex;
  width: calc(100% * (1 - (1 / var(--graduation-count))));
  height: 100%;
  background-image: repeating-linear-gradient(
    to right,
    var(--grey), var(--grey) 2px,
    transparent 2px, transparent calc(100% / calc(var(--graduation-count) - 1))
  );
  position: absolute;
  top: 0;
  right: calc(var(--skill-bar-graduation-width) * -1);
  z-index: 1;
}

.skills .bar-filler {
  display: flex;
  width: calc(((var(--value) / (var(--max-value) - var(--min-value))) * 100%) + var(--skill-bar-graduation-width));
  height: 100%;
  background-color: var(--transparent-light-blue);
  backdrop-filter: blur(1px);
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s ease;
  z-index: 2;
}

.skills .category.domains .bar-filler {
  background-color: var(--transparent-light-green);
  box-shadow: 3px 0 3px 0 var(--dark-green);
}

.skills .category.language .bar-filler {
  background-color: var(--transparent-light-purple);
  box-shadow: 3px 0 3px 0 var(--dark-purple);
}

.skills .category.cad .bar-filler {
  background-color: var(--transparent-light-red);
  box-shadow: 3px 0 3px 0 var(--dark-red);
}

.skills .category.management .bar-filler {
  background-color: var(--transparent-light-yellow);
  box-shadow: 3px 0 3px 0 var(--dark-yellow);
}

.skills:hover .bar-filler {
  animation: 1s skill-bar-appearing 0.2s forwards;
}

@keyframes skill-bar-appearing {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

.skills .bar-container .value-display-container {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.skills .bar-container .value-display-container p {
  text-wrap: nowrap;
  font-weight: 500;
  color: var(--white) !important;
  text-shadow: none !important;
}

.skills .learn-more {
  display: flex;
  width: var(--skill-bar-landscape-height);
  height: var(--skill-bar-landscape-height);
  border-radius: 50%;
  background-color: var(--tooltip-color);
  backdrop-filter: blur(3px);
  @media only screen and (orientation: portrait), (max-width: 800px) {
	width: var(--skill-bar-portrait-height);
    height: var(--skill-bar-portrait-height);
  }
}

.skills .item .learn-more {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translate(100%, -50%);
}

.skills .legend-container .learn-more {
  margin-right: 10px;
}

.skills .item .learn-more a {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  @media only screen and (orientation: portrait), (max-width: 800px) {
    width: var(--touch-devices-button-height);
    height: var(--touch-devices-button-height);
  }
}

.skills .learn-more svg {
  width: var(--skill-bar-landscape-height);
  height: var(--skill-bar-landscape-height);
  padding: 1px;
  color: var(--white);
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  @media only screen and (orientation: portrait), (max-width: 800px) {
	width: var(--skill-bar-portrait-height);
    height: var(--skill-bar-portrait-height);
  }
}

.skills .legend-container {
  display: flex;
  flex-direction: row;
  width: 80%;
  height: auto;
  margin-top: 50px;
  @media only screen and (orientation: portrait), (max-width: 800px) {
	width: 90%;
	margin-top: 30px;
  }
}

.skills .legend-container p {
  color: var(--light-text-color);
  @media only screen and (orientation: portrait), (max-width: 800px) {
	hyphens: auto;
  }
}