/* ============================================================
   AnalyseTerrain — thème global
   Reprend la charte de l'application ACC (acc_theme.css) :
   variables bleu nuit / bleu clair, Syne pour les titres,
   DM Sans pour le texte, accent orange #e8420a sur la carto.
   ============================================================ */

:root {
  /* ── Header ── */
  --header-bg:             #060d31;
  --header-border:         #21262d;
  --header-btn-bg:         #2061bd;
  --header-btn-hover:      #3176d6;

  /* ── Surfaces ── */
  --page-bg-1:             #ffffff;
  --page-bg-2:             #e7eef8;
  --card-bg:               #ffffff;
  --card-border:           #cbd5e1;
  --card-hover-border:     #93c5fd;

  /* ── Textes ── */
  --titre:                 #1e3a5f;
  --texte:                 #07172c;
  --muted:                 #64748b;

  /* ── Accents ── */
  --accent:                #2061bd;
  --accent-clair:          #dbeafe;
  --accent-carto:          #e8420a;
  --ok:                    #15803d;
  --alerte:                #b45309;
  --danger:                #b91c1c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--texte);
  background: linear-gradient(to right,
              var(--page-bg-1) 0%, var(--page-bg-1) 70%, var(--page-bg-2) 100%);
  min-height: 100vh;
}

h1, h2, h3, .syne { font-family: 'Syne', system-ui, sans-serif; }

