/* =========================================================
   SPO — PALETTE (Single Source of Truth) — 2026 — SAFE additif
   - AJOUTS UNIQUEMENT (aucune suppression / aucune modification des règles existantes)
   - Objectif : aligner palette ↔ components ↔ plugin presets
========================================================= */

/* =========================================================
   ADD-ON 2026-02 — Tokens complémentaires (SAFE)
   NOTE: on n’écrase rien d’existant, on ajoute des variables réutilisables.
========================================================= */

:root{
  /* ------------------------------------------------------------------
     Alias compatibles components.css (utile pour presets + UI kit)
     ------------------------------------------------------------------ */
  --spo-ink: rgba(15,42,68,.96);           /* texte “ink” utilisé dans components */
  --spo-soft: rgba(15,42,68,.04);          /* surfaces soft */
  --spo-soft-2: rgba(15,42,68,.08);        /* surfaces soft ++ */
  --spo-line: var(--spo-border);           /* alias border */
  --spo-line-strong: var(--spo-border-strong);

  /* ------------------------------------------------------------------
     Rayons / ombres (échelle) — additif, ne remplace pas --spo-radius/--spo-shadow
     ------------------------------------------------------------------ */
  --spo-radius-sm: 14px;
  --spo-radius-md: 18px;
  --spo-radius-lg: 22px;

  --spo-shadow-sm: 0 10px 24px rgba(15,42,68,.08);
  --spo-shadow-md: 0 14px 34px rgba(15,42,68,.10);
  --spo-shadow-lg: 0 20px 48px rgba(15,42,68,.14);

  /* ------------------------------------------------------------------
     Typo / lecture (SEO long-form)
     ------------------------------------------------------------------ */
  --spo-prose-max: 72ch;
  --spo-prose-gap: 12px;
  --spo-prose-list-indent: 1.1rem;

  /* ------------------------------------------------------------------
     Forms (cohérence UX, wrappers seulement côté components)
     ------------------------------------------------------------------ */
  --spo-input-h: 44px;
  --spo-input-radius: 14px;
  --spo-input-bg: linear-gradient(180deg,#ffffff 0%, #fbfcff 100%);
  --spo-input-border: rgba(15,42,68,.14);
  --spo-input-focus: rgba(17,58,115,.55);
  --spo-input-ring: rgba(17,58,115,.10);

  /* ------------------------------------------------------------------
     Cards / media
     ------------------------------------------------------------------ */
  --spo-card-thumb-h-sm: 120px;
  --spo-card-thumb-h-md: 150px;
  --spo-card-thumb-h-lg: 180px;
  --spo-card-head-gap: 10px;
  --spo-card-meta-gap: 8px;

  /* ------------------------------------------------------------------
     Tables (pro) — utilisés par tes classes .spo-table* (components)
     ------------------------------------------------------------------ */
  --spo-table-radius: 18px;
  --spo-table-line: rgba(15,42,68,.10);
  --spo-table-line-soft: rgba(15,42,68,.08);
  --spo-table-head-bg: rgba(15,42,68,.04);
  --spo-table-stripe-bg: rgba(15,42,68,.02);
  --spo-table-cell-pad-y: 12px;
  --spo-table-cell-pad-x: 12px;
  --spo-table-sticky-head: 0; /* 0/1 (flag), activable par preset si besoin */

  /* ------------------------------------------------------------------
     Status colors (notes/badges/alerts)
     ------------------------------------------------------------------ */
  --spo-info: #113a73;
  --spo-success: #0b4a2a;
  --spo-warning: #a05f0a;
  --spo-danger: #7a1120;

  --spo-info-bg: rgba(17,58,115,.06);
  --spo-success-bg: rgba(11,74,42,.06);
  --spo-warning-bg: rgba(160,95,10,.08);
  --spo-danger-bg: rgba(122,17,32,.06);

  --spo-info-line: rgba(17,58,115,.18);
  --spo-success-line: rgba(11,74,42,.18);
  --spo-warning-line: rgba(160,95,10,.20);
  --spo-danger-line: rgba(122,17,32,.18);

  /* ------------------------------------------------------------------
     Z-index system (évite conflits sticky/modal/toast)
     ------------------------------------------------------------------ */
  --spo-z-sticky: 50;
  --spo-z-modal: 100;
  --spo-z-toast: 200;

  /* ------------------------------------------------------------------
     Motion (cohérence transitions) + a11y
     ------------------------------------------------------------------ */
  --spo-dur-1: .12s;
  --spo-dur-2: .18s;
  --spo-ease: ease;
  --spo-ease-out: cubic-bezier(.16,1,.3,1);

  /* ------------------------------------------------------------------
     Safe-area iOS (sticky bars)
     ------------------------------------------------------------------ */
  --spo-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ------------------------------------------------------------------
     Plugin / presets (variables “p-*” consommables par wrappers .spo-preset)
     - Ne casse rien si non utilisé
     ------------------------------------------------------------------ */
  --spo-p-bg: transparent;
  --spo-p-surface: rgba(255,255,255,.96);
  --spo-p-ink: rgba(15,42,68,.96);
  --spo-p-muted: rgba(15,42,68,.82);
  --spo-p-line: rgba(15,42,68,.12);
  --spo-p-radius: 22px;
  --spo-p-shadow: 0 14px 34px rgba(15,42,68,.10);
  --spo-p-shadow-strong: 0 22px 54px rgba(15,42,68,.14);
  --spo-p-pad: 18px;
  --spo-p-gap: 14px;
  --spo-p-max: 1120px;
}

/* =========================================================
   ADD-ON — Helpers “palette-aware” (SAFE, wrappers SPO only)
   - Aucun reset global
   - Ajoute juste des classes utilitaires optionnelles
========================================================= */

/* Prose wrapper (SEO long-form) */
.spo-prose{
  max-width: var(--spo-prose-max);
}
.spo-prose > * + *{
  margin-top: var(--spo-prose-gap);
}
.spo-prose ul,
.spo-prose ol{
  padding-left: var(--spo-prose-list-indent);
}

/* Table wrapper (mobile scroll) */
.spo-tableWrap{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

/* Sticky helper pour tables (activable en preset via --spo-table-sticky-head:1) */
.spo-table--stickyHead thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--spo-table-head-bg);
}

