/* Héron CRM — feuille de style unique.
   Thème clair/sombre piloté par l'attribut data-theme sur <html> (cookie « theme »). */

:root {
  --fond: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --bordure: #e2e6ec;
  --texte: #16202e;
  --texte-doux: #64748b;
  --accent: #2563eb;
  --accent-doux: #dbe6fe;
  --succes: #16a34a;
  --alerte: #d97706;
  --danger: #dc2626;
  --ombre: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
  --rayon: 10px;
}

[data-theme="sombre"] {
  --fond: #0f151d;
  --surface: #161d27;
  --surface-2: #1d2532;
  --bordure: #2a3442;
  --texte: #e6ebf2;
  --texte-doux: #93a1b5;
  --accent: #5b8cf5;
  --accent-doux: #1e2f52;
  --succes: #34d399;
  --alerte: #fbbf24;
  --danger: #f87171;
  --ombre: 0 1px 3px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Filet de sécurité : si un débordement subsiste malgré tout, la page ne
     glisse pas latéralement. Ce n'est pas un correctif — les vraies causes se
     traitent à la source (min-width des grilles, conteneurs à défilement) —
     mais un utilisateur ne doit jamais subir une page qui part de travers.

     `clip` et non `hidden` : `hidden` ferait de body un conteneur de
     défilement, ce qui désactiverait le `position: sticky` de l'en-tête.
     `clip` coupe sans créer de conteneur. */
  overflow-x: clip;
}

/* Une adresse e-mail, une URL ou un SIRET sans espace suffisent à repousser
   la mise en page sur un écran étroit. */
td, dd, p, li, .signal-detail, .chrono-corps { overflow-wrap: anywhere; }
img, svg, iframe { max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- En-tête ---------- */
.entete {
  display: flex; align-items: center; gap: 24px;
  padding: 0 20px; height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  position: sticky; top: 0; z-index: 500;
}
.marque { font-weight: 700; font-size: 17px; color: var(--texte); letter-spacing: -.3px; }
.marque span { color: var(--accent); }
.marque:hover { text-decoration: none; }
.marque-grande { font-size: 26px; display: block; text-align: center; margin: 0 0 20px; }

.nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.nav a {
  padding: 7px 12px; border-radius: 7px; color: var(--texte-doux);
  font-size: 14px; font-weight: 500; white-space: nowrap;
}
.nav a:hover { background: var(--surface-2); color: var(--texte); text-decoration: none; }
.nav a.actif { background: var(--accent-doux); color: var(--accent); }

/* Bouton hamburger : masqué au-delà de 860px (voir le bloc responsive en fin de fichier) */
.burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 36px; height: 36px; padding: 0 8px; cursor: pointer;
  background: none; border: 1px solid var(--bordure); border-radius: 8px;
}
.burger span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--texte); transition: transform .18s ease, opacity .18s ease;
}
.entete.ouvert .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.entete.ouvert .burger span:nth-child(2) { opacity: 0; }
.entete.ouvert .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.voile {
  position: fixed; inset: 56px 0 0; background: rgba(9, 14, 22, .45);
  z-index: 400; border: 0;
}

.nav-compte-mobile { display: none; }

.entete-fin { display: flex; align-items: center; gap: 8px; }
.btn-theme {
  background: none; border: 1px solid var(--bordure); border-radius: 7px;
  width: 32px; height: 32px; cursor: pointer; color: var(--texte-doux); font-size: 15px;
}
.btn-theme:hover { background: var(--surface-2); }

.menu-compte { position: relative; }
.menu-compte summary {
  list-style: none; cursor: pointer; padding: 6px 12px; border-radius: 7px;
  background: var(--surface-2); font-size: 14px; font-weight: 500;
}
.menu-compte summary::-webkit-details-marker { display: none; }
.menu-liste {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre); padding: 6px; z-index: 600;
}
.menu-liste a, .menu-liste button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0;
  background: none; border-radius: 6px; cursor: pointer; font: inherit; color: var(--texte);
}
.menu-liste a:hover, .menu-liste button:hover { background: var(--surface-2); text-decoration: none; }

