* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #8e44ad 0%, #c0392b 100%);
min-height: 100vh;
padding: 20px;
}

.container {
max-width: 100%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.98);
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

h1 {
color: #2c3e50;
text-align: center;
font-size: 2.5em;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.subtitle {
text-align: center;
color: #7f8c8d;
font-size: 1.2em;
margin-bottom: 30px;
}

.subscription-form {
background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
padding: 30px;
border-radius: 15px;
margin-bottom: 30px;
border: 2px solid rgba(230, 126, 34, 0.3);
}

.form-group {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #2c3e50;
font-size: 1.1em;
}

input[type=”text”],
input[type=”email”] {
width: 100%;
padding: 15px;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s ease;
}

input:focus {
outline: none;
border-color: #e67e22;
box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.1);
}

.checkbox-label {
display: flex;
align-items: center;
cursor: pointer;
}

.checkbox-label input[type=”checkbox”] {
width: 20px;
height: 20px;
margin-right: 10px;
cursor: pointer;
}

.error {
color: #e74c3c;
font-size: 14px;
margin-top: 5px;
font-weight: bold;
}

button {
background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
color: white;
border: none;
padding: 18px 40px;
border-radius: 50px;
cursor: pointer;
font-size: 18px;
font-weight: bold;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(230, 126, 34, 0.4);
display: block;
margin: 0 auto;
}

button:hover:not(:disabled) {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(230, 126, 34, 0.5);
}

button:disabled {
background: #95a5a6;
cursor: not-allowed;
transform: none;
}

.quiz-section {
display: none;
animation: fadeIn 0.5s ease;
}

.quiz-section.active {
display: block;
}

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

.progress-container {
margin: 30px 0;
}

