/* style.css — dark mode corrigé et harmonisé - Variables de thème (light/dark) - Overrides Bootstrap pour .bg-light, .navbar, .card, .form-control, toggler icon - Transitions pour bascule douce */ /* ============================ Variables (thème clair par défaut) ============================ */ :root{ --primary: #316e8a; --primary-contrast: #ffffff; --bg-start: #f6f9fb; --bg-end: #f6f9fb; /* identique => pas de bande */ --surface: #ffffff; --card-bg: #ffffff; --text: #0b2233; --muted: #6c757d; --nav-bg: rgba(255,255,255,0.95); --input-bg: #ffffff; --input-border: rgba(0,0,0,0.08); --shadow: 0 6px 18px rgba(13,71,89,0.07); --card-radius: 14px; } /* ============================ Thème sombre (activez .dark sur ) ============================ */ html.dark{ --primary: #2a9d8f; --primary-contrast: #0b1113; --bg-start: #0b1013; /* même couleur */ --bg-end: #0b1013; /* identique => pas de bande */ --surface: #0f1115; --card-bg: rgba(255,255,255,0.02); --text: #e6eef2; --muted: #9aa4ad; --nav-bg: rgba(255,255,255,0.03); --input-bg: rgba(255,255,255,0.03); --input-border: rgba(255,255,255,0.06); --shadow: 0 6px 28px rgba(0,0,0,0.6); } /* ============================ Global ============================ */ html, body { height: 100%; font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg, var(--bg-start), var(--bg-end)); color: var(--text); transition: background 300ms ease, color 300ms ease; } /* Brand */ .brand-icon { font-size: 1.7rem; color: var(--primary); } .brand-title { font-weight:600; line-height:1; } .brand-sub { font-size:0.75rem; color:var(--muted); } /* Hero */ .hero { padding-top: 3rem; padding-bottom:3rem; } .hero .avatar img { width:220px; height:220px; object-fit:cover; } /* Cards (android-like) */ .card.android-like, .card { border-radius: var(--card-radius); box-shadow: var(--shadow); border: none; background: var(--card-bg); color: var(--text); transition: background 300ms ease, color 300ms ease, box-shadow 300ms ease; } /* Titres accent */ h1, h3, .card-title { color: var(--primary); } /* Buttons */ .btn-primary { background: linear-gradient(180deg, var(--primary), #1f5a6f); color: var(--primary-contrast); border: none; } .btn-outline-primary { color: var(--primary); border-color: rgba(49,110,138,0.25); } .btn-outline-primary:hover { background: var(--primary); color: var(--primary-contrast); } /* Inputs / textarea */ .form-control { background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); transition: background 200ms ease, border-color 200ms ease, color 200ms ease; } .form-control:focus { box-shadow: none; border-color: rgba(49,110,138,0.35); } /* Navbar / bg-light overrides so Bootstrap light classes don't break dark */ .navbar, .bg-light { background: var(--nav-bg) !important; transition: background 200ms ease; } .navbar .navbar-brand, .navbar .nav-link { color: var(--text) !important; } .navbar .nav-link:hover { color: var(--primary) !important; } html.dark .navbar .navbar-brand, html.dark .navbar .nav-link { color: var(--text) !important; } /* Footer */ footer { background: transparent; color: var(--muted); } html.dark footer { color: var(--muted); border-top: 1px solid rgba(255,255,255,0.05); } /* Small utilities & responsive */ @media (max-width: 768px) { .hero { text-align:center; } } /* Highlight name */ #nameHighlight{ background: linear-gradient(90deg, rgba(49,110,138,0.12), rgba(42,157,143,0.12)); padding: 0.1rem 0.4rem; border-radius: 6px; } /* Dark-specific card and border subtlety */ html.dark .card { border: 1px solid rgba(255,255,255,0.03); } /* Make sure .bg-light areas (cards, hero etc.) follow card-bg */ .bg-light, .card-body, header, main { background-clip: padding-box; } /* Navbar-toggler icon visible in both themes (SVG data URL) */ .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(11,34,51,0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } html.dark .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(230,238,242,0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } /* Progress bars */ .progress { background: rgba(0,0,0,0.05); border-radius: 8px; overflow: hidden; } .progress-bar { font-size: 0.8rem; font-weight: 500; transition: width 0.6s ease; } html.dark .progress { background: rgba(255,255,255,0.08); } html.dark .progress-bar { color: #fff; } /* focus states */ a:focus, button:focus, input:focus, textarea:focus { outline: 3px solid rgba(49,110,138,0.12); outline-offset: 2px; } /* Animation LinkedIn Glow (pulse smooth) */ @keyframes linkedin-glow { 0% { box-shadow: 0 0 0px 0 rgba(0, 119, 181, 0.0); } 40% { box-shadow: 0 0 20px 6px rgba(0, 119, 181, 0.7); } 60% { box-shadow: 0 0 25px 10px rgba(0, 119, 181, 0.5); } 100% { box-shadow: 0 0 0px 0 rgba(0, 119, 181, 0.0); } } .glow { border-radius: 6px; animation: linkedin-glow 1.8s ease-in-out; } /* ========================= Lisibilité en mode sombre ========================= */ /* Texte normal dans les cards */ html.dark .card, html.dark .card-body, html.dark p, html.dark li { color: var(--text) !important; } /* Texte "muted" (petit, secondaire) */ html.dark .text-muted, html.dark small, html.dark .small { color: #b0bac3 !important; /* gris clair lisible */ } /* Titres */ html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6, html.dark .card-title { color: var(--primary) !important; } /* Liens dans les cartes (Certifications, CV, etc.) */ .card a { color: var(--text); text-decoration: underline; transition: color 0.2s ease; } /* Survol → utiliser la couleur primaire */ .card a:hover { color: var(--primary); text-decoration: none; }