/* Safe-area helper pour sticky bars si tu l’utilises déjà */
.spo-stickySafe{
  padding-bottom: var(--spo-safe-bottom);
}
/* =========================================================
   SPO — PALETTE — ADD-ON PREMIUM TABLES (SAFE / additif)
   Objectif : améliorer rendu tables (desktop + mobile) sans toucher aux règles existantes
   Usage :
   - wrap: <div class="spo-tableWrap spo-tableWrap--shadow"> ...table... </div>
   - table: class="spo-table spo-table--zebra spo-table--hover spo-table--compact spo-table--stickyHead"
========================================================= */

/* ---------- Tokens tables premium (additif) ---------- */
:root{
  --spo-table-caption: rgba(15,42,68,.78);
  --spo-table-hover-bg: rgba(17,58,115,.04);
  --spo-table-hover-border: rgba(17,58,115,.16);
  --spo-table-sticky-shadow: 0 10px 20px rgba(15,42,68,.10);

  --spo-table-radius: var(--spo-table-radius, 18px);
  --spo-table-line: var(--spo-table-line, rgba(15,42,68,.10));
  --spo-table-line-soft: var(--spo-table-line-soft, rgba(15,42,68,.08));
  --spo-table-head-bg: var(--spo-table-head-bg, rgba(15,42,68,.04));
  --spo-table-stripe-bg: var(--spo-table-stripe-bg, rgba(15,42,68,.02));
  --spo-table-cell-pad-y: var(--spo-table-cell-pad-y, 12px);
  --spo-table-cell-pad-x: var(--spo-table-cell-pad-x, 12px);
}

