<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculateur Trimestriel</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f8fafc; color: #1e293b; padding: 15px; margin: 0; }
        .container { max-width: 600px; margin: 0 auto; }
        .card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
        h2 { font-size: 1.1rem; border-bottom: 2px solid #e2e8f0; padding-bottom: 8px; margin-top: 0; color: #4f46e5; }
        .subject-box { background: #fdfdfd; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
        .subject-title { font-weight: bold; font-size: 0.95rem; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
        .coef-badge { background: #e0e7ff; color: #4f46e5; font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; }
        .inputs-row { display: flex; gap: 8px; margin-bottom: 8px; }
        .input-group { flex: 1; display: flex; flex-direction: column; }
        .input-group label { font-size: 0.7rem; color: #64748b; margin-bottom: 2px; }
        input { width: 100%; padding: 10px 6px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 1rem; text-align: center; background: #fff; }
        .result { font-size: 0.85rem; text-align: right; color: #475569; margin-top: 6px; font-weight: 500; }
        .results-card { background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%); color: white; text-align: center; padding: 20px; border-radius: 12px; margin-top: 20px; }
        .final-average { font-size: 2.2rem; font-weight: bold; margin: 8px 0; }
        button { width: 100%; background: #ef4444; color: white; border: none; padding: 12px; border-radius: 8px; font-weight: bold; font-size: 1rem; cursor: pointer; margin-top: 15px; }
    </style>
</head>
<body>
    <div class="container">
        <h2 style="text-align:center; color:#4f46e5; border:none; font-size:1.5rem; margin-bottom:20px;">Mon Calculateur Trimestriel</h2>
        
        <div class="card">
            <h2>Matières Obligatoires & EPS</h2>
            <div id="standardList"></div>
        </div>

        <div class="card">
            <h2>Matières Facultatives (Bonus)</h2>
            <p style="font-size:0.8rem; color:#64748b; margin-bottom:10px;">≥15 (+5pts) | ≥12 (+2pts) | ≥10 (0)</p>
            <div id="optionalList"></div>
        </div>

        <div class="results-card">
            <div style="font-size:0.9rem; opacity:0.9;">Moyenne Trimestrielle Générale</div>
            <div class="final-average" id="finalAvg">-- / 20</div>
            <div id="details" style="font-size: 0.8rem; opacity:0.9;">Saisissez vos notes ci-dessus</div>
        </div>
        
        <button onclick="resetData()">Tout effacer</button>
    </div>

    <script>
        const subs = [
            { id: 'maths', name: 'Mathématiques', coef: 3, type: 'std' },
            { id: 'fr', name: 'Français', coef: 2, type: 'std' },
            { id: 'hg', name: 'Histoire Géo', coef: 2, type: 'std' },
            { id: 'svt', name: 'SVT', coef: 4, type: 'std' },
            { id: 'anglais', name: 'Anglais', coef: 2, type: 'std' },
            { id: 'physique', name: 'Physique-Chimie', coef: 3, type: 'std' },
            { id: 'philo', name: 'Philosophie', coef: 2, type: 'std' },
            { id: 'eps', name: 'EPS', coef: 1, type: 'std' },
            { id: 'em', name: 'EM', type: 'opt' },
            { id: 'ewe', name: 'Éwé', type: 'opt' },
            { id: 'musique', name: 'Musique', type: 'opt' }
        ];

        function render() {
            let stdHtml = '', optHtml = '';
            subs.forEach(s => {
                if(s.type === 'std') {
                    stdHtml += `<div class="subject-box">
                        <div class="subject-title">${s.name} <span class="coef-badge">Coef ${s.coef}</span></div>
                        <div class="inputs-row">
                            <div class="input-group"><label>Classe 1</label><input type="number" inputmode="decimal" id="${s.id}_c1" oninput="calc()"></div>
                            <div class="input-group"><label>Classe 2</label><input type="number" inputmode="decimal" id="${s.id}_c2" oninput="calc()"></div>
                            <div class="input-group"><label>Classe 3</label><input type="number" inputmode="decimal" id="${s.id}_c3" oninput="calc()"></div>
                        </div>
                        <div class="input-group"><label>Composition</label><input type="number" inputmode="decimal" id="${s.id}_comp" oninput="calc()"></div>
                        <div class="result">Moyenne : <span id="${s.id}_m">--</span></div>
                    </div>`;
                } else {
                    optHtml += `<div class="subject-box">
                        <div class="subject-title">${s.name} <span class="coef-badge" style="background:#ecfdf5; color:#10b981;">Facultatif</span></div>
                        <div class="input-group"><label>Moyenne de la matière</label><input type="number" inputmode="decimal" id="${s.id}_n" oninput="calc()"></div>
                        <div class="result">Bonus : <span id="${s.id}_b">+0 pt</span></div>
                    </div>`;
                }
            });
            document.getElementById('standardList').innerHTML = stdHtml;
            document.getElementById('optionalList').innerHTML = optHtml;
            loadNotes();
        }

        function calc() {
            let totalSum = 0, totalBonus = 0;
            let data = {};

            subs.forEach(s => {
                if(s.type === 'std') {
                    let c1 = parseFloat(document.getElementById(`${s.id}_c1`).value) || 0;
                    let c2 = parseFloat(document.getElementById(`${s.id}_c2`).value) || 0;
                    let c3 = parseFloat(document.getElementById(`${s.id}_c3`).value) || 0;
                    let comp = parseFloat(document.getElementById(`${s.id}_comp`).value) || 0;
                    
                    data[`${s.id}_c1`] = document.getElementById(`${s.id}_c1`).value;
                    data[`${s.id}_c2`] = document.getElementById(`${s.id}_c2`).value;
                    data[`${s.id}_c3`] = document.getElementById(`${s.id}_c3`).value;
                    data[`${s.id}_comp`] = document.getElementById(`${s.id}_comp`).value;

                    let mClass = (c1 + c2 + c3) / 3;
                    let mSub = (mClass + comp) / 2;
                    document.getElementById(`${s.id}_m`).innerText = (c1||c2||c3||comp) ? mSub.toFixed(2) : '--';
                    totalSum += mSub * s.coef;
                } else {
                    let n = parseFloat(document.getElementById(`${s.id}_n`).value);
                    data[`${s.id}_n`] = document.getElementById(`${s.id}_n`).value;
                    let b = 0;
                    if(!isNaN(n)) {
                        if(n >= 15) b = 5;
                        else if(n >= 12) b = 2;
                    }
                    document.getElementById(`${s.id}_b`).innerText = `+${b} pt`;
                    totalBonus += b;
                }
            });

            localStorage.setItem('notes_trimestre', JSON.stringify(data));

            let final = (totalSum / 19) + totalBonus;
            document.getElementById('finalAvg').innerText = final.toFixed(2) + ' / 20';
            document.getElementById('details').innerText = `Somme pondérée : ${totalSum.toFixed(2)} / 19 | Bonus : +${totalBonus} pts`;
        }

        function loadNotes() {
            let saved = localStorage.getItem('notes_trimestre');
            if(saved) {
                let data = JSON.parse(saved);
                subs.forEach(s => {
                    if(s.type === 'std') {
                        if(data[`${s.id}_c1`]) document.getElementById(`${s.id}_c1`).value = data[`${s.id}_c1`];
                        if(data[`${s.id}_c2`]) document.getElementById(`${s.id}_c2`).value = data[`${s.id}_c2`];
                        if(data[`${s.id}_c3`]) document.getElementById(`${s.id}_c3`).value = data[`${s.id}_c3`];
                        if(data[`${s.id}_comp`]) document.getElementById(`${s.id}_comp`).value = data[`${s.id}_comp`];
                    } else {
                        if(data[`${s.id}_n`]) document.getElementById(`${s.id}_n`).value = data[`${s.id}_n`];
                    }
                });
                calc();
            }
        }

        function resetData() {
            localStorage.removeItem('notes_trimestre');
            render();
            document.getElementById('finalAvg').innerText = '-- / 20';
            document.getElementById('details').innerText = 'Saisissez vos notes ci-dessus';
        }

        render();
    </script>
</body>
</html>
