/* ==========================================================================
   Composant unifié « Compétences / Langues » (lot 2, D.3)
   Partagé par le profil candidat, la fiche candidature et la CVthèque.
   Volontairement AUTONOME (aucune variable de thème) pour rendre à l'identique
   dans les trois espaces, qui chargent des feuilles différentes.
   ========================================================================== */

.level-block { margin-bottom: 1.75rem; }

/* --- Titre numéroté --- */
.level-block-title {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.95rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #1A1A1A; margin: 0 0 0.9rem;
}
.level-block-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #FFB400; color: #1A1A1A;
  font-size: 0.8rem; font-weight: 800; flex-shrink: 0;
}

/* --- Grille à 3 colonnes --- */
.level-head,
.level-row {
  display: grid;
  /* 5.7 : derniere colonne 58px FIXE -> max-content, pour que l'entete « Pourcentage »
     tienne sur UNE seule ligne (il debordait/repliait a 58px). La colonne des barres
     (minmax(0,3fr)) absorbe la difference ; sur mobile l'entete est masque (voir plus bas),
     la colonne se reduit alors a la valeur « 100 % ». */
  grid-template-columns: minmax(90px, 1.1fr) minmax(0, 3fr) max-content;
  align-items: center;
  gap: 0.85rem;
}
.level-head {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #8E8E8E;
  padding-bottom: 0.4rem; border-bottom: 1px solid #F0F0EE; margin-bottom: 0.6rem;
}
.level-head span { white-space: nowrap; }
.level-head span:last-child { text-align: right; }

.level-list { list-style: none; padding: 0; margin: 0; }
.level-row { padding: 0.3rem 0; }

.level-name {
  font-weight: 600; font-size: 0.9rem; color: #1A1A1A;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Barre --- */
.level-bar-wrap {
  background: #F0F0EE; border-radius: 999px; overflow: hidden;
  height: 22px; display: block;
}
.level-bar {
  display: flex; align-items: center;
  height: 100%; border-radius: 999px;
  min-width: 3.5rem;                 /* garantit la lisibilité du libellé */
  transition: width 0.3s ease;
}
.level-bar-text {
  color: #FFFFFF; font-size: 0.7rem; font-weight: 700;
  padding: 0 0.6rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);   /* lisible sur les teintes claires */
}
.level-pct { text-align: right; font-weight: 700; font-size: 0.85rem; color: #1A1A1A; }

/* --- Axe gradué --- */
.level-axis {
  /* Aligné sur la colonne « barre » : mêmes proportions que .level-row,
     la 1re et la 3e colonne servent d'espaceurs. */
  display: grid;
  grid-template-columns: minmax(90px, 1.1fr) minmax(0, 3fr) 58px;
  gap: 0.85rem;
  margin-top: 0.4rem;
  font-size: 0.68rem; color: #8E8E8E;
}
.level-axis-ticks { display: grid; grid-template-columns: repeat(5, 1fr); grid-column: 2; }
.level-axis-ticks span { text-align: center; }
.level-axis-ticks span:first-child { text-align: left; }
.level-axis-ticks span:last-child  { text-align: right; }

/* --- Légende --- */
.level-scale {
  margin-top: 1rem; padding: 0.75rem 0.95rem;
  background: #F7F7F5; border-left: 3px solid #FFB400; border-radius: 8px;
}
.level-scale-title {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #5A5A5A; margin-bottom: 0.4rem;
}
.level-scale-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem;
  font-size: 0.78rem; color: #5A5A5A;
}
.level-scale-pct { font-weight: 800; color: #1A1A1A; }

.level-block-empty { font-size: 0.875rem; color: #8E8E8E; margin: 0; }

/* --- Mode compact (listes, fiches denses) --- */
.level-block--compact { margin-bottom: 1rem; }
.level-block--compact .level-block-title { font-size: 0.8rem; margin-bottom: 0.5rem; }
.level-block--compact .level-bar-wrap { height: 16px; }
.level-block--compact .level-bar-text { font-size: 0.62rem; padding: 0 0.45rem; }
.level-block--compact .level-row { padding: 0.15rem 0; }
.level-block--compact .level-head,
.level-block--compact .level-row { grid-template-columns: minmax(76px, 1fr) minmax(0, 2.4fr) 46px; gap: 0.5rem; }
.level-block--compact .level-pct { font-size: 0.78rem; }

/* --- Responsive : l'intitulé passe au-dessus de la barre --- */
@media (max-width: 575.98px) {
  .level-head { display: none; }
  .level-row {
    grid-template-columns: 1fr 52px;
    grid-template-areas: "name pct" "bar bar";
    row-gap: 0.25rem; padding: 0.45rem 0;
  }
  .level-name     { grid-area: name; white-space: normal; }
  .level-pct      { grid-area: pct; }
  .level-bar-wrap { grid-area: bar; }
  .level-axis     { grid-template-columns: 1fr; }
  .level-axis-ticks { grid-column: 1; }
}