# 🏍️ Quiz MotoGP 2025 : Saurez-vous battre les meilleurs fans ? (15 questions)

15 questions techniques sur les nouveaux règlements MotoGP 2025 : réduction de poids, limite de puissance et budgets contrôlés. Testez votre expertise !

---

import ArticleScript from '@/components/ArticleScript';
import ArticleStyle from '@/components/ArticleStyle';


{/* Hero Section */}
<div className="article-container" style={{textAlign: 'center', padding: '40px 20px'}}>
    <div style={{display: 'inline-block', background: 'linear-gradient(135deg, #b30000 0%, #007bff 100%)', padding: '8px 20px', borderRadius: '20px', marginBottom: '20px'}}>
        <span style={{color: 'white', fontWeight: '700', fontSize: '0.9em'}}>🏆 EXPERT 2025</span>
    </div>
    
    <h1 style={{fontSize: '2.5em', lineHeight: '1.2', marginBottom: '20px', background: 'linear-gradient(135deg, #ffffff 0%, #94a3b8 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent'}}>
        Quiz Expert MotoGP 2025
    </h1>
    
    <p style={{fontSize: '1.2em', color: '#cbd5e1', maxWidth: '700px', margin: '0 auto 30px', lineHeight: '1.6'}}>
        <strong style={{color: '#007bff'}}>15 questions révélatrices</strong> sur les nouveaux règlements techniques, l'histoire du championnat et les stratégies d'équipe.
    </p>
    
    <img src="/images/articles/motogp-2025-bike.webp" alt="MotoGP 2025" style={{width: '100%', maxWidth: '800px', borderRadius: '20px', margin: '30px auto', display: 'block', boxShadow: '0 20px 60px rgba(179, 0, 0, 0.3)'}} />
    
    <div className="hero-info-grid">
        <div className="hero-info-card">
            <div style={{fontSize: '2em', marginBottom: '5px'}}>⚖️</div>
            <div className="hero-info-text">Poids -3kg</div>
        </div>
        <div className="hero-info-card">
            <div style={{fontSize: '2em', marginBottom: '5px'}}>⚡</div>
            <div className="hero-info-text">290ch max</div>
        </div>
        <div className="hero-info-card">
            <div style={{fontSize: '2em', marginBottom: '5px'}}>💰</div>
            <div className="hero-info-text">Budget contrôlé</div>
        </div>
    </div>
    
    <button id="start-quiz-2025" style={{background: 'linear-gradient(135deg, #b30000, #007bff)', color: 'white', border: 'none', padding: '18px 50px', borderRadius: '50px', fontSize: '1.3em', fontWeight: '700', cursor: 'pointer', boxShadow: '0 10px 30px rgba(179, 0, 0, 0.4)', marginTop: '40px', transition: 'all 0.3s'}}>
        🚀 LANCER LE QUIZ
    </button>
</div>

{/* Progress Bar */}
<div id="quiz-progress-container-2025" style={{position: 'sticky', top: '0', zIndex: '100', background: 'rgba(2, 6, 23, 0.95)', backdropFilter: 'blur(10px)', padding: '15px 20px', borderBottom: '1px solid rgba(255,255,255,0.1)', display: 'none'}}>
    <div style={{maxWidth: '800px', margin: '0 auto'}}>
        <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: '8px'}}>
            <span style={{fontSize: '0.9em', color: '#94a3b8'}} id="quiz-progress-text-2025">Question 1/15</span>
            <span style={{fontSize: '0.9em', color: '#007bff', fontWeight: '600'}} id="quiz-timer-2025">0:00</span>
        </div>
        <div style={{height: '6px', background: 'rgba(255,255,255,0.1)', borderRadius: '10px', overflow: 'hidden'}}>
            <div id="quiz-progress-bar-2025" style={{height: '100%', width: '6.66%', background: 'linear-gradient(90deg, #b30000, #007bff)', transition: 'width 0.3s ease'}}></div>
        </div>
    </div>
</div>

{/* Quiz Form */}
<form id="quiz-form-2025" style={{maxWidth: '800px', margin: '40px auto', padding: '0 20px', display: 'none'}}>
    {/* Generated dynamically */}
