Delete api

api/index.py

@@ -1,948 +0,0 @@
-# --- START OF index.py ---
-
-import os
-import logging
-import json
-from flask import Flask, Blueprint, render_template, request, redirect, url_for, flash, jsonify, session, current_app, send_file, Response
-from flask_sqlalchemy import SQLAlchemy
-from sqlalchemy.orm import DeclarativeBase
-from werkzeug.utils import secure_filename
-from werkzeug.security import check_password_hash, generate_password_hash
-from datetime import datetime
-from functools import wraps
-import requests
-from io import BytesIO
-import base64
-
-# Configure logging
-logging.basicConfig(level=logging.INFO)
-
-# ---------------------------------------------------------------------------
-# Configuration (Hardcoded as requested)
-# ---------------------------------------------------------------------------
-
-# Database configuration
-SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL')
-
-# Session secret key
-SECRET_KEY = os.environ.get('SESSION_SECRET', 'dev_secret_key_change_in_production')
-if SECRET_KEY == 'dev_secret_key_change_in_production':
-    print("WARNING: Using default SECRET_KEY. Set SESSION_SECRET environment variable for production.")
-
-# Admin login credentials (simple authentication for single admin)
-ADMIN_USERNAME = os.environ.get('ADMIN_USERNAME', 'admin')
-ADMIN_PASSWORD = os.environ.get('ADMIN_PASSWORD', 'password')
-
-# Telegram configuration for feedback
-TELEGRAM_BOT_TOKEN = "7126991043:AAEzeKswNo6eO7oJA49Hxn_bsbzgzUoJ-6A"
-TELEGRAM_CHAT_ID = "-1002081124539"
-
-# Application host/port/debug
-DEBUG = os.environ.get('DEBUG', 'False') == 'True'
-HOST = '0.0.0.0'
-PORT = int(os.environ.get('PORT', 5000))
-
-# ---------------------------------------------------------------------------
-# Flask App Initialization and SQLAlchemy Setup
-# ---------------------------------------------------------------------------
-
-# Create base class for SQLAlchemy models
-class Base(DeclarativeBase):
-    pass
-
-# Initialize SQLAlchemy with the Base class
-db = SQLAlchemy(model_class=Base)
-
-# Create Flask application
-app = Flask(__name__)
-
-# Apply configuration
-app.config['SQLALCHEMY_DATABASE_URI'] = SQLALCHEMY_DATABASE_URI
-app.config['SECRET_KEY'] = SECRET_KEY
-app.config['ADMIN_USERNAME'] = ADMIN_USERNAME
-app.config['ADMIN_PASSWORD'] = ADMIN_PASSWORD
-app.config['TELEGRAM_BOT_TOKEN'] = TELEGRAM_BOT_TOKEN
-app.config['TELEGRAM_CHAT_ID'] = TELEGRAM_CHAT_ID
-app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
-app.config["SQLALCHEMY_ENGINE_OPTIONS"] = {
-    "pool_recycle": 300,
-    "pool_pre_ping": True,
-}
-app.config['HOST'] = HOST
-app.config['PORT'] = PORT
-app.config['DEBUG'] = DEBUG
-app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload
-
-# Initialize the app with SQLAlchemy
-db.init_app(app)
-
-# ---------------------------------------------------------------------------
-# Database Models
-# ---------------------------------------------------------------------------
-
-# Matiere (Subject) Model
-class Matiere(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    nom = db.Column(db.String(100), unique=True, nullable=False)
-    color_code = db.Column(db.String(7), nullable=False, default="#3498db")  # Add color code field for subject
-
-    # Relationships
-    sous_categories = db.relationship('SousCategorie', backref='matiere', lazy=True, cascade="all, delete-orphan")
-
-    def __repr__(self):
-        return f'<Matiere {self.nom}>'
-
-# SousCategorie (SubCategory) Model
-class SousCategorie(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    nom = db.Column(db.String(100), nullable=False)
-    matiere_id = db.Column(db.Integer, db.ForeignKey('matiere.id'), nullable=False)
-
-    # Enforce unique constraint on name within same matiere
-    __table_args__ = (db.UniqueConstraint('nom', 'matiere_id', name='_nom_matiere_uc'),)
-
-    # Relationships
-    textes = db.relationship('Texte', backref='sous_categorie', lazy=True, cascade="all, delete-orphan")
-
-    def __repr__(self):
-        return f'<SousCategorie {self.nom} (Matiere ID: {self.matiere_id})>'
-
-# ContentBlock model for the new block-based content
-class ContentBlock(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    texte_id = db.Column(db.Integer, db.ForeignKey('texte.id'), nullable=False)
-    title = db.Column(db.String(200), nullable=True)
-    content = db.Column(db.Text, nullable=False)
-    order = db.Column(db.Integer, nullable=False, default=0)
-    image_id = db.Column(db.Integer, db.ForeignKey('image.id'), nullable=True)
-    image_position = db.Column(db.String(10), nullable=True, default='left')  # 'left', 'right', 'top', 'bottom'
-    
-    # Relationship
-    image = db.relationship('Image', foreign_keys=[image_id])
-    
-    def __repr__(self):
-        return f'<ContentBlock {self.id} (Texte ID: {self.texte_id})>'
-
-# Texte (Text content) Model
-class Texte(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    titre = db.Column(db.String(200), nullable=False)
-    contenu = db.Column(db.Text, nullable=False)
-    sous_categorie_id = db.Column(db.Integer, db.ForeignKey('sous_categorie.id'), nullable=False)
-    created_at = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
-    updated_at = db.Column(db.DateTime, nullable=False, default=datetime.utcnow, onupdate=datetime.utcnow)
-    
-    # Relationships
-    historiques = db.relationship('TexteHistorique', backref='texte', lazy=True, cascade="all, delete-orphan")
-    content_blocks = db.relationship('ContentBlock', backref='texte', lazy=True, cascade="all, delete-orphan", 
-                                   order_by="ContentBlock.order")
-
-    def __repr__(self):
-        return f'<Texte {self.titre} (SousCategorie ID: {self.sous_categorie_id})>'
-
-# Image Model for storing content images
-class Image(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    nom_fichier = db.Column(db.String(255))
-    mime_type = db.Column(db.String(100), nullable=False)
-    data = db.Column(db.LargeBinary, nullable=False)  # BLOB/BYTEA for image data
-    uploaded_at = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
-    
-    # Additional fields for image management
-    description = db.Column(db.String(255), nullable=True)
-    alt_text = db.Column(db.String(255), nullable=True)
-    
-    def __repr__(self):
-        return f'<Image {self.id} ({self.nom_fichier})>'
-
-# TexteHistorique (Text History) Model
-class TexteHistorique(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    texte_id = db.Column(db.Integer, db.ForeignKey('texte.id'), nullable=False)
-    contenu_precedent = db.Column(db.Text, nullable=False)
-    date_modification = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
-
-    def __repr__(self):
-        return f'<TexteHistorique {self.id} (Texte ID: {self.texte_id})>'
-
-# UserPreference Model to store user theme preferences
-class UserPreference(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    user_id = db.Column(db.String(50), unique=True, nullable=False)  # Use session ID or similar for anonymous users
-    theme = db.Column(db.String(10), nullable=False, default='light')  # 'light' or 'dark'
-    created_at = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
-    updated_at = db.Column(db.DateTime, nullable=False, default=datetime.utcnow, onupdate=datetime.utcnow)
-    
-    def __repr__(self):
-        return f'<UserPreference {self.id} (User ID: {self.user_id})>'
-
-# ---------------------------------------------------------------------------
-# Utility Functions
-# ---------------------------------------------------------------------------
-
-# Admin authentication decorator
-def admin_required(f):
-    @wraps(f)
-    def decorated_function(*args, **kwargs):
-        if not session.get('admin_logged_in'):
-            flash('Veuillez vous connecter pour accéder à cette page.', 'warning')
-            return redirect(url_for('admin_bp.login'))
-        return f(*args, **kwargs)
-    return decorated_function
-
-# Admin login check
-def check_admin_credentials(username, password):
-    # Access config via current_app proxy
-    admin_username = current_app.config['ADMIN_USERNAME']
-    admin_password = current_app.config['ADMIN_PASSWORD']
-
-    return username == admin_username and password == admin_password
-
-# Send feedback to Telegram
-def send_telegram_feedback(message):
-    token = current_app.config.get('TELEGRAM_BOT_TOKEN')
-    chat_id = current_app.config.get('TELEGRAM_CHAT_ID')
-
-    if not token or not chat_id:
-        current_app.logger.error("Telegram bot token or chat ID not configured")
-        return False
-
-    api_url = f"https://api.telegram.org/bot{token}/sendMessage"
-    payload = {
-        "chat_id": chat_id,
-        "text": f"📝 Nouveau feedback:\n\n{message}",
-        "parse_mode": "HTML"
-    }
-
-    try:
-        response = requests.post(api_url, data=payload, timeout=10)
-        response.raise_for_status()
-        current_app.logger.info("Feedback sent to Telegram successfully")
-        return True
-    except requests.exceptions.RequestException as e:
-        current_app.logger.error(f"Error sending feedback to Telegram: {str(e)}")
-        if hasattr(e, 'response') and e.response is not None:
-             current_app.logger.error(f"Telegram API Response: {e.response.text}")
-        return False
-    except Exception as e:
-        current_app.logger.error(f"Unexpected exception while sending feedback to Telegram: {str(e)}")
-        return False
-
-# Get or create user preferences
-def get_user_preferences():
-    user_id = session.get('user_id')
-    if not user_id:
-        # Generate a unique ID for new users
-        user_id = str(datetime.utcnow().timestamp())
-        session['user_id'] = user_id
-    
-    user_pref = UserPreference.query.filter_by(user_id=user_id).first()
-    if not user_pref:
-        user_pref = UserPreference(user_id=user_id)
-        db.session.add(user_pref)
-        db.session.commit()
-    
-    return user_pref
-
-# Parse text content into blocks
-def parse_content_to_blocks(text_content):
-    # Simple parser that creates blocks based on paragraphs or headings
-    blocks = []
-    current_block = {"title": None, "content": ""}
-    
-    for line in text_content.split('\n'):
-        line = line.strip()
-        if not line:
-            # Empty line might indicate a block break
-            if current_block["content"]:
-                blocks.append(current_block)
-                current_block = {"title": None, "content": ""}
-            continue
-            
-        # Check if line might be a heading (simplistic approach)
-        if len(line) < 100 and not current_block["content"]:
-            current_block["title"] = line
-        else:
-            if current_block["content"]:
-                current_block["content"] += "\n" + line
-            else:
-                current_block["content"] = line
-    
-    # Add the last block if not empty
-    if current_block["content"]:
-        blocks.append(current_block)
-    
-    # If no blocks were created, create one with all content
-    if not blocks:
-        blocks.append({"title": None, "content": text_content})
-    
-    return blocks
-
-# ---------------------------------------------------------------------------
-# Blueprints Definition
-# ---------------------------------------------------------------------------
-main_bp = Blueprint('main_bp', __name__)
-admin_bp = Blueprint('admin_bp', __name__, url_prefix='/gestion')
-
-
-# ---------------------------------------------------------------------------
-# Main Routes
-# ---------------------------------------------------------------------------
-
-@main_bp.route('/')
-def index():
-    # Get user theme preference
-    user_pref = get_user_preferences()
-    
-    # Fetch all subjects (matieres)
-    matieres = Matiere.query.all()
-    
-    return render_template('index.html', matieres=matieres, theme=user_pref.theme)
-
-@main_bp.route('/get_sous_categories/<int:matiere_id>')
-def get_sous_categories(matiere_id):
-    sous_categories = SousCategorie.query.filter_by(matiere_id=matiere_id).all()
-    return jsonify([{'id': sc.id, 'nom': sc.nom} for sc in sous_categories])
-
-@main_bp.route('/get_textes/<int:sous_categorie_id>')
-def get_textes(sous_categorie_id):
-    textes = Texte.query.filter_by(sous_categorie_id=sous_categorie_id).all()
-    return jsonify([{'id': t.id, 'titre': t.titre} for t in textes])
-
-@main_bp.route('/get_texte/<int:texte_id>')
-def get_texte(texte_id):
-    texte = Texte.query.get_or_404(texte_id)
-    
-    # Get the subject color for theming
-    matiere = Matiere.query.join(SousCategorie).filter(SousCategorie.id == texte.sous_categorie_id).first()
-    color_code = matiere.color_code if matiere else "#3498db"
-    
-    # Check if the texte has content blocks
-    if texte.content_blocks:
-        blocks = []
-        for block in texte.content_blocks:
-            block_data = {
-                'id': block.id,
-                'title': block.title,
-                'content': block.content,
-                'order': block.order,
-                'image_position': block.image_position,
-                'image': None
-            }
-            
-            # Add image data if available
-            if block.image:
-                image_data = base64.b64encode(block.image.data).decode('utf-8')
-                block_data['image'] = {
-                    'id': block.image.id,
-                    'src': f"data:{block.image.mime_type};base64,{image_data}",
-                    'alt': block.image.alt_text or block.title or "Image illustration"
-                }
-                
-            blocks.append(block_data)
-    else:
-        # If no blocks exist yet, parse the content to create blocks
-        # This is useful for existing content migration
-        parsed_blocks = parse_content_to_blocks(texte.contenu)
-        blocks = []
-        for i, block_data in enumerate(parsed_blocks):
-            blocks.append({
-                'id': None,
-                'title': block_data['title'],
-                'content': block_data['content'],
-                'order': i,
-                'image_position': 'left',
-                'image': None
-            })
-    
-    return jsonify({
-        'id': texte.id,
-        'titre': texte.titre,
-        'contenu': texte.contenu,
-        'blocks': blocks,
-        'color_code': color_code
-    })
-
-@main_bp.route('/feedback', methods=['POST'])
-def submit_feedback():
-    message = request.form.get('message', '').strip()
-    if not message:
-        flash("Le message ne peut pas être vide.", "error")
-        return redirect(url_for('main_bp.index'))
-    
-    success = send_telegram_feedback(message)
-    if success:
-        flash("Merci pour votre feedback!", "success")
-    else:
-        flash("Une erreur s'est produite lors de l'envoi de votre feedback. Veuillez réessayer plus tard.", "error")
-    
-    return redirect(url_for('main_bp.index'))
-
-@main_bp.route('/set_theme', methods=['POST'])
-def set_theme():
-    theme = request.form.get('theme', 'light')
-    if theme not in ['light', 'dark']:
-        theme = 'light'
-    
-    user_pref = get_user_preferences()
-    user_pref.theme = theme
-    db.session.commit()
-    
-    return jsonify({'success': True, 'theme': theme})
-
-@main_bp.route('/image/<int:image_id>')
-def get_image(image_id):
-    image = Image.query.get_or_404(image_id)
-    return Response(image.data, mimetype=image.mime_type)
-
-# ---------------------------------------------------------------------------
-# Admin Routes
-# ---------------------------------------------------------------------------
-
-@admin_bp.route('/login', methods=['GET', 'POST'])
-def login():
-    if request.method == 'POST':
-        username = request.form.get('username')
-        password = request.form.get('password')
-        
-        if check_admin_credentials(username, password):
-            session['admin_logged_in'] = True
-            flash('Connexion réussie !', 'success')
-            return redirect(url_for('admin_bp.dashboard'))
-        else:
-            flash('Nom d\'utilisateur ou mot de passe incorrect.', 'danger')
-    
-    return render_template('admin/login.html')
-
-@admin_bp.route('/logout')
-def logout():
-    session.pop('admin_logged_in', None)
-    flash('Vous avez été déconnecté.', 'info')
-    return redirect(url_for('admin_bp.login'))
-
-@admin_bp.route('/')
-@admin_required
-def dashboard():
-    # Count of each entity type for dashboard stats
-    stats = {
-        'matieres': Matiere.query.count(),
-        'sous_categories': SousCategorie.query.count(),
-        'textes': Texte.query.count(),
-        'images': Image.query.count()
-    }
-    
-    # Get recent texts for dashboard
-    recent_textes = Texte.query.order_by(Texte.updated_at.desc()).limit(5).all()
-    
-    return render_template('admin/dashboard.html', stats=stats, recent_textes=recent_textes)
-
-# Matières (Subjects) Management
-@admin_bp.route('/matieres', methods=['GET', 'POST'])
-@admin_required
-def matieres():
-    if request.method == 'POST':
-        action = request.form.get('action')
-        
-        if action == 'add':
-            nom = request.form.get('nom', '').strip()
-            color_code = request.form.get('color_code', '#3498db')
-            
-            if not nom:
-                flash('Le nom de la matière est requis.', 'danger')
-            else:
-                matiere = Matiere.query.filter_by(nom=nom).first()
-                if matiere:
-                    flash(f'La matière "{nom}" existe déjà.', 'warning')
-                else:
-                    new_matiere = Matiere(nom=nom, color_code=color_code)
-                    db.session.add(new_matiere)
-                    db.session.commit()
-                    flash(f'Matière "{nom}" ajoutée avec succès !', 'success')
-        
-        elif action == 'edit':
-            matiere_id = request.form.get('matiere_id')
-            nom = request.form.get('nom', '').strip()
-            color_code = request.form.get('color_code', '#3498db')
-            
-            if not matiere_id or not nom:
-                flash('Informations incomplètes pour la modification.', 'danger')
-            else:
-                matiere = Matiere.query.get(matiere_id)
-                if not matiere:
-                    flash('Matière non trouvée.', 'danger')
-                else:
-                    existing = Matiere.query.filter_by(nom=nom).first()
-                    if existing and existing.id != int(matiere_id):
-                        flash(f'Une autre matière avec le nom "{nom}" existe déjà.', 'warning')
-                    else:
-                        matiere.nom = nom
-                        matiere.color_code = color_code
-                        db.session.commit()
-                        flash(f'Matière "{nom}" modifiée avec succès !', 'success')
-        
-        elif action == 'delete':
-            matiere_id = request.form.get('matiere_id')
-            
-            if not matiere_id:
-                flash('ID de matière manquant pour la suppression.', 'danger')
-            else:
-                matiere = Matiere.query.get(matiere_id)
-                if not matiere:
-                    flash('Matière non trouvée.', 'danger')
-                else:
-                    nom = matiere.nom
-                    db.session.delete(matiere)
-                    db.session.commit()
-                    flash(f'Matière "{nom}" supprimée avec succès !', 'success')
-    
-    matieres = Matiere.query.all()
-    return render_template('admin/matieres.html', matieres=matieres)
-
-# Sous-Catégories (Subcategories) Management
-@admin_bp.route('/sous_categories', methods=['GET', 'POST'])
-@admin_required
-def sous_categories():
-    if request.method == 'POST':
-        action = request.form.get('action')
-        
-        if action == 'add':
-            nom = request.form.get('nom', '').strip()
-            matiere_id = request.form.get('matiere_id')
-            
-            if not nom or not matiere_id:
-                flash('Le nom et la matière sont requis.', 'danger')
-            else:
-                sous_categorie = SousCategorie.query.filter_by(nom=nom, matiere_id=matiere_id).first()
-                if sous_categorie:
-                    flash(f'La sous-catégorie "{nom}" existe déjà pour cette matière.', 'warning')
-                else:
-                    new_sous_categorie = SousCategorie(nom=nom, matiere_id=matiere_id)
-                    db.session.add(new_sous_categorie)
-                    db.session.commit()
-                    flash(f'Sous-catégorie "{nom}" ajoutée avec succès !', 'success')
-        
-        elif action == 'edit':
-            sous_categorie_id = request.form.get('sous_categorie_id')
-            nom = request.form.get('nom', '').strip()
-            matiere_id = request.form.get('matiere_id')
-            
-            if not sous_categorie_id or not nom or not matiere_id:
-                flash('Informations incomplètes pour la modification.', 'danger')
-            else:
-                sous_categorie = SousCategorie.query.get(sous_categorie_id)
-                if not sous_categorie:
-                    flash('Sous-catégorie non trouvée.', 'danger')
-                else:
-                    existing = SousCategorie.query.filter_by(nom=nom, matiere_id=matiere_id).first()
-                    if existing and existing.id != int(sous_categorie_id):
-                        flash(f'Une sous-catégorie avec le nom "{nom}" existe déjà pour cette matière.', 'warning')
-                    else:
-                        sous_categorie.nom = nom
-                        sous_categorie.matiere_id = matiere_id
-                        db.session.commit()
-                        flash(f'Sous-catégorie "{nom}" modifiée avec succès !', 'success')
-        
-        elif action == 'delete':
-            sous_categorie_id = request.form.get('sous_categorie_id')
-            
-            if not sous_categorie_id:
-                flash('ID de sous-catégorie manquant pour la suppression.', 'danger')
-            else:
-                sous_categorie = SousCategorie.query.get(sous_categorie_id)
-                if not sous_categorie:
-                    flash('Sous-catégorie non trouvée.', 'danger')
-                else:
-                    nom = sous_categorie.nom
-                    db.session.delete(sous_categorie)
-                    db.session.commit()
-                    flash(f'Sous-catégorie "{nom}" supprimée avec succès !', 'success')
-    
-    sous_categories = SousCategorie.query.join(Matiere).all()
-    matieres = Matiere.query.all()
-    return render_template('admin/sous_categories.html', sous_categories=sous_categories, matieres=matieres)
-
-# Textes (Content) Management
-@admin_bp.route('/textes', methods=['GET', 'POST'])
-@admin_required
-def textes():
-    if request.method == 'POST':
-        action = request.form.get('action')
-        
-        if action == 'add':
-            titre = request.form.get('titre', '').strip()
-            sous_categorie_id = request.form.get('sous_categorie_id')
-            contenu = request.form.get('contenu', '').strip()
-            
-            if not titre or not sous_categorie_id or not contenu:
-                flash('Tous les champs sont requis.', 'danger')
-            else:
-                new_texte = Texte(
-                    titre=titre,
-                    sous_categorie_id=sous_categorie_id,
-                    contenu=contenu
-                )
-                db.session.add(new_texte)
-                db.session.commit()
-                
-                # Parse content into blocks
-                blocks = parse_content_to_blocks(contenu)
-                for i, block_data in enumerate(blocks):
-                    new_block = ContentBlock(
-                        texte_id=new_texte.id,
-                        title=block_data['title'],
-                        content=block_data['content'],
-                        order=i
-                    )
-                    db.session.add(new_block)
-                
-                db.session.commit()
-                flash(f'Texte "{titre}" ajouté avec succès !', 'success')
-                return redirect(url_for('admin_bp.edit_texte', texte_id=new_texte.id))
-        
-        elif action == 'delete':
-            texte_id = request.form.get('texte_id')
-            
-            if not texte_id:
-                flash('ID de texte manquant pour la suppression.', 'danger')
-            else:
-                texte = Texte.query.get(texte_id)
-                if not texte:
-                    flash('Texte non trouvé.', 'danger')
-                else:
-                    titre = texte.titre
-                    db.session.delete(texte)
-                    db.session.commit()
-                    flash(f'Texte "{titre}" supprimé avec succès !', 'success')
-    
-    matieres = Matiere.query.all()
-    textes = Texte.query.join(SousCategorie).join(Matiere).order_by(Matiere.nom, SousCategorie.nom, Texte.titre).all()
-    
-    # Group texts by matiere and sous_categorie for easier display
-    grouped_textes = {}
-    for texte in textes:
-        matiere_id = texte.sous_categorie.matiere.id
-        if matiere_id not in grouped_textes:
-            grouped_textes[matiere_id] = {
-                'nom': texte.sous_categorie.matiere.nom,
-                'color': texte.sous_categorie.matiere.color_code,
-                'sous_categories': {}
-            }
-        
-        sous_cat_id = texte.sous_categorie.id
-        if sous_cat_id not in grouped_textes[matiere_id]['sous_categories']:
-            grouped_textes[matiere_id]['sous_categories'][sous_cat_id] = {
-                'nom': texte.sous_categorie.nom,
-                'textes': []
-            }
-        
-        grouped_textes[matiere_id]['sous_categories'][sous_cat_id]['textes'].append({
-            'id': texte.id,
-            'titre': texte.titre,
-            'updated_at': texte.updated_at
-        })
-    
-    sous_categories = SousCategorie.query.all()
-    return render_template('admin/textes.html', grouped_textes=grouped_textes, matieres=matieres, sous_categories=sous_categories)
-
-@admin_bp.route('/textes/edit/<int:texte_id>', methods=['GET', 'POST'])
-@admin_required
-def edit_texte(texte_id):
-    texte = Texte.query.get_or_404(texte_id)
-    
-    if request.method == 'POST':
-        action = request.form.get('action')
-        
-        if action == 'update_basic':
-            # Basic text info update
-            titre = request.form.get('titre', '').strip()
-            sous_categorie_id = request.form.get('sous_categorie_id')
-            
-            if not titre or not sous_categorie_id:
-                flash('Le titre et la sous-catégorie sont requis.', 'danger')
-            else:
-                # Save previous content for history
-                historique = TexteHistorique(
-                    texte_id=texte.id,
-                    contenu_precedent=texte.contenu
-                )
-                db.session.add(historique)
-                
-                texte.titre = titre
-                texte.sous_categorie_id = sous_categorie_id
-                
-                db.session.commit()
-                flash('Informations de base mises à jour avec succès !', 'success')
-        
-        elif action == 'update_blocks':
-            # Update content blocks
-            blocks_data = json.loads(request.form.get('blocks_data', '[]'))
-            
-            # Save previous content for history if changes were made
-            historique = TexteHistorique(
-                texte_id=texte.id,
-                contenu_precedent=texte.contenu
-            )
-            db.session.add(historique)
-            
-            # Update all blocks
-            # First, remove existing blocks
-            for block in texte.content_blocks:
-                db.session.delete(block)
-            
-            # Then create new blocks from the submitted data
-            new_content = []
-            for i, block_data in enumerate(blocks_data):
-                new_block = ContentBlock(
-                    texte_id=texte.id,
-                    title=block_data.get('title'),
-                    content=block_data.get('content', ''),
-                    order=i,
-                    image_position=block_data.get('image_position', 'left')
-                )
-                
-                # Set image if provided
-                image_id = block_data.get('image_id')
-                if image_id and image_id != 'null' and image_id != 'undefined':
-                    new_block.image_id = image_id
-                
-                db.session.add(new_block)
-                
-                # Append to full content for the main text field
-                if new_block.title:
-                    new_content.append(new_block.title)
-                new_content.append(new_block.content)
-            
-            # Update the main content field to match block content
-            texte.contenu = "\n\n".join(new_content)
-            
-            db.session.commit()
-            flash('Contenu mis à jour avec succès !', 'success')
-        
-        elif action == 'upload_image':
-            if 'image' not in request.files:
-                return jsonify({'success': False, 'error': 'Aucun fichier trouvé'})
-                
-            file = request.files['image']
-            if file.filename == '':
-                return jsonify({'success': False, 'error': 'Aucun fichier sélectionné'})
-            
-            # Check file type (accept only images)
-            allowed_mimetypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml']
-            if file.mimetype not in allowed_mimetypes:
-                return jsonify({'success': False, 'error': 'Type de fichier non autorisé'})
-            
-            # Read file data
-            file_data = file.read()
-            if not file_data:
-                return jsonify({'success': False, 'error': 'Fichier vide'})
-            
-            # Create new image record
-            new_image = Image(
-                nom_fichier=secure_filename(file.filename),
-                mime_type=file.mimetype,
-                data=file_data,
-                alt_text=request.form.get('alt_text', '')
-            )
-            db.session.add(new_image)
-            db.session.commit()
-            
-            # Return image details
-            image_data = base64.b64encode(new_image.data).decode('utf-8')
-            return jsonify({
-                'success': True,
-                'image': {
-                    'id': new_image.id,
-                    'filename': new_image.nom_fichier,
-                    'src': f"data:{new_image.mime_type};base64,{image_data}",
-                    'alt': new_image.alt_text or "Image illustration"
-                }
-            })
-    
-    # Get existing content blocks or create them if none exist
-    if not texte.content_blocks:
-        # Parse content into blocks
-        blocks = parse_content_to_blocks(texte.contenu)
-        for i, block_data in enumerate(blocks):
-            new_block = ContentBlock(
-                texte_id=texte.id,
-                title=block_data['title'],
-                content=block_data['content'],
-                order=i
-            )
-            db.session.add(new_block)
-        db.session.commit()
-        
-        # Reload the texte to get the new blocks
-        texte = Texte.query.get(texte_id)
-    
-    # Prepare block data for template
-    blocks = []
-    for block in texte.content_blocks:
-        block_data = {
-            'id': block.id,
-            'title': block.title,
-            'content': block.content,
-            'order': block.order,
-            'image_position': block.image_position,
-            'image': None
-        }
-        
-        # Add image data if available
-        if block.image:
-            image_data = base64.b64encode(block.image.data).decode('utf-8')
-            block_data['image'] = {
-                'id': block.image.id,
-                'src': f"data:{block.image.mime_type};base64,{image_data}",
-                'alt': block.image.alt_text or block.title or "Image illustration"
-            }
-            
-        blocks.append(block_data)
-    
-    # Get all images for selection
-    images = Image.query.order_by(Image.uploaded_at.desc()).all()
-    images_data = []
-    for image in images:
-        image_data = base64.b64encode(image.data).decode('utf-8')
-        images_data.append({
-            'id': image.id,
-            'filename': image.nom_fichier,
-            'src': f"data:{image.mime_type};base64,{image_data}",
-            'alt': image.alt_text or "Image illustration"
-        })
-    
-    sous_categories = SousCategorie.query.all()
-    return render_template('admin/edit_texte.html', 
-                         texte=texte, 
-                         blocks=blocks, 
-                         images=images_data,
-                         sous_categories=sous_categories)
-
-@admin_bp.route('/historique/<int:texte_id>')
-@admin_required
-def historique(texte_id):
-    texte = Texte.query.get_or_404(texte_id)
-    historiques = TexteHistorique.query.filter_by(texte_id=texte_id).order_by(TexteHistorique.date_modification.desc()).all()
-    
-    return render_template('admin/historique.html', texte=texte, historiques=historiques)
-
-@admin_bp.route('/images', methods=['GET', 'POST'])
-@admin_required
-def images():
-    if request.method == 'POST':
-        action = request.form.get('action')
-        
-        if action == 'upload':
-            if 'image' not in request.files:
-                flash('Aucun fichier trouvé.', 'danger')
-                return redirect(request.url)
-                
-            file = request.files['image']
-            if file.filename == '':
-                flash('Aucun fichier sélectionné.', 'danger')
-                return redirect(request.url)
-            
-            # Check file type (accept only images)
-            allowed_mimetypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml']
-            if file.mimetype not in allowed_mimetypes:
-                flash('Type de fichier non autorisé.', 'danger')
-                return redirect(request.url)
-            
-            # Read file data
-            file_data = file.read()
-            if not file_data:
-                flash('Fichier vide.', 'danger')
-                return redirect(request.url)
-            
-            # Create new image record
-            alt_text = request.form.get('alt_text', '')
-            description = request.form.get('description', '')
-            
-            new_image = Image(
-                nom_fichier=secure_filename(file.filename),
-                mime_type=file.mimetype,
-                data=file_data,
-                alt_text=alt_text,
-                description=description
-            )
-            db.session.add(new_image)
-            db.session.commit()
-            
-            flash('Image téléchargée avec succès !', 'success')
-        
-        elif action == 'delete':
-            image_id = request.form.get('image_id')
-            if image_id:
-                image = Image.query.get(image_id)
-                if image:
-                    # Check if image is used in any content block
-                    usage_count = ContentBlock.query.filter_by(image_id=image.id).count()
-                    if usage_count > 0:
-                        flash(f'Cette image est utilisée dans {usage_count} blocs de contenu. Veuillez les modifier avant de supprimer l\'image.', 'warning')
-                    else:
-                        db.session.delete(image)
-                        db.session.commit()
-                        flash('Image supprimée avec succès !', 'success')
-                else:
-                    flash('Image non trouvée.', 'danger')
-            else:
-                flash('ID d\'image manquant.', 'danger')
-        
-        elif action == 'update':
-            image_id = request.form.get('image_id')
-            alt_text = request.form.get('alt_text', '')
-            description = request.form.get('description', '')
-            
-            if image_id:
-                image = Image.query.get(image_id)
-                if image:
-                    image.alt_text = alt_text
-                    image.description = description
-                    db.session.commit()
-                    flash('Informations de l\'image mises à jour avec succès !', 'success')
-                else:
-                    flash('Image non trouvée.', 'danger')
-            else:
-                flash('ID d\'image manquant.', 'danger')
-    
-    # Get all images
-    images = Image.query.order_by(Image.uploaded_at.desc()).all()
-    images_data = []
-    for image in images:
-        image_data = base64.b64encode(image.data).decode('utf-8')
-        images_data.append({
-            'id': image.id,
-            'filename': image.nom_fichier,
-            'description': image.description,
-            'alt_text': image.alt_text,
-            'uploaded_at': image.uploaded_at,
-            'src': f"data:{image.mime_type};base64,{image_data}"
-        })
-    
-    return render_template('admin/images.html', images=images_data)
-
-# ---------------------------------------------------------------------------
-# Register blueprints and setup database
-# ---------------------------------------------------------------------------
-
-app.register_blueprint(main_bp)
-app.register_blueprint(admin_bp)
-
-# Create tables if they don't exist
-with app.app_context():
-    db.create_all()
-
-# Application entry point
-@app.route('/')
-def index():
-    return redirect(url_for('main_bp.index'))
-
-# ---------------------------------------------------------------------------
-# Serve the app - This is only used when running locally
-# ---------------------------------------------------------------------------
-
-if __name__ == '__main__':
-    app.run(host=HOST, port=PORT, debug=DEBUG)
-    
-# For Vercel serverless function
-def app_handler(environ, start_response):
-    return app(environ, start_response)

api/static/css/style.css

@@ -1,762 +0,0 @@
-/* Base Styles & Theme Variables */
-:root {
-    /* Light theme */
-    --background-color: #f8f9fa;
-    --text-color: #212529;
-    --primary-color: #3498db;
-    --secondary-color: #2ecc71;
-    --accent-color: #e74c3c;
-    --muted-color: #95a5a6;
-    --border-color: #dee2e6;
-    --card-bg: #ffffff;
-    --header-bg: #ffffff;
-    --footer-bg: #f1f1f1;
-    --shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    --hover-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-    --block-bg: #f8f9fa;
-    --block-border: 1px solid #dee2e6;
-    --input-bg: #ffffff;
-    --btn-primary-bg: var(--primary-color);
-    --btn-primary-text: #ffffff;
-    --btn-secondary-bg: #6c757d;
-    --btn-secondary-text: #ffffff;
-    --modal-bg: #ffffff;
-    --sidebar-bg: #ffffff; /* Added for consistency */
-    --sidebar-border: #dee2e6; /* Added */
-    --sidebar-hover-bg: rgba(52, 152, 219, 0.1); /* Added */
-}
-
-[data-theme="dark"] {
-    /* Dark theme */
-    --background-color: #121212;
-    --text-color: #e0e0e0;
-    --primary-color: #3498db;
-    --secondary-color: #2ecc71;
-    --accent-color: #e74c3c;
-    --muted-color: #95a5a6;
-    --border-color: #333333;
-    --card-bg: #1e1e1e;
-    --header-bg: #1a1a1a;
-    --footer-bg: #1a1a1a;
-    --shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-    --hover-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    --block-bg: #1e1e1e;
-    --block-border: 1px solid #333333;
-    --input-bg: #2c2c2c;
-    --btn-primary-bg: var(--primary-color);
-    --btn-primary-text: #ffffff;
-    --btn-secondary-bg: #555555;
-    --btn-secondary-text: #ffffff;
-    --modal-bg: #1e1e1e;
-    --sidebar-bg: #1e1e1e; /* Added for dark theme */
-    --sidebar-border: #333333; /* Added */
-    --sidebar-hover-bg: rgba(52, 152, 219, 0.2); /* Slightly different hover for dark */
-}
-
-/* General Styles */
-body {
-    background-color: var(--background-color);
-    color: var(--text-color);
-    font-family: 'Roboto', 'Segoe UI', 'Arial', sans-serif;
-    line-height: 1.6;
-    transition: background-color 0.3s ease, color 0.3s ease;
-    margin: 0;
-    padding: 0;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-
-a {
-    color: var(--primary-color);
-    text-decoration: none;
-    transition: color 0.3s ease;
-}
-
-a:hover {
-    color: #2980b9;
-    text-decoration: underline;
-}
-
-/* Header Styles */
-.main-header {
-    background-color: var(--header-bg);
-    padding: 1rem 0;
-    box-shadow: var(--shadow);
-    position: sticky;
-    top: 0;
-    z-index: 1030; /* Ensure header is above general content but below modals/sidebars if needed */
-    transition: background-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-/* MODIFIED: Header Container Layout */
-.header-container {
-    display: flex;
-    align-items: center;
-    /* Removed justify-content: space-between; to accommodate burger */
-}
-
-/* NEW: Burger Menu Button */
-.burger-menu-button {
-    background: none;
-    border: none;
-    font-size: 1.8rem; /* Match site title size */
-    color: var(--text-color);
-    cursor: pointer;
-    padding: 0.5rem;
-    margin-right: 1rem; /* Space between burger and title */
-    line-height: 1;
-    transition: color 0.3s ease;
-}
-
-.burger-menu-button:hover {
-    color: var(--primary-color);
-}
-
-/* MODIFIED: Site Title Layout */
-.site-title {
-    flex-grow: 1; /* Allow title to take available space */
-    text-align: center; /* Center title between burger and actions */
-    font-size: 1.8rem;
-    font-weight: bold;
-    margin: 0; /* Remove default margins */
-}
-
-.site-title a {
-    color: var(--text-color);
-    text-decoration: none;
-}
-
-/* Header Actions (Theme toggle, Admin) - Ensure they stay aligned */
-.header-actions {
-    display: flex;
-    align-items: center;
-    margin-left: 1rem; /* Space between title and actions */
-}
-
-
-/* Theme Toggle */
-.theme-toggle {
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--text-color);
-    font-size: 1.5rem;
-    padding: 0.5rem;
-    transition: color 0.3s ease, transform 0.3s ease;
-}
-
-.theme-toggle:hover {
-    color: var(--primary-color);
-    transform: rotate(15deg);
-}
-
-/* Main Content */
-.main-content {
-    flex: 1;
-    padding: 2rem 0; /* Maintain padding for content area */
-    /* Removed container adjustments, rely on bootstrap's container inside */
-}
-
-
-/* --- NEW: Sidebar Styles --- */
-
-/* Sidebar Overlay */
-.sidebar-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
-    z-index: 1040; /* Below sidebars, above content */
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
-}
-
-.sidebar-overlay.active {
-    opacity: 1;
-    visibility: visible;
-}
-
-/* Sidebar Base Styles */
-.sidebar {
-    position: fixed;
-    top: 0;
-    left: 0; /* Both sidebars originate from the left */
-    width: 300px; /* Default width, adjust as needed */
-    height: 100%;
-    background-color: var(--sidebar-bg); /* Use theme variable */
-    box-shadow: var(--shadow);
-    z-index: 1050; /* Above overlay */
-    display: flex;
-    flex-direction: column;
-    transform: translateX(-100%); /* Initially hidden off-screen to the left */
-    transition: transform 0.3s ease-in-out;
-    border-right: 1px solid var(--sidebar-border); /* Use theme variable */
-}
-
-.sidebar.active {
-    transform: translateX(0); /* Slide in from the left */
-}
-
-/* Sidebar Header */
-.sidebar-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid var(--sidebar-border); /* Use theme variable */
-    background-color: var(--header-bg); /* Optional: Match header background */
-    flex-shrink: 0; /* Prevent header from shrinking */
-}
-
-.sidebar-header h4 {
-    margin: 0;
-    font-size: 1.2rem;
-    font-weight: 600;
-    flex-grow: 1; /* Allow title to take space */
-    margin-left: 10px; /* Space after back button if present */
-    overflow: hidden; /* Prevent long titles from breaking layout */
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-/* Sidebar Back and Close Buttons */
-.sidebar-back-button,
-.close-sidebar-btn {
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    color: var(--muted-color);
-    cursor: pointer;
-    padding: 0.25rem;
-    line-height: 1;
-    transition: color 0.2s ease;
-}
-.sidebar-back-button:hover,
-.close-sidebar-btn:hover {
-    color: var(--text-color);
-}
-
-/* Sidebar List (Matières & Sous-catégories) */
-.sidebar-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    flex-grow: 1; /* Take remaining vertical space */
-    overflow-y: auto; /* Enable vertical scrolling for long lists */
-    overflow-x: hidden; /* Prevent horizontal scrollbars */
-}
-
-.sidebar-list li {
-    padding: 0.8rem 1.5rem;
-    cursor: pointer;
-    border-bottom: 1px solid var(--sidebar-border); /* Use theme variable */
-    transition: background-color 0.2s ease;
-    display: flex;
-    justify-content: space-between; /* Push icon to the right */
-    align-items: center;
-    white-space: nowrap; /* Prevent text wrapping */
-}
-
-.sidebar-list li:last-child {
-    border-bottom: none; /* Remove border from last item */
-}
-
-.sidebar-list li:hover {
-    background-color: var(--sidebar-hover-bg); /* Use theme variable */
-}
-
-.sidebar-list li i.fa-chevron-right,
-.sidebar-list li i.fa-arrow-left { /* Style for icons inside list items */
-    color: var(--muted-color);
-    font-size: 0.9em;
-    margin-left: 0.5rem; /* Space between text and icon */
-}
-
-/* Optional: Style for active/selected item in sidebar */
-.sidebar-list li.active {
-    background-color: var(--primary-color);
-    color: white;
-}
-.sidebar-list li.active i { /* Make icon white too */
-    color: white;
-}
-
-
-/* --- End of Sidebar Styles --- */
-
-
-/* NEW: Initial Instructions Area */
-.initial-instructions {
-    background-color: var(--card-bg);
-    padding: 2rem;
-    border-radius: 8px;
-    box-shadow: var(--shadow);
-    border: 1px solid var(--border-color);
-    margin-top: 2rem; /* Adjust as needed */
-    text-align: center; /* Center content */
-}
-
-/* --- Original Styles (with minor adjustments if needed) --- */
-
-/* Flash Messages Container */
-.flash-container {
-    position: relative; /* Keep in normal flow */
-    z-index: 100; /* Below header but above main content */
-}
-
-/* Subject Selection Cards (Original - No longer used on index, but might be elsewhere) */
-.subject-card {
-    background-color: var(--card-bg);
-    border-radius: 8px;
-    padding: 1.5rem;
-    margin-bottom: 1.5rem;
-    box-shadow: var(--shadow);
-    transition: box-shadow 0.3s ease, transform 0.3s ease;
-    cursor: pointer;
-}
-
-.subject-card:hover {
-    box-shadow: var(--hover-shadow);
-    transform: translateY(-5px);
-}
-
-.subject-card h3 {
-    margin-top: 0;
-    margin-bottom: 1rem;
-    font-size: 1.5rem;
-    color: var(--text-color);
-}
-
-/* Subject Color-Coding */
-.subject-indicator {
-    width: 100%;
-    height: 8px;
-    border-radius: 4px;
-    margin-bottom: 1rem;
-}
-
-/* Content Blocks Styling (Used in Content Display Section) */
-.content-block {
-    background-color: var(--block-bg);
-    border-radius: 8px;
-    padding: 1.5rem;
-    margin-bottom: 2rem;
-    box-shadow: var(--shadow);
-    border: var(--block-border);
-    transition: box-shadow 0.3s ease;
-    overflow: hidden; /* Prevent content spill */
-    /* border-left: 4px solid transparent; -> Now handled dynamically by JS or remove if not needed */
-}
-
-.content-block:hover {
-    box-shadow: var(--hover-shadow);
-}
-
-.content-block-title {
-    font-size: 1.4rem;
-    font-weight: bold;
-    margin-top: 0;
-    margin-bottom: 1rem;
-    color: var(--text-color);
-    padding-bottom: 0.5rem;
-    border-bottom: 2px solid var(--primary-color); /* Default color, JS might override */
-}
-
-.content-block-content {
-    line-height: 1.7;
-}
-
-/* Image positioning styles */
-.block-with-image {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1.5rem;
-    align-items: flex-start;
-}
-
-.block-with-image.image-left { flex-direction: row; }
-.block-with-image.image-right { flex-direction: row-reverse; }
-.block-with-image.image-top { flex-direction: column; }
-
-.block-image-container {
-    flex: 0 0 auto;
-    max-width: 30%; /* Default max width for side images */
-    margin-bottom: 1rem; /* Spacing below image if wrapped */
-}
-
-.block-with-image.image-top .block-image-container {
-    max-width: 100%; /* Full width for top images */
-    margin-bottom: 1.5rem;
-}
-
-.block-image {
-    width: 100%;
-    height: auto;
-    border-radius: 6px;
-    box-shadow: var(--shadow);
-    display: block; /* Prevent extra space below image */
-}
-
-.block-content-container {
-    flex: 1; /* Take remaining space */
-    min-width: 60%; /* Ensure text has enough space on wider screens */
-}
-
-/* Category Selection UI (Original - No longer used on index) */
-.selection-container {
-    background-color: var(--card-bg);
-    border-radius: 8px;
-    padding: 1.5rem;
-    margin-bottom: 2rem;
-    box-shadow: var(--shadow);
-}
-
-.selection-title {
-    font-size: 1.2rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 1px solid var(--border-color);
-}
-
-.selection-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.selection-item {
-    padding: 0.5rem 0.8rem;
-    margin-bottom: 0.5rem;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.selection-item:hover {
-    background-color: rgba(52, 152, 219, 0.1);
-}
-
-.selection-item.active {
-    background-color: var(--primary-color);
-    color: white;
-}
-
-/* Content Viewer (Container for title and blocks) */
-.content-viewer {
-    background-color: var(--card-bg);
-    border-radius: 8px;
-    padding: 2rem;
-    box-shadow: var(--shadow);
-    margin-bottom: 2rem;
-}
-
-.content-title {
-    font-size: 2rem;
-    margin-top: 0;
-    margin-bottom: 1.5rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 2px solid var(--primary-color); /* Default color, JS might override */
-}
-
-/* Buttons */
-.btn {
-    display: inline-block;
-    font-weight: 500;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
-    user-select: none;
-    border: 1px solid transparent;
-    padding: 0.5rem 1rem;
-    font-size: 1rem;
-    line-height: 1.5;
-    border-radius: 0.25rem;
-    transition: all 0.15s ease-in-out;
-    cursor: pointer;
-}
-
-.btn-primary {
-    background-color: var(--btn-primary-bg);
-    color: var(--btn-primary-text);
-    border-color: var(--btn-primary-bg); /* Added for consistency */
-}
-
-.btn-primary:hover {
-    background-color: #2980b9; /* Darken primary */
-    border-color: #2980b9;
-    color: white;
-}
-
-.btn-secondary {
-    background-color: var(--btn-secondary-bg);
-    color: var(--btn-secondary-text);
-    border-color: var(--btn-secondary-bg); /* Added for consistency */
-}
-
-.btn-secondary:hover {
-    background-color: #5a6268; /* Darken secondary */
-    border-color: #5a6268;
-    color: white;
-}
-
-/* Form Elements */
-input, select, textarea {
-    background-color: var(--input-bg);
-    color: var(--text-color);
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    padding: 0.75rem 1rem;
-    width: 100%;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-input:focus, select:focus, textarea:focus {
-    border-color: var(--primary-color);
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
-}
-
-label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-}
-
-.form-group {
-    margin-bottom: 1.5rem;
-}
-
-/* Footer */
-.main-footer {
-    background-color: var(--footer-bg);
-    padding: 2rem 0;
-    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
-    margin-top: auto; /* Push footer to bottom */
-    flex-shrink: 0; /* Prevent footer from shrinking */
-}
-
-.footer-content {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 1rem; /* Add gap for wrapping */
-}
-
-.footer-links {
-    list-style: none;
-    padding: 0;
-    margin: 0; /* Reset margin */
-    display: flex;
-    flex-wrap: wrap; /* Allow links to wrap */
-    gap: 1.5rem;
-}
-
-.feedback-form {
-    margin-top: 1rem;
-    max-width: 400px; /* Limit width of feedback form */
-}
-
-.feedback-title {
-    font-size: 1.2rem;
-    margin-bottom: 0.75rem;
-}
-
-/* Admin specific styles (Keep if used on other pages) */
-.admin-container { /* ... Keep original ... */ }
-.admin-title { /* ... Keep original ... */ }
-.admin-sidebar { /* ... Keep original ... */ }
-.admin-nav { /* ... Keep original ... */ }
-.admin-nav-item { /* ... Keep original ... */ }
-.admin-nav-link { /* ... Keep original ... */ }
-.admin-nav-link i { /* ... Keep original ... */ }
-.admin-card { /* ... Keep original ... */ }
-.admin-card-title { /* ... Keep original ... */ }
-.admin-stat { /* ... Keep original ... */ }
-
-/* Editor styles (Keep if used on other pages) */
-.editor-container { /* ... Keep original ... */ }
-.block-editor { /* ... Keep original ... */ }
-.block-editor-header { /* ... Keep original ... */ }
-.block-editor-title { /* ... Keep original ... */ }
-.block-editor-actions { /* ... Keep original ... */ }
-.block-handle { /* ... Keep original ... */ }
-.image-preview { /* ... Keep original ... */ }
-.image-gallery { /* ... Keep original ... */ }
-.gallery-item { /* ... Keep original ... */ }
-.gallery-image { /* ... Keep original ... */ }
-.gallery-image-select { /* ... Keep original ... */ }
-
-/* Login screen (Keep if used) */
-.login-container { /* ... Keep original ... */ }
-.login-logo { /* ... Keep original ... */ }
-.login-title { /* ... Keep original ... */ }
-
-/* Responsive design adjustments */
-@media (max-width: 992px) {
-    /* No change needed here if using Bootstrap's container correctly */
-}
-
-@media (max-width: 768px) {
-    /* Content Block Images: Stack vertically */
-    .block-with-image {
-        flex-direction: column !important; /* Force column layout */
-    }
-    .block-image-container {
-        max-width: 100%; /* Image takes full width */
-        margin-bottom: 1.5rem; /* Space below image */
-    }
-    .block-content-container {
-        min-width: 100%; /* Text takes full width */
-    }
-
-    /* Sidebar width adjustment */
-    .sidebar {
-        width: 85%; /* Make sidebar wider on mobile */
-        max-width: 320px; /* Optional: Set a max width */
-    }
-
-    /* Optional: Adjust header layout on smaller screens */
-    .site-title {
-        font-size: 1.5rem; /* Slightly smaller title */
-        text-align: left; /* Align title next to burger */
-        margin-left: 0.5rem; /* Adjust spacing */
-    }
-
-    .header-actions {
-        margin-left: auto; /* Push actions to the right */
-    }
-}
-
-
-@media (max-width: 576px) {
-    .subject-card { /* Style for cards if used elsewhere */
-        padding: 1rem;
-    }
-
-    .content-viewer {
-        padding: 1.5rem; /* Less padding inside content area */
-    }
-
-    .admin-container {
-        padding: 1.5rem;
-    }
-
-    .content-title {
-        font-size: 1.6rem; /* Smaller main title */
-    }
-
-    .footer-content {
-        flex-direction: column; /* Stack footer sections */
-        align-items: center;
-        text-align: center;
-    }
-    .footer-links {
-        justify-content: center; /* Center footer links */
-        margin-top: 0.5rem;
-    }
-    .feedback-form {
-        width: 100%; /* Full width feedback form */
-        margin-top: 1.5rem;
-    }
-}
-
-/* Animation keyframes (Keep original) */
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-.fade-in {
-    animation: fadeIn 0.5s ease-in forwards; /* Added forwards to keep state */
-}
-
-@keyframes slideInUp {
-    from {
-        transform: translateY(50px);
-        opacity: 0;
-    }
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-.slide-in-up {
-    animation: slideInUp 0.5s ease-out forwards; /* Added forwards */
-}
-
-/* Utility classes (Keep original) */
-.text-center { text-align: center; }
-.mb-1 { margin-bottom: 0.5rem !important; }
-.mb-2 { margin-bottom: 1rem !important; }
-.mb-3 { margin-bottom: 1.5rem !important; }
-.mb-4 { margin-bottom: 2rem !important; }
-.mt-1 { margin-top: 0.5rem !important; }
-.mt-2 { margin-top: 1rem !important; }
-.mt-3 { margin-top: 1.5rem !important; }
-.mt-4 { margin-top: 2rem !important; }
-.ms-2 { margin-left: 0.5rem !important; } /* Bootstrap utility */
-.float-end { float: right !important; } /* Bootstrap utility */
-.d-none { display: none !important; } /* Bootstrap utility */
-
-
-/* Alert Styles (Keep original) */
-.alert {
-    padding: 1rem;
-    margin-bottom: 1rem;
-    border-radius: 4px;
-    border: 1px solid transparent; /* Base border */
-}
-
-.alert-dismissible .btn-close {
-    padding: 1.25rem 1rem; /* Adjust close button padding */
-}
-
-.alert-success {
-    color: #0f5132;
-    background-color: #d1e7dd;
-    border-color: #badbcc;
-}
-[data-theme="dark"] .alert-success {
-    color: #75b798;
-    background-color: #192c23;
-    border-color: #254134;
-}
-
-.alert-danger {
-    color: #842029;
-    background-color: #f8d7da;
-    border-color: #f5c2c7;
-}
-[data-theme="dark"] .alert-danger {
-    color: #ea868f;
-    background-color: #341a1d;
-    border-color: #50272c;
-}
-
-.alert-warning {
-    color: #664d03;
-    background-color: #fff3cd;
-    border-color: #ffecb5;
-}
-[data-theme="dark"] .alert-warning {
-    color: #ffda6a;
-    background-color: #33270a;
-    border-color: #4d3b0f;
-}
-
-.alert-info {
-    color: #055160;
-    background-color: #cff4fc;
-    border-color: #b6effb;
-}
-[data-theme="dark"] .alert-info {
-    color: #6edff6;
-    background-color: #0f2d36;
-    border-color: #164350;
-}

api/static/js/admin.js

@@ -1,676 +0,0 @@
-// Admin JavaScript for the backend management interface
-
-document.addEventListener('DOMContentLoaded', function() {
-    // Initialize theme
-    initTheme();
-    
-    // Setup dashboard functionality
-    setupDashboardCards();
-    
-    // Setup admin forms
-    setupMatiereForm();
-    setupSousCategorieForm();
-    setupTexteForm();
-    
-    // Setup content block editor
-    setupContentBlockEditor();
-    
-    // Setup image management
-    setupImageUploader();
-    setupImageGallery();
-    
-    // Setup theme toggle
-    setupThemeToggle();
-});
-
-// Initialize theme based on user preference
-function initTheme() {
-    const userPreference = localStorage.getItem('theme') || 'light';
-    document.documentElement.setAttribute('data-theme', userPreference);
-    
-    // Update theme icon
-    updateThemeIcon(userPreference);
-}
-
-// Setup theme toggle functionality
-function setupThemeToggle() {
-    const themeToggle = document.getElementById('theme-toggle');
-    if (!themeToggle) return;
-    
-    themeToggle.addEventListener('click', function() {
-        const currentTheme = document.documentElement.getAttribute('data-theme');
-        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-        
-        // Update theme attribute
-        document.documentElement.setAttribute('data-theme', newTheme);
-        
-        // Save preference to localStorage
-        localStorage.setItem('theme', newTheme);
-        
-        // Update icon
-        updateThemeIcon(newTheme);
-        
-        // Send theme preference to server
-        saveThemePreference(newTheme);
-    });
-}
-
-// Update the theme toggle icon based on current theme
-function updateThemeIcon(theme) {
-    const themeToggle = document.getElementById('theme-toggle');
-    if (!themeToggle) return;
-    
-    // Update icon based on theme
-    if (theme === 'dark') {
-        themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
-        themeToggle.setAttribute('title', 'Activer le mode clair');
-    } else {
-        themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
-        themeToggle.setAttribute('title', 'Activer le mode sombre');
-    }
-}
-
-// Save theme preference to server
-function saveThemePreference(theme) {
-    const formData = new FormData();
-    formData.append('theme', theme);
-    
-    fetch('/set_theme', {
-        method: 'POST',
-        body: formData
-    })
-    .then(response => response.json())
-    .then(data => {
-        console.log('Theme preference saved:', data);
-    })
-    .catch(error => {
-        console.error('Error saving theme preference:', error);
-    });
-}
-
-// Setup dashboard cards with hover effects
-function setupDashboardCards() {
-    const dashboardCards = document.querySelectorAll('.admin-card');
-    
-    dashboardCards.forEach(card => {
-        card.addEventListener('mouseenter', function() {
-            this.style.transform = 'translateY(-5px)';
-            this.style.boxShadow = 'var(--hover-shadow)';
-            this.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
-        });
-        
-        card.addEventListener('mouseleave', function() {
-            this.style.transform = 'translateY(0)';
-            this.style.boxShadow = 'var(--shadow)';
-        });
-    });
-}
-
-// Setup matiere form functionality
-function setupMatiereForm() {
-    // Show edit form when edit button is clicked
-    const editButtons = document.querySelectorAll('.edit-matiere-btn');
-    editButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            const matiereId = this.getAttribute('data-id');
-            const matiereName = this.getAttribute('data-name');
-            const matiereColor = this.getAttribute('data-color');
-            
-            const editForm = document.getElementById('edit-matiere-form');
-            if (editForm) {
-                const idInput = editForm.querySelector('input[name="matiere_id"]');
-                const nameInput = editForm.querySelector('input[name="nom"]');
-                const colorInput = editForm.querySelector('input[name="color_code"]');
-                
-                idInput.value = matiereId;
-                nameInput.value = matiereName;
-                colorInput.value = matiereColor;
-                
-                // Show the edit form
-                document.getElementById('add-matiere-section').classList.add('d-none');
-                document.getElementById('edit-matiere-section').classList.remove('d-none');
-                
-                // Scroll to edit form
-                editForm.scrollIntoView({ behavior: 'smooth' });
-            }
-        });
-    });
-    
-    // Cancel edit button
-    const cancelEditButton = document.getElementById('cancel-edit-matiere');
-    if (cancelEditButton) {
-        cancelEditButton.addEventListener('click', function(e) {
-            e.preventDefault();
-            document.getElementById('add-matiere-section').classList.remove('d-none');
-            document.getElementById('edit-matiere-section').classList.add('d-none');
-        });
-    }
-    
-    // Color picker preview
-    const colorPickers = document.querySelectorAll('input[type="color"]');
-    colorPickers.forEach(picker => {
-        picker.addEventListener('input', function() {
-            // Find adjacent preview element or create one
-            let preview = this.nextElementSibling;
-            if (!preview || !preview.classList.contains('color-preview')) {
-                preview = document.createElement('span');
-                preview.className = 'color-preview';
-                preview.style.display = 'inline-block';
-                preview.style.width = '24px';
-                preview.style.height = '24px';
-                preview.style.borderRadius = '50%';
-                preview.style.marginLeft = '10px';
-                this.parentNode.insertBefore(preview, this.nextSibling);
-            }
-            
-            preview.style.backgroundColor = this.value;
-        });
-        
-        // Trigger once to initialize
-        const event = new Event('input');
-        picker.dispatchEvent(event);
-    });
-}
-
-// Setup sous categorie form functionality
-function setupSousCategorieForm() {
-    // Show edit form when edit button is clicked
-    const editButtons = document.querySelectorAll('.edit-sous-categorie-btn');
-    editButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            const sousCategorieId = this.getAttribute('data-id');
-            const sousCategorieName = this.getAttribute('data-name');
-            const matiereId = this.getAttribute('data-matiere-id');
-            
-            const editForm = document.getElementById('edit-sous-categorie-form');
-            if (editForm) {
-                const idInput = editForm.querySelector('input[name="sous_categorie_id"]');
-                const nameInput = editForm.querySelector('input[name="nom"]');
-                const matiereSelect = editForm.querySelector('select[name="matiere_id"]');
-                
-                idInput.value = sousCategorieId;
-                nameInput.value = sousCategorieName;
-                matiereSelect.value = matiereId;
-                
-                // Show the edit form
-                document.getElementById('add-sous-categorie-section').classList.add('d-none');
-                document.getElementById('edit-sous-categorie-section').classList.remove('d-none');
-                
-                // Scroll to edit form
-                editForm.scrollIntoView({ behavior: 'smooth' });
-            }
-        });
-    });
-    
-    // Cancel edit button
-    const cancelEditButton = document.getElementById('cancel-edit-sous-categorie');
-    if (cancelEditButton) {
-        cancelEditButton.addEventListener('click', function(e) {
-            e.preventDefault();
-            document.getElementById('add-sous-categorie-section').classList.remove('d-none');
-            document.getElementById('edit-sous-categorie-section').classList.add('d-none');
-        });
-    }
-    
-    // Matiere select filter
-    const matiereFilterSelect = document.getElementById('matiere-filter');
-    if (matiereFilterSelect) {
-        matiereFilterSelect.addEventListener('change', function() {
-            const selectedMatiereId = this.value;
-            const sousCategorieRows = document.querySelectorAll('.sous-categorie-row');
-            
-            sousCategorieRows.forEach(row => {
-                if (selectedMatiereId === '' || row.getAttribute('data-matiere-id') === selectedMatiereId) {
-                    row.style.display = '';
-                } else {
-                    row.style.display = 'none';
-                }
-            });
-        });
-    }
-}
-
-// Setup texte form functionality
-function setupTexteForm() {
-    // Matiere select change - populate sous-categories
-    const matiereSelect = document.getElementById('matiere-select');
-    if (matiereSelect) {
-        matiereSelect.addEventListener('change', function() {
-            const matiereId = this.value;
-            const sousCategorieSelect = document.getElementById('sous-categorie-select');
-            
-            if (matiereId && sousCategorieSelect) {
-                // Clear current options
-                sousCategorieSelect.innerHTML = '<option value="">Sélectionnez une sous-catégorie</option>';
-                
-                // Fetch sous-categories for the selected matiere
-                fetch(`/get_sous_categories/${matiereId}`)
-                    .then(response => response.json())
-                    .then(data => {
-                        data.forEach(sousCategorie => {
-                            const option = document.createElement('option');
-                            option.value = sousCategorie.id;
-                            option.textContent = sousCategorie.nom;
-                            sousCategorieSelect.appendChild(option);
-                        });
-                    })
-                    .catch(error => {
-                        console.error('Error loading sous-categories:', error);
-                    });
-            }
-        });
-    }
-}
-
-// Setup content block editor
-function setupContentBlockEditor() {
-    const blocksContainer = document.getElementById('blocks-container');
-    const addBlockButton = document.getElementById('add-block-button');
-    const saveBlocksButton = document.getElementById('save-blocks-button');
-    
-    if (!blocksContainer) return;
-    
-    // Add new block
-    if (addBlockButton) {
-        addBlockButton.addEventListener('click', function() {
-            addContentBlock();
-        });
-    }
-    
-    // Make blocks sortable
-    if (window.Sortable) {
-        new Sortable(blocksContainer, {
-            animation: 150,
-            handle: '.block-handle',
-            ghostClass: 'block-ghost',
-            onEnd: function() {
-                // Update order numbers
-                updateBlockOrder();
-            }
-        });
-    }
-    
-    // Save blocks
-    if (saveBlocksButton) {
-        saveBlocksButton.addEventListener('click', function() {
-            saveContentBlocks();
-        });
-    }
-    
-    // Add event listeners for existing blocks
-    setupExistingBlockControls();
-}
-
-// Setup controls for existing blocks
-function setupExistingBlockControls() {
-    // Setup delete buttons
-    const deleteButtons = document.querySelectorAll('.delete-block-btn');
-    deleteButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            if (confirm('Êtes-vous sûr de vouloir supprimer ce bloc ?')) {
-                const blockEditor = this.closest('.block-editor');
-                blockEditor.remove();
-                updateBlockOrder();
-            }
-        });
-    });
-    
-    // Setup image position selects
-    const positionSelects = document.querySelectorAll('.image-position-select');
-    positionSelects.forEach(select => {
-        select.addEventListener('change', function() {
-            updateBlockImagePreview(this.closest('.block-editor'));
-        });
-    });
-    
-    // Setup image selection buttons
-    const imageSelectButtons = document.querySelectorAll('.select-image-btn');
-    imageSelectButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            const blockEditor = this.closest('.block-editor');
-            const galleryModal = document.getElementById('image-gallery-modal');
-            
-            if (galleryModal) {
-                // Set current block ID as data attribute for the modal
-                galleryModal.setAttribute('data-target-block', blockEditor.getAttribute('data-block-id'));
-                
-                // Show the modal
-                const modal = new bootstrap.Modal(galleryModal);
-                modal.show();
-            }
-        });
-    });
-    
-    // Setup image remove buttons
-    const removeImageButtons = document.querySelectorAll('.remove-image-btn');
-    removeImageButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            const blockEditor = this.closest('.block-editor');
-            const imageIdInput = blockEditor.querySelector('.block-image-id');
-            const imagePreview = blockEditor.querySelector('.image-preview');
-            
-            if (imageIdInput) {
-                imageIdInput.value = '';
-            }
-            
-            if (imagePreview) {
-                imagePreview.src = '';
-                imagePreview.style.display = 'none';
-            }
-            
-            // Hide remove button
-            this.style.display = 'none';
-            
-            // Show select button
-            const selectButton = blockEditor.querySelector('.select-image-btn');
-            if (selectButton) {
-                selectButton.style.display = 'inline-block';
-            }
-        });
-    });
-}
-
-// Add a new content block to the editor
-function addContentBlock(data = null) {
-    const blocksContainer = document.getElementById('blocks-container');
-    if (!blocksContainer) return;
-    
-    // Generate a unique ID for the block
-    const blockId = 'block-' + Date.now();
-    
-    // Create block HTML
-    const blockHtml = `
-        <div class="block-editor" data-block-id="${blockId}">
-            <div class="block-editor-header">
-                <div class="d-flex align-items-center">
-                    <span class="block-handle"><i class="fas fa-grip-vertical"></i></span>
-                    <h3 class="block-editor-title">Bloc #${blocksContainer.children.length + 1}</h3>
-                </div>
-                <div class="block-editor-actions">
-                    <button type="button" class="btn btn-danger btn-sm delete-block-btn">
-                        <i class="fas fa-trash"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="form-group">
-                <label for="${blockId}-title">Titre du bloc (optionnel)</label>
-                <input type="text" class="form-control block-title" id="${blockId}-title" value="${data?.title || ''}">
-            </div>
-            <div class="form-group">
-                <label for="${blockId}-content">Contenu du bloc</label>
-                <textarea class="form-control block-content" id="${blockId}-content" rows="5">${data?.content || ''}</textarea>
-            </div>
-            <div class="form-group">
-                <label>Image</label>
-                <div class="d-flex align-items-center mb-2">
-                    <button type="button" class="btn btn-primary btn-sm select-image-btn" style="${data?.image ? 'display:none;' : ''}">
-                        <i class="fas fa-image"></i> Sélectionner une image
-                    </button>
-                    <button type="button" class="btn btn-warning btn-sm remove-image-btn ml-2" style="${data?.image ? '' : 'display:none;'}">
-                        <i class="fas fa-times"></i> Retirer l'image
-                    </button>
-                </div>
-                <input type="hidden" class="block-image-id" value="${data?.image?.id || ''}">
-                <img src="${data?.image?.src || ''}" alt="Preview" class="image-preview mb-2" style="${data?.image ? '' : 'display:none;'}">
-                <div class="form-group">
-                    <label for="${blockId}-image-position">Position de l'image</label>
-                    <select class="form-control image-position-select" id="${blockId}-image-position">
-                        <option value="left" ${data?.image_position === 'left' ? 'selected' : ''}>Gauche</option>
-                        <option value="right" ${data?.image_position === 'right' ? 'selected' : ''}>Droite</option>
-                        <option value="top" ${data?.image_position === 'top' ? 'selected' : ''}>Haut</option>
-                    </select>
-                </div>
-            </div>
-        </div>
-    `;
-    
-    // Add the block to the container
-    blocksContainer.insertAdjacentHTML('beforeend', blockHtml);
-    
-    // Setup event listeners for the new block
-    const newBlock = blocksContainer.lastElementChild;
-    
-    // Delete button
-    const deleteButton = newBlock.querySelector('.delete-block-btn');
-    if (deleteButton) {
-        deleteButton.addEventListener('click', function() {
-            if (confirm('Êtes-vous sûr de vouloir supprimer ce bloc ?')) {
-                newBlock.remove();
-                updateBlockOrder();
-            }
-        });
-    }
-    
-    // Image position select
-    const positionSelect = newBlock.querySelector('.image-position-select');
-    if (positionSelect) {
-        positionSelect.addEventListener('change', function() {
-            updateBlockImagePreview(newBlock);
-        });
-    }
-    
-    // Image selection button
-    const imageSelectButton = newBlock.querySelector('.select-image-btn');
-    if (imageSelectButton) {
-        imageSelectButton.addEventListener('click', function() {
-            const galleryModal = document.getElementById('image-gallery-modal');
-            
-            if (galleryModal) {
-                // Set current block ID as data attribute for the modal
-                galleryModal.setAttribute('data-target-block', blockId);
-                
-                // Show the modal
-                const modal = new bootstrap.Modal(galleryModal);
-                modal.show();
-            }
-        });
-    }
-    
-    // Image remove button
-    const removeImageButton = newBlock.querySelector('.remove-image-btn');
-    if (removeImageButton) {
-        removeImageButton.addEventListener('click', function() {
-            const imageIdInput = newBlock.querySelector('.block-image-id');
-            const imagePreview = newBlock.querySelector('.image-preview');
-            
-            if (imageIdInput) {
-                imageIdInput.value = '';
-            }
-            
-            if (imagePreview) {
-                imagePreview.src = '';
-                imagePreview.style.display = 'none';
-            }
-            
-            // Hide remove button
-            removeImageButton.style.display = 'none';
-            
-            // Show select button
-            if (imageSelectButton) {
-                imageSelectButton.style.display = 'inline-block';
-            }
-        });
-    }
-    
-    // Scroll to the new block
-    newBlock.scrollIntoView({ behavior: 'smooth' });
-}
-
-// Update block order numbers in the UI
-function updateBlockOrder() {
-    const blocks = document.querySelectorAll('.block-editor');
-    blocks.forEach((block, index) => {
-        const titleEl = block.querySelector('.block-editor-title');
-        if (titleEl) {
-            titleEl.textContent = `Bloc #${index + 1}`;
-        }
-    });
-}
-
-// Update image preview based on position
-function updateBlockImagePreview(blockEditor) {
-    // This function would apply CSS classes to show how the image position 
-    // will look in the frontend
-    const positionSelect = blockEditor.querySelector('.image-position-select');
-    const imagePreview = blockEditor.querySelector('.image-preview');
-    
-    if (!positionSelect || !imagePreview || imagePreview.style.display === 'none') {
-        return;
-    }
-    
-    const position = positionSelect.value;
-    
-    // Remove existing position classes
-    imagePreview.classList.remove('position-left', 'position-right', 'position-top');
-    
-    // Add the selected position class
-    imagePreview.classList.add(`position-${position}`);
-    
-    // Apply some simple styling to demonstrate the position
-    switch (position) {
-        case 'left':
-            imagePreview.style.float = 'left';
-            imagePreview.style.marginRight = '15px';
-            imagePreview.style.marginBottom = '10px';
-            imagePreview.style.width = '30%';
-            break;
-        case 'right':
-            imagePreview.style.float = 'right';
-            imagePreview.style.marginLeft = '15px';
-            imagePreview.style.marginBottom = '10px';
-            imagePreview.style.width = '30%';
-            break;
-        case 'top':
-            imagePreview.style.float = 'none';
-            imagePreview.style.marginRight = '0';
-            imagePreview.style.marginLeft = '0';
-            imagePreview.style.marginBottom = '15px';
-            imagePreview.style.width = '100%';
-            break;
-    }
-}
-
-// Save content blocks
-function saveContentBlocks() {
-    const blocksContainer = document.getElementById('blocks-container');
-    const blocksDataInput = document.getElementById('blocks-data');
-    
-    if (!blocksContainer || !blocksDataInput) return;
-    
-    const blocks = blocksContainer.querySelectorAll('.block-editor');
-    const blocksData = [];
-    
-    blocks.forEach((block, index) => {
-        const blockId = block.getAttribute('data-block-id');
-        const title = block.querySelector('.block-title').value;
-        const content = block.querySelector('.block-content').value;
-        const imageId = block.querySelector('.block-image-id').value;
-        const imagePosition = block.querySelector('.image-position-select').value;
-        
-        blocksData.push({
-            id: blockId,
-            title: title,
-            content: content,
-            image_id: imageId,
-            image_position: imagePosition,
-            order: index
-        });
-    });
-    
-    // Set the blocks data as JSON in the hidden input
-    blocksDataInput.value = JSON.stringify(blocksData);
-    
-    // Submit the form
-    const form = document.getElementById('blocks-form');
-    if (form) {
-        form.submit();
-    }
-}
-
-// Setup image uploader
-function setupImageUploader() {
-    const imageUploadForm = document.getElementById('image-upload-form');
-    const imageFileInput = document.getElementById('image-file');
-    const imagePreview = document.getElementById('upload-image-preview');
-    
-    if (imageFileInput && imagePreview) {
-        imageFileInput.addEventListener('change', function() {
-            if (this.files && this.files[0]) {
-                const reader = new FileReader();
-                
-                reader.onload = function(e) {
-                    imagePreview.src = e.target.result;
-                    imagePreview.style.display = 'block';
-                };
-                
-                reader.readAsDataURL(this.files[0]);
-            }
-        });
-    }
-    
-    if (imageUploadForm) {
-        imageUploadForm.addEventListener('submit', function(e) {
-            const fileInput = this.querySelector('#image-file');
-            
-            if (!fileInput.files || fileInput.files.length === 0) {
-                e.preventDefault();
-                alert('Veuillez sélectionner une image.');
-            }
-        });
-    }
-}
-
-// Setup image gallery
-function setupImageGallery() {
-    // Handle image selection from gallery
-    const galleryItems = document.querySelectorAll('.gallery-item');
-    
-    galleryItems.forEach(item => {
-        item.addEventListener('click', function() {
-            const imageId = this.getAttribute('data-image-id');
-            const imageSrc = this.querySelector('img').src;
-            const galleryModal = document.getElementById('image-gallery-modal');
-            
-            if (galleryModal) {
-                const targetBlockId = galleryModal.getAttribute('data-target-block');
-                const blockEditor = document.querySelector(`.block-editor[data-block-id="${targetBlockId}"]`);
-                
-                if (blockEditor) {
-                    // Update the image ID input
-                    const imageIdInput = blockEditor.querySelector('.block-image-id');
-                    if (imageIdInput) {
-                        imageIdInput.value = imageId;
-                    }
-                    
-                    // Update the image preview
-                    const imagePreview = blockEditor.querySelector('.image-preview');
-                    if (imagePreview) {
-                        imagePreview.src = imageSrc;
-                        imagePreview.style.display = 'block';
-                    }
-                    
-                    // Hide select button and show remove button
-                    const selectButton = blockEditor.querySelector('.select-image-btn');
-                    const removeButton = blockEditor.querySelector('.remove-image-btn');
-                    
-                    if (selectButton) {
-                        selectButton.style.display = 'none';
-                    }
-                    
-                    if (removeButton) {
-                        removeButton.style.display = 'inline-block';
-                    }
-                    
-                    // Update image preview position
-                    updateBlockImagePreview(blockEditor);
-                }
-                
-                // Close the modal
-                const modal = bootstrap.Modal.getInstance(galleryModal);
-                if (modal) {
-                    modal.hide();
-                }
-            }
-        });
-    });
-}

