/* CSS DE BASE - Site Mathématiques Collège */

/* Reset et base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

/* Variables CSS pour cohérence */
:root {
    --primary-blue: #2E86AB;
    --primary-pink: #A23B72;
    --accent-blue: #3498db;
    --success-green: #27ae60;
    --warning-orange: #f39c12;
    --border-radius: 10px;
    --shadow: 0 4px 15px rgba(0,0,0,0.1);
    --transition: all 0.3s ease;
}

/* Conteneurs génériques */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

/* Boutons génériques */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 25px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
    text-align: center;
}

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

.btn-primary:hover {
    background: #1e5f7a;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 0 0.5rem;
    }
    
    .card {
        padding: 1rem;
    }
	
	
	
	
	/* ═══════════════════════════════════════════════════════════════
   🧠 PANNEAU FLOTTANT "كيف أبين" (COMMENT DÉMONTRER)
   À ajouter à la fin de basic.css
   ═══════════════════════════════════════════════════════════════ */

.floating-panel.proofs-panel {
    position: fixed;
    top: 50%;
    right: -900px;
    transform: translateY(-50%);
    width: 880px;
    max-height: 90vh;
    background: white;
    border-radius: 20px 0 0 20px;
    box-shadow: -8px 0 40px rgba(0,0,0,0.3);
    transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.floating-panel.proofs-panel.visible {
    right: 0;
}

/* ====== EN-TÊTE ====== */
.proofs-panel .panel-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 15px rgba(0,0,0,0.2);
    z-index: 10;
}

.proofs-panel .panel-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5em;
    font-weight: bold;
}

.proofs-panel .panel-title .icon {
    font-size: 1.8em;
    animation: proofsIconPulse 2s infinite;
}

@keyframes proofsIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.proofs-panel .close-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 1.8em;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.proofs-panel .close-btn:hover {
    background: rgba(255,255,255,0.35);
    transform: rotate(90deg);
}

/* ====== LAYOUT PRINCIPAL : 2 COLONNES ====== */
.proofs-panel .panel-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* COLONNE GAUCHE : Zone de contenu (70%) */
.proofs-panel .content-zone {
    flex: 7;
    padding: 30px;
    overflow-y: auto;
    background: #f8f9fa;
    border-left: 3px solid #e9ecef;
}

.proofs-panel .content-zone::-webkit-scrollbar {
    width: 10px;
}

.proofs-panel .content-zone::-webkit-scrollbar-track {
    background: #e9ecef;
}

.proofs-panel .content-zone::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 5px;
}

/* Message par défaut */
.proofs-panel .welcome-message {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.proofs-panel .welcome-message .icon {
    font-size: 4em;
    margin-bottom: 20px;
    opacity: 0.5;
}

.proofs-panel .welcome-message h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #495057;
}

/* Affichage du contenu sélectionné */
.proofs-panel .displayed-proof {
    display: none;
    animation: proofsFadeInUp 0.4s ease;
}

.proofs-panel .displayed-proof.active {
    display: block;
}

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

.proofs-panel .displayed-proof h2 {
    font-size: 1.8em;
    color: #2c3e50;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 3px solid #667eea;
}

