/* ─────────────────────────────────────────────────────────────────────────────
   Cartes du fil de Marie — le langage de la vitrine ds.popi.nz
   ─────────────────────────────────────────────────────────────────────────────
   Retour Sylvain (12/10/2026) : « faut vraiment reprendre toutes les cards de
   Marie, le DS est dans ds.popi.nz, et la barre colorée c'est de l'AI slop ».

   Le langage visuel de la vitrine (/components/card-stats) : une carte blanche
   sobre, un LIBELLÉ gris et petit AU-DESSUS, le CHIFFRE grand en dessous. Pas de
   bandeau coloré, pas de capitales, pas d'icône décorative. La couleur ne sert
   qu'à dire un ÉTAT (une pastille de statut), jamais à habiller la carte.

   Tout est en jetons `--ppz-*` : le thème clair, sombre et le contraste renforcé
   suivent sans une couleur littérale ici.

   Sélecteur : `.ppz-card[data-ppz-card-kind]` — posé par PPZDSCards.render() sur
   toute carte du moteur. Ces règles ne touchent donc aucune autre carte du site.
   ───────────────────────────────────────────────────────────────────────────── */

.ppz-card[data-ppz-card-kind] {
    width: 100%;
    max-width: 640px;
    box-sizing: border-box;
    margin: 0 0 var(--ppz-space-3);
    color: var(--ppz-text-primary);
}

/* Filet de sécurité : si une version antérieure du moteur en pose un, on ne le voit pas. */
.ppz-card[data-ppz-card-kind] .ppz-card__color-bar { display: none; }

/* ── Titre : casse normale ────────────────────────────────────────────────────
   Le titre est un <h3>, et l'ancienne feuille `main@1.7.18.css` impose à TOUT h3
   `text-transform: uppercase; letter-spacing: .4px; color: gray`. */
.ppz-card[data-ppz-card-kind] .ppz-card__title {
    margin: 0;
    font-size: var(--ppz-font-size-lg);
    font-weight: var(--ppz-font-weight-semibold);
    line-height: var(--ppz-line-height-tight);
    letter-spacing: normal;
    text-transform: none;
    color: var(--ppz-text-primary);
}

.ppz-card[data-ppz-card-kind] .ppz-card__header {
    margin: 0 0 var(--ppz-space-3);
    padding: 0 0 var(--ppz-space-3);
    border-bottom: 1px solid var(--ppz-border-subtle);
}

.ppz-card[data-ppz-card-kind] .ppz-card__body {
    padding: 0;
}

/* ── Chiffres : libellé au-dessus, valeur dessous (vitrine card-stats) ─────── */
.ppz-card[data-ppz-card-kind] .ppz-card__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--ppz-space-4) var(--ppz-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ppz-card[data-ppz-card-kind] .ppz-card__stats > li { margin: 0; padding: 0; }

.ppz-card[data-ppz-card-kind] .ppz-card-stat { display: block; min-width: 0; }
.ppz-card[data-ppz-card-kind] .ppz-card-stat__box { display: flex; flex-direction: column; gap: var(--ppz-space-1); }
.ppz-card[data-ppz-card-kind] .ppz-card-stat__label {
    order: 0;
    font-size: var(--ppz-font-size-sm);
    color: var(--ppz-text-muted);
    line-height: var(--ppz-line-height-tight);
}
.ppz-card[data-ppz-card-kind] .ppz-card-stat__val {
    order: 1;
    font-size: var(--ppz-font-size-2xl);
    font-weight: var(--ppz-font-weight-semibold);
    line-height: var(--ppz-line-height-tight);
    color: var(--ppz-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Lignes (liste d'évaluations, de personnes) ─────────────────────────────── */
.ppz-card[data-ppz-card-kind] .ppz-card__rows,
.ppz-card[data-ppz-card-kind] .ppz-card__fields {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ppz-card[data-ppz-card-kind] .ppz-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ppz-space-3);
    padding: var(--ppz-space-2) 0;
    border-bottom: 1px solid var(--ppz-border-subtle);
}
.ppz-card[data-ppz-card-kind] .ppz-card__row:last-child { border-bottom: 0; }
.ppz-card[data-ppz-card-kind] .ppz-card__row-main { min-width: 0; flex: 1; }
.ppz-card[data-ppz-card-kind] .ppz-card__row-label { color: var(--ppz-text-primary); }
.ppz-card[data-ppz-card-kind] .ppz-card__row-detail { color: var(--ppz-text-muted); font-size: var(--ppz-font-size-sm); }
.ppz-card[data-ppz-card-kind] .ppz-card__row-value {
    flex-shrink: 0;
    color: var(--ppz-text-secondary);
    font-variant-numeric: tabular-nums;
}

.ppz-card[data-ppz-card-kind] .ppz-card__field {
    display: flex;
    align-items: baseline;
    gap: var(--ppz-space-2);
    padding: var(--ppz-space-1) 0;
}
.ppz-card[data-ppz-card-kind] .ppz-card__field-label { color: var(--ppz-text-muted); font-size: var(--ppz-font-size-sm); }
.ppz-card[data-ppz-card-kind] .ppz-card__field-value { color: var(--ppz-text-primary); }

/* Le bloc qui suit un autre bloc de la carte respire. */
.ppz-card[data-ppz-card-kind] .ppz-card__body > * + * { margin-top: var(--ppz-space-4); }

/* ── Graphique : centré, borné, sans trait épais ───────────────────────────── */
.ppz-card[data-ppz-card-kind] .ppz-card__chart { margin-top: var(--ppz-space-4); }
.ppz-card[data-ppz-card-kind] .ppz-card__chart svg { display: block; max-width: 100%; }
.ppz-card[data-ppz-card-kind] .ppz-card__a11y {
    /* texte alternatif : lu par les lecteurs d'écran, pas affiché en doublon */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── État vide : une phrase calme, pas un cri ─────────────────────────────────
   Avant : « AUCUNE ÉVALUATION SUR CETTE PÉRIODE. » en vert, en capitales, dans un
   cadre en pointillés. Une absence de résultat n'est ni un succès ni une alerte. */
.ppz-card[data-ppz-card-kind].ppz-card--empty,
.ppz-card.ppz-card--empty {
    max-width: 640px;
    margin: 0 0 var(--ppz-space-3);
    background: var(--ppz-bg-surface);
    border: 1px solid var(--ppz-border-subtle);
    box-shadow: none;
}
.ppz-card--empty .ppz-card-empty { padding: var(--ppz-space-2) 0; text-align: left; }
.ppz-card--empty .ppz-card-empty-title {
    margin: 0;
    font-size: var(--ppz-font-size-base);
    font-weight: var(--ppz-font-weight-normal, 400);
    color: var(--ppz-text-muted);
    text-transform: none;
    letter-spacing: normal;
}

/* ── Personnes (absence / retard) : le nom, ses événements ─────────────────── */
.ppz-card[data-ppz-card-kind="absence"] .ppz-card-absence__name {
    font-weight: var(--ppz-font-weight-semibold);
    color: var(--ppz-text-primary);
    text-decoration: none;
}
.ppz-card[data-ppz-card-kind="absence"] .ppz-card-absence__event-row {
    display: flex;
    align-items: center;
    gap: var(--ppz-space-2);
    flex-wrap: wrap;
}