/* ── Bandeau ─────────────────────────────────────────────── */
.app-header {
  height: 79px; /* 72px + 10% */
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  display: flex; align-items: center; gap: 18px;
  padding: 0 22px;
  position: sticky; top: 0; z-index: 100;
}
.app-header .logo { height: 70px; width: auto; }
.app-header .marque {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: 19px; color: #fff; letter-spacing: .3px;
}
.app-header .sous-titre { color: #fff; font-size: 12px; }
.app-header .sous-titre span { color: #f59e0b; }
.app-header .spacer { flex: 1; }
.app-header .utilisateur { color: #cbd5e1; font-size: 13px; }

.btn {
  border: 0; border-radius: 8px; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  padding: 9px 16px; transition: background .15s, border-color .15s;
  background: var(--header-btn-bg); color: #fff;
}
.btn:hover { background: var(--header-btn-hover); }
.btn.secondaire { background: #eff3f8; color: var(--titre); border: 1px solid var(--card-border); }
.btn.secondaire:hover { background: #dbeafe; border-color: var(--card-hover-border); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #dc2626; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Contenu ─────────────────────────────────────────────── */
.contenu { max-width: 1280px; margin: 0 auto; padding: 26px 22px 60px; }

.barre-outils {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px; flex-wrap: wrap;
}
.barre-outils h1 { font-size: 22px; color: var(--titre); font-weight: 700; }
.barre-outils .spacer { flex: 1; }

.champ-recherche {
  flex: 0 1 320px;
  padding: 9px 13px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--card-border); border-radius: 8px; background: #fff;
}
.champ-recherche:focus { outline: 2px solid var(--accent-clair); border-color: var(--accent); }

/* ── Grille de cards ─────────────────────────────────────── */
.grille {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
}

.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 17px 18px 15px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  animation: apparition .3s ease both;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--card-hover-border);
  box-shadow: 0 6px 20px rgba(30, 58, 95, .12);
}
@keyframes apparition { from { opacity: 0; transform: translateY(8px); } }

.card .commune {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px;
}
.card .client {
  font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 700;
  color: var(--titre); line-height: 1.25; margin-bottom: 4px;
}
.card .reference { font-size: 11px; color: var(--muted); margin-bottom: 12px; }

.card .stats { display: flex; gap: 8px; flex-wrap: wrap; }
.card .stat {
  font-size: 11px; padding: 3px 9px; border-radius: 20px;
  background: #eff3f8; color: #3a5a80;
}

.badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .4px;
}
.badge.nouveau  { background: #e2e8f0; color: #475569; }
.badge.cadastre { background: #fef3c7; color: #92400e; }
.badge.terrain  { background: #dbeafe; color: #1e40af; }
.badge.analyse  { background: #dcfce7; color: #166534; }

.carte-vide {
  border: 2px dashed var(--card-border); background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 148px; color: var(--muted); gap: 8px;
}
.carte-vide:hover { border-color: var(--accent); color: var(--accent); }
.carte-vide .plus { font-size: 30px; line-height: 1; font-weight: 300; }

.message-vide {
  text-align: center; padding: 60px 20px; color: var(--muted); font-size: 14px;
}

/* ── Fenêtre modale ──────────────────────────────────────── */
.voile {
  position: fixed; inset: 0; background: rgba(6, 13, 49, .55);
  display: none; align-items: center; justify-content: center;
  z-index: 300; padding: 20px; backdrop-filter: blur(2px);
}
.voile.visible { display: flex; }

.modale {
  background: #fff; border-radius: 14px; width: 100%; max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  max-height: 90vh; display: flex; flex-direction: column;
}
.modale header {
  padding: 18px 22px; border-bottom: 1px solid #e2e8f0;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px; color: var(--titre);
}
.modale .corps { padding: 20px 22px; overflow-y: auto; }
.modale footer {
  padding: 14px 22px; border-top: 1px solid #e2e8f0;
  display: flex; gap: 10px; justify-content: flex-end;
}

label.champ { display: block; margin-bottom: 15px; }
label.champ .intitule {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--titre); margin-bottom: 5px;
}
label.champ input, label.champ textarea, label.champ select {
  width: 100%; padding: 9px 12px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--card-border); border-radius: 8px; background: #fff;
}
label.champ input:focus, label.champ textarea:focus {
  outline: 2px solid var(--accent-clair); border-color: var(--accent);
}
.aide { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Liste de suggestions (recherche de commune) */
.suggestions {
  border: 1px solid var(--card-border); border-radius: 8px;
  max-height: 190px; overflow-y: auto; margin-top: 5px; display: none;
}
.suggestions.visible { display: block; }
.suggestions div { padding: 8px 12px; font-size: 13px; cursor: pointer; }
.suggestions div:hover, .suggestions div.actif { background: var(--accent-clair); }
.suggestions .dep { color: var(--muted); font-size: 11px; }

.erreur {
  background: #fef2f2; border: 1px solid #fecaca; color: var(--danger);
  padding: 9px 12px; border-radius: 8px; font-size: 12px; margin-bottom: 14px;
}
.info {
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
  padding: 9px 12px; border-radius: 8px; font-size: 12px; margin-bottom: 14px;
}

/* ── Indicateur de chargement ────────────────────────────── */
.rouage {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  display: inline-block; animation: tourne .7s linear infinite;
  vertical-align: -2px; margin-right: 7px;
}
.rouage.sombre { border-color: rgba(30, 58, 95, .25); border-top-color: var(--accent); }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ── Tableau de gestion ──────────────────────────────────────
   Premier tableau de l'application : il vit ici et non dans la
   page, parce qu'un second écran de liste le réutilisera. */
.tableau {
  width: 100%; border-collapse: collapse; background: var(--card-bg);
  border: 1px solid var(--card-border); border-radius: 10px;
  overflow: hidden; font-size: 13px;
}
.tableau thead th {
  background: #f1f5f9; color: var(--titre); font-weight: 600;
  text-align: left; padding: 10px 12px; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--card-border);
}
.tableau td { padding: 11px 12px; border-bottom: 1px solid #eef2f7; }
.tableau tbody tr:last-child td { border-bottom: none; }
.tableau tbody tr:hover { background: #f8fafc; }
.tableau td.actions { text-align: right; white-space: nowrap; }
.tableau .btn { padding: 5px 10px; font-size: 12px; margin-left: 5px; }
/* Une ligne en veille se lit d'un coup d'oeil : le compte existe encore,
   mais il ne se connecte plus. */
.tableau tr.veille td:not(.actions) { opacity: .55; }
.tableau .principal { font-weight: 600; color: var(--titre); }
.tableau .secondaire-txt { color: var(--muted); font-size: 11.5px; }

.badge.actif  { background: #dcfce7; color: #166534; }
.badge.veille { background: #e2e8f0; color: #475569; }
.badge.role   { background: #fef3c7; color: #92400e; }