/* Charte de la gamme erpecosystem — direction « registre contemporain »
   (notes/refonte-ui-contemporaine.md, 4 septembre 2026), sur la base de la
   direction « registre européen » du 19 août (notes/charte-erpintegrators.md).

   La sobriété reste la décision : encre sur papier, chiffres tabulaires,
   aucun code visuel du sponsoring. Ce qui change, c'est la fabrication :
   une police auto-hébergée (Inter, licence OFL), une échelle de rayons et
   d'ombres douces, une barre haute collante, des composants qui répondent
   au survol et au clavier, la carte à côté de la liste.

   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 en fin de
   fichier. Les deux règles de la charte tiennent toujours :
   - 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. */

/* ── La police : Inter, auto-hébergée (jamais servie par un tiers) ───────── */
/* Police variable (graisses 400 à 800 dans un seul fichier), deux sous-ensembles :
   latin de base, puis latin étendu (ő, ł, ș… — l'Europe entière). `font-display:
   swap` : le texte s'affiche tout de suite en police système, puis bascule.

   Les fichiers sont dans public/fonts et l'adresse est RELATIVE (« ../fonts/… »
   depuis /assets/application.css) : en production l'application est servie
   sous un préfixe (/integrators, /editors) que Propshaft ignore quand il
   réécrit les url() à la construction de l'image — une adresse absolue
   « /assets/… » y serait fausse. Une adresse relative suit le préfixe. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Marque. L'accent est la seule valeur qui diffère d'un produit à l'autre. */
  --encre: #101828;
  --gris: #667085;
  --gris-clair: #98a2b3;
  --trait: #e5e9ef;
  --trait-fort: #d0d5dd;
  --fond: #f5f7f9;          /* le papier */
  --surface: #ffffff;       /* les cartes, les panneaux */
  --surface-2: #f9fafb;     /* les zones en retrait */
  --accent: #1f4b7a;
  --accent-fonce: #163a5f;
  --accent-doux: #e6eef7;   /* sélection, focus, fonds teintés */
  --accent-texte: #ffffff;

  /* États de la donnée. Toujours accompagnés d'un mot : la couleur seule ne
     porte pas l'information (daltonisme, impression). */
  --verifie: #1b7a49;        --verifie-fond: #e6f4ec;
  --declare: #a86a10;        --declare-fond: #fdf3e2;
  --perime: #8a5a4a;         --perime-fond: #f6ebe7;

  /* Retours après action. */
  --ok: var(--accent);       --ok-fond: var(--accent-doux);
  --alerte: #b42318;         --alerte-fond: #fef3f2;

  /* Formes, profondeur, mouvement : une seule échelle pour toute la gamme. */
  --rayon: 14px;
  --rayon-petit: 8px;
  --rayon-pilule: 999px;
  --ombre: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -12px rgba(16, 24, 40, .12);
  --ombre-forte: 0 12px 32px -12px rgba(16, 24, 40, .28);
  --transition: .15s ease;
  --barre-hauteur: 3.75rem;
}

* { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--barre-hauteur) + 1rem); }

body {
  margin: 0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01";   /* Inter : a et 1 alternatifs, plus lisibles */
  font-size: 15px;
  line-height: 1.55;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

/* Le contenu de chaque page (le `yield` du layout) : une colonne centrée.
   La page carte (`plein-ecran`) et la vue liste + carte (`.partage`) élargissent. */
.page { max-width: 80rem; margin: 0 auto; padding: 1.75rem 2rem 4rem; }
@media (max-width: 48rem) { .page { padding: 1.25rem 1rem 3rem; } }

h1 { font-size: 1.9rem; margin: 0 0 .4rem; letter-spacing: -.03em; line-height: 1.15; font-weight: 700; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; letter-spacing: -.015em; font-weight: 600; }
h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; font-weight: 600; }

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-fonce); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.page-tete { padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
.accroche { color: var(--gris); margin: 0; max-width: 46rem; }
.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: .88rem; margin: 0 0 1rem; color: var(--gris); }
.fil a { color: var(--gris); text-decoration: none; }
.fil a:hover { color: var(--encre); }
.discret { color: var(--gris); font-size: .86rem; }

/* ── Filtres (capsules en liens, groupes par critère) ───────────────────── */

