/* RESET CSS Remet les marges à zéro pour que le design soit identique sur tous les navigateurs */ * { margin: 0; padding: 0; box-sizing: border-box; } /* VARIABLES DE COULEUR (THEME CLAIR) Ces variables permettent de changer la couleur de tout le site très facilement */ :root { --bg: #f9fafc; /* Couleur de fond de la page (Gris très clair) */ --card: #ffffff; /* Couleur de fond des encadrés/cartes (Blanc pur) */ --text: #1a1a1a; /* Couleur du texte principal (Presque noir) */ --primary: #10b981; /* Couleur principale de l'application (Vert vibrant) */ --border: #e2e8f0; /* Couleur des bordures des cadres (Gris clair) */ } /* VARIABLES DE COULEUR (THEME SOMBRE) S'activent uniquement quand le a la classe "dark". */ body.dark { --bg: #0f0f1a; /* Fond de la page (Bleu/Noir très sombre) */ --card: #1a1a2e; /* Fond des cartes (Bleu nuit) */ --text: #ffffff; /* Texte (Blanc) */ --border: #2a2a40; /* Bordures (Bleu gris) */ } /* STYLE GLOBAL DU CORPS DE LA PAGE */ body { background: var(--bg); color: var(--text); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } /* S'assure que tous les titres héritent bien de la couleur du thème (utile pour écraser Bootstrap) */ h1, h2, h3, h4, h5, h6 { color: var(--text) !important; } /* DESIGN DE LA PAGE DE CONNEXION Tout le bloc ci-dessous habille uniquement le panneau gauche de la page de connexion/inscription */ .login-banner { /* Dégradé vert en diagonale (145deg) : du vert très sombre en haut à gauche vers un vert clair en bas à droite */ background: linear-gradient(145deg, #064e3b 0%, #0d9669 60%, #34d399 100%); /* Nécessaire pour que les bulles et chips en position:absolute restent bien dans ce panneau */ position: relative; /* Cache les bulles qui dépassent légèrement des bords (ex: la grande bulle en haut à gauche) */ overflow: hidden; } /* BULLES DE FOND Grands cercles semi-transparents qui donnent de la profondeur au panneau */ .lb-bubble { /* Chaque bulle est placée manuellement via style= dans le HTML (top, left, width, height) */ position: absolute; /* 50% = cercle parfait */ border-radius: 50%; /* Blanc très transparent pour laisser voir le dégradé en dessous */ background: rgba(255, 255, 255, 0.08); /* Appelle l'animation lbPulse en boucle infinie toutes les 7 secondes */ animation: lbPulse 7s ease-in-out infinite; } /* Animation des bulles : légère montée + grossissement pour un effet de respiration */ @keyframes lbPulse { 0%, 100% { /* État initial et final : taille normale, pas de déplacement */ transform: scale(1) translateY(0); } 50% { /* À mi-animation : légèrement plus grande (6%) et remontée de 14px vers le haut */ transform: scale(1.06) translateY(-14px); } } /* MINI-CARTES DE DÉPENSES (chips) Petites pastilles style "pill" avec effet verre dépoli (glassmorphism) */ .lb-chip { /* Positionnées individuellement via style= dans le HTML */ position: absolute; /* Blanc très transparent : laisse voir le dégradé du panneau derrière */ background: rgba(255, 255, 255, 0.14); /* Effet verre dépoli : floute légèrement ce qui est derrière la chip */ backdrop-filter: blur(6px); /* Bordure subtile blanc semi-transparent pour délimiter la chip */ border: 1px solid rgba(255, 255, 255, 0.28); color: white; padding: 7px 16px; /* border-radius très élevé = forme "pilule" arrondie des deux côtés */ border-radius: 50px; font-size: 0.88rem; /* Empêche le texte de se couper sur plusieurs lignes */ white-space: nowrap; /* Appelle l'animation lbFloat, chaque chip a un animation-delay différent (défini dans le HTML) */ animation: lbFloat 6s ease-in-out infinite; /* Ombre légère sous chaque chip pour qu'elles ressortent du fond */ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } /* Animation des chips : monte et descend en oscillant légèrement sur les côtés */ @keyframes lbFloat { 0%, 100% { /* Position de départ : en bas, légèrement inclinée à gauche */ transform: translateY(0px) rotate(-1.5deg); } 50% { /* À mi-animation : remonte de 10px et s'incline à droite */ transform: translateY(-10px) rotate(1.5deg); } } /* TEXTE EN BAS DU PANNEAU (logo + slogan) Ancré en bas à gauche pour un rendu moderne (style app SaaS) */ .lb-text { position: absolute; /* 40px depuis le bas du panneau */ bottom: 40px; /* 40px depuis le bord gauche */ left: 40px; color: white; } /* Nom de l'application "Equily" affiché en grand */ .lb-logo { font-size: 3.2rem; font-weight: 800; /* Rapproche légèrement les lettres pour un look moderne */ letter-spacing: -2px; line-height: 1; margin-bottom: 10px; } /* Slogan sous le logo */ .lb-text p { font-size: 1rem; /* Légèrement transparent pour que le slogan soit moins dominant que le logo */ opacity: 0.8; font-weight: 300; line-height: 1.6; margin: 0; } .auth-link { /* Lien "Créer un compte" bien visible et distinct */ color: #3ceeb6; font-weight: 600; text-decoration: underline !important; transition: 0.2s; } .auth-link:hover { color: #064e3b; /* S'assombrit au survol */ } /* BARRE LATÉRALE (SIDEBAR) */ .sidebar { width: 260px; height: 100vh; /* Prend toute la hauteur de l'écran */ background: linear-gradient(180deg, #10b981, #059669); /* Dégradé vert */ position: fixed; /* Reste fixe même quand on défile */ padding: 30px; border-radius: 0 25px 25px 0; /* Arrondit les coins en haut à droite et bas à droite */ display: flex; flex-direction: column; } body.dark .sidebar { /* Le dégradé de la barre latérale en mode sombre */ background: linear-gradient(180deg, #1a1a2e, #0f0f1a); } .logo { font-size: 22px; color: white; margin-bottom: 40px; } body.dark .logo { color: #e0e0e0; /* Logo légèrement grisé en mode sombre pour être plus sobre */ } /* ÉLÉMENTS DU MENU (SIDEBAR) */ .menu-item { color: white; padding: 12px; border-radius: 12px; margin-bottom: 12px; cursor: pointer; transition: 0.2s; text-decoration: none !important; /* Pas de soulignement sur les menus ! */ display: block; } .menu-item:hover { background: rgba(255, 255, 255, 0.2); /* Fond semi-transparent au survol */ color: white; } .menu-item.active { background: white; /* Bouton blanc si c'est la page actuelle */ color: #059669; /* Texte vert */ font-weight: bold; } body.dark .menu-item.active { background: #10b981; /* vert si on est en mode sombre */ color: white; } /* BOUTON THÈME (CLAIR/SOMBRE) */ .toggle-btn { background: white; color: #059669; border: none; padding: 12px; border-radius: 12px; font-weight: bold; } body.dark .toggle-btn { background: #10b981; color: white; } /* CONTENU PRINCIPAL */ .content { margin-left: 300px; /* Laisse de la place pour la sidebar fixe */ padding: 50px; } /* Les "pages" ou formulaires de l'application (Ajouter/Modifier) */ .page { background: var(--card); padding: 35px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); max-width: 600px; border: 1px solid var(--border); /* Les cadres qu'on avait ajoutés pour délimiter */ } h1 { margin-bottom: 20px; } /* CHAMPS DE FORMULAIRE (INPUTS) */ .form-control, .form-select { border-radius: 12px; padding: 12px; border: 1px solid #ddd; } body.dark .form-control::placeholder { color: #aaa; } body.dark .form-control, body.dark .form-select { background-color: #25253a; /* Un fond bleu nuit pour qu'on les distingue */ color: #ffffff; /* Texte en blanc */ border-color: #3a3a5a; /* Bordure subtile */ } body.dark .form-control:focus, body.dark .form-select:focus { background-color: #e89153; color: #ffffff; border-color: #10b981; /* Surlignage vert quand on clique dedans */ } body.dark .text-muted { /* Éclaircit le gris des sous-titres en mode sombre pour qu'ils ne se perdent pas */ color: #9aa0ac !important; } /* BOUTONS GÉNÉRAUX */ .btn { border-radius: 12px; padding: 12px; font-weight: bold; } .btn-primary { background: linear-gradient(90deg, #10b981, #059669); /* Toujours ce beau dégradé */ border: none; color: white; } .btn-warning { background: orange; border: none; color: white; } .btn-success { background: #00c896; border: none; color: white; } body.dark .btn-outline-secondary { color: #e2e8f0; border-color: #64748b; } body.dark .btn-outline-secondary:hover { background-color: #64748b; color: white; } /* COMPOSANTS SPÉCIFIQUES (Fusionnés de l'ancien style) */ .card-main { background: linear-gradient(135deg, var(--card), var(--bg)); border: 1px solid var(--border); /* Bordure discrète */ padding: 25px; border-radius: 15px; } body.dark .card-main { /* En mode sombre, on donne une teinte très légèrement verte pour rappeler la finance */ background: linear-gradient(135deg, #0f2f1f, #0a3a2a); border: 1px solid #00ff88; /* Bordure verte fluo très sympa sur fond noir */ } .small-card { background: var(--card); padding: 25px; border-radius: 15px; border: 1px solid var(--border); transition: 0.2s; } body.dark .small-card { border-color: #33334d; } .small-card:hover { transform: translateY(-5px); /* Animation qui soulève la carte */ border-color: var(--primary); } .text-success { color: #00c896 !important; } .text-danger { color: #ff4d4d !important; } /* RESPONSIVE (Écrans de téléphones) */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform 0.3s ease-in-out; z-index: 1000; /* Remplacer display: none par transform pour l'animation */ } .sidebar.open { transform: translateX(0); } /* Cache la barre latérale sur petit écran */ .content { margin-left: 0; padding: 20px; } /* Retire la marge de gauche */ } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); filter: brightness(1.05); } .btn-primary { transition: all 0.2s ease; }