@import "tailwindcss";

/* Variables CSS pour les couleurs et polices personnalisées */
:root {
  --font-heading: 'Dela Gothic One', sans-serif;
  --font-body: 'Roboto', sans-serif;
  
  /* Palette de couleurs Banquise - Harmonieuse et Professionnelle */
  
  /* Bleus principaux (basés sur vos couleurs) */
  --banquise-blue-900: #0f2a3d;     /* Bleu très foncé - headers, texte principal */
  --banquise-blue-800: #1f5078;     /* Bleu foncé - votre couleur existante */
  --banquise-blue-700: #2a6b99;     /* Bleu foncé moyen - navigation, pieds de page */
  --banquise-blue-600: #34a6fc;     /* Bleu vif - votre couleur existante - boutons primaires */
  --banquise-blue-500: #4db8ff;     /* Bleu moyen vif - liens, accents */
  --banquise-blue-400: #76beee;     /* Bleu moyen - votre couleur existante */
  --banquise-blue-300: #8cc9f0;     /* Bleu clair - fonds subtils */
  --banquise-blue-200: #a0ecf9;     /* Bleu très clair - votre couleur existante */
  --banquise-blue-100: #b8f2fc;     /* Bleu ultra clair - fonds de cartes */
  --banquise-blue-50: #e8fcff;      /* Bleu presque blanc - fonds de section */
  
  /* Nuances de gris harmonieuses avec les bleus */
  --banquise-slate-900: #0f172a;    /* Gris très foncé avec nuance bleue */
  --banquise-slate-800: #1e293b;    /* Gris foncé pour le texte */
  --banquise-slate-700: #334155;    /* Gris moyen foncé */
  --banquise-slate-600: #475569;    /* Gris moyen */
  --banquise-slate-500: #64748b;    /* Gris neutre */
  --banquise-slate-400: #94a3b8;    /* Gris clair */
  --banquise-slate-300: #cbd5e1;    /* Gris très clair */
  --banquise-slate-200: #e2e8f0;    /* Gris ultra clair */
  --banquise-slate-100: #f1f5f9;    /* Gris presque blanc */
  --banquise-slate-50: #f8fafc;     /* Blanc cassé */
  
  /* Couleurs d'accent professionnelles */
  --banquise-success: #10b981;      /* Vert pour succès */
  --banquise-warning: #f59e0b;      /* Orange pour avertissements */
  --banquise-error: #ef4444;        /* Rouge pour erreurs */
  --banquise-info: var(--banquise-blue-500);  /* Bleu pour informations */
  
  /* Blancs et fonds */
  --banquise-white: #ffffff;
  --banquise-gray-light: #f8fafc;   /* Remplace l'ancien banquise-gray */
}

/* Forçage des styles principaux pour résoudre le problème de Tailwind 4 */
body {
  font-family: var(--font-body);
  background-color: var(--banquise-slate-50);
  color: var(--banquise-slate-800);
}

/* Classes utilitaires pour notre palette professionnelle */

/* === BACKGROUNDS === */
/* Bleus */
.bg-banquise-blue-50 { background-color: var(--banquise-blue-50); }
.bg-banquise-blue-100 { background-color: var(--banquise-blue-100); }
.bg-banquise-blue-200 { background-color: var(--banquise-blue-200); }
.bg-banquise-blue-300 { background-color: var(--banquise-blue-300); }
.bg-banquise-blue-400 { background-color: var(--banquise-blue-400); }
.bg-banquise-blue-500 { background-color: var(--banquise-blue-500); }
.bg-banquise-blue-600 { background-color: var(--banquise-blue-600); }
.bg-banquise-blue-700 { background-color: var(--banquise-blue-700); }
.bg-banquise-blue-800 { background-color: var(--banquise-blue-800); }
.bg-banquise-blue-900 { background-color: var(--banquise-blue-900); }

/* Gris slate harmonieux */
.bg-banquise-slate-50 { background-color: var(--banquise-slate-50); }
.bg-banquise-slate-100 { background-color: var(--banquise-slate-100); }
.bg-banquise-slate-200 { background-color: var(--banquise-slate-200); }
.bg-banquise-slate-300 { background-color: var(--banquise-slate-300); }
.bg-banquise-slate-800 { background-color: var(--banquise-slate-800); }
.bg-banquise-slate-900 { background-color: var(--banquise-slate-900); }