.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; font-size: .9rem; align-items: center; }
.filtre-groupe { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; margin-bottom: .55rem; font-size: .88rem; }
.filtre-titre { color: var(--gris); min-width: 5.5rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.filtres a, .filtre-groupe a {
  padding: .4rem .85rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-pilule);
  text-decoration: none;
  background: var(--surface);
  color: var(--encre);
  font-weight: 500;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.filtres a:hover, .filtre-groupe a:hover { border-color: var(--gris-clair); box-shadow: var(--ombre); }
.filtres a.actif, .filtre-groupe a.actif { background: var(--encre); border-color: var(--encre); color: #fff; }
/* Valeur sans résultat, montrée quand même (pays) : grisée, non cliquable. */
.filtre-groupe .inactif { padding: .4rem .85rem; border: 1px dashed var(--trait); border-radius: var(--rayon-pilule); color: var(--gris-clair); }
.filtre-groupe .inactif small { margin-left: .3rem; }
/* Le nombre de résultats que donnerait ce filtre, avant de cliquer. */
.filtre-groupe a small { color: var(--gris-clair); margin-left: .35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.filtre-groupe a.actif small { color: rgba(255, 255, 255, .7); }

/* 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: .3rem .45rem .3rem .8rem;
  border-radius: var(--rayon-pilule);
  background: var(--encre); color: #fff;
  text-decoration: none; font-weight: 500;
  transition: background var(--transition);
}
.jeton:hover { background: #000; color: #fff; }
.jeton .retirer { font-weight: 700; opacity: .7; padding: 0 .3rem; }
.compteur { color: var(--gris); font-variant-numeric: tabular-nums; }
.compteur b, .compteur strong { color: var(--encre); font-weight: 600; }
.tri { margin-left: auto; color: var(--gris); font-size: .84rem; }

/* ── Cartes de résultat (grille de cartes) ──────────────────────────────── */

.cartes { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem;
          grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.carte {
  border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.1rem 1.2rem; background: var(--surface);
  display: flex; flex-direction: column; gap: .4rem;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.carte:hover { box-shadow: var(--ombre-forte); border-color: var(--trait-fort); transform: translateY(-1px); }
.carte h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; letter-spacing: -.01em; }
.carte h2 a { text-decoration: none; color: var(--encre); }
.carte h2 a:hover { color: var(--accent); }
.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 — le seul traitement « premium » des listes. */
.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: .38rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .01em;
  padding: .18rem .6rem .18rem .5rem; border-radius: var(--rayon-pilule);
  white-space: nowrap;
}
.pastille-etat::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; flex: none; }
.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: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .5rem;
  border-radius: 6px;
  background: var(--accent-doux);
  color: var(--accent);
  vertical-align: middle;
}
.badge.verifie { background: var(--verifie-fond); color: var(--verifie); }
.badge.attente { background: var(--declare-fond); color: var(--declare); }
/* La famille d'une solution (ERP…) : une information, pas un état — gris. */
.badge.famille { background: var(--surface-2); color: var(--gris); border: 1px solid var(--trait); }

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

.grille { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .92rem; background: var(--surface); font-variant-numeric: tabular-nums; border: 1px solid var(--trait); border-radius: var(--rayon-petit); overflow: hidden; }
.grille th, .grille td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.grille tbody tr:last-child td { border-bottom: 0; }
.grille tbody tr:hover td { background: var(--surface-2); }
.grille th { font-weight: 600; color: var(--gris); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; background: var(--surface-2); }
.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. */
.vide {
  border: 1px dashed var(--trait-fort);
  border-radius: var(--rayon);
  padding: 1.1rem 1.3rem;
  color: var(--gris);
  background: var(--surface);
}
.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-radius: var(--rayon);
  background: var(--surface);
  padding: 1.4rem 1.6rem;
  margin-top: 1.75rem;
  box-shadow: var(--ombre);
}
.invitation h2 { margin-top: 0; font-size: 1.1rem; }

/* ── Boutons ────────────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--accent);
  color: var(--accent-texte);
  border: 1px solid transparent;
  border-radius: var(--rayon-pilule);
  padding: .55rem 1.05rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition), transform .1s;
}
.bouton:hover { background: var(--accent-fonce); color: var(--accent-texte); box-shadow: var(--ombre); }
.bouton:active { transform: translateY(1px); }
.bouton.secondaire { background: var(--surface); color: var(--encre); border-color: var(--trait); }
.bouton.secondaire:hover { background: var(--surface); border-color: var(--gris-clair); }
.bouton.discret { background: none; border-color: transparent; color: var(--gris); }
.bouton.discret:hover { background: var(--surface-2); color: var(--encre); box-shadow: none; }
.bouton.petit { padding: .35rem .8rem; font-size: .82rem; }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }
/* `button_to` génère un vrai formulaire : sans ça, le bouton s'afficherait sous la ligne. */
form.button_to { display: inline; margin: 0; }

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

