/* ---- TYPOGRAPHIE - Inter ---- */
body, html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   CHARTE GRAPHIQUE LE FAUGA 2026
   Couleurs extraites de la charte officielle
   - Bleu foncé: #1E3A7D → HSL(222, 61%, 30%)
   - Bleu cyan: #0C9BD2 → HSL(197, 89%, 44%)
   ========================================================================== */

:root {
  /* Couleurs principales */
  --primary: 222 61% 30%;
  --primary-foreground: 0 0% 100%;
  
  /* Couleurs secondaires */
  --secondary: 197 89% 44%;
  --secondary-foreground: 0 0% 100%;
  
  /* Accent */
  --accent: 197 70% 55%;
  --accent-foreground: 0 0% 100%;
  
  /* Couleurs Le Fauga */
  --fauga-blue-dark: 222 61% 30%;
  --fauga-blue: 222 61% 35%;
  --fauga-blue-light: 197 89% 44%;
  --fauga-green-dark: 222 61% 25%;
  --fauga-green: 197 89% 44%;
  --fauga-green-light: 197 70% 55%;
  --fauga-turquoise: 197 70% 60%;
  
  /* Ring */
  --ring: 222 61% 30%;
  
  /* Gradients */
  --gradient-hero: linear-gradient(135deg, hsl(222 61% 30%) 0%, hsl(197 89% 44%) 50%, hsl(197 70% 70%) 100%);
  --gradient-primary: linear-gradient(135deg, hsl(222 61% 30%) 0%, hsl(222 61% 40%) 100%);
  --gradient-secondary: linear-gradient(135deg, hsl(197 89% 44%) 0%, hsl(197 70% 55%) 100%);
  --gradient-mixed: linear-gradient(135deg, hsl(222 61% 30%) 0%, hsl(197 89% 44%) 50%, hsl(197 70% 60%) 100%);
  
  /* Sidebar */
  --sidebar-primary: 222 61% 30%;
  --sidebar-ring: 222 61% 30%;
}

.dark {
  --primary: 222 61% 45%;
  --secondary: 197 89% 50%;
  --accent: 197 70% 60%;
  --ring: 222 61% 45%;
  
  --fauga-blue-dark: 222 61% 40%;
  --fauga-blue: 222 61% 50%;
  --fauga-blue-light: 197 89% 55%;
  --fauga-green-dark: 222 61% 35%;
  --fauga-green: 197 89% 50%;
  --fauga-green-light: 197 70% 60%;
  --fauga-turquoise: 197 70% 65%;
  
  --sidebar-primary: 222 61% 45%;
  --sidebar-ring: 222 61% 45%;
}

/* Override des gradients sur les éléments spécifiques */
.from-primary {
  --tw-gradient-from: hsl(222 61% 30%) var(--tw-gradient-from-position) !important;
}

.to-secondary {
  --tw-gradient-to: hsl(197 89% 44%) var(--tw-gradient-to-position) !important;
}

