/* Habillage des écrans de compte et de gestion.
   L'écran de saisie garde sa propre feuille : il est calqué sur l'imprimé,
   et ses contraintes n'ont rien à voir avec celles-ci. */

:root {
  --encre: #1d2430;
  --encre-douce: #5b6675;
  --fond: #f5f6f8;
  --carte: #ffffff;
  --trait: #dde1e7;
  --accent: #1f6feb;
  --accent-sombre: #1a5cc4;
  --alerte: #b42318;
  --alerte-fond: #fdf2f1;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--carte);
  border-bottom: 1px solid var(--trait);
}

.marque {
  font-weight: 650;
  color: var(--encre);
  text-decoration: none;
}

.bandeau nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bandeau form {
  margin: 0;
}

.qui {
  color: var(--encre-douce);
  font-size: 0.9rem;
}

main {
  max-width: 46rem;
  margin: 2.5rem auto;
  padding: 0 1.25rem;
}

h1 {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
  font-weight: 650;
}

.carte {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: 1.5rem;
  display: grid;
  gap: 1rem;
}

label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--encre-douce);
}

input {
  font: inherit;
  color: var(--encre);
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--trait);
  border-radius: 7px;
  background: #fff;
}

input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

small {
  color: var(--encre-douce);
  font-size: 0.8rem;
}

.bouton-plein {
  font: inherit;
  font-weight: 550;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.bouton-plein:hover {
  background: var(--accent-sombre);
}

.lien {
  font: inherit;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

a {
  color: var(--accent);
}

.appoint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--encre-douce);
}

.erreur {
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #f0c8c4;
  border-left: 3px solid var(--alerte);
  border-radius: 7px;
  background: var(--alerte-fond);
  color: var(--alerte);
}

.vide {
  color: var(--encre-douce);
}

.entete-liste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.entete-liste .appoint {
  margin: 0;
}

a.bouton-plein {
  display: inline-block;
  text-decoration: none;
}

select {
  font: inherit;
  color: var(--encre);
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--trait);
  border-radius: 7px;
  background: #fff;
}

.deux-colonnes {
  display: grid;
  gap: 1rem;
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 32rem) {
  .deux-colonnes {
    grid-template-columns: 1fr;
  }
}

.panneau-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

/* Le tableau déborde plutôt que de forcer la page à défiler latéralement. */
.carte:has(.liste) {
  overflow-x: auto;
}

.liste {
  width: 100%;
  border-collapse: collapse;
}

.liste th,
.liste td {
  text-align: left;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--trait);
  white-space: nowrap;
}

.liste th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--encre-douce);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.liste tbody tr:last-child td {
  border-bottom: 0;
}

.liste td:first-child {
  white-space: normal;
  font-weight: 500;
}

/* ------------------------------------------------------- suppression */

.bouton-danger {
  font: inherit;
  font-weight: 550;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 7px;
  background: var(--alerte);
  color: #fff;
  cursor: pointer;
}

.bouton-danger:hover {
  background: #97281e;
}

/* Discrète dans la liste : la suppression ne doit pas rivaliser d'attention
   avec le nom du candidat, qui est ce qu'on vient y chercher. Elle se teinte
   au survol, pour dire ce qu'elle fait avant qu'on ne clique. */
.action-supprimer {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  color: var(--encre-douce);
}

.action-supprimer:hover,
.action-supprimer:focus-visible {
  color: var(--alerte);
  background: var(--alerte-fond);
}

.icone {
  display: block;
}

.colonne-action {
  text-align: right;
}

.bandeau-annulation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--trait);
  border-left: 3px solid var(--encre-douce);
  border-radius: 7px;
  background: var(--carte);
  font-size: 0.92rem;
}

.bandeau-annulation form {
  margin: 0;
}

.detail {
  margin: 0.2rem 0 0.8rem;
  padding-left: 1.1rem;
  color: var(--encre-douce);
  font-size: 0.9rem;
}

.panneau-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin: 0;
}

/* Présent pour les lecteurs d'écran, absent à l'œil : une colonne d'actions
   n'a pas d'intitulé visible, mais elle en a besoin d'un. */
.invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}