.formulaire { max-width: 40rem; }
.champ { display: block; margin-bottom: 1rem; }
.champ > span { display: block; font-size: .84rem; font-weight: 500; color: var(--gris); margin-bottom: .3rem; }
.champ input, .champ select, .champ textarea, .recherche-page input[type="search"] {
  width: 100%;
  font: inherit;
  padding: .55rem .8rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  color: var(--encre);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ input:focus, .champ select:focus, .champ textarea:focus, .recherche-page input[type="search"]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-doux);
}
.champ textarea { min-height: 6rem; }
.champ .aide { display: block; font-size: .8rem; color: var(--gris); margin-top: .3rem; }
.erreurs { background: var(--alerte-fond); color: var(--alerte); border-radius: var(--rayon-petit); padding: .7rem 1rem; 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: var(--surface-2); border: 1px solid var(--trait); padding: .1rem .4rem; border-radius: 6px; font-size: .86em; }

/* ── Barre haute : collante, translucide ────────────────────────────────── */

.barre-session {
  position: sticky; top: 0; z-index: 30;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: var(--barre-hauteur);
  padding: .55rem 2rem;
  font-size: .88rem;
  color: var(--gris);
  background: rgba(255, 255, 255, .84);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--trait);
}
@media (max-width: 48rem) { .barre-session { padding: .5rem 1rem; flex-wrap: wrap; } }
/* Le mot-image de la gamme : « erp » en encre, le produit en accent. */
.barre-session .marque { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; text-decoration: none; color: var(--encre); margin-right: .5rem; }
.barre-session .marque em { font-style: normal; color: var(--accent); }
/* Les entrées : des pilules discrètes, l'entrée courante en encre. */
.barre-session .entree { text-decoration: none; color: var(--gris); font-weight: 500; padding: .4rem .8rem; border-radius: var(--rayon-pilule); transition: background var(--transition), color var(--transition); }
.barre-session .entree:hover, .barre-session .entree.actif { background: var(--surface-2); color: var(--encre); }
.barre-session .session { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.barre-session form { margin: 0; }
.barre-session .lien-nu {
  background: none; border: none; padding: .4rem .6rem; font: inherit; font-size: .88rem;
  color: var(--gris); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: var(--rayon-petit);
}
.barre-session .lien-nu:hover { color: var(--encre); }

/* Le champ de recherche de la barre : une pilule qui s'ouvre au focus. */
.recherche-barre { display: flex; margin: 0 .5rem 0 0; flex: 1; max-width: 26rem; }
.recherche-barre input[type="search"] {
  width: 100%;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-pilule);
  padding: .5rem 1rem;
  font: inherit;
  font-size: .88rem;
  background: var(--fond);
  color: var(--encre);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.recherche-barre input[type="search"]:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-doux); }

/* Messages de retour après une redirection. */
.message { padding: .7rem 2rem; font-size: .9rem; margin: 0; }
.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: var(--rayon-petit);
  padding: .7rem 1rem;
  font-size: .88rem;
  margin-bottom: 1.25rem;
}

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

.chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.chiffre { border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); padding: .85rem 1.1rem; }
.chiffre strong { display: block; font-size: 1.45rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; }
.chiffre span { color: var(--gris); font-size: .8rem; }

/* ── Recherche (page de résultats) ──────────────────────────────────────── */

.recherche-page { display: flex; gap: .5rem; margin: 1rem 0 1.5rem; }
.recherche-page input[type="search"] { flex: 1; }
.groupe-resultats { margin: 1.5rem 0; }
.groupe-resultats h2 { font-size: 1rem; margin-bottom: .5rem; }
.groupe-resultats h2 .meta { font-weight: 400; }
.resultats { list-style: none; padding: 0; margin: 0; }
.resultats li { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; padding: .55rem 0; border-bottom: 1px solid var(--trait); }
.resultats .detail { color: var(--gris); font-size: .87rem; }
.resultats .produit { margin-left: auto; color: var(--gris); font-size: .78rem; }

