/* Les deux espaces (admin et client), dans la charte du site : fond clair, en-tête blanc,
   cartes blanches arrondies (24 px), boutons pleins en forme de pilule, jamais transparents.
   Ni badges, ni texte en capitales espacées. */

.evitement {
  position: absolute;
  left: -9999px;
}

.evitement:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--white);
}

/* ---------- Pages ---------- */
.page {
  display: grid;
  gap: 1.5rem;
  width: min(calc(100% - 2 * var(--gutter)), 960px);
  margin: clamp(2rem, 5vw, 3.5rem) auto;
}

.page-connexion {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 2rem var(--gutter);
}

.titre-page {
  display: grid;
  gap: 0.5rem;
}

.titre-page h1,
.carte h1 {
  font-size: var(--fs-h2);
}

.intro {
  color: var(--text-soft);
}

.carte {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.carte h2 {
  font-size: var(--fs-card);
  font-family: var(--font-body);
  font-stretch: 100%;
}

.carte-connexion {
  width: min(100%, 470px);
}

.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.lien-carte {
  color: inherit;
  text-decoration: none;
  transition: transform var(--duree) var(--courbe);
}

.lien-carte:hover {
  transform: translateY(-2px);
}

.lien {
  color: var(--accent-ink);
  font-weight: 500;
}

.petit {
  color: var(--text-soft);
  font-size: var(--fs-small);
}

/* ---------- Formulaires ---------- */
.formulaire {
  display: grid;
  gap: 1.1rem;
  margin: 0;
}

.champ {
  display: grid;
  gap: 0.4rem;
}

.champ label {
  color: var(--night);
  font-weight: 500;
}

/* Comme les champs du site (src/components/ui/Field) : filet clair, liseré au survol, halo à la sélection.
   Le contour transparent reste visible en mode contraste élevé. */
.champ input {
  width: 100%;
  height: 3rem;
  padding: 0 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 1rem;
  transition:
    border-color var(--duree) var(--courbe),
    box-shadow var(--duree) var(--courbe);
}

.champ input:hover {
  border-color: var(--accent-light);
}

.champ input:focus-visible {
  border-color: var(--accent-ink);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 4px var(--accent-tint);
}

.champ-erreur input {
  border-color: var(--error);
}

.champ-message {
  color: var(--error);
  font-size: var(--fs-small);
}

.champ-aide,
.champ-aide ul {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-small);
}

.champ-aide ul {
  padding-left: 1.1rem;
}

.saisie-code {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

/* ---------- Boutons (comme sur le site) ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 1em 1.7em;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duree) var(--courbe),
    color var(--duree) var(--courbe),
    transform var(--duree) var(--courbe);
}

.bouton-principal {
  background: var(--night);
  color: var(--white);
}

.bouton-doux {
  background: var(--accent-light);
  color: var(--night);
}

.bouton-alerte {
  background: var(--error);
  color: var(--white);
}

.bouton-petit {
  padding: 0.7em 1.2em;
  font-size: 0.9375rem;
}

@media (hover: hover) {
  .bouton-principal:hover,
  .bouton-doux:hover {
    background: var(--accent-bright);
    color: var(--night);
    transform: translateY(-2px);
  }

  .bouton-alerte:hover {
    background: #8c1d18;
    transform: translateY(-2px);
  }
}

.bouton:active {
  transform: translateY(0) scale(0.98);
}

/* ---------- Messages ---------- */
.messages {
  display: grid;
  gap: 0.5rem;
}

.alerte {
  max-width: none;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--green-tint);
  color: var(--night);
}

.alerte-success {
  color: var(--green-ink);
}

.alerte-warning {
  background: #fdf3dc;
  color: #6b4e00;
}

.alerte-error {
  background: #fbeae8;
  color: #8c1d18;
}

/* ---------- Double authentification ---------- */
.etapes {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding-left: 1.25rem;
}

.qr {
  width: 210px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.qr svg {
  width: 100%;
  height: auto;
}

/* La clé passe à la ligne entre ses groupes de 4 caractères, jamais au milieu d'un groupe. */
.secret {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--beige);
  font-variant-numeric: tabular-nums;
}

.codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.codes li {
  padding: 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--beige);
  text-align: center;
}

.options {
  display: grid;
  gap: 1rem;
}

.option {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* ---------- Listes ---------- */
.tableau {
  width: 100%;
  border-collapse: collapse;
}

.tableau th,
.tableau td {
  padding: 0.8rem 0.5rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.tableau th {
  color: var(--text-soft);
  font-size: var(--fs-small);
  font-weight: 500;
}

.tableau td form {
  margin: 0;
}

.actions-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.actions-ligne .bouton {
  white-space: nowrap;
}

.etat-actif {
  color: var(--green-ink);
  font-weight: 600;
}

.etat-coupe {
  color: var(--error);
  font-weight: 600;
}

.etat-invite,
.etat-expire {
  color: var(--text-soft);
}

.appareils {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.appareils li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

@media (max-width: 720px) {
  .tableau thead {
    display: none;
  }

  .tableau tr {
    display: grid;
    gap: 0.25rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--line);
  }

  .tableau td {
    padding: 0;
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bouton,
  .lien-carte,
  .champ input {
    transition: none;
  }
}