/* LECTURES zIA DES ÉCRANS V5 — briques communes (include/js/zia-insight.js). Les quatre blocs
 * (fiche page, Leads, tableau de bord consultant, zIA Overview) posent leur mise en page dans
 * leur propre feuille ; ici, seulement ce qu'ils partagent : la marque zIA, le constat à
 * gravité des maquettes 04 et Leads, le squelette de génération, les boutons et les notes.
 * Couleurs : jetons V5 seulement (violet = zIA, cf. README de la charte). */

/* `* { color; font-size }` de common.css repeint chaque élément : sans ces deux règles, les
   pictogrammes (stroke="currentColor") perdent la couleur de leur gravité et les liens des
   constats prennent la taille globale. */
.zi_item svg, .zi_item svg *, .zi_pill svg, .zi_pill svg *, .zi_btn svg, .zi_btn svg * { color: inherit; }
.zi_item_t a { font-size: inherit; }

/* La marque : pastille dégradée des maquettes 05 / 03. */
.zi_badge {
	height: 24px; padding: 0 9px; flex: none; display: inline-flex; align-items: center;
	border-radius: 7px; background: linear-gradient(135deg, var(--accent), var(--violet));
	color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
/* La marque « douce » des maquettes 04 et Leads : étincelle + zIA sur lavis violet. */
.zi_pill {
	height: 26px; padding: 0 11px; flex: none; display: inline-flex; align-items: center; gap: 7px;
	border-radius: 8px; background: var(--violet-soft); color: var(--violet);
	font-size: 12px; font-weight: 700; letter-spacing: .06em;
}

/* Le constat à gravité. */
.zi_items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.zi_item {
	display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px;
	border-radius: 12px; background: var(--surface2);
}
.zi_item_i {
	width: 20px; height: 20px; flex: none; margin-top: 2px; border-radius: 6px;
	display: flex; align-items: center; justify-content: center;
}
.zi_item_c { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.zi_sev {
	height: 19px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 5px;
	font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px;
}
.zi_item_t { font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--text); text-wrap: pretty; }
.zi_item_t a { color: inherit; text-decoration: none; font-weight: 600; }
.zi_item_t a:hover { color: var(--accent); }
.zi_item_w { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; margin-top: 3px; text-wrap: pretty; }
.zi_sev_critique .zi_item_i, .zi_sev_critique .zi_sev { background: var(--violet-soft); color: var(--violet); }
.zi_sev_attention .zi_item_i, .zi_sev_attention .zi_sev { background: var(--neutral-soft); color: var(--text-mid); }
.zi_sev_opportunite .zi_item_i, .zi_sev_opportunite .zi_sev { background: var(--aqua-soft); color: var(--aqua); }

/* Le squelette pendant la génération (jusqu'à une minute). */
.zi_skels { display: flex; flex-direction: column; gap: 10px; }
.zi_skel {
	display: block; height: 12px; border-radius: 6px;
	background: linear-gradient(90deg, var(--chip) 0%, var(--line) 50%, var(--chip) 100%);
	background-size: 200% 100%; animation: zi_shimmer 1.4s ease-in-out infinite;
}
@keyframes zi_shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .zi_skel { animation: none; } }

/* Boutons et notes. */
.zi_btn {
	height: 30px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border: 0;
	border-radius: 9px; background: var(--chip); color: var(--text-mid); font: inherit;
	font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
	transition: background .14s, color .14s;
}
.zi_btn:hover { background: var(--accent-soft); color: var(--accent); }
.zi_btn_zia { background: var(--violet-soft); color: var(--violet); }
.zi_btn_zia:hover { background: var(--violet); color: #fff; }
.zi_btn[disabled] { opacity: .5; cursor: default; pointer-events: none; }
.zi_note { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; }
.zi_err { font-size: 12px; color: var(--text-mid); line-height: 1.5; }
.zi_gen { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--violet); font-weight: 600; }
.zi_gen::before {
	content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--violet);
	animation: zi_pulse 1.1s ease-in-out infinite;
}
@keyframes zi_pulse { 50% { opacity: .25; } }