.via-secondary {
  --tw-gradient-stops: var(--tw-gradient-from), hsl(197 89% 44%) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

/* Gradients de fond spécifiques */
.from-\[hsl\(210\,80\%\,30\%\)\]\/90 {
  --tw-gradient-from: hsl(222 61% 30% / 0.9) var(--tw-gradient-from-position) !important;
}

.via-\[hsl\(175\,60\%\,35\%\)\]\/85 {
  --tw-gradient-stops: var(--tw-gradient-from), hsl(197 89% 44% / 0.85) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

.to-\[hsl\(160\,55\%\,30\%\)\]\/90 {
  --tw-gradient-to: hsl(222 61% 35% / 0.9) var(--tw-gradient-to-position) !important;
}

.to-\[hsl\(155\,50\%\,50\%\)\] {
  --tw-gradient-to: hsl(197 70% 55%) var(--tw-gradient-to-position) !important;
}

.to-\[hsl\(200\,65\%\,55\%\)\] {
  --tw-gradient-to: hsl(197 89% 50%) var(--tw-gradient-to-position) !important;
}

/* Theme color meta override */
:root {
  color-scheme: light;
}

/* Forcer la couleur bleue sur les éléments verts */
.bg-green-500,
.bg-green-600 {
  background-color: hsl(197 89% 44%) !important;
}

.text-green-500,
.text-green-600,
.text-green-700 {
  color: hsl(197 89% 44%) !important;
}

.border-green-500 {
  border-color: hsl(197 89% 44%) !important;
}

/* Scroll et sélection */
::selection {
  background-color: hsl(222 61% 30% / 0.3);
  color: hsl(222 61% 15%);
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(222 61% 95%);
}

::-webkit-scrollbar-thumb {
  background: hsl(222 61% 70%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(222 61% 50%);
}

/* Focus ring */
*:focus-visible {
  outline-color: hsl(222 61% 30%) !important;
}

/* ==========================================================================
   ANIMATIONS & EFFETS VISUELS - BILAN & AGGLO
   ========================================================================== */

/* --- Fade-in au scroll --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

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

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

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

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 hsl(197 89% 44% / 0.3); }
  50% { box-shadow: 0 0 20px 8px hsl(197 89% 44% / 0.15); }
}

/* --- Cartes du bilan - ombres et animations --- */
section .rounded-lg.border,
section .rounded-2xl.border-2 {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

section .rounded-lg.border:hover,
section .rounded-2xl.border-2:hover {
  box-shadow: 0 12px 40px -8px hsl(222 61% 30% / 0.15),
              0 4px 16px -4px hsl(197 89% 44% / 0.1) !important;
}

/* --- Titres de section - style unifié bleu --- */
section h2 {
  position: relative;
}

/* --- Photos du bilan - ombres et hover améliorés --- */
section .overflow-hidden.rounded-lg.shadow-md {
  box-shadow: 0 4px 20px -4px hsl(222 61% 30% / 0.15) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

section .overflow-hidden.rounded-lg.shadow-md:hover {
  box-shadow: 0 16px 48px -8px hsl(222 61% 30% / 0.25) !important;
  transform: translateY(-4px) !important;
}

/* --- Badges et étiquettes --- */
.rounded-full.bg-secondary\/20,
.rounded-full.bg-primary\/20,
.rounded-full.bg-blue-100,
.rounded-full.bg-red-100 {
  transition: all 0.3s ease !important;
}

.rounded-full.bg-secondary\/20:hover,
.rounded-full.bg-primary\/20:hover {
  transform: scale(1.05);
}

/* --- Icônes dans les cercles --- */
.rounded-full.bg-primary\/10,
.rounded-full.bg-secondary\/10,
.rounded-full.bg-accent\/10,
.rounded-full.bg-green-500\/10,
.rounded-full.bg-pink-500\/10 {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --- Chiffres clés (statistiques) - glow effect --- */
section .bg-white.rounded-2xl.shadow-sm {
  transition: all 0.3s ease !important;
}

section .bg-white.rounded-2xl.shadow-sm:hover {
  box-shadow: 0 8px 32px -4px hsl(222 61% 30% / 0.12) !important;
  transform: translateY(-3px);
}

/* --- Section finances - animation spéciale --- */
.border-2.border-primary\/20.overflow-hidden,
.border-2.border-secondary\/20.overflow-hidden,
.border-2.border-green-500\/20.overflow-hidden {
  animation: slideInScale 0.6s ease-out both;
}

/* --- Grille photos - effet mosaïque --- */
.rounded-xl.overflow-hidden.shadow-md {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 16px -4px hsl(222 61% 30% / 0.12) !important;
}

.rounded-xl.overflow-hidden.shadow-md:hover {
  box-shadow: 0 12px 40px -8px hsl(222 61% 30% / 0.2) !important;
  transform: translateY(-4px) scale(1.02) !important;
}

/* --- Amélioration des listes à puces --- */
section li .flex-shrink-0 {
  transition: transform 0.3s ease !important;
}

section li:hover .flex-shrink-0 {
  transform: scale(1.2) !important;
}

/* ==========================================================================
   CORRECTIONS COULEURS AGGLO - Forcer bleu sur éléments gris
   ========================================================================== */

/* Forcer les checkmarks verts sur la page agglo aussi */
.text-red-500.font-bold,
.text-green-600.font-bold {
  font-weight: 700 !important;
}

/* Améliorer les cartes de compétences agglo */
.border-2.border-red-500,
.border-2.border-green-600 {
  transition: all 0.3s ease !important;
}

.border-2.border-red-500:hover,
.border-2.border-green-600:hover,
.border-2.border-\[#2a6496\]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -8px rgba(42, 100, 150, 0.2) !important;
}

/* ==========================================================================
   NOUVELLE RUBRIQUE - BILAN DE MANDAT (Flyer)
   Styles pour les sections injectées
   ========================================================================== */

.flyer-section {
  animation: fadeInUp 0.8s ease-out both;
}

.flyer-card {
  background: white;
  border-radius: 16px;
  border: 2px solid hsl(197 89% 44% / 0.2);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px -6px hsl(222 61% 30% / 0.1);
}

.flyer-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px -12px hsl(222 61% 30% / 0.2);
  border-color: hsl(197 89% 44% / 0.4);
}

.flyer-stat {
  background: linear-gradient(135deg, hsl(222 61% 30% / 0.05) 0%, hsl(197 89% 44% / 0.08) 100%);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid hsl(197 89% 44% / 0.15);
}

.flyer-stat:hover {
  background: linear-gradient(135deg, hsl(222 61% 30% / 0.08) 0%, hsl(197 89% 44% / 0.12) 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -6px hsl(222 61% 30% / 0.15);
}

.flyer-stat-value {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, hsl(222 61% 30%), hsl(197 89% 44%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.flyer-stat-label {
  font-size: 0.85rem;
  color: hsl(222 61% 30% / 0.7);
  margin-top: 0.5rem;
  font-weight: 500;
}

.flyer-highlight {
  background: linear-gradient(135deg, hsl(222 61% 30%) 0%, hsl(197 89% 44%) 100%);
  color: white;
  border-radius: 16px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.flyer-highlight::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.flyer-divider {
  height: 4px;
  background: linear-gradient(90deg, hsl(222 61% 30%), hsl(197 89% 44%), hsl(197 70% 60%));
  border-radius: 2px;
  margin: 0.5rem 0;
}

/* ==========================================================================
   SCROLL-DRIVEN ANIMATIONS (progressive enhancement)
   ========================================================================== */

/* Smooth reveal pour les sections */
section {
  opacity: 1;
}

/* --- Effet parallaxe léger sur les images hero --- */
section .aspect-video,
section .aspect-square {
  overflow: hidden;
}

section .aspect-video img,
section .aspect-square img {
  transition: transform 0.5s ease !important;
}

/* --- Amélioration du texte dans les cartes de la page Bilan --- */
section .text-muted-foreground {
  transition: color 0.3s ease;
}

section .border-2:hover .text-muted-foreground {
  color: hsl(222 61% 25%) !important;
}

/* --- Ligne décorative sous les titres h2 --- */
section > div > div > h2.bg-gradient-to-r::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, hsl(222 61% 30%), hsl(197 89% 44%));
  margin: 0.75rem auto 0;
  border-radius: 2px;
}

section > div > div.text-center > h2:not(.bg-gradient-to-r)::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, hsl(222 61% 30%), hsl(197 89% 44%));
  margin: 0.75rem auto 0;
  border-radius: 2px;
}

/* ==========================================================================
   SOMMAIRE STICKY - PAGE BILAN
   ========================================================================== */

#bilan-sommaire {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 12px;
  z-index: 998;
  font-family: system-ui, -apple-system, sans-serif;
}

#bilan-sommaire-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* Toggle button (mobile compact) */
#bilan-sommaire-toggle {
  display: none;
}

/* Nav items */
#bilan-sommaire-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: white;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 4px 24px -4px rgba(30, 58, 125, 0.18),
              0 1px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid hsl(222 61% 90%);
  backdrop-filter: blur(12px);
  max-height: 80vh;
  overflow-y: auto;
}

.bilan-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: hsl(222 61% 40%);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.bilan-nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, hsl(222 61% 30%), hsl(197 89% 44%));
  border-radius: 2px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.bilan-nav-item:hover {
  background: hsl(222 61% 30% / 0.06);
  color: hsl(222 61% 30%);
}

.bilan-nav-item.active {
  background: linear-gradient(135deg, hsl(222 61% 30% / 0.08), hsl(197 89% 44% / 0.08));
  color: hsl(222 61% 30%);
  font-weight: 700;
}

.bilan-nav-item.active::before {
  transform: translateY(-50%) scaleY(1);
}

.bilan-nav-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.bilan-nav-label {
  font-size: 0.76rem;
  letter-spacing: -0.01em;
}

/* Progress bar */
#bilan-progress {
  width: 100%;
  height: 3px;
  background: hsl(222 61% 90%);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}