.proofs-panel .proof-section {
    background: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.proofs-panel .proof-section strong {
    color: #667eea;
    font-size: 1.1em;
    display: block;
    margin-bottom: 10px;
}

.proofs-panel .proof-section p {
    line-height: 1.8;
    color: #495057;
    margin: 10px 0;
}

.proofs-panel .proof-section ol,
.proofs-panel .proof-section ul {
    margin: 15px 0;
    padding-right: 25px;
}

.proofs-panel .proof-section li {
    margin: 8px 0;
    line-height: 1.8;
}

.proofs-panel .math-formula {
    background: #f0f3ff;
    padding: 20px;
    margin: 15px 0;
    border-radius: 8px;
    text-align: center;
    border-right: 4px solid #667eea;
    font-size: 1.2em;
}

/* COLONNE DROITE : Liste des preuves (30%) */
.proofs-panel .proofs-list {
    flex: 3;
    background: white;
    overflow-y: auto;
    padding: 15px;
}

.proofs-panel .proofs-list::-webkit-scrollbar {
    width: 6px;
}

.proofs-panel .proofs-list::-webkit-scrollbar-track {
    background: #f8f9fa;
}

.proofs-panel .proofs-list::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

/* Barre de recherche */
.proofs-panel .search-box {
    padding: 10px;
    background: white;
    border-bottom: 2px solid #e9ecef;
    position: sticky;
    top: 0;
    z-index: 5;
}

.proofs-panel .search-box input {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 0.95em;
    transition: all 0.3s ease;
}

.proofs-panel .search-box input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Catégories dans la liste */
.proofs-panel .list-category {
    margin: 15px 0;
}

.proofs-panel .category-header {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 12px 15px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.05em;
    color: #2c3e50;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.proofs-panel .category-header:hover {
    background: linear-gradient(135deg, #e0e5ec 0%, #b0bac9 100%);
    transform: translateX(-3px);
}

.proofs-panel .category-header .icon {
    margin-left: 8px;
}

/* Items de la liste */
.proofs-panel .list-item {
    padding: 12px 15px;
    margin: 6px 0;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-right: 3px solid transparent;
    font-size: 0.95em;
}

.proofs-panel .list-item:hover {
    background: #e9ecef;
    transform: translateX(-5px);
    border-right-color: #667eea;
}

.proofs-panel .list-item.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: bold;
    border-right-color: #764ba2;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.proofs-panel .list-item .item-icon {
    margin-left: 6px;
    font-size: 1.1em;
}

/* Badges de difficulté */
.proofs-panel .difficulty-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: bold;
    margin-right: 8px;
}

.proofs-panel .difficulty-badge.easy {
    background: #d4edda;
    color: #155724;
}

.proofs-panel .difficulty-badge.medium {
    background: #fff3cd;
    color: #856404;
}

.proofs-panel .difficulty-badge.hard {
    background: #f8d7da;
    color: #721c24;
}

/* Responsive */
@media (max-width: 1024px) {
    .floating-panel.proofs-panel {
        width: 100%;
        right: -100%;
        border-radius: 0;
        max-height: 100vh;
    }
    
    .proofs-panel .panel-body {
        flex-direction: column-reverse;
    }
    
    .proofs-panel .content-zone,
    .proofs-panel .proofs-list {
        flex: 1;
        max-height: 50vh;
    }
}


/* ────────────────────────────────────────
   LOGIQUE GHALI V2 - SYSTÈME D'ANNOTATION
   ──────────────────────────────────────── */