/* Arrière-plans avec opacité pour effets modernes */
.bg-banquise-blue-800\/90 { background-color: rgb(31 80 120 / 0.9); }
.bg-banquise-blue-800\/95 { background-color: rgb(31 80 120 / 0.95); }
.bg-banquise-blue-600\/10 { background-color: rgb(52 166 252 / 0.1); }
.bg-banquise-blue-800\/10 { background-color: rgb(31 80 120 / 0.1); }
.bg-banquise-blue-800\/20 { background-color: rgb(31 80 120 / 0.2); }
.bg-banquise-blue-700\/15 { background-color: rgb(42 107 153 / 0.15); }
.bg-banquise-blue-700\/8 { background-color: rgb(42 107 153 / 0.08); }

/* === TEXTE === */
.text-banquise-blue-900 { color: var(--banquise-blue-900); }
.text-banquise-blue-800 { color: var(--banquise-blue-800); }
.text-banquise-blue-700 { color: var(--banquise-blue-700); }
.text-banquise-blue-600 { color: var(--banquise-blue-600); }
.text-banquise-blue-500 { color: var(--banquise-blue-500); }
.text-banquise-blue-400 { color: var(--banquise-blue-400); }
.text-banquise-blue-200 { color: var(--banquise-blue-200); }

.text-banquise-slate-900 { color: var(--banquise-slate-900); }
.text-banquise-slate-800 { color: var(--banquise-slate-800); }
.text-banquise-slate-700 { color: var(--banquise-slate-700); }
.text-banquise-slate-600 { color: var(--banquise-slate-600); }
.text-banquise-slate-500 { color: var(--banquise-slate-500); }
.text-banquise-slate-400 { color: var(--banquise-slate-400); }

.text-banquise-white { color: var(--banquise-white); }

/* Texte avec opacité */
.text-banquise-slate-100\/90 { color: rgb(241 245 249 / 0.9); }
.text-banquise-slate-100\/80 { color: rgb(241 245 249 / 0.8); }
.text-banquise-blue-200\/90 { color: rgb(160 236 249 / 0.9); }

/* === BORDURES === */
.border-banquise-blue-200 { border-color: var(--banquise-blue-200); }
.border-banquise-blue-300 { border-color: var(--banquise-blue-300); }
.border-banquise-blue-600 { border-color: var(--banquise-blue-600); }
.border-banquise-slate-200 { border-color: var(--banquise-slate-200); }
.border-banquise-slate-300 { border-color: var(--banquise-slate-300); }

/* Bordures avec opacité */
.border-banquise-blue-200\/30 { border-color: rgb(160 236 249 / 0.3); }
.border-banquise-blue-200\/20 { border-color: rgb(160 236 249 / 0.2); }
.border-banquise-blue-200\/50 { border-color: rgb(160 236 249 / 0.5); }