/* ── Cartes (MapLibre) : vocabulaire commun aux trois SaaS ──────────────── */
/* MapLibre GL (vendor/assets, licence BSD) avec le fond vectoriel clair
   « Positron » d'OpenFreeMap. Les épingles sont des éléments HTML : une
   PILULE nommée pour un siège (le nom du cabinet et le nombre d'agences), un
   POINT pour une agence, un petit rond pour un établissement du parc. */
.maplibregl-map { font: inherit; }
.maplibregl-ctrl-attrib { font-size: .7rem; }
.maplibregl-popup-content { border-radius: 12px; padding: .85rem 1rem; box-shadow: var(--ombre-forte); font: inherit; min-width: 14rem; color: var(--encre); }
.maplibregl-popup-close-button { font-size: 1.1rem; padding: .2rem .5rem; color: var(--gris); }
.bulle { font-size: .86rem; line-height: 1.45; }
.bulle-titre { display: block; font-weight: 700; font-size: .95rem; color: var(--encre); text-decoration: none; }
.bulle-titre:hover { color: var(--accent); }
.bulle .discret { display: block; }
.bulle-solutions, .bulle-usages { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0; }
.bulle-pastille { font-size: .74rem; font-weight: 600; padding: .15rem .55rem; border-radius: var(--rayon-pilule); background: var(--surface-2); border: 1px solid var(--trait); white-space: nowrap; }

