# 🏍️ Testez Vos Connaissances : Sécurité, Équipements et Conduite Moto

Êtes-vous un as de la sécurité moto ? Testez vos connaissances sur l'équipement, la conduite et l'entretien avec ce quiz complet de 6 questions !

---

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


{/* Hero Section Premium */}
<div className="article-container" style={{textAlign: 'center', padding: '40px 20px'}}>
    <div style={{display: 'inline-block', background: 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)', padding: '8px 20px', borderRadius: '20px', marginBottom: '20px'}}>
        <span style={{color: 'white', fontWeight: '700', fontSize: '0.9em'}}>🛡️ SÉCURITÉ MOTO</span>
    </div>
    
    <h1 style={{fontSize: '2.5em', lineHeight: '1.2', marginBottom: '20px', background: 'linear-gradient(135deg, #ffffff 0%, #94a3b8 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text'}}>
        Quiz Sécurité & Équipements Moto
    </h1>
    
    <p style={{fontSize: '1.2em', color: '#cbd5e1', maxWidth: '700px', margin: '0 auto 30px', lineHeight: '1.6'}}>
        Passion moto ou prudence ? Testez vos connaissances sur la sécurité, les équipements obligatoires et les bonnes pratiques ! <strong style={{color: '#22c55e'}}>6 questions essentielles</strong> pour rouler en toute sécurité.
    </p>
    
    {/* Image removed: broken link (wp-content) */}
    
    <div style={{display: 'flex', gap: '15px', justifyContent: 'center', flexWrap: 'wrap', marginTop: '30px'}}>
        <div style={{background: 'rgba(255,255,255,0.05)', padding: '15px 25px', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.1)'}}>
            <div style={{fontSize: '2em', marginBottom: '5px'}}>⏱️</div>
            <div style={{fontSize: '0.9em', color: '#94a3b8'}}>1 min chrono</div>
        </div>
        <div style={{background: 'rgba(255,255,255,0.05)', padding: '15px 25px', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.1)'}}>
            <div style={{fontSize: '2em', marginBottom: '5px'}}>🛡️</div>
            <div style={{fontSize: '0.9em', color: '#94a3b8'}}>Équipement obligatoire</div>
        </div>
        <div style={{background: 'rgba(255,255,255,0.05)', padding: '15px 25px', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.1)'}}>
            <div style={{fontSize: '2em', marginBottom: '5px'}}>✅</div>
            <div style={{fontSize: '0.9em', color: '#94a3b8'}}>Bonnes pratiques</div>
        </div>
    </div>
    
    <button id="start-quiz-safety-equipments" style={{background: 'linear-gradient(135deg, #22c55e, #16a34a)', color: 'white', border: 'none', padding: '18px 50px', borderRadius: '50px', fontSize: '1.3em', fontWeight: '700', cursor: 'pointer', boxShadow: '0 10px 30px rgba(34, 197, 94, 0.4)', marginTop: '40px', transition: 'all 0.3s'}}>
        🚀 COMMENCER LE TEST
    </button>
</div>

{/* Progress Bar */}
<div id="quiz-progress-container-safety-equipments" 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-safety-equipments">Question 1/6</span>
            <span style={{fontSize: '0.9em', color: '#22c55e', fontWeight: '600'}} id="quiz-timer-safety-equipments">0:00</span>
        </div>
        <div style={{height: '6px', background: 'rgba(255,255,255,0.1)', borderRadius: '10px', overflow: 'hidden'}}>
            <div id="quiz-progress-bar-safety-equipments" style={{height: '100%', width: '16.66%', background: 'linear-gradient(90deg, #22c55e, #16a34a)', transition: 'width 0.3s ease', borderRadius: '10px'}}></div>
        </div>
    </div>
</div>

{/* Quiz Container */}
<div id="quiz-container-safety-equipments" style={{display: 'none', maxWidth: '800px', margin: '40px auto', padding: '0 20px'}}>
    <div style={{background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '20px', padding: '40px', marginBottom: '20px'}}>
        <div style={{display: 'flex', alignItems: 'center', gap: '15px', marginBottom: '15px'}}>
            <div id="quiz-badge-safety-equipments" style={{background: 'linear-gradient(135deg, #22c55e, #16a34a)', minWidth: '50px', height: '50px', borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.5em', fontWeight: '800', color: 'white', flexShrink: '0'}}>1</div>
            <div id="quiz-category-safety-equipments" style={{textTransform: 'uppercase', fontSize: '0.85em', letterSpacing: '1.5px', color: '#22c55e', background: 'rgba(34, 197, 94, 0.1)', padding: '6px 15px', borderRadius: '20px'}}></div>
        </div>
        
        <h3 id="quiz-quest-safety-equipments" style={{fontSize: '1.4em', margin: '25px 0', lineHeight: '1.5', color: '#e2e8f0'}}></h3>
        
        <div id="quiz-options-safety-equipments" style={{display: 'grid', gap: '12px', marginTop: '30px'}}></div>
        
        <div style={{textAlign: 'right', marginTop: '30px'}}>
            <button id="next-quiz-safety-equipments" style={{background: 'linear-gradient(135deg, #22c55e, #16a34a)', color: 'white', border: 'none', padding: '15px 40px', borderRadius: '12px', fontSize: '1.1em', fontWeight: '700', cursor: 'pointer', transition: 'all 0.3s'}}>Suivant →</button>
        </div>
        
        <div style={{textAlign: 'center', marginTop: '30px', paddingTop: '20px', borderTop: '1px solid rgba(255,255,255,0.1)'}}>
            <span style={{fontSize: '1.1em', color: '#94a3b8'}}>Score : </span>
            <span id="quiz-points-safety-equipments" style={{fontSize: '1.3em', fontWeight: '700', color: '#22c55e'}}>0</span>
        </div>
    </div>
</div>

{/* Results Panel */}
<div id="quiz-result-safety-equipments" style={{display: 'none', maxWidth: '800px', margin: '60px auto', padding: '0 20px'}}>
    <div style={{background: 'linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.1))', border: '2px solid rgba(34, 197, 94, 0.3)', borderRadius: '24px', padding: '50px 40px', textAlign: 'center'}}>
        <div style={{fontSize: '4em', marginBottom: '20px'}} id="quiz-emoji-safety-equipments">🎉</div>
        <h2 style={{fontSize: '2.2em', marginBottom: '15px'}}>Résultat Final</h2>
        <div id="quiz-final-score-safety-equipments" style={{fontSize: '3.5em', fontWeight: '800', background: 'linear-gradient(135deg, #22c55e, #16a34a)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text', marginBottom: '20px'}}></div>
        <p id="quiz-result-text-safety-equipments" style={{fontSize: '1.2em', color: '#cbd5e1', marginBottom: '10px'}}></p>
        <div id="quiz-profile-safety-equipments" style={{display: 'inline-block', background: 'rgba(34, 197, 94, 0.2)', padding: '12px 30px', borderRadius: '20px', marginTop: '20px'}}>
            <span style={{color: '#22c55e', fontWeight: '700', fontSize: '1.1em'}} id="quiz-profile-badge-safety-equipments"></span>
        </div>

        <div style={{display: 'flex', gap: '15px', justifyContent: 'center', marginTop: '40px', flexWrap: 'wrap'}}>
            <button id="reset-quiz-safety-equipments" style={{background: 'linear-gradient(135deg, #22c55e, #16a34a)', 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', display: 'inline-block'}}>
                📊 Voir mon profil
            </a>
        </div>
    </div>
</div>

{/* Content Section */}
<div className="article-container" style={{maxWidth: '800px', margin: '60px auto', padding: '0 20px'}}>
    <div style={{background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '20px', padding: '40px', marginBottom: '30px'}}>
        <h2 style={{display: 'flex', alignItems: 'center', gap: '15px', marginBottom: '20px'}}>
            <span style={{fontSize: '2em'}}>🛡️</span>
            Passion moto : Connaissances et sécurité avant tout
        </h2>
        <p style={{lineHeight: '1.8', color: '#cbd5e1'}}>
            La moto est bien plus qu'un simple moyen de transport ; c'est une passion, un art de vivre et un symbole de liberté. Mais pour que cette passion reste un plaisir, la connaissance et la sécurité sont des piliers fondamentaux.
        </p>
    </div>
    
    <div style={{background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '20px', padding: '40px'}}>
        <h2 style={{display: 'flex', alignItems: 'center', gap: '15px', marginBottom: '20px'}}>
            <span style={{fontSize: '2em'}}>✅</span>
            Points clés pour rouler en sécurité
        </h2>
        <ul style={{lineHeight: '1.8', color: '#cbd5e1'}}>
            <li><strong>Entretien régulier</strong> : Pneus, freins, niveaux de liquides et éclairage</li>
            <li><strong>Visibilité</strong> : Équipements de couleur vive et éléments réfléchissants</li>
            <li><strong>Anticipation</strong> : Distance de sécurité et scan constant de l environnement</li>
            <li><strong>Adaptation</strong> : Ajuster la vitesse aux conditions routières et météo</li>
            <li><strong>Formation continue</strong> : Stages de perfectionnement recommandés</li>
        </ul>
    </div>
</div>

{/* Social Sharing */}
<div className="action-buttons-grid" style={{maxWidth: '800px', margin: '40px auto', padding: '0 20px'}}>
    <a href="#" id="share-whatsapp-safety-equipments" className="btn-share-whatsapp" style={{background: 'linear-gradient(135deg, #25D366, #128C7E)', color: 'white', padding: '20px', borderRadius: '16px', textDecoration: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px', fontWeight: '700', fontSize: '1.1em', transition: 'transform 0.2s'}}>
        📱 Partager sur WhatsApp
    </a>
</div>


<ArticleStyle content={`

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

/* 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; }

    #quiz-options-safety-equipments label {
        padding: 12px;
        font-size: 0.95em;
    }
    
    button, a, #start-quiz-safety-equipments {
        width: 100%;
        padding: 18px 20px;
        box-sizing: border-box;
        margin-bottom: 10px;
        display: block;
        text-align: center;
        white-space: normal;
    }
}

`} />

<ArticleScript src="/scripts/quizzes/testez-vos-connaissances-sur-la-securite-les-equip.js" />