/* === GRADIENTS MODERNES === */
.from-banquise-blue-600 { --tw-gradient-from: var(--banquise-blue-600); --tw-gradient-to: rgb(52 166 252 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-banquise-blue-500 { --tw-gradient-to: var(--banquise-blue-500); }
.from-banquise-blue-800 { --tw-gradient-from: var(--banquise-blue-800); --tw-gradient-to: rgb(31 80 120 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-banquise-blue-700 { --tw-gradient-to: var(--banquise-blue-700); }
.from-banquise-blue-400 { --tw-gradient-from: var(--banquise-blue-400); --tw-gradient-to: rgb(118 190 238 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-banquise-blue-300 { --tw-gradient-to: var(--banquise-blue-300); }
.from-banquise-blue-200 { --tw-gradient-from: var(--banquise-blue-200); --tw-gradient-to: rgb(160 236 249 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-banquise-blue-100 { --tw-gradient-to: var(--banquise-blue-100); }
.from-banquise-slate-50 { --tw-gradient-from: var(--banquise-slate-50); --tw-gradient-to: rgb(248 250 252 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-banquise-white { --tw-gradient-to: var(--banquise-white); }

/* Gradients via */
.via-banquise-blue-200\/40 { --tw-gradient-to: rgb(160 236 249 / 0); --tw-gradient-stops: var(--tw-gradient-from), rgb(160 236 249 / 0.4), var(--tw-gradient-to); }
.via-banquise-blue-300\/20 { --tw-gradient-to: rgb(140 201 240 / 0); --tw-gradient-stops: var(--tw-gradient-from), rgb(140 201 240 / 0.2), var(--tw-gradient-to); }

/* === EFFETS HOVER PROFESSIONNELS === */
.hover\:text-banquise-blue-200:hover { color: var(--banquise-blue-200); }
.hover\:text-banquise-blue-600:hover { color: var(--banquise-blue-600); }
.hover\:text-banquise-blue-800:hover { color: var(--banquise-blue-800); }
.hover\:border-banquise-blue-300:hover { border-color: var(--banquise-blue-300); }
.hover\:border-banquise-blue-200\/50:hover { border-color: rgb(160 236 249 / 0.5); }
.hover\:from-banquise-blue-700\/15:hover { --tw-gradient-from: rgb(42 107 153 / 0.15); --tw-gradient-to: rgb(42 107 153 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.hover\:to-banquise-blue-700\/8:hover { --tw-gradient-to: rgb(42 107 153 / 0.08); }

/* Shadows harmonieuses */
.hover\:shadow-banquise-blue-600\/25:hover { --tw-shadow-color: rgb(52 166 252 / 0.25); --tw-shadow: var(--tw-shadow-colored); }
.hover\:shadow-banquise-blue-500\/25:hover { --tw-shadow-color: rgb(77 184 255 / 0.25); --tw-shadow: var(--tw-shadow-colored); }

/* === COMPATIBILITÉ AVEC LES ANCIENNES CLASSES === */
/* Mappage des anciennes classes vers les nouvelles pour compatibilité */
.bg-banquise-blue { background-color: var(--banquise-blue-600); }
.bg-banquise-blue-dark { background-color: var(--banquise-blue-800); }
.bg-banquise-blue-light { background-color: var(--banquise-blue-400); }
.bg-banquise-blue-lightest { background-color: var(--banquise-blue-200); }
.bg-banquise-gray { background-color: var(--banquise-slate-100); }

.text-banquise-blue { color: var(--banquise-blue-600); }
.text-banquise-blue-dark { color: var(--banquise-blue-800); }
.text-banquise-blue-light { color: var(--banquise-blue-400); }
.text-banquise-blue-lightest { color: var(--banquise-blue-200); }
.text-banquise-gray { color: var(--banquise-slate-100); }

.border-banquise-blue { border-color: var(--banquise-blue-600); }
.border-banquise-blue-dark { border-color: var(--banquise-blue-800); }
.border-banquise-blue-light { border-color: var(--banquise-blue-400); }
.border-banquise-blue-lightest { border-color: var(--banquise-blue-200); }

/* === GRADIENTS PRÉDÉFINIS PROFESSIONNELS === */
.bg-gradient-banquise-primary {
  background: linear-gradient(135deg, var(--banquise-blue-600), var(--banquise-blue-500));
}

.bg-gradient-banquise-subtle {
  background: linear-gradient(135deg, var(--banquise-blue-50), var(--banquise-slate-50));
}

.bg-gradient-banquise-card {
  background: linear-gradient(135deg, var(--banquise-blue-100), var(--banquise-blue-50));
}

.bg-gradient-banquise-nav {
  background: linear-gradient(180deg, var(--banquise-blue-800), var(--banquise-blue-700));
}

.bg-gradient-banquise-hero {
  background: linear-gradient(135deg, var(--banquise-slate-50), var(--banquise-white));
}

/* === CLASSES UTILITAIRES MODERNES === */
.shadow-banquise {
  box-shadow: 0 10px 25px -3px rgb(31 80 120 / 0.1), 0 4px 6px -2px rgb(31 80 120 / 0.05);
}

.shadow-banquise-lg {
  box-shadow: 0 20px 25px -5px rgb(31 80 120 / 0.15), 0 10px 10px -5px rgb(31 80 120 / 0.1);
}

.ring-banquise-blue-200 {
  --tw-ring-color: var(--banquise-blue-200);
}

.divide-banquise-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--banquise-slate-200);
}

/* Motif de grille subtile pour arrière-plans modernes */
.bg-grid-pattern {
  background-image: 
    linear-gradient(rgba(31, 80, 120, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 80, 120, 0.03) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* Effets de transition pour les sections */
.section-transition {
  position: relative;
}

.section-transition::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--banquise-blue-200), 
    var(--banquise-blue-300), 
    var(--banquise-blue-200), 
    transparent
  );
}

/* Variables CSS pour les polices et couleurs personnalisées */
:root {
  --font-heading: 'Dela Gothic One', sans-serif;
  --font-body: 'Roboto', sans-serif;
}

/* Animations océaniques améliorées */
@keyframes gentle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(1deg); }
}

@keyframes ocean-shimmer {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  25% { opacity: 0.6; transform: scaleY(1.1); }
  50% { opacity: 0.8; transform: scaleY(0.9); }
  75% { opacity: 0.4; transform: scaleY(1.05); }
}

@keyframes bubble-float {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); }
  25% { transform: translateY(-5px) translateX(2px) scale(1.1); }
  50% { transform: translateY(-10px) translateX(-1px) scale(0.9); }
  75% { transform: translateY(-5px) translateX(1px) scale(1.05); }
}

@keyframes bubble-float-fast {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); }
  33% { transform: translateY(-8px) translateX(3px) scale(1.2); }
  66% { transform: translateY(-4px) translateX(-2px) scale(0.8); }
}

@keyframes bubble-float-slow {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); }
  50% { transform: translateY(-12px) translateX(1px) scale(1.1); }
}

@keyframes caustic-dance {
  0%, 100% { opacity: 0.2; transform: translateX(0) scaleX(1); }
  25% { opacity: 0.4; transform: translateX(10px) scaleX(1.2); }
  50% { opacity: 0.6; transform: translateX(-5px) scaleX(0.8); }
  75% { opacity: 0.3; transform: translateX(8px) scaleX(1.1); }
}

.animate-gentle-float { animation: gentle-float 6s ease-in-out infinite; }
.animate-ocean-shimmer { animation: ocean-shimmer 3s ease-in-out infinite; }
.animate-bubble-float { animation: bubble-float 4s ease-in-out infinite; }
.animate-bubble-float-fast { animation: bubble-float-fast 2.5s ease-in-out infinite; }
.animate-bubble-float-slow { animation: bubble-float-slow 6s ease-in-out infinite; }
.animate-caustic-dance { animation: caustic-dance 8s ease-in-out infinite; }

@keyframes bounce-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.scroll-to-top:hover { animation: bounce-up 0.6s ease-in-out; }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-gentle-float,
  .animate-ocean-shimmer,
  .animate-bubble-float,
  .animate-bubble-float-fast,
  .animate-bubble-float-slow,
  .animate-caustic-dance,
  .animate-ping,
  .animate-pulse {
    animation: none !important;
  }
}

