/*
  Composants de la charte : boutons, badges, champs, messages, cartes, tableaux.
  Rôle : un style par composant, noms de classes en français (liste dans docs/CHARTE_GRAPHIQUE.md §6).
  Règle C-03 : uniquement des variables de tokens.css (aucune couleur ou taille en dur).
*/

/* Un élément masqué (attribut hidden) le reste, même si son composant impose un affichage (.champ, .carte...). */
[hidden] { display: none !important; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible-min);
  padding: 0 var(--espace-5);
  font: inherit;
  font-weight: 700;
  color: var(--couleur-blanc);
  background: var(--couleur-bleu-action);
  border: var(--epaisseur-champ) solid transparent;
  border-radius: var(--rayon-controle);
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover { background: var(--couleur-bleu-profond); color: var(--couleur-blanc); }

.bouton--secondaire {
  color: var(--couleur-bleu-action);
  background: var(--couleur-blanc);
  border-color: var(--couleur-bleu-action);
}
.bouton--secondaire:hover {
  color: var(--couleur-bleu-profond);
  background: var(--couleur-bleu-clair);
  border-color: var(--couleur-bleu-profond);
}

.bouton--danger { background: var(--couleur-rouge-danger); }
.bouton--danger:hover { background: var(--couleur-rouge-danger); text-decoration: underline; }

.bouton:disabled,
.bouton[aria-disabled="true"] {
  color: var(--couleur-desactive-texte);
  background: var(--couleur-desactive-fond);
  border-color: transparent;
  cursor: not-allowed;
  text-decoration: none;
}

/* Gros bouton pleine largeur, pour les écrans mobiles (une action principale par écran) */
.bouton--grand {
  display: flex;
  width: 100%;
  min-height: var(--cible-mobile);
  margin: var(--espace-3) 0;
  font-size: var(--taille-bouton-mobile);
}

.bouton-groupe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); }

/* ---------- Badges de statut : pastille + texte, toujours sur une seule ligne ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-1) var(--espace-3);
  font-size: var(--taille-petite);
  font-weight: 700;
  white-space: nowrap;
  color: var(--couleur-texte-doux);
  background: var(--couleur-neutre-clair);
  border-radius: var(--rayon-pastille);
}
.badge::before {
  content: "";
  width: var(--espace-2);
  height: var(--espace-2);
  background: currentColor;
  border-radius: 50%;
}
.badge--info { color: var(--couleur-bleu-profond); background: var(--couleur-bleu-clair); }
.badge--attention { color: var(--couleur-attention); background: var(--couleur-attention-clair); }
.badge--succes { color: var(--couleur-succes); background: var(--couleur-succes-clair); }
.badge--danger { color: var(--couleur-rouge-danger); background: var(--couleur-rouge-clair); }

/* ---------- Champs de formulaire ---------- */
.champ-groupe { margin-bottom: var(--espace-4); }
.champ-libelle { display: block; margin-bottom: var(--espace-1); font-weight: 700; }
.champ {
  display: block;
  width: 100%;
  min-height: var(--cible-min);
  padding: 0 var(--espace-3);
  font: inherit;
  color: var(--couleur-texte);
  background: var(--couleur-blanc);
  border: var(--epaisseur-champ) solid var(--couleur-bordure-champ);
  border-radius: var(--rayon-controle);
}
textarea.champ { min-height: calc(var(--cible-min) * 2); padding: var(--espace-2) var(--espace-3); }
.champ:focus-visible { border-color: var(--couleur-bleu-action); }
.champ:disabled {
  color: var(--couleur-desactive-texte);
  background: var(--couleur-desactive-fond);
  border-color: var(--couleur-desactive-fond);
}
.champ--erreur { border-color: var(--couleur-rouge-danger); }
.champ-aide { margin-top: var(--espace-1); font-size: var(--taille-petite); color: var(--couleur-texte-doux); }
.champ-erreur {
  margin-top: var(--espace-1);
  font-size: var(--taille-petite);
  font-weight: 700;
  color: var(--couleur-rouge-danger);
}

/* ---------- Messages : le type est écrit au début du texte (« Erreur : … ») ---------- */
.message {
  margin: var(--espace-3) 0;
  padding: var(--espace-3) var(--espace-4);
  background: var(--couleur-bleu-glacier);
  border-left: var(--epaisseur-message) solid var(--couleur-bleu-logo);
  border-radius: var(--rayon-message);
}
.message--succes { background: var(--couleur-succes-clair); border-left-color: var(--couleur-succes); }
.message--attention { background: var(--couleur-attention-clair); border-left-color: var(--couleur-attention); }
.message--erreur { background: var(--couleur-rouge-clair); border-left-color: var(--couleur-rouge-danger); }

/* ---------- Cartes ---------- */
.carte {
  margin-bottom: var(--espace-4);
  padding: var(--espace-4);
  background: var(--couleur-blanc);
  border: var(--epaisseur-filet) solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
}
.carte__titre { margin: 0 0 var(--espace-3); font-weight: 700; }

/* ---------- Tableaux ---------- */
.tableau-defilant { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; background: var(--couleur-blanc); }
.tableau th {
  padding: var(--espace-3);
  text-align: left;
  color: var(--couleur-blanc);
  background: var(--couleur-bleu-profond);
}
.tableau td {
  padding: var(--espace-3);
  vertical-align: middle;
  border-bottom: var(--epaisseur-filet) solid var(--couleur-bordure);
}
.tableau tbody tr:nth-child(even) { background: var(--couleur-bleu-glacier); }

/* N° d'affaire : jamais coupé ; le libellé qui suit peut passer à la ligne */
.numero-affaire { font-weight: 700; color: var(--couleur-bleu-profond); white-space: nowrap; }

/* Sous 560 px, un tableau « liste mobile » devient une liste : numéro + statut, puis libellé.
   Les trois cellules portent .cellule-numero, .cellule-libelle et .cellule-statut. */
@media (max-width: 560px) {
  .tableau--liste-mobile thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .tableau--liste-mobile,
  .tableau--liste-mobile tbody { display: block; }
  .tableau--liste-mobile tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--espace-1) var(--espace-3);
    padding: var(--espace-3);
    border-bottom: var(--epaisseur-filet) solid var(--couleur-bordure);
  }
  .tableau--liste-mobile td { padding: 0; border: 0; }
  .tableau--liste-mobile .cellule-numero { grid-column: 1; grid-row: 1; }
  .tableau--liste-mobile .cellule-statut { grid-column: 2; grid-row: 1; text-align: right; }
  .tableau--liste-mobile .cellule-libelle { grid-column: 1 / -1; grid-row: 2; }
}