api/static/js/main.js

@@ -1,517 +0,0 @@
-// ==================================================================
-// Main application JavaScript for the frontend
-// Handles theme switching, sidebar navigation, and content display.
-// ==================================================================
-
-// Wait for the DOM to be fully loaded before executing scripts
-document.addEventListener('DOMContentLoaded', function() {
-
-    // 1. Initialize Theme (Dark/Light Mode)
-    initTheme();
-    setupThemeToggle();
-
-    // 2. Setup Sidebar Navigation System
-    setupSidebarNavigation();
-
-    // 3. Setup Feedback Form Validation (Basic)
-    setupFeedbackForm();
-
-    // NOTE: Old setup functions for direct page selection are removed/commented out
-    // setupSubjectSelection(); // Replaced by sidebar logic
-    // setupCategorySelection(); // Replaced by sidebar logic
-    // setupTextSelection(); // Replaced by sidebar logic
-});
-
-
-// ==================================================================
-// THEME SWITCHING FUNCTIONS
-// ==================================================================
-
-/**
- * Initializes the theme (dark/light) based on localStorage preference or system default.
- */
-function initTheme() {
-    // Default to 'light' if no preference is found
-    const userPreference = localStorage.getItem('theme') || 'light';
-    document.documentElement.setAttribute('data-theme', userPreference);
-    updateThemeIcon(userPreference); // Set the correct icon on load
-}
-
-/**
- * Sets up the event listener for the theme toggle button.
- */
-function setupThemeToggle() {
-    const themeToggle = document.getElementById('theme-toggle');
-    if (!themeToggle) {
-        console.warn("Theme toggle button (#theme-toggle) not found.");
-        return;
-    }
-
-    themeToggle.addEventListener('click', function() {
-        const currentTheme = document.documentElement.getAttribute('data-theme');
-        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-
-        // Apply the new theme
-        document.documentElement.setAttribute('data-theme', newTheme);
-
-        // Save preference to localStorage
-        localStorage.setItem('theme', newTheme);
-
-        // Update the button icon
-        updateThemeIcon(newTheme);
-
-        // Optional: Send theme preference to the server (if needed)
-        // saveThemePreference(newTheme);
-    });
-}
-
-/**
- * Updates the icon (sun/moon) inside the theme toggle button.
- * @param {string} theme - The current theme ('light' or 'dark').
- */
-function updateThemeIcon(theme) {
-    const themeToggle = document.getElementById('theme-toggle');
-    if (!themeToggle) return; // Exit if button not found
-
-    if (theme === 'dark') {
-        themeToggle.innerHTML = '<i class="fas fa-sun"></i>'; // Show sun icon
-        themeToggle.setAttribute('title', 'Activer le mode clair');
-    } else {
-        themeToggle.innerHTML = '<i class="fas fa-moon"></i>'; // Show moon icon
-        themeToggle.setAttribute('title', 'Activer le mode sombre');
-    }
-}
-
-/**
- * Optional: Sends the chosen theme preference to the server.
- * Uncomment the call in setupThemeToggle if needed.
- * @param {string} theme - The theme to save ('light' or 'dark').
- */
-function saveThemePreference(theme) {
-    const formData = new FormData();
-    formData.append('theme', theme);
-
-    fetch('/set_theme', { // Ensure this endpoint exists in your Flask app
-        method: 'POST',
-        body: formData
-    })
-    .then(response => {
-        if (!response.ok) {
-            console.error(`Error saving theme: ${response.statusText}`);
-            return response.json().catch(() => ({})); // Try to parse error body
-        }
-        return response.json();
-    })
-    .then(data => {
-        console.log('Theme preference saved on server:', data);
-    })
-    .catch(error => {
-        console.error('Error sending theme preference to server:', error);
-    });
-}
-
-
-// ==================================================================
-// SIDEBAR NAVIGATION FUNCTIONS
-// ==================================================================
-
-/**
- * Sets up all event listeners and logic for the sidebar navigation.
- */
-function setupSidebarNavigation() {
-    // Get references to all necessary DOM elements
-    const burgerMenu = document.getElementById('burger-menu');
-    const sidebarMatieres = document.getElementById('sidebar-matieres');
-    const sidebarSousCategories = document.getElementById('sidebar-sous-categories');
-    const sidebarOverlay = document.getElementById('sidebar-overlay');
-    const matieresList = document.getElementById('matieres-list-sidebar');
-    const sousCategoriesList = document.getElementById('sous-categories-list-sidebar');
-    const backButton = document.getElementById('sidebar-back-button');
-    const closeButtons = document.querySelectorAll('.close-sidebar-btn');
-    const initialInstructions = document.getElementById('initial-instructions');
-    const contentSection = document.getElementById('content-section');
-
-    // --- Helper Function to Close All Sidebars ---
-    const closeAllSidebars = () => {
-        if (sidebarMatieres) sidebarMatieres.classList.remove('active');
-        if (sidebarSousCategories) sidebarSousCategories.classList.remove('active');
-        if (sidebarOverlay) sidebarOverlay.classList.remove('active');
-        // Optional: Reset scroll position of lists when closing
-        // if (matieresList) matieresList.scrollTop = 0;
-        // if (sousCategoriesList) sousCategoriesList.scrollTop = 0;
-    };
-
-    // --- Event Listeners ---
-
-    // 1. Open Sidebar 1 (Matières) with Burger Menu
-    if (burgerMenu && sidebarMatieres && sidebarOverlay) {
-        burgerMenu.addEventListener('click', (e) => {
-            e.stopPropagation(); // Prevent immediate closing if overlay listener fires
-            closeAllSidebars(); // Ensure only one sidebar is open initially
-            sidebarMatieres.classList.add('active');
-            sidebarOverlay.classList.add('active');
-        });
-    } else {
-        console.warn("Burger menu, matières sidebar, or overlay not found.");
-    }
-
-    // 2. Close sidebars via Overlay click
-    if (sidebarOverlay) {
-        sidebarOverlay.addEventListener('click', closeAllSidebars);
-    }
-
-    // 3. Close sidebars via dedicated Close buttons (X)
-    closeButtons.forEach(button => {
-        button.addEventListener('click', closeAllSidebars);
-    });
-
-    // 4. Handle click on a Matière in Sidebar 1
-    if (matieresList && sidebarSousCategories && sidebarMatieres) {
-        matieresList.addEventListener('click', (e) => {
-            // Use closest to handle clicks even if icon is clicked
-            const listItem = e.target.closest('li');
-            if (listItem) {
-                const matiereId = listItem.getAttribute('data-matiere-id');
-                const matiereNom = listItem.getAttribute('data-matiere-nom') || 'Inconnu'; // Fallback name
-
-                if (matiereId) {
-                    // Update Sidebar 2 title
-                    const titleElement = document.getElementById('sidebar-sous-categories-title');
-                    if (titleElement) {
-                        titleElement.textContent = `Sous-catégories (${matiereNom})`;
-                    }
-                    // Load sous-categories into Sidebar 2's list
-                    loadSubCategoriesForSidebar(matiereId, sousCategoriesList);
-
-                    // Switch Sidebars: Hide 1, Show 2
-                    sidebarMatieres.classList.remove('active'); // Slide out sidebar 1
-                    sidebarSousCategories.classList.add('active'); // Slide in sidebar 2
-                    // Keep overlay active
-                    if (sidebarOverlay) sidebarOverlay.classList.add('active');
-                }
-            }
-        });
-    } else {
-        console.warn("Matières list, sous-catégories sidebar, or matières sidebar not found.");
-    }
-
-    // 5. Handle click on Back Button in Sidebar 2
-    if (backButton && sidebarMatieres && sidebarSousCategories) {
-        backButton.addEventListener('click', () => {
-            sidebarSousCategories.classList.remove('active'); // Slide out sidebar 2
-            sidebarMatieres.classList.add('active'); // Slide in sidebar 1
-            // Keep overlay active
-            if (sidebarOverlay) sidebarOverlay.classList.add('active');
-        });
-    } else {
-        console.warn("Sidebar back button, matières sidebar, or sous-catégories sidebar not found.");
-    }
-
-    // 6. Handle click on a Sous-catégorie in Sidebar 2
-    if (sousCategoriesList && initialInstructions && contentSection) {
-        sousCategoriesList.addEventListener('click', (e) => {
-            const listItem = e.target.closest('li');
-            if (listItem && listItem.getAttribute('data-category-id')) { // Ensure it's a valid category item
-                const categoryId = listItem.getAttribute('data-category-id');
-
-                // Load and display the content for the first text in this category
-                loadAndDisplayFirstTexte(categoryId);
-
-                // Hide initial instructions, show content section
-                if (initialInstructions) initialInstructions.classList.add('d-none');
-                if (contentSection) contentSection.classList.remove('d-none');
-
-                // Close both sidebars and overlay after selection
-                closeAllSidebars();
-            }
-        });
-    } else {
-        console.warn("Sous-catégories list, initial instructions, or content section not found.");
-    }
-}
-
-/**
- * Fetches and loads subcategories for a given matiereId into the specified list element.
- * @param {string} matiereId - The ID of the selected matière.
- * @param {HTMLElement} listElement - The UL element to populate.
- */
-function loadSubCategoriesForSidebar(matiereId, listElement) {
-    if (!listElement) {
-        console.error("Target list element for subcategories is missing.");
-        return;
-    }
-    listElement.innerHTML = '<li>Chargement...</li>'; // Show loading state
-
-    fetch(`/get_sous_categories/${matiereId}`) // Ensure this endpoint exists in Flask
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}`);
-            }
-            return response.json();
-        })
-        .then(data => {
-            listElement.innerHTML = ''; // Clear loading/previous items
-            if (data && data.length > 0) {
-                data.forEach(category => {
-                    const item = document.createElement('li');
-                    item.setAttribute('data-category-id', category.id);
-                    item.textContent = category.nom; // Use category name
-
-                    // Add chevron icon for visual cue
-                    const icon = document.createElement('i');
-                    icon.className = 'fas fa-chevron-right float-end';
-                    item.appendChild(icon);
-
-                    listElement.appendChild(item);
-                });
-            } else {
-                listElement.innerHTML = '<li>Aucune sous-catégorie trouvée.</li>';
-            }
-        })
-        .catch(error => {
-            console.error('Erreur lors du chargement des sous-catégories:', error);
-            listElement.innerHTML = `<li>Erreur: ${error.message}</li>`;
-        });
-}
-
-/**
- * Fetches the list of texts for a category and displays the first one found.
- * @param {string} categoryId - The ID of the selected sous-catégorie.
- */
-function loadAndDisplayFirstTexte(categoryId) {
-    fetch(`/get_textes/${categoryId}`) // Ensure this endpoint exists and returns a list of texts [{id, titre}, ...]
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}`);
-            }
-            return response.json();
-        })
-        .then(data => {
-            if (data && data.length > 0) {
-                const firstTexteId = data[0].id; // Get the ID of the very first text
-                if (firstTexteId) {
-                    displayTexte(firstTexteId); // Call displayTexte with this ID
-                } else {
-                     throw new Error("Le premier texte reçu n'a pas d'ID.");
-                }
-            } else {
-                // Handle case where a category has no texts associated with it
-                const contentTitle = document.getElementById('content-title');
-                const contentBlocks = document.getElementById('content-blocks');
-                const contentSection = document.getElementById('content-section');
-                if (contentTitle) contentTitle.textContent = "Contenu non disponible";
-                if (contentBlocks) contentBlocks.innerHTML = '<div class="alert alert-info">Aucun texte trouvé pour cette sous-catégorie.</div>';
-                if (contentSection) contentSection.classList.remove('d-none'); // Ensure section is visible
-            }
-        })
-        .catch(error => {
-            console.error('Erreur lors du chargement des textes pour la catégorie:', error);
-            // Display error message in the content area
-            const contentTitle = document.getElementById('content-title');
-            const contentBlocks = document.getElementById('content-blocks');
-            const contentSection = document.getElementById('content-section');
-            if (contentTitle) contentTitle.textContent = "Erreur";
-            if (contentBlocks) contentBlocks.innerHTML = `<div class="alert alert-danger">Impossible de charger le contenu. ${error.message}</div>`;
-            if (contentSection) contentSection.classList.remove('d-none'); // Ensure section is visible
-        });
-}
-
-
-// ==================================================================
-// CONTENT DISPLAY FUNCTION
-// ==================================================================
-
-/**
- * Fetches and displays the content (title and blocks) for a specific texteId.
- * @param {string} texteId - The ID of the text to display.
- */
-function displayTexte(texteId) {
-    const contentSection = document.getElementById('content-section');
-    const contentTitle = document.getElementById('content-title');
-    const contentBlocks = document.getElementById('content-blocks');
-
-    // Check if essential elements exist
-    if (!contentSection || !contentTitle || !contentBlocks) {
-        console.error("Éléments d'affichage du contenu (#content-section, #content-title, #content-blocks) introuvables.");
-        alert("Erreur interne: Impossible d'afficher le contenu.");
-        return;
-    }
-
-    // Indicate loading state visually
-    contentTitle.textContent = "Chargement du contenu...";
-    contentBlocks.innerHTML = '<div class="text-center p-3"><i class="fas fa-spinner fa-spin fa-2x"></i></div>'; // Simple spinner
-
-    fetch(`/get_texte/${texteId}`) // Ensure this endpoint exists and returns detailed text object {titre, contenu, blocks, color_code, ...}
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}`);
-            }
-            return response.json();
-        })
-        .then(data => {
-            // --- Update Content Title ---
-            contentTitle.textContent = data.titre || "Titre non disponible";
-
-            // --- Update Theme/Color Styling ---
-            const dynamicStyleId = 'dynamic-block-styles';
-            let style = document.getElementById(dynamicStyleId);
-            if (!style) { // Create style tag if it doesn't exist
-                style = document.createElement('style');
-                style.id = dynamicStyleId;
-                document.head.appendChild(style);
-            }
-
-            if (data.color_code) {
-                // Apply color to title underline and block border/title
-                contentTitle.style.borderBottomColor = data.color_code;
-                style.textContent = `
-                    #content-section .content-block-title { border-bottom-color: ${data.color_code} !important; }
-                    #content-section .content-block { border-left: 4px solid ${data.color_code} !important; }
-                `;
-            } else {
-                // Reset styles if no color code is provided (use CSS defaults)
-                contentTitle.style.borderBottomColor = ''; // Reset specific style
-                style.textContent = ''; // Clear dynamic rules
-            }
-
-            // --- Render Content Blocks ---
-            contentBlocks.innerHTML = ''; // Clear loading indicator/previous content
-
-            if (data.blocks && Array.isArray(data.blocks) && data.blocks.length > 0) {
-                // Sort blocks by 'order' property if it exists, otherwise render as received
-                const sortedBlocks = data.blocks.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-
-                sortedBlocks.forEach(block => {
-                    const blockDiv = document.createElement('div');
-                    blockDiv.className = 'content-block fade-in'; // Add animation class
-
-                    // Block with Image
-                    if (block.image && block.image.src) {
-                        blockDiv.classList.add('block-with-image', `image-${block.image_position || 'left'}`);
-
-                        // Image Container
-                        const imageDiv = document.createElement('div');
-                        imageDiv.className = 'block-image-container';
-                        const imageEl = document.createElement('img');
-                        imageEl.className = 'block-image';
-                        imageEl.src = block.image.src; // Ensure backend provides full URL if needed
-                        imageEl.alt = block.image.alt || 'Illustration';
-                        imageEl.loading = 'lazy'; // Add lazy loading for images
-                        imageDiv.appendChild(imageEl);
-                        blockDiv.appendChild(imageDiv);
-
-                        // Content Container (Text part)
-                        const contentDiv = document.createElement('div');
-                        contentDiv.className = 'block-content-container';
-                        if (block.title) {
-                            const titleEl = document.createElement('h3');
-                            titleEl.className = 'content-block-title';
-                            titleEl.textContent = block.title;
-                            contentDiv.appendChild(titleEl);
-                        }
-                        const contentEl = document.createElement('div');
-                        contentEl.className = 'content-block-content';
-                        // IMPORTANT: Sanitize HTML content if it comes from user input or untrusted sources
-                        // For now, assuming safe HTML from backend:
-                        contentEl.innerHTML = block.content ? block.content.replace(/\n/g, '<br>') : '';
-                        contentDiv.appendChild(contentEl);
-                        blockDiv.appendChild(contentDiv);
-
-                    } else { // Block without Image
-                        if (block.title) {
-                            const titleEl = document.createElement('h3');
-                            titleEl.className = 'content-block-title';
-                            titleEl.textContent = block.title;
-                            blockDiv.appendChild(titleEl);
-                        }
-                        const contentEl = document.createElement('div');
-                        contentEl.className = 'content-block-content';
-                         // IMPORTANT: Sanitize HTML content
-                        contentEl.innerHTML = block.content ? block.content.replace(/\n/g, '<br>') : '';
-                        blockDiv.appendChild(contentEl);
-                    }
-                    contentBlocks.appendChild(blockDiv);
-                });
-            } else if (data.contenu) { // Fallback: Use simple 'contenu' field if no blocks
-                const blockDiv = document.createElement('div');
-                blockDiv.className = 'content-block';
-                 // IMPORTANT: Sanitize HTML content
-                blockDiv.innerHTML = data.contenu.replace(/\n/g, '<br>');
-                contentBlocks.appendChild(blockDiv);
-            } else {
-                // No blocks and no simple content
-                contentBlocks.innerHTML = '<div class="alert alert-warning">Le contenu de ce texte est vide ou non structuré.</div>';
-            }
-
-            // --- Final Steps ---
-            // Ensure the content section is visible
-            contentSection.classList.remove('d-none');
-
-            // Scroll to the top of the content title for better UX
-            contentTitle.scrollIntoView({ behavior: 'smooth', block: 'start' });
-
-        })
-        .catch(error => {
-            console.error(`Erreur lors du chargement du texte ID ${texteId}:`, error);
-             // Display error message in the content area
-            contentTitle.textContent = "Erreur de chargement";
-            contentBlocks.innerHTML = `<div class="alert alert-danger">Impossible de charger le contenu demandé. ${error.message}</div>`;
-            // Ensure section is visible even on error
-            contentSection.classList.remove('d-none');
-        });
-}
-
-
-// ==================================================================
-// FEEDBACK FORM SETUP
-// ==================================================================
-
-/**
- * Sets up basic validation for the feedback form.
- */
-function setupFeedbackForm() {
-    const feedbackForm = document.getElementById('feedback-form');
-    if (feedbackForm) {
-        feedbackForm.addEventListener('submit', function(e) {
-            const feedbackMessage = document.getElementById('feedback-message');
-            // Simple check if message textarea is empty or only whitespace
-            if (!feedbackMessage || !feedbackMessage.value.trim()) {
-                e.preventDefault(); // Stop form submission
-                alert('Veuillez entrer un message avant d\'envoyer votre avis.');
-                if (feedbackMessage) feedbackMessage.focus(); // Focus the textarea
-            }
-            // Add more complex validation here if needed
-        });
-    }
-}
-
-
-// ==================================================================
-// OLD FUNCTIONS (Removed/Commented Out) - Kept for reference only
-// ==================================================================
-
-/*
-function setupSubjectSelection() { // No longer used directly on page
-    // ... old logic targeting .subject-card elements on the main page ...
-}
-
-function loadSubCategories(matiereId) { // Replaced by loadSubCategoriesForSidebar
-    // ... old logic targeting #sous-categories-list on the main page ...
-}
-
-function setupCategorySelection() { // No longer used directly on page
-    // ... old logic targeting #sous-categorie-select or similar ...
-}
-
-function loadTextes(categoryId) { // Logic integrated into loadAndDisplayFirstTexte
-    // ... old logic targeting #textes-list on the main page ...
-}
-
-function setupTextSelection() { // No longer used directly on page
-    // ... old logic targeting #texte-select or similar ...
-}
-*/
-
-// ==================================================================
-// END OF FILE
-// ==================================================================

api/templates/admin/dashboard.html

@@ -1,148 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Tableau de bord - Administration{% endblock %}
-
-{% block styles %}
-<style>
-    .dashboard-stats {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-        gap: 1.5rem;
-        margin-bottom: 2rem;
-    }
-    
-    .recent-activity {
-        background-color: var(--card-bg);
-        border-radius: 8px;
-        padding: 1.5rem;
-        box-shadow: var(--shadow);
-    }
-    
-    .welcome-message {
-        margin-bottom: 2rem;
-        padding: 2rem;
-        background-color: var(--primary-color);
-        color: white;
-        border-radius: 8px;
-        box-shadow: var(--shadow);
-    }
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="row">
-    <div class="col-md-3">
-        <div class="admin-sidebar">
-            <h3 class="mb-3">Administration</h3>
-            <ul class="admin-nav">
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link active">
-                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link">
-                        <i class="fas fa-book"></i> Matières
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link">
-                        <i class="fas fa-list"></i> Sous-catégories
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link">
-                        <i class="fas fa-file-alt"></i> Textes
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link">
-                        <i class="fas fa-images"></i> Images
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
-                        <i class="fas fa-sign-out-alt"></i> Déconnexion
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </div>
-    
-    <div class="col-md-9">
-        <div class="welcome-message">
-            <h2><i class="fas fa-hand-sparkles"></i> Bienvenue dans l'interface d'administration</h2>
-            <p class="mb-0">Gérez ici l'ensemble des contenus de la plateforme éducative. Utilisez les différentes sections pour ajouter, modifier ou supprimer des contenus.</p>
-        </div>
-        
-        <h2 class="mb-4">Tableau de bord</h2>
-        
-        <!-- Stats Cards -->
-        <div class="dashboard-stats">
-            <div class="admin-card">
-                <h3 class="admin-card-title">Matières</h3>
-                <div class="admin-stat">{{ stats.matieres }}</div>
-                <p>Nombre total de matières</p>
-                <a href="{{ url_for('admin_bp.matieres') }}" class="btn btn-primary btn-sm">
-                    <i class="fas fa-eye"></i> Voir
-                </a>
-            </div>
-            
-            <div class="admin-card">
-                <h3 class="admin-card-title">Sous-catégories</h3>
-                <div class="admin-stat">{{ stats.sous_categories }}</div>
-                <p>Nombre total de sous-catégories</p>
-                <a href="{{ url_for('admin_bp.sous_categories') }}" class="btn btn-primary btn-sm">
-                    <i class="fas fa-eye"></i> Voir
-                </a>
-            </div>
-            
-            <div class="admin-card">
-                <h3 class="admin-card-title">Textes</h3>
-                <div class="admin-stat">{{ stats.textes }}</div>
-                <p>Nombre total de textes</p>
-                <a href="{{ url_for('admin_bp.textes') }}" class="btn btn-primary btn-sm">
-                    <i class="fas fa-eye"></i> Voir
-                </a>
-            </div>
-            
-            <div class="admin-card">
-                <h3 class="admin-card-title">Images</h3>
-                <div class="admin-stat">{{ stats.images }}</div>
-                <p>Nombre total d'images</p>
-                <a href="{{ url_for('admin_bp.images') }}" class="btn btn-primary btn-sm">
-                    <i class="fas fa-eye"></i> Voir
-                </a>
-            </div>
-        </div>
-        
-        <!-- Recent Activity -->
-        <div class="recent-activity">
-            <h3 class="mb-3">Textes récemment modifiés</h3>
-            {% if recent_textes %}
-            <ul class="list-group">
-                {% for texte in recent_textes %}
-                <li class="list-group-item d-flex justify-content-between align-items-center">
-                    <div>
-                        <h5 class="mb-1">{{ texte.titre }}</h5>
-                        <small>{{ texte.updated_at.strftime('%d/%m/%Y à %H:%M') }}</small>
-                    </div>
-                    <a href="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}" class="btn btn-sm btn-primary">
-                        <i class="fas fa-edit"></i> Éditer
-                    </a>
-                </li>
-                {% endfor %}
-            </ul>
-            {% else %}
-            <div class="alert alert-info">
-                Aucun texte n'a été modifié récemment.
-            </div>
-            {% endif %}
-        </div>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
-{% endblock %}

api/templates/admin/edit_texte.html

@@ -1,282 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Éditer {{ texte.titre }} - Administration{% endblock %}
-
-{% block styles %}
-<style>
-    .block-editor {
-        position: relative;
-        transition: all 0.3s ease;
-    }
-    
-    .block-ghost {
-        opacity: 0.5;
-        background: var(--primary-color);
-    }
-    
-    .block-handle {
-        cursor: move;
-        color: var(--muted-color);
-    }
-    
-    .image-position-example {
-        padding: 10px;
-        border: 1px dashed var(--border-color);
-        margin-top: 10px;
-        border-radius: 4px;
-    }
-    
-    .block-image-container {
-        margin-bottom: 15px;
-    }
-    
-    .image-preview {
-        max-height: 150px;
-        object-fit: contain;
-    }
-    
-    .gallery-image {
-        transition: transform 0.2s;
-        cursor: pointer;
-    }
-    
-    .gallery-image:hover {
-        transform: scale(1.05);
-    }
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="row">
-    <div class="col-md-3">
-        <div class="admin-sidebar">
-            <h3 class="mb-3">Administration</h3>
-            <ul class="admin-nav">
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link">
-                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link">
-                        <i class="fas fa-book"></i> Matières
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link">
-                        <i class="fas fa-list"></i> Sous-catégories
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link active">
-                        <i class="fas fa-file-alt"></i> Textes
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link">
-                        <i class="fas fa-images"></i> Images
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
-                        <i class="fas fa-sign-out-alt"></i> Déconnexion
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </div>
-    
-    <div class="col-md-9">
-        <div class="admin-container">
-            <h2 class="admin-title">Éditer la méthodologie : {{ texte.titre }}</h2>
-            
-            <div class="mb-4">
-                <a href="{{ url_for('admin_bp.textes') }}" class="btn btn-secondary mb-3">
-                    <i class="fas fa-arrow-left"></i> Retour à la liste
-                </a>
-                <a href="{{ url_for('admin_bp.historique', texte_id=texte.id) }}" class="btn btn-info mb-3">
-                    <i class="fas fa-history"></i> Voir l'historique
-                </a>
-            </div>
-            
-            <!-- Basic Information Form -->
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h4>Informations de base</h4>
-                </div>
-                <div class="card-body">
-                    <form method="POST" action="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}">
-                        <input type="hidden" name="action" value="update_basic">
-                        
-                        <div class="form-group mb-3">
-                            <label for="titre">Titre</label>
-                            <input type="text" class="form-control" id="titre" name="titre" value="{{ texte.titre }}" required>
-                        </div>
-                        
-                        <div class="form-group mb-3">
-                            <label for="sous_categorie_id">Sous-catégorie</label>
-                            <select class="form-control" id="sous_categorie_id" name="sous_categorie_id" required>
-                                {% for sc in sous_categories %}
-                                <option value="{{ sc.id }}" {% if sc.id == texte.sous_categorie_id %}selected{% endif %}>
-                                    {{ sc.matiere.nom }} - {{ sc.nom }}
-                                </option>
-                                {% endfor %}
-                            </select>
-                        </div>
-                        
-                        <button type="submit" class="btn btn-primary">
-                            <i class="fas fa-save"></i> Mettre à jour les informations
-                        </button>
-                    </form>
-                </div>
-            </div>
-            
-            <!-- Content Blocks Editor -->
-            <div class="card mb-4">
-                <div class="card-header d-flex justify-content-between align-items-center">
-                    <h4>Blocs de contenu</h4>
-                    <button id="add-block-button" class="btn btn-success">
-                        <i class="fas fa-plus"></i> Ajouter un bloc
-                    </button>
-                </div>
-                <div class="card-body">
-                    <p class="text-muted mb-4">
-                        Organisez votre contenu en blocs distincts. Chaque bloc peut contenir un titre, du texte et une image.
-                        Vous pouvez réorganiser les blocs en les faisant glisser.
-                    </p>
-                    
-                    <form id="blocks-form" method="POST" action="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}">
-                        <input type="hidden" name="action" value="update_blocks">
-                        <input type="hidden" id="blocks-data" name="blocks_data" value="">
-                        
-                        <div id="blocks-container">
-                            {% for block in blocks %}
-                            <div class="block-editor mb-4" data-block-id="{{ block.id }}">
-                                <div class="block-editor-header">
-                                    <div class="d-flex align-items-center">
-                                        <span class="block-handle"><i class="fas fa-grip-vertical"></i></span>
-                                        <h3 class="block-editor-title">Bloc #{{ loop.index }}</h3>
-                                    </div>
-                                    <div class="block-editor-actions">
-                                        <button type="button" class="btn btn-danger btn-sm delete-block-btn">
-                                            <i class="fas fa-trash"></i>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="form-group mb-3">
-                                    <label for="block-{{ block.id }}-title">Titre du bloc (optionnel)</label>
-                                    <input type="text" class="form-control block-title" id="block-{{ block.id }}-title" value="{{ block.title or '' }}">
-                                </div>
-                                <div class="form-group mb-3">
-                                    <label for="block-{{ block.id }}-content">Contenu du bloc</label>
-                                    <textarea class="form-control block-content" id="block-{{ block.id }}-content" rows="5">{{ block.content or '' }}</textarea>
-                                </div>
-                                <div class="form-group">
-                                    <label>Image</label>
-                                    <div class="d-flex align-items-center mb-2">
-                                        <button type="button" class="btn btn-primary btn-sm select-image-btn" {% if block.image %}style="display:none;"{% endif %}>
-                                            <i class="fas fa-image"></i> Sélectionner une image
-                                        </button>
-                                        <button type="button" class="btn btn-warning btn-sm remove-image-btn ml-2" {% if not block.image %}style="display:none;"{% endif %}>
-                                            <i class="fas fa-times"></i> Retirer l'image
-                                        </button>
-                                    </div>
-                                    <input type="hidden" class="block-image-id" value="{{ block.image.id if block.image else '' }}">
-                                    
-                                    {% if block.image %}
-                                    <div class="block-image-container">
-                                        <img src="{{ block.image.src }}" alt="{{ block.image.alt }}" class="image-preview">
-                                    </div>
-                                    {% else %}
-                                    <img src="" alt="Preview" class="image-preview" style="display:none;">
-                                    {% endif %}
-                                    
-                                    <div class="form-group mt-3">
-                                        <label for="block-{{ block.id }}-image-position">Position de l'image</label>
-                                        <select class="form-control image-position-select" id="block-{{ block.id }}-image-position">
-                                            <option value="left" {% if block.image_position == 'left' %}selected{% endif %}>Gauche</option>
-                                            <option value="right" {% if block.image_position == 'right' %}selected{% endif %}>Droite</option>
-                                            <option value="top" {% if block.image_position == 'top' %}selected{% endif %}>Haut</option>
-                                        </select>
-                                    </div>
-                                </div>
-                            </div>
-                            {% endfor %}
-                        </div>
-                        
-                        <div class="mt-4 text-center">
-                            <button type="button" id="save-blocks-button" class="btn btn-primary btn-lg">
-                                <i class="fas fa-save"></i> Enregistrer les modifications
-                            </button>
-                        </div>
-                    </form>
-                </div>
-            </div>
-            
-            <!-- Image Upload Section -->
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h4>Ajouter une nouvelle image</h4>
-                </div>
-                <div class="card-body">
-                    <form method="POST" action="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}" enctype="multipart/form-data">
-                        <input type="hidden" name="action" value="upload_image">
-                        
-                        <div class="form-group mb-3">
-                            <label for="image">Sélectionner une image</label>
-                            <input type="file" class="form-control" id="image" name="image" accept="image/*" required>
-                        </div>
-                        
-                        <div class="form-group mb-3">
-                            <label for="alt_text">Texte alternatif (pour l'accessibilité)</label>
-                            <input type="text" class="form-control" id="alt_text" name="alt_text" placeholder="Description de l'image">
-                        </div>
-                        
-                        <button type="submit" class="btn btn-success">
-                            <i class="fas fa-upload"></i> Télécharger l'image
-                        </button>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Image Gallery Modal -->
-<div class="modal fade" id="image-gallery-modal" tabindex="-1" aria-labelledby="imageGalleryModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="imageGalleryModalLabel">Sélectionner une image</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <div class="row">
-                    {% for image in images %}
-                    <div class="col-md-3 col-sm-4 col-6 mb-3">
-                        <div class="gallery-item" data-image-id="{{ image.id }}">
-                            <img src="{{ image.src }}" alt="{{ image.alt }}" class="gallery-image img-fluid">
-                        </div>
-                    </div>
-                    {% else %}
-                    <div class="col-12">
-                        <div class="alert alert-info">
-                            Aucune image disponible. Veuillez en télécharger une.
-                        </div>
-                    </div>
-                    {% endfor %}
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
-            </div>
-        </div>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<!-- Include Sortable.js for drag and drop functionality -->
-<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
-<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
-{% endblock %}

api/templates/admin/historique.html

@@ -1,171 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Historique des modifications - {{ texte.titre }} - Administration{% endblock %}
-
-{% block styles %}
-<style>
-    .history-entry {
-        position: relative;
-        padding: 20px;
-        border-left: 3px solid var(--primary-color);
-        margin-bottom: 20px;
-        background-color: var(--card-bg);
-        border-radius: 8px;
-        box-shadow: var(--shadow);
-    }
-    
-    .history-date {
-        position: absolute;
-        top: 10px;
-        right: 15px;
-        font-size: 0.9rem;
-        color: var(--muted-color);
-    }
-    
-    .history-content {
-        background-color: var(--block-bg);
-        padding: 15px;
-        border-radius: 8px;
-        margin-top: 15px;
-        white-space: pre-wrap;
-        max-height: 300px;
-        overflow-y: auto;
-        border: 1px solid var(--border-color);
-    }
-    
-    .empty-history {
-        text-align: center;
-        padding: 50px 20px;
-        background-color: var(--block-bg);
-        border-radius: 8px;
-        margin-top: 20px;
-    }
-    
-    .timeline-container {
-        position: relative;
-        margin-left: 20px;
-    }
-    
-    .timeline-line {
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: 3px;
-        background-color: var(--border-color);
-    }
-    
-    .timeline-dot {
-        position: absolute;
-        left: -8px;
-        top: 20px;
-        width: 18px;
-        height: 18px;
-        border-radius: 50%;
-        background-color: var(--primary-color);
-        z-index: 2;
-    }
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="row">
-    <div class="col-md-3">
-        <div class="admin-sidebar">
-            <h3 class="mb-3">Administration</h3>
-            <ul class="admin-nav">
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link">
-                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link">
-                        <i class="fas fa-book"></i> Matières
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link">
-                        <i class="fas fa-list"></i> Sous-catégories
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link active">
-                        <i class="fas fa-file-alt"></i> Textes
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link">
-                        <i class="fas fa-images"></i> Images
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
-                        <i class="fas fa-sign-out-alt"></i> Déconnexion
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </div>
-    
-    <div class="col-md-9">
-        <div class="admin-container">
-            <h2 class="admin-title">Historique des modifications : {{ texte.titre }}</h2>
-            
-            <div class="mb-4">
-                <a href="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}" class="btn btn-secondary">
-                    <i class="fas fa-arrow-left"></i> Retour à l'éditeur
-                </a>
-                <a href="{{ url_for('admin_bp.textes') }}" class="btn btn-secondary">
-                    <i class="fas fa-list"></i> Liste des textes
-                </a>
-            </div>
-            
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h4><i class="fas fa-history"></i> Versions précédentes</h4>
-                </div>
-                <div class="card-body">
-                    {% if historiques %}
-                    <div class="timeline-container">
-                        <div class="timeline-line"></div>
-                        
-                        <!-- Current version -->
-                        <div class="history-entry">
-                            <div class="timeline-dot"></div>
-                            <h5>Version actuelle</h5>
-                            <span class="history-date">
-                                <i class="fas fa-clock"></i> {{ texte.updated_at.strftime('%d/%m/%Y à %H:%M') }}
-                            </span>
-                            <div class="history-content">{{ texte.contenu }}</div>
-                        </div>
-                        
-                        <!-- Previous versions -->
-                        {% for historique in historiques %}
-                        <div class="history-entry">
-                            <div class="timeline-dot"></div>
-                            <h5>Version antérieure #{{ loop.index }}</h5>
-                            <span class="history-date">
-                                <i class="fas fa-clock"></i> {{ historique.date_modification.strftime('%d/%m/%Y à %H:%M') }}
-                            </span>
-                            <div class="history-content">{{ historique.contenu_precedent }}</div>
-                        </div>
-                        {% endfor %}
-                    </div>
-                    {% else %}
-                    <div class="empty-history">
-                        <i class="fas fa-info-circle fa-3x mb-3"></i>
-                        <h4>Aucun historique disponible</h4>
-                        <p>Ce texte n'a pas encore été modifié depuis sa création.</p>
-                    </div>
-                    {% endif %}
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
-{% endblock %}

api/templates/admin/images.html

@@ -1,282 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Gestion des Images - Administration{% endblock %}
-
-{% block styles %}
-<style>
-    .image-card {
-        position: relative;
-        background-color: var(--card-bg);
-        border-radius: 8px;
-        padding: 10px;
-        margin-bottom: 20px;
-        box-shadow: var(--shadow);
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
-    }
-    
-    .image-card:hover {
-        transform: translateY(-5px);
-        box-shadow: var(--hover-shadow);
-    }
-    
-    .image-container {
-        position: relative;
-        width: 100%;
-        height: 200px;
-        margin-bottom: 15px;
-        overflow: hidden;
-        border-radius: 6px;
-        background-color: var(--block-bg);
-    }
-    
-    .image-preview {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-    }
-    
-    .image-info {
-        padding: 10px 0;
-    }
-    
-    .image-actions {
-        display: flex;
-        justify-content: space-between;
-        margin-top: 10px;
-    }
-    
-    .image-upload-preview {
-        max-width: 100%;
-        max-height: 200px;
-        margin-top: 15px;
-        border-radius: 6px;
-        display: none;
-    }
-    
-    .image-date {
-        font-size: 0.8rem;
-        color: var(--muted-color);
-    }
-    
-    .image-detail-modal img {
-        max-width: 100%;
-        max-height: 500px;
-    }
-    
-    .image-filter {
-        margin-bottom: 20px;
-    }
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="row">
-    <div class="col-md-3">
-        <div class="admin-sidebar">
-            <h3 class="mb-3">Administration</h3>
-            <ul class="admin-nav">
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link">
-                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link">
-                        <i class="fas fa-book"></i> Matières
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link">
-                        <i class="fas fa-list"></i> Sous-catégories
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link">
-                        <i class="fas fa-file-alt"></i> Textes
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link active">
-                        <i class="fas fa-images"></i> Images
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
-                        <i class="fas fa-sign-out-alt"></i> Déconnexion
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </div>
-    
-    <div class="col-md-9">
-        <div class="admin-container">
-            <h2 class="admin-title">Gestion des Images</h2>
-            
-            <!-- Upload Image Section -->
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h4><i class="fas fa-upload"></i> Télécharger une nouvelle image</h4>
-                </div>
-                <div class="card-body">
-                    <form id="image-upload-form" method="POST" action="{{ url_for('admin_bp.images') }}" enctype="multipart/form-data">
-                        <input type="hidden" name="action" value="upload">
-                        
-                        <div class="row">
-                            <div class="col-md-6">
-                                <div class="form-group mb-3">
-                                    <label for="image-file">Sélectionner une image</label>
-                                    <input type="file" class="form-control" id="image-file" name="image" accept="image/*" required>
-                                </div>
-                                
-                                <div class="form-group mb-3">
-                                    <label for="alt_text">Texte alternatif (pour l'accessibilité)</label>
-                                    <input type="text" class="form-control" id="alt_text" name="alt_text" placeholder="Description de l'image">
-                                </div>
-                                
-                                <div class="form-group mb-3">
-                                    <label for="description">Description (optionnelle)</label>
-                                    <textarea class="form-control" id="description" name="description" rows="3" placeholder="Description ou notes sur l'image"></textarea>
-                                </div>
-                            </div>
-                            <div class="col-md-6 d-flex align-items-center justify-content-center">
-                                <img id="upload-image-preview" class="image-upload-preview" src="#" alt="Aperçu">
-                            </div>
-                        </div>
-                        
-                        <button type="submit" class="btn btn-primary">
-                            <i class="fas fa-upload"></i> Télécharger
-                        </button>
-                    </form>
-                </div>
-            </div>
-            
-            <!-- Image Gallery -->
-            <div class="card">
-                <div class="card-header">
-                    <h4><i class="fas fa-images"></i> Bibliothèque d'images</h4>
-                </div>
-                <div class="card-body">
-                    <!-- Filter -->
-                    <div class="image-filter mb-4">
-                        <div class="input-group">
-                            <span class="input-group-text"><i class="fas fa-search"></i></span>
-                            <input type="text" id="image-search" class="form-control" placeholder="Rechercher par nom ou description...">
-                        </div>
-                    </div>
-                    
-                    {% if images %}
-                    <div class="row" id="image-gallery">
-                        {% for image in images %}
-                        <div class="col-lg-4 col-md-6 mb-4">
-                            <div class="image-card">
-                                <div class="image-container">
-                                    <img src="{{ image.src }}" alt="{{ image.alt_text or 'Image' }}" class="image-preview">
-                                </div>
-                                <div class="image-info">
-                                    <h5 class="mb-1" title="{{ image.filename }}">
-                                        {{ image.filename|truncate(20) }}
-                                    </h5>
-                                    <p class="image-date mb-1">
-                                        <i class="fas fa-calendar-alt"></i> 
-                                        {{ image.uploaded_at.strftime('%d/%m/%Y') }}
-                                    </p>
-                                    <p class="text-muted small mb-0">
-                                        {{ image.description|default('Aucune description')|truncate(50) }}
-                                    </p>
-                                </div>
-                                <div class="image-actions">
-                                    <button class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#imageModal{{ image.id }}">
-                                        <i class="fas fa-eye"></i> Détails
-                                    </button>
-                                    <form method="POST" action="{{ url_for('admin_bp.images') }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette image ?')">
-                                        <input type="hidden" name="action" value="delete">
-                                        <input type="hidden" name="image_id" value="{{ image.id }}">
-                                        <button type="submit" class="btn btn-sm btn-danger">
-                                            <i class="fas fa-trash"></i>
-                                        </button>
-                                    </form>
-                                </div>
-                            </div>
-                            
-                            <!-- Image Modal -->
-                            <div class="modal fade image-detail-modal" id="imageModal{{ image.id }}" tabindex="-1" aria-labelledby="imageModalLabel{{ image.id }}" aria-hidden="true">
-                                <div class="modal-dialog modal-lg">
-                                    <div class="modal-content">
-                                        <div class="modal-header">
-                                            <h5 class="modal-title" id="imageModalLabel{{ image.id }}">{{ image.filename }}</h5>
-                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                                        </div>
-                                        <div class="modal-body">
-                                            <div class="text-center mb-4">
-                                                <img src="{{ image.src }}" alt="{{ image.alt_text or 'Image' }}" class="img-fluid">
-                                            </div>
-                                            
-                                            <form method="POST" action="{{ url_for('admin_bp.images') }}">
-                                                <input type="hidden" name="action" value="update">
-                                                <input type="hidden" name="image_id" value="{{ image.id }}">
-                                                
-                                                <div class="form-group mb-3">
-                                                    <label>Téléchargée le</label>
-                                                    <input type="text" class="form-control" value="{{ image.uploaded_at.strftime('%d/%m/%Y à %H:%M') }}" readonly>
-                                                </div>
-                                                
-                                                <div class="form-group mb-3">
-                                                    <label for="alt_text{{ image.id }}">Texte alternatif</label>
-                                                    <input type="text" class="form-control" id="alt_text{{ image.id }}" name="alt_text" value="{{ image.alt_text or '' }}">
-                                                </div>
-                                                
-                                                <div class="form-group mb-3">
-                                                    <label for="description{{ image.id }}">Description</label>
-                                                    <textarea class="form-control" id="description{{ image.id }}" name="description" rows="3">{{ image.description or '' }}</textarea>
-                                                </div>
-                                                
-                                                <button type="submit" class="btn btn-primary">
-                                                    <i class="fas fa-save"></i> Mettre à jour
-                                                </button>
-                                            </form>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        {% endfor %}
-                    </div>
-                    {% else %}
-                    <div class="alert alert-info">
-                        Aucune image n'a été téléchargée. Utilisez le formulaire ci-dessus pour ajouter votre première image.
-                    </div>
-                    {% endif %}
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
-<script>
-    // Image search functionality
-    document.addEventListener('DOMContentLoaded', function() {
-        const searchInput = document.getElementById('image-search');
-        if (!searchInput) return;
-        
-        searchInput.addEventListener('input', function() {
-            const searchTerm = this.value.toLowerCase();
-            const imageCards = document.querySelectorAll('.image-card');
-            
-            imageCards.forEach(card => {
-                const filename = card.querySelector('h5').textContent.toLowerCase();
-                const description = card.querySelector('.text-muted').textContent.toLowerCase();
-                
-                if (filename.includes(searchTerm) || description.includes(searchTerm)) {
-                    card.closest('.col-lg-4').style.display = '';
-                } else {
-                    card.closest('.col-lg-4').style.display = 'none';
-                }
-            });
-        });
-    });
-</script>
-{% endblock %}

api/templates/admin/login.html

@@ -1,87 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Connexion - Administration{% endblock %}
-
-{% block styles %}
-<style>
-    .login-container {
-        max-width: 500px;
-        margin: 50px auto;
-        padding: 30px;
-        background-color: var(--card-bg);
-        border-radius: 10px;
-        box-shadow: var(--shadow);
-    }
-    
-    .login-header {
-        text-align: center;
-        margin-bottom: 30px;
-    }
-    
-    .login-icon {
-        font-size: 60px;
-        color: var(--primary-color);
-        margin-bottom: 20px;
-    }
-    
-    .login-title {
-        font-size: 24px;
-        margin-bottom: 10px;
-    }
-    
-    .login-subtitle {
-        color: var(--muted-color);
-    }
-    
-    .login-form {
-        margin-top: 20px;
-    }
-    
-    .form-floating {
-        margin-bottom: 20px;
-    }
-    
-    .login-footer {
-        text-align: center;
-        margin-top: 20px;
-        color: var(--muted-color);
-    }
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="login-container">
-    <div class="login-header">
-        <div class="login-icon">
-            <i class="fas fa-user-shield"></i>
-        </div>
-        <h1 class="login-title">Espace d'administration</h1>
-        <p class="login-subtitle">Connectez-vous pour gérer le contenu</p>
-    </div>
-    
-    <form method="POST" action="{{ url_for('admin_bp.login') }}" class="login-form">
-        <div class="form-floating mb-3">
-            <input type="text" class="form-control" id="username" name="username" placeholder="Nom d'utilisateur" required>
-            <label for="username">Nom d'utilisateur</label>
-        </div>
-        
-        <div class="form-floating mb-4">
-            <input type="password" class="form-control" id="password" name="password" placeholder="Mot de passe" required>
-            <label for="password">Mot de passe</label>
-        </div>
-        
-        <div class="d-grid">
-            <button type="submit" class="btn btn-primary btn-lg">
-                <i class="fas fa-sign-in-alt me-2"></i> Se connecter
-            </button>
-        </div>
-    </form>
-    
-    <div class="login-footer">
-        <p>Seuls les administrateurs autorisés peuvent accéder à cette section.</p>
-        <a href="{{ url_for('main_bp.index') }}">
-            <i class="fas fa-arrow-left me-1"></i> Retour à l'accueil
-        </a>
-    </div>
-</div>
-{% endblock %}

api/templates/admin/matieres.html

@@ -1,213 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Gestion des Matières - Administration{% endblock %}
-
-{% block styles %}
-<style>
-    .color-preview {
-        display: inline-block;
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        margin-left: 10px;
-    }
-    
-    .color-badge {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        border-radius: 4px;
-        margin-right: 10px;
-    }
-    
-    .matiere-card {
-        background-color: var(--card-bg);
-        border-radius: 8px;
-        padding: 16px;
-        margin-bottom: 16px;
-        box-shadow: var(--shadow);
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
-        border-left: 5px solid #ddd;
-    }
-    
-    .matiere-card:hover {
-        transform: translateY(-5px);
-        box-shadow: var(--hover-shadow);
-    }
-    
-    .matiere-actions {
-        display: flex;
-        justify-content: flex-end;
-        gap: 8px;
-    }
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="row">
-    <div class="col-md-3">
-        <div class="admin-sidebar">
-            <h3 class="mb-3">Administration</h3>
-            <ul class="admin-nav">
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link">
-                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link active">
-                        <i class="fas fa-book"></i> Matières
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link">
-                        <i class="fas fa-list"></i> Sous-catégories
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link">
-                        <i class="fas fa-file-alt"></i> Textes
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link">
-                        <i class="fas fa-images"></i> Images
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
-                        <i class="fas fa-sign-out-alt"></i> Déconnexion
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </div>
-    
-    <div class="col-md-9">
-        <div class="admin-container">
-            <h2 class="admin-title">Gestion des Matières</h2>
-            
-            <div class="row mb-4">
-                <!-- Add Matiere Section -->
-                <div id="add-matiere-section" class="col-md-6">
-                    <div class="card">
-                        <div class="card-header">
-                            <h4><i class="fas fa-plus-circle"></i> Ajouter une matière</h4>
-                        </div>
-                        <div class="card-body">
-                            <form method="POST" action="{{ url_for('admin_bp.matieres') }}">
-                                <input type="hidden" name="action" value="add">
-                                
-                                <div class="form-group mb-3">
-                                    <label for="nom">Nom de la matière</label>
-                                    <input type="text" class="form-control" id="nom" name="nom" required>
-                                </div>
-                                
-                                <div class="form-group mb-3">
-                                    <label for="color_code">Couleur</label>
-                                    <div class="input-group">
-                                        <input type="color" class="form-control form-control-color" id="color_code" name="color_code" value="#3498db">
-                                        <!-- Color preview will be added by JS -->
-                                    </div>
-                                </div>
-                                
-                                <button type="submit" class="btn btn-primary">
-                                    <i class="fas fa-save"></i> Ajouter
-                                </button>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Edit Matiere Section (initially hidden) -->
-                <div id="edit-matiere-section" class="col-md-6 d-none">
-                    <div class="card">
-                        <div class="card-header">
-                            <h4><i class="fas fa-edit"></i> Modifier une matière</h4>
-                        </div>
-                        <div class="card-body">
-                            <form id="edit-matiere-form" method="POST" action="{{ url_for('admin_bp.matieres') }}">
-                                <input type="hidden" name="action" value="edit">
-                                <input type="hidden" name="matiere_id" value="">
-                                
-                                <div class="form-group mb-3">
-                                    <label for="edit-nom">Nom de la matière</label>
-                                    <input type="text" class="form-control" id="edit-nom" name="nom" required>
-                                </div>
-                                
-                                <div class="form-group mb-3">
-                                    <label for="edit-color_code">Couleur</label>
-                                    <div class="input-group">
-                                        <input type="color" class="form-control form-control-color" id="edit-color_code" name="color_code" value="#3498db">
-                                        <!-- Color preview will be added by JS -->
-                                    </div>
-                                </div>
-                                
-                                <div class="btn-group">
-                                    <button type="submit" class="btn btn-primary">
-                                        <i class="fas fa-save"></i> Mettre à jour
-                                    </button>
-                                    <button type="button" id="cancel-edit-matiere" class="btn btn-secondary">
-                                        <i class="fas fa-times"></i> Annuler
-                                    </button>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- List of Matieres -->
-            <div class="card">
-                <div class="card-header">
-                    <h4><i class="fas fa-list"></i> Liste des matières</h4>
-                </div>
-                <div class="card-body">
-                    {% if matieres %}
-                        <div class="row">
-                            {% for matiere in matieres %}
-                            <div class="col-md-6 mb-3">
-                                <div class="matiere-card" style="border-left-color: {{ matiere.color_code }};">
-                                    <div class="d-flex justify-content-between align-items-center mb-2">
-                                        <h5 class="mb-0">
-                                            <span class="color-badge" style="background-color: {{ matiere.color_code }};"></span>
-                                            {{ matiere.nom }}
-                                        </h5>
-                                    </div>
-                                    <div class="small mb-2">
-                                        <span class="badge bg-secondary">{{ matiere.sous_categories|length }} sous-catégories</span>
-                                    </div>
-                                    <div class="matiere-actions">
-                                        <button class="btn btn-sm btn-primary edit-matiere-btn" 
-                                                data-id="{{ matiere.id }}" 
-                                                data-name="{{ matiere.nom }}" 
-                                                data-color="{{ matiere.color_code }}">
-                                            <i class="fas fa-edit"></i> Modifier
-                                        </button>
-                                        <form method="POST" action="{{ url_for('admin_bp.matieres') }}" style="display: inline-block" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette matière ? Toutes les sous-catégories et textes associés seront également supprimés.')">
-                                            <input type="hidden" name="action" value="delete">
-                                            <input type="hidden" name="matiere_id" value="{{ matiere.id }}">
-                                            <button type="submit" class="btn btn-sm btn-danger">
-                                                <i class="fas fa-trash"></i> Supprimer
-                                            </button>
-                                        </form>
-                                    </div>
-                                </div>
-                            </div>
-                            {% endfor %}
-                        </div>
-                    {% else %}
-                        <div class="alert alert-info">
-                            Aucune matière n'a été ajoutée. Utilisez le formulaire ci-dessus pour créer votre première matière.
-                        </div>
-                    {% endif %}
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
-{% endblock %}

api/templates/admin/sous_categories.html

@@ -1,230 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Gestion des Sous-catégories - Administration{% endblock %}
-
-{% block styles %}
-<style>
-    .sous-categorie-row {
-        transition: background-color 0.3s ease;
-    }
-    
-    .sous-categorie-row:hover {
-        background-color: rgba(52, 152, 219, 0.1);
-    }
-    
-    .color-badge {
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        margin-right: 8px;
-    }
-    
-    .filter-container {
-        background-color: var(--block-bg);
-        padding: 15px;
-        border-radius: 8px;
-        margin-bottom: 20px;
-    }
-    
-    .matiere-container {
-        margin-top: 30px;
-        border-left: 3px solid var(--primary-color);
-        padding-left: 15px;
-    }
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="row">
-    <div class="col-md-3">
-        <div class="admin-sidebar">
-            <h3 class="mb-3">Administration</h3>
-            <ul class="admin-nav">
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link">
-                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link">
-                        <i class="fas fa-book"></i> Matières
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link active">
-                        <i class="fas fa-list"></i> Sous-catégories
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link">
-                        <i class="fas fa-file-alt"></i> Textes
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link">
-                        <i class="fas fa-images"></i> Images
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
-                        <i class="fas fa-sign-out-alt"></i> Déconnexion
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </div>
-    
-    <div class="col-md-9">
-        <div class="admin-container">
-            <h2 class="admin-title">Gestion des Sous-catégories</h2>
-            
-            <div class="row mb-4">
-                <!-- Add Sous-Categorie Section -->
-                <div id="add-sous-categorie-section" class="col-md-6">
-                    <div class="card">
-                        <div class="card-header">
-                            <h4><i class="fas fa-plus-circle"></i> Ajouter une sous-catégorie</h4>
-                        </div>
-                        <div class="card-body">
-                            <form method="POST" action="{{ url_for('admin_bp.sous_categories') }}">
-                                <input type="hidden" name="action" value="add">
-                                
-                                <div class="form-group mb-3">
-                                    <label for="matiere_id">Matière</label>
-                                    <select class="form-control" id="matiere_id" name="matiere_id" required>
-                                        <option value="">Sélectionnez une matière</option>
-                                        {% for matiere in matieres %}
-                                        <option value="{{ matiere.id }}">{{ matiere.nom }}</option>
-                                        {% endfor %}
-                                    </select>
-                                </div>
-                                
-                                <div class="form-group mb-3">
-                                    <label for="nom">Nom de la sous-catégorie</label>
-                                    <input type="text" class="form-control" id="nom" name="nom" required>
-                                </div>
-                                
-                                <button type="submit" class="btn btn-primary">
-                                    <i class="fas fa-save"></i> Ajouter
-                                </button>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Edit Sous-Categorie Section (initially hidden) -->
-                <div id="edit-sous-categorie-section" class="col-md-6 d-none">
-                    <div class="card">
-                        <div class="card-header">
-                            <h4><i class="fas fa-edit"></i> Modifier une sous-catégorie</h4>
-                        </div>
-                        <div class="card-body">
-                            <form id="edit-sous-categorie-form" method="POST" action="{{ url_for('admin_bp.sous_categories') }}">
-                                <input type="hidden" name="action" value="edit">
-                                <input type="hidden" name="sous_categorie_id" value="">
-                                
-                                <div class="form-group mb-3">
-                                    <label for="edit-matiere_id">Matière</label>
-                                    <select class="form-control" id="edit-matiere_id" name="matiere_id" required>
-                                        {% for matiere in matieres %}
-                                        <option value="{{ matiere.id }}">{{ matiere.nom }}</option>
-                                        {% endfor %}
-                                    </select>
-                                </div>
-                                
-                                <div class="form-group mb-3">
-                                    <label for="edit-nom">Nom de la sous-catégorie</label>
-                                    <input type="text" class="form-control" id="edit-nom" name="nom" required>
-                                </div>
-                                
-                                <div class="btn-group">
-                                    <button type="submit" class="btn btn-primary">
-                                        <i class="fas fa-save"></i> Mettre à jour
-                                    </button>
-                                    <button type="button" id="cancel-edit-sous-categorie" class="btn btn-secondary">
-                                        <i class="fas fa-times"></i> Annuler
-                                    </button>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Filter by Matiere -->
-            <div class="filter-container mb-4">
-                <div class="row align-items-center">
-                    <div class="col-md-3">
-                        <label for="matiere-filter" class="form-label mb-0"><strong>Filtrer par matière :</strong></label>
-                    </div>
-                    <div class="col-md-9">
-                        <select id="matiere-filter" class="form-select">
-                            <option value="">Toutes les matières</option>
-                            {% for matiere in matieres %}
-                            <option value="{{ matiere.id }}">{{ matiere.nom }}</option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- List of Sous-Categories -->
-            <div class="card">
-                <div class="card-header">
-                    <h4><i class="fas fa-list"></i> Liste des sous-catégories</h4>
-                </div>
-                <div class="card-body">
-                    {% if sous_categories %}
-                        <div class="table-responsive">
-                            <table class="table table-hover">
-                                <thead>
-                                    <tr>
-                                        <th>Matière</th>
-                                        <th>Sous-catégorie</th>
-                                        <th>Actions</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {% for sous_categorie in sous_categories %}
-                                    <tr class="sous-categorie-row" data-matiere-id="{{ sous_categorie.matiere.id }}">
-                                        <td>
-                                            <span class="color-badge" style="background-color: {{ sous_categorie.matiere.color_code }};"></span>
-                                            {{ sous_categorie.matiere.nom }}
-                                        </td>
-                                        <td>{{ sous_categorie.nom }}</td>
-                                        <td>
-                                            <button class="btn btn-sm btn-primary edit-sous-categorie-btn" 
-                                                    data-id="{{ sous_categorie.id }}" 
-                                                    data-name="{{ sous_categorie.nom }}" 
-                                                    data-matiere-id="{{ sous_categorie.matiere.id }}">
-                                                <i class="fas fa-edit"></i> Modifier
-                                            </button>
-                                            <form method="POST" action="{{ url_for('admin_bp.sous_categories') }}" style="display: inline-block" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette sous-catégorie ? Tous les textes associés seront également supprimés.')">
-                                                <input type="hidden" name="action" value="delete">
-                                                <input type="hidden" name="sous_categorie_id" value="{{ sous_categorie.id }}">
-                                                <button type="submit" class="btn btn-sm btn-danger">
-                                                    <i class="fas fa-trash"></i> Supprimer
-                                                </button>
-                                            </form>
-                                        </td>
-                                    </tr>
-                                    {% endfor %}
-                                </tbody>
-                            </table>
-                        </div>
-                    {% else %}
-                        <div class="alert alert-info">
-                            Aucune sous-catégorie n'a été ajoutée. Utilisez le formulaire ci-dessus pour créer votre première sous-catégorie.
-                        </div>
-                    {% endif %}
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
-{% endblock %}

api/templates/admin/textes.html

@@ -1,230 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Gestion des Textes - Administration{% endblock %}
-
-{% block styles %}
-<style>
-    .texte-card {
-        background-color: var(--card-bg);
-        border-radius: 8px;
-        padding: 16px;
-        margin-bottom: 16px;
-        box-shadow: var(--shadow);
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
-        border-left: 5px solid var(--primary-color);
-    }
-    
-    .texte-card:hover {
-        transform: translateY(-5px);
-        box-shadow: var(--hover-shadow);
-    }
-    
-    .texte-actions {
-        display: flex;
-        justify-content: flex-end;
-        gap: 8px;
-        margin-top: 10px;
-    }
-    
-    .accordion-button:not(.collapsed) {
-        background-color: var(--block-bg);
-        color: var(--text-color);
-    }
-    
-    .matiere-header {
-        padding: 10px 15px;
-        margin: 10px 0;
-        border-radius: 5px;
-        color: white;
-    }
-    
-    .sous-categorie-header {
-        padding: 8px 15px;
-        border-radius: 5px;
-        background-color: var(--block-bg);
-        margin: 10px 0;
-    }
-    
-    .date-info {
-        font-size: 12px;
-        color: var(--muted-color);
-    }
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="row">
-    <div class="col-md-3">
-        <div class="admin-sidebar">
-            <h3 class="mb-3">Administration</h3>
-            <ul class="admin-nav">
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link">
-                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link">
-                        <i class="fas fa-book"></i> Matières
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link">
-                        <i class="fas fa-list"></i> Sous-catégories
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link active">
-                        <i class="fas fa-file-alt"></i> Textes
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link">
-                        <i class="fas fa-images"></i> Images
-                    </a>
-                </li>
-                <li class="admin-nav-item">
-                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
-                        <i class="fas fa-sign-out-alt"></i> Déconnexion
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </div>
-    
-    <div class="col-md-9">
-        <div class="admin-container">
-            <h2 class="admin-title">Gestion des Textes</h2>
-            
-            <!-- Add New Text Button -->
-            <div class="mb-4">
-                <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#addTextCollapse" aria-expanded="false" aria-controls="addTextCollapse">
-                    <i class="fas fa-plus-circle"></i> Ajouter un nouveau texte
-                </button>
-            </div>
-            
-            <!-- Add Text Form (Collapsible) -->
-            <div class="collapse mb-4" id="addTextCollapse">
-                <div class="card">
-                    <div class="card-header">
-                        <h4><i class="fas fa-plus-circle"></i> Nouveau texte</h4>
-                    </div>
-                    <div class="card-body">
-                        <form method="POST" action="{{ url_for('admin_bp.textes') }}">
-                            <input type="hidden" name="action" value="add">
-                            
-                            <div class="form-group mb-3">
-                                <label for="titre">Titre</label>
-                                <input type="text" class="form-control" id="titre" name="titre" required>
-                            </div>
-                            
-                            <div class="row mb-3">
-                                <div class="col-md-6">
-                                    <div class="form-group">
-                                        <label for="matiere-select">Matière</label>
-                                        <select class="form-control" id="matiere-select" required>
-                                            <option value="">Sélectionnez une matière</option>
-                                            {% for matiere in matieres %}
-                                            <option value="{{ matiere.id }}">{{ matiere.nom }}</option>
-                                            {% endfor %}
-                                        </select>
-                                    </div>
-                                </div>
-                                <div class="col-md-6">
-                                    <div class="form-group">
-                                        <label for="sous-categorie-select">Sous-catégorie</label>
-                                        <select class="form-control" id="sous-categorie-select" name="sous_categorie_id" required>
-                                            <option value="">Sélectionnez d'abord une matière</option>
-                                        </select>
-                                    </div>
-                                </div>
-                            </div>
-                            
-                            <div class="form-group mb-3">
-                                <label for="contenu">Contenu</label>
-                                <textarea class="form-control" id="contenu" name="contenu" rows="10" required></textarea>
-                                <small class="form-text text-muted">
-                                    Séparez les paragraphes par des lignes vides. Les titres des blocs peuvent être indiqués sur une ligne séparée et seront automatiquement détectés.
-                                </small>
-                            </div>
-                            
-                            <button type="submit" class="btn btn-primary">
-                                <i class="fas fa-save"></i> Créer et éditer
-                            </button>
-                        </form>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- List of Textes -->
-            <div class="card">
-                <div class="card-header">
-                    <h4><i class="fas fa-file-alt"></i> Liste des textes</h4>
-                </div>
-                <div class="card-body">
-                    {% if grouped_textes %}
-                        <div class="accordion" id="textesAccordion">
-                            {% for matiere_id, matiere_data in grouped_textes.items() %}
-                            <div class="accordion-item mb-3">
-                                <h2 class="accordion-header" id="heading{{ matiere_id }}">
-                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ matiere_id }}" aria-expanded="false" aria-controls="collapse{{ matiere_id }}" style="background-color: {{ matiere_data.color }}; color: white;">
-                                        <i class="fas fa-book me-2"></i> {{ matiere_data.nom }}
-                                    </button>
-                                </h2>
-                                <div id="collapse{{ matiere_id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ matiere_id }}" data-bs-parent="#textesAccordion">
-                                    <div class="accordion-body">
-                                        {% for sous_cat_id, sous_cat_data in matiere_data.sous_categories.items() %}
-                                        <div class="sous-categorie-group">
-                                            <div class="sous-categorie-header" style="border-left: 5px solid {{ matiere_data.color }};">
-                                                <i class="fas fa-list-ul me-2"></i> {{ sous_cat_data.nom }}
-                                            </div>
-                                            
-                                            <div class="row">
-                                                {% for texte in sous_cat_data.textes %}
-                                                <div class="col-md-6 mb-3">
-                                                    <div class="texte-card" style="border-left-color: {{ matiere_data.color }};">
-                                                        <h5>{{ texte.titre }}</h5>
-                                                        <p class="date-info">
-                                                            Dernière mise à jour: {{ texte.updated_at.strftime('%d/%m/%Y à %H:%M') }}
-                                                        </p>
-                                                        <div class="texte-actions">
-                                                            <a href="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}" class="btn btn-sm btn-primary">
-                                                                <i class="fas fa-edit"></i> Éditer
-                                                            </a>
-                                                            <a href="{{ url_for('admin_bp.historique', texte_id=texte.id) }}" class="btn btn-sm btn-info">
-                                                                <i class="fas fa-history"></i> Historique
-                                                            </a>
-                                                            <form method="POST" action="{{ url_for('admin_bp.textes') }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce texte ?')">
-                                                                <input type="hidden" name="action" value="delete">
-                                                                <input type="hidden" name="texte_id" value="{{ texte.id }}">
-                                                                <button type="submit" class="btn btn-sm btn-danger">
-                                                                    <i class="fas fa-trash"></i>
-                                                                </button>
-                                                            </form>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                {% endfor %}
-                                            </div>
-                                        </div>
-                                        {% endfor %}
-                                    </div>
-                                </div>
-                            </div>
-                            {% endfor %}
-                        </div>
-                    {% else %}
-                        <div class="alert alert-info">
-                            Aucun texte n'a été ajouté. Utilisez le formulaire ci-dessus pour créer votre premier texte.
-                        </div>
-                    {% endif %}
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
-{% endblock %}

api/templates/base.html

@@ -1,141 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr" data-theme="light">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}Plateforme Éducative{% endblock %}</title>
-
-    <!-- Bootstrap CSS from CDN -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-
-    <!-- Font Awesome for icons -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-
-    <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-
-    <!-- Custom CSS -->
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
-
-    <!-- Additional CSS specific to templates -->
-    {% block styles %}{% endblock %}
-</head>
-<body>
-    <!-- Header -->
-    <header class="main-header">
-        <div class="container header-container">
-            <!-- Burger Menu Button -->
-            <button id="burger-menu" class="burger-menu-button" title="Ouvrir le menu">
-                <i class="fas fa-bars"></i>
-            </button>
-
-            <h1 class="site-title">
-                <a href="{{ url_for('main_bp.index') }}">Méthodologies</a>
-            </h1>
-
-            <div class="header-actions">
-                <!-- Theme toggle button -->
-                <button id="theme-toggle" class="theme-toggle" title="Changer de thème">
-                    <i class="fas fa-moon"></i>
-                </button>
-
-                <!-- Admin link if admin is logged in -->
-                {% if session.get('admin_logged_in') %}
-                <a href="{{ url_for('admin_bp.dashboard') }}" class="btn btn-primary btn-sm ms-2">
-                    <i class="fas fa-cog"></i> Gestion
-                </a>
-                {% endif %}
-            </div>
-        </div>
-    </header>
-
-    <!-- Sidebar Overlay -->
-    <div id="sidebar-overlay" class="sidebar-overlay"></div>
-
-    <!-- Sidebar 1: Matières -->
-    <nav id="sidebar-matieres" class="sidebar">
-        <div class="sidebar-header">
-            <h4>Matières</h4>
-            <button class="close-sidebar-btn" data-sidebar-id="sidebar-matieres" title="Fermer le menu">×</button>
-        </div>
-        <ul id="matieres-list-sidebar" class="sidebar-list">
-            {# Assure-toi de passer la variable 'matieres' depuis ta route Flask #}
-            {# Example: return render_template('index.html', matieres=get_all_matieres()) #}
-            {% if matieres %}
-                {% for matiere in matieres %}
-                    {# Utilise |e pour échapper les caractères spéciaux dans le nom pour l'attribut data #}
-                    <li data-matiere-id="{{ matiere.id }}" data-matiere-nom="{{ matiere.nom | e }}">
-                        {{ matiere.nom }}
-                        <i class="fas fa-chevron-right float-end"></i>
-                    </li>
-                {% endfor %}
-            {% else %}
-                <li>Aucune matière disponible.</li>
-            {% endif %}
-        </ul>
-    </nav>
-
-    <!-- Sidebar 2: Sous-catégories -->
-    <nav id="sidebar-sous-categories" class="sidebar">
-        <div class="sidebar-header">
-            <button id="sidebar-back-button" class="sidebar-back-button" title="Retour aux matières">
-                <i class="fas fa-arrow-left"></i>
-            </button>
-            <h4 id="sidebar-sous-categories-title">Sous-catégories</h4>
-            <button class="close-sidebar-btn" data-sidebar-id="sidebar-sous-categories" title="Fermer le menu">×</button>
-        </div>
-        <ul id="sous-categories-list-sidebar" class="sidebar-list">
-            <!-- Les sous-catégories seront chargées ici par JavaScript -->
-            <li>Chargement...</li>
-        </ul>
-    </nav>
-
-    <!-- Flash messages -->
-    <div class="container mt-3 flash-container">
-        {% with messages = get_flashed_messages(with_categories=true) %}
-            {% if messages %}
-                {% for category, message in messages %}
-                    <div class="alert alert-{{ category if category != 'message' else 'info' }} alert-dismissible fade show" role="alert">
-                        {{ message }}
-                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                    </div>
-                {% endfor %}
-            {% endif %}
-        {% endwith %}
-    </div>
-
-    <!-- Main content -->
-    <main class="main-content">
-        <div class="container">
-            {% block content %}{% endblock %}
-        </div>
-    </main>
-
-    <!-- Footer -->
-    <footer class="main-footer">
-        <div class="container footer-content">
-            
-
-            <!-- Feedback form -->
-            <div class="feedback-form">
-                <h4 class="feedback-title">Votre avis nous intéresse</h4>
-                <form id="feedback-form" action="{{ url_for('main_bp.submit_feedback') }}" method="POST">
-                    <div class="form-group mb-2">
-                        <textarea id="feedback-message" name="message" class="form-control" rows="2" placeholder="Laissez-nous un message..." required></textarea>
-                    </div>
-                    <button type="submit" class="btn btn-primary">Envoyer</button>
-                </form>
-            </div>
-        </div>
-    </footer>
-
-    <!-- Bootstrap JS Bundle with Popper -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-
-    <!-- Main JavaScript -->
-    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
-
-    <!-- Additional JavaScript -->
-    {% block scripts %}{% endblock %}
-</body>
-</html>

api/templates/index.html

@@ -1,40 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Accueil - Méthodologies{% endblock %}
-
-{% block content %}
-
-<!-- Initial Instructions -->
-{# Cette section est visible par défaut lorsque la page se charge #}
-{# Elle sera cachée par JavaScript une fois qu'un contenu est sélectionné via les sidebars #}
-<div id="initial-instructions" class="initial-instructions text-center mt-5">
-    <i class="fas fa-info-circle fa-3x text-muted mb-3"></i>
-    <h3>Bienvenue !</h3>
-    <p class="lead">Utilisez le menu <i class="fas fa-bars"></i> en haut à gauche pour naviguer.</p>
-    <p>Sélectionnez une matière, puis une sous-catégorie pour afficher le contenu ici.</p>
-</div>
-
-<!-- Content Display Section -->
-{# Cette section est cachée par défaut ('d-none') #}
-{# Elle sera rendue visible et remplie par JavaScript lorsque l'utilisateur sélectionne une sous-catégorie #}
-<section id="content-section" class="mb-5 d-none">
-    <div class="content-viewer">
-        <h2 id="content-title" class="content-title">
-            <!-- Le titre du contenu sera chargé ici par JavaScript -->
-        </h2>
-        <div id="content-blocks" class="content-blocks">
-            <!-- Les blocs de contenu seront chargés ici par JavaScript -->
-        </div>
-    </div>
-</section>
-
-{% endblock %}
-
-{% block scripts %}
-    {# Si tu as du JavaScript spécifique à cette page (peu probable maintenant que tout est dans main.js), tu peux l'ajouter ici #}
-    {# Par exemple : <script src="{{ url_for('static', filename='js/index_specific.js') }}"></script> #}
-{% endblock %}
-
-{% block styles %}
-    {# Si tu as du CSS spécifique à cette page, tu peux l'ajouter ici #}
-{% endblock %}