const Ghali = {
    canvas: null, ctx: null, cursor: null, drawing: false,
    mode: 'mouse', color: '#ef4444', thickness: 4,
    strokes: [], redoStack: [], startPos: null, lastMovePos: null,
    isVisible: false, isEditingText: false,

    init() {
        this.createUI();
        this.canvas = document.getElementById('annotationCanvas');
        this.ctx = this.canvas.getContext('2d');
        
        // Curseur dynamique
        document.body.insertAdjacentHTML('beforeend', '<div id="ghali-cursor"></div>');
        this.cursor = document.getElementById('ghali-cursor');
        
        this.resize();
        this.load(); // Recharge les dessins de la page actuelle
        
        window.addEventListener('resize', () => this.resize());
        window.addEventListener('mousemove', (e) => this.updateCursor(e));
        
        const c = this.canvas;
        c.addEventListener('mousedown',  e => this.start(e));
        c.addEventListener('mousemove',  e => this.draw(e));
        window.addEventListener('mouseup',   () => this.stop());
        
        c.addEventListener('touchstart', e => { e.preventDefault(); this.start(e); }, { passive: false });
        c.addEventListener('touchmove',  e => { e.preventDefault(); this.draw(e); },  { passive: false });
        c.addEventListener('touchend',   () => this.stop());
        
        // Fermeture automatique des menus si on clique ailleurs
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.g-group') && !e.target.closest('.g-toggle-btn')) {
                document.querySelectorAll('.g-menu').forEach(m => m.classList.remove('show'));
            }
        });
    },

    createUI() {
        if (!document.getElementById('annotationCanvas')) {
            const container = document.getElementById('ghali-overlay-container') || document.body;
            if (container.id !== 'ghali-overlay-container') {
                const wrapper = document.createElement('div');
                wrapper.id = 'ghali-overlay-container';
                while (document.body.firstChild) wrapper.appendChild(document.body.firstChild);
                document.body.appendChild(wrapper);
            }
            const canvas = document.createElement('canvas');
            canvas.id = 'annotationCanvas';
            document.getElementById('ghali-overlay-container').prepend(canvas);
        }

        if (!document.querySelector('.g-toggle-btn')) {
            document.body.insertAdjacentHTML('beforeend', '<button class="g-toggle-btn" onclick="Ghali.toggleUI()">✏️</button>');
        }

        if (!document.querySelector('.ghali-controls')) {
            const controls = document.createElement('div');
            controls.className = 'ghali-controls hidden';
            controls.innerHTML = `
                <div class="g-group">
                    <button class="g-btn active" id="g-mode-mouse" onclick="Ghali.setMode('mouse')" title="تصفح">🖱️</button>
                    <button class="g-btn"        id="g-mode-pen"   onclick="Ghali.setMode('pen')" title="قلم">✏️</button>
                    <button class="g-btn"        id="g-mode-text"  onclick="Ghali.setMode('text')" title="نص">T</button>
                    <button class="g-btn"        id="g-mode-high"  onclick="Ghali.setMode('high')" title="تحديد">🖍️</button>
                    <button class="g-btn"        id="g-mode-eraser" onclick="Ghali.setMode('eraser')" title="ممحاة">🧼</button>
                </div>
                <div class="g-group">
                    <div style="position:relative;">
                        <button class="g-btn" onclick="Ghali.toggleMenu('geo-menu')">📐</button>
                        <div class="g-menu" id="geo-menu">
                            <button class="g-menu-item g-btn" onclick="Ghali.setMode('line')">📏</button>
                            <button class="g-menu-item g-btn" onclick="Ghali.setMode('rect')">▭</button>
                            <button class="g-menu-item g-btn" onclick="Ghali.setMode('circle')">◯</button>
                            <button class="g-menu-item g-btn" onclick="Ghali.setMode('triangle')">△</button>
                        </div>
                    </div>
                    <div style="position:relative;">
                        <button class="g-btn" onclick="Ghali.toggleMenu('color-menu')">🎨</button>
                        <div class="g-menu" id="color-menu">
                            <button class="g-menu-item g-btn" onclick="Ghali.setColor('#ef4444')"><div class="color-dot" style="background:#ef4444;"></div></button>
                            <button class="g-menu-item g-btn" onclick="Ghali.setColor('#3b82f6')"><div class="color-dot" style="background:#3b82f6;"></div></button>
                            <button class="g-menu-item g-btn" onclick="Ghali.setColor('#10b981')"><div class="color-dot" style="background:#10b981;"></div></button>
                            <button class="g-menu-item g-btn" onclick="Ghali.setColor('#000000')"><div class="color-dot" style="background:#000000;"></div></button>
                        </div>
                    </div>
                </div>
                <div class="g-group">
                    <button class="g-btn" onclick="Ghali.undo()">↺</button>
                    <button class="g-btn" onclick="Ghali.exportJPG()" title="تحميل">💾</button>
                    <button class="g-btn" onclick="Ghali.clear()" title="مسح">🗑️</button>
                </div>
            `;
            document.body.appendChild(controls);
        }
    },

    toggleUI() {
        this.isVisible = !this.isVisible;
        const controls = document.querySelector('.ghali-controls');
        const btn = document.querySelector('.g-toggle-btn');
        if (this.isVisible) {
            controls.classList.remove('hidden');
            btn.innerHTML = '✖️';
            btn.classList.add('active');
        } else {
            controls.classList.add('hidden');
            btn.innerHTML = '✏️';
            btn.classList.remove('active');
            this.setMode('mouse');
        }
    },

    updateCursor(e) {
        if (this.mode === 'mouse' || !this.isVisible) { this.cursor.style.display = 'none'; return; }
        this.cursor.style.display = 'block';
        this.cursor.style.left = e.clientX + 'px';
        this.cursor.style.top = e.clientY + 'px';
        const size = (this.mode === 'high' ? this.thickness * 4 : this.thickness);
        this.cursor.style.width = size + 'px';
        this.cursor.style.height = size + 'px';
        this.cursor.style.backgroundColor = (this.mode === 'eraser') ? '#fff' : this.color;
    },

    getPosition(e) {
        const r = this.canvas.getBoundingClientRect();
        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
        const clientY = e.touches ? e.touches[0].clientY : e.clientY;
        return { x: clientX - r.left, y: clientY - r.top };
    },

    resize() {
        const container = document.getElementById('ghali-overlay-container');
        const dpr = window.devicePixelRatio || 1;
        this.canvas.width = container.offsetWidth * dpr;
        this.canvas.height = Math.max(document.body.scrollHeight, window.innerHeight) * dpr;
        this.ctx.scale(dpr, dpr);
        this.canvas.style.width = container.offsetWidth + 'px';
        this.canvas.style.height = Math.max(document.body.scrollHeight, window.innerHeight) + 'px';
        this.redraw();
    },

    draw(e) {
        if (!this.drawing || this.mode === 'mouse' || this.isEditingText) return;
        const currentPos = this.getPosition(e);
        this.lastMovePos = currentPos;

        if (['pen', 'high', 'eraser'].includes(this.mode)) {
            const stroke = this.strokes[this.strokes.length - 1];
            stroke.points.push(currentPos);
            
            // Lissage temps réel : on dessine le dernier segment
            if (stroke.points.length > 2) {
                const pts = stroke.points;
                const i = pts.length - 2;
                const xc = (pts[i].x + pts[i + 1].x) / 2;
                const yc = (pts[i].y + pts[i + 1].y) / 2;
                const pxc = (pts[i-1].x + pts[i].x) / 2;
                const pyc = (pts[i-1].y + pts[i].y) / 2;

                this.ctx.beginPath();
                this.ctx.globalAlpha = (this.mode === 'high') ? 0.3 : 1.0;
                this.ctx.strokeStyle = (this.mode === 'eraser') ? '#f8fafc' : this.color;
                this.ctx.lineWidth = (this.mode === 'high') ? this.thickness * 4 : this.thickness;
                this.ctx.lineCap = 'round';
                this.ctx.lineJoin = 'round';
                this.ctx.globalCompositeOperation = (this.mode === 'eraser') ? 'destination-out' : 'source-over';
                
                this.ctx.moveTo(pxc, pyc);
                this.ctx.quadraticCurveTo(pts[i].x, pts[i].y, xc, yc);
                this.ctx.stroke();
            }
        } else if (['line', 'rect', 'circle', 'triangle'].includes(this.mode)) {
            this.redraw();
            this.drawShape(this.ctx, this.startPos, currentPos, this.mode, this.color, this.thickness);
        }
    },

    redraw() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        for (const s of this.strokes) {
            this.ctx.globalAlpha = (s.mode === 'high') ? 0.3 : 1.0;
            this.ctx.strokeStyle = (s.mode === 'eraser') ? '#f8fafc' : s.color;
            this.ctx.lineWidth = (s.mode === 'high') ? s.thickness * 4 : s.thickness;
            this.ctx.lineCap = 'round';
            this.ctx.lineJoin = 'round';
            this.ctx.globalCompositeOperation = (s.mode === 'eraser') ? 'destination-out' : 'source-over';

            if (s.points) {
                this.ctx.beginPath();
                if (s.points.length > 2) {
                    this.ctx.moveTo((s.points[0].x + s.points[1].x)/2, (s.points[0].y + s.points[1].y)/2);
                    for (let i = 1; i < s.points.length - 1; i++) {
                        const xc = (s.points[i].x + s.points[i + 1].x) / 2;
                        const yc = (s.points[i].y + s.points[i + 1].y) / 2;
                        this.ctx.quadraticCurveTo(s.points[i].x, s.points[i].y, xc, yc);
                    }
                } else {
                    this.ctx.moveTo(s.points[0].x, s.points[0].y);
                    if(s.points[1]) this.ctx.lineTo(s.points[1].x, s.points[1].y);
                }
                this.ctx.stroke();
            } else if (s.start) {
                this.drawShape(this.ctx, s.start, s.end, s.mode, s.color, s.thickness);
            }
        }
        this.ctx.globalCompositeOperation = 'source-over';
    },

    // ... (Inclure les autres méthodes de Ghali : start, stop, save, load, etc.)
};

// Initialisation globale
document.addEventListener('DOMContentLoaded', () => Ghali.init());