/* Attestable — styles des composants.
   Chargé après tokens.css. Toutes les valeurs viennent des jetons : aucune
   couleur, aucune longueur n'est écrite en dur ici. */

.at-racine {
  background: var(--surface-100);
  color: var(--encre-100);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 23px;
  -webkit-font-smoothing: antialiased;
}

/* --- Focus : une seule règle, partout ------------------------------------ */

.at-racine :focus-visible {
  outline: 2px solid var(--accent-100);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Boutons ------------------------------------------------------------- */

.at-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease;
}

.at-bouton--principal {
  background: var(--accent-100);
  color: var(--surface-000);
}
.at-bouton--principal:hover { background: var(--accent-200); }

.at-bouton--secondaire {
  background: var(--surface-000);
  color: var(--encre-100);
  border-color: var(--bordure-200);
}
.at-bouton--secondaire:hover { background: var(--surface-200); }

.at-bouton--discret {
  background: none;
  color: var(--accent-100);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}
.at-bouton--discret:hover { background: var(--accent-faible); }

.at-bouton--petit { padding: var(--space-2) var(--space-3); font-size: 13px; }

.at-bouton[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Cartes -------------------------------------------------------------- */

.at-carte {
  background: var(--surface-000);
  border: 1px solid var(--bordure-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre-carte);
  padding: var(--space-5);
}

.at-carte__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.at-carte__titre {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  margin: 0;
}

.at-carte__note {
  color: var(--encre-300);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
}

/* --- Badges de gravité --------------------------------------------------- */

.at-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

.at-badge--critique { color: var(--gravite-critique); }
.at-badge--majeure  { color: var(--gravite-majeure); }
.at-badge--moderee  { color: var(--gravite-moderee); }
.at-badge--mineure  { color: var(--gravite-mineure); }

.at-badge__compte {
  font-family: var(--font-mono);
  font-weight: 400;
  opacity: .85;
}

/* --- Jauge de score ------------------------------------------------------ */

.at-jauge { display: flex; flex-direction: column; gap: var(--space-2); }

.at-jauge__chiffres {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.at-jauge__valeur {
  font-family: var(--font-mono);
  font-size: 56px;
  line-height: 56px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.at-jauge__total {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  color: var(--encre-300);
}

.at-jauge__lettre {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.at-jauge__piste {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-300);
  overflow: hidden;
}

.at-jauge__remplissage {
  height: 100%;
  border-radius: var(--radius-pill);
}

.at-jauge__libelle {
  font-size: 13px;
  line-height: 20px;
  color: var(--encre-200);
}

.at-jauge__mention {
  font-size: 12px;
  line-height: 18px;
  color: var(--encre-300);
}

.at-note-a { color: var(--note-a); }
.at-note-b { color: var(--note-b); }
.at-note-c { color: var(--note-c); }
.at-note-d { color: var(--note-d); }
.at-note-e { color: var(--note-e); }

.at-fond-a { background: var(--note-a); }
.at-fond-b { background: var(--note-b); }
.at-fond-c { background: var(--note-c); }
.at-fond-d { background: var(--note-d); }
.at-fond-e { background: var(--note-e); }

/* --- Champs -------------------------------------------------------------- */

.at-champ { display: flex; flex-direction: column; gap: var(--space-2); }

.at-champ__etiquette {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-200);
}

.at-champ__saisie {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-3);
  border: 1px solid var(--bordure-200);
  border-radius: var(--radius-md);
  background: var(--surface-000);
  color: var(--encre-100);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
}

.at-champ__saisie::placeholder { color: var(--encre-300); }
.at-champ__saisie:hover { border-color: var(--encre-300); }

.at-champ__aide {
  font-size: 13px;
  line-height: 20px;
  color: var(--encre-300);
}

.at-champ__erreur {
  font-size: 13px;
  line-height: 20px;
  color: var(--gravite-critique);
  font-weight: 500;
}

.at-champ--erreur .at-champ__saisie { border-color: var(--gravite-critique); }

/* --- Tableau ------------------------------------------------------------- */

.at-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.at-tableau th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--bordure-200);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-200);
  white-space: nowrap;
}

.at-tableau td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--bordure-100);
  vertical-align: baseline;
}

.at-tableau tr:last-child td { border-bottom: none; }

.at-tableau__nombre {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.at-tableau__critere {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  color: var(--encre-300);
  white-space: nowrap;
}