/* 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. */
  --encre: #16202c;
  --gris: #5b6b7c;
  --trait: #dde3ea;
  --fond: #fbfcfd;
  --accent: #1f4b7a;

  /* É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); }

/* ── 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 à erpeditors ─────────────────────────────────────────────────── */

/* ── Comparatif multi-solutions ───────────────────────────────────────────── */

.selecteur {
  border: 1px solid var(--trait);
  border-radius: .5rem;
  background: #fff;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.75rem;
}
.cases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .4rem 1rem;
  margin: .75rem 0 1rem;
}
.case { display: flex; align-items: baseline; gap: .5rem; font-size: .9rem; }
.case em { color: var(--gris); font-style: normal; font-size: .85em; }

/* Le tableau peut être large : il défile dans son propre cadre plutôt que de
   faire déborder la page entière. */
.table-comparatif { overflow-x: auto; }
.table-comparatif table { min-width: 40rem; }
.table-comparatif th .sous-titre {
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gris);
  font-size: .9em;
}

.ligne-categorie th {
  background: #f2f6f5;
  color: var(--encre);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-top: .8rem;
}
.verrou {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gris);
  font-size: .9em;
}

.nom-fonction { font-size: .9rem; }
.cellule { white-space: nowrap; }
.cellule .note {
  display: block;
  white-space: normal;
  color: var(--gris);
  font-size: .78rem;
  margin-top: .2rem;
  max-width: 16rem;
}

/* Les quatre niveaux de couverture. Le contraste de couleur porte
   l'information, mais le mot est toujours écrit : une couleur seule serait
   illisible pour un daltonien. */
.niveau {
  display: inline-block;
  font-size: .72rem;
  padding: .12rem .45rem;
  border-radius: .2rem;
}
.niveau-native { background: var(--verifie-fond); color: var(--verifie); }
.niveau-module { background: #e6edf4; color: #3a5875; }
.niveau-partenaire { background: #f6efdd; color: #765713; }
.niveau-absente { background: #f7e7e2; color: #8c3220; }

.masque { color: #b8c4c1; letter-spacing: .18em; }
.non-renseigne { color: var(--gris); }
.profil { font-size: .75rem; line-height: 1.9; }