html.light-mode body {
    --primary-bg: #edf1ff;
    --text-white: #1a1e3a;
    --text-gray: #4a5170;
    background: var(--primary-bg);
    color: var(--text-white);
}

html.light-mode .navbar {
    background: rgba(237, 241, 255, 0.95);
    box-shadow: 0 1px 0 rgba(74, 111, 165, 0.15);
}

html.light-mode .nav-menu {
    background: rgba(237, 241, 255, 0.98);
}

html.light-mode .burger-line {
    background-color: #1a1e3a;
}

html.light-mode .theme-icon-sun  { display: none; }
html.light-mode .theme-icon-moon { display: block; }

html.light-mode .theme-toggle:hover,
html.light-mode .lang-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
}

html.light-mode .theme-icon,
html.light-mode .globe-icon {
    filter: none;
}

html.light-mode .lang-dropdown {
    background: rgba(237, 241, 255, 0.98);
    box-shadow: 0 4px 20px rgba(74, 111, 165, 0.15);
}

html.light-mode .lang-btn {
    color: #4a5170;
}

html.light-mode .lang-btn:hover {
    background: rgba(74, 111, 165, 0.1);
    color: #1a1e3a;
}

html.light-mode .lang-btn.active {
    background: rgba(74, 111, 165, 0.15);
    color: #1a1e3a;
}

@media (max-width: 980px) {
    html.light-mode .lang-dropdown {
        background: rgba(74, 111, 165, 0.08);
    }

    html.light-mode .lang-switcher {
        border-top-color: rgba(74, 111, 165, 0.2);
    }

    html.light-mode .theme-toggle {
        background: rgba(74, 111, 165, 0.08);
    }
}

html.light-mode footer a:hover {
    color: #1a1e3a;
}

html.light-mode :focus-visible {
    outline-color: rgba(43, 58, 135, 0.85);
}

html.light-mode .projets-filters {
    background: rgba(237, 241, 255, 0.95);
    box-shadow: 0 1px 0 rgba(74, 111, 165, 0.12);
}

