/* ════════════════════════════════════════════════════════════
   WISEGEN SOCIAL — main.css
   Fondations : variables, reset, typographie, animations
   Mobile First — conçu pour 99% d'utilisateurs mobile
   ════════════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── VARIABLES GLOBALES ── */
:root {
  /* === COULEURS MARQUE === */
  --blue:         #3355FF;
  --blue-dark:    #2244ee;
  --blue-light:   #EEF1FF;
  --blue-soft:    rgba(51,85,255,.10);
  --blue-glow:    rgba(51,85,255,.25);

  /* === NEUTRES === */
  --dark:         #0D0D0D;
  --dark2:        #111827;
  --gray-800:     #1F2937;
  --gray-700:     #374151;
  --gray-600:     #4B5563;
  --gray-500:     #6B7280;
  --gray-400:     #9CA3AF;
  --gray-300:     #D1D5DB;
  --gray-200:     #E5E7EB;
  --gray-100:     #F3F4F6;
  --gray-50:      #F9FAFB;
  --white:        #FFFFFF;

  /* Rétro-compat */
  --gray:         #6B7280;
  --gray2:        #9CA3AF;

  /* === SÉMANTIQUE === */
  --green:        #10B981;
  --green-light:  #D1FAE5;
  --red:          #EF4444;
  --red-light:    #FEE2E2;
  --orange:       #F59E0B;
  --orange-light: #FEF3C7;
  --purple:       #8B5CF6;
  --purple-light: #EDE9FE;

  /* === SURFACES === */
  --bg:           #F4F5F7;
  --bg-card:      #FFFFFF;
  --text-muted:   #6B7280;
  --text-light:   #9CA3AF;

  /* === BORDURES === */
  --border:       rgba(0,0,0,.08);
  --border2:      rgba(0,0,0,.05);

  /* === OMBRES === */
  --shadow-xs:    0 1px 2px rgba(0,0,0,.06);
  --shadow:       0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  --shadow-md:    0 4px 16px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.11), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl:    0 16px 48px rgba(0,0,0,.13), 0 8px 24px rgba(0,0,0,.08);
  --shadow-blue:  0 6px 24px rgba(51,85,255,.32), 0 2px 8px rgba(51,85,255,.18);

  /* === RAYONS === */
  --r-xs:    4px;
  --r-sm:    8px;
  --radius-sm: 8px;
  --radius:    12px;
  --r-md:    12px;
  --r-lg:    16px;
  --radius-lg: 20px;
  --r-xl:    20px;
  --r-2xl:   28px;
  --radius-xl: 28px;
  --r-full:  9999px;

  /* === TYPOGRAPHIE === */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* === ESPACEMENTS === */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* === LAYOUT === */
  --topnav-h:      52px;
  --botnav-h:      62px;
  --sidebar-w:     240px;
  --page-px:       16px;    /* padding horizontal des pages */
  --safe-top:      env(safe-area-inset-top, 0px);
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
  --safe-left:     env(safe-area-inset-left, 0px);
  --safe-right:    env(safe-area-inset-right, 0px);

  /* === TRANSITIONS === */
  --ease:    cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --spring:  cubic-bezier(.34,1.56,.64,1);
  --t1: 120ms;
  --t2: 200ms;
  --t3: 300ms;
  --t4: 450ms;

  /* Rétro-compat */
  --nav-h: 52px;
}

/* ── RESET MOBILE FIRST ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Empêche le zoom iOS sur focus input */
  touch-action: manipulation;
}

body {
  font-family: var(--font);
  font-size: 14px;
  background: var(--bg);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.5;
  /* Supprime le rebond iOS */
  overscroll-behavior: none;
  /* Désactive la sélection de texte sur les éléments interactifs */
  -webkit-tap-highlight-color: transparent;
}

img, video, svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

ul, ol { list-style: none; }

/* ── SCROLLBAR FINE ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; }

/* ── FOCUS ACCESSIBLE ── */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── ACCESSIBILITÉ ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── ANIMATIONS ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes fabFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

@keyframes floatBox {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%       { transform: translateY(-9px) rotate(3deg); }
}

@keyframes scrollLogos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* ── CLASSES UTILITAIRES ── */
.animate-fade  { animation: fadeIn  var(--t3) var(--ease) both; }
.animate-up    { animation: slideUp var(--t3) var(--ease) both; }
.animate-scale { animation: scaleIn var(--t2) var(--spring) both; }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg,
    var(--gray-100) 25%,
    var(--gray-50)  50%,
    var(--gray-100) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}

/* ── CLASSES LEGACY (rétro-compat landing) ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s ease, transform .5s ease;
}
.stagger.in > *:nth-child(1) { opacity:1; transform:none; }
.stagger.in > *:nth-child(2) { opacity:1; transform:none; transition-delay:.08s; }
.stagger.in > *:nth-child(3) { opacity:1; transform:none; transition-delay:.16s; }
.stagger.in > *:nth-child(4) { opacity:1; transform:none; transition-delay:.24s; }
.stagger.in > *:nth-child(5) { opacity:1; transform:none; transition-delay:.32s; }
.stagger.in > *:nth-child(6) { opacity:1; transform:none; transition-delay:.40s; }