/* ============================================================
   StarTech Academy - Feuille de style commune
   Neuromorphisme : variables, composants, animations
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --neu-bg: #e8ecf1;
  --neu-light: #ffffff;
  --neu-shadow: #b8bec9;
  --text-dark: #2d3748;
}

/* ----- Base ----- */
body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--neu-bg);
  color: var(--text-dark);
  overflow-x: hidden;
}

/* Pages avec navbar fixe en haut (sites vitrine) */
body.with-navbar {
  padding-top: 84px;
}

/* ----- Composants neuromorphiques ----- */
.neu-flat {
  background: var(--neu-bg);
  box-shadow: 10px 10px 20px var(--neu-shadow), -10px -10px 20px var(--neu-light);
  border-radius: 20px;
}

.neu-inset {
  background: var(--neu-bg);
  box-shadow: inset 8px 8px 16px var(--neu-shadow), inset -8px -8px 16px var(--neu-light);
  border-radius: 20px;
}

.neu-button {
  background: var(--neu-bg);
  box-shadow: 6px 6px 12px var(--neu-shadow), -6px -6px 12px var(--neu-light);
  transition: all .3s ease;
  border-radius: 12px;
}

.neu-button:hover {
  box-shadow: 2px 2px 5px var(--neu-shadow), -2px -2px 5px var(--neu-light);
  transform: translateY(1px);
}

.neu-card {
  background: var(--neu-bg);
  box-shadow: 15px 15px 30px var(--neu-shadow), -15px -15px 30px var(--neu-light);
  transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .2);
}

.neu-card:hover {
  transform: translateY(-6px);
  box-shadow: 20px 20px 40px var(--neu-shadow), -20px -20px 40px var(--neu-light);
}

/* ----- Animations ----- */
.animate-fade-up {
  animation: fadeUp .8s ease-out both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-400 { animation-delay: .4s; }

/* ----- Carte mise en avant (tarifs) ----- */
.pricing-popular {
  border: 2px solid #6366f1;
}

/* ----- Sidebar du tableau de bord ----- */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border-radius: .75rem;
  font-weight: 500;
  font-size: .925rem;
  transition: all .2s ease;
}

.sidebar-link:hover {
  color: #4f46e5;
  background: rgba(255, 255, 255, .45);
}

.sidebar-link.active {
  color: #4f46e5;
  box-shadow: inset 4px 4px 8px var(--neu-shadow), inset -4px -4px 8px var(--neu-light);
}

/* ----- Formulaires -----
   Les cases a cocher / radios / fichiers sont exclues :
   la regle globale ecrasait leur rendu (etat coche invisible). */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select {
  background: var(--neu-bg) !important;
  border: none !important;
  box-shadow: inset 4px 4px 8px var(--neu-shadow), inset -4px -4px 8px var(--neu-light) !important;
}

/* ----- Cases a cocher (style neumorphe visible) ----- */
input[type="checkbox"].checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  border-radius: .55rem;
  background: var(--neu-bg) !important;
  box-shadow: inset 2px 2px 5px var(--neu-shadow), inset -2px -2px 5px var(--neu-light) !important;
  cursor: pointer;
  position: relative;
  transition: background .15s ease;
}
input[type="checkbox"].checkbox:checked {
  background: #4f46e5 !important;
}
input[type="checkbox"].checkbox::after {
  content: '';
  position: absolute;
  left: .42rem;
  top: .18rem;
  width: .32rem;
  height: .62rem;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  opacity: 0;
}
input[type="checkbox"].checkbox:checked::after {
  opacity: 1;
}