/* ---------- Structure ---------- */
.conteneur { max-width: 1320px; margin: 0 auto; padding: 24px 20px 60px; }
.pied { text-align: center; padding: 20px; color: var(--texte-doux); font-size: 12px; }

.entete-page {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.entete-page h1 { margin: 0; font-size: 22px; letter-spacing: -.4px; }
.fil { font-size: 13px; color: var(--texte-doux); margin-bottom: 6px; }

.carte {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px;
}
.carte + .carte { margin-top: 16px; }
.carte h2 { margin: 0 0 14px; font-size: 15px; text-transform: uppercase;
            letter-spacing: .5px; color: var(--texte-doux); }

.grille { display: grid; gap: 16px; }
.grille-2 { grid-template-columns: 2fr 1fr; }
.grille-kpi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 900px) { .grille-2 { grid-template-columns: 1fr; } }

/* Un élément de grille vaut par défaut min-width:auto : il refuse de devenir
   plus étroit que son contenu. Un tableau large placé dedans élargit donc la
   colonne, puis la page entière, et le conteneur à défilement qui l'entoure ne
   sert plus à rien. min-width:0 rend la contraction possible et cantonne le
   défilement horizontal là où il est prévu. */
.grille > * { min-width: 0; }

/* ---------- Indicateurs ---------- */
.kpi { background: var(--surface); border: 1px solid var(--bordure);
       border-radius: var(--rayon); padding: 16px 18px; box-shadow: var(--ombre); }
.kpi .valeur { font-size: 28px; font-weight: 700; letter-spacing: -1px; }
.kpi .libelle { color: var(--texte-doux); font-size: 13px; margin-top: 2px; }
.kpi.accent .valeur { color: var(--accent); }
.kpi.alerte .valeur { color: var(--danger); }

/* ---------- Tableaux ---------- */
.table-enveloppe { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--bordure); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
     color: var(--texte-doux); font-weight: 600; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Pastilles ---------- */
/* `overflow-wrap: anywhere` sur les td (voir plus haut) autorise la césure au
   milieu d'un mot et, surtout, laisse le navigateur réduire une colonne sous la
   largeur de son plus long mot. Un libellé de pastille se retrouvait coupé
   (« Discu / ssion »). On l'exempte : une pastille tient sur une ligne, et la
   colonne réclame au moins cette largeur. Les libellés sont courts et le
   tableau reste dans .table-enveloppe, qui absorbe le surplus. */
