/* ==========================================================================
   Vistag Design System — CSS utilitaire (remplace Tailwind CDN)
   Fichier autogénéré : contient uniquement les classes utilisées dans le projet.
   ========================================================================== */

/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
  --vistag-blue: #0A39F6;
  --color-black: #000;
  --color-white: #fff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --green-100: #dcfce7;
  --green-300: #86efac;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --blue-100: #dbeafe;
  --blue-300: #93c5fd;
  --blue-700: #1d4ed8;
  --yellow-100: #fef9c3;
  --yellow-300: #fde047;
  --yellow-500: #eab308;
  --yellow-700: #a16207;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;
}

/* ── Reset léger ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }

/* ── Typographie ─────────────────────────────────────────────────────────── */
.font-\[Safiro\]  { font-family: "Safiro", Arial, sans-serif; }
.text-xs    { font-size: 0.75rem; line-height: 1rem; }
.text-sm    { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg    { font-size: 1.125rem; line-height: 1.75rem; }
.text-2xl   { font-size: 1.5rem; line-height: 2rem; }
.text-3xl   { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl   { font-size: 2.25rem; line-height: 2.5rem; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.uppercase      { text-transform: uppercase; }
.tracking-tight   { letter-spacing: -0.025em; }
.tracking-wide    { letter-spacing: 0.025em; }
.tracking-wider   { letter-spacing: 0.05em; }
.tracking-widest  { letter-spacing: 0.1em; }
.leading-tight    { line-height: 1.25; }
.leading-relaxed  { line-height: 1.625; }
.text-center  { text-align: center; }
.text-left    { text-align: left; }

/* ── Couleurs texte ──────────────────────────────────────────────────────── */
.text-black     { color: #000; }
.text-white     { color: #fff; }
.text-gray-500  { color: var(--gray-500); }
.text-gray-600  { color: var(--gray-600); }
.text-gray-700  { color: var(--gray-700); }
.text-red-500   { color: var(--red-500); }
.text-red-600   { color: var(--red-600); }
.text-red-700   { color: var(--red-700); }
.text-green-300 { color: var(--green-300); }
.text-green-600 { color: var(--green-600); }
.text-green-700 { color: var(--green-700); }
.text-blue-300  { color: var(--blue-300); }
.text-blue-700  { color: var(--blue-700); }
.text-yellow-300 { color: var(--yellow-300); }
.text-yellow-700 { color: var(--yellow-700); }
.text-white\/40 { color: rgba(255,255,255,0.4); }
.text-white\/50 { color: rgba(255,255,255,0.5); }
.text-white\/60 { color: rgba(255,255,255,0.6); }
.text-\[\#0A39F6\]  { color: #0A39F6; }
.text-\[\#0b0c0f\]  { color: #0b0c0f; }
.text-primary { color: var(--vistag-blue); }

/* ── Couleurs fond ───────────────────────────────────────────────────────── */
.bg-white   { background-color: #fff; }
.bg-black   { background-color: #000; }
.bg-white\/95 { background-color: rgba(255,255,255,0.95); }
.bg-gray-50   { background-color: var(--gray-50); }
.bg-gray-100  { background-color: var(--gray-100); }
.bg-gray-200  { background-color: var(--gray-200); }
.bg-gray-300\/50 { background-color: rgba(209,213,219,0.5); }
.bg-gray-300\/60 { background-color: rgba(209,213,219,0.6); }
.bg-red-50    { background-color: var(--red-50); }
.bg-red-100   { background-color: var(--red-100); }
.bg-green-100 { background-color: var(--green-100); }
.bg-green-500\/20 { background-color: rgba(34,197,94,0.2); }
.bg-blue-100  { background-color: var(--blue-100); }
.bg-blue-300\/40  { background-color: rgba(147,197,253,0.4); }
.bg-blue-500\/20  { background-color: rgba(59,130,246,0.2); }
.bg-yellow-100    { background-color: var(--yellow-100); }
.bg-yellow-500\/20 { background-color: rgba(234,179,8,0.2); }
.bg-\[\#0A39F6\]   { background-color: #0A39F6; }
.bg-\[\#0A39F6\]\/10 { background-color: rgba(10,57,246,0.1); }
.bg-\[\#0b0c0f\]   { background-color: #0b0c0f; }
.bg-primary { background-color: var(--vistag-blue); }

/* ── Gradients ───────────────────────────────────────────────────────────── */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.from-neutral-900  { --tw-gradient-from: var(--neutral-900); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.via-neutral-800   { --tw-gradient-stops: var(--tw-gradient-from), var(--neutral-800), var(--tw-gradient-to, transparent); }
.to-neutral-700    { --tw-gradient-to: var(--neutral-700); }
.from-gray-800     { --tw-gradient-from: var(--gray-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-gray-600       { --tw-gradient-to: var(--gray-600); }
.from-\[\#f8fafc\] { --tw-gradient-from: #f8fafc; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-\[\#eef2ff\]   { --tw-gradient-to: #eef2ff; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.block        { display: block; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.inline-block { display: inline-block; }
.hidden       { display: none; }
.grid         { display: grid; }

.flex-col   { flex-direction: column; }
.items-center    { align-items: center; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }

.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-16 { gap: 4rem; }
.gap-20 { gap: 5rem; }

.grid-cols-1    { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* ── Spacing : marges ────────────────────────────────────────────────────── */
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-16 { margin-top: 4rem; }

/* ── Spacing : padding ───────────────────────────────────────────────────── */
.p-5   { padding: 1.25rem; }
.p-6   { padding: 1.5rem; }
.p-7   { padding: 1.75rem; }
.p-8   { padding: 2rem; }
.px-1  { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3  { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4  { padding-left: 1rem; padding-right: 1rem; }
.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1  { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4  { padding-top: 1rem; padding-bottom: 1rem; }
.py-8  { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* ── Tailles ─────────────────────────────────────────────────────────────── */
.w-4  { width: 1rem; }
.w-6  { width: 1.5rem; }
.w-7  { width: 1.75rem; }
.w-8  { width: 2rem; }
.w-9  { width: 2.25rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-full { width: 100%; }
.w-\[340px\] { width: 340px; }
.w-\[360px\] { width: 360px; }

.h-4  { height: 1rem; }
.h-5  { height: 1.25rem; }
.h-6  { height: 1.5rem; }
.h-7  { height: 1.75rem; }
.h-8  { height: 2rem; }
.h-9  { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-full { height: 100%; }
.h-\[210px\] { height: 210px; }
.h-\[220px\] { height: 220px; }

.min-h-screen    { min-height: 100vh; }
.min-h-\[20px\]  { min-height: 20px; }
.min-w-\[20px\]  { min-width: 20px; }

.max-w-md        { max-width: 28rem; }
.max-w-sm        { max-width: 24rem; }
.max-w-xl        { max-width: 36rem; }
.max-w-6xl       { max-width: 72rem; }
.max-w-7xl       { max-width: 80rem; }
.max-w-screen-xl { max-width: 1280px; }

/* ── Positionnement ──────────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.top-0    { top: 0; }
.top-6    { top: 1.5rem; }
.right-6  { right: 1.5rem; }
.right-7  { right: 1.75rem; }
.bottom-6 { bottom: 1.5rem; }
.bottom-7 { bottom: 1.75rem; }
.left-6   { left: 1.5rem; }
.left-7   { left: 1.75rem; }
.z-50     { z-index: 50; }
.-top-2   { top: -0.5rem; }
.-right-2 { right: -0.5rem; }
.-inset-6 { inset: -1.5rem; }
.-inset-8 { inset: -2rem; }

/* ── Overflow ────────────────────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }

/* ── Bordures ────────────────────────────────────────────────────────────── */
.border     { border: 1px solid var(--gray-200); }
.border-b   { border-bottom: 1px solid var(--gray-200); }
.border-t   { border-top: 1px solid var(--gray-200); }
.border-gray-100 { border-color: var(--gray-100); }
.border-gray-200 { border-color: var(--gray-200); }
.border-gray-300 { border-color: var(--gray-300); }
.border-red-200  { border-color: var(--red-200); }
.border-primary  { border-color: var(--vistag-blue); }

.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-3xl  { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Ombres & Effets ─────────────────────────────────────────────────────── */
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.shadow-\[0_30px_80px_rgba\(0\,0\,0\,0\.45\)\] { box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.blur-2xl { filter: blur(40px); }
.blur-3xl { filter: blur(64px); }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.object-contain { object-fit: contain; }

/* ── Transitions ─────────────────────────────────────────────────────────── */
.transition { transition: all 0.15s ease; }

/* ── Outline & Focus ─────────────────────────────────────────────────────── */
.outline-none { outline: none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(10, 57, 246, 0.4); }
.focus\:ring-\[\#0A39F6\]:focus { box-shadow: 0 0 0 2px rgba(10, 57, 246, 0.4); }
.focus\:ring-primary:focus { box-shadow: 0 0 0 2px rgba(10, 57, 246, 0.4); }
.focus\:border-black:focus { border-color: #000; }
.focus\:border-transparent:focus { border-color: transparent; }

/* ── Hover ───────────────────────────────────────────────────────────────── */
.hover\:opacity-90:hover { opacity: 0.9; }
.hover\:bg-\[\#0A39F6\]:hover { background-color: #0A39F6; }
.hover\:bg-black:hover { background-color: #000; }
.hover\:bg-gray-50:hover { background-color: var(--gray-50); }
.hover\:bg-gray-100:hover { background-color: var(--gray-100); }
.hover\:text-black:hover { color: #000; }
.hover\:text-white:hover { color: #fff; }
.hover\:text-\[\#0A39F6\]:hover { color: #0A39F6; }
.hover\:text-primary:hover { color: var(--vistag-blue); }
.hover\:border-\[\#0A39F6\]:hover { border-color: #0A39F6; }
.hover-primary:hover {
  background-color: var(--vistag-blue);
  color: white;
  border-color: var(--vistag-blue);
}

/* ── Space-y helper ──────────────────────────────────────────────────────── */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* ── Card 3D effect (activation pages) ───────────────────────────────────── */
.card-3d {
  transform: perspective(1400px) rotateX(5deg) rotateY(-6deg);
}

/* ── Admin Panel — nav-link, stat-card, badge ────────────────────────────── */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: all 0.15s ease;
}
.nav-link:hover {
  background-color: var(--gray-100);
  color: #000;
}
.nav-link.active {
  background-color: #000;
  color: #fff;
}

.stat-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  padding: 1.25rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── Responsive — sm: (640px) ────────────────────────────────────────────── */
@media (min-width: 640px) {
  .sm\:flex-row      { flex-direction: row; }
  .sm\:items-center  { align-items: center; }
  .sm\:justify-between { justify-content: space-between; }
}

/* ── Responsive — md: (768px) ────────────────────────────────────────────── */
@media (min-width: 768px) {
  .md\:flex   { display: flex; }
  .md\:p-10   { padding: 2.5rem; }
}

/* ── Responsive — lg: (1024px) ───────────────────────────────────────────── */
@media (min-width: 1024px) {
  .lg\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:justify-end  { justify-content: flex-end; }
  .lg\:text-left    { text-align: left; }
}

/* ── Font synthesis ──────────────────────────────────────────────────────── */
body { font-synthesis: weight; }