/* Charte de la gamme erpecosystem — direction « registre européen ».

   Sobre est la décision, pas l'attente (voir notes/charte-erpintegrators.md) :
   encre sur papier, trait fin, chiffres tabulaires, aucun code visuel du
   sponsoring. Ce fichier est partagé par copie entre erpintegrators et
   erpeditors : le socle (tokens, base, composants) est identique dans les deux,
   seule la teinte d'accent change, et chaque produit ajoute ses blocs propres
   en fin de fichier.

   Deux règles que ce fichier fait respecter :
   - la couleur sémantique (état de la donnée) prime sur la couleur de marque ;
   - le plan d'un compte ne se voit jamais dans l'ordre d'une liste — le premium
     est un traitement (logo, blocs), pas une position ni une bordure. */

:root {
  /* Marque. L'accent est la seule valeur qui diffère d'un produit à l'autre :
     vert profond pour erpintegrators, bleu ardoise pour erpeditors, bordeaux pour
     erpinvestors, bleu-vert « carte marine » pour erpmap. */
  --encre: #16202c;
  --gris: #5b6b7c;
  --trait: #dde3ea;
  --fond: #fbfcfd;
  --accent: #1d5c6b;

  /* États de la donnée. Toujours accompagnés d'un mot : la couleur seule ne
     porte pas l'information (daltonisme, impression). */
  --verifie: #1f6b47;        --verifie-fond: #e3f1e9;
  --declare: #7d6320;        --declare-fond: #f6efdd;
  --perime: #8a4a2c;         --perime-fond: #f5e9e3;

  /* Retours après action. */
  --ok: #1f4b7a;             --ok-fond: #e7f1ef;
  --alerte: #8c3220;         --alerte-fond: #fbeae7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.5rem 1.5rem 4rem;
  max-width: 68rem;
  margin-inline: auto;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: var(--encre);
  background: var(--fond);
}

h1 { font-size: 1.9rem; margin: 0 0 .4rem; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }

a { color: var(--accent); text-underline-offset: 2px; }

.page-tete { border-bottom: 1px solid var(--trait); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.accroche { color: var(--gris); margin: 0; max-width: 44rem; }
.meta { color: var(--gris); font-size: .9rem; margin: .25rem 0; font-variant-numeric: tabular-nums; }
.lien { font-size: .9rem; margin: .25rem 0; word-break: break-all; }
.fil { font-size: .9rem; margin: 0 0 1rem; }
.discret { color: var(--gris); font-size: .85rem; }

/* ── Filtres ──────────────────────────────────────────────────────────────── */

/* Un groupe par critère (pays, solution, secteur…), chacun sur sa ligne :
   un titre court puis les valeurs possibles en capsules. */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-bottom: 1rem; font-size: .9rem; align-items: center; }
.filtre-groupe { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; margin-bottom: .6rem; font-size: .88rem; }
.filtre-titre { color: var(--gris); min-width: 5.5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.filtres a, .filtre-groupe a {
  padding: .25rem .65rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  text-decoration: none;
  background: #fff;
  color: var(--encre);
}
.filtres a.actif, .filtre-groupe a.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Valeur sans résultat, montrée quand même (pays) : grisée, non cliquable. */
.filtre-groupe .inactif { padding: .25rem .65rem; border: 1px dashed var(--trait); border-radius: 999px; color: var(--gris); opacity: .7; }
.filtre-groupe .inactif small { margin-left: .3rem; }
/* Le nombre de résultats que donnerait ce filtre, avant de cliquer. */
.filtre-groupe a small { color: inherit; opacity: .7; margin-left: .3rem; font-variant-numeric: tabular-nums; }
.filtre-groupe a.actif small { opacity: .85; }

/* Les filtres actifs, retirables d'un clic, et le compteur de résultats. */
.jetons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0 1.25rem; font-size: .88rem; }
.jeton {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .35rem .2rem .7rem;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  text-decoration: none;
}
.jeton .retirer { font-weight: 700; opacity: .8; padding: 0 .3rem; }
.compteur { color: var(--gris); font-variant-numeric: tabular-nums; }
.tri { margin-left: auto; color: var(--gris); font-size: .82rem; }

/* ── Cartes de résultat ───────────────────────────────────────────────────── */