</form>

{/* Result Panel */}
<div className="quiz-result-panel" id="quiz-result-2025" style={{display: 'none', maxWidth: '800px', margin: '60px auto', padding: '0 20px'}}>
    <div style={{background: 'linear-gradient(135deg, rgba(179, 0, 0, 0.1), rgba(0, 123, 255, 0.1))', border: '2px solid rgba(0, 123, 255, 0.3)', borderRadius: '24px', padding: '50px 40px', textAlign: 'center'}}>
        <div style={{fontSize: '4em', marginBottom: '20px'}} id="result-emoji-2025">🏆</div>
        <h2 style={{fontSize: '2.2em', marginBottom: '15px'}}>Résultat Final</h2>
        <div id="result-score-2025" style={{fontSize: '3.5em', fontWeight: '800', background: 'linear-gradient(135deg, #b30000, #007bff)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent'}}></div>
        <p id="result-text-2025" style={{fontSize: '1.2em', color: '#cbd5e1', margin: '20px 0'}}></p>
        <div id="result-profile-2025" style={{display: 'inline-block', background: 'rgba(0, 123, 255, 0.2)', padding: '12px 30px', borderRadius: '20px', marginTop: '20px'}}>
            <span style={{color: '#007bff', fontWeight: '700', fontSize: '1.1em'}} id="profile-badge-2025"></span>
        </div>

        <div style={{display: 'flex', gap: '15px', justifyContent: 'center', marginTop: '40px', flexWrap: 'wrap'}}>
            <button type="button" className="restart-btn-2025" style={{background: 'linear-gradient(135deg, #b30000, #007bff)', color: 'white', border: 'none', padding: '16px 35px', borderRadius: '12px', fontSize: '1.05em', fontWeight: '700', cursor: 'pointer'}}>🔄 Recommencer</button>
            <a href="/dashboard" style={{background: 'rgba(255,255,255,0.05)', color: 'white', border: '2px solid rgba(255,255,255,0.2)', padding: '16px 35px', borderRadius: '12px', fontSize: '1.05em', fontWeight: '600', textDecoration: 'none'}}>📊 Mon profil</a>
            <a href="#" id="share-whatsapp-2025" style={{background: 'linear-gradient(135deg, #25D366, #128C7E)', color: 'white', padding: '16px 35px', borderRadius: '12px', fontSize: '1.05em', fontWeight: '600', textDecoration: 'none'}}>📱 Partager</a>
        </div>
    </div>
</div>

<img src="/images/articles/motogp-tech-blueprint.webp" alt="Courbe puissance MotoGP" style={{width: '100%', maxWidth: '800px', borderRadius: '20px', margin: '40px auto', display: 'block', boxShadow: '0 10px 40px rgba(0,0,0,0.3)'}} />


<ArticleStyle content={`

/* Fix text overflow in results */
#quiz-result-2025,
#quiz-result-2025 p,
h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}
li, .options-2025 label {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

/* Hero Info Cards */
.hero-info-grid { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.hero-info-card { background: rgba(255,255,255,0.05); padding: 12px 20px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); text-align: center; min-width: 120px; }
.hero-info-text { font-size: 0.9em; color: #94a3b8; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .article-container { padding: 20px 10px; }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
    p { font-size: 1em; }

    .hero-info-grid { gap: 8px; }
    .hero-info-card { padding: 8px 5px; flex: 1; min-width: 80px; }
    .hero-info-card div:first-child { font-size: 1.4em; margin-bottom: 2px; }
    .hero-info-text { font-size: 0.75em; line-height: 1.2; }
    
    .options-2025 label {
        padding: 12px;
        font-size: 0.95em;
    }
    
    button, a, #start-quiz-2025 {
        width: 100%;
        padding: 18px 20px;
        box-sizing: border-box;
        margin-bottom: 10px;
        display: block;
        text-align: center;
        white-space: normal;
    }
    
    .next-btn-2025, .prev-btn-2025, .submit-btn-2025 {
        width: 100%;
        margin-bottom: 10px;
    }
}

`} />

<ArticleScript src="/scripts/quizzes/quiz-motogp-2025-etes-vous-un-vrai-expert-15-quest.js" />