#bilan-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, hsl(222 61% 30%), hsl(197 89% 44%));
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s ease;
}

/* Scroll offset for anchors */
[id^="bilan-"] {
  scroll-margin-top: 80px;
}

/* ==========================================================================
   RESPONSIVE - Sommaire
   ========================================================================== */

/* Tablet */
@media (max-width: 1280px) {
  .bilan-nav-label {
    display: none;
  }
  
  .bilan-nav-item {
    padding: 8px 10px;
    justify-content: center;
  }
  
  #bilan-sommaire-items {
    padding: 4px;
  }
  
  .bilan-nav-icon {
    font-size: 1.1rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  #bilan-sommaire {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    padding: 0;
  }
  
  #bilan-sommaire-inner {
    align-items: stretch;
  }
  
  #bilan-sommaire-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, hsl(222 61% 30%), hsl(197 89% 44%));
    color: white;
    border: none;
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 -2px 16px rgba(30, 58, 125, 0.2);
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
  }
  
  #bilan-sommaire-toggle.active {
    border-radius: 0;
    background: hsl(222 61% 25%);
  }
  
  #bilan-sommaire-toggle svg {
    transition: transform 0.3s ease;
  }
  
  #bilan-sommaire-toggle.active svg {
    transform: rotate(90deg);
  }
  
  #bilan-sommaire-items {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px 12px;
    border-radius: 0;
    box-shadow: 0 -4px 24px rgba(30, 58, 125, 0.15);
    border: none;
    border-top: 1px solid hsl(222 61% 85%);
    max-height: 45vh;
    overflow-y: auto;
  }
  
  #bilan-sommaire-items.expanded {
    display: flex;
  }
  
  .bilan-nav-item {
    flex: 1 1 auto;
    min-width: calc(33% - 6px);
    justify-content: center;
    text-align: center;
    padding: 10px 6px;
    flex-direction: column;
    gap: 2px;
  }
  
  .bilan-nav-label {
    display: block !important;
    font-size: 0.68rem;
  }
  
  .bilan-nav-icon {
    font-size: 1.2rem;
  }
  
  .bilan-nav-item::before {
    display: none;
  }
  
  .bilan-nav-item.active {
    background: linear-gradient(135deg, hsl(222 61% 30% / 0.12), hsl(197 89% 44% / 0.12));
    border-radius: 10px;
  }
  
  #bilan-progress {
    display: none;
  }
  
  /* Adjust scroll-top button position when sommaire is visible */
  #scroll-top-btn {
    bottom: 60px !important;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .bilan-nav-item {
    min-width: calc(33% - 4px);
    padding: 8px 4px;
  }
}