html.light-mode .test-link,
html.light-mode .outil-link,
html.light-mode .back-link,
html.light-mode .btn-generate,
html.light-mode .submit-btn,
html.light-mode .kofi-button,
html.light-mode .btn-home,
html.light-mode .qrcode-result .btn-download,
html.light-mode .projet-detail-link,
html.light-mode .projet-detail-back,
html.light-mode .hero-btn-primary {
    background: linear-gradient(135deg, #5b8dd9 0%, #7ab0f0 100%);
    color: #ffffff;
}

html.light-mode .test-link:hover,
html.light-mode .outil-link:hover,
html.light-mode .back-link:hover,
html.light-mode .btn-generate:hover:not(:disabled),
html.light-mode .submit-btn:hover,
html.light-mode .kofi-button:hover,
html.light-mode .btn-home:hover,
html.light-mode .qrcode-result .btn-download:hover,
html.light-mode .projet-detail-link:hover,
html.light-mode .projet-detail-back:hover,
html.light-mode .hero-btn-primary:hover {
    background: linear-gradient(135deg, #4a7fc8 0%, #6aa0e0 100%);
    color: #ffffff;
}

html.light-mode .filter-button {
    color: #1a1e3a;
    box-shadow: inset 0 0 0 1px rgba(74, 111, 165, 0.4);
}

html.light-mode .filter-button:hover {
    background: rgba(74, 111, 165, 0.1);
    box-shadow: inset 0 0 0 1px rgba(74, 111, 165, 0.65);
    color: #1a1e3a;
}

html.light-mode .hero-btn-secondary {
    color: #1a1e3a;
    border-color: rgba(43, 58, 135, 0.35);
}

html.light-mode .hero-btn-secondary:hover {
    background: rgba(43, 58, 135, 0.08);
    border-color: rgba(43, 58, 135, 0.6);
    color: #1a1e3a;
}

html.light-mode .filter-button.active {
    background: linear-gradient(135deg, #5b8dd9 0%, #7ab0f0 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(74, 111, 165, 0.3);
}

html.light-mode .filter-button.active:hover {
    background: linear-gradient(135deg, #4a7fc8 0%, #6aa0e0 100%);
}


html.light-mode .skills-category-title {
    color: #4a5170;
}

html.light-mode .projet-card,
html.light-mode .outil-card,
html.light-mode .donateur-card,
html.light-mode .tool-panel,
html.light-mode .duration-result,
html.light-mode .qrcode-result,
html.light-mode .projet-detail-sidebar,
html.light-mode .projet-detail-section {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(74, 111, 165, 0.15);
    box-shadow: 0 2px 12px rgba(74, 111, 165, 0.08);
}

html.light-mode .projet-card:hover,
html.light-mode .outil-card:hover,
html.light-mode .donateur-card:hover {
    box-shadow: 0 10px 30px rgba(74, 111, 165, 0.2);
}

html.light-mode .projet-date {
    background: rgba(74, 111, 165, 0.1);
    border-color: rgba(74, 111, 165, 0.2);
}

html.light-mode .github-link {
    background: rgba(26, 30, 58, 0.08);
}

html.light-mode .github-link:hover {
    background: rgba(26, 30, 58, 0.15);
}

html.light-mode .projet-type {
    color: #4a6fa5;
}

html.light-mode .projet-prive {
    background: transparent;
    border-color: rgba(74, 111, 165, 0.3);
    color: #4a5580;
}

html.light-mode .about-link {
    border-color: rgba(43, 58, 135, 0.35);
    color: #1a1e3a;
}

html.light-mode .about-link:hover {
    background: rgba(43, 58, 135, 0.08);
    border-color: rgba(43, 58, 135, 0.6);
}

html.light-mode .input-field,
html.light-mode .size-input,
html.light-mode select.size-input {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(74, 111, 165, 0.4);
    color: #1a1e3a;
}

html.light-mode .input-field::placeholder {
    color: rgba(74, 81, 112, 0.6);
}

html.light-mode .input-field:focus,
html.light-mode .size-input:focus,
html.light-mode select.size-input:focus {
    background: #ffffff;
    border-color: rgba(74, 111, 165, 0.8);
    box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.15);
}

html.light-mode select.size-input,
html.light-mode select.size-input:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1e3a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

html.light-mode select.size-input option {
    background: #ffffff;
    color: #1a1e3a;
}

html.light-mode .btn-generate:disabled {
    background: linear-gradient(135deg, #c5cde8 0%, #a8b8d0 100%);
}

html.light-mode .contact-form-wrapper {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(74, 111, 165, 0.15);
    box-shadow: 0 4px 20px rgba(74, 111, 165, 0.08);
}

html.light-mode .form-group label,
html.light-mode .form-label {
    color: #1a1e3a;
}

html.light-mode .form-group input,
html.light-mode .form-group textarea {
    background: rgba(237, 241, 255, 0.8);
    border-color: rgba(74, 111, 165, 0.3);
    color: #1a1e3a;
}

html.light-mode .form-group input::placeholder,
html.light-mode .form-group textarea::placeholder {
    color: rgba(74, 81, 112, 0.45);
}

html.light-mode .form-group input:focus,
html.light-mode .form-group textarea:focus {
    background: #ffffff;
    border-color: rgba(74, 111, 165, 0.7);
    box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.12);
}

html.light-mode .theme-chip {
    box-shadow: inset 0 0 0 1px rgba(74, 111, 165, 0.3);
    color: #4a5170;
}

html.light-mode .theme-chip:hover {
    box-shadow: inset 0 0 0 1px rgba(74, 111, 165, 0.6);
    background: rgba(74, 111, 165, 0.1);
    color: #1a1e3a;
}

html.light-mode .theme-chip.active {
    background: linear-gradient(135deg, #5b8dd9 0%, #7ab0f0 100%);
    box-shadow: 0 2px 8px rgba(74, 111, 165, 0.25);
    color: #ffffff;
}

html.light-mode .custom-subject-input {
    background: rgba(237, 241, 255, 0.8);
    border-color: rgba(74, 111, 165, 0.3);
    color: #1a1e3a;
}

html.light-mode .custom-subject-input::placeholder {
    color: rgba(74, 81, 112, 0.45);
}

html.light-mode .custom-subject-input:focus {
    background: #ffffff;
    border-color: rgba(74, 111, 165, 0.7);
    box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.12);
}

html.light-mode .form-message-text {
    color: #1a1e3a;
}

html.light-mode .contact-info-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(74, 111, 165, 0.15);
}


html.light-mode .contact-info-icon {
    background: rgba(74, 111, 165, 0.1);
}

html.light-mode .contact-info-label {
    color: #6a7290;
}

html.light-mode .contact-info-value {
    color: #1a1e3a;
}

html.light-mode a.contact-info-value:hover {
    color: rgba(43, 58, 135, 1);
}

html.light-mode .contact-icon {
    filter: brightness(0);
    opacity: 0.65;
}

html.light-mode .skill-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(74, 111, 165, 0.2);
}

html.light-mode .skill-card:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(74, 111, 165, 0.4);
    box-shadow: 0 15px 30px rgba(74, 111, 165, 0.12);
}

