@charset "UTF-8";
/* Page de pointage du prestataire de nettoyage (pointage/index.php).
   Une carte centrée, lisible sur téléphone, avec les variables du site. */

.pointage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: var(--esp-5) var(--esp-4);
  background-color: var(--fond-doux);
}

.pointage-carte {
  display: grid;
  gap: var(--esp-4);
  width: 100%;
  max-width: 26rem;
  padding: var(--esp-5);
  background-color: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-grand);
  box-shadow: 0 12px 28px var(--ombre);
}

.pointage-entete {
  display: grid;
  gap: var(--esp-1);
  padding-bottom: var(--esp-4);
  border-bottom: 1px solid var(--bordure);
  text-align: center;
}

.pointage-surtitre {
  margin: 0 auto;
  color: var(--lien);
  font-size: var(--taille-nano);
  font-weight: var(--graisse-forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pointage-titre {
  font-size: var(--taille-moyen);
}

.pointage-bonjour {
  font-size: var(--taille-grand);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-titre);
}

.pointage-formulaire {
  display: grid;
  gap: var(--esp-3);
}

.pointage-bouton {
  width: 100%;
  min-height: 3.5rem;
  padding: var(--esp-3) var(--esp-5);
  border: 0;
  border-radius: var(--rayon-grand);
  background-color: var(--c-bleu-700);
  color: var(--fond-carte);
  font-family: var(--police-texte);
  font-size: var(--taille-moyen);
  font-weight: var(--graisse-forte);
  cursor: pointer;
  transition: filter var(--duree) var(--courbe);
}

/* Couleurs du thème clair comme du thème sombre : le texte prend la
   couleur des cartes, toujours lisible sur le bleu et le framboise. */
.pointage-bouton:hover { filter: brightness(1.1); }

.pointage-bouton-depart { background-color: var(--c-framboise-700); }

.pointage-bouton:disabled {
  cursor: wait;
  opacity: 0.7;
}

.pointage-etat {
  min-height: 1.5em;
  color: var(--texte-doux);
  font-size: var(--taille-petit);
  text-align: center;
}

.pointage-note {
  color: var(--texte-doux);
  font-size: var(--taille-micro);
}

.pointage-liste {
  display: grid;
  gap: var(--esp-2);
  padding-left: var(--esp-5);
  list-style: disc;
  font-size: var(--taille-petit);
}

.pointage-resultat {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-4);
  border-radius: var(--rayon);
  background-color: var(--c-bleu-100);
  color: var(--texte);
}

.pointage-resultat-arrivee { background-color: var(--c-vert-100); }
.pointage-resultat-depart { background-color: var(--c-bleu-100); }
.pointage-resultat-alerte { background-color: var(--c-soleil-100); }

.pointage-resultat-titre {
  font-size: var(--taille-moyen);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-titre);
}

.pointage-lieu {
  padding: var(--esp-3) var(--esp-4);
  border-left: 4px solid;
  border-radius: var(--rayon-petit);
  font-size: var(--taille-petit);
}

.pointage-lieu-ok {
  border-color: var(--c-vert-500);
  background-color: var(--c-vert-100);
  color: var(--texte);
}

.pointage-lieu-alerte {
  border-color: var(--c-soleil-500);
  background-color: var(--c-soleil-100);
  color: var(--texte);
}