/* ==========================================================================
   REFONTE VISUELLE GLOBALE - Animations, Gradients, Profondeur
   ========================================================================== */

/* ---- ANIMATIONS GLOBALES ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

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

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

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 58, 125, 0.15); }
  50% { box-shadow: 0 0 20px 8px rgba(30, 58, 125, 0.08); }
}

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

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

/* REMOVED - overly broad selector */

/* ---- TOUTES LES CARTES DU SITE ---- */
.rounded-xl,
.rounded-2xl,
.rounded-lg {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* REMOVED - overly broad selector */

/* REMOVED - overly broad selector */

/* ---- STATS / CHIFFRES - Animation compteur ---- */
[class*="text-3xl"][class*="font-bold"][class*="bg-gradient-to-r"],
[class*="text-4xl"][class*="font-bold"][class*="bg-gradient-to-r"],
[class*="text-5xl"][class*="font-bold"][class*="text-primary"] {
  animation: countUp 0.5s ease-out;
}

/* ---- IMAGES - Effet zoom subtil ---- */
img[class*="rounded"] {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

img[class*="rounded"]:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 30px -6px rgba(30, 58, 125, 0.2);
}

/* ---- BOUTONS - Effet gradient animé ---- */
[class*="bg-primary"]:is(a, button) {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
}

[class*="bg-primary"]:is(a, button):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -4px rgba(30, 58, 125, 0.4) !important;
}

[class*="bg-primary"]:is(a, button)::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}

[class*="bg-primary"]:is(a, button):hover::after {
  left: 100%;
}

/* ---- HERO SECTIONS - Fond dégradé subtil ---- */
[class*="py-16"][class*="bg-gradient-to-br"],
[class*="py-20"][class*="bg-gradient-to-br"],
[class*="py-24"][class*="bg-gradient-to-br"] {
  position: relative;
}

/* REMOVED - overly broad selector */