html.light-mode .social-card,
html.light-mode .social-card.youtube,
html.light-mode .social-card.github,
html.light-mode .social-card.instagram,
html.light-mode .social-card.twitter,
html.light-mode .social-card.twitch,
html.light-mode .social-card.steam {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(74, 111, 165, 0.15);
}

html.light-mode .social-card.github .social-icon,
html.light-mode .social-card.twitter .social-icon {
    filter: brightness(0) opacity(0.7);
}

html.light-mode .social-card.youtube:hover {
    background: rgba(255, 0, 0, 0.06);
    border-color: #FF0000;
    box-shadow: 0 20px 40px rgba(255, 0, 0, 0.1);
}

html.light-mode .social-card.github:hover {
    background: rgba(36, 41, 47, 0.08);
    border-color: rgba(36, 41, 47, 0.5);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

html.light-mode .social-card.github:hover .social-icon,
html.light-mode .social-card.twitter:hover .social-icon {
    filter: brightness(0) opacity(0.75);
}

html.light-mode .social-card.instagram:hover {
    background: linear-gradient(45deg, rgba(131, 58, 180, 0.07), rgba(253, 29, 29, 0.07), rgba(252, 176, 69, 0.07));
    border-color: #E1306C;
    box-shadow: 0 20px 40px rgba(225, 48, 108, 0.1);
}

html.light-mode .social-card.twitter:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

html.light-mode .social-card.twitch:hover {
    background: rgba(145, 70, 255, 0.07);
    border-color: #9146FF;
    box-shadow: 0 20px 40px rgba(145, 70, 255, 0.1);
}

html.light-mode .social-card.steam:hover {
    background: rgba(102, 192, 244, 0.1);
    border-color: #66C0F4;
    box-shadow: 0 20px 40px rgba(102, 192, 244, 0.1);
}


html.light-mode .donateur-avatar {
    border-color: rgba(74, 111, 165, 0.3);
    box-shadow: 0 4px 12px rgba(74, 111, 165, 0.15);
}

html.light-mode .donateur-montant {
    background: rgba(74, 111, 165, 0.08);
    border-color: rgba(74, 111, 165, 0.2);
}

html.light-mode .donateur-name {
    color: #1a1e3a;
}

html.light-mode .donation-cta {
    background: linear-gradient(135deg, rgba(91, 141, 217, 0.08) 0%, rgba(74, 111, 165, 0.1) 100%);
    border-color: rgba(74, 111, 165, 0.2);
}

html.light-mode .donation-cta::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(91, 141, 217, 0.06) 0%, transparent 70%);
}

html.light-mode .unit-select,
html.light-mode .unit-select:focus {
    background-color: rgba(255, 255, 255, 0.9);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1e3a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    border-color: rgba(74, 111, 165, 0.4);
    color: #1a1e3a;
}

html.light-mode .unit-select option {
    background: #ffffff;
    color: #1a1e3a;
}

html.light-mode .result-field {
    background: rgba(74, 111, 165, 0.05);
}

html.light-mode .info-box {
    background: rgba(74, 111, 165, 0.06);
    border-color: rgba(74, 111, 165, 0.2);
}

html.light-mode .result-main {
    background: rgba(74, 111, 165, 0.08);
    border-color: rgba(74, 111, 165, 0.2);
}

html.light-mode .result-item {
    background: rgba(74, 111, 165, 0.07);
    border-color: rgba(74, 111, 165, 0.2);
}