.cartes { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem;
          grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.carte { border: 1px solid var(--trait); border-radius: .6rem; padding: 1rem 1.1rem; background: #fff; display: flex; flex-direction: column; gap: .35rem; }
.carte h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.carte h2 a { text-decoration: none; }
.carte .solutions { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0; }
.carte .secteurs { color: var(--gris); font-size: .82rem; }

/* Logo d'un cabinet : en niveaux de gris tant que la fiche n'est pas
   revendiquée, en couleur après. C'est l'un des rares traitements « premium »
   autorisés par la charte — il n'affecte ni l'ordre ni la position. */
.logo-integrateur { max-height: 1.6rem; max-width: 6rem; filter: grayscale(1); opacity: .8; }
.logo-integrateur.couleur { filter: none; opacity: 1; }

/* ── États de la donnée ───────────────────────────────────────────────────── */

/* Point coloré + mot. Le mot est obligatoire. */
.pastille-etat {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  padding: .1rem .5rem; border-radius: 999px;
  white-space: nowrap;
}
.pastille-etat::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.pastille-etat.verifie { background: var(--verifie-fond); color: var(--verifie); }
.pastille-etat.declare { background: var(--declare-fond); color: var(--declare); }
.pastille-etat.perime  { background: var(--perime-fond);  color: var(--perime); }

/* Badge réservé à « revendiqué » et « vérifié ». Jamais « premium », jamais
   « sponsorisé » : ce serait le code visuel du pay-to-play. */
.badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .1rem .45rem;
  border-radius: .25rem;
  background: var(--accent);
  color: #fff;
  vertical-align: middle;
}
.badge.verifie { background: var(--verifie); }
.badge.attente { background: var(--declare); }
/* La famille d'une solution (ERP…) : une information, pas un état — gris. */
.badge.famille { background: var(--gris); }

/* ── Tableaux ─────────────────────────────────────────────────────────────── */

.grille { border-collapse: collapse; width: 100%; font-size: .93rem; background: #fff; font-variant-numeric: tabular-nums; }
.grille th, .grille td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.grille th { font-weight: 600; color: var(--gris); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.grille td.nombre, .grille th.nombre { text-align: right; }
.grille .source { display: block; color: var(--gris); font-size: .78rem; }
.defilant { overflow-x: auto; }

/* ── États vides et blocs d'appel ─────────────────────────────────────────── */

/* Un état vide n'est jamais muet : il dit ce qui manque et propose une action.
   Tant que la base est maigre, c'est là que vit l'interface. */
.vide {
  border: 1px dashed var(--trait);
  border-radius: .5rem;
  padding: 1rem 1.2rem;
  color: var(--gris);
  background: #fff;
}
.vide p { margin: 0 0 .5rem; }
.vide p:last-child { margin: 0; }
.vide.court { border: none; background: none; padding: 0; font-style: italic; }

/* Bloc d'appel (« ce cabinet est le vôtre ? », « vous êtes éditeur ? »). */
.invitation {
  border: 1px solid var(--trait);
  border-left: 3px solid var(--accent);
  border-radius: .4rem;
  background: #fff;
  padding: 1.2rem 1.4rem;
  margin-top: 1.75rem;
}
.invitation h2 { margin-top: 0; font-size: 1.1rem; }

.bouton {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: .3rem;
  padding: .45rem 1rem;
  font: inherit;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
}
.bouton.secondaire { background: #fff; color: var(--accent); }
.bouton.discret { background: none; border-color: var(--trait); color: var(--gris); }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Formulaires ──────────────────────────────────────────────────────────── */

.formulaire { max-width: 40rem; }
.champ { display: block; margin-bottom: 1rem; }
.champ > span { display: block; font-size: .85rem; color: var(--gris); margin-bottom: .25rem; }
.champ input, .champ select, .champ textarea {
  width: 100%;
  font: inherit;
  padding: .45rem .6rem;
  border: 1px solid var(--trait);
  border-radius: .3rem;
  background: #fff;
  color: var(--encre);
}
.champ textarea { min-height: 6rem; }
.champ .aide { display: block; font-size: .8rem; color: var(--gris); margin-top: .2rem; }
.erreurs { background: var(--alerte-fond); color: var(--alerte); border-radius: .35rem; padding: .6rem .9rem; font-size: .9rem; margin-bottom: 1rem; }
.erreurs ul { margin: .3rem 0 0; padding-left: 1.2rem; }

.pagination { margin-top: 1.75rem; color: var(--gris); font-size: .9rem; font-variant-numeric: tabular-nums; }

code { background: #eef2f6; padding: .1rem .35rem; border-radius: .25rem; font-size: .88em; }

/* ── Barre de navigation ──────────────────────────────────────────────────── */

.barre-session {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .9rem;
  font-size: .85rem;
  color: var(--gris);
  border-bottom: 1px solid var(--trait);
  padding-bottom: .7rem;
  margin-bottom: 1.5rem;
}
/* Le mot-image de la gamme, à gauche ; le reste est poussé à droite. */
.barre-session .marque { margin-right: auto; font-weight: 700; letter-spacing: -.01em; text-decoration: none; color: var(--encre); }
.barre-session .marque em { font-style: normal; color: var(--accent); }
.barre-session .entree { text-decoration: none; }
/* `button_to` génère un vrai formulaire : sans ça, le bouton s'afficherait
   sous la ligne au lieu de rester à côté du reste. */
.barre-session form { margin: 0; }
.barre-session .lien-nu {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Messages de retour après une redirection. */
.message {
  padding: .6rem .9rem;
  border-radius: .35rem;
  font-size: .9rem;
  margin: 0 0 1.25rem;
}
.message-ok { background: var(--ok-fond); color: var(--ok); }
.message-alerte { background: var(--alerte-fond); color: var(--alerte); }

/* Bandeau de réserve : la donnée affichée est déclarative, pas constatée. */
.bandeau-fiabilite {
  background: var(--declare-fond);
  color: var(--declare);
  border-radius: .35rem;
  padding: .6rem .9rem;
  font-size: .88rem;
  margin-bottom: 1.25rem;
}

/* ── Blocs de synthèse (statistiques, tableau de bord) ────────────────────── */

.chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.chiffre { border: 1px solid var(--trait); border-radius: .5rem; background: #fff; padding: .8rem 1rem; }
.chiffre strong { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.chiffre span { color: var(--gris); font-size: .82rem; }

/* ── Propre à erpmap ─────────────────────────────────────────────────────── */

/* La page de la carte prend toute la fenêtre : la barre de session en haut,
   puis le panneau à gauche et la carte à droite, sans défilement de la page —
   c'est le panneau qui défile. */
body.plein-ecran { max-width: none; padding: 0; height: 100vh; display: flex; flex-direction: column; }
body.plein-ecran .barre-session { margin: 0; padding: .6rem 1.25rem; }
body.plein-ecran .message { margin: 0; border-radius: 0; }
.carte-page { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(20rem, 26rem) 1fr; }
.carte-panneau { overflow-y: auto; border-right: 1px solid var(--trait); padding: 1rem 1.1rem 2rem; background: #fff; font-size: .9rem; }
.carte-fond { min-height: 20rem; background: #e9eef2; }
@media (max-width: 48rem) {
  /* Sur un téléphone : la carte au-dessus, le panneau en dessous. */
  body.plein-ecran { height: auto; }
  .carte-page { grid-template-columns: 1fr; grid-template-rows: 55vh auto; }
  .carte-fond { order: -1; }
  .carte-panneau { border-right: none; border-top: 1px solid var(--trait); }
}

/* Le formulaire de recherche : compact, deux champs par ligne quand ça tient. */
.carte-filtres .champ { margin-bottom: .7rem; }
.carte-filtres input[type="search"], .carte-filtres input[type="text"], .carte-filtres select {
  width: 100%; border: 1px solid var(--trait); border-radius: .3rem; padding: .35rem .5rem; font: inherit; font-size: .88rem; background: #fff;
}
.carte-filtres select[multiple] { padding: .2rem; }
.champs-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.case { display: flex; align-items: center; gap: .4rem; font-size: .85rem; margin: .4rem 0; }
.carte-filtres .actions { margin: .6rem 0 .2rem; display: flex; gap: .5rem; }

.carte-compteur { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin: .8rem 0 .4rem; font-variant-numeric: tabular-nums; }
.carte-compteur .case { margin: 0; }
.bouton.petit { padding: .25rem .6rem; font-size: .82rem; }

/* La légende : un rond de couleur par solution comparée, puis les solutions
   les plus présentes dans la vue, cliquables. */
.carte-legende { display: flex; flex-wrap: wrap; gap: .3rem .6rem; font-size: .82rem; margin-bottom: .6rem; align-items: center; }
.legende-item { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.legende-item i { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }

/* Les résultats, une ligne par établissement, cliquable. */
.carte-resultats { list-style: none; padding: 0; margin: 0; }
.carte-resultats .resultat { padding: .5rem 0; border-bottom: 1px solid var(--trait); cursor: pointer; display: flex; flex-direction: column; gap: .15rem; }
.carte-resultats .resultat:hover { background: var(--fond); }
.carte-resultats .resultat-usages { display: flex; flex-wrap: wrap; gap: .25rem; }

/* L'épingle : un rond de la couleur de la solution, liseré blanc pour se
   détacher du fond de carte. */
.epingle { background: none; border: none; }
.epingle i { display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); box-sizing: border-box; }
/* Société « de fond » (ERP inconnu) : plus petite, plus discrète. */
.epingle-fond i { width: 11px; height: 11px; border-width: 1px; opacity: .8; }
/* Bulle d'agrégat par commune (carte au dézoom). */
.bulle-commune { background: none; border: none; }
.bulle-commune div { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.bulle-commune b { color: #fff; font-size: .72rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.4); font-variant-numeric: tabular-nums; }

/* La bulle d'une épingle (Leaflet pose ses propres styles ; on ajuste le contenu). */
.bulle { font-size: .85rem; line-height: 1.45; min-width: 12rem; }
.bulle-usages { display: flex; flex-wrap: wrap; gap: .25rem; margin: .35rem 0; }
.leaflet-popup-content { margin: .7rem .9rem; }
/* Les regroupements de markercluster, dans les tons du produit plutôt qu'en vert pomme. */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(29, 92, 107, .25); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background: rgba(29, 92, 107, .85); color: #fff; font-weight: 600; }

/* Les fiches (établissement, solution) : deux colonnes quand ça tient. */
.fiche-deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 48rem) { .fiche-deux-colonnes { grid-template-columns: 1fr; } }
.mini-carte { height: 18rem; border: 1px solid var(--trait); border-radius: .5rem; position: sticky; top: 1rem; }
.grille .note { display: block; color: var(--gris); font-size: .85em; }
.cellule { white-space: nowrap; }
.liste-nue { list-style: none; padding: 0; margin: 0 0 .5rem; }
.liste-nue li { padding: .3rem 0; border-bottom: 1px solid var(--trait); }
.trous { margin: .3rem 0; font-size: .9rem; }
.puce { display: inline-block; border: 1px solid var(--trait); border-radius: 1rem; padding: .1rem .6rem; margin: .1rem .25rem .1rem 0; font-size: .85rem; background: #fff; text-decoration: none; }
/* Les barres « par région » : une cellule qui se remplit au prorata du maximum. */
.barres td { vertical-align: middle; }
.barre-cellule { width: 40%; }
.barre { display: block; height: .6rem; background: var(--accent); border-radius: .3rem; min-width: 2px; }

/* La déclaration : la recherche SIRENE et la liste des candidats. */
.recherche-page { display: flex; gap: .5rem; margin: .5rem 0 1rem; max-width: 40rem; }
.recherche-page input[type="search"] { flex: 1; border: 1px solid var(--trait); border-radius: .35rem; padding: .5rem .8rem; font: inherit; background: #fff; }
.candidats { list-style: none; padding: 0; margin: 0 0 1rem; max-width: 40rem; }
.candidats li { border-bottom: 1px solid var(--trait); }
.candidats label { display: flex; gap: .6rem; align-items: baseline; padding: .5rem 0; cursor: pointer; flex-wrap: wrap; }
.candidats label .discret { flex-basis: 100%; padding-left: 1.5rem; }
.formulaire .champ input, .formulaire .champ select { width: 100%; border: 1px solid var(--trait); border-radius: .3rem; padding: .4rem .6rem; font: inherit; background: #fff; }

/* Le signalement sur une fiche : replié par défaut, c'est un recours, pas une invitation. */
.signaler { margin-top: 1.5rem; border: 1px solid var(--trait); border-radius: .4rem; padding: .6rem .9rem; background: #fff; font-size: .9rem; }
.signaler summary { cursor: pointer; color: var(--gris); }
.signaler .formulaire { margin-top: .8rem; }
.signaler textarea { width: 100%; border: 1px solid var(--trait); border-radius: .3rem; padding: .4rem .6rem; font: inherit; }
/* Bouton-lien (recherche ERP admin) aligné dans une ligne de méta. */
.lien-bouton { display:inline; }
.lien-bouton button { background:none; border:none; padding:0; font:inherit; color:var(--accent); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }