/* ZW — feuille de style unique
 *
 * Contraintes d'usage : l'ecran est un telephone tenu a bout de bras, dehors,
 * en plein soleil du Yucatan, souvent avec des gants ou les mains mouillees.
 * D'ou : contrastes forts, aucune nuance de gris pour porter une information,
 * et des cibles tactiles d'au moins 48 px. Rien ne doit demander de viser.
 */

:root {
  --fond: #f4f7f8;
  --carte: #ffffff;
  --encre: #14262e;
  --encre-douce: #5c7078;
  --bord: #dde5e9;

  --marque: #0f5c6b;
  --marque-clair: #157d92;
  --marque-fonce: #0a414c;

  --ok: #1a7f4b;
  --ok-fond: #e6f4ec;
  --alerte: #b4531a;
  --alerte-fond: #fdf0e6;
  --stop: #a3231f;

  --rayon: 14px;
  --ombre: 0 1px 2px rgba(20, 38, 46, .06), 0 4px 16px rgba(20, 38, 46, .06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

/* Marge basse : la barre de gestes des telephones recents mange le bas de
   l'ecran, et le bouton principal y tombait pile dessous. */
body { padding-bottom: env(safe-area-inset-bottom, 0); }

.enveloppe { max-width: 620px; margin: 0 auto; padding: 16px; }

/* ── Entete ─────────────────────────────────────────────────────────────── */
.entete {
  background: var(--marque);
  color: #fff;
  padding: calc(12px + env(safe-area-inset-top, 0)) 16px 12px;
  position: sticky; top: 0; z-index: 20;
}
.entete-inner { max-width: 620px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.entete h1 { font-size: 18px; margin: 0; font-weight: 650; letter-spacing: .2px; }
.entete .sous { font-size: 12.5px; opacity: .8; margin: 0; }
.entete .pousse { margin-left: auto; display: flex; gap: 6px; align-items: center; }

.langues { display: flex; gap: 2px; background: rgba(255,255,255,.14); border-radius: 8px; padding: 2px; }
.langues button {
  border: 0; background: transparent; color: #fff; font: inherit; font-size: 13px;
  padding: 6px 9px; border-radius: 6px; cursor: pointer; min-width: 40px;
}
.langues button[aria-pressed="true"] { background: #fff; color: var(--marque); font-weight: 650; }

/* ── Cartes ─────────────────────────────────────────────────────────────── */
.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 16px;
  margin-bottom: 14px;
}
.carte h2 { font-size: 15px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--encre-douce); font-weight: 650; }

/* ── Etat de la journee ─────────────────────────────────────────────────── */
.etat { text-align: center; }
.etat .libelle { font-size: 14px; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .6px; }
.etat .chrono { font-size: 46px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -1px; margin: 4px 0 2px; }
.etat .heures { font-size: 14px; color: var(--encre-douce); }
.etat.actif .chrono { color: var(--ok); }

/* ── Boutons ────────────────────────────────────────────────────────────── */
button, .bouton {
  font: inherit;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 48px;
  padding: 12px 18px;
  transition: background .12s, opacity .12s;
}
button:disabled { cursor: not-allowed; opacity: .55; }

.b-principal {
  width: 100%;
  background: var(--marque);
  color: #fff;
  font-size: 19px;
  font-weight: 650;
  min-height: 62px;
  margin-top: 14px;
}
.b-principal:not(:disabled):active { background: var(--marque-fonce); }
.b-principal.stop { background: var(--stop); }
.b-principal:disabled { background: #b8c6cc; color: #fff; opacity: 1; }

.b-secondaire { background: #fff; border-color: var(--bord); color: var(--encre); }
.b-secondaire:not(:disabled):active { background: #eef3f5; }
.b-texte { background: transparent; border: 0; color: var(--marque-clair); padding: 8px 4px; min-height: 40px; font-size: 15px; }
.b-petit { min-height: 40px; padding: 8px 14px; font-size: 15px; }
.b-danger { color: var(--stop); }

/* ── Bandeau GPS ────────────────────────────────────────────────────────── */
.gps {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  font-size: 15px; font-weight: 500;
  background: var(--alerte-fond); color: var(--alerte);
  border: 1px solid rgba(180, 83, 26, .2);
}
.gps.ok { background: var(--ok-fond); color: var(--ok); border-color: rgba(26, 127, 75, .2); }
.gps .pastille {
  width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex: none;
}
.gps.cherche .pastille { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ── Liste des taches ───────────────────────────────────────────────────── */
.taches { list-style: none; margin: 0; padding: 0; }
.tache {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--bord);
}
.tache:first-child { border-top: 0; }
.tache .horaire {
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--encre-douce);
  flex: none; width: 46px; font-weight: 600;
}
.tache .corps { flex: 1; min-width: 0; }
.tache .titre { font-size: 16px; line-height: 1.3; }
.tache .meta { font-size: 13px; color: var(--encre-douce); margin-top: 3px; }
.tache .action { flex: none; }
.tache .action button { min-width: 104px; }

.tache.faite .titre { color: var(--encre-douce); }
.tache.faite .horaire { color: var(--ok); }
.tache.encours { background: var(--ok-fond); margin: 0 -16px; padding: 14px 16px; border-radius: 10px; border-top-color: transparent; }
.tache.encours .titre { font-weight: 650; }
.tache.pause { opacity: .6; }

.puce { display: inline-block; font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: 20px; }
.puce.ok { background: var(--ok-fond); color: var(--ok); }
.puce.encours { background: var(--marque); color: #fff; }

/* ── Semaine ────────────────────────────────────────────────────────────── */
.semaine { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; text-align: center; }
.semaine .j { padding: 8px 2px; border-radius: 10px; background: #eef3f5; }
.semaine .j .nom { font-size: 12px; color: var(--encre-douce); }
.semaine .j .val { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.semaine .j.plein { background: var(--ok-fond); color: var(--ok); }
.semaine .j.aujourdhui { outline: 2px solid var(--marque); }

/* ── Formulaires ────────────────────────────────────────────────────────── */
label { display: block; font-size: 13.5px; font-weight: 600; color: var(--encre-douce); margin: 12px 0 5px; }
input[type=text], input[type=password], input[type=number], input[type=time],
input[type=date], input[type=email], select, textarea {
  width: 100%;
  /* 16 px minimum : en dessous, Safari iOS zoome automatiquement sur le champ
     au moment de la saisie et le formulaire devient inutilisable. */
  font: inherit; font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--bord); border-radius: 10px;
  background: #fff; color: var(--encre);
  min-height: 48px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marque-clair); outline-offset: -1px; border-color: var(--marque-clair); }
textarea { min-height: 84px; resize: vertical; }
.ligne { display: flex; gap: 10px; }
.ligne > * { flex: 1; }
.case { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.case input { width: 22px; height: 22px; min-height: 0; flex: none; }
.case label { margin: 0; font-weight: 500; color: var(--encre); }
.aide { font-size: 13px; color: var(--encre-douce); margin: 6px 0 0; }

/* ── Messages ───────────────────────────────────────────────────────────── */
.message { padding: 12px 14px; border-radius: 10px; font-size: 15px; margin: 12px 0; }
.message.erreur { background: #fdeceb; color: var(--stop); border: 1px solid rgba(163, 35, 31, .18); }
.message.succes { background: var(--ok-fond); color: var(--ok); border: 1px solid rgba(26, 127, 75, .2); }
.message.info { background: #eaf3f6; color: var(--marque-fonce); border: 1px solid rgba(15, 92, 107, .16); }
.message:empty { display: none; }

/* ── Onglets (gestionnaire) ─────────────────────────────────────────────── */
.onglets {
  display: flex; gap: 4px; overflow-x: auto; padding: 10px 16px 0;
  background: var(--marque); position: sticky; top: 0; z-index: 19;
  scrollbar-width: none;
}
.onglets::-webkit-scrollbar { display: none; }
.onglets-inner { display: flex; gap: 4px; max-width: 620px; margin: 0 auto; width: 100%; }
.onglets button {
  border: 0; background: transparent; color: rgba(255,255,255,.75);
  font-size: 14.5px; padding: 10px 14px; border-radius: 10px 10px 0 0;
  white-space: nowrap; min-height: 44px;
}
.onglets button[aria-selected="true"] { background: var(--fond); color: var(--marque); font-weight: 650; }

.panneau[hidden] { display: none; }

/* ── Tableaux compacts ──────────────────────────────────────────────────── */
.rangee {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--bord);
}
.rangee:first-child { border-top: 0; }
.rangee .principal { flex: 1; min-width: 0; }
.rangee .nom { font-size: 16px; }
.rangee .detail { font-size: 13px; color: var(--encre-douce); margin-top: 2px; }
.rangee .boutons { display: flex; gap: 6px; flex: none; }

.jour-bloc { margin-bottom: 18px; }
.jour-bloc h3 {
  font-size: 14px; margin: 0 0 6px; color: var(--marque);
  text-transform: uppercase; letter-spacing: .5px;
}

/* ── Fenetre modale ─────────────────────────────────────────────────────── */
dialog {
  border: 0; border-radius: 16px; padding: 0; width: min(520px, calc(100vw - 24px));
  box-shadow: 0 20px 60px rgba(20, 38, 46, .28);
}
dialog::backdrop { background: rgba(20, 38, 46, .5); }
dialog .contenu { padding: 20px; max-height: 78vh; overflow-y: auto; }
dialog h2 { margin-top: 0; }
dialog .pied { display: flex; gap: 10px; padding: 0 20px 20px; }
dialog .pied > * { flex: 1; }

/* ── Choix de langue (accueil) ──────────────────────────────────────────── */
.choix-langue { display: grid; gap: 10px; margin: 20px 0; }
.choix-langue button {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 2px solid var(--bord); border-radius: 14px;
  padding: 16px 18px; font-size: 18px; text-align: left; min-height: 68px;
}
.choix-langue button[aria-pressed="true"] { border-color: var(--marque); background: #eaf3f6; font-weight: 650; }
.choix-langue .drapeau { font-size: 26px; line-height: 1; }

.centre { text-align: center; }
.muet { color: var(--encre-douce); }
.petit { font-size: 13.5px; }
.mono { font-variant-numeric: tabular-nums; }

/* Le sous-titre « Zil-Ha 42 » disparait sous 340 px de large (vieux iPhone SE) :
   sans cela l'entete passe sur deux lignes et pousse le contenu hors de l'ecran. */
@media (max-width: 360px) {
  .entete .sous { display: none; }
  .tache .action button { min-width: 88px; }
}

/* ── Deux totaux cote a cote ────────────────────────────────────────────────
   La presence et la somme des taches ne mesurent pas la meme chose : les
   afficher l'un sous l'autre laissait croire a une hierarchie, et l'un des deux
   passait inapercu. Cote a cote, l'ecart entre eux se lit d'un coup d'oeil. */
.totaux {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--bord); border: 1px solid var(--bord);
  border-radius: 12px; overflow: hidden; margin-top: 14px;
}
.totaux > div { background: var(--carte); padding: 11px 12px; text-align: center; }
.totaux .lbl { display: block; font-size: 12px; color: var(--encre-douce); line-height: 1.25; }
.totaux strong { display: block; font-size: 19px; margin-top: 3px; }

/* ── Avertissement de sortie du batiment ────────────────────────────────────
   Volontairement massif et rouge : le travailleur a le telephone dans la poche
   et n'a que quelques minutes pour revenir. Un bandeau discret serait manque. */
.alerte-sortie {
  background: #fdeceb; border: 2px solid var(--stop); color: var(--stop);
  border-radius: 12px; padding: 14px; text-align: center; margin-bottom: 14px;
  animation: attention 1.6s ease-in-out infinite;
}
.alerte-sortie .titre { font-size: 16px; font-weight: 700; }
.alerte-sortie .compte { font-size: 30px; font-weight: 700; margin: 4px 0 2px; }
.alerte-sortie .petit { font-size: 13px; opacity: .85; }
@keyframes attention { 0%, 100% { border-color: var(--stop); } 50% { border-color: #f0a9a6; } }

/* ── Onglet presence du gestionnaire ────────────────────────────────────────*/
.signal { display: inline-block; font-size: 11.5px; font-weight: 650; padding: 2px 7px; border-radius: 20px; margin-right: 4px; }
.signal.oui { background: var(--ok-fond); color: var(--ok); }
.signal.non { background: #fdeceb; color: var(--stop); }
.signal.muet { background: #eef3f5; color: var(--encre-douce); }
.ip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }

/* ── Photos de preuve ───────────────────────────────────────────────────────
   Vignettes carrees en grille : le gestionnaire balaie une journee d'un coup
   d'oeil. L'horodatage est GRAVE dans l'image, donc lisible meme sortie de
   l'app — c'est tout l'interet. */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.galerie a {
  display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--bord); background: #eef3f5;
}
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.vignette a {
  display: block; width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--bord); flex: none;
}
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sans-preuve { color: var(--alerte); font-size: 13px; }