/* ================================================================
   FRENCHY IA — Design Tokens partagés
   Importé par toutes les pages pour garantir la cohérence de marque
   ================================================================ */
:root {
  /* Brand */
  --blue:        #4f7fff;
  --blue-dark:   #3d68ff;
  --blue-glow:   rgba(79,127,255,.25);
  --purple:      #b05fff;
  --pink:        #ff4fc8;

  /* Gradient utilitaires */
  --grad-brand:  linear-gradient(135deg, var(--blue), var(--purple));
  --grad-full:   linear-gradient(90deg, var(--blue), var(--purple), var(--pink));

  /* Backgrounds */
  --bg:          #07071a;
  --bg2:         #0a0a20;
  --surface:     rgba(255,255,255,0.03);
  --surface2:    rgba(255,255,255,0.06);
  --surface3:    rgba(255,255,255,0.10);

  /* Borders */
  --border:      rgba(255,255,255,0.07);
  --border-md:   rgba(255,255,255,0.12);
  --border-active: rgba(79,127,255,0.35);

  /* Text */
  --text:        #eeeeff;
  --text-secondary: rgba(238,238,255,0.72);
  --text-muted:  rgba(238,238,255,0.42);

  /* Semantic */
  --green:       #10d98a;
  --green-bg:    rgba(16,217,138,0.12);
  --red:         #ff5e5e;
  --red-bg:      rgba(255,94,94,0.12);
  --orange:      #ffad3b;
  --orange-bg:   rgba(255,173,59,0.12);

  /* Layout */
  --sidebar-w:   240px;
  --nav-h:       64px;
  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   20px;
  --radius-xl:   28px;

  /* Shadows */
  --shadow-sm:   0 2px 12px rgba(0,0,0,0.3);
  --shadow-md:   0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.5);

  /* Cards */
  --card-bg:     #0f1022;
  --card-bg2:    #141830;

  /* Fonts */
  --font-display: 'Syne', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
}

/* ── Skeleton loaders ── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--radius);
}
.skeleton-text  { height: 14px; margin-bottom: 8px; border-radius: 6px; }
.skeleton-title { height: 22px; width: 60%; margin-bottom: 12px; border-radius: 6px; }
.skeleton-img   { width: 100%; aspect-ratio: 4/3; border-radius: var(--radius) var(--radius) 0 0; }
.skeleton-card  { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; padding: 16px; }