:root {
    /* Variables de couleur mode clair - PLUS VIVES ET PROFESSIONNELLES */
    --primary-color-light: #6C5CE7;          /* Violet électrique plus professionnel */
    --primary-dark-light: #5B4FCF;           /* Version assombrie */
    --primary-light-light: #A29BFE;          /* Version pastel douce */
    --secondary-color-light: #00CEC9;        /* Turquoise vivant et professionnel */
    --dark-color-light: #2D3436;             /* Noir chaud plus doux */
    --dark-light-light: #636E72;             /* Gris foncé soft */
    --light-color-light: #F9F9FF;            /* Blanc bleuté très doux */
    --gray-color-light: #8395A7;             /* Gris neutre professionnel */
    --success-color-light: #00D2D3;          /* Turquoise de succès harmonieux */
    --bg-color-light: #FFFFFF;               /* Blanc pur */
    --card-bg-light: #F8F9FF;                /* Bleu très pâle subtil */
    --border-color-light: #E3E8FF;           /* Bordure bleutée douce */
    
    /* Variables de couleur mode sombre - ÉQUILIBRÉ ET PROFESSIONNEL */
    --primary-color-dark: #7C73E6;           /* Violet plus lumineux sur fond sombre */
    --primary-dark-dark: #6C63D6;            /* Version contrastée */
    --primary-light-dark: #9D95F0;           /* Violet doux */
    --secondary-color-dark: #00E5E8;         /* Cyan vif mais contrôlé */
    --dark-color-dark: #121826;              /* Fond bleu nuit profond */
    --dark-light-dark: #1E2435;              /* Bleu foncé chaleureux */
    --light-color-dark: #E6E9FF;             /* Blanc bleuté très doux */
    --gray-color-dark: #94A1B8;              /* Gris bleuté lisible */
    --success-color-dark: #00E5E8;           /* Cyan de succès */
    --bg-color-dark: #0D111F;                /* Fond bleu nuit très profond */
    --card-bg-dark: rgba(30, 36, 53, 0.85);  /* Cartes avec transparence élégante */
    --border-color-dark: rgba(124, 115, 230, 0.2); /* Bordures subtiles violettes */
    
    /* Variables dynamiques (basculées entre light/dark) */
    --primary-color: var(--primary-color-dark);
    --primary-dark: var(--primary-dark-dark);
    --primary-light: var(--primary-light-dark);
    --secondary-color: var(--secondary-color-dark);
    --dark-color: var(--dark-color-dark);
    --dark-light: var(--dark-light-dark);
    --light-color: var(--light-color-dark);
    --gray-color: var(--gray-color-dark);
    --success-color: var(--success-color-dark);
    --bg-color: var(--bg-color-dark);
    --card-bg: var(--card-bg-dark);
    --border-color: var(--border-color-dark);
    
    /* Variables communes améliorées */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 2px 8px rgba(108, 92, 231, 0.08);
    --shadow-md: 0 4px 24px rgba(108, 92, 231, 0.12);
    --shadow-lg: 0 8px 48px rgba(108, 92, 231, 0.16);
    --shadow-xl: 0 16px 64px rgba(108, 92, 231, 0.2);
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --gradient-dark: linear-gradient(135deg, var(--dark-color) 0%, var(--dark-light) 100%);
    --gradient-soft: linear-gradient(135deg, rgba(108, 92, 231, 0.1) 0%, rgba(0, 206, 201, 0.1) 100%);
}

