/* =====================================================================
   GREEN VISION — Interface tablette
   =====================================================================
   Conçue pour un usage tactile debout chez le client : cibles larges,
   contrastes forts (écran vu en plein jour), pas de survol requis.
   ===================================================================== */

:root {
  --ink:        #16211b;
  --ink-soft:   #5a6b60;
  --forest:     #1f4630;
  --forest-2:   #163524;
  --leaf:       #2f7a4f;
  --leaf-2:     #3f9760;
  --leaf-pale:  #e7f2ea;
  --sky:        #2c6e8c;
  --sky-pale:   #e5f0f4;
  --ember:      #a8501f;
  --ember-pale: #f6e7dd;
  --alerte:     #b3261e;
  --paper:      #f7f6f0;
  --surface:    #ffffff;
  --line:       #dde3d9;
  --ombre:      0 1px 2px rgba(22,33,27,.06), 0 8px 24px rgba(22,33,27,.07);
  --radius:     14px;
  /* Cible tactile minimale confortable */
  --touch:      48px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* L'attribut hidden doit toujours l'emporter.
   Plusieurs éléments ne sont masqués que par lui : l'écran de connexion
   une fois l'utilisateur identifié, et les onglets interdits à son rôle.
   Une règle d'auteur comme « .connexion { display: flex } » suffit à
   neutraliser le display:none du navigateur — l'écran de connexion
   restait alors affiché par-dessus l'application, donnant l'impression
   que le bouton « Se connecter » ne faisait rien. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  overscroll-behavior: none;
}

