<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FShop - Tutoriels</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar">
        <div class="logo">
            <h1>FShop</h1>
        </div>
        <ul class="nav-links">
            <li><a href="index.html">Accueil</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="tuto.html" class="active">Tutoriels</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        <div class="mobile-menu-button">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>

    <!-- Tutoriels Section -->
    <section class="tutorials">
        <div class="container">
            <div class="section-header">
                <h1>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 14l9-5-9-5-9 5 9 5z"/>
                        <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/>
                    </svg>
                    Tutoriels FShop
                </h1>
                <p>Guides et ressources pour bien démarrer</p>
            </div>

            <!-- Documentation officielle -->
            <div class="tutorial-category">
                <h2>📖 Documentation Officielle</h2>
                <div class="doc-card">
                    <h3>Guide complet FShop</h3>
                    <p>Documentation détaillée pour l'installation et l'utilisation de nos services</p>
                    <a href="https://fshops.gitbook.io/fshop5" target="_blank" class="btn">Accéder à la documentation</a>
                </div>
            </div>

            <!-- Tutoriels d'installation -->
            <div class="tutorial-category">
                <h2>🎬 Guides d'Installation</h2>
                <div class="tutorials-grid">
                    <!-- Installation de la base -->
                    <div class="tutorial-card">
                        <div class="tutorial-header">
                            <h3>Installation de la base</h3>
                            <span class="author">Par Le X</span>
                        </div>
                        <div class="tutorial-video-preview">
                            <iframe 
                                src="https://www.youtube.com/embed/fentUAxFw04" 
                                title="Installation de la base FShop"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                allowfullscreen>
                            </iframe>
                        </div>
                    </div>

                    <!-- Installation du Bot API -->
                    <div class="tutorial-card">
                        <div class="tutorial-header">
                            <h3>Installation du Bot API</h3>
                            <span class="author">Par Le X</span>
                        </div>
                        <div class="tutorial-video-preview">
                            <iframe 
                                src="https://www.youtube.com/embed/03644RdFE_k" 
                                title="Installation du Bot API"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                allowfullscreen>
                            </iframe>
                        </div>

                    </div>

                    <!-- Installation des packs -->
                    <div class="tutorial-card">
                        <div class="tutorial-header">
                            <h3>Installation des packs</h3>
                            <span class="author">Par Le X</span>
                        </div>
                        <div class="tutorial-video-preview">
                            <iframe 
                                src="https://www.youtube.com/embed/bnTHVBpBw4c" 
                                title="Installation des packs"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                allowfullscreen>
                            </iframe>
                        </div>
                    </div>

                    <!-- Installation du Creator -->
                    <div class="tutorial-card">
                        <div class="tutorial-header">
                            <h3>Installation du Creator</h3>
                            <span class="author">Par so</span>
                        </div>
                        <div class="tutorial-video-preview">
                            <iframe 
                                src="https://www.youtube.com/embed/G3J8X3FfvdM" 
                                title="Installation du Creator"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                allowfullscreen>
                            </iframe>
                        </div>
                    </div>

                    <!-- Installation Pack V2.5 -->
                    <div class="tutorial-card">
                        <div class="tutorial-header">
                            <h3>Installation Pack V2.5</h3>
                            <span class="author">Par so</span>
                        </div>
                        <div class="tutorial-video-preview">
                            <iframe 
                                src="https://www.youtube.com/embed/foTDqB72-xM" 
                                title="Installation Pack V2.5"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                allowfullscreen>
                            </iframe>
                        </div>
                    </div>

                    <!-- Patch notes et ajouts -->
                    <div class="tutorial-card">
                        <div class="tutorial-header">
                            <h3>Patch notes et ajouts</h3>
                            <span class="author">Par so</span>
                        </div>
                        <div class="tutorial-video-preview">
                            <iframe 
                                src="https://www.youtube.com/embed/qjJRdXgagz0" 
                                title="Patch notes et ajouts"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                allowfullscreen>
                            </iframe>
                        </div>
                    </div>

                    <!-- Installation Pack Hiver -->
                    <div class="tutorial-card">
                        <div class="tutorial-header">
                            <h3>Installation Pack Hiver</h3>
                            <span class="author">Par so</span>
                        </div>
                        <div class="tutorial-video-preview">
                            <iframe 
                                src="https://www.youtube.com/embed/_hxd2xRdV1A" 
                                title="Installation Pack Hiver"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                allowfullscreen>
                            </iframe>
                        </div>
                    </div>

                    <!-- Installation Pack No Pub -->
                    <div class="tutorial-card">
                        <div class="tutorial-header">
                            <h3>Installation Pack No Pub</h3>
                            <span class="author">Par so</span>
                        </div>
                        <div class="tutorial-video-preview">
                            <iframe 
                                src="https://www.youtube.com/embed/EJFCJM2F42g" 
                                title="Installation Pack No Pub"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                allowfullscreen>
                            </iframe>
                        </div>
                    </div>

                    <!-- Liaison avec Tebex -->
                    <div class="tutorial-card">
                        <div class="tutorial-header">
                            <h3>Liaison avec Tebex</h3>
                            <span class="author">Par so</span>
                        </div>
                        <div class="tutorial-video-preview">
                            <iframe 
                                src="https://www.youtube.com/embed/ppVGPXdQ13Q" 
                                title="Liaison avec Tebex"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                allowfullscreen>
                            </iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="contact" id="contact">
        <div class="contact-content">
            <h2>Besoin d'aide ?</h2>
            <p>Notre équipe est disponible sur Discord pour vous accompagner</p>
            <div class="contact-buttons">
                <a href="https://discord.gg/fshop" class="btn btn-light">
                    <svg class="discord-icon" viewBox="0 0 24 24" width="24" height="24">
                        <path fill="currentColor" d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .077-.025c.524-.733.997-1.5 1.405-2.31a.075.075 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .092.037a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
                    </svg>
                    Rejoindre Discord
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-content">
            <div class="footer-brand">
                <h3>FShop</h3>
                <p>Solutions premium pour serveurs FiveM</p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 FShop | Tous droits réservés.</p>
        </div>
    </footer>

    <style>
        /* Styles pour la page tutoriels */
        .tutorials {
            margin-top: 80px;
            padding: 2rem 0;
        }