/* ---- GRID CARDS - Stagger animation ---- */
[class*="grid"] > [class*="rounded"]:nth-child(1) { animation: fadeInUp 0.5s ease-out 0.0s both; }
[class*="grid"] > [class*="rounded"]:nth-child(2) { animation: fadeInUp 0.5s ease-out 0.1s both; }
[class*="grid"] > [class*="rounded"]:nth-child(3) { animation: fadeInUp 0.5s ease-out 0.2s both; }
[class*="grid"] > [class*="rounded"]:nth-child(4) { animation: fadeInUp 0.5s ease-out 0.3s both; }
[class*="grid"] > [class*="rounded"]:nth-child(5) { animation: fadeInUp 0.5s ease-out 0.4s both; }
[class*="grid"] > [class*="rounded"]:nth-child(6) { animation: fadeInUp 0.5s ease-out 0.5s both; }

/* REMOVED - overly broad selector */

/* ---- ICONES SVG - Color & scale ---- */
svg[class*="text-primary"] {
  transition: all 0.3s ease !important;
  filter: drop-shadow(0 2px 4px rgba(30, 58, 125, 0.15));
}

*:hover > svg[class*="text-primary"] {
  transform: scale(1.15);
  filter: drop-shadow(0 4px 8px rgba(30, 58, 125, 0.25));
}

/* ---- BADGES / TAGS ---- */
[class*="bg-primary/10"],
[class*="bg-primary/5"] {
  transition: all 0.3s ease !important;
}

[class*="bg-primary/10"]:hover {
  background: linear-gradient(135deg, hsl(222 61% 30% / 0.12), hsl(197 89% 44% / 0.12)) !important;
  transform: scale(1.03);
}

/* ---- SEPARATOR DECORATIF entre sections ---- */
section + section {
  position: relative;
}

/* ---- NAVBAR - Glass effect ---- */
header, nav, [class*="sticky"][class*="top-0"] {
  backdrop-filter: blur(12px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
}

/* ---- FOOTER - Subtil gradient ---- */
footer {
  position: relative;
  overflow: hidden;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, hsl(222 61% 30%), hsl(197 89% 44%), hsl(222 61% 30%));
  background-size: 200% 100%;
  animation: gradientShift 4s ease infinite;
}

/* ---- TEXTE MUTED - Un peu plus de contraste ---- */
[class*="text-muted-foreground"] {
  color: hsl(222 10% 42%) !important;
}

/* REMOVED - overly broad selector */

/* REMOVED - overly broad selector */

/* ---- SCROLL REVEAL - Intersection Observer ---- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* ---- SELECTION COLOR ---- */
::selection {
  background: hsl(222 61% 30% / 0.15);
  color: hsl(222 61% 20%);
}

/* ---- FOCUS VISIBLE ---- */
*:focus-visible {
  outline: 2px solid hsl(197 89% 44%);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- SMOOTH SCROLL GLOBAL ---- */
html {
  scroll-behavior: smooth;
}

/* ---- RESPONSIVE: reduce animations on mobile ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   AMÉLIORATIONS SPÉCIFIQUES PAR SECTION
   ========================================================================== */

/* ---- BILAN 3-COLONNES (Culture/CCAS/Env) - Icon pulse ---- */
[class*="bg-card"][class*="rounded-2xl"][class*="p-6"] svg,
[class*="bg-card"][class*="rounded-2xl"][class*="p-8"] svg {
  transition: all 0.35s ease !important;
}

[class*="bg-card"][class*="rounded-2xl"]:hover svg {
  transform: scale(1.2) rotate(-5deg) !important;
  filter: drop-shadow(0 4px 8px rgba(30, 58, 125, 0.3)) !important;
}

/* 3-col cards counter animation */
[class*="bg-card"][class*="rounded-2xl"] [class*="text-3xl"][class*="font-bold"],
[class*="bg-card"][class*="rounded-2xl"] [class*="text-4xl"][class*="font-bold"] {
  transition: all 0.3s ease;
}

[class*="bg-card"][class*="rounded-2xl"]:hover [class*="text-3xl"][class*="font-bold"],
[class*="bg-card"][class*="rounded-2xl"]:hover [class*="text-4xl"][class*="font-bold"] {
  transform: scale(1.1);
}

/* ---- CHRONOLOGIE TIMELINE - Enhanced ---- */
[class*="rounded-xl"][class*="border-border/50"] {
  position: relative;
}

[class*="rounded-xl"][class*="border-border/50"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, hsl(222 61% 30%), hsl(197 89% 44%));
  transition: width 0.4s ease;
}

[class*="rounded-xl"][class*="border-border/50"]:hover::after {
  width: 80%;
}

