/* Styles spécifiques pour la page Analytics avec thèmes Matomo orange et pfSense bleu */
        .analytics-hero {
            background: linear-gradient(135deg, #ff6b35 0%, #2196F3 50%, #f7931e 100%);
            padding: 120px 0 80px;
            text-align: center;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .analytics-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
            background-size: 400px 400px, 250px 250px, 200px 200px;
            animation: dataFlow 25s linear infinite;
        }

        @keyframes dataFlow {
            0% { transform: translateX(0px) translateY(0px); }
            33% { transform: translateX(-40px) translateY(-30px); }
            66% { transform: translateX(30px) translateY(-20px); }
            100% { transform: translateX(0px) translateY(0px); }
        }

        .analytics-hero-content {
            position: relative;
            z-index: 1;
            max-width: 900px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .analytics-hero h1 {
            font-size: 4rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            animation: titlePulse 3s ease-in-out infinite alternate;
        }

        @keyframes titlePulse {
            0% { text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 20px rgba(255,255,255,0.2); }
            100% { text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 40px rgba(255,255,255,0.4); }
        }

        .hero-icons {
            display: flex;
            justify-content: center;
            gap: 60px;
            margin: 50px 0;
            flex-wrap: wrap;
        }

        .hero-icon {
            font-size: 4rem;
            animation: iconBounce 4s ease-in-out infinite;
            transition: transform 0.3s ease;
            cursor: pointer;
        }

        .hero-icon:hover {
            transform: scale(1.3);
        }

        .hero-icon:nth-child(1) { animation-delay: 0s; color: #ff6b35; }
        .hero-icon:nth-child(2) { animation-delay: 2s; color: #2196F3; }

        @keyframes iconBounce {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        /* Contenu principal */
        .main-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 60px 20px;
        }

        .section-header {
            text-align: center;
            margin: 60px 0 40px 0;
        }

        .section-header h2 {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 15px;
            position: relative;
        }

        .section-header h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(135deg, #ff6b35, #2196F3);
            border-radius: 2px;
        }

        .section-header p {
            color: #666;
            font-size: 1.1rem;
        }

        /* Grille des compétences avec thèmes couleur */
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 40px;
            margin: 40px 0;
        }

        .skill-card {
            background: white;
            padding: 35px;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            border-top: 6px solid;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .skill-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: -50px;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            transition: transform 0.3s ease;
        }

        .skill-card:hover::before {
            transform: scale(1.3);
        }

        .skill-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 25px 60px rgba(0,0,0,0.2);
        }

        /* Thème Matomo - Orange */
        .skill-card.matomo { 
            border-top-color: #ff6b35; 
        }
        .skill-card.matomo::before { 
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(247, 147, 30, 0.15)); 
        }

        /* Thème pfSense - Bleu */
        .skill-card.pfsense { 
            border-top-color: #2196F3; 
        }
        .skill-card.pfsense::before { 
            background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(25, 118, 210, 0.15)); 
        }

        .skill-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 25px;
        }

        .skill-icon {
            font-size: 3rem;
            color: inherit;
        }

        .skill-title {
            font-size: 1.7rem;
            font-weight: bold;
            color: #333;
        }

        .skill-description {
            color: #666;
            line-height: 1.8;
            margin-bottom: 25px;
            font-size: 1.05rem;
        }

        .skill-technologies {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .tech-tag {
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.95rem;
            border: 2px solid;
            font-weight: 500;
        }

        .tech-tag.matomo {
            background: #fff5f0;
            color: #ff6b35;
            border-color: #ff6b35;
        }

        .tech-tag.pfsense {
            background: #e3f2fd;
            color: #2196F3;
            border-color: #2196F3;
        }

        /* Section Rapports - Style livre */
        .reports-section {
            background: linear-gradient(135deg, #fff5f0, #e3f2fd);
            padding: 80px 0;
            margin: 60px 0;
        }

        .reports-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .book-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            min-height: 240px;
        }

        .book-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
        }

        .book-image-container {
            flex: 0 0 180px;
            background: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 25px;
        }

        .book-image {
            width: 140px;
            height: 180px;
            object-fit: cover;
            border-radius: 5px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        }

        /* Placeholder pour les images à ajouter */
        .image-placeholder {
            width: 140px;
            height: 180px;
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2.5rem;
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
            border: 3px dashed rgba(255,255,255,0.4);
            flex-direction: column;
            text-align: center;
            padding: 15px;
        }

        .image-placeholder.pfsense {
            background: linear-gradient(135deg, #2196F3, #1976D2);
        }

        .placeholder-text {
            font-size: 0.75rem;
            margin-top: 10px;
            opacity: 0.9;
            line-height: 1.2;
        }

        .book-content {
            flex: 1;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .book-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 0.9rem;
            color: #666;
        }

        .book-category {
            background: #ff6b35;
            color: white;
            padding: 6px 16px;
            border-radius: 15px;
            font-size: 0.85rem;
            font-weight: 600;
        }

        .book-category.pfsense {
            background: #2196F3;
        }

        .book-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 18px;
            line-height: 1.3;
        }

        .book-description {
            color: #666;
            line-height: 1.7;
            margin-bottom: 25px;
            flex: 1;
            font-size: 1rem;
        }

        .download-button {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 28px;
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
            align-self: flex-start;
            font-size: 0.95rem;
        }

        .download-button:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
        }

        .download-button.pfsense {
            background: linear-gradient(135deg, #2196F3, #1976D2);
        }

        .download-button.pfsense:hover {
            box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
        }

        /* Section Réalisations */
        .achievements-section {
            text-align: center;
            padding: 80px 0;
            background: #f8f9fa;
            margin: 80px 0;
        }

        .achievements-content {
            max-width: 900px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .achievements-stats {
            display: flex;
            justify-content: center;
            gap: 60px;
            margin: 50px 0;
            flex-wrap: wrap;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 3.5rem;
            font-weight: bold;
            color: #ff6b35;
            display: block;
        }

        .stat-label {
            color: #666;
            font-size: 1.1rem;
            margin-top: 8px;
        }

        /* Contact section adapted */
        .contact-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 80px 0;
            margin: 80px 0;
        }

        .contact-content {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
            padding: 0 20px;
        }

        .contact-info {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin: 40px 0;
            flex-wrap: wrap;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 15px;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }

        .contact-item i {
            font-size: 1.5rem;
        }

        .contact-item a {
            color: white;
            text-decoration: none;
            font-weight: 500;
        }

        .whatsapp-cta {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: #25D366;
            color: white;
            padding: 18px 35px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            margin-top: 30px;
        }

        .whatsapp-cta:hover {
            background: #128C7E;
            transform: scale(1.05);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .analytics-hero h1 {
                font-size: 2.8rem;
            }
            
            .hero-icons {
                gap: 30px;
            }
            
            .hero-icon {
                font-size: 3rem;
            }
            
            .skills-grid, .reports-grid {
                grid-template-columns: 1fr;
            }
            
            .book-card {
                flex-direction: column;
                min-height: auto;
            }
            
            .book-image-container {
                flex: none;
                padding: 25px;
                text-align: center;
            }
            
            .achievements-stats {
                gap: 30px;
            }

            .skill-card {
                padding: 25px;
            }

            .contact-info {
                flex-direction: column;
                align-items: center;
                gap: 20px;
            }
            
            .image-gallery {
		    display: flex;
		    justify-content: center;
		    gap: 20px;
		    margin: 20px 0;
		}

		.image-gallery img {
		    width: 30%;
		    border-radius: 10px;
		    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
		    transition: transform 0.3s ease;
		}

		.image-gallery img:hover {
		    transform: scale(1.05);
		}
	
	.block-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem 2rem;
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 1rem;
            border-radius: 3px;
        }

        .block-header.sport { background: linear-gradient(135deg, #FF6B6B, #FF8E8E); }
        .block-header.tech { background: linear-gradient(135deg, #4ECDC4, #6EDDD6); }
        .block-header.creative { background: linear-gradient(135deg, #FA709A, #FEE140); }
        .block-header.entrepreneur { background: linear-gradient(135deg, #F7971E, #FFD200); }
        .block-header.sports { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
	.block-header.cacao { 
	    background: linear-gradient(135deg, #5C4033, #A0522D); 
	    color: #fff;
	}
        }
        
        /* Navigation mobile - Correction complète pour éliminer le débordement */
	@media (max-width: 768px) {
	    /* Container navigation - dimensionnement strict */
	    .nav-container {
		width: 100vw !important;
		max-width: 100vw !important;
	    }
	    
	    .nav-left {
		gap: 4px !important;
		max-width: calc(100vw - 55px) !important;
		min-width: 0 !important;
	    }
	    
	}

	@media (max-width: 480px) {
	    
	    
	    .nav-left {
		gap: 2px !important;
		max-width: calc(100vw - 45px) !important;
	    }
	    
	}

	/* Éliminer tout débordement horizontal sur la page */
	html, body {
	    overflow-x: hidden !important;
	    max-width: 100vw !important;
	}

	.analytics-hero,
	.main-content,
	.skills-grid,
	.reports-section {
	    max-width: 100vw !important;
	    overflow-x: hidden !important;
	}