/* ---------- Wrapper scroll mobile + fade edges (optionnel) ---------- */
.spo-tableWrap{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border-radius: var(--spo-table-radius);
}
.spo-tableWrap--shadow{
  position:relative;
}
.spo-tableWrap--shadow::before,
.spo-tableWrap--shadow::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:28px;
  pointer-events:none;
  z-index:1;
  opacity:.0;
  transition:opacity .12s ease;
}
.spo-tableWrap--shadow::before{
  left:0;
  background:linear-gradient(90deg, rgba(15,42,68,.10), rgba(15,42,68,0));
}
.spo-tableWrap--shadow::after{
  right:0;
  background:linear-gradient(270deg, rgba(15,42,68,.10), rgba(15,42,68,0));
}
/* active fades only when scrolling is possible (safe fallback) */
@supports (mask-image: linear-gradient(#000,#000)){
  .spo-tableWrap--shadow{
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }
  .spo-tableWrap--shadow::before,
  .spo-tableWrap--shadow::after{ display:none; }
}

/* ---------- Table enhancements (additif) ---------- */
.spo-table{
  border-radius: var(--spo-table-radius);
  border:1px solid var(--spo-table-line);
  background: rgba(255,255,255,.96);
  overflow:hidden;
}

/* Caption (SEO-perçu + lisible) */
.spo-table caption{
  caption-side: top;
  text-align:left;
  padding:10px 2px 10px;
  font-weight:900;
  color: var(--spo-table-caption);
}

/* Head */
.spo-table thead,
.spo-table__head{
  background: var(--spo-table-head-bg);
}
.spo-table thead th,
.spo-table__th{
  font-weight:950;
  color: rgba(15,42,68,.96);
  border-bottom:1px solid var(--spo-table-line);
}

/* Cells padding consistency (works even if you use native th/td) */
.spo-table th,
.spo-table td,
.spo-table__th,
.spo-table__td{
  padding: var(--spo-table-cell-pad-y) var(--spo-table-cell-pad-x);
  vertical-align:top;
  border-bottom:1px solid var(--spo-table-line-soft);
}

/* Last row border cleanup */
.spo-table tbody tr:last-child td,
.spo-table__tr:last-child .spo-table__td{
  border-bottom:none;
}

/* Zebra */
.spo-table--zebra tbody tr:nth-child(even) td,
.spo-table--striped .spo-table__tr:nth-child(even) .spo-table__td{
  background: var(--spo-table-stripe-bg);
}

/* Hover row (desktop only) */
@media (hover:hover) and (pointer:fine){
  .spo-table--hover tbody tr:hover td{
    background: var(--spo-table-hover-bg);
    border-bottom-color: var(--spo-table-hover-border);
  }
}

/* Compact / Dense */
.spo-table--compact{
  --spo-table-cell-pad-y: 10px;
  --spo-table-cell-pad-x: 10px;
}
.spo-table--dense{
  --spo-table-cell-pad-y: 8px;
  --spo-table-cell-pad-x: 10px;
  font-size:13px;
}

/* Numeric alignment helper */
.spo-table--num td[data-num="1"],
.spo-table--num .spo-table__td[data-num="1"]{
  text-align:right;
  font-variant-numeric: tabular-nums;
}

/* Sticky head (kept compatible with your existing .spo-table--stickyHead) */
.spo-table--stickyHead thead th{
  position:sticky;
  top:0;
  z-index:3;
  background: var(--spo-table-head-bg);
}
/* add subtle shadow when sticky (best effort) */
.spo-table--stickyHead thead th{
  box-shadow: 0 1px 0 var(--spo-table-line);
}
@supports (filter: drop-shadow(0 0 0 rgba(0,0,0,0))){
  .spo-table--stickyHead thead{
    filter: drop-shadow(0 8px 10px rgba(15,42,68,.10));
  }
}

/* Mobile readability */
@media (max-width: 640px){
  .spo-table caption{ padding:8px 0 8px; }
  .spo-table--compact{ --spo-table-cell-pad-y: 9px; --spo-table-cell-pad-x: 10px; }
  .spo-table--dense{ --spo-table-cell-pad-y: 8px; --spo-table-cell-pad-x: 10px; }
}

/* Optional: “card rows” mode for tiny screens (opt-in) */
@media (max-width: 520px){
  .spo-table--cards tbody tr{
    display:block;
    border:1px solid var(--spo-table-line-soft);
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    margin:10px 0;
    overflow:hidden;
  }
  .spo-table--cards tbody td{
    display:block;
    border-bottom:1px solid var(--spo-table-line-soft);
  }
  .spo-table--cards tbody td:last-child{ border-bottom:none; }
}
/* =========================================================
   SPO — PALETTE — ADD-ON 2026-02 (PRO) — SAFE / ADDITIF
   - AJOUTS UNIQUEMENT (aucune suppression / aucune modification)
   - Objectif : aligner palette ↔ components ↔ plugin presets (UX/UI 2026)
========================================================= */

/* =========================================================
   1) TOKENS PRO (additifs) — layout / typo / interactive / gradients
========================================================= */
:root{
  /* Spacing scale (layout cohérent) */
  --spo-space-1: 4px;
  --spo-space-2: 8px;
  --spo-space-3: 12px;
  --spo-space-4: 16px;
  --spo-space-5: 20px;
  --spo-space-6: 24px;
  --spo-space-7: 32px;
  --spo-space-8: 40px;

  /* Typography tokens (lecture + hiérarchie) */
  --spo-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --spo-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;

  --spo-fs-12: 12px;
  --spo-fs-13: 13px;
  --spo-fs-14: 14px;
  --spo-fs-16: 16px;
  --spo-fs-18: 18px;

  --spo-lh-tight: 1.25;
  --spo-lh-normal: 1.5;
  --spo-lh-prose: 1.75;

  --spo-tracking-kicker: .08em;

  /* Interactive (hover/focus/active) */
  --spo-ring: rgba(17,58,115,.18);
  --spo-ring-strong: rgba(17,58,115,.26);
  --spo-hover: rgba(17,58,115,.04);
  --spo-active: rgba(17,58,115,.07);

  /* Gradients (brand-safe) */
  --spo-grad-hero: linear-gradient(135deg, rgba(15,42,68,.06) 0%, rgba(255,255,255,.96) 55%, rgba(17,58,115,.08) 100%);
  --spo-grad-hero-warm: radial-gradient(900px 420px at 12% 0%, rgba(245,158,11,.14) 0%, rgba(255,255,255,.96) 52%, rgba(17,58,115,.10) 100%);
  --spo-grad-dark: radial-gradient(1200px 500px at 10% 0%, rgba(17,58,115,.28) 0%, rgba(7,27,58,1) 55%), #071b3a;

  /* Pills / badges (KPI, filtres, tags) */
  --spo-pill-bg: rgba(15,42,68,.05);
  --spo-pill-line: rgba(15,42,68,.12);
  --spo-pill-ink: rgba(15,42,68,.92);
  --spo-pill-radius: 999px;
  --spo-pill-pad-y: 6px;
  --spo-pill-pad-x: 10px;

  /* Tables: vlines + header compact */
  --spo-table-vline: rgba(15,42,68,.07);
}

/* =========================================================
   2) HELPERS PRO (optionnels) — aucun reset global
========================================================= */

/* Pills */
.spo-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: var(--spo-pill-pad-y) var(--spo-pill-pad-x);
  border-radius: var(--spo-pill-radius);
  border:1px solid var(--spo-pill-line);
  background: var(--spo-pill-bg);
  color: var(--spo-pill-ink);
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

/* Lift (cartes/liens) */
.spo-lift{
  transition: transform var(--spo-dur-2) var(--spo-ease-out), box-shadow var(--spo-dur-2) var(--spo-ease-out), border-color var(--spo-dur-2) var(--spo-ease-out);
}
@media (hover:hover) and (pointer:fine){
  .spo-lift:hover{
    transform: translateY(-1px);
    box-shadow: var(--spo-shadow-lg);
    border-color: rgba(15,42,68,.18);
  }
}

/* Focus ring utilitaire (scope via wrapper de ton choix) */
.spo-focusRing :where(a,button,input,select,textarea,summary):focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--spo-ring);
  border-radius: 12px;
}

