/* ============================================================
   SIS Digital Factory — Design System Commun
   Utilisé par toutes les pages du site
   ============================================================ */

/* ============================================================
   VARIABLES GLOBALES
   ============================================================ */
:root {
  /* BUG FIXÉ : --sis-blue-* n'était pas défini → tout le bleu était cassé */
  --sis-blue-50:  #EAF1FE;
  --sis-blue-100: #C9D9FD;
  --sis-blue-200: #94B3FA;
  --sis-blue-300: #5C8CF8;
  --sis-blue-400: #3A7BF7;
  --sis-blue-500: #1F6CF7;
  --sis-blue-600: #155BD8;
  --sis-blue-700: #1149AA;
  --sis-blue-800: #0E3A85;
  --sis-blue-900: #0A2A60;

  /* Fondations claires */
  --sis-light-50:  #D8E4F0;
  --sis-light-100: #C9DBEC;
  --sis-light-200: #B2CBE1;

  /* Textes */
  --sis-text-primary:   #0F172A;
  --sis-text-secondary: #334155;
  --sis-text-muted:     #475569;

  /* Couleurs fonctionnelles */
  --sis-success:      #047857;
  --sis-success-soft: rgba(16, 185, 129, 0.15);
  --sis-info-soft:    rgba(31, 108, 247, 0.10);

  /* Glassmorphisme clair */
  --sis-glass-bg:            rgba(255, 255, 255, 0.70);
  --sis-glass-bg-strong:     rgba(255, 255, 255, 0.95);
  --sis-glass-border:        rgba(15, 23, 42, 0.10);
  --sis-glass-border-strong: rgba(15, 23, 42, 0.18);
  --sis-glass-border-accent: rgba(31, 108, 247, 0.5);

  /* Layout */
  --sis-header-height: 80px;

  /* Dégradé principal — utilisé partout */
  --sis-gradient-primary: linear-gradient(135deg, var(--sis-blue-500) 0%, var(--sis-blue-800) 100%);
}

/* ============================================================
   CORPS DE PAGE
   ============================================================ */
body {
  background: linear-gradient(135deg, var(--sis-light-50) 0%, #EAF2F9 100%);
  background-attachment: fixed;
  color: var(--sis-text-primary);
}

/* Halos bleus décoratifs */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 8%,  rgba(31, 108, 247, 0.12), transparent 40%),
    radial-gradient(circle at 88% 14%, rgba(31, 108, 247, 0.08), transparent 45%),
    radial-gradient(circle at 50% 88%, rgba(31, 108, 247, 0.10), transparent 50%);
  background-attachment: fixed;
  z-index: -2;
  pointer-events: none;
}

/* Grille technique douce */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: -1;
}

/* ============================================================
   SCROLLBAR CUSTOM
   ============================================================ */
::-webkit-scrollbar         { width: 6px; }
::-webkit-scrollbar-track   { background: var(--sis-light-50); }
::-webkit-scrollbar-thumb   { background: var(--sis-blue-200); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sis-blue-400); }

/* ============================================================
   UTILITAIRES DÉGRADÉ
   ============================================================ */

/* Texte dégradé — applicable sur tout élément texte */
.gradient-text {
  background: var(--sis-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Fond dégradé — remplace bg-[var(--sis-blue-600)] partout */
.gradient-bg {
  background: var(--sis-gradient-primary) !important;
}

/* Logo mark */
.logo-mark-gradient {
  background: var(--sis-gradient-primary);
}

/* ============================================================
   BLOCS SOLIDES (anti-transparence)
   ============================================================ */
.solid-primary {
  background: var(--sis-gradient-primary) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

.solid-white {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* ============================================================
   COMPOSANTS GLASS
   ============================================================ */
.glass-card {
  background: var(--sis-glass-bg);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--sis-glass-border);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 8px 24px rgba(15, 23, 42, 0.05);
}

.glass-card--strong {
  background: var(--sis-glass-bg-strong);
  border-color: var(--sis-glass-border-strong);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 16px 40px rgba(15, 23, 42, 0.08);
}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  background: var(--sis-gradient-primary) !important;
  color: #ffffff !important;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 12px;
  transition: transform 250ms ease-out, box-shadow 250ms ease-out;
  box-shadow: 0 4px 16px rgba(21, 91, 216, 0.45) !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
/* Shimmer interne au survol */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  border-radius: inherit;
}
.btn-primary:hover {
  box-shadow: 0 8px 26px rgba(21, 91, 216, 0.55) !important;
  transform: translateY(-2px);
}
.btn-primary:hover::after {
  opacity: 1;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  background: #ffffff !important;
  /* BUG FIXÉ : var(--sis-blue-200) est maintenant défini */
  border: 1px solid var(--sis-blue-200) !important;
  color: var(--sis-blue-700) !important;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 12px;
  transition: all 250ms ease-out;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: pointer;
  text-decoration: none;
}
.btn-secondary:hover {
  background: #F1F5F9 !important;
  border-color: var(--sis-blue-400) !important;
  color: var(--sis-blue-800) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 108, 247, 0.15);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes sis-fade-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.observe-fade {
  opacity: 0;
}

.animate-in {
  animation: sis-fade-in 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ============================================================
   EFFETS SURVOL (hover)
   ============================================================ */
.hover-scale {
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1) !important;
  will-change: transform, box-shadow, border-color, background-color;
  position: relative;
}
.hover-scale:hover {
  transform: scale(1.02) !important;
  background-color: #ffffff !important;
  border-color: var(--sis-blue-400) !important;
  box-shadow:
    0 0 0 4px rgba(31, 108, 247, 0.1),
    0 20px 40px rgba(15, 23, 42, 0.08) !important;
  z-index: 10;
}

.hover-scale-solid {
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1) !important;
  will-change: transform, box-shadow;
  position: relative;
}
.hover-scale-solid:hover {
  transform: scale(1.02) !important;
  box-shadow:
    0 0 0 4px rgba(21, 91, 216, 0.3),
    0 24px 48px rgba(21, 91, 216, 0.25) !important;
  z-index: 10;
}

/* ============================================================
   MENU MOBILE
   ============================================================ */
#mobile-menu {
  transition: opacity 200ms ease, transform 200ms ease;
  top: var(--sis-header-height);
}