/* Classes de compatibilité pour les anciens noms */
.text-banquise-gray { color: var(--banquise-slate-700); }
.text-banquise-blue-dark { color: var(--banquise-blue-800); }
.text-banquise-blue-light { color: var(--banquise-blue-400); }
.text-banquise-blue-lightest { color: var(--banquise-blue-200); }
.bg-banquise-gray { background-color: var(--banquise-slate-100); }
.bg-banquise-blue { background-color: var(--banquise-blue-600); }
.bg-banquise-blue-dark { background-color: var(--banquise-blue-800); }
.bg-banquise-blue-light { background-color: var(--banquise-blue-400); }
.bg-banquise-blue-lightest { background-color: var(--banquise-blue-200); }
.border-banquise-blue-lightest { border-color: var(--banquise-blue-200); }

/* Global improvements */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Scrollbar styles for popup content */
.popup-content { scrollbar-width: thin; scrollbar-color: rgba(31,80,120,0.3) transparent; }
.popup-content::-webkit-scrollbar { width: 6px; }
.popup-content::-webkit-scrollbar-track { background: transparent; }
.popup-content::-webkit-scrollbar-thumb { background: rgba(31,80,120,0.3); border-radius: 3px; }
.popup-content::-webkit-scrollbar-thumb:hover { background: rgba(31,80,120,0.5); }