.progress-bar {
width: 100%;
height: 30px;
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
border-radius: 15px;
overflow: hidden;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.progress-fill {
height: 100%;
background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
border-radius: 15px;
transition: width 0.5s ease;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 14px;
}

.grammar-notes {
background: linear-gradient(135deg, #dfe6e9 0%, #b2bec3 100%);
padding: 25px;
border-radius: 15px;
margin-bottom: 25px;
border-left: 5px solid #8e44ad;
}

.grammar-notes h3 {
color: #8e44ad;
margin-bottom: 15px;
font-size: 1.4em;
}

.grammar-notes ul {
margin-left: 20px;
line-height: 1.8;
}

.grammar-notes li {
margin-bottom: 10px;
color: #2c3e50;
}

.example {
background: rgba(255,255,255,0.7);
padding: 10px 15px;
border-radius: 8px;
margin: 5px 0;
font-style: italic;
}

.start-section-btn {
background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
margin: 20px auto;
}

.question-container {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 30px;
border-radius: 15px;
margin-bottom: 25px;
border-left: 6px solid #8e44ad;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.question-number {
font-weight: bold;
color: #8e44ad;
font-size: 1.3em;
margin-bottom: 15px;
}

.question-text {
font-size: 1.1em;
margin-bottom: 20px;
line-height: 1.6;
color: #2c3e50;
}

.fill-blank {
background: white;
border: 2px solid #8e44ad;
border-radius: 8px;
padding: 10px 15px;
margin: 0 8px;
min-width: 150px;
text-align: center;
font-weight: bold;
font-size: 1em;
transition: all 0.3s ease;
}

.fill-blank:focus {
outline: none;
border-color: #6c3483;
box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.2);
}

.fill-blank.correct {
background: #d4edda;
border-color: #28a745;
}

.fill-blank.incorrect {
background: #f8d7da;
border-color: #dc3545;
}

.options {
display: grid;
gap: 15px;
}

.option {
display: flex;
align-items: center;
padding: 15px 20px;
background: white;
border: 2px solid #e9ecef;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.05em;
}

.option:hover {
border-color: #8e44ad;
background: linear-gradient(135deg, #f4ecf7 0%, #ebdef0 100%);
transform: translateX(5px);
}

.option input[type=”radio”] {
margin-right: 15px;
width: 20px;
height: 20px;
cursor: pointer;
}

.option.correct {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
border-color: #28a745;
}

.option.incorrect {
background: linear-gradient(135deg, #f8d7da 0%, #f1b0b7 100%);
border-color: #dc3545;
}

.option.correct-answer {
background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
border-color: #17a2b8;
}

.navigation-buttons {
display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 30px;
}

.nav-btn {
flex: 1;
background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
}

.nav-btn.next {
background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
}

.result-container {
display: none;
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
padding: 40px;
border-radius: 15px;
text-align: center;
margin-top: 30px;
border: 3px solid #28a745;
}

.score-display {
font-size: 3em;
font-weight: bold;
color: #28a745;
margin: 20px 0;
}

.feedback {
font-size: 1.3em;
margin: 20px 0;
color: #155724;
}

.mistakes-container {
background: white;
padding: 25px;
border-radius: 10px;
margin-top: 25px;
text-align: left;
}

.mistake-item {
background: #fff3cd;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
border-left: 4px solid #ffc107;
}

.certificate-container {
display: none;
margin-top: 30px;
}

#certificatePreview {
width: 100%;
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
border: 12px solid transparent;
border-image: linear-gradient(45deg, #8e44ad, #c0392b, #e67e22, #f39c12) 1;
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.certificate-header {
text-align: center;
margin-bottom: 30px;
}

.certificate-logo {
background: linear-gradient(135deg, #8e44ad 0%, #c0392b 100%);
color: white;
padding: 15px 30px;
border-radius: 50px;
display: inline-block;
font-size: 1.5em;
font-weight: bold;
margin-bottom: 20px;
}

.certificate-body {
text-align: center;
padding: 30px 0;
}

#certificateName {
font-size: 2.5em;
color: #e74c3c;
margin: 20px 0;
text-transform: uppercase;
letter-spacing: 3px;
}

#certificateScore {
font-size: 2em;
color: #27ae60;
font-weight: bold;
}

.certificate-footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 3px solid #8e44ad;
}

.loading {
display: none;
text-align: center;
color: #e67e22;
font-style: italic;
margin-top: 15px;
}

.instruction-box {
background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
padding: 20px;
border-radius: 12px;
margin-bottom: 25px;
border-left: 5px solid #e67e22;
}

.section-title {
color: #2c3e50;
font-size: 2em;
margin-bottom: 20px;
text-align: center;
padding-bottom: 15px;
border-bottom: 3px solid #8e44ad;
}

.hint {
font-size: 0.9em;
color: #7f8c8d;
font-style: italic;
margin-top: 5px;
}

@media (max-width: 768px) {
.container {
padding: 20px;
}

h1 {
font-size: 1.8em;
}

.fill-blank {
min-width: 120px;
margin: 5px;
}

.navigation-buttons {
flex-direction: column;
}
}

let userData = {};
let answers = {};
let currentSection = 0;

// Fonction de normalisation des réponses
function normalizeAnswer(answer) {
if (!answer) return ”;
return answer
.toLowerCase()
.trim()
.normalize(‘NFD’)
.replace(/[u0300-u036f]/g, ”) // Enlever les accents
.replace(/s+/g, ‘ ‘) // Normaliser les espaces
.replace(/[”]/g, “‘”); // Normaliser les apostrophes
}

// Validation du formulaire
document.getElementById(‘startButton’).addEventListener(‘click’, function() {
let isValid = true;

// Réinitialiser les erreurs
document.querySelectorAll(‘.error’).forEach(el => el.textContent = ”);

// Valider prénom
const prenom = document.getElementById(‘prenom’).value.trim();
if (!prenom) {
document.getElementById(‘prenomError’).textContent = ‘Le prénom est obligatoire’;
isValid = false;
}

// Valider nom
const nom = document.getElementById(‘nom’).value.trim();
if (!nom) {
document.getElementById(‘nomError’).textContent = ‘Le nom est obligatoire’;
isValid = false;
}

// Valider email
const email = document.getElementById(‘email’).value.trim();
const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
if (!email) {
document.getElementById(‘emailError’).textContent = ‘L’email est obligatoire’;
isValid = false;
} else if (!emailRegex.test(email)) {
document.getElementById(‘emailError’).textContent = ‘Email invalide’;
isValid = false;
}

// Valider checkbox
const subscribe = document.getElementById(‘subscribe’).checked;
if (!subscribe) {
document.getElementById(‘subscribeError’).textContent = ‘Vous devez accepter de vous abonner’;
isValid = false;
}

if (isValid) {
userData = {
prenom: prenom,
nom: nom,
email: email
};

document.getElementById(‘subscriptionForm’).style.display = ‘none’;
document.getElementById(‘quizContainer’).style.display = ‘block’;
showSection(1);
}
});

function startSection(section) {
document.querySelector(`#section${section}Questions`).style.display = ‘block’;
document.querySelector(`#section${section} .start-section-btn`).style.display = ‘none’;
}

function showSection(section) {
document.querySelectorAll(‘.quiz-section’).forEach(s => s.classList.remove(‘active’));
document.getElementById(`section${section}`).classList.add(‘active’);
currentSection = section;
updateProgress();
window.scrollTo(0, 0);
}

function updateProgress() {
const progress = (currentSection / 5) * 100;
document.getElementById(‘progressFill’).style.width = progress + ‘%’;
document.getElementById(‘progressFill’).textContent = `Partie ${currentSection}/5`;
}

function validateSection(section) {
if (section === 1) {
// Valider partie 1 (QCM dont)
for (let i = 1; i <= 10; i++) {
const selected = document.querySelector(`input[name="q${i}"]:checked`);
if (!selected) {
alert('Veuillez répondre à toutes les questions avant de continuer.');
return;
}
answers[`q${i}`] = selected.value;
}
checkAnswersSection1();
} else if (section === 2) {
// Valider partie 2 (Participe présent)
for (let i = 11; i <= 20; i++) {
const input = document.getElementById(`q${i}`);
if (!input.value.trim()) {
alert('Veuillez répondre à toutes les questions avant de continuer.');
return;
}
answers[`q${i}`] = input.value.trim();
}
checkAnswersSection2();
} else if (section === 3) {
// Valider partie 3 (Antériorité/Postériorité)
for (let i = 21; i <= 30; i++) {
const selected = document.querySelector(`input[name="q${i}"]:checked`);
if (!selected) {
alert('Veuillez répondre à toutes les questions avant de continuer.');
return;
}
answers[`q${i}`] = selected.value;
}
checkAnswersSection3();
} else if (section === 4) {
// Valider partie 4 (Plus-que-parfait)
for (let i = 31; i {
showSection(section + 1);
}, 1000);
}

function checkAnswersSection1() {
for (let i = 1; i <= 10; i++) {
const container = document.querySelectorAll('#section1 .question-container')[i-1];
const correctAnswer = container.dataset.answer;
const selectedOption = document.querySelector(`input[name="q${i}"]:checked`);

if (selectedOption) {
const optionLabel = selectedOption.closest('.option');
if (selectedOption.value === correctAnswer) {
optionLabel.classList.add('correct');
} else {
optionLabel.classList.add('incorrect');
document.querySelector(`input[name="q${i}"][value="${correctAnswer}"]`).closest('.option').classList.add('correct-answer');
}
}
}
}

function checkAnswersSection2() {
for (let i = 11; i <= 20; i++) {
const input = document.getElementById(`q${i}`);
const correctAnswer = normalizeAnswer(input.dataset.answer);
const userAnswer = normalizeAnswer(input.value);

if (userAnswer === correctAnswer) {
input.classList.add('correct');
} else {
input.classList.add('incorrect');
}
}
}

function checkAnswersSection3() {
for (let i = 21; i <= 30; i++) {
const container = document.querySelectorAll('#section3 .question-container')[i-21];
const correctAnswer = container.dataset.answer;
const selectedOption = document.querySelector(`input[name="q${i}"]:checked`);

if (selectedOption) {
const optionLabel = selectedOption.closest('.option');
if (selectedOption.value === correctAnswer) {
optionLabel.classList.add('correct');
} else {
optionLabel.classList.add('incorrect');
document.querySelector(`input[name="q${i}"][value="${correctAnswer}"]`).closest('.option').classList.add('correct-answer');
}
}
}
}

function checkAnswersSection4() {
for (let i = 31; i <= 40; i++) {
const input = document.getElementById(`q${i}`);
const correctAnswer = normalizeAnswer(input.dataset.answer);
const userAnswer = normalizeAnswer(input.value);

if (userAnswer === correctAnswer) {
input.classList.add('correct');
} else {
input.classList.add('incorrect');
}
}
}

function calculateResults() {
// Valider section 5 d'abord
for (let i = 41; i <= 50; i++) {
const selected = document.querySelector(`input[name="q${i}"]:checked`);
if (!selected) {
alert('Veuillez répondre à toutes les questions avant de voir les résultats.');
return;
}
answers[`q${i}`] = selected.value;
}

// Vérifier section 5
for (let i = 41; i {
let score = 0;
const correctAnswers = {
// Section 1: Pronom dont (10 questions)
q1: ‘b’, q2: ‘a’, q3: ‘c’, q4: ‘b’, q5: ‘a’,
q6: ‘c’, q7: ‘b’, q8: ‘a’, q9: ‘c’, q10: ‘b’,

// Section 2: Participe présent (10 questions)
q11: ‘répétant’, q12: ‘connaissant’, q13: ‘jouant’, q14: ‘étant’, q15: ‘applaudissant’,
q16: ‘sachant’, q17: ‘dirigeant’, q18: ‘ayant’, q19: ‘finissant’, q20: ‘choisissant’,

// Section 3: Antériorité/Postériorité (10 questions)
q21: ‘b’, q22: ‘c’, q23: ‘a’, q24: ‘b’, q25: ‘c’,
q26: ‘a’, q27: ‘b’, q28: ‘a’, q29: ‘c’, q30: ‘b’,

// Section 4: Plus-que-parfait (10 questions)
q31: ‘avaient répété’, q32: ‘était allée’, q33: ‘étaient arrivés’,
q34: ‘avions vu’, q35: ‘était préparée’,
q36: ‘avait appris’, q37: ‘s’étaient entraînés’, q38: ‘était tombée’,
q39: ‘avait créé’, q40: ‘s’étaient maquillées’,

// Section 5: Simultanéité (10 questions)
q41: ‘a’, q42: ‘b’, q43: ‘c’, q44: ‘a’, q45: ‘c’,
q46: ‘b’, q47: ‘c’, q48: ‘a’, q49: ‘c’, q50: ‘b’
};

let mistakes = [];

// Compter les bonnes réponses
for (let key in correctAnswers) {
const questionNum = parseInt(key.replace(‘q’, ”));
let isCorrect = false;

// Pour les questions QCM (sections 1, 3, 5)
if ((questionNum >= 1 && questionNum = 21 && questionNum = 41 && questionNum = 90) {
feedback = ‘🌟 Excellent ! Vous maîtrisez parfaitement le français B1 !’;
} else if (percentage >= 70) {
feedback = ‘👍 Très bien ! Continuez vos efforts !’;
} else if (percentage >= 50) {
feedback = ‘📚 Bien ! Avec un peu plus de pratique, vous serez au top !’;
} else {
feedback = ‘💪 Continuez à pratiquer ! La persévérance paye toujours !’;
}
document.getElementById(‘feedback’).textContent = feedback;

// Afficher les erreurs
if (mistakes.length > 0) {
let mistakesHTML = ‘

📋 Vos erreurs :

‘;
mistakes.forEach(mistake => {
mistakesHTML += `

`;
});
document.getElementById(‘mistakesContainer’).innerHTML = mistakesHTML;
} else {
document.getElementById(‘mistakesContainer’).innerHTML = ‘

🎯 Parfait ! Toutes vos réponses sont correctes !

‘;
}

document.querySelectorAll(‘.quiz-section’).forEach(s => s.style.display = ‘none’);
document.getElementById(‘resultContainer’).style.display = ‘block’;
document.querySelector(‘.progress-container’).style.display = ‘none’;
window.scrollTo(0, 0);
}, 1500);
}

function generateCertificate() {
const fullName = `${userData.prenom} ${userData.nom}`.toUpperCase();
const scoreText = document.getElementById(‘scoreDisplay’).textContent;
const date = new Date().toLocaleDateString(‘fr-FR’, {
year: ‘numeric’,
month: ‘long’,
day: ‘numeric’
});

document.getElementById(‘certificateName’).textContent = fullName;
document.getElementById(‘certificateScore’).textContent = scoreText;
document.getElementById(‘certificateDate’).textContent = `Délivré le ${date}`;

document.getElementById(‘certificateContainer’).style.display = ‘block’;
document.getElementById(‘certificateContainer’).scrollIntoView({ behavior: ‘smooth’ });
}

async function downloadCertificate() {
document.getElementById(‘loadingPdf’).style.display = ‘block’;

const { jsPDF } = window.jspdf;
const certificate = document.getElementById(‘certificatePreview’);

try {
const canvas = await html2canvas(certificate, {
scale: 2,
logging: false,
backgroundColor: ‘#ffffff’
});

const imgData = canvas.toDataURL(‘image/png’);
const pdf = new jsPDF({
orientation: ‘landscape’,
unit: ‘mm’,
format: ‘a4’
});

const imgWidth = 297;
const imgHeight = (canvas.height * imgWidth) / canvas.width;

pdf.addImage(imgData, ‘PNG’, 0, 0, imgWidth, imgHeight);
pdf.save(`Certificat_B1_${userData.nom}_${userData.prenom}.pdf`);

document.getElementById(‘loadingPdf’).style.display = ‘none’;
} catch (error) {
console.error(‘Erreur lors de la génération du PDF:’, error);
alert(‘Erreur lors de la génération du PDF. Veuillez réessayer.’);
document.getElementById(‘loadingPdf’).style.display = ‘none’;
}
}