/* ============== DESIGN SYSTEM AIME (Inspiration Linkee) ================== */
/* Variables CSS Globales - Approche modérée, élégante et parfaitement mobile-first */

:root {
  /* Couleurs de la marque (Palette principale) */
  --clr-primary: #0056b3; /* Bleu Océan / Confiance */
  --clr-primary-light: #e6f0ff;
  --clr-primary-dark: #003d82;
  --clr-secondary: #ff9800; /* Accentuation, appels à l'action (Boutons Don) */
  --clr-secondary-dark: #e68a00;

  /* Couleurs de base - Texte et Fonds */
  --clr-bg: #f8f9fa; /* Fond de page très clair, respirant */
  --clr-surface: #ffffff; /* Fond des cartes/sections */
  --clr-surface-alt: #f1f5f9;
  
  --clr-text-main: #1e293b; /* Gris très sombre, meilleur contraste que le noir pur */
  --clr-text-muted: #64748b;
  --clr-border: #e2e8f0;

  /* Typographie - Poppins clair et structuré */
  --font-main: 'Roboto', sans-serif;
  
  /* Radii (Angles) - Modérés comme demandé, pas de bords extrêmes */
  --radius-sm: 4px;   /* Petits éléments (badges, petits inputs) */
  --radius-md: 8px;   /* Formulaires, Boutons standards */
  --radius-lg: 12px;  /* Cartes, Modales, Blocs images (Modéré) */
  
  /* Ombres (Shadows) douces pour la profondeur */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Espacements standardisés (Mobile-first en tête) */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Transitions fluides */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.25s ease-in-out;
}

/* Base de l'application (Reset & Typographie globale) */
body {
  font-family: var(--font-main);
  color: var(--clr-text-main);
  background-color: var(--clr-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  color: var(--clr-text-main);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}

h1 { font-size: 2.25rem; font-weight: 700; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }

/* Ajustement Mobile Global */
@media (max-width: 768px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  body { font-size: 0.9375rem; }
}

a {
  color: var(--clr-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--clr-primary-dark);
}

/* =============== ANIMATIONS GLOBALES ET FLUIDES =============== */
:root {
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Scroll fluide */
html {
  scroll-behavior: smooth;
}

/* Apparition fluide de la page entière */
body {
  animation: pageFadeIn 0.6s var(--transition-smooth) forwards;
}

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

/* Utilitaires d'animation (pour les éléments apparaissant au scroll par ex) */
.animate-on-load {
  animation: fadeInUp 0.6s var(--transition-smooth) forwards;
  opacity: 0;
}
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

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


/* Script Reveal Classes */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--transition-smooth), transform 0.8s var(--transition-smooth);
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}