/* =========================================================
   3) TABLES PRO — EXTENSIONS additifs (complètent ton bloc tables existant)
========================================================= */

/* Vertical lines (opt-in) */
.spo-table--vlines td,
.spo-table--vlines th{
  border-right: 1px solid var(--spo-table-vline);
}
.spo-table--vlines td:last-child,
.spo-table--vlines th:last-child{
  border-right: none;
}

/* Head compact (opt-in) */
.spo-table--headCompact thead th{
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 13px;
  letter-spacing: .02em;
}

/* Zebra/hover/compact: améliorer la “netteté” visuelle (sans modifier tes règles) */
@media (hover:hover) and (pointer:fine){
  .spo-table--hover tbody tr:hover td{
    background: var(--spo-table-hover-bg);
  }
}

/* Sticky head: renforcer lisibilité (opt-in, compatible avec ton sticky) */
.spo-table--stickyHead thead th{
  backdrop-filter: saturate(140%) blur(4px);
}

/* =========================================================
   4) OPTIONAL — WRAPPER PRESETS (plugin) : passerelles de tokens
   - Ne change rien si non utilisé
   - Permet à tes presets d’aligner rapidement les styles tables/badges/hover
========================================================= */
.spo-preset{
  /* Bridge : si le preset définit --p-* (plugin), on peut les réutiliser côté helpers */
  --spo-ring: var(--spo-ring, rgba(17,58,115,.18));
}

.spo-preset .spo-table{
  /* Surfaces cohérentes dans les presets (best effort) */
  background: var(--spo-p-surface, rgba(255,255,255,.96));
}

.spo-preset .spo-pill{
  background: color-mix(in srgb, var(--spo-p-line, rgba(15,42,68,.12)) 35%, transparent);
  border-color: var(--spo-p-line, rgba(15,42,68,.12));
  color: var(--spo-p-ink, rgba(15,42,68,.96));
}

/* Fallback si color-mix non supporté */
@supports not (color: color-mix(in srgb, #000 10%, #fff)){
  .spo-preset .spo-pill{
    background: rgba(15,42,68,.05);
  }
}