/* ==========================================================================
   Mx Solutions - Core CSS Design - 2025/2026
   Design Premium Glassmorphism | Contraste AAA | Performant Mobile-First
   ========================================================================== */

/* 1. VARIABLES CSS - Thème & Design System */
:root {
  /* === COULEURS BLEUTÉES BRAND === */
  --mx-color-primary: #0f2e8a;
  --mx-color-primary-soft: #338ccc;
  --mx-color-bg: #edf1f7;
  --mx-color-surface: #ffffff;
  --mx-color-text: #111827;
  --mx-color-muted: #6b7280;
  --mx-color-border: #d1d5e5;
  
  /* === TYPOGRAPHIE & ESPACES === */
  --mx-font-size-base: 16px;
  --mx-font-family-ui: 'Inter', 'SF Pro Display', system-ui, sans-serif;
  --mx-line-height-loose: 1.75;
  --mx-space-xs: 0.5rem;
  --mx-space-sm: 1rem;
  --mx-space-md: 1.5rem;
  --mx-space-lg: 3rem;
  --mx-space-xl: 4.5rem;
  
  /* === FORMES & OMBRES === */
  --mx-radius-lg: 1.2rem;
  --mx-radius-md: 0.8rem;
  --mx-radius-sm: 0.4rem;
  --mx-shadow-soft: 0 18px 45px rgba(15, 46, 138, 0.16);
  
  /* === GLASSMORPHISM LISIBLES 2025 === */
  --mx-glass-readable: rgba(255, 255, 255, 0.92);
  --mx-glass-border-strong: rgba(15, 46, 138, 0.22);
  --mx-glass-blur: blur(20px);
  --mx-text-high-contrast: #0f172a;
  
  /* === ANIMATIONS FLUIDES === */
  --mx-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --mx-transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* === TOGGLE THÈME === */
  --mx-toggle-track: #0f172a;
  --mx-toggle-track-light: #e5f0ff;
  --mx-toggle-sun: #facc15;
  --mx-toggle-moon: #e5e7eb;
  --mx-toggle-sky: #0b1120;
}

/* THÈME SOMBRE */
:root[data-theme="dark"] {
  --mx-color-bg: #050816;
  --mx-color-surface: #050816;
  --mx-color-text: #e5e7eb;
  --mx-color-muted: #9ca3af;
  --mx-color-border: #1f2937;
  --mx-shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.7);
  --mx-glass-readable: rgba(20, 25, 40, 0.98);
  --mx-text-high-contrast: hsl(200, 100%, 85%);
}

/* 2. RESET & BASE */
html {
  box-sizing: border-box;
  font-size: var(--mx-font-size-base);
}

*, *::before, *::after {
  box-sizing: inherit;
}

body.mx-legal-body {
  margin: 0;
  padding: 0;
  font-family: var(--mx-font-family-ui);
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  line-height: var(--mx-line-height-loose);
  font-feature-settings: 'cv11', 'ss01';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: 
    radial-gradient(circle at 20% 80%, var(--mx-color-primary-soft) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, var(--mx-color-primary) 0%, transparent 50%),
    radial-gradient(circle at top left, #ffffff 0, var(--mx-color-bg) 45%, #0b1424 100%);
  color: var(--mx-color-text);
  animation: mx-fade-in 0.6s var(--mx-transition-smooth);
}

@keyframes mx-fade-in {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* 3. LAYOUT PRINCIPAL - Grid Moderne */
.mx-legal-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--mx-space-lg) var(--mx-space-md);
}

/* 4. ARTICLE PRINCIPAL - Glassmorphism Premium */
.mx-legal-article {
  width: 100%;
  max-width: 860px;
  background: var(--mx-glass-readable);
  backdrop-filter: var(--mx-glass-blur);
  border: 1px solid var(--mx-glass-border-strong);
  border-radius: var(--mx-radius-lg);
  box-shadow: 
    var(--mx-shadow-soft),
    0 8px 32px rgba(15, 46, 138, 0.15);
  padding: var(--mx-space-xl) var(--mx-space-lg);
  color: var(--mx-text-high-contrast);
  transition: all var(--mx-transition-smooth);
  margin: 0 auto;
}

/* 5. TYPOGRAPHIE & CONTENU */
.mx-legal-section p {
  margin: var(--mx-space-sm) 0;
  font-size: 1rem;
  line-height: var(--mx-line-height-loose);
  text-align: justify;
  hyphens: none;
}

.mx-legal-section ul {
  list-style: none;
  margin: var(--mx-space-sm) 0;
  padding-left: var(--mx-space-md);
}

.mx-legal-section li {
  position: relative;
  margin: var(--mx-space-xs) 0;
  padding: var(--mx-space-xs) 0 var(--mx-space-xs) var(--mx-space-sm);
  transition: all var(--mx-transition-fast);
}

.mx-legal-section li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%, 
      #ffffff 0, 
      rgba(51, 140, 204, 0.95) 40%, 
      var(--mx-color-primary) 100%);
  box-shadow: 0 0 0 2px var(--mx-glass-readable);
  transition: all var(--mx-transition-fast);
}

.mx-legal-section li:hover::before {
  transform: scale(1.2) rotate(90deg);
  box-shadow: 0 0 12px var(--mx-color-primary-soft);
}

.mx-legal-section div {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0.5rem;
  row-gap: 0.4rem;
}

.mx-legal-section div span:nth-child(odd) {
  font-weight: 600;
  white-space: nowrap;
}

