/* Couleurs et typographie reprises de la maquette (maquette-tournees/). */
:root {
  --rouge: #C62828;
  --rouge-fonce: #8E1B1B;
  --rouge-tres-fonce: #5E1010;
  --fond: #F2F2F0;
  --surface: #FFFFFF;
  --texte: #1B1B1F;
  --texte-doux: #55555A;
  --bordure: #B9B9B4;
  --erreur: #B3261E;
  --erreur-fond: #FCE8E6;
  --info-fond: #E8EEF7;
  --info-texte: #1E3A66;
  --rayon: 12px;
  --police: 'Barlow', system-ui, sans-serif;
  --police-titre: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.4;
}

a { color: var(--rouge-fonce); }
a:hover { color: var(--rouge-tres-fonce); }

#app {
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.ecran {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ecran--centre {
  justify-content: center;
  padding-top: 24px;
}

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

/* ---------- En-tête rouge (connexion, mot de passe) ---------- */

.bandeau {
  background: var(--rouge);
  color: #FFFFFF;
  padding: calc(48px + env(safe-area-inset-top)) 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bandeau__surtitre {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bandeau h1 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  text-transform: uppercase;
}

.bandeau--compact h1 { font-size: 34px; }

.bandeau__sous-titre { font-size: 17px; font-weight: 500; }

/* ---------- Formulaires ---------- */

.formulaire {
  flex: 1;
  padding: 28px 28px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.champ label {
  font-size: 14px;
  font-weight: 600;
}

.champ__aide {
  font-size: 13px;
  color: var(--texte-doux);
}

.champ__erreur {
  font-size: 14px;
  font-weight: 500;
  color: var(--erreur);
}

.champ__erreur:empty { display: none; }

.saisie {
  position: relative;
  display: flex;
}

.saisie input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte);
  font-family: var(--police);
  font-size: 17px;
}

.saisie input:focus {
  outline: none;
  border-color: var(--texte);
  box-shadow: 0 0 0 3px rgba(27, 27, 31, 0.15);
}

.saisie input[aria-invalid="true"] { border-color: var(--erreur); }

.saisie--mdp input { padding-right: 96px; }

.saisie__bascule {
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--rouge-fonce);
  font-family: var(--police);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.saisie__bascule:focus-visible { outline: 2px solid var(--texte); }

.bouton {
  height: 56px;
  margin-top: 8px;
  border: none;
  border-radius: var(--rayon);
  background: var(--texte);
  color: #FFFFFF;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.bouton:disabled { opacity: 0.6; cursor: progress; }
.bouton:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }

.bouton--secondaire {
  background: transparent;
  color: var(--texte);
  border: 1.5px solid var(--bordure);
}

.lien-bouton {
  align-self: center;
  padding: 8px;
  border: none;
  background: none;
  color: var(--rouge-fonce);
  font-family: var(--police);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.note {
  margin: 0;
  font-size: 14px;
  color: var(--texte-doux);
}

/* ---------- Messages ---------- */

.message {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--rayon);
  font-size: 15px;
  font-weight: 500;
}

.message:empty { display: none; }
.message--erreur { background: var(--erreur-fond); color: var(--erreur); }
.message--info { background: var(--info-fond); color: var(--info-texte); }
.message--succes { background: #E3F1E4; color: #1E5A22; }

/* ---------- En-tête des écrans connectés ---------- */

.entete {
  padding: calc(40px + env(safe-area-inset-top)) 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.entete--retour {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.entete__bonjour { font-size: 14px; color: var(--texte-doux); }

.entete h1 {
  margin: 2px 0 0;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
}

.retour {
  font-weight: 600;
  text-decoration: none;
}

.avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--texte);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-decoration: none;
}

a.avatar:hover { color: #FFFFFF; background: #000000; }
a.avatar:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }

.contenu {
  flex: 1;
  padding: 0 20px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.carte {
  background: var(--surface);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.carte h2 {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 22px;
  text-transform: uppercase;
}

.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: middle;
}

.badge--responsable { background: var(--texte); color: #FFFFFF; }

.entete__surtitre {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.bouton--lien {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.bouton--lien:hover { color: #FFFFFF; background: #000000; }

.pied {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  color: var(--texte-doux);
}

/* ---------- Mes tournées ---------- */

.tuiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tuile {
  background: var(--surface);
  border-radius: var(--rayon);
  padding: 12px;
}

.tuile__valeur {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 24px;
  white-space: nowrap;
}

.tuile__libelle { font-size: 12px; color: var(--texte-doux); }

.groupe {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.groupe__titre {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.tournee {
  background: var(--surface);
  color: var(--texte);
  text-decoration: none;
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tournee--en_cours { background: var(--rouge); color: #FFFFFF; }
.tournee:hover { color: var(--texte); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }
.tournee--en_cours:hover { color: #FFFFFF; }
.tournee:focus-visible { outline: 3px solid var(--texte); outline-offset: 2px; }

.tournee__haut {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.tournee__equipe {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.tournee--en_cours .tournee__equipe,
.tournee--en_cours .tournee__details,
.tournee--en_cours .tournee__periode { color: #FFFFFF; }

.tournee--en_cours .badge--responsable { background: #FFFFFF; color: var(--rouge-fonce); }

.tournee__secteur {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  text-transform: uppercase;
}

.tournee__periode,
.tournee__details { font-size: 14px; color: var(--texte-doux); }

.statut {
  flex: none;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.statut--en_cours { background: #FFFFFF; color: var(--rouge-fonce); }
.statut--prevue { background: #E6E6E3; color: #3D3D42; }
.statut--terminee { background: #E3F1E4; color: #1E5A22; }

.progression {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.progression__libelle {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
}

.progression__barre {
  height: 8px;
  border-radius: 4px;
  background: #E6E6E3;
  overflow: hidden;
}

.tournee--en_cours .progression__barre { background: rgba(255, 255, 255, 0.35); }

.progression__remplissage {
  height: 100%;
  border-radius: 4px;
  background: #2E7D32;
}

.tournee--en_cours .progression__remplissage { background: #FFFFFF; }

/* ---------- Profil ---------- */

.membres {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.membre {
  padding: 10px 0;
  border-top: 1px solid #E6E6E3;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.membre:first-child { border-top: none; }
.membre--moi { font-weight: 700; }
.membre__grade { font-size: 14px; font-weight: 400; color: var(--texte-doux); }

/* ---------- Écrans d'une tournée ---------- */

/* Barre de navigation du bas : Tournées · Secteur · Récap. */
.ecran--avec-nav { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000; /* Au-dessus de la carte Leaflet. */
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid #DCDCD7;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nav__lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
  color: var(--texte-doux);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.nav__lien:hover { color: var(--texte); }
.nav__lien--actif, .nav__lien--actif:hover { color: var(--rouge-fonce); font-weight: 700; }

.resume-tournee {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}

.carte-secteur {
  height: 280px;
  border-radius: 16px;
  border: 1px solid #DCDCD7;
  overflow: hidden;
  background: #F2EFE9;
  /* Contient les z-index de Leaflet : la barre de navigation reste au-dessus. */
  position: relative;
  isolation: isolate;
}

.carte-secteur__erreur { padding: 16px; }

.carte-secteur__sans-fond {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 1000;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--texte-doux);
  font-size: 13px;
  white-space: nowrap;
}

.carte__position {
  width: 36px;
  height: 36px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: var(--surface);
  color: var(--texte);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.carte__position:disabled { color: var(--bordure); cursor: default; }

/* Marqueurs numérotés : rouge = à faire, vert = remis, orange = absent, gris = refus. */
.marqueur, .pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #FFFFFF;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.marqueur {
  width: 32px;
  height: 32px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  font-size: 13px;
}

.pastille {
  flex: none;
  width: 36px;
  height: 36px;
  font-size: 14px;
}

.pastille--grande { width: 56px; height: 56px; font-size: 22px; }

.marqueur--a_faire, .pastille--a_faire { background: var(--rouge); }
.marqueur--fait, .pastille--fait { background: #2E7D32; }
.marqueur--absent, .pastille--absent { background: #D97706; }
.marqueur--refus, .pastille--refus { background: #75757A; }

.bulle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--police);
  font-size: 14px;
}

.bulle a { margin-top: 4px; font-weight: 600; }

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.puce {
  height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--bordure);
  border-radius: 999px;
  background: var(--surface);
  color: var(--texte);
  font-family: var(--police);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.puce--active { border-color: var(--texte); background: var(--texte); color: #FFFFFF; }

.recherche {
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte);
  font-family: var(--police);
  font-size: 16px;
}

.recherche:focus { outline: none; border-color: var(--texte); }

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

.adresse {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--texte);
  text-decoration: none;
}

.adresse:hover { color: var(--texte); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }
.adresse:focus-visible { outline: 3px solid var(--texte); outline-offset: 2px; }

.adresse__texte { flex: 1; min-width: 0; }
.adresse__nom { font-weight: 700; font-size: 17px; }
.adresse__detail { font-size: 13px; color: var(--texte-doux); }
.adresse__commentaire { font-style: italic; }

.adresse__etat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.adresse__don { font-size: 14px; font-weight: 700; }

.statut--passage-a_faire { background: #FBE3E1; color: var(--rouge-fonce); }
.statut--passage-fait { background: #E3F1E4; color: #1E5A22; }
.statut--passage-absent { background: #FDEBD3; color: #8A4A06; }
.statut--passage-refus { background: #E6E6E3; color: #3D3D42; }

.tuiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Fiche adresse ---------- */

.fiche { gap: 14px; }

.fiche__haut {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fiche__numero {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 22px;
}

.consigne {
  padding: 12px 14px;
  border-radius: var(--rayon);
  background: #FFF4D6;
  color: #5C4300;
}

.passage {
  display: flex;
  align-items: center;
  gap: 12px;
}

.passage__don { font-weight: 700; }

.voisines {
  display: flex;
  justify-content: space-between;
}

.voisine {
  padding: 8px 4px;
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Saisie d'un passage ---------- */

.etat-passage {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.saisie-passage {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.choix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.choix__bouton {
  height: 52px;
  border: 1.5px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte);
  font-family: var(--police);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.choix__bouton:focus-visible { outline: 3px solid var(--texte); outline-offset: 2px; }

.choix__bouton--actif { color: #FFFFFF; }
.choix__bouton--fait.choix__bouton--actif { background: #2E7D32; border-color: #2E7D32; }
.choix__bouton--absent.choix__bouton--actif { background: #D97706; border-color: #D97706; }
.choix__bouton--refus.choix__bouton--actif { background: #75757A; border-color: #75757A; }
.choix__bouton--a_faire.choix__bouton--actif { background: var(--rouge); border-color: var(--rouge); }

.montants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.saisie-don {
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte);
  font-family: var(--police);
  font-size: 20px;
  font-weight: 700;
}

.saisie-don:focus { outline: none; border-color: var(--texte); }

.demarrage { gap: 12px; }