/*
 * Feuille de style de la console d'administration ANPIT (lot 2b).
 * Sobre, polices systeme uniquement (aucune police web). Couleurs reprises
 * des jetons de website-anpit (src/styles/tokens/_colors.scss) : orange CFDT,
 * encre bleutee ANPIT, sable, gris chaud, vert et bordeaux de la charte.
 */

:root {
  --couleur-orange: #e7591c;
  --couleur-orange-fonce: #c24a15;
  --couleur-encre: #20396e;
  --couleur-encre-douce: #2d4575;
  --couleur-sable: #f7f4ef;
  --couleur-bordure: #d4cbc7;
  --couleur-succes: #aac955;
  --couleur-danger: #6b3a3f;
  --couleur-fond: #ffffff;
  --police-systeme: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* L'attribut hidden l'emporte toujours sur l'affichage des classes. */
[hidden] {
  display: none !important;
}

html {
  font-family: var(--police-systeme);
  line-height: 1.5;
  color: var(--couleur-encre-douce);
  background: var(--couleur-sable);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  padding: 1.5rem;
}

.console {
  width: 100%;
  max-width: 36rem;
  padding: 2rem;
  background: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-top: 4px solid var(--couleur-orange);
  border-radius: 0.5rem;
}

.console__surtitre {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--couleur-orange);
}

.console__titre {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--couleur-encre);
}

.console__texte {
  margin: 0 0 1.5rem;
}

.console__section > :last-child {
  margin-bottom: 0;
}

.console__bouton {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: var(--couleur-fond);
  text-decoration: none;
  background: var(--couleur-orange);
  border: 0;
  border-radius: 0.375rem;
  cursor: pointer;
}

.console__bouton:hover,
.console__bouton:focus-visible {
  background: var(--couleur-orange-fonce);
}

.console__bouton:focus-visible {
  outline: 3px solid var(--couleur-encre);
  outline-offset: 2px;
}

.console__bouton:disabled {
  cursor: wait;
  opacity: 0.7;
}

.console__bandeau {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--couleur-sable);
  border-left: 4px solid var(--couleur-encre);
}

.console__session {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1rem;
  margin: 0 0 1.5rem;
}

.console__session dt {
  font-weight: 600;
  color: var(--couleur-encre);
}

.console__session dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.console__erreur {
  margin: 0;
  padding: 0.75rem 1rem;
  color: var(--couleur-danger);
  background: var(--couleur-sable);
  border-left: 4px solid var(--couleur-danger);
}

.pied {
  width: 100%;
  max-width: 36rem;
  font-size: 0.875rem;
}

.console__etat {
  margin: 0;
  padding: 0.5rem 1rem;
  border-left: 4px solid var(--couleur-bordure);
  background: var(--couleur-fond);
}

.console__etat[data-etat="ok"] {
  border-left-color: var(--couleur-succes);
}

.console__etat[data-etat="erreur"] {
  border-left-color: var(--couleur-danger);
  color: var(--couleur-danger);
}