/*
  FICHIER : checkin-web/style.css
  RÔLE    : l'apparence de la page de pointage : les couleurs de GestyZ (bleu ciel), claire ou sombre
            selon le téléphone, de gros boutons faciles à toucher.
*/

:root {
  --primaire: #0369a1;
  --primaire-doux: #e0f2fe;
  --sur-primaire: #ffffff;
  --fond: #f0f9ff;
  --carte: #ffffff;
  --bordure: #dcebf5;
  --texte: #0c1a26;
  --texte-doux: #5b6b78;
  --succes: #15803d;
  --danger: #b91c1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primaire: #38bdf8;
    --primaire-doux: #0c2a3d;
    --sur-primaire: #04121c;
    --fond: #07131c;
    --carte: #0f1f2b;
    --bordure: #1c3242;
    --texte: #eaf4fb;
    --texte-doux: #9db0bf;
    --succes: #4ade80;
    --danger: #f87171;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
}

.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.entete {
  text-align: center;
}

.logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 8px;
  border-radius: 18px;
  background: var(--primaire);
  color: var(--sur-primaire);
  font-size: 32px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

h1 {
  margin: 4px 0;
  font-size: 24px;
}

.mouvement {
  margin: 0;
  color: var(--primaire);
  font-weight: 600;
}

.doux {
  color: var(--texte-doux);
  margin: 0;
}

.carte {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cache {
  display: none;
}

.grand {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

label {
  font-weight: 600;
}

input {
  font: inherit;
  font-size: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte);
  width: 100%;
}

button {
  font: inherit;
  font-weight: 600;
  min-height: 54px;
  border: none;
  border-radius: 14px;
  background: var(--primaire);
  color: var(--sur-primaire);
  cursor: pointer;
  width: 100%;
}

button:disabled {
  opacity: 0.6;
}

button.secondaire {
  background: transparent;
  color: var(--primaire);
}

.resultats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resultats button {
  background: var(--primaire-doux);
  color: var(--primaire);
  text-align: left;
  padding: 0 16px;
}

.resultats button:disabled {
  background: transparent;
  color: var(--texte-doux);
  border: 1px dashed var(--bordure);
}

.erreur {
  color: var(--danger);
  margin: 0;
}

.erreur:empty {
  display: none;
}

.succes {
  text-align: center;
  align-items: center;
}

.coche {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--succes);
  color: var(--carte);
  font-size: 40px;
  display: grid;
  place-items: center;
}

.pied {
  text-align: center;
  font-size: 13px;
}

/* Formulaire du visiteur */
.champs,
.champ {
  display: flex;
  flex-direction: column;
}

.champs {
  gap: 12px;
}

.champ {
  gap: 6px;
}

select,
textarea {
  font: inherit;
  font-size: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte);
  width: 100%;
}

textarea {
  min-height: 90px;
  resize: vertical;
}