/* 6. TOGGLE THÈME - Animation 3D Premium */
.mx-theme-toggle {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mx-theme-toggle-track {
  position: relative;
  width: 54px;
  height: 30px;
  border-radius: 999px;
  background: 
    linear-gradient(135deg, var(--mx-glass-readable), rgba(51, 140, 204, 0.3));
  backdrop-filter: var(--mx-glass-blur);
  box-shadow: 
    0 8px 32px rgba(15, 46, 138, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  overflow: hidden;
  transition: all 0.35s ease;
}

.mx-theme-toggle:hover .mx-theme-toggle-track {
  transform: scale(1.05);
  box-shadow: 0 12px 40px rgba(15, 46, 138, 0.3);
}

.mx-theme-toggle-icon {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  transform: translateY(-50%);
  transition: all 0.35s ease;
}

/* SOLEIL */
.mx-theme-icon-sun {
  left: 6px;
  background: radial-gradient(circle at 30% 30%, #ffffff 0, var(--mx-toggle-sun) 60%, #f59e0b 100%);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.8);
}

/* LUNE */
.mx-theme-icon-moon {
  right: 6px;
  background: radial-gradient(circle at 30% 30%, #ffffff 0, #e5e7eb 40%, #9ca3af 100%);
  box-shadow: 0 0 8px rgba(148, 163, 184, 0.7);
  opacity: 0;
}

.mx-theme-icon-moon::before,
.mx-theme-icon-moon::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  background: rgba(55, 65, 81, 0.5);
}

.mx-theme-icon-moon::before {
  width: 6px; height: 6px; top: 4px; left: 4px;
}

.mx-theme-icon-moon::after {
  width: 4px; height: 4px; bottom: 4px; right: 5px;
}

/* ÉTATS THÈME */
:root[data-theme="dark"] .mx-theme-toggle-track {
  background: linear-gradient(135deg, var(--mx-toggle-sky), #020617);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.9);
}

:root[data-theme="dark"] .mx-theme-icon-sun { transform: translate(18px, -50%); opacity: 0; }
:root[data-theme="dark"] .mx-theme-icon-moon { transform: translate(-18px, -50%); opacity: 1; }

:root:not([data-theme="dark"]) .mx-theme-icon-sun { transform: translate(0, -50%); opacity: 1; }
:root:not([data-theme="dark"]) .mx-theme-icon-moon { transform: translate(0, -50%); opacity: 0; }

:root[data-theme="dark"] .mx-legal-header h1,
:root[data-theme="dark"] .mx-legal-section h2,
:root[data-theme="dark"] .mx-legal-section h3 {
  color: var(--mx-text-high-contrast) !important;
}

:root[data-theme="dark"] .mx-legal-section a,
:root[data-theme="dark"] .mx-legal-footer a {
  text-decoration: none;
  color: #60a5fa !important; /* Bleu clair lisible */
}

:root[data-theme="dark"] .mx-legal-section a:hover,
:root[data-theme="dark"] .mx-legal-footer a:hover {
  color: #93c5fd !important; /* Bleu encore plus clair */
}


/* ✨ MICRO-INTERACTIONS MODERNES */
.mx-legal-section a::after,
.mx-legal-footer a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mx-color-primary), var(--mx-color-primary-soft));
  border-radius: 1px;
  transition: width var(--mx-transition-fast);
}

.mx-legal-section a:hover::after,
.mx-legal-footer a:hover::after {
  width: 100%; /* Sous-lignage animé fluide */
}

/* 💫 GLOW EFFET 2025 (optionnel premium) */
.mx-legal-section a:hover,
.mx-legal-footer a:hover {
  color: var(--mx-color-primary-soft);
  text-shadow: 0 0 8px rgba(51, 140, 204, 0.4); /* Glow subtil */
}

/* DARK MODE ADAPTATIF */
:root[data-theme="dark"] .mx-legal-section a,
:root[data-theme="dark"] .mx-legal-footer a { 
  color: #60a5fa; 
}

:root[data-theme="dark"] .mx-legal-section a:hover,
:root[data-theme="dark"] .mx-legal-footer a:hover {
  color: #93c5fd;
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.6);
}

/* 7. FOOTER */
.mx-legal-footer {
  margin-top: var(--mx-space-lg);
  padding-top: var(--mx-space-md);
  border-top: 1px solid var(--mx-color-border);
  font-size: 0.85rem;
  color: var(--mx-color-muted);
  text-align: center;
}

.mx-legal-footer p { margin: var(--mx-space-xs) 0; }
.mx-legal-footer a { 
  color: var(--mx-color-primary); 
  text-decoration: underline; 
  transition: var(--mx-transition-fast);
}
.mx-legal-footer a:hover { text-decoration: none; }

/* 8. RESPONSIVE - Mobile First */
@media (min-width: 768px) {
  .mx-legal-page { padding: var(--mx-space-xl); }
  .mx-legal-article { padding: var(--mx-space-xl); }
}

@media (max-width: 480px) {
  .mx-legal-article {
    background: rgba(255, 255, 255, 0.97) !important;
    padding: var(--mx-space-lg) var(--mx-space-md);
    margin: 0 0.5rem;
  }
}

/* 9. ACCESSIBILITÉ */
@media (prefers-reduced-motion: reduce) {
  * { 
    animation-duration: 0.01ms !important; 
    transition-duration: 0.01ms !important; 
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]) {
    /* Support automatique système */
  }
}