/* [FLYERS-V2 2026-06-11] encarts-qr-v2.css
 * CSS ADDITIF du module « Mes QR codes » v2 (écran 2 blocs).
 * Ne remplace RIEN : s'ajoute après encarts-qr.css / encarts-qr-patch.css.
 * Réutilise les tokens de encarts-qr.css (--qr-*). Aucune couleur métier nouvelle.
 * Violet boîtage/flyers : #7c3aed (var --qr-primary-500). Logos officiels = teintes propres (#4b00e8…).
 */

.eqrv2-intro { margin: 0 0 16px; }

.eqrv2-blocks { display: grid; gap: 16px; }

.eqrv2-block {
  position: relative; /* [FLYER3] ancre du ⓘ */
  padding: 16px;
  border: 1px solid var(--qr-neutral-100, #e2e8f0);
  border-radius: var(--qr-radius-lg, 20px);
  background: var(--qr-neutral-0, #fff);
  box-shadow: var(--qr-shadow-sm, 0 1px 2px rgba(15,23,42,.06));
}

/* [FLYER3 2026-06-12] (I) ⓘ tenants et aboutissants de chaque démarche */
.eqrv2-ibtn {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--qr-neutral-100, #e2e8f0);
  background: #fff; color: var(--qr-neutral-500, #64748b);
  font: 800 13px/24px var(--qr-font, system-ui); cursor: pointer; padding: 0;
}
.eqrv2-info {
  margin-top: 12px; display: grid; gap: 8px;
  padding: 12px; border-radius: 12px;
  background: var(--qr-neutral-25, #f8fafc);
  border: 1px solid var(--qr-neutral-100, #e2e8f0);
}
.eqrv2-info-row { display: grid; gap: 2px; }
.eqrv2-info-row .k {
  font: 700 11px/14px var(--qr-font, system-ui);
  color: var(--qr-primary-600, #6d28d9); text-transform: uppercase; letter-spacing: .04em;
}
.eqrv2-info-row .v { font: 500 12.5px/17px var(--qr-font, system-ui); color: var(--qr-neutral-700, #334155); }

.eqrv2-block-head {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--qr-neutral-100, #e2e8f0);
}

/* Logo officiel EN GRAND — fini les 17px/14px illisibles (B-G3 du test UX). */
.eqrv2-logo {
  width: 96px; height: 96px; flex: 0 0 96px;
  border-radius: 16px; display: block;
  background: #fff;
}

/* QR réel du compte — grand et net. */
.eqrv2-qr-slot {
  width: 120px; height: 120px; flex: 0 0 120px; margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; overflow: hidden;
  background: #fff; border: 1px solid var(--qr-neutral-100, #e2e8f0);
}
.eqrv2-qr-canvas { width: 112px; height: 112px; image-rendering: pixelated; display: block; }
.eqrv2-qr-skeleton { width: 112px; height: 112px; border-radius: 8px; }
.eqrv2-qr-err { text-align: center; display: grid; gap: 8px; padding: 6px; }

.eqrv2-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.eqrv2-actions .qr-btn { flex: 1 1 auto; }

.eqrv2-link {
  background: none; border: none; cursor: pointer; padding: 4px 0;
  font: 600 13px/18px var(--qr-font, system-ui);
  color: var(--qr-primary-600, #6d28d9);
}
.eqrv2-link:hover { text-decoration: underline; }
.eqrv2-transparent { display: inline-block; margin-top: 8px; font-weight: 500; color: var(--qr-neutral-500, #64748b); }

.eqrv2-foot-links { display: flex; align-items: center; gap: 8px; }
.eqrv2-dot { color: var(--qr-neutral-300, #cbd5e1); }

.eqrv2-copies { margin-top: 12px; display: grid; gap: 8px; }
.eqrv2-copy-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--qr-neutral-25, #f8fafc);
  border: 1px solid var(--qr-neutral-100, #e2e8f0);
}
.eqrv2-copy-text { flex: 1; font: 500 13px/18px var(--qr-font, system-ui); color: var(--qr-neutral-700, #334155); }
.eqrv2-copy-btn {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  background: #fff; border: 1px solid var(--qr-neutral-300, #cbd5e1);
  font-size: 16px; line-height: 34px;
}
.eqrv2-copy-btn:hover { background: var(--qr-neutral-25, #f8fafc); }

.eqrv2-footnote { margin: 18px 2px 0; text-align: center; }

@media (max-width: 359px) {
  .eqrv2-block-head { flex-wrap: wrap; }
  .eqrv2-qr-slot { margin-left: 0; }
}


/* ==========================================================================
   [TRAIN3DESIGN 2026-06-12] (O) Signaux reçus v2 — statuts simples, prospect
   chaud, coordonnées mises en avant. Émeraude #059669 = couleur canonique des
   Signaux QR (ratifiée Nicolas 12-06). Additif : aucun style existant modifié.
   ========================================================================== */
.qr-kpi-card--total { background: #ecfdf5; color: #047857; }
.qr-kpi-card--new { background: #059669; color: #fff; }
.qr-badge.eqr-sig-new { background: #059669; color: #fff; }
.qr-badge.eqr-sig-done { background: #e2e8f0; color: #475569; }
.eqr-flex-wrap { flex-wrap: wrap; }
.eqr-sig-contact { margin-top: 10px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; padding: 8px 10px; }
.eqr-sig-contact-k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #047857; }
.eqr-sig-contact-v { font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.eqr-sig-contact-v a { color: #047857; text-decoration: none; }
.qr-lead-card.is-treated { opacity: .58; }
.qr-lead-card .qr-btn--primary.eqr-sig-call { background: #059669; border-color: #059669; color: #fff; }
.qr-lead-card .qr-btn--primary.eqr-sig-call:hover { background: #047857; border-color: #047857; }


/* ==========================================================================
   [DEMANDEFICHE 2026-06-14] (O) Fiche d'une demande (signal QR) — vraie fiche
   actionnable terrain. Famille flyers/Signaux = VIOLET #7c3aed (code_couleur.md
   13-06) via les tokens natifs --qr-primary-*. La carte de liste devient un
   aperçu cliquable. Additif : aucun style existant modifié.
   ========================================================================== */
.qr-lead-card[data-open-fiche] { cursor: pointer; transition: box-shadow .15s, transform .05s; }
.qr-lead-card[data-open-fiche]:hover { box-shadow: 0 2px 10px rgba(124,58,237,.14); }
.qr-lead-card[data-open-fiche]:active { transform: scale(.997); }
.qr-lead-card[data-open-fiche]:focus-visible { outline: 2px solid var(--qr-primary-500, #7c3aed); outline-offset: 2px; }

.eqr-df-back {
  background: none; border: none; cursor: pointer; padding: 4px 0 12px;
  font: 600 13.5px/18px var(--qr-font, system-ui);
  color: var(--qr-primary-600, #6d28d9);
}
.eqr-df-back:hover { text-decoration: underline; }

.eqr-df-head {
  padding: 16px; border-radius: var(--qr-radius-lg, 20px);
  background: linear-gradient(160deg, #faf5ff, #f3e8ff);
  border: 1px solid #e9d5ff;
}
.eqr-df-eyebrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.eqr-df-title { font: 800 19px/25px var(--qr-font, system-ui); color: var(--qr-neutral-900, #0f172a); margin-top: 8px; }
.eqr-df-sub { font: 500 12.5px/17px var(--qr-font, system-ui); color: var(--qr-neutral-500, #64748b); margin-top: 4px; }
.eqr-df-noloc { font: 500 13px/19px var(--qr-font, system-ui); color: var(--qr-neutral-700, #334155); }

.eqr-df-section {
  margin-top: 14px; padding: 14px; border-radius: var(--qr-radius-md, 16px);
  background: #fff; border: 1px solid #e9d5ff;
}
.eqr-df-section--muted { background: var(--qr-neutral-25, #f8fafc); border-color: var(--qr-neutral-100, #e2e8f0); }
.eqr-df-section-h {
  font: 700 11px/15px var(--qr-font, system-ui); text-transform: uppercase; letter-spacing: .4px;
  color: var(--qr-primary-600, #6d28d9); display: flex; align-items: center; gap: 6px;
}
.eqr-df-section--muted .eqr-df-section-h { color: var(--qr-neutral-500, #64748b); }
.eqr-df-contact-name { font: 700 16px/22px var(--qr-font, system-ui); color: var(--qr-neutral-900, #0f172a); margin-top: 6px; }
.eqr-df-contact-line { font: 600 14px/20px var(--qr-font, system-ui); color: var(--qr-neutral-700, #334155); margin-top: 2px; }
.eqr-df-info {
  background: none; border: none; cursor: pointer; padding: 0; line-height: 1;
  color: var(--qr-neutral-400, #94a3b8); font-size: 14px;
}
.eqr-df-noinfo {
  margin-top: 8px; font: 500 12.5px/18px var(--qr-font, system-ui);
  color: var(--qr-neutral-700, #334155);
  background: #fff; border: 1px solid var(--qr-neutral-100, #e2e8f0);
  border-radius: 10px; padding: 8px 10px;
}
.eqr-df-terrain { margin-top: 8px; font: 600 13px/19px var(--qr-font, system-ui); color: var(--qr-neutral-700, #334155); }