/* ─── APP VISITES (listing + fiche) ───
   Complète /style.css (tokens :root, .app-header, .field, .submit-btn, .toast).
   Règle projet : tout conteneur piloté par el.hidden dont une règle pose un
   display: doit avoir sa règle [hidden] { display: none }. */

#lock-screen[hidden],
#list-screen[hidden],
#form-screen[hidden],
#leads-screen[hidden],
.lead-linked[hidden],
#offline-banner[hidden],
.lock-error[hidden],
.list-empty[hidden],
.delete-btn[hidden],
.refresh-btn[hidden] { display: none; }

/* ─── HEADER ─── */
.back-link {
  font-size: 1.375rem;
  line-height: 1;
  color: var(--text2);
  text-decoration: none;
  padding: 0.25rem 0.5rem 0.25rem 0;
}

.refresh-btn {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold);
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  border-radius: 100px;
  padding: 6px 14px;
  cursor: pointer;
}

/* ─── ÉCRAN CODE ─── */
#lock-screen { display: flex; justify-content: center; padding-top: 3rem; }

.lock-card {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.lock-card form { text-align: left; margin-top: 1.5rem; }
.lock-card .submit-btn { margin-bottom: 0; }

.lock-error {
  color: var(--red);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* ─── LISTING ─── */
.new-visite-btn {
  display: block;
  width: 100%;
  padding: 0.875rem;
  margin-top: 1rem;
  background: var(--gold);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(184,134,11,0.25);
}

.list-bar {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1rem 0 0.75rem;
}

.filter-chips { display: flex; gap: 0.5rem; }

.chip {
  flex: 1;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text2);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.chip.active {
  color: var(--gold);
  background: var(--gold-bg);
  border-color: var(--gold-border);
}

.chip-count {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0.0625rem 0.25rem;
  margin-left: 0.125rem;
  background: rgba(0,0,0,0.07);
  border-radius: 100px;
  font-size: 0.6875rem;
}

.chip.active .chip-count { background: var(--gold); color: var(--white); }

.search-field { margin-bottom: 0; }

.list-empty {
  text-align: center;
  color: var(--text3);
  font-size: 0.875rem;
  padding: 2rem 0;
}

#offline-banner {
  background: var(--orange-bg);
  color: var(--orange);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: 1rem;
}

/* ─── CARTES VISITE ─── */
.visite-card {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  padding: 0.875rem 1rem;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s;
}

.visite-card:active { transform: scale(0.985); }
.visite-card[disabled] { cursor: default; opacity: 0.8; }

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.card-nom { font-weight: 700; font-size: 0.9375rem; color: var(--text); }
.card-date { font-size: 0.75rem; color: var(--text3); white-space: nowrap; }

.card-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.375rem;
  font-size: 0.75rem;
}

.badge-statut {
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  color: var(--text);
  border-radius: 100px;
  padding: 3px 10px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-statut.envoyee {
  background: var(--green-bg);
  border-color: var(--green);
}

.badge-statut.pending {
  background: var(--cyan-light);
  border-color: var(--cyan);
  color: var(--cyan);
}

.card-ville { color: var(--text2); font-weight: 600; }
.card-photos { color: var(--text3); font-weight: 600; }

/* ─── FICHE (barre haute + boutons) ─── */
.form-topbar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 0 0.25rem;
}

.form-back {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 100px;
  width: 38px;
  height: 38px;
  font-size: 1.125rem;
  color: var(--text2);
  cursor: pointer;
  flex-shrink: 0;
}

.form-topbar-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Enregistrer = action neutre ; Envoyer = action finale (mail récap) */
.submit-btn.save {
  background: var(--card);
  color: var(--gold);
  border: 1.5px solid var(--gold);
  box-shadow: none;
  margin-bottom: 0.75rem;
}

.submit-btn.save:hover:not(:disabled) { background: var(--gold-bg); }

.submit-btn.send {
  background: var(--green);
  box-shadow: 0 4px 16px rgba(22,163,74,0.25);
}

.submit-btn.send:hover:not(:disabled) { background: #12813B; }

/* Supprimer = action destructive, volontairement discrète (texte rouge, sans fond) */
.delete-btn {
  display: block;
  width: 100%;
  margin: 1.25rem 0 0.5rem;
  padding: 0.75rem;
  background: none;
  border: none;
  color: var(--red);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.delete-btn:disabled { opacity: 0.5; }

/* ─── DIFFÉRENCIATION TERRASSE / BARDAGE (05/10/2026) ───
   Quand une visite couvre les deux supports, chaque section marquée
   data-support porte un liseré + une pastille : vert sapin = terrasse,
   brique = bardage. Les sections communes (client, remarques, tarif)
   restent neutres. */
[data-support] { border-left: 4px solid var(--border); }
[data-support="terrasse"] { border-left-color: #5B8C5A; }
[data-support="bardage"] { border-left-color: #C2571B; }

[data-support] .form-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

[data-support] .form-section-title::after {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

[data-support="terrasse"] .form-section-title::after {
  content: '🌲 TERRASSE';
  color: #3D6B3C;
  background: rgba(91, 140, 90, 0.12);
}

[data-support="bardage"] .form-section-title::after {
  content: '🧱 BARDAGE';
  color: #9A431A;
  background: rgba(194, 87, 27, 0.12);
}

/* ─── REPRISE D'UN LEAD DU CRM (09/10/2026) ─── */
/* Les cartes de l'écran de sélection réutilisent .visite-card et ses enfants. */

.lead-pick-btn {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--gold-bg);
  border: 1px dashed var(--gold-border);
  border-radius: 10px;
  color: var(--gold);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.lead-pick-btn:active { transform: scale(0.99); }

.lead-linked {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.625rem 0.75rem;
  background: var(--green-bg);
  border: 1px solid var(--green);
  border-radius: 10px;
}

.lead-linked-txt {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.lead-unlink {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--text2);
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
}

.lead-unlink:hover { background: rgba(0,0,0,0.06); color: var(--text); }

/* Statut du lead + alerte « fiche visite déjà liée » dans les cartes */
.lead-statut {
  color: var(--text2);
  font-weight: 600;
}

.lead-deja {
  color: var(--orange);
  font-weight: 700;
}