button, input, select, textarea { font: inherit; }
img { max-width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Structure ---------- */
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.barre-haut {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.barre-haut .logo { height: 38px; width: 38px; object-fit: contain; }
.barre-haut .titre { font-weight: 700; color: var(--forest-2); font-size: 1.05rem; }
.barre-haut .espace { flex: 1; }

/* Indicateur de synchronisation */
.etat-sync {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--leaf-pale);
  color: var(--forest);
  font-weight: 600;
}
.etat-sync .point { width: 9px; height: 9px; border-radius: 50%; background: var(--leaf); }
.etat-sync[data-etat="hors_ligne"] { background: #fdf0e3; color: var(--ember); }
.etat-sync[data-etat="hors_ligne"] .point { background: var(--ember); }
.etat-sync[data-etat="en_cours"] .point { animation: pulse 1s ease-in-out infinite; }
.etat-sync[data-etat="echec"] { background: #fbe9e7; color: var(--alerte); }
.etat-sync[data-etat="echec"] .point { background: var(--alerte); }
@keyframes pulse { 50% { opacity: .35; } }

.contenu { flex: 1; overflow-y: auto; padding: 20px 16px 90px; -webkit-overflow-scrolling: touch; }
.contenu-large { max-width: 900px; margin: 0 auto; }

/* Navigation basse, atteignable au pouce */
.barre-nav {
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.barre-nav button {
  flex: 1;
  min-height: 62px;
  border: none;
  background: none;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  border-top: 3px solid transparent;
}
.barre-nav button svg { width: 23px; height: 23px; }
.barre-nav button[aria-current="page"] { color: var(--forest); border-top-color: var(--leaf); }

/* ---------- Typographie ---------- */
h1 { font-size: 1.5rem; margin: 0 0 16px; color: var(--forest-2); }
h2 { font-size: 1.18rem; margin: 26px 0 12px; color: var(--forest-2); }
h3 { font-size: 1rem; margin: 0 0 6px; }
p  { margin: 0 0 12px; }
.discret { color: var(--ink-soft); font-size: .88rem; }

/* ---------- Cartes ---------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--ombre);
}
.carte-action { cursor: pointer; }
.carte-action:active { transform: scale(.995); }
.carte .entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.carte .nom { font-weight: 700; font-size: 1.02rem; }

/* ---------- Étiquettes de statut ---------- */
.badge {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-brouillon { background: #eceff1; color: #546e7a; }
.badge-envoye    { background: var(--sky-pale); color: var(--sky); }
.badge-accepte   { background: var(--leaf-pale); color: var(--forest); }
.badge-refuse    { background: #fbe9e7; color: var(--alerte); }
.badge-planifie  { background: var(--ember-pale); color: var(--ember); }
.badge-attente   { background: #fff8e1; color: #8d6e00; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--touch);
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  background: var(--leaf);
  color: #fff;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 19px; height: 19px; }
.btn-secondaire { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-danger     { background: var(--alerte); color: #fff; }
.btn-bloc       { width: 100%; }
.btn:disabled   { opacity: .45; cursor: not-allowed; }

.actions-bas {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  padding: 12px 0 0;
  background: linear-gradient(transparent, var(--paper) 30%);
}

/* ---------- Formulaires ---------- */
.champ { margin-bottom: 16px; }
.champ label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: var(--touch);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  /* 16px minimum : en dessous, iOS zoome automatiquement au focus */
  font-size: 16px;
}
.champ textarea { min-height: 100px; resize: vertical; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px var(--leaf-pale);
}
.champ-double { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.obligatoire { color: var(--alerte); }

/* Cases à cocher — grandes, faciles à toucher */
.case {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 10px;
  cursor: pointer;
}
.case input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--leaf);
}
.case .libelle { font-weight: 600; }
.case .explication { font-size: .85rem; color: var(--ink-soft); margin-top: 3px; }
.case.requise { border-color: var(--leaf); background: var(--leaf-pale); }

/* ---------- Recherche ---------- */
.recherche { position: relative; margin-bottom: 16px; }
.recherche input { padding-left: 44px; }
.recherche svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--ink-soft);
  pointer-events: none;
}

/* ---------- Lignes de devis ---------- */
.ligne-devis {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.ligne-devis:last-child { border-bottom: none; }
.ligne-devis .details { font-size: .85rem; color: var(--ink-soft); }
.ligne-devis .montant { font-weight: 700; text-align: right; white-space: nowrap; }

.totaux { border-top: 2px solid var(--forest-2); margin-top: 12px; padding-top: 14px; }
.totaux .ligne { display: flex; justify-content: space-between; padding: 5px 0; }
.totaux .ttc {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--forest-2);
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 12px;
}

/* ---------- Réglage discret ---------- */
/* Volontairement sans libellé explicite : le client qui regarde l'écran
   ne doit pas comprendre de quoi il s'agit. Le pourcentage n'est jamais
   affiché — seul le total évolue. */
.reglage {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin-top: 12px;
  background: #f2f4f1;
  border-radius: 10px;
}
.reglage.ouvert { display: flex; }
.reglage input[type="range"] { flex: 1; accent-color: #8fa89a; height: 28px; }
.reglage .valeur {
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  color: var(--ink-soft);
  min-width: 54px;
  text-align: right;
}

/* Bloc marge — visible uniquement pour les rôles autorisés */
.bloc-marge {
  background: #f2f4f1;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 12px;
  font-size: .88rem;
}
.bloc-marge .ligne { display: flex; justify-content: space-between; padding: 3px 0; }

/* ---------- Signature ---------- */
.zone-signature {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  height: 220px;
  position: relative;
  overflow: hidden;
}
.zone-signature canvas { width: 100%; height: 100%; display: block; }
.zone-signature .consigne {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  pointer-events: none;
  font-size: .9rem;
}
.zone-signature.signee .consigne { display: none; }

/* ---------- Photos ---------- */
.grille-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grille-photos .vignette {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--leaf-pale);
  position: relative;
}
.grille-photos img { width: 100%; height: 100%; object-fit: cover; }
.grille-photos .ajouter {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--line);
  color: var(--leaf);
  cursor: pointer;
}
.grille-photos .ajouter svg { width: 30px; height: 30px; }
@media (max-width: 520px) { .grille-photos { grid-template-columns: repeat(2, 1fr); } }

/* ---------- États vides ---------- */
.vide { text-align: center; padding: 56px 24px; color: var(--ink-soft); }
.vide svg { width: 50px; height: 50px; opacity: .35; margin-bottom: 14px; }

/* ---------- Écran de connexion ---------- */
.connexion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  padding: 32px 24px;
  max-width: 440px;
  margin: 0 auto;
}
.connexion .logo { width: 110px; margin: 0 auto 20px; }
.connexion h1 { text-align: center; }

/* ---------- Panneau modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(22,33,27,.5);
  display: none;
  align-items: flex-end;
  z-index: 50;
}
.modal.ouvert { display: flex; }
.modal .panneau {
  background: var(--paper);
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0));
}
@media (min-width: 720px) {
  .modal { align-items: center; justify-content: center; }
  .modal .panneau { max-width: 620px; border-radius: 20px; }
}

/* ---------- Message flottant ---------- */
.notification {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  background: var(--forest-2);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--ombre);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.notification.visible { opacity: 1; }
.notification.erreur { background: var(--alerte); }

/* ---------- Planning ---------- */
.nav-semaine {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.nav-semaine .btn { padding: 10px 14px; }
.nav-semaine .intitule { flex: 1; text-align: center; }

.jour { margin-bottom: 18px; }
.entete-jour {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: #eef1ec;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  /* Toucher l'en-tête d'un jour crée une intervention à cette date :
     la cible doit rester confortable au doigt. */
  min-height: var(--touch);
}
.jour.aujourdhui .entete-jour { background: var(--leaf-pale); color: var(--forest); }

/* Statuts d'intervention absents de la première série de badges. */
.badge-en_cours { background: var(--sky-pale); color: var(--sky); }
.badge-termine  { background: var(--leaf-pale); color: var(--forest); }
.badge-reporte  { background: #fff8e1; color: #8d6e00; }
.badge-annule   { background: #eceff1; color: #546e7a; }

/* ---------- Capture vidéo et note vocale ---------- */
.apercu-capture {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: var(--radius);
  background: #000;
  object-fit: cover;
}

/* Substitut visuel pendant une note vocale : sans image à montrer, une
   pastille qui pulse indique que l'enregistrement tourne réellement. */
.niveau-audio {
  height: 120px;
  border-radius: var(--radius);
  background: var(--leaf-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}
.niveau-audio span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--leaf);
  animation: pulse 1.4s ease-in-out infinite;
}

.minuterie {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--forest-2);
  margin: 14px 0 4px;
}

/* Vignettes des médias non visuels : icône centrée et durée en surimpression. */
.grille-photos .vignette.media-video,
.grille-photos .vignette.media-audio {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--forest);
  cursor: pointer;
}
.grille-photos .vignette.media-audio { background: var(--sky-pale); color: var(--sky); }
.grille-photos .vignette svg { width: 34px; height: 34px; }
.grille-photos .vignette .duree {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(22, 33, 27, .72);
  color: #fff;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Suivi de chantier ---------- */
.avancement {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.avancement .jauge {
  flex: 1;
  height: 9px;
  border-radius: 20px;
  background: #e4e9e2;
  overflow: hidden;
}
.avancement .jauge span {
  display: block;
  height: 100%;
  border-radius: 20px;
  background: var(--leaf);
  transition: width .25s ease;
}
.avancement .valeur {
  font-size: .82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  min-width: 42px;
  text-align: right;
}

/* Le chantier du jour se repère d'un coup d'œil, tablette à bout de bras. */
.chantier-du-jour { border-left: 4px solid var(--leaf); }

/* Liste des travaux : recopiée du devis, donc déjà mise en forme. */
.liste-travaux { white-space: pre-line; margin: 0; }

/* Couleur d'équipe, dans le planning et la liste des équipes. */
.pastille {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: baseline;
}

/* Boutons de pointage : cibles larges, utilisées avec des gants. */
.grille-actions { display: grid; gap: 10px; }
.grille-actions .btn { min-height: 54px; }

/* Compte désactivé : présent mais visiblement hors service. */
.compte-inactif { opacity: .62; }
.compte-inactif .nom { text-decoration: line-through; }

/* Échéance d'entretien dépassée : l'installation sort de conformité. */
.echeance-retard { border-left: 4px solid var(--alerte); }

/* Bandeau des devis à relancer : présent sans être alarmant. */
.bandeau-relance { border-left: 4px solid var(--ember); }

/* ---------- Chiffres du suivi commercial ---------- */
.chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.chiffre {
  background: #f2f4f1;
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}
.chiffre .valeur {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--forest-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.chiffre .libelle {
  display: block;
  font-size: .78rem;
  color: var(--ink-soft);
  margin-top: 3px;
}
@media (max-width: 460px) {
  .chiffres { grid-template-columns: 1fr; }
  .chiffre { display: flex; justify-content: space-between; align-items: baseline; text-align: left; }
  .chiffre .libelle { margin-top: 0; }
}

/* ---------- Classement de l'équipe ---------- */
.rang {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.rang:last-child { border-bottom: none; }

.rang .place {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: #eef1ec;
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* La tête du classement se repère sans avoir à lire les montants. */
.rang:first-child .place { background: var(--leaf); color: #fff; }

.rang .identite { flex: 1; min-width: 0; }
.rang .identite .nom {
  font-weight: 600;
  font-size: .95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rang .jauge {
  height: 6px;
  border-radius: 20px;
  background: #e4e9e2;
  overflow: hidden;
  margin-top: 6px;
}
.rang .jauge span { display: block; height: 100%; border-radius: 20px; background: var(--leaf-2); }

.rang .montants { text-align: right; white-space: nowrap; }
.rang .montants .ca { font-weight: 700; font-variant-numeric: tabular-nums; }

.rang-moi { background: var(--leaf-pale); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.rang-moi .jauge { background: #d3e2d8; }

/* ---------- Dossier client ---------- */

/* Étiquettes libres du profil : repères visuels, pas des statuts. */
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.etiquette {
  background: var(--sky-pale);
  color: var(--sky);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 600;
}

dl.profil { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
dl.profil dt { color: var(--ink-soft); font-size: .88rem; }
dl.profil dd { margin: 0; font-size: .92rem; }

/* Historique : un fil d'événements, du plus récent au plus ancien. */
.evenement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.evenement:last-child { border-bottom: none; }

.evenement .pictogramme {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: #eef1ec;
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
}
.evenement .pictogramme svg { width: 17px; height: 17px; }

.evenement .corps { flex: 1; min-width: 0; }
.evenement .corps .titre { font-weight: 600; font-size: .95rem; }
.evenement .corps .details { font-size: .85rem; color: var(--ink-soft); }

.evenement .cote { text-align: right; white-space: nowrap; }
.evenement .cote .date { font-size: .82rem; color: var(--ink-soft); }

/* Réserve de réception, échéance dépassée, rappel en retard : ce qui
   demande une action se repère sans lire. */
.evenement-alerte .pictogramme { background: var(--ember-pale); color: var(--ember); }

/* Bandeau des rappels du jour, en tête de la vue Clients. */
.bandeau-rappel { border-left: 4px solid var(--sky); }

@media (max-width: 460px) {
  .evenement .cote .date { font-size: .78rem; }
  dl.profil { grid-template-columns: 1fr; gap: 2px; }
  dl.profil dd { margin-bottom: 8px; }
}

/* ---------- Champ mot de passe avec bouton « Afficher » ---------- */
/* Taper un mot de passe solide en aveugle sur un clavier tactile est une
   source d'erreur permanente : on se trompe, on recommence, et on finit
   par en choisir un plus court. Le bouton reste discret et n'apparaît
   jamais sur un écran montré au client. */
.champ-mdp { position: relative; }

.champ-mdp input {
  /* Place réservée au bouton, pour que le texte ne passe pas dessous. */
  padding-right: 92px;
}

.voir-mdp {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 36px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--leaf);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}

.voir-mdp:active { background: var(--leaf-pale); }

/* ---------- Bascule « Mon équipe / Tous » (écran chantiers) ---------- */
/* Visible seulement pour le directeur, qui reçoit tous les chantiers.
   Une tablette de terrain n'a rien à filtrer : le serveur ne lui envoie
   que les siens. */
.onglets-portee {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.onglets-portee button {
  flex: 1;
  min-height: 42px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}

.onglets-portee button.actif {
  background: var(--leaf-pale);
  color: var(--forest);
}