html.light-mode .alternative-item {
    background: rgba(74, 111, 165, 0.05);
}

html.light-mode .result-alternatives {
    border-top-color: rgba(74, 111, 165, 0.15);
}

html.light-mode .btn-quick {
    background: rgba(74, 111, 165, 0.1);
    border-color: rgba(74, 111, 165, 0.25);
    color: #1a1e3a;
}

html.light-mode .btn-quick:hover {
    background: rgba(74, 111, 165, 0.18);
    border-color: rgba(74, 111, 165, 0.4);
}

html.light-mode .password-display,
html.light-mode .btn-copy {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(74, 111, 165, 0.35);
    color: #1a1e3a;
}

html.light-mode .btn-copy svg {
    stroke: #1a1e3a;
}

html.light-mode .btn-copy:hover:not(:disabled) {
    background: rgba(74, 111, 165, 0.08);
    border-color: rgba(74, 111, 165, 0.6);
}

html.light-mode .checkbox-label {
    background: rgba(74, 111, 165, 0.07);
    color: #1a1e3a;
}

html.light-mode .checkbox-label:hover {
    background: rgba(74, 111, 165, 0.12);
}

html.light-mode .checkbox-custom {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(74, 111, 165, 0.4);
}

html.light-mode .strength-meter {
    background: rgba(74, 111, 165, 0.06);
    border-color: rgba(74, 111, 165, 0.15);
}

html.light-mode .range-input,
html.light-mode .range-slider {
    background: rgba(74, 111, 165, 0.2);
}

html.light-mode .strength-bar-container {
    background: rgba(74, 111, 165, 0.15);
}

html.light-mode .upload-zone {
    background: rgba(74, 111, 165, 0.04);
    border-color: rgba(74, 111, 165, 0.3);
}

html.light-mode .upload-zone.drag-over {
    background: rgba(74, 111, 165, 0.08);
    border-color: rgba(74, 111, 165, 0.7);
}

html.light-mode .upload-hint,
html.light-mode .picker-hint,
html.light-mode .strength-bound {
    color: rgba(74, 81, 112, 0.6);
}

html.light-mode .btn-secondary {
    border-color: rgba(74, 111, 165, 0.4);
    color: #4a6fa5;
}

html.light-mode .btn-secondary:hover {
    background: rgba(74, 111, 165, 0.08);
    border-color: rgba(74, 111, 165, 0.7);
    color: #1a1e3a;
}

html.light-mode .color-input,
html.light-mode .color-text {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(74, 111, 165, 0.35);
    color: #1a1e3a;
}

html.light-mode .color-text:focus {
    background: #ffffff;
    border-color: rgba(74, 111, 165, 0.8);
    box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.15);
}

html.light-mode .upload-icon img {
    filter: brightness(0) opacity(0.4);
}

html.light-mode .projet-detail-section-title {
    border-bottom-color: rgba(74, 111, 165, 0.15);
}

html.light-mode .projet-detail-links {
    border-top-color: rgba(74, 111, 165, 0.15);
}

html.light-mode .projet-detail-tag {
    background: rgba(74, 111, 165, 0.1);
    border-color: rgba(74, 111, 165, 0.2);
    color: #1a1e3a;
}

html.light-mode .projet-detail-screenshot {
    border-color: rgba(74, 111, 165, 0.15);
}

html.light-mode .projet-detail-link.github {
    background: rgba(26, 30, 58, 0.07);
    color: #1a1e3a;
    border: 1px solid rgba(26, 30, 58, 0.2);
}

html.light-mode .projet-detail-link.github:hover {
    background: rgba(26, 30, 58, 0.12);
}

html.light-mode .legal-section {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(74, 111, 165, 0.15);
    box-shadow: 0 2px 12px rgba(74, 111, 165, 0.08);
}

html.light-mode .legal-section a {
    color: #4a6fa5;
}

html.light-mode .legal-section a:hover {
    color: #2b3a87;
}

html.light-mode .legal-section code {
    background: rgba(74, 111, 165, 0.1);
    border-color: rgba(74, 111, 165, 0.2);
    color: #2b3a87;
}

html.light-mode .legal-update {
    color: rgba(74, 81, 112, 0.55);
}