/* ---- FINANCES COMMUNALES - Glass effect on cards ---- */
[class*="bg-white/80"][class*="rounded-2xl"] {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* REMOVED - overly broad selector */

/* ---- AGGLO - Compétences cards animated borders ---- */
[class*="border-2"][class*="rounded-2xl"][class*="hover:shadow-lg"] {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Agglo stats boxes - pulse on hover */
[class*="from-"][class*="rounded-xl"][class*="text-center"][class*="border"] {
  transition: all 0.35s ease !important;
}

[class*="from-"][class*="rounded-xl"][class*="text-center"][class*="border"]:hover {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* ---- GALERIE - Photo grid hover effects ---- */
[class*="cursor-pointer"][class*="rounded-xl"] img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.3s ease !important;
}

[class*="cursor-pointer"][class*="rounded-xl"]:hover img {
  transform: scale(1.06) !important;
}

/* REMOVED - overly broad selector */

/* ---- PARTENAIRES - Logo grid ---- */
[class*="rounded-xl"][class*="flex"][class*="items-center"][class*="justify-center"][class*="border-border"] img {
  transition: all 0.3s ease !important;
  filter: grayscale(30%);
}

[class*="rounded-xl"][class*="flex"][class*="items-center"][class*="justify-center"][class*="border-border"]:hover img {
  filter: grayscale(0%) !important;
  transform: scale(1.08) !important;
}

/* ---- ACCUEIL - Hero countdown pulse ---- */
[class*="bg-primary"][class*="text-primary-foreground"][class*="rounded-xl"][class*="shadow-lg"] {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* ---- ACCUEIL - Valeurs icons ---- */
[class*="bg-primary/10"][class*="rounded-xl"] svg {
  transition: all 0.4s ease !important;
}

[class*="bg-primary/10"][class*="rounded-xl"]:hover svg {
  transform: scale(1.15) rotate(-8deg) !important;
}

/* ---- LA LISTE - Candidate photos ---- */
[class*="aspect-[3/4]"] img,
[class*="aspect-square"] img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[class*="rounded-2xl"]:hover [class*="aspect-[3/4]"] img,
[class*="rounded-2xl"]:hover [class*="aspect-square"] img {
  transform: scale(1.05) !important;
}

/* REMOVED - overly broad selector */


/* ==========================================================================
   V2 - STYLES CIBLÉS ET PROPRES
   ========================================================================== */

/* ---- Cards hover lift UNIQUEMENT sur les cards interactives ---- */
[class*="hover\\:shadow-xl"] {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ---- Images zoom au hover dans leurs conteneurs ---- */
[class*="overflow-hidden"] > img,
[class*="overflow-hidden"] > div > img {
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[class*="overflow-hidden"]:hover > img,
[class*="overflow-hidden"]:hover > div > img {
  transform: scale(1.04);
}

/* ---- Titres h2 gradient - fine underline décorative ---- */
h2[class*="bg-clip-text"][class*="text-center"] {
  position: relative;
  padding-bottom: 16px;
}

h2[class*="bg-clip-text"][class*="text-center"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, hsl(222 61% 30%), hsl(197 89% 44%));
  border-radius: 1px;
}

/* ---- SVG icons - subtle scale on parent hover ---- */
[class*="hover\\:shadow-xl"]:hover svg[class*="text-primary"],
[class*="group"]:hover svg[class*="text-primary"] {
  transform: scale(1.12) !important;
  transition: transform 0.3s ease !important;
}

/* ---- Partenaires logos - grayscale to color ---- */
#bilan-partenaires img {
  filter: grayscale(20%) opacity(0.85);
  transition: all 0.3s ease !important;
}

#bilan-partenaires [class*="rounded"]:hover img {
  filter: grayscale(0%) opacity(1) !important;
  transform: scale(1.06);
}

/* ---- Footer gradient line ---- */
footer {
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, hsl(222 61% 30%), hsl(197 89% 44%), hsl(222 61% 30%));
  background-size: 200% 100%;
  animation: gradientShift 4s ease infinite;
}

/* ---- Countdown pulse ---- */
[class*="bg-primary"][class*="text-primary-foreground"][class*="rounded-xl"][class*="shadow-lg"] {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* ---- Smooth scroll ---- */
html {
  scroll-behavior: smooth;
}

/* ---- Selection color ---- */
::selection {
  background: hsl(222 61% 30% / 0.12);
  color: hsl(222 61% 20%);
}

/* ---- Navbar glass ---- */
header, [class*="sticky"][class*="top-0"] {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ---- Focus visible ---- */
*:focus-visible {
  outline: 2px solid hsl(197 89% 44%);
  outline-offset: 2px;
}

/* ---- Accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}