table tr {
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

/* ----- Utilitaires (styles extraits des pages) ----- */
.navbar-neu {
  backdrop-filter: blur(10px);
  background: rgba(232, 236, 241, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.logo-box {
  background: var(--neu-bg);
  box-shadow: 6px 6px 12px var(--neu-shadow), -6px -6px 12px var(--neu-light);
  border-radius: 10px;
}

.sidebar-panel {
  background: var(--neu-bg);
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}

.bounce-slow {
  animation-duration: 3s;
}

.inset-btn {
  box-shadow: inset 3px 3px 6px var(--neu-shadow), inset -3px -3px 6px var(--neu-light);
}

.card-border-red {
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.card-border-indigo {
  border: 2px solid rgba(99, 102, 241, 0.35);
}

/* ----- Bouton WhatsApp flottant ----- */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  padding: 1rem 1.25rem;
  border-radius: 9999px;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.45);
  transition: transform .2s ease;
}

.whatsapp-float:hover {
  transform: translateY(-2px);
}

/* ============================================================
   Theme clair / sombre
   ============================================================ */

/* Variables sombres sur <html class="dark"> */
html.dark {
  --neu-bg: #171a21;
  --neu-light: #21262f;
  --neu-shadow: #0d1016;
  --text-dark: #e5e7eb;
  background-color: var(--neu-bg);
  color-scheme: dark;
}

html.dark body {
  background-color: var(--neu-bg);
  color: var(--text-dark);
}

html.dark .navbar-neu {
  background: rgba(23, 26, 33, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

html.dark .sidebar-panel {
  border-right-color: rgba(255, 255, 255, 0.06);
}

/* Textes */
html.dark .text-slate-100 { color: #f1f5f9; }
html.dark .text-slate-200 { color: #e2e8f0; }
html.dark .text-slate-300 { color: #cbd5e1; }
html.dark .text-slate-400 { color: #94a3b8; }
html.dark .text-slate-500 { color: #a0aec0; }
html.dark .text-slate-600 { color: #b0bccb; }
html.dark .text-slate-700 { color: #cbd5e1; }
html.dark .text-slate-800 { color: #e2e8f0; }
html.dark .text-slate-900 { color: #f1f5f9; }

/* Bordures et séparateurs */
html.dark .border-slate-100 { border-color: rgba(148, 163, 184, 0.16); }
html.dark .border-slate-200 { border-color: rgba(148, 163, 184, 0.2); }
html.dark .border-slate-300 { border-color: rgba(148, 163, 184, 0.28); }
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(148, 163, 184, 0.16); }

/* Fonds utilitaires */
html.dark .bg-white { background-color: #1d212b; }
html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.12); }
html.dark .bg-slate-200 { background-color: #2a303c; }
html.dark .bg-slate-200\/60 { background-color: rgba(42, 48, 60, 0.6); }
html.dark .bg-slate-50\/50 { background-color: rgba(30, 34, 42, 0.5); }
html.dark .bg-white\/5 { background-color: rgba(255, 255, 255, 0.06); }
html.dark .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
html.dark .bg-white\/40 { background-color: rgba(255, 255, 255, 0.06); }
html.dark .bg-white\/60 { background-color: rgba(255, 255, 255, 0.08); }

/* États au survol */
html.dark .hover\:bg-white\/40:hover { background-color: rgba(255, 255, 255, 0.06); }
html.dark .hover\:bg-white\/60:hover { background-color: rgba(255, 255, 255, 0.08); }
html.dark .hover\:bg-slate-50:hover { background-color: rgba(255, 255, 255, 0.06); }

/* Bordures arbitraires (Tailwind) */
html.dark .border-white { border-color: var(--neu-bg); }
html.dark .border-\[\#e8ecf1\] { border-color: rgba(148, 163, 184, 0.2); }

/* Fonds de page arbitraires (Tailwind) -> variables neuromorphiques */
html.dark .bg-\[\#e8ecf1\] { background-color: var(--neu-bg); }
html.dark .bg-\[\#f0f4f8\] { background-color: var(--neu-bg); }

/* Ombres neuromorphiques arbitraires (Tailwind) -> variables */
html.dark .shadow-\[6px_6px_12px_\#b8bec9\2c -6px_-6px_12px_\#ffffff\] {
  box-shadow: 6px 6px 12px var(--neu-shadow), -6px -6px 12px var(--neu-light);
}
html.dark .shadow-\[10px_10px_20px_\#b8bec9\2c -10px_-10px_20px_\#ffffff\] {
  box-shadow: 10px 10px 20px var(--neu-shadow), -10px -10px 20px var(--neu-light);
}

/* Transition douce lors du changement de thème */
html, body, .neu-button, .neu-card, .neu-flat, .neu-inset, .logo-box, .navbar-neu, .sidebar-panel {
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
}