/* ═══════════════════════════════════════════════════════════════════════════
   ev-pro-polish-v307.css  —  2026-05-30
   ───────────────────────────────────────────────────────────────────────────
   FINITION PRO v307 — netteté typographique + cohérence, PORTÉE GLOBALE.
   ───────────────────────────────────────────────────────────────────────────
   Audit complet 2026-05-30 : données saines, 0 endpoint/bouton mort. Ce volet
   ne touche QUE l'esthétique (CSS), zéro logique métier.

   Différence avec v305/v306 (scopés `body:has(#p-app.on)` = app staff) :
   v307 s'applique AUSSI à l'espace client (PWA membre) et à l'accueil, pour une
   identité visuelle homogène et premium partout.

   Chargé EN DERNIER → gagne la cascade.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   §1. NETTETÉ TYPOGRAPHIQUE GLOBALE — rendu crisp « app native »
   ═══════════════════════════════════════════════════════════════════════════ */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Titres : interlettrage resserré pour un rendu pro (sans toucher la taille). */
h1, h2, h3, .cd-h, .mdt, .acard-h, .bi-card-h, .tbd-card-h {
  text-rendering: optimizeLegibility;
  letter-spacing: -.01em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §2. MONTANTS — chiffres tabulaires + ligatures off PARTOUT (app + client)
   ───────────────────────────────────────────────────────────────────────────
   Stabilise l'alignement vertical des montants (les colonnes de DH ne
   « dansent » plus quand les chiffres changent). Couvre aussi l'espace client.
   ═══════════════════════════════════════════════════════════════════════════ */
.kv, .kpi-val, .kpi, .opca, .tbd-card-value, .bh-am,
.mbrs-stat-val, .tbl2 td, .tbl2 th,
[class*="amt"], [class*="-amt"], [class*="solde"], [class*="-mont"],
.ev-money, .mb-solde, .mb-pts, #tb-pts {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §3. CONFORT DE LECTURE — corps de texte & interlignage
   ═══════════════════════════════════════════════════════════════════════════ */
body { line-height: 1.5; }
/* Empêche les débordements de mots longs (emails, codes) qui cassent les cartes. */
.cd, .md, .bi-card, .acard, .tbd-card, .ev-card,
.cr, .hi-item, td, .bx-i, .bx-w, .bx-ok, .bx-e, .bx-s {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §4. INTERACTION TACTILE — cibles confortables (mobile pro)
   ───────────────────────────────────────────────────────────────────────────
   Retire le flash bleu de tap sur mobile + garantit des zones cliquables
   confortables sur les boutons d'action (≥ 40px), sans changer leur style.
   ═══════════════════════════════════════════════════════════════════════════ */
* { -webkit-tap-highlight-color: rgba(34,211,238,.18); }
button, .btn, [role="button"], .evcx-side, .evcx-bn, .pc[onclick] {
  -webkit-touch-callout: none;
  touch-action: manipulation;            /* supprime le délai de 300ms */
}
@media (pointer: coarse) {
  .btn, button.btn { min-height: 40px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §5. IMAGES & MÉDIAS — jamais de débordement, rendu net
   ═══════════════════════════════════════════════════════════════════════════ */
img, svg, canvas { max-width: 100%; }
img { height: auto; }


/* ═══════════════════════════════════════════════════════════════════════════
   §6. COHÉRENCE DES ANGLES — rayon homogène sur les surfaces principales
   (uniquement dans l'app staff pour ne pas perturber l'accueil/PWA client)
   ═══════════════════════════════════════════════════════════════════════════ */
body:has(#p-app.on) .bx-i,
body:has(#p-app.on) .bx-w,
body:has(#p-app.on) .bx-ok,
body:has(#p-app.on) .bx-e,
body:has(#p-app.on) .bx-s {
  border-radius: 12px !important;
}
/* Pills de statut (.tg) : padding homogène + ne se compriment pas. */
body:has(#p-app.on) .tg {
  padding: 4px 11px !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §7. SCROLL FLUIDE + ancrage (UX pro), respect reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .scrl, .pw2 { scroll-behavior: smooth; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §8. SÉLECTION DE TEXTE — cohérente sur toute l'app (pas seulement #p-app)
   ═══════════════════════════════════════════════════════════════════════════ */
::selection { background: rgba(34,211,238,.28); }


/* Fin du fichier — ev-pro-polish-v307.css */