/* ── Coche « Professionnel vérifié » (2026-09-15, feuille à part le 16/09) ──
   Le seul marqueur pro du site : disque vert + coche, à la suite du nom.
   Macro : templates/_coche_pro.html. Trois tailles ; --texte = coche + libellé
   visible (tableau de bord) ; --bouton = la coche de la vitrine qui ouvre
   l'infobulle (static/js/coche-pro.js).

   Feuille SÉPARÉE parce que le composant est partagé entre deux mondes qui
   ne chargent pas la même feuille : le site public et la vitrine (style.css)
   et l'espace pro (admin.css). Tant que ces règles vivaient dans style.css,
   la coche du tableau de bord n'avait AUCUN style : le svg sans largeur
   prenait 129 px (constat du 16/09). Chargée par base.html,
   artisan/base_artisan.html et collectivite_dashboard.html ; filet :
   tests/test_coche_pro.py. Ne pas recopier ces règles ailleurs. */
.coche-pro {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; vertical-align: middle; box-sizing: border-box;
  border-radius: 50%; background: #2A5A38; color: #fff; border: 0; padding: 0;
  margin-left: .3rem; line-height: 1;
}
.coche-pro svg { width: 58%; height: 58%; display: block; }
.coche-pro--xs { width: 14px; height: 14px; }
.coche-pro--sm { width: 16px; height: 16px; }
.coche-pro--md { width: 20px; height: 20px; margin-left: .4rem; vertical-align: .2em; }
/* Libellé lecteur d'écran (le title ne suffit pas). */
.coche-pro-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Variante avec le libellé visible (tableau de bord) : coche + texte. */
.coche-pro--texte {
  width: auto; height: auto; border-radius: 999px; background: #EAF2EE; color: #2A5A38;
  gap: .3rem; padding: .18rem .6rem .18rem .35rem; font-size: .74rem; font-weight: 600;
  letter-spacing: .01em;
}
.coche-pro--texte svg { width: 14px; height: 14px; background: #2A5A38; color: #fff; border-radius: 50%; padding: 3px; box-sizing: border-box; }
/* La coche-bouton de la vitrine : icône de 20px, cible tactile de 44px
   (pseudo-élément qui déborde de 12px de chaque côté, sans bouger la mise
   en page). */
.coche-pro--bouton { cursor: pointer; font: inherit; }
.coche-pro--bouton::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; }
.coche-pro--bouton:focus-visible { outline: 2px solid var(--accent-fonce, #8A4B1F); outline-offset: 3px; }
.coche-pro--bouton[aria-expanded="true"] { box-shadow: 0 0 0 3px #EAF2EE; }
/* Infobulle ancrée sous la coche (position calculée par le script). */
.coche-pro-bulle {
  position: fixed; z-index: 60; width: max-content; max-width: min(300px, calc(100vw - 16px));
  background: #fff; color: var(--ink); border: 0.5px solid var(--rule);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.14);
  padding: .8rem .95rem .75rem; font-family: var(--sans); font-size: .84rem; line-height: 1.45;
  --fleche-x: 50%;
}
.coche-pro-bulle::before {
  content: ''; position: absolute; top: -6px; left: var(--fleche-x); width: 10px; height: 10px;
  margin-left: -5px; background: #fff; border-left: 0.5px solid var(--rule); border-top: 0.5px solid var(--rule);
  transform: rotate(45deg);
}
.coche-pro-bulle:focus { outline: none; }
.coche-pro-bulle p { margin: 0; }
.coche-pro-bulle-titre { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: #2A5A38; margin-bottom: .2rem; }
.coche-pro-bulle-titre .coche-pro { margin-left: 0; }
.coche-pro-bulle-texte { color: var(--ink-mid); font-size: .8rem; }
.coche-pro-bulle-lien {
  display: inline-block; margin-top: .55rem; color: var(--accent-fonce, #8A4B1F); font-weight: 600;
  text-decoration: none; border-bottom: 1px solid currentColor; line-height: 1.2;
}
.coche-pro-bulle-lien:hover { color: var(--accent); }