/* Suite des styles pour la page tutoriels */
.tutorials .section-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .tutorials .section-header h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            background: var(--gradient);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .tutorial-category {
            margin-bottom: 4rem;
        }

        .tutorial-category h2 {
            font-size: 1.8rem;
            margin-bottom: 2rem;
            color: var(--primary-light);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .doc-card {
            background: var(--dark-light);
            border-radius: 16px;
            padding: 2.5rem;
            margin-bottom: 2.5rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            text-align: center;
            transition: transform 0.3s ease, border-color 0.3s ease;
        }

        .doc-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary);
        }

        .doc-card h3 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: var(--primary-light);
        }

        .doc-card p {
            color: var(--text-muted);
            margin-bottom: 2rem;
            font-size: 1.1rem;
        }

        .tutorials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }

        .tutorial-card {
            background: var(--dark-light);
            border-radius: 16px;
            padding: 2rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .tutorial-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .tutorial-header {
            margin-bottom: 1.5rem;
        }

        .tutorial-header h3 {
            font-size: 1.4rem;
            margin-bottom: 0.75rem;
            color: var(--primary-light);
        }

        .author {
            color: var(--text-muted);
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .tutorial-video-preview {
            position: relative;
            width: 32vh;
            padding-bottom: 80.25%; 
            border-radius: 8px;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.2);
        }

        .tutorial-video-preview iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            transition: transform 0.3s ease;
        }

        .tutorial-video-preview:hover iframe {
            transform: scale(1.02);
        }

        .tutorial-links {
            margin-top: auto;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .links-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .tutorial-links .btn {
            text-align: center;
            justify-content: center;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            width: 100%;
        }

        .btn svg {
            width: 20px;
            height: 20px;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .tutorials {
                margin-top: 70px;
                padding: 1rem;
            }

            .tutorials .section-header h1 {
                font-size: 2rem;
            }

            .tutorial-category h2 {
                font-size: 1.5rem;
            }

            .tutorials-grid {
                grid-template-columns: 1fr;
            }

            .tutorial-card {
                padding: 1.5rem;
                min-height: 400px;
            }

            .links-group {
                grid-template-columns: 1fr;
            }

            .doc-card {
                padding: 1.5rem;
            }
        }

        /* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .tutorial-card {
            animation: fadeIn 0.6s ease-out forwards;
            animation-delay: calc(var(--animation-order) * 0.1s);
        }

        /* Hover effects */
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.2);
        }

        .btn-outline:hover {
            background: var(--primary);
            color: white;
        }

        .section-header {
    text-align: center;
    margin-bottom: 4rem;
    padding-top: 2rem;
    background: var(--dark);
}

.section-header h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.section-header h1 svg, 
.section-header h1 img {
    width: 36px;
    height: 36px;
    fill: var(--primary-light);
}

.section-header p {
    color: var(--text-muted);
    font-size: 1.2rem;
    max-width: 600px;
    margin: 1rem auto;
}

/* Pour le responsive */
@media (max-width: 768px) {
    .section-header h1 {
        font-size: 2rem;
    }
    
    .section-header h1 svg,
    .section-header h1 img {
        width: 28px;
        height: 28px;
    }
    
    .section-header p {
        font-size: 1rem;
    }
}
        
    </style>

    <script src="scripts.js"></script>
</body>
</html>