/* ==========================================================================
   components.css — composants réutilisables.
   RÈGLE : aucune couleur brute ici — uniquement les variables sémantiques.
   États : normal, :hover, :active, sélectionné, :focus-visible, désactivé.
   ========================================================================== */

/* --- Boutons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8125rem 1.375rem;
  border: var(--bw-strong) solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
/* La couleur du texte est réaffirmée sur chaque état : sans cela, la règle
   globale a:hover/a:active (var(--primary-hover), spécificité 0,1,1) l'emporte
   sur .btn-primary (0,1,0) et rend le libellé invisible sur le fond de survol. */
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn-primary:active { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn-primary:focus-visible { color: var(--on-primary); }

.btn-secondary {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-secondary:hover { background: var(--accent); color: var(--primary); }
.btn-secondary:active { background: var(--accent); color: var(--primary); }
.btn-secondary:focus-visible { color: var(--primary); }

/* Désactivé : ne repose pas que sur la couleur (attribut + curseur) */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--surface-2);
  color: var(--faint);
  border-color: var(--border);
  cursor: not-allowed;
}

/* --- Étiquette de cadre (compétences) : contour, jamais une jauge -------- */
.label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: var(--bw) solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}
/* Variante « environnement professionnel » — accent, pour hiérarchiser */
.label--pro {
  color: var(--primary);
  background: var(--accent);
  border-color: var(--accent-border);
}

/* --- Étiquette technologie (mono) --------------------------------------- */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  color: var(--text);
  background: var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}

/* --- Carte générique ----------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover { border-color: var(--primary); }
.card__title { font-size: var(--fs-h3); font-weight: 700; }

/* Carte cliquable : sélection / focus au niveau du lien interne */
.card--selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

/* --- Filet séparateur ---------------------------------------------------- */
.divider { border: 0; border-top: var(--bw) solid var(--border); }

/* --- Puces de niveau (difficulté) : l'info reste portée par le texte ----- */
.dots { font-family: var(--font-mono); letter-spacing: 0.15em; color: var(--primary); }