/* =============================================================================
   refresh.css — Langage visuel "premium data-driven" 2025.
   Primitives réutilisables sur toutes les pages (dashboard, envoi, historique, admin).
   Charte Pacific (tokens.css). Chargé après user.css.
   ============================================================================= */

/* ---- Reveal au chargement (staggered) ---- */
@keyframes pcRise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.reveal > * { animation: pcRise var(--dur-slow) var(--ease-out) backwards; }
.reveal > *:nth-child(1){animation-delay:.02s} .reveal > *:nth-child(2){animation-delay:.07s}
.reveal > *:nth-child(3){animation-delay:.12s} .reveal > *:nth-child(4){animation-delay:.17s}
.reveal > *:nth-child(5){animation-delay:.22s} .reveal > *:nth-child(6){animation-delay:.27s}

/* ---- Hero éditorial — flat, net, sans dégradé ---- */
.hero {
  position:relative; border-radius:var(--radius-lg);
  background:var(--pc-white); border:1px solid var(--pc-line);
  padding:var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 6px);
}
.hero::before { content:''; position:absolute; left:0; top:var(--space-5); bottom:var(--space-5); width:4px;
  background:var(--pc-peach); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.hero__eyebrow { font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-widest);
  text-transform:uppercase; color:var(--pc-peach-dark); margin:0 0 var(--space-2); }
.hero__title { font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,4.5vw,var(--text-h1));
  line-height:.92; letter-spacing:var(--tracking-tight); color:var(--pc-primary); margin:0; text-transform:uppercase; }
.hero__title em { color:var(--pc-peach-dark); font-style:normal; }
.hero__sub { margin:var(--space-3) 0 0; color:var(--ink-700); font-size:var(--text-md); }
.hero__actions { margin-top:var(--space-4); display:flex; gap:var(--space-3); flex-wrap:wrap; }

/* ---- Surface cards — flat, bordure nette, zéro ombre ---- */
.surface { background:var(--pc-white); border:1px solid var(--pc-line); border-radius:var(--radius-lg);
  padding:var(--space-5); }
.surface--hover { transition:border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.surface--hover:hover { transform:translateY(-2px); border-color:var(--pc-primary); }
.surface__head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
.surface__title { font-family:var(--font-display); text-transform:uppercase; font-size:var(--text-h4);
  letter-spacing:var(--tracking-tight); color:var(--pc-primary); margin:0; }
.surface__meta { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--pc-secondary); }

/* ---- KPI cards avec accent latéral ---- */
.kpi-grid { display:grid; gap:var(--space-5); grid-template-columns:repeat(4,1fr); }
.kpi-grid--3 { grid-template-columns:repeat(3,1fr); }
.kpi-card { position:relative; overflow:hidden; background:var(--pc-white); border:1px solid var(--pc-line);
  border-radius:var(--radius-lg); padding:var(--space-5);
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.kpi-card:hover { transform:translateY(-2px); border-color:var(--accent, var(--pc-primary)); }
.kpi-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent, var(--pc-primary)); }
.kpi-card--primary { --accent: var(--pc-primary); }
.kpi-card--peach   { --accent: var(--pc-peach-dark); }
.kpi-card--success { --accent: var(--success-700); }
.kpi-card--danger  { --accent: var(--danger-700); }
.kpi-card--muted   { --accent: var(--pc-secondary); }
.kpi-card__label { font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--pc-secondary); margin:0; }
.kpi-card__value { font-family:var(--font-display); font-weight:700; font-size:var(--text-h2); line-height:1;
  color:var(--ink-900); margin:var(--space-3) 0 var(--space-1); font-variant-numeric:tabular-nums; }
.kpi-card__hint { font-size:var(--text-xs); color:var(--pc-secondary); margin:0; }

/* ---- Tuiles d'action ---- */
.tile { position:relative; overflow:hidden; display:block; border-radius:var(--radius-lg); padding:var(--space-5);
  border:1px solid transparent; text-decoration:none; transition:transform var(--dur-base) var(--ease-out), filter var(--dur-base); }
.tile:hover { transform:translateY(-2px); filter:brightness(1.04); }
.tile--primary { background:var(--pc-primary); color:var(--pc-white); border-color:var(--pc-primary); }
.tile--peach { background:var(--pc-peach); color:var(--ink-900); border-color:var(--pc-peach); }
.tile__eyebrow { font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide); opacity:.75; margin:0; }
.tile__title { font-family:var(--font-display); text-transform:uppercase; font-size:var(--text-h3); letter-spacing:var(--tracking-tight); margin:var(--space-2) 0 0; }
.tile__arrow { position:absolute; right:var(--space-5); bottom:var(--space-4); font-size:var(--text-h3); font-family:var(--font-display); opacity:.6; }

/* ---- Tables modernisées (s'applique aux .table existantes) ---- */
.table { border-collapse:separate; border-spacing:0; }
.table thead th { font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--pc-secondary); font-weight:600; padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--pc-line); background:var(--pc-paper); position:sticky; top:0; z-index:1; }
.table tbody td { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--pc-line); vertical-align:middle; }
.table tbody tr { transition:background var(--dur-fast); }
.table tbody tr:hover { background:var(--pc-primary-soft); }
.table tbody tr:last-child td { border-bottom:none; }

/* ---- Data feed (listes aérées type activité) ---- */
.feed { display:flex; flex-direction:column; }
.feed__row { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) 0;
  border-bottom:1px solid var(--pc-line); text-decoration:none; color:inherit; transition:padding-left var(--dur-fast); }
.feed__row:hover { padding-left:var(--space-2); }
.feed__row:last-child { border-bottom:none; }
.feed__icon { width:38px; height:38px; border-radius:var(--radius-md); background:var(--pc-primary-soft);
  color:var(--pc-primary); display:grid; place-items:center; font-family:var(--font-display); font-size:var(--text-md); flex:0 0 auto; }
.feed__main { min-width:0; flex:1; }
.feed__meta { text-align:right; flex:0 0 auto; }

/* ---- SVG chart helpers ---- */
.chart svg { width:100%; height:auto; display:block; }
.chart__line { fill:none; stroke:var(--pc-primary); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:2000; stroke-dashoffset:2000; animation:pcDraw 1.4s var(--ease-out) .3s forwards; }
@keyframes pcDraw { to { stroke-dashoffset:0; } }

/* ---- Section title (séparateurs de page) ---- */
.section-title { font-family:var(--font-display); text-transform:uppercase; font-size:var(--text-h3);
  letter-spacing:var(--tracking-tight); color:var(--pc-primary); margin:0 0 var(--space-4); }

@media (max-width:980px){ .kpi-grid,.kpi-grid--3 { grid-template-columns:repeat(2,1fr); } }

/* ---- Menu sidebar en accordéons ---- */
.nav-group { border:none; }
.nav-group__head {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--pc-secondary); padding:var(--space-3) var(--space-4) var(--space-2);
  user-select:none; transition:color var(--dur-fast);
}
.nav-group__head::-webkit-details-marker { display:none; }
.nav-group__head::after { content:'▸'; margin-left:auto; font-size:.8em; opacity:.55; transition:transform var(--dur-fast); }
.nav-group[open] > .nav-group__head::after { transform:rotate(90deg); }
.nav-group__head:hover { color:var(--pc-primary); }
.nav-badge { background:var(--pc-peach); color:var(--ink-900); font-size:.68rem; font-weight:600; padding:1px 7px; border-radius:9999px; }