.pilule {
  background: var(--surface); color: var(--encre);
  font: 600 .78rem/1 "Inter", system-ui, sans-serif; padding: .45rem .7rem; border-radius: var(--rayon-pilule);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .06);
  white-space: nowrap; cursor: pointer; transition: transform .12s, background .12s, color .12s;
}
.pilule small { font-weight: 500; color: var(--gris); margin-left: .25rem; }
.pilule:hover, .pilule.active { background: var(--encre); color: #fff; transform: scale(1.06); z-index: 2; }
.pilule:hover small, .pilule.active small { color: rgba(255, 255, 255, .75); }
.point { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 1.5px solid #fff; opacity: .85; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); cursor: pointer; }
.point-parc { width: 10px; height: 10px; border-radius: 50%; background: var(--parc, #1f4b7a); border: 1.5px solid #fff; opacity: .9; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); cursor: pointer; }
.epingle { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2.5px solid #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .35); }

/* Ce qui flotte sur une carte : légende, compteur, couches. */
.flottant { position: absolute; z-index: 5; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre); font-size: .8rem; padding: .45rem .75rem; }
.flottant.legende { bottom: .8rem; left: .8rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; }
.flottant.legende i, .carte-legende i, .legende-item i { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); margin-right: .35rem; vertical-align: -1px; }
.flottant.legende i.petit, .legende-agence i { width: .5rem; height: .5rem; border-width: 1px; opacity: .8; }
.flottant.legende i.parc { background: var(--parc, #1f4b7a); }
.flottant.compteur { top: .8rem; left: 50%; transform: translateX(-50%); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flottant.couches { top: .8rem; right: .8rem; padding: .3rem .4rem; display: flex; gap: .2rem; }
.flottant.couches button { border: 0; background: none; font: inherit; font-weight: 600; font-size: .78rem; padding: .3rem .6rem; border-radius: 8px; cursor: pointer; color: var(--gris); }
.flottant.couches button.actif { background: var(--encre); color: #fff; }
.carte-legende { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .82rem; margin: .5rem 0 .6rem; align-items: center; }
.legende-item { display: inline-flex; align-items: center; font-weight: 600; }
.legende-zones { display: inline-flex; align-items: center; gap: .2rem; color: var(--gris); }
.legende-zones i { width: 1rem; height: .7rem; display: inline-block; border-radius: 2px; }

/* ── La vue partagée : la liste à gauche, la carte collante à droite ────── */
.partage { max-width: 96rem; margin: 0 auto; padding: 1rem 2rem 3rem; display: grid; grid-template-columns: minmax(24rem, 44rem) 1fr; gap: 1.25rem; align-items: start; }
.partage-liste { display: flex; flex-direction: column; gap: .25rem; }
.partage-tete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--gris); font-size: .86rem; padding: .25rem .25rem .6rem; }
.partage-tete b { color: var(--encre); font-weight: 600; }
.carte-collante { position: sticky; top: calc(var(--barre-hauteur) + 1rem); height: calc(100vh - var(--barre-hauteur) - 2rem); min-height: 30rem; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--trait); box-shadow: var(--ombre); background: #e9eef2; }
.carte-collante .carte-fond { position: absolute; inset: 0; }
@media (max-width: 64rem) {
  .partage { grid-template-columns: 1fr; padding: 1rem 1rem 3rem; }
  .carte-collante { position: relative; top: 0; height: 22rem; min-height: 0; order: -1; }
}

/* Une fiche de résultat : la vignette (la zone d'intervention sur la France)
   à gauche, le contenu à droite. Survolée depuis la carte : `.active`. */
.fiche-resultat {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 1rem;
  border-radius: var(--rayon); border: 1px solid transparent; background: transparent; cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.fiche-resultat:hover, .fiche-resultat.active { box-shadow: var(--ombre-forte); border-color: var(--trait); background: var(--surface); }
.fiche-resultat h2 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fiche-resultat h2 a { color: var(--encre); text-decoration: none; }
.fiche-resultat h2 a:hover { color: var(--accent); }
.fiche-resultat .pays { margin-left: auto; font-size: .74rem; font-weight: 700; color: var(--gris); letter-spacing: .06em; }
.fiche-resultat .lieu { color: var(--gris); font-size: .88rem; margin: .1rem 0 .5rem; font-variant-numeric: tabular-nums; }
.fiche-resultat .solutions { display: flex; flex-wrap: wrap; gap: .35rem; }
.fiche-resultat .zone { margin-top: .5rem; font-size: .84rem; color: var(--gris); }
.fiche-resultat .zone b { color: var(--encre); font-weight: 600; }
.fiche-resultat .bas { margin-top: .55rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .82rem; color: var(--gris); }
.fiche-resultat .bas a { font-weight: 600; }
@media (max-width: 30rem) { .fiche-resultat { grid-template-columns: 5.5rem 1fr; } }

/* La vignette : une silhouette de la France (voir shared/_silhouette_france),
   ses régions couvertes en accent, son siège en point. Une donnée, pas une image. */
.vignette { position: relative; aspect-ratio: 1; border-radius: 10px; background: var(--surface-2); overflow: hidden; display: grid; place-items: center; --vignette-fond: #e3e7ec; }
.vignette svg { width: 88%; height: 88%; }
.vignette svg path { stroke: #fff; stroke-width: .6; }
.vignette .siege { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--encre); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transform: translate(-50%, -50%); }
.vignette .etiquette { position: absolute; left: .4rem; top: .4rem; background: var(--surface); border-radius: 6px; padding: .12rem .4rem; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; box-shadow: var(--ombre); color: var(--accent); }
.vignette .hors { font-size: .74rem; color: var(--gris); text-align: center; padding: .6rem; line-height: 1.3; }
.vignette .hors b { display: block; font-size: 1rem; color: var(--encre); }

/* ── La rangée de puces (filtres) sous la barre ─────────────────────────── */
/* Les filtres restent des LIENS (rendu serveur, indexables). Les valeurs les
   plus utiles sont visibles ; les autres derrière un menu natif <details>. */
.puces { position: sticky; top: var(--barre-hauteur); z-index: 20; background: rgba(245, 247, 249, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--trait); }
.puces-rangee { max-width: 96rem; margin: 0 auto; padding: .7rem 2rem; display: flex; align-items: center; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
.puces-rangee::-webkit-scrollbar { display: none; }
.puce, .puces summary {
  flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: var(--rayon-pilule);
  border: 1px solid var(--trait); background: var(--surface); font-weight: 500; font-size: .86rem; color: var(--encre); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.puce:hover, .puces summary:hover { border-color: var(--gris-clair); box-shadow: var(--ombre); color: var(--encre); }
.puce.active { background: var(--encre); color: #fff; border-color: var(--encre); }
.puce small { color: var(--gris-clair); font-weight: 600; font-variant-numeric: tabular-nums; }
.puce.active small { color: rgba(255, 255, 255, .7); }
.puce .retirer { opacity: .7; font-weight: 700; margin-left: .1rem; }
.puces details { position: relative; flex: none; }
.puces summary { list-style: none; }
.puces summary::-webkit-details-marker { display: none; }
.puces summary::after { content: ""; width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; margin-left: .1rem; }
.puces details[open] summary { border-color: var(--encre); }
.puces .menu { position: absolute; top: calc(100% + .4rem); left: 0; z-index: 25; min-width: 14rem; max-height: 22rem; overflow-y: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre-forte); padding: .4rem; }
.puces .menu a, .puces .menu .inactif { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .7rem; border-radius: 8px; text-decoration: none; color: var(--encre); font-size: .88rem; }
.puces .menu a:hover { background: var(--surface-2); }
.puces .menu a.actif { background: var(--accent-doux); color: var(--accent); font-weight: 600; }
.puces .menu small { color: var(--gris-clair); font-variant-numeric: tabular-nums; font-weight: 600; }
.puces .menu .inactif { color: var(--gris-clair); }
.puces .menu .discret { padding: .45rem .7rem; }
.puces .separateur { width: 1px; height: 1.4rem; background: var(--trait); flex: none; margin: 0 .2rem; }
.puces .fin { margin-left: auto; flex: none; display: flex; gap: .5rem; align-items: center; color: var(--gris); font-size: .84rem; white-space: nowrap; }

/* ── La page carte (plein écran) ────────────────────────────────────────── */
body.plein-ecran { height: 100vh; display: flex; flex-direction: column; }
body.plein-ecran .page { max-width: none; padding: 0; margin: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.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.25rem 2rem; background: var(--surface); font-size: .9rem; }
.carte-panneau .fil { margin: 0 0 .4rem; }
.carte-titre { font-size: 1.15rem; margin: 0 0 .8rem; letter-spacing: -.02em; }
.carte-sous-titre { font-size: .92rem; margin: 1rem 0 .3rem; }
.carte-fond { min-height: 20rem; background: #e9eef2; position: relative; }
@media (max-width: 48rem) {
  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); }
}
.carte-filtres .champ { margin-bottom: .7rem; }
.carte-filtres select { width: 100%; }
.champs-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.carte-panneau .case, .case { display: flex; align-items: center; gap: .45rem; font-size: .85rem; margin: .35rem 0; }
.carte-filtres .actions { margin: .6rem 0 .2rem; display: flex; gap: .5rem; }
.carte-panneau .jetons { margin: .5rem 0; }
.carte-compteur { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin: .8rem 0 .2rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.carte-note:empty { display: none; }
.carte-resultats { list-style: none; padding: 0; margin: 0; }
.carte-resultats .resultat { padding: .6rem .5rem; margin: 0 -.5rem; border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; gap: .15rem; transition: background var(--transition); }
.carte-resultats .resultat:hover, .carte-resultats .resultat.active { background: var(--surface-2); }
.carte-resultats .resultat-nom { font-weight: 600; }
.carte-resultats .resultat-solutions { display: flex; flex-wrap: wrap; gap: .25rem; }
.carte-resultats .resultat-solutions:empty { display: none; }

/* La fiche : texte à gauche, petite carte à droite 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: 20rem; border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); position: relative; }

/* ── Propre à erpeditors ─────────────────────────────────────────────────── */

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

.selecteur {
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--ombre);
}
.cases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .4rem 1rem;
  margin: .75rem 0 1rem;
}
.cases .case { display: flex; align-items: baseline; gap: .5rem; font-size: .9rem; margin: 0; }
.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: var(--accent-doux);
  color: var(--encre);
  font-size: .74rem;
  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;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 6px;
}
.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; }

/* La carte d'un éditeur (encart sur la fiche) et l'aperçu en tête de liste. */
.carte-editeur { margin: 1rem 0 2rem; }
.carte-editeur-barre { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; margin-bottom: .6rem; font-size: .9rem; }
.carte-editeur-barre select { border: 1px solid var(--trait); border-radius: var(--rayon-petit); padding: .4rem .6rem; font: inherit; font-size: .88rem; background: var(--surface); margin-left: .3rem; }
.carte-editeur-barre .case { display: inline-flex; margin: 0; }
.carte-editeur-fond { height: 30rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: #e9eef2; position: relative; overflow: hidden; box-shadow: var(--ombre); }
.apercu-carte { margin: 0 0 1.5rem; }
.apercu-carte-fond { height: 22rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: #e9eef2; position: relative; overflow: hidden; box-shadow: var(--ombre); }
.apercu-carte-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin: .5rem 0 0; font-size: .85rem; color: var(--gris); }
.apercu-carte-pied .carte-legende { margin: 0; }