.pastille {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--texte-doux);
  white-space: nowrap; overflow-wrap: normal;
}
.pastille.prospect   { background: #dbeafe; color: #1d4ed8; }
.pastille.discussion { background: #ede9fe; color: #6d28d9; }
.pastille.client     { background: #dcfce7; color: #15803d; }
.pastille.inactif    { background: #f1f5f9; color: #64748b; }
.pastille.perdu      { background: #fee2e2; color: #b91c1c; }
.pastille.haute      { background: #fee2e2; color: #b91c1c; }
.pastille.normale    { background: #e0f2fe; color: #0369a1; }
.pastille.basse      { background: #f1f5f9; color: #64748b; }
.pastille.retard     { background: #fef3c7; color: #b45309; }
[data-theme="sombre"] .pastille.prospect   { background: #1e3a8a; color: #bfdbfe; }
[data-theme="sombre"] .pastille.discussion { background: #4c1d95; color: #ddd6fe; }
[data-theme="sombre"] .pastille.client     { background: #14532d; color: #bbf7d0; }
[data-theme="sombre"] .pastille.inactif    { background: #334155; color: #cbd5e1; }
[data-theme="sombre"] .pastille.perdu      { background: #7f1d1d; color: #fecaca; }
[data-theme="sombre"] .pastille.haute      { background: #7f1d1d; color: #fecaca; }
[data-theme="sombre"] .pastille.normale    { background: #0c4a6e; color: #bae6fd; }
[data-theme="sombre"] .pastille.basse      { background: #334155; color: #cbd5e1; }
[data-theme="sombre"] .pastille.retard     { background: #78350f; color: #fde68a; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--bordure);
  background: var(--surface); color: var(--texte); font: inherit; font-size: 14px;
  font-weight: 500; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primaire:hover { filter: brightness(1.08); background: var(--accent); }
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-petit { padding: 4px 9px; font-size: 13px; }
.btn-large { width: 100%; justify-content: center; padding: 11px; font-size: 15px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Formulaires ---------- */
.champ {
  width: 100%; padding: 8px 11px; border: 1px solid var(--bordure);
  border-radius: 8px; background: var(--surface); color: var(--texte);
  font: inherit; font-size: 14px;
}
.champ:focus { outline: 2px solid var(--accent-doux); border-color: var(--accent); }
select.champ { cursor: pointer; }
textarea.champ { resize: vertical; }

.groupe-champ { margin-bottom: 14px; }
.groupe-champ > label { display: block; font-size: 13px; font-weight: 600;
                        margin-bottom: 5px; color: var(--texte-doux); }
.groupe-champ.en-erreur .champ { border-color: var(--danger); }
.requis { color: var(--danger); }
.aide { display: block; margin-top: 4px; font-size: 12px; color: var(--texte-doux); }
.erreur { display: block; margin-top: 4px; font-size: 12px; color: var(--danger); }
.case { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.case input { width: auto; }

.grille-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grille-form .pleine-largeur { grid-column: 1 / -1; }
@media (max-width: 700px) { .grille-form { grid-template-columns: 1fr; } }

.barre-filtres {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 16px; padding: 14px; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--rayon);
}
.barre-filtres .champ { width: auto; min-width: 150px; }
.barre-filtres input[type="search"] { min-width: 260px; }

/* ---------- Messages ---------- */
.messages { margin-bottom: 16px; display: grid; gap: 8px; }
.message { padding: 10px 14px; border-radius: 8px; font-size: 14px;
           background: var(--accent-doux); color: var(--accent); }
.message.success { background: #dcfce7; color: #15803d; }
.message.warning { background: #fef3c7; color: #b45309; }
.message.error   { background: #fee2e2; color: #b91c1c; }
[data-theme="sombre"] .message.success { background: #14532d; color: #bbf7d0; }
[data-theme="sombre"] .message.warning { background: #78350f; color: #fde68a; }
[data-theme="sombre"] .message.error   { background: #7f1d1d; color: #fecaca; }

/* ---------- Connexion ---------- */
.page-connexion { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.carte-connexion { width: 100%; max-width: 380px; padding: 32px; }
.carte-connexion label { display: block; font-size: 13px; font-weight: 600;
                         margin: 12px 0 5px; color: var(--texte-doux); }
.carte-connexion .btn { margin-top: 20px; }

/* ---------- Chronologie ---------- */
.chrono { list-style: none; margin: 0; padding: 0; }
.chrono li { position: relative; padding: 0 0 18px 22px; border-left: 2px solid var(--bordure); }
.chrono li:last-child { border-left-color: transparent; padding-bottom: 0; }
.chrono li::before {
  content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--surface);
}
.chrono .chrono-tete { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.chrono .chrono-date { font-size: 12px; color: var(--texte-doux); }
.chrono .chrono-sujet { font-weight: 600; }
.chrono .chrono-corps { font-size: 14px; color: var(--texte-doux);
                        margin-top: 3px; white-space: pre-wrap; }

/* ---------- Kanban ---------- */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.colonne { flex: 0 0 280px; background: var(--surface-2);
           border-radius: var(--rayon); padding: 12px; }
.colonne.survol { outline: 2px dashed var(--accent); outline-offset: -2px; }
.colonne-tete { display: flex; justify-content: space-between; align-items: baseline;
                margin-bottom: 10px; }
.colonne-tete .nom { font-weight: 600; font-size: 14px; }
.colonne-tete .total { font-size: 12px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.carte-oppo {
  background: var(--surface); border: 1px solid var(--bordure); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: grab; box-shadow: var(--ombre);
}
.carte-oppo:active { cursor: grabbing; }
.carte-oppo .titre { font-weight: 600; font-size: 14px; }
.carte-oppo .societe { font-size: 13px; color: var(--texte-doux); }
.carte-oppo .bas { display: flex; justify-content: space-between; align-items: center;
                   margin-top: 7px; font-size: 12px; color: var(--texte-doux); }
.carte-oppo .montant { font-weight: 700; color: var(--texte); font-variant-numeric: tabular-nums; }

/* ---------- Carte géographique ---------- */
#carte { height: calc(100vh - 240px); min-height: 420px;
         border-radius: var(--rayon); border: 1px solid var(--bordure); z-index: 1; }
.legende { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 13px;
           color: var(--texte-doux); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.popup-carte { font: inherit; min-width: 190px; }
.popup-carte .nom { font-weight: 700; font-size: 14px; display: block; margin-bottom: 3px; }
.popup-carte .ligne { font-size: 13px; color: #555; }

/* ---------- Divers ---------- */
.discret { color: var(--texte-doux); font-size: 13px; }
.vide { text-align: center; padding: 40px 20px; color: var(--texte-doux); }
.pagination { display: flex; gap: 6px; justify-content: center; align-items: center;
              margin-top: 20px; font-size: 14px; }
.pagination a, .pagination span { padding: 6px 11px; border-radius: 7px;
                                  border: 1px solid var(--bordure); }
.pagination .courante { background: var(--accent); border-color: var(--accent); color: #fff; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 14px; }
.deux-colonnes dt { color: var(--texte-doux); font-size: 13px; }
.deux-colonnes dd { margin: 0 0 8px; }

/* ---------- Autocomplétion entreprise ---------- */
.suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 300;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  max-height: 320px; overflow-y: auto; padding: 5px;
}
.suggestion {
  display: block; width: 100%; text-align: left; padding: 9px 11px;
  border: 0; background: none; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--texte); line-height: 1.4;
}
.suggestion:hover { background: var(--surface-2); }

/* ---------- Histogramme mensuel ----------
   Barres en CSS pur : une bibliothèque de graphes pour un seul histogramme
   coûterait plus en poids de page qu'elle n'apporte. */
.histogramme {
  display: flex; align-items: flex-end; gap: 6px;
  height: 190px; padding-top: 10px; overflow-x: auto;
}
.barre-mois {
  flex: 1; min-width: 34px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%;
}
.barre-mois .barre {
  width: 100%; min-height: 3px; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-doux));
}
.barre-mois .etiquette {
  margin-top: 6px; font-size: 11px; color: var(--texte-doux); white-space: nowrap;
}

.puce { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }

/* ---------- Signaux ---------- */
.signal { border-left: 3px solid var(--bordure); margin-bottom: 12px; }
.signal.priorite-haute { border-left-color: var(--danger); }
.signal.priorite-normale { border-left-color: var(--accent); }
.signal.priorite-basse { border-left-color: var(--texte-doux); }
.signal-tete { display: flex; justify-content: space-between;
               align-items: center; gap: 8px; flex-wrap: wrap; }
.signal-titre { margin: 8px 0 4px; font-size: 16px; }
.signal-titre a { color: var(--texte); }
.signal-detail { margin: 0; font-size: 14px; color: var(--texte-doux); }
.signal .actions form { display: inline; }

.choix-domaines { display: flex; flex-wrap: wrap; gap: 8px; }
.domaine-case {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border: 1px solid var(--bordure); border-radius: 999px;
  background: var(--surface); cursor: pointer; font-size: 14px;
}
.domaine-case:hover { background: var(--surface-2); }
.domaine-case input { margin: 0; }
.domaine-case:has(input:checked) {
  border-color: var(--accent); background: var(--accent-doux); color: var(--accent);
  font-weight: 600;
}
.bloc-source { margin-top: 6px; }

td.negatif, .negatif { color: var(--danger); }

/* ---------- Barre de navigation basse (mobile) ----------
   Masquée par défaut, révélée par le bloc responsive. Les env(safe-area-*)
   évitent que la barre passe sous la poignée d'accueil des iPhone récents. */
.barre-basse { display: none; }

/* ---------- Mobile ----------
   Sous 860px la barre de navigation devient un tiroir déroulant commandé par
   le hamburger. Le menu compte de droite disparaît : ses entrées sont reprises
   dans le tiroir (.nav-compte-mobile), pour ne pas empiler deux menus. */
@media (max-width: 860px) {
  .burger { display: flex; }

  .entete { gap: 12px; padding: 0 14px; }
  .marque { flex: 1; }

  .nav {
    position: fixed; top: 56px; left: 0; right: 0; z-index: 450;
    display: none; flex-direction: column; gap: 2px; overflow: visible;
    padding: 10px 14px 16px;
    background: var(--surface); border-bottom: 1px solid var(--bordure);
    box-shadow: 0 12px 24px rgba(9, 14, 22, .18);
    max-height: calc(100vh - 56px); overflow-y: auto;
  }
  .entete.ouvert .nav { display: flex; }
  .nav a { padding: 12px 14px; font-size: 15px; border-radius: 8px; }

  .nav-compte-mobile {
    display: block; margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--bordure);
  }
  .nav-compte-mobile a, .nav-compte-mobile button {
    display: block; width: 100%; text-align: left; padding: 12px 14px;
    border: 0; background: none; border-radius: 8px;
    font: inherit; font-size: 15px; font-weight: 500;
    color: var(--texte-doux); cursor: pointer;
  }
  .nav-compte-mobile a:hover, .nav-compte-mobile button:hover {
    background: var(--surface-2); color: var(--texte); text-decoration: none;
  }

  .menu-compte { display: none; }

  .conteneur { padding: 16px 14px 48px; }
  .entete-page h1 { font-size: 19px; }

  /* Une seule colonne partout : les grilles à deux colonnes deviennent illisibles */
  .grille-2, .grille-form, .deux-colonnes { grid-template-columns: 1fr; }
  .grille-kpi { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .kpi { padding: 13px 14px; }
  .kpi .valeur { font-size: 23px; }

  .barre-filtres { flex-direction: column; align-items: stretch; }
  .barre-filtres .champ,
  .barre-filtres input[type="search"] { width: 100%; min-width: 0; }
  .barre-filtres .btn { justify-content: center; }

  /* Les tableaux larges débordent plutôt que de comprimer leurs colonnes à
     l'illisible — mais uniquement ceux placés dans un conteneur à défilement.
     Appliquer cette largeur à tous les tableaux poussait les petits (deux
     colonnes, sur le tableau de bord et les rapports) hors de l'écran et
     faisait glisser la page entière. */
  .table-enveloppe table { min-width: 620px; }
  .carte { padding: 14px; }

  .colonne { flex-basis: 84vw; }
  #carte { height: calc(100vh - 330px); min-height: 320px; }

  /* --- Navigation basse --- */
  .barre-basse {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 480;
    background: var(--surface); border-top: 1px solid var(--bordure);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 12px rgba(9, 14, 22, .08);
  }
  .barre-basse a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 9px 2px 8px; font-size: 11px; font-weight: 600;
    color: var(--texte-doux); text-decoration: none;
  }
  .barre-basse a:hover { text-decoration: none; }
  .barre-basse a.actif { color: var(--accent); }
  .barre-basse .pictogramme { font-size: 17px; line-height: 1; }

  /* Place pour la barre : sinon elle recouvre le dernier bouton de chaque page. */
  .conteneur { padding-bottom: 84px; }
  .pied { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0)); }

  /* Zones tactiles : 44 px est le minimum confortable au pouce. */
  .btn { min-height: 42px; }
  .btn-petit { min-height: 36px; }
  .champ { min-height: 42px; font-size: 16px; }  /* 16 px : iOS ne zoome plus */
}

/* En mode installé, l'en-tête colle au bord haut de l'écran. */
@media (display-mode: standalone) {
  .entete { padding-top: env(safe-area-inset-top, 0); height: auto; min-height: 56px; }
  .voile { top: calc(56px + env(safe-area-inset-top, 0)); }
}

@media (max-width: 420px) {
  .grille-kpi { grid-template-columns: 1fr 1fr; }
  .marque { font-size: 16px; }
}

/* ---------- Guide pédagogique ---------- */
.guide { max-width: 900px; }
.guide .accroche { font-size: 17px; line-height: 1.5; margin-top: 0; }
.guide h3 { margin: 0 0 8px; font-size: 15px; }
.guide ul, .guide ol { padding-left: 20px; }
.guide li { margin-bottom: 7px; }
.encadre { background: var(--surface-2); border-radius: var(--rayon); padding: 15px; }
.etapes { counter-reset: etape; list-style: none; padding-left: 0; }
.etapes li {
  counter-increment: etape; position: relative;
  padding: 0 0 14px 40px; margin: 0;
}
.etapes li::before {
  content: counter(etape); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.repere {
  margin-top: 14px; padding: 12px 15px; border-radius: var(--rayon);
  background: var(--accent-doux); color: var(--accent); font-size: 14px;
}

/* ---------- Événements rattachés à une entreprise ---------- */
.evenement { padding: 10px 0; border-bottom: 1px solid var(--bordure); }
.evenement:last-child { border-bottom: 0; padding-bottom: 0; }
.evenement-tete { display: flex; gap: 6px; align-items: center;
                  flex-wrap: wrap; margin-bottom: 5px; }

/* Enveloppe d'un champ à autocomplétion : ancre la liste des suggestions. */
.champ-adresse { position: relative; }
.champ-adresse .suggestions { top: calc(100% + 4px); }
.suggestion.survol { background: var(--accent-doux); color: var(--accent); }

/* ---------- Sélection multiple des signaux ---------- */
.barre-selection {
  position: sticky; top: 56px; z-index: 300;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre);
}
/* Les actions n'apparaissent qu'une fois quelque chose de coché : la barre
   reste discrète tant qu'on ne fait que consulter. */
.barre-selection .actions,
.barre-selection .compte-selection { display: none; }
.barre-selection.active { border-color: var(--accent); }
.barre-selection.active .actions,
.barre-selection.active .compte-selection { display: flex; }
.barre-selection .compte-selection {
  font-size: 13px; font-weight: 600; color: var(--accent); margin-right: auto;
}

.signal { position: relative; padding-left: 44px; }
.signal.selectionne { border-color: var(--accent); background: var(--accent-doux); }
.coche-signal {
  position: absolute; left: 14px; top: 16px;
  display: flex; align-items: center; cursor: pointer;
}
.coche-signal .coche { width: 18px; height: 18px; cursor: pointer; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Filtres de veille, en cartes ---------- */
.liste-filtres { display: grid; gap: 12px; }
.filtre {
  background: var(--surface-2); border: 1px solid var(--bordure);
  border-left: 3px solid var(--accent); border-radius: var(--rayon); padding: 14px;
}
.filtre.inactif { border-left-color: var(--texte-doux); opacity: .75; }
.filtre-tete {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.filtre-tete .actions { flex-wrap: nowrap; }
.filtre-tete .actions form { display: inline; }
.filtre-nom { font-weight: 600; font-size: 15px; margin-right: 6px; }

/* Les critères se répartissent sur la largeur disponible et retombent en
   colonne d'eux-mêmes, sans jamais étirer la carte en hauteur inutilement. */
.filtre-criteres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 6px 18px; font-size: 14px;
}
.filtre-criteres .etiquette {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--texte-doux); font-weight: 600;
}
.filtre-passage {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--bordure);
  font-size: 13px; color: var(--texte-doux);
}
@media (max-width: 860px) {
  .filtre-tete { flex-direction: column; }
  .filtre-tete .actions { width: 100%; }
  .filtre-tete .actions .btn { flex: 1; justify-content: center; }
}

/* Filtre local dans une liste de suggestions longue (établissements). */
.filtre-suggestions { padding: 6px 5px 8px; position: sticky; top: 0;
                      background: var(--surface); z-index: 1; }
.suggestion-retour { border-bottom: 1px solid var(--bordure); border-radius: 0; }
.suggestion-vide { padding: 12px; text-align: center; }

/* Suggestions groupées par entreprise, les sites en dessous. */
.suggestion-entete {
  padding: 9px 11px 4px; font-size: 14px;
  border-top: 1px solid var(--bordure);
}
.suggestions > .suggestion-entete:first-child { border-top: 0; }
.suggestion-site { padding-left: 22px; }
.suggestion-note { padding: 4px 11px 9px 22px; font-size: 12px; }

/* Choix du point de départ d'une tournée. */
.choix-depart { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }