/* ============================================================
   cards.css — Composants de carte GÉNÉRIQUES du design system
   ------------------------------------------------------------
   Cartes réutilisables par les 4 produits. L'accent s'adapte
   via var(--accent) selon le data-product. Authored 100% depuis
   les tokens (aucune valeur en dur).

   Chargé dans LES DEUX mondes :
   - style-guide.html (design system pur) — après components.css
   - pages de production (Bootstrap + bridge) — après layout.css,
     avant les XXXX-components.css (qui peuvent surcharger).

   Remplace les anciennes classes OnAir (vt-card, voice-card,
   animator-card, template-card, plan-card, *-card-create,
   traits-bar, model-pill-*, template-badge).
   ============================================================ */

/* ---------- CARTE MÉDIA / COUVERTURE ----------
   Zone de couverture (icône ou image) + corps (titre + méta) + badge optionnel. */
.media-card {
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden; position: relative;
}
.media-card__cover {
  position: relative; height: 120px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 2rem;
}
.media-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.media-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 2px; flex: 1; }
.media-card__title {
  font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.media-card__meta { font-size: var(--fs-sm); color: var(--c-text-muted); }
/* Badge en coin de la carte (haut-gauche par défaut) */
.media-card__badge {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--c-success); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  padding: 0.2rem 0.5rem; border-radius: var(--radius-pill);
}
.media-card__badge--accent { background: var(--accent); color: var(--accent-contrast); }
.media-card__badge--right  { left: auto; right: var(--sp-2); }

/* ---------- MODIFICATEUR INTERACTIF ----------
   À combiner avec .card ou .media-card pour une carte cliquable :
   se soulève + bordure d'accent au survol. */
.card--interactive {
  cursor: pointer;
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.card--interactive:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--accent); }

/* ---------- CARTE "AJOUTER" ----------
   Placeholder en pointillés pour créer un nouvel élément. */
.card--add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); text-align: center; cursor: pointer; min-height: 180px;
  border: 1.5px dashed var(--c-border-strong);
  background: var(--c-surface-2); color: var(--c-text-muted);
  border-radius: var(--radius-lg);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.card--add:hover { color: var(--accent); border-color: var(--accent); }
.card--add i { font-size: 1.6rem; }

/* ---------- GARNITURES DE CARTE ---------- */
/* Barre de trait / progression simple (ex. profils animateur) */
.trait-bar { height: 6px; background: var(--c-surface-2); border-radius: var(--radius-pill); overflow: hidden; margin-top: 2px; }
.trait-bar__fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
/* Pastille de modèle / catégorie (variantes sémantiques) */
.model-pill {
  display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  padding: 0.15rem 0.5rem; border-radius: var(--radius-pill);
  background: var(--c-surface-2); color: var(--c-text-muted);
}
.model-pill--success { background: var(--c-success-soft); color: var(--c-success); }
.model-pill--info    { background: var(--c-info-soft); color: var(--c-info); }
.model-pill--warning { background: var(--c-warning-soft); color: var(--c-warning); }
/* Badge d'angle générique (ex. "TEMPLATE") */
.corner-badge {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  padding: 0.2rem 0.5rem; border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ---------- CARTE DE STAT / KPI ----------
   Affiche un chiffre clé : label + valeur + icône. Bande latérale
   sémantique optionnelle. Remplace kpi-card, stat-card-mini,
   geo-kpi-card, mapping-kpi-card, dashboard-card (KPI)… */
.stat-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-4);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.stat-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.stat-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.stat-card__label { font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: var(--fw-medium); }
.stat-card__value { font-size: 1.75rem; font-weight: var(--fw-bold); line-height: 1.1; color: var(--c-text); }
.stat-card__icon {
  width: 42px; height: 42px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0;
}
/* Carte de stat aux couleurs d'un réseau social : même contrat que .pill--net,
   la teinte vient de --net (classe .net--* de tokens.css). Sert aux KPI
   « Abonnés Instagram / Facebook », où l'accent produit ne dit rien du réseau.
   Exemple : <div class="stat-card stat-card--net net--instagram"> */
.stat-card--net { --net: var(--accent); border-left: 4px solid var(--net); }
.stat-card--net .stat-card__icon {
  background: color-mix(in srgb, var(--net) 14%, var(--c-surface));
  color: var(--net);
}
.stat-card--net .stat-card__value { color: var(--net); }

/* Bande latérale sémantique (gauche) */
.stat-card--success { border-left: 4px solid var(--c-success); }
.stat-card--warning { border-left: 4px solid var(--c-warning); }
.stat-card--danger  { border-left: 4px solid var(--c-danger); }
.stat-card--info    { border-left: 4px solid var(--c-info); }
.stat-card--accent  { border-left: 4px solid var(--accent); }
/* Version compacte */
.stat-card--compact { padding: var(--sp-3); }
.stat-card--compact .stat-card__value { font-size: 1.35rem; }

/* ---------- CARTE D'ALERTE / CONSTAT ----------
   Bloc d'alerte avec bande latérale de sévérité (titre + description).
   Remplace audit-card, audit-insight-card. */
.alert-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-3) var(--sp-4);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.alert-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.alert-card--danger  { border-left-color: var(--c-danger); }
.alert-card--warning { border-left-color: var(--c-warning); }
.alert-card--info    { border-left-color: var(--c-info); }
.alert-card--success { border-left-color: var(--c-success); }
.alert-card__title { font-weight: var(--fw-semibold); color: var(--c-text); }
.alert-card__desc  { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* ---------- ÉTAT SÉLECTIONNÉ ----------
   À combiner avec n'importe quelle carte (.card, .media-card…) pour
   marquer une tuile choisie. Remplace les .active/.selected ad-hoc. */
.card--selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- CARTE-LIGNE (listes de projets / d'éléments) ----------
   Ligne horizontale pour les listes verticales (hub de campagnes,
   projets, historiques…). Combiner avec .card--interactive quand la
   ligne entière est cliquable. Empiler dans un conteneur
   .d-flex.flex-column.gap-2. */
.row-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  padding: var(--sp-3) var(--sp-4);
}
.row-card__main  { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.row-card__title { font-weight: var(--fw-semibold); color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-card__meta  { font-size: var(--fs-sm); color: var(--c-text-muted); }
.row-card__side  { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

/* ---------- GARNITURE : MINI-PROGRESSION PAR ÉTAPES ----------
   Petits segments indiquant l'avancement d'un parcours (ex : 2/4).
   Segment franchi = .is-done. */
.step-track { display: inline-flex; gap: 3px; }
.step-track__seg {
  width: 18px; height: 5px; border-radius: var(--radius-pill);
  background: var(--c-surface-2);
}
.step-track__seg.is-done { background: var(--c-success); }

/* ---------- VARIANTE MÉDIA : POCHETTE CARRÉE ----------
   Couverture en ratio 1:1 (grilles de pochettes : playlists, visuels…). */
.media-card--square .media-card__cover { height: auto; aspect-ratio: 1 / 1; }

/* ---------- OVERLAY D'ÉDITION DE COUVERTURE ----------
   Bouton rond apparaissant au survol sur la couverture d'une media-card. */
.media-card__cover-edit {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: rgba(0, 0, 0, 0.5); color: #fff;
  display: grid; place-items: center; font-size: 0.8rem;
  opacity: 0; cursor: pointer; transition: opacity var(--t-fast);
}
.media-card:hover .media-card__cover-edit { opacity: 1; }

/* ---------- JAUGE DE SCORE CIRCULAIRE ----------
   .score-ring : un score 0–100 affiché en anneau SVG. Remplace le
   .score-circle legacy (style-standard.css). Cross-produit, tokenisé.
   Markup (la longueur de l'arc est posée par le JS via stroke-dasharray,
   2πr ≈ 213.6 pour r=34) :
     <div class="score-ring score-ring--success">
       <svg class="score-ring__svg" viewBox="0 0 74 74">
         <circle class="score-ring__track"    cx="37" cy="37" r="34"></circle>
         <circle class="score-ring__progress" cx="37" cy="37" r="34"
                 stroke-dasharray="186 213.6"></circle>
       </svg>
       <span class="score-ring__value">87</span>
     </div> */
.score-ring {
  position: relative; flex-shrink: 0;
  width: var(--score-ring-size, 74px); height: var(--score-ring-size, 74px);
  display: flex; align-items: center; justify-content: center;
}
.score-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring__track { fill: none; stroke: var(--c-border); stroke-width: 6; }
.score-ring__progress {
  fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dasharray var(--t-base);
}
.score-ring__value { z-index: 1; font-weight: var(--fw-bold); font-size: 1.2em; color: var(--c-text); }
/* Variantes sémantiques (couleur de l'arc) */
.score-ring--success .score-ring__progress { stroke: var(--c-success); }
.score-ring--info    .score-ring__progress { stroke: var(--c-info); }
.score-ring--warning .score-ring__progress { stroke: var(--c-warning); }
.score-ring--danger  .score-ring__progress { stroke: var(--c-danger); }
/* Échelle officielle des scores Ibiza (voir scripts/modules/score-scale.js) */
.score-ring--strong .score-ring__progress { stroke: var(--c-score-strong); }
.score-ring--good   .score-ring__progress { stroke: var(--c-score-good); }
.score-ring--weak   .score-ring__progress { stroke: var(--c-orange); }
.score-ring--poor   .score-ring__progress { stroke: var(--c-danger); }
/* Taille compacte */
.score-ring--sm { --score-ring-size: 52px; }
.score-ring--sm .score-ring__value { font-size: 1em; }

/* ---------- CARTE GRAPHIQUE (wrapper Chart.js) ----------
   .chart-card : carte DS contenant un canvas Chart.js responsive.
   Remplace le #chart-container legacy (hauteur figée). Hauteur du corps
   réglable via --chart-card-height. Cross-produit, tokenisé.
   Markup :
     <div class="chart-card">
       <div class="chart-card__head"><i class="fas fa-chart-bar"></i>
         <h3 class="chart-card__title">Performance (30 j)</h3></div>
       <div class="chart-card__body"><canvas id="monGraph"></canvas></div>
     </div>
   ⚠️ Le wrapper suit le thème, mais Chart.js dessine sur un <canvas> : ses
   couleurs (barres, axes, grille) ne viennent PAS du CSS. Les lire sur les
   tokens — getComputedStyle(document.body).getPropertyValue('--accent') /
   '--c-text-muted' / '--c-border' — et redessiner au changement de thème. */
.chart-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden;
}
.chart-card__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border);
}
.chart-card__head i { color: var(--accent); }
.chart-card__title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-text); }
.chart-card__body { position: relative; height: var(--chart-card-height, 360px); padding: var(--sp-4); }
.chart-card__body canvas { max-width: 100%; }