/* ==========================================================================
   CARTE-MESURE (L-013/L-014) — le composant signature de la charte v1.2.
   Fond carte, bordure externe granite 1px, passe-partout interne (6px + line),
   coins marqués (traits de coupe 9px granite foncé), filet d'état 2px en tête.
   Jamais de fond plein coloré : le statut se lit au filet + pastille (L-005).
   ========================================================================== */

.card, .charge-card, .recap-card, .kpi-chart-card, .events-section,
.activities-section, .cal-card, .team-card, .hist-panel, .tab-placeholder,
.modal, .login-card, .sync-card, .consent-card {
  position: relative;
  background: var(--carte);
  border: var(--filet);
  border-radius: var(--radius);
  box-shadow: none;
}

/* Passe-partout : liseré intérieur --line à 6px du bord */
.mesure, .charge-card, .recap-card, .kpi-chart-card, .team-card, .modal,
.events-section, .activities-section, .cal-card {
  background-clip: padding-box;
}
.mesure::before, .charge-card::before, .recap-card::before, .kpi-chart-card::before,
.team-card::before, .modal::before, .events-section::before,
.activities-section::before, .cal-card::before {
  content: ''; position: absolute; inset: 5px;
  border: var(--filet-int); border-radius: 0; pointer-events: none;
}

/* Coins marqués : traits de coupe 9px granite foncé (pseudo-élément unique) */
.mesure::after, .charge-card::after, .recap-card::after, .kpi-chart-card::after,
.team-card::after, .modal::after, .events-section::after,
.activities-section::after, .cal-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--granite-fonce), var(--granite-fonce)) 0 0 / 9px 1px,
    linear-gradient(var(--granite-fonce), var(--granite-fonce)) 0 0 / 1px 9px,
    linear-gradient(var(--granite-fonce), var(--granite-fonce)) 100% 0 / 9px 1px,
    linear-gradient(var(--granite-fonce), var(--granite-fonce)) 100% 0 / 1px 9px,
    linear-gradient(var(--granite-fonce), var(--granite-fonce)) 0 100% / 9px 1px,
    linear-gradient(var(--granite-fonce), var(--granite-fonce)) 0 100% / 1px 9px,
    linear-gradient(var(--granite-fonce), var(--granite-fonce)) 100% 100% / 9px 1px,
    linear-gradient(var(--granite-fonce), var(--granite-fonce)) 100% 100% / 1px 9px;
  background-repeat: no-repeat;
}

/* Filet d'état 2px en tête de carte — LA signature (couleur data du statut) */
.statut-ok, .statut-warn, .statut-alert, .statut-neutre { border-top-width: 2px; border-top-style: solid; }
.statut-ok { border-top-color: var(--data-ok); }
.statut-warn { border-top-color: var(--data-warn); }
.statut-alert { border-top-color: var(--data-alert); }
.statut-neutre { border-top-color: var(--glacier); }

/* Compat : anciens sélecteurs de bord de statut (kpi-border-*) */
.kpi-border-g, .kpi-border-norme { border-top: 2px solid var(--data-ok); }
.kpi-border-a, .kpi-border-sous, .kpi-border-spike { border-top: 2px solid var(--data-warn); }
.kpi-border-r, .kpi-border-majeur { border-top: 2px solid var(--data-alert); }
.kpi-border-n, .kpi-border-e { border-top: 2px solid var(--glacier); }

/* Padding des cartes (le passe-partout impose ≥ 14px utile) */
.charge-card, .recap-card { padding: 1.1rem 1.25rem; margin-bottom: 1.125rem; }
.events-section { padding: 1rem 1.125rem; margin-bottom: 1.125rem; }
.activities-section { padding: 1rem 1.125rem; }
.kpi-chart-card { padding: 1.1rem 1.125rem; }
.kpi-chart-card.empty { background: var(--craie); }
.kpi-chart-card.empty::before { border-style: dashed; }

.section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.section-ttl, .charge-ttl { font-size: var(--ts-fs-md); font-weight: 600; font-family: var(--font-display); }
.charge-hdr { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.card-sub { font-size: var(--ts-fs-sm); color: var(--granite-fonce); margin-top: 3px; line-height: 1.5; }
.card-note { font-size: var(--ts-fs-xs); color: var(--granite-fonce); margin-top: 8px; line-height: 1.5; }

/* Grandes valeurs : mono 600, couleur data du statut ; libellé uppercase 11px */
.kpi-lbl {
  font-size: 11px; color: var(--granite-fonce); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 3px; font-weight: 600; font-family: var(--font-ui);
}
.kpi-val, .big-val { font-size: var(--ts-fs-2xl); font-weight: 600; color: var(--graphite); font-family: var(--font-data); }
.kpi-val.empty-val { color: var(--granite); }
.kpi-sub { font-size: var(--ts-fs-sm); margin-top: 2px; }
.ksg, .ks-norme { color: var(--data-ok-text); }
.ksa, .ks-sous, .ks-spike { color: var(--data-warn-text); }
.ksr, .ks-majeur { color: var(--data-alert-text); }
.ksn { color: var(--granite-fonce); }

.kpi-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 12px; }
.kpi-clickable { cursor: pointer; transition: border-color 0.12s; }
.kpi-clickable:hover { border-color: var(--granite-fonce); }
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }

.chart-wrap { position: relative; height: 140px; }
.chart-wrap-lg { position: relative; height: 210px; }
.empty-chart {
  height: 140px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; color: var(--granite-fonce); font-size: var(--ts-fs-base);
  text-align: center;
}

/* Tooltip pédagogique */
.help-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: transparent; color: var(--granite-fonce);
  border: 1px solid var(--granite);
  font-size: 9px; font-weight: 700; cursor: help;
  vertical-align: middle; margin-left: 4px; flex-shrink: 0; font-family: var(--font-data);
}
.help-tip:hover { border-color: var(--graphite); color: var(--graphite); }

/* Wellness z-scores listés — lignes séparées par --line (charte §5 fiche) */
.sub-params { display: flex; flex-direction: column; gap: 0; margin: 8px 0; }
.sp {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 2px; border-bottom: var(--filet-int); background: none; border-radius: 0;
}
.sp:last-child { border-bottom: none; }
.sp-lbl { font-size: 10px; color: var(--granite-fonce); text-transform: uppercase; letter-spacing: 0.08em; }
.sp-val { font-size: 13px; font-weight: 600; font-family: var(--font-data); }
.sp-line { display: none; }
.sub-legend { font-size: var(--ts-fs-xs); color: var(--granite-fonce); margin-bottom: 6px; display: flex; gap: 8px; flex-wrap: wrap; }

.sleep-dual { display: flex; gap: 12px; margin-bottom: 8px; }
.sleep-kpi { flex: 1; border: var(--filet-int); border-radius: var(--radius); padding: 8px 10px; text-align: center; background: var(--craie); }
.sleep-kpi-lbl { font-size: 9px; color: var(--granite-fonce); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 3px; }
.sleep-kpi-val { font-size: 20px; font-weight: 600; font-family: var(--font-data); }