.light-mode {
    --primary-color: var(--primary-color-light);
    --primary-dark: var(--primary-dark-light);
    --primary-light: var(--primary-light-light);
    --secondary-color: var(--secondary-color-light);
    --dark-color: var(--dark-color-light);
    --dark-light: var(--dark-light-light);
    --light-color: var(--light-color-light);
    --gray-color: var(--gray-color-light);
    --success-color: var(--success-color-light);
    --bg-color: var(--bg-color-light);
    --card-bg: var(--card-bg-light);
    --border-color: var(--border-color-light);
}
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            color: var(--dark-color);
            background-color: var(--bg-color);
            line-height: 1.7;
            overflow-x: hidden;
            position: relative;
            transition: background-color 0.5s ease, color 0.5s ease;
        }
        
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 50%, rgba(124, 58, 237, 0.05) 0%, transparent 50%), 
                        radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.04) 0%, transparent 50%);
            z-index: -1;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }
        
        .light-mode body::before {
            background: radial-gradient(circle at 20% 50%, rgba(124, 58, 237, 0.03) 0%, transparent 50%), 
                        radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.02) 0%, transparent 50%);
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            line-height: 1.2;
            color: var(--dark-color);
            transition: color 0.5s ease;
        }
        
        /* Bande Promotionnelle */
        .promo-banner {
            background: var(--gradient-primary);
            color: white;
            padding: 0.8rem 0;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
            box-shadow: var(--shadow-md);
        }
        
        .promo-banner.hidden {
            transform: translateY(-100%);
        }
        
        .promo-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            text-align: center;
        }
        
        .promo-badge {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            padding: 0.3rem 0.8rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .promo-text {
            font-weight: 500;
            font-size: 0.95rem;
        }
        
        .promo-btn {
            background: white;
            color: var(--primary-color);
            border: none;
            padding: 0.4rem 1rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.85rem;
            transition: var(--transition);
            text-decoration: none;
        }
        
        .promo-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        
        .close-promo {
            background: transparent;
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            margin-left: 1rem;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }
        
        .close-promo:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        /* Ajustement du body pour la bande promo */
        body.has-promo-banner {
            padding-top: 48px;
        }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
        }
        
        ::-webkit-scrollbar-track {
            background: var(--card-bg);
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 5px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-dark);
        }
        
        /* Loader */
        .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s, visibility 0.5s;
        }
        
        .loader.hidden {
            opacity: 0;
            visibility: hidden;
        }
        
        .loader-circle {
            width: 80px;
            height: 80px;
            border: 4px solid transparent;
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            position: relative;
        }
        
        .loader-circle::before {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            border: 4px solid transparent;
            border-top: 4px solid var(--secondary-color);
            border-radius: 50%;
            animation: spin 2s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Cursor */
        .cursor {
            position: fixed;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(124, 58, 237, 0.5);
            pointer-events: none;
            z-index: 9998;
            transition: transform 0.2s, background 0.3s;
            mix-blend-mode: difference;
        }
        
        .cursor-follower {
            position: fixed;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid rgba(124, 58, 237, 0.3);
            pointer-events: none;
            z-index: 9997;
            transition: transform 0.4s;
        }
        
        /* Navbar */
        .navbar {
            background-color: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            padding: 1.2rem 0;
            border-bottom: 1px solid var(--border-color);
            position: fixed;
            width: 100%;
            z-index: 1000;
            transition: var(--transition);
        }
        
        .dark-mode .navbar {
            background-color: rgba(15, 23, 42, 0.85);
        }
        
        .body.has-promo-banner .navbar {
            top: 48px;
        }
        
        .navbar.scrolled {
            padding: 0.8rem 0;
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: var(--shadow-lg);
        }
        
        .dark-mode .navbar.scrolled {
            background-color: rgba(15, 23, 42, 0.95);
        }
        
        .navbar-brand {
            font-size: 1.8rem;
            font-weight: 800;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .navbar-brand:hover {
            color: var(--light-color) !important;
        }
        
        .nav-link {
            font-weight: 500;
            margin: 0 0.5rem;
            color: var(--light-color) !important;
            transition: var(--transition);
            position: relative;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--gradient-primary);
            transition: var(--transition);
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--primary-color) !important;
        }
        
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }
        
        .navbar-toggler {
            border: 1px solid var(--border-color);
            padding: 0.5rem;
        }
        
        .navbar-toggler:focus {
            box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
        }
        
        /* Theme Toggle Button */
        .theme-toggle {
            width: 50px;
            height: 26px;
            background: var(--card-bg);
            border-radius: 50px;
            border: 1px solid var(--border-color);
            position: relative;
            cursor: pointer;
            margin-left: 1rem;
            transition: var(--transition);
        }
        
        .theme-toggle:hover {
            border-color: var(--primary-color);
        }
        
        .theme-toggle-inner {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            background: var(--primary-color);
            border-radius: 50%;
            transition: transform 0.3s ease;
        }
        
        .light-mode .theme-toggle-inner {
            transform: translateX(24px);
        }
        
        .theme-toggle i {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.8rem;
        }
        
        .theme-toggle .fa-sun {
            left: 6px;
            color: #F59E0B;
        }
        
        .theme-toggle .fa-moon {
            right: 6px;
            color: #94A3B8;
        }
        
        /* Hero Section - CORRIGÉ */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 150px 0 100px;
            position: relative;
            overflow: hidden;
            background-color: var(--bg-color);
        }
        
        .body.has-promo-banner .hero {
            padding-top: 100px;
        }
        
        .hero-content h1 {
            font-size: 4rem;
            margin-bottom: 1.5rem;
            line-height: 1.1;
            color: var(--dark-color);
        }
        
        .hero-highlight {
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: inline-block;
            position: relative;
        }
        
        .hero-highlight::after {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 100%;
            height: 8px;
            background: rgba(124, 58, 237, 0.15);
            z-index: -1;
            border-radius: 4px;
        }
        
        .hero-subtitle {
            font-size: 1.3rem;
            color: var(--gray-color);
            margin-bottom: 2.5rem;
            max-width: 600px;
        }
        
        .hero-btns {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 1rem 2.2rem;
            border-radius: 50px;
            font-weight: 600;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .btn-primary {
            background: var(--gradient-primary);
            border: none;
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
        }
        
        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
        }
        
        .btn-outline:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
        }
        
        /* Image Hero */
        .hero-image-container {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-xl);
            transition: var(--transition);
            height: 500px;
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
        }
        
        .hero-image-container:hover {
            transform: translateY(-10px) rotate(1deg);
            box-shadow: var(--shadow-xl), 0 30px 80px rgba(124, 58, 237, 0.3);
        }
        
        .hero-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }
        
        .hero-image-container:hover .hero-image {
            transform: scale(1.05);
        }
        
        .image-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, transparent 100%);
            padding: 2rem;
            color: white;
            transform: translateY(20px);
            opacity: 0;
            transition: var(--transition);
        }
        
        .hero-image-container:hover .image-overlay {
            transform: translateY(0);
            opacity: 1;
        }
        
        .image-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--gradient-primary);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.9rem;
            box-shadow: var(--shadow-md);
            z-index: 2;
        }
        
        .floating-shapes {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: -1;
        }
        
        .shape {
            position: absolute;
            border-radius: 50%;
            background: var(--gradient-primary);
            opacity: 0.1;
            filter: blur(40px);
        }
        
        .shape-1 {
            width: 300px;
            height: 300px;
            top: 10%;
            right: 10%;
            animation: float 6s ease-in-out infinite;
        }
        
        .shape-2 {
            width: 200px;
            height: 200px;
            bottom: 20%;
            left: 5%;
            animation: float 8s ease-in-out infinite 1s;
        }
        
        .shape-3 {
            width: 150px;
            height: 150px;
            top: 50%;
            right: 20%;
            animation: float 7s ease-in-out infinite 0.5s;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(10deg); }
        }
        
        /* Section Styling */
        section {
            padding: 120px 0;
            position: relative;
        }
        
        .section-title {
            font-size: 3rem;
            margin-bottom: 1rem;
            text-align: center;
            color: var(--dark-color);
        }
        
        .section-subtitle {
            text-align: center;
            color: var(--gray-color);
            max-width: 700px;
            margin: 0 auto 4rem;
            font-size: 1.1rem;
        }
        
        .divider {
            width: 80px;
            height: 4px;
            background: var(--gradient-primary);
            margin: 1rem auto 3rem;
            border-radius: 2px;
        }
        
        /* About Section */
        .about-card {
            border-radius: 20px;
            padding: 3rem;
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-color);
            transition: var(--transition);
            height: 100%;
        }
        
        .about-card:hover {
            transform: translateY(-10px);
            border-color: var(--primary-color);
            box-shadow: var(--shadow-xl);
        }
        
        .icon-wrapper {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(124, 58, 237, 0.1);
            margin-bottom: 1.5rem;
            color: var(--primary-color);
            font-size: 1.8rem;
        }
        
        /* Skills */
        .skills-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
        }
        
        .skill-card {
            background: var(--card-bg);
            border-radius: 15px;
            padding: 2rem;
            border: 1px solid var(--border-color);
            transition: var(--transition);
        }
        
        .skill-card:hover {
            border-color: var(--primary-color);
            transform: translateY(-5px);
        }
        
        .skill-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }
        
        .skill-name {
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .skill-percentage {
            color: var(--primary-color);
            font-weight: 700;
        }
        
        .skill-bar {
            height: 8px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 4px;
            overflow: hidden;
            position: relative;
        }
        
        .dark-mode .skill-bar {
            background: rgba(255, 255, 255, 0.05);
        }
        
        .skill-progress {
            height: 100%;
            background: var(--gradient-primary);
            border-radius: 4px;
            transition: width 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        
        /* Portfolio */
        .portfolio {
            background: var(--gradient-dark);
        }
        
        .light-mode .portfolio {
            background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
        }
        
        .portfolio-filter {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 3rem;
        }
        
        .filter-btn {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            color: var(--gray-color);
            padding: 0.7rem 1.8rem;
            border-radius: 50px;
            font-weight: 500;
            transition: var(--transition);
            cursor: pointer;
        }
        
        .filter-btn.active, .filter-btn:hover {
            background: var(--gradient-primary);
            color: white;
            border-color: transparent;
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        
        .portfolio-item {
            border-radius: 20px;
            overflow: hidden;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            transition: var(--transition);
            position: relative;
            margin-bottom: 2rem;
        }
        
        .portfolio-item:hover {
            transform: translateY(-10px);
            border-color: var(--primary-color);
            box-shadow: var(--shadow-xl);
        }
        
        .portfolio-img {
            height: 250px;
            overflow: hidden;
            position: relative;
        }
        
        .portfolio-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        
        .portfolio-item:hover .portfolio-img img {
            transform: scale(1.1);
        }
        
        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: var(--transition);
            padding: 2rem;
        }
        
        .light-mode .portfolio-overlay {
            background: rgba(255, 255, 255, 0.95);
        }
        
        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }
        
        .portfolio-info {
            padding: 1.5rem;
        }
        
        .portfolio-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 1rem;
        }
        
        .portfolio-tag {
            background: rgba(124, 58, 237, 0.1);
            color: var(--primary-light);
            padding: 0.3rem 0.8rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        /* Portfolio Overlay Button */
        .portfolio-btn {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 10;
            padding: 0.8rem 1.8rem;
            background: var(--gradient-primary);
            color: white;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            box-shadow: var(--shadow-lg);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .portfolio-item:hover .portfolio-btn {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        
        /* Style mobile pour le bouton portfolio */
        @media (max-width: 768px) {
            .portfolio-btn {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
                bottom: 15px;
                padding: 0.7rem 1.5rem;
                font-size: 0.9rem;
            }
            
            .portfolio-overlay {
                opacity: 0.95;
                background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 30%, transparent 70%);
                justify-content: flex-end;
                padding-bottom: 4rem;
            }
            
            .light-mode .portfolio-overlay {
                background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 30%, transparent 70%);
            }
            
            .portfolio-item:hover .portfolio-overlay {
                opacity: 0.95;
            }
        }
        
        /* Contact */
        .contact-form .form-control {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1.2rem;
            color: var(--dark-color);
            transition: var(--transition);
            margin-bottom: 1.5rem;
        }
        
        .contact-form .form-control:focus {
            background: var(--card-bg);
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
            color: var(--dark-color);
        }
        
        .contact-form .form-control::placeholder {
            color: var(--gray-color);
        }
        
        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }
        
        .contact-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(124, 58, 237, 0.1);
            color: var(--primary-color);
            font-size: 1.5rem;
            flex-shrink: 0;
        }
        
        /* Footer */
        footer {
            background: var(--gradient-dark);
            padding: 5rem 0 2rem;
            border-top: 1px solid var(--border-color);
        }
        
        .light-mode footer {
            background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
        }
        
        .footer-logo {
            font-size: 2rem;
            font-weight: 800;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: inline-block;
            margin-bottom: 1.5rem;
        }
        
        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }
        
        .social-link {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--card-bg);
            color: var(--gray-color);
            font-size: 1.2rem;
            transition: var(--transition);
        }
        
        .social-link:hover {
            background: var(--gradient-primary);
            color: white;
            transform: translateY(-5px);
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 3rem;
            margin-top: 3rem;
            border-top: 1px solid var(--border-color);
            color: var(--gray-color);
        }
        
        /* Back to top */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--gradient-primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            text-decoration: none;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: var(--transition);
            z-index: 999;
            box-shadow: var(--shadow-lg);
        }
        
        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .back-to-top:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
        }
        
        /* Widget de Contact */
        .contact-widget {
            position: fixed;
            bottom: 30px;
            left: 30px;
            z-index: 999;
        }
        
        .widget-toggle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--gradient-primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: var(--shadow-xl);
            transition: var(--transition);
            border: none;
            position: relative;
            z-index: 1000;
        }
        
        .widget-toggle:hover {
            transform: scale(1.1) rotate(10deg);
            box-shadow: var(--shadow-xl), 0 0 30px rgba(124, 58, 237, 0.4);
        }
        
        .widget-toggle.active {
            transform: rotate(45deg);
        }
        
        .widget-toggle.active:hover {
            transform: scale(1.1) rotate(55deg);
        }
        
        .widget-container {
            position: absolute;
            bottom: 80px;
            left: 0;
            background: var(--card-bg);
            border-radius: 20px;
            padding: 2rem;
            min-width: 400px;
            box-shadow: var(--shadow-xl);
            border: 1px solid var(--border-color);
            transform: translateY(20px) scale(0.9);
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
            z-index: 999;
        }
        
        .widget-container.active {
            transform: translateY(0) scale(1);
            opacity: 1;
            visibility: visible;
        }
        
        .widget-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .widget-header h5 {
            margin: 0;
            color: var(--primary-color);
        }
        
        .close-widget {
            background: transparent;
            border: none;
            color: var(--gray-color);
            font-size: 1.2rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
        
        .close-widget:hover {
            background: rgba(124, 58, 237, 0.1);
            color: var(--primary-color);
        }
        
        .widget-options {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .widget-option {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background: var(--bg-color);
            border-radius: 12px;
            border: 1px solid var(--border-color);
            transition: var(--transition);
            text-decoration: none;
            color: var(--dark-color);
        }
        
        .widget-option:hover {
            border-color: var(--primary-color);
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }
        
        .widget-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(124, 58, 237, 0.1);
            color: var(--primary-color);
            font-size: 1.2rem;
            flex-shrink: 0;
        }
        
        .widget-text h6 {
            margin: 0;
            font-size: 1rem;
        }
        
        .widget-text p {
            margin: 0;
            font-size: 0.85rem;
            color: var(--gray-color);
        }
        
        /* Modal pour les projets */
        .project-modal .modal-content {
            background: var(--bg-color);
            color: var(--dark-color);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            overflow: hidden;
        }
        
        .project-modal .modal-header {
            border-bottom: 1px solid var(--border-color);
            background: var(--card-bg);
        }
        
        .project-modal .modal-footer {
            border-top: 1px solid var(--border-color);
            background: var(--card-bg);
        }
        
        .project-modal .btn-close {
            filter: invert(0.5);
        }
        
        .light-mode .project-modal .btn-close {
            filter: invert(0.3);
        }
        
        .project-modal-img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 1.5rem;
        }
        
        /* Modal de bienvenue */
        .welcome-modal .modal-content {
            background: var(--bg-color);
            color: var(--dark-color);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            overflow: hidden;
            border: none;
        }
        
        .welcome-modal .modal-header {
            border-bottom: none;
            background: var(--gradient-primary);
            color: white;
            padding: 2rem;
        }
        
        .welcome-modal .modal-body {
            padding: 2rem;
        }
        
        .welcome-modal .modal-footer {
            border-top: 1px solid var(--border-color);
            padding: 1.5rem;
        }
        
        .welcome-modal .btn-close {
            filter: brightness(0) invert(1);
        }
        
        .welcome-badge {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .welcome-icon {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
        }
        
        /* Témoignages Section - COMPLÈTEMENT RECODÉ */
        .testimonials-section {
            background: var(--gradient-dark);
            position: relative;
            overflow: hidden;
        }
        
        .light-mode .testimonials-section {
            background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
        }
        
        .testimonial-carousel {
            position: relative;
            min-height: 350px;
            overflow: hidden;
            margin-bottom: 2rem;
        }
        
        .testimonial-card {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 2.5rem;
            border: 1px solid var(--border-color);
            transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
            height: 100%;
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            transform: translateX(100px);
            backdrop-filter: blur(10px);
        }
        
        .testimonial-card.active {
            opacity: 1;
            transform: translateX(0);
            position: relative;
        }
        
        .testimonial-card.next {
            transform: translateX(100px);
            opacity: 0;
        }
        
        .testimonial-card.prev {
            transform: translateX(-100px);
            opacity: 0;
        }
        
        .testimonial-card:hover {
            transform: translateY(-10px) translateX(0);
            border-color: var(--primary-color);
            box-shadow: var(--shadow-xl);
        }
        
        .testimonial-content {
            font-style: italic;
            color: var(--gray-color);
            margin-bottom: 1.5rem;
            position: relative;
            font-size: 1.1rem;
            line-height: 1.8;
        }
        
        .testimonial-content::before {
            content: '"';
            font-size: 4rem;
            color: var(--primary-light);
            opacity: 0.3;
            position: absolute;
            top: -2rem;
            left: -1rem;
            font-family: Georgia, serif;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-top: 2rem;
        }
        
        .testimonial-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--primary-light);
        }
        
        .testimonial-info h5 {
            margin-bottom: 0.3rem;
            color: var(--dark-color);
            font-size: 1.1rem;
        }
        
        .testimonial-info p {
            color: var(--gray-color);
            font-size: 0.9rem;
            margin-bottom: 0;
        }
        
        .testimonial-rating {
            color: #FFD700;
            margin: 1rem 0;
            font-size: 1rem;
        }
        
        .testimonial-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1.5rem;
            margin-top: 3rem;
        }
        
        .testimonial-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            color: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            flex-shrink: 0;
            font-size: 1.2rem;
        }
        
        .testimonial-btn:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-3px) scale(1.1);
            box-shadow: var(--shadow-md);
        }
        
        .testimonial-dots {
            display: flex;
            gap: 0.7rem;
        }
        
        .testimonial-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--border-color);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .testimonial-dot.active {
            background: var(--primary-color);
            transform: scale(1.2);
            box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
        }
        
        /* Animation pour le carrousel */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes slideOut {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(-100px);
            }
        }
        
        /* Responsive */
        @media (max-width: 992px) {
            .hero-content h1 {
                font-size: 3.2rem;
            }
            
            .hero-image-container {
                height: 400px;
                max-width: 400px;
            }
            
            .section-title {
                font-size: 2.5rem;
            }
            
            .testimonial-card {
                padding: 2rem;
            }
        }
        
        @media (max-width: 768px) {
            .hero {
                text-align: center;
                padding: 130px 0 80px;
            }
            
            .body.has-promo-banner .hero {
                padding-top: 80px;
            }
            
            .hero-content h1 {
                font-size: 2.8rem;
            }
            
            .hero-btns {
                justify-content: center;
            }
            
            .hero-image-container {
                height: 350px;
                max-width: 350px;
                margin-top: 3rem;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .about-card, .skill-card {
                padding: 2rem;
            }
            
            .portfolio-btn {
                font-size: 0.85rem;
                padding: 0.6rem 1.2rem;
            }
            
            .promo-content {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .close-promo {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                margin-left: 0;
            }
            
            /* Ajustement des widgets pour mobile */
            .contact-widget {
                bottom: 20px;
                left: 20px;
            }
            
            .back-to-top {
                bottom: 20px;
                right: 20px;
            }
            
            .widget-container {
                min-width: 280px;
                left: -10px;
            }
            
            .testimonial-content {
                font-size: 1rem;
            }
            
            .testimonial-content::before {
                font-size: 3rem;
                top: -1.5rem;
            }
        }
        
        @media (max-width: 576px) {
            .hero-content h1 {
                font-size: 2.2rem;
            }
            
            .hero-subtitle {
                font-size: 1.1rem;
            }
            
            .hero-image-container {
                height: 300px;
                max-width: 300px;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .btn {
                padding: 0.9rem 1.8rem;
                width: 100%;
                justify-content: center;
            }
            
            .hero-btns {
                flex-direction: column;
            }
            
            .theme-toggle {
                margin-left: 0.5rem;
            }
            
            .promo-text {
                font-size: 0.85rem;
                padding-right: 30px;
            }
            
            /* Ajustement des widgets pour petits mobiles */
            .contact-widget {
                bottom: 15px;
                left: 15px;
            }
            
            .widget-toggle {
                width: 55px;
                height: 55px;
                font-size: 1.3rem;
            }
            
            .widget-container {
                min-width: 260px;
                left: -20px;
                padding: 1.5rem;
            }
            
            .testimonial-card {
                padding: 1.5rem;
            }
            
            .testimonial-author {
                flex-direction: column;
                text-align: center;
            }
            
            .testimonial-avatar {
                width: 70px;
                height: 70px;
            }
        }
        
        /* Animation classes */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        .fade-in-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Glitch effect */
        .glitch {
            position: relative;
        }
        
        .glitch::before,
        .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .glitch::before {
            left: 2px;
            text-shadow: -1px 0 #ff00c1;
            clip: rect(24px, 550px, 90px, 0);
            animation: glitch-anim 5s infinite linear alternate-reverse;
        }
        
        .glitch::after {
            left: -2px;
            text-shadow: -1px 0 #00fff9;
            clip: rect(85px, 550px, 140px, 0);
            animation: glitch-anim2 5s infinite linear alternate-reverse;
        }
        
        @keyframes glitch-anim {
            0% { clip: rect(42px, 9999px, 44px, 0); }
            5% { clip: rect(12px, 9999px, 59px, 0); }
            10% { clip: rect(48px, 9999px, 29px, 0); }
            15% { clip: rect(42px, 9999px, 73px, 0); }
            20% { clip: rect(63px, 9999px, 27px, 0); }
            25% { clip: rect(34px, 9999px, 55px, 0); }
            30% { clip: rect(86px, 9999px, 73px, 0); }
            35% { clip: rect(20px, 9999px, 20px, 0); }
            40% { clip: rect(26px, 9999px, 60px, 0); }
            45% { clip: rect(25px, 9999px, 66px, 0); }
            50% { clip: rect(57px, 9999px, 98px, 0); }
            55% { clip: rect(5px, 9999px, 46px, 0); }
            60% { clip: rect(82px, 9999px, 31px, 0); }
            65% { clip: rect(54px, 9999px, 27px, 0); }
            70% { clip: rect(28px, 9999px, 99px, 0); }
            75% { clip: rect(45px, 9999px, 69px, 0); }
            80% { clip: rect(23px, 9999px, 85px, 0); }
            85% { clip: rect(54px, 9999px, 84px, 0); }
            90% { clip: rect(45px, 9999px, 47px, 0); }
            95% { clip: rect(37px, 9999px, 20px, 0); }
            100% { clip: rect(4px, 9999px, 91px, 0); }
        }
        
        @keyframes glitch-anim2 {
            0% { clip: rect(65px, 9999px, 100px, 0); }
            5% { clip: rect(52px, 9999px, 74px, 0); }
            10% { clip: rect(79px, 9999px, 85px, 0); }
            15% { clip: rect(75px, 9999px, 5px, 0); }
            20% { clip: rect(67px, 9999px, 61px, 0); }
            25% { clip: rect(14px, 9999px, 79px, 0); }
            30% { clip: rect(1px, 9999px, 66px, 0); }
            35% { clip: rect(86px, 9999px, 30px, 0); }
            40% { clip: rect(23px, 9999px, 98px, 0); }
            45% { clip: rect(85px, 9999px, 72px, 0); }
            50% { clip: rect(71px, 9999px, 75px, 0); }
            55% { clip: rect(2px, 9999px, 48px, 0); }
            60% { clip: rect(30px, 9999px, 16px, 0); }
            65% { clip: rect(59px, 9999px, 50px, 0); }
            70% { clip: rect(41px, 9999px, 62px, 0); }
            75% { clip: rect(2px, 9999px, 82px, 0); }
            80% { clip: rect(47px, 9999px, 73px, 0); }
            85% { clip: rect(3px, 9999px, 27px, 0); }
            90% { clip: rect(40px, 9999px, 86px, 0); }
            95% { clip: rect(45px, 9999px, 78px, 0); }
            100% { clip: rect(62px, 9999px, 102px, 0); }
        }

/* want bg */
.want-bg {
    background: #f0f3ff;
}

/* want color */
.dark-mode .want-color p {
    color: #000 !important;
}

/* Assurer que le texte reste noir en mode sombre aussi */
.dark-mode .about-card {
    background-color: white !important;
    color: #000 !important;
}

.dark-mode .about-card h4,
.dark-mode .about-card p {
    color: #000 !important;
}
        /* ===========================================
   RÈGLES SPÉCIFIQUES AU MODE SOMBRE
   =========================================== */

/* Appliquer seulement quand .light-mode n'est pas présent = DARK MODE */
body:not(.light-mode) {
    
    .section-titl,
    .card-title,
    .portfolio-info h4 {
        color: #FFFFFF !important;
    }
    
    /* 2. Textes en gris clair */
    p, li, .hero-subtitle, .section-subtitle, .section-subtitl {
        color: #CBD5E1 !important;
    }

    /* input form */
    .contact-form .form-control:focus {
        color: #fff;
    }
    
    /* 3. Cartes avec fond semi-transparent */
    .about-card,
    .portfolio-item,
    .contact-form .form-control {
        background: rgba(255, 255, 255, 0.03) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* 4. Boutons spéciaux */
    .btn-outline {
        border-color: #8B5CF6 !important;
        color: #8B5CF6 !important;
    }
    
    .btn-outline:hover {
        background: #8B5CF6 !important;
        color: #0F172A !important;
    }
    
    /* 5. Navbar plus sombre */
    .navbar {
        background: rgba(15, 23, 42, 0.95) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    
    /* 6. Effets visuels spéciaux */
    .hero-highlight::after {
        background: rgba(139, 92, 246, 0.3) !important;
    }
    
    /* 7. Scrollbar */
    ::-webkit-scrollbar-track {
        background: #1E293B !important;
    }
    
    /* 8. Liens sociaux */
    .social-link {
        background: rgba(255, 255, 255, 0.05) !important;
    }
    
    .social-link:hover {
        background: var(--gradient-primary) !important;
    }
}

/* ===========================================
   CARROUSEL TÉMOIGNAGES - 1 PAR 1
   =========================================== */
.testimonial-carousel-container {
    position: relative;
    overflow: hidden;
    padding: 20px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.testimonial-track {
    display: flex;
    gap: 25px;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    padding: 10px 0;
}

.testimonial-slide {
    flex: 0 0 calc(33.333% - 17px); /* 4/12 = 33.33% */
    min-width: calc(33.333% - 17px);
    max-width: 380px;
}

/* CORRECTION ICI : remplacer height fixe par min-height */
.testimonial-card-google {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    /* REMPLACER height: 280px; par : */
    min-height: 280px; /* Hauteur minimale au lieu de fixe */
    height: auto; /* Hauteur automatique qui s'ajuste */
    transition: var(--transition);
    position: relative;
    overflow: visible; /* Changer hidden en visible */
    display: flex;
    flex-direction: column;
}

.testimonial-card-google:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.testimonial-card-google::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
}

.google-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px; /* Ajouter une valeur (était vide) */
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.google-logo {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--dark-color);
    font-size: 0.95rem;
}

.google-logo i {
    font-size: 1.2rem;
}

.google-rating {
    display: flex;
    align-items: center;
    gap: 3px;
}

.google-rating i {
    color: #FFD700;
    font-size: 0.9rem;
}

.testimonial-content {
    flex-grow: 1;
    overflow: visible; /* Changer hidden en visible */
    margin-bottom: 10px;
}

/* CORRECTION ICI : ajuster l'affichage du texte */
.testimonial-text {
    font-style: italic;
    line-height: 1.6;
    color: var(--gray-color);
    font-size: 0.95rem;
    margin-bottom: 0;
    /* Options selon votre préférence : */
    
    /* Option A : Afficher tout le texte */
    display: block;
    overflow: visible;
    text-overflow: unset;
    
    /* Option B : Limiter à plus de lignes sur grand écran */
    /* display: -webkit-box;
    -webkit-line-clamp: 6; /* 6 lignes au lieu de 4 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; */
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto; /* Pousse en bas */
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}

.logo-google {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}

.author-info {
    flex-grow: 1;
    min-width: 0; /* Pour le texte overflow */
}

.author-name {
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--dark-color);
    font-size: 1rem;
    /* Remplacer white-space: nowrap; par : */
    white-space: normal; /* Permettre le retour à la ligne */
    overflow: visible;
    text-overflow: unset;
}

.author-date {
    color: var(--gray-color);
    font-size: 0.8rem;
    margin-bottom: 0;
}

/* Boutons de navigation */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
    box-shadow: var(--shadow-md);
}

.carousel-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: var(--shadow-lg);
}

.carousel-prev {
    left: 0;
}

.carousel-next {
    right: 0;
}

/* Points indicateurs */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: var(--transition);
}

.carousel-dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
}

/* Responsive */
@media (max-width: 992px) {
    .testimonial-slide {
        flex: 0 0 calc(50% - 12px); /* 2 par ligne */
        min-width: calc(50% - 12px);
    }
    
    .testimonial-carousel-container {
        padding: 20px 30px;
    }
    
    /* Ajustement pour tablette */
    .testimonial-card-google {
        height: auto; /* Hauteur automatique */
        min-height: 300px; /* Hauteur minimale seulement */
    }
    
    .testimonial-text {
        -webkit-line-clamp: 5; /* Plus de lignes sur tablette */
        max-height: none; /* Supprimer la limite de hauteur */
    }
}

@media (max-width: 768px) {
    .testimonial-slide {
        flex: 0 0 calc(100% - 20px); /* 1 par ligne */
        min-width: calc(100% - 20px);
    }
    
    .testimonial-carousel-container {
        padding: 10px;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
    }
    
    /* CORRECTION IMPORTANTE : Supprimer la hauteur fixe */
    .testimonial-card-google {
        height: auto; /* REMPLACER height: 260px par auto */
        min-height: auto;
        padding: 20px;
    }
    
    /* CORRECTION : Afficher tout le texte sur mobile */
    .testimonial-text {
        display: block; /* Remplacer display: -webkit-box */
        -webkit-line-clamp: unset; /* Supprimer la limitation de lignes */
        -webkit-box-orient: unset;
        overflow: visible; /* Remplacer overflow: hidden */
        text-overflow: unset; /* Supprimer l'ellipsis */
        max-height: none; /* Supprimer la hauteur maximale */
        white-space: normal; /* Assurer le retour à la ligne */
    }
    
    /* Ajuster le contenu pour qu'il s'adapte */
    .testimonial-content {
        min-height: auto;
        margin-bottom: 15px;
    }
    
    /* Ajuster l'espacement */
    .google-header {
        margin-bottom: 15px;
    }
    
    .testimonial-author {
        margin-top: 15px;
        padding-top: 15px;
    }
}

/* Pour les très petits écrans */
@media (max-width: 480px) {
    .testimonial-card-google {
        padding: 15px;
    }
    
    .testimonial-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .author-avatar {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    
    .author-info {
        min-width: 0;
    }
    
    .author-name {
        font-size: 0.95rem;
        white-space: normal; /* Permettre le retour à la ligne du nom */
        overflow: visible;
        text-overflow: unset;
    }
}

/* Style pour le menu déroulant utilisateur avec flèche */
.user-dropdown {
    margin-left: 5px;
    margin-right: 15px;
}

.user-icon-dropdown {
    padding: 0.5rem 0.8rem !important;
    transition: all 0.3s ease;
    border-radius: 50px;
    gap: 8px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.user-avatar i {
    color: white;
    font-size: 1.1rem;
}

.dropdown-arrow {
    color: var(--text-color);
    transition: transform 0.3s ease;
    font-size: 0.8rem;
    opacity: 0.7;
}

.user-icon-dropdown:hover {
    background-color: rgba(var(--primary-rgb), 0.1);
}

.user-icon-dropdown:hover .user-avatar {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
}

.user-icon-dropdown:hover .dropdown-arrow {
    opacity: 1;
    color: var(--primary-color);
}

/* Animation de la flèche quand le menu est ouvert */
.user-dropdown.show .dropdown-arrow {
    transform: rotate(180deg);
    color: var(--primary-color);
    opacity: 1;
}

/* Menu déroulant stylisé */
.user-dropdown .dropdown-menu {
    min-width: 200px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 10px 0;
    margin-top: 10px;
    animation: slideDown 0.3s ease;
}

.user-dropdown .dropdown-item {
    padding: 10px 15px;
    transition: all 0.2s ease;
    color: var(--text-color);
}

.user-dropdown .dropdown-item:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateX(5px);
}

.user-dropdown .dropdown-item i {
    width: 20px;
    text-align: center;
}

.user-dropdown .dropdown-divider {
    margin: 10px 0;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mode sombre */
.dark-mode .user-avatar {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.dark-mode .dropdown-arrow {
    color: #e5e7eb;
}

.dark-mode .user-icon-dropdown:hover {
    background-color: rgba(99, 102, 241, 0.1);
}

.dark-mode .user-dropdown .dropdown-menu {
    background-color: #1f2937;
    border: 1px solid #374151;
}

.dark-mode .user-dropdown .dropdown-item {
    color: #e5e7eb;
}

.dark-mode .user-dropdown .dropdown-item:hover {
    background-color: #6366f1;
}

.dark-mode .user-dropdown.show .dropdown-arrow {
    color: #8b5cf6;
}

/* Style pour le bouton menu mobile avec bordure */
.custom-toggler {
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.3s ease;
    background: transparent;
}

.custom-toggler:hover {
    border-color: white !important;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.custom-toggler:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
    border-color: white !important;
}

.custom-toggler[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.15);
    border-color: white !important;
}

.navbar-toggler-custom {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.navbar-toggler-custom i {
    transition: transform 0.3s ease;
}

.custom-toggler[aria-expanded="true"] .navbar-toggler-custom i {
    transform: rotate(90deg);
}

/* Pour les petits écrans */
@media (max-width: 991.98px) {
    .custom-toggler {
        border-width: 2px;
    }
}

/* Mode sombre */
.dark-mode .custom-toggler {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.dark-mode .custom-toggler:hover {
    border-color: white !important;
    background: rgba(255, 255, 255, 0.05);
}

/* Dans votre fichier CSS */
.hero-image {
    transform: rotate(3deg) !important;
    transition: transform 0.3s ease;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.hero-image:hover {
    transform: rotate(0deg) scale(1.02) !important;
}

.hero-image-container {
    position: relative;
    padding: 20px;
}

.hero-image-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    border-radius: 20px;
    transform: rotate(-1deg);
    z-index: -1;
    opacity: 0.3;
}