/* * ============================================================================== * ANIMATIONS D'ENTRÉE (FADE IN) * ============================================================================== */ .animate-in { animation-delay: var(--delay, 0ms); animation-fill-mode: both; /* Garantit que l'élément est invisible avant l'animation */ } .animate-fade-in-down { animation: fadeInDown 1s ease-out; } .animate-fade-in-up { animation: fadeInUp 0.6s ease-out; } .animate-fade-in { animation: fadeIn 0.8s ease-in-out forwards; opacity: 0; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* * ============================================================================== * EFFETS VISUELS DIVERS * ============================================================================== */ /* Particules d'arrière-plan */ .particles { background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='3' fill='%23c084fc' fill-opacity='0.4'/%3E%3Ccircle cx='40' cy='30' r='2' fill='%2367e8f9' fill-opacity='0.4'/%3E%3Ccircle cx='70' cy='60' r='1.5' fill='%2367e8f9' fill-opacity='0.4'/%3E%3Ccircle cx='80' cy='15' r='2.5' fill='%23c084fc' fill-opacity='0.4'/%3E%3Ccircle cx='50' cy='80' r='1.5' fill='%2367e8f9' fill-opacity='0.4'/%3E%3Ccircle cx='30' cy='70' r='2' fill='%23c084fc' fill-opacity='0.4'/%3E%3C/svg%3E"); animation: particlesMove 20s linear infinite; } @keyframes particlesMove { from { background-position: 0 0; } to { background-position: 100% 100%; } } /* Effets 3D pour les cartes (utilisé sur la page d'accueil) */ .perspective { perspective: 1500px; } .preserve-3d { transform-style: preserve-3d; } .backface-hidden { backface-visibility: hidden; } .rotate-y-180 { transform: rotateY(180deg); } /* * ============================================================================== * CORRECTIF POUR LA COLONNE LATÉRALE "STICKY" (COLLANTE) * ============================================================================== * Ces règles garantissent que la colonne de droite (contenant les graphiques) * reste visible à l'écran lors du défilement. * * - `position: sticky` : Fait en sorte que l'élément "colle" à l'écran. * - `top: 2rem` : Définit la marge supérieure lorsque l'élément est collé. * - `max-height: calc(100vh - 4rem)` : Limite la hauteur de la colonne à la hauteur de l'écran moins un peu de marge, pour éviter qu'elle ne dépasse. * - `overflow-y: auto` : Ajoute une barre de défilement à l'intérieur de la colonne si son contenu est plus grand que la hauteur maximale. */ .sticky-column-wrapper { position: -webkit-sticky; /* Pour la compatibilité avec Safari */ position: sticky; top: 2rem; /* 32px, correspond à la classe 'top-8' de Tailwind */ max-height: calc(100vh - 4rem); /* Hauteur de l'écran moins les marges haut/bas */ overflow-y: auto; /* Permet de scroller DANS la colonne si besoin */ } /* * ============================================================================== * CORRECTIF POUR LE MODE SOMBRE DES FORMULAIRES * ============================================================================== * Ces règles garantissent que les champs de formulaire standards (select, input) * s'affichent correctement avec un fond sombre et un texte clair lorsque le * thème sombre est activé via la classe '.dark' sur la balise . */ .dark select, .dark input[type="text"], .dark input[type="email"], .dark input[type="number"], .dark input[type="password"], .dark input[type="date"] { background-color: #1f2937; /* Correspond à 'bg-gray-800' de Tailwind */ color: #d1d5db; /* Correspond à 'text-gray-300' de Tailwind */ } /* * ============================================================================== * GESTION DU FOND DES GRAPHIQUES PLOTLY * ============================================================================== * Ces règles définissent la couleur de fond pour les conteneurs de graphiques. * Les graphiques eux-mêmes sont rendus avec un fond transparent (via chart_utils.py), * ce qui permet à cette couleur de fond CSS de s'afficher. */ .plotly-chart-container { background-color: #ffffff; /* Fond blanc par défaut (thème clair) */ transition: background-color 0.3s ease; /* Transition douce lors du changement de thème */ } .dark .plotly-chart-container { background-color: #1f2937; /* Fond gris-foncé pour le thème sombre (bg-gray-800) */ }