325 lines
15 KiB
CSS
325 lines
15 KiB
CSS
@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); }
|
|
|