/* ==================================================
   Composants partagés — pages /ressources/ (veille-ua,
   veille-schema-org, changelog-core-updates).

   Factorise les patterns communs (alertes, KPIs, source,
   section-en-tete, chips) sans renommer les classes HTML :
   chaque règle liste les 3 préfixes existants.
   ================================================== */

/* --- Alertes (ok / warning) --- */
.veille-ua-alerte,
.schema-org-alerte,
.core-updates-alerte {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.75rem;
    font-size: 0.95rem;
}
.veille-ua-alerte-ok,
.schema-org-alerte-ok,
.core-updates-alerte-ok {
    background: #e6f7ef;
    color: #0d7a4d;
    border: 1px solid #b7e4cf;
}
.veille-ua-alerte-warning,
.schema-org-alerte-warning,
.core-updates-alerte-warning {
    background: var(--brand-gold-light, #fef4e0);
    color: #8a5a12;
    border: 1px solid #f0c675;
}

/* --- Source (bloc origine des données) --- */
.veille-ua-source-en-tete,
.schema-org-source-en-tete,
.core-updates-source-en-tete {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.veille-ua-source-en-tete > .bi,
.schema-org-source-en-tete > .bi,
.core-updates-source-en-tete > .bi {
    font-size: 2.25rem;
    color: var(--brand-dark);
}
.veille-ua-source h2,
.schema-org-source h2,
.core-updates-source h2 {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
}
.veille-ua-source p,
.schema-org-source p,
.core-updates-source p {
    margin: 0;
    color: var(--text-secondary, #555);
}
.veille-ua-source code,
.schema-org-source code {
    background: rgba(0, 76, 76, 0.07);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}
.veille-ua-source-meta,
.schema-org-source-meta,
.core-updates-source-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
.veille-ua-meta-label,
.schema-org-meta-label,
.core-updates-meta-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #777);
    margin-bottom: 0.25rem;
    font-weight: 600;
}
.veille-ua-meta-valeur,
.schema-org-meta-valeur,
.core-updates-meta-valeur {
    font-weight: 600;
    color: var(--brand-dark);
    text-decoration: none;
}
a.veille-ua-meta-valeur:hover,
a.schema-org-meta-valeur:hover,
a.core-updates-meta-valeur:hover {
    color: var(--brand-teal);
}
.veille-ua-admin-refresh,
.schema-org-admin-refresh,
.core-updates-admin-refresh {
    margin-top: 1rem;
}

/* --- KPIs (grille + carte valeur/label/aide) --- */
.veille-ua-kpis,
.schema-org-kpis,
.core-updates-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.veille-ua-kpi,
.schema-org-kpi,
.core-updates-kpi {
    text-align: center;
    padding: 1.25rem 1rem;
}
.veille-ua-kpi-valeur,
.schema-org-kpi-valeur,
.core-updates-kpi-valeur {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--brand-dark);
    line-height: 1.1;
    word-break: break-word;
}
/* Override léger pour schema-org (tags de version parfois longs) */
.schema-org-kpi-valeur { font-size: 1.95rem; }

.veille-ua-kpi-label,
.schema-org-kpi-label,
.core-updates-kpi-label {
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 0.35rem;
}
.veille-ua-kpi-aide,
.schema-org-kpi-aide,
.core-updates-kpi-aide {
    font-size: 0.8rem;
    color: var(--text-muted, #777);
    margin-top: 0.35rem;
}

/* --- Section header (titre + aide) --- */
.veille-ua-section-en-tete,
.schema-org-section-en-tete,
.core-updates-section-en-tete {
    margin-bottom: 1rem;
}
.veille-ua-section-en-tete h2,
.schema-org-section-en-tete h2,
.core-updates-section-en-tete h2 {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.veille-ua-section-en-tete h2 .bi,
.schema-org-section-en-tete h2 .bi,
.core-updates-section-en-tete h2 .bi {
    color: var(--brand-teal);
}
.veille-ua-section-aide,
.schema-org-section-aide,
.core-updates-section-aide {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-secondary, #555);
}

/* --- Chips de filtre (pastilles type) --- */
.veille-ua-filtres-chips,
.core-updates-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.veille-ua-chip,
.core-updates-chip {
    --chip-color: var(--brand-teal);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1.5px solid var(--chip-color);
    background: transparent;
    color: var(--chip-color);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-family: inherit;
}
.veille-ua-chip:hover,
.core-updates-chip:hover {
    background: color-mix(in srgb, var(--chip-color) 10%, transparent);
}
.veille-ua-chip-actif,
.core-updates-chip-actif {
    background: var(--chip-color);
    color: #fff;
}
.veille-ua-chip[data-filtre-type="tous"],
.core-updates-chip[data-filtre-type="tous"] {
    --chip-color: var(--brand-dark);
}

/* --- Modal détail (gantt, timeline, etc.) --- */
.veille-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 30, 30, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.veille-modal-overlay[data-visible="true"] {
    opacity: 1;
}
.veille-modal {
    position: relative;
    background: #fff;
    color: var(--brand-anthracite);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    border-radius: 1rem;
    border: 1px solid rgba(226, 232, 240, 1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(8px);
    transition: transform 0.18s ease;
}
.veille-modal-overlay[data-visible="true"] .veille-modal {
    transform: translateY(0);
}
.veille-modal-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.veille-modal-titre {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-dark);
    line-height: 1.3;
}
.veille-modal-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}
.veille-modal-fermeture {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-muted, #777);
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.veille-modal-fermeture:hover,
.veille-modal-fermeture:focus-visible {
    background: rgba(0, 0, 0, 0.05);
    color: var(--brand-dark);
    outline: none;
}
.veille-modal-corps {
    padding: 1rem 1.25rem;
    font-size: 0.92rem;
    line-height: 1.55;
}
.veille-modal-corps > * + * {
    margin-top: 0.75rem;
}
.veille-modal-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}
.veille-modal-champ-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #777);
    margin-bottom: 0.2rem;
    font-weight: 600;
}
.veille-modal-champ-valeur {
    font-weight: 600;
    color: var(--brand-dark);
}
.veille-modal-resume {
    margin: 0;
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.55;
}
.veille-modal-indicateur {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.veille-modal-indicateur-court   { background: #e6f7ef; color: #0d7a4d; }
.veille-modal-indicateur-moyen   { background: #fef4e0; color: #8a5a12; }
.veille-modal-indicateur-long    { background: #fde2e2; color: #b42323; }
.veille-modal-liste {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
}
.veille-modal-liste-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: rgba(102, 178, 178, 0.04);
}
.veille-modal-liste-item a {
    color: var(--brand-dark);
    text-decoration: none;
    font-weight: 600;
}
.veille-modal-liste-item a:hover { color: var(--brand-teal); }
.veille-modal-pied {
    padding: 0.9rem 1.25rem 1.1rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

[data-theme="dark"] .veille-modal {
    background: var(--bg-card-alt);
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="dark"] .veille-modal-titre { color: var(--text-primary); }
[data-theme="dark"] .veille-modal-fermeture { color: var(--text-secondary); }
[data-theme="dark"] .veille-modal-fermeture:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .veille-modal-champ-label,
[data-theme="dark"] .veille-modal-resume { color: var(--text-secondary); }
[data-theme="dark"] .veille-modal-champ-valeur { color: var(--text-primary); }
[data-theme="dark"] .veille-modal-liste-item {
    background: rgba(102, 178, 178, 0.08);
    border-color: var(--border-color);
}