Update templates/gere.html

templates/gere.html

@@ -4,16 +4,19 @@
   <meta charset="UTF-8">
   <title>Gestion des Données</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
+  <!-- Bootstrap CSS with SRI -->
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+  <!-- Font Awesome CSS with SRI -->
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <style>
     body {
       background-color: #f8f9fa;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
-    
+
     .container {
-      max-width: 1200px;
+      /* Utilisation de container-fluid pour une meilleure largeur sur grand écran, ou garder max-width */
+      /* max-width: 1200px; */
       margin: 0 auto;
       padding: 2rem;
     }
@@ -32,45 +35,51 @@
     }
 
     .card:hover {
-      transform: translateY(-2px);
+      transform: translateY(-2px); /* Subtile effet au survol */
     }
 
     .card-header {
-      background-color: #f8f9fa;
+      background-color: #f8f9fa; /* Ou une couleur contrastante comme #e9ecef */
       border-bottom: 2px solid #e9ecef;
       font-weight: 600;
       padding: 1rem 1.25rem;
+      display: flex; /* Pour aligner icône et texte */
+      align-items: center;
     }
 
     .nav-tabs {
       border-bottom: 2px solid #dee2e6;
-      margin-bottom: 1rem;
+      margin-bottom: 1.5rem; /* Un peu plus d'espace */
     }
 
     .nav-tabs .nav-link {
       border: none;
+      border-bottom: 2px solid transparent; /* Préparer pour l'état actif */
       color: #6c757d;
       font-weight: 500;
       padding: 1rem 1.5rem;
       transition: all 0.2s ease-in-out;
+      display: inline-flex; /* Pour aligner icône et texte */
+      align-items: center;
+      gap: 0.5rem; /* Espace entre icône et texte */
     }
 
     .nav-tabs .nav-link:hover {
-      border: none;
+      border-bottom-color: #adb5bd; /* Léger indicateur au survol */
       color: #007bff;
     }
 
     .nav-tabs .nav-link.active {
       background-color: transparent;
-      border: none;
       border-bottom: 2px solid #007bff;
       color: #007bff;
+      font-weight: 600; /* Rendre l'onglet actif plus visible */
     }
 
     .list-group-item {
       border: none;
       border-bottom: 1px solid #e9ecef;
-      padding: 1rem;
+      padding: 1rem 1.25rem; /* Harmoniser padding avec card-header */
     }
 
     .list-group-item:last-child {
@@ -82,29 +91,19 @@
       padding: 0.5rem 1rem;
       transition: all 0.2s ease-in-out;
     }
+    /* Amélioration couleurs boutons (Bootstrap 4 utilise déjà ces couleurs, mais on peut affiner) */
+    .btn-warning { color: #212529; }
+    .btn-danger { color: #fff; }
+    .btn-success { color: #fff; }
+    .btn-info { color: #fff; }
+    .btn-primary { color: #fff; }
+    .btn-secondary { color: #fff; }
 
-    .btn-warning {
-      background-color: #ffc107;
-      border-color: #ffc107;
-      color: #212529;
-    }
-
-    .btn-danger {
-      background-color: #dc3545;
-      border-color: #dc3545;
-      color: #fff;
-    }
-
-    .btn-success {
-      background-color: #28a745;
-      border-color: #28a745;
-      color: #fff;
-    }
 
     .form-control {
       border-radius: 4px;
       border: 1px solid #ced4da;
-      padding: 0.5rem;
+      padding: 0.5rem 0.75rem; /* Ajustement padding */
     }
 
     .form-control:focus {
@@ -114,123 +113,176 @@
 
     .alert {
       border-radius: 4px;
-      margin-bottom: 1rem;
-      animation: fadeInOut 5s ease-in-out;
+      margin-bottom: 1.5rem; /* Cohérence espacement */
+      animation: fadeInOut 5s ease-in-out forwards; /* 'forwards' garde l'état final (opacity: 0) */
     }
 
     @keyframes fadeInOut {
       0% { opacity: 0; }
       10% { opacity: 1; }
-      90% { opacity: 1; }
-      100% { opacity: 0; }
+      90% { opacity: 1; transform: translateY(0); }
+      100% { opacity: 0; transform: translateY(-10px); } /* Légère animation de sortie */
     }
 
     .editable {
       display: none;
-      background-color: #f8f9fa;
+      background-color: #f0f2f5; /* Légèrement différent pour le mode édition */
       padding: 1rem;
+      border: 1px dashed #ced4da; /* Indicateur visuel */
       border-radius: 4px;
-      margin-top: 0.5rem;
+      margin-top: 1rem; /* Espace entre l'affichage et l'édition */
     }
 
     .display-mode {
       line-height: 1.5;
+      flex-grow: 1; /* Permet au texte de prendre l'espace disponible */
+      margin-right: 1rem; /* Espace avant les boutons */
+    }
+    .display-mode strong {
+      color: #343a40; /* Rendre le titre plus distinct */
+    }
+    .display-mode small {
+      display: block; /* Mettre les détails sur une nouvelle ligne si nécessaire */
+      margin-top: 0.25rem;
     }
 
     .action-buttons {
       display: flex;
       gap: 0.5rem;
+      flex-shrink: 0; /* Empêche les boutons de rétrécir */
     }
 
     .text-muted {
+      color: #6c757d !important; /* Forcer la couleur si nécessaire */
       font-size: 0.875rem;
     }
+    .text-muted i {
+        margin-left: 0.25rem; /* Espace avant l'icône dans small */
+    }
+
 
     .btn-icon {
       display: inline-flex;
       align-items: center;
-      gap: 0.5rem;
+      gap: 0.5rem; /* Espace entre icône et texte dans le bouton */
+    }
+
+    /* Styles spécifiques pour la partie IA */
+    #ia-loading .spinner-border {
+        width: 1.5rem;
+        height: 1.5rem;
     }
+    #ia-result-container {
+        border: 1px solid #e9ecef;
+        padding: 1rem;
+        background-color: #fff;
+        border-radius: 4px;
+    }
+    #ia_generated_content {
+        font-family: monospace; /* Utile pour du contenu potentiellement formaté */
+        background-color: #e9ecef; /* Indiquer que c'est en lecture seule */
+        font-size: 0.9rem;
+    }
+    .btn-group .btn { /* Assurer que les boutons dans btn-group s'affichent correctement */
+        margin-right: -1px; /* Correction pour Bootstrap 4 btn-group */
+    }
+    .btn-group .btn:not(:last-child) {
+         border-top-right-radius: 0;
+         border-bottom-right-radius: 0;
+    }
+    .btn-group .btn:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
   </style>
 </head>
 <body>
   <div class="container mt-4">
-    <h1 class="page-title">Gestion des Données</h1>
-
-    {% with messages = get_flashed_messages(with_categories=true) %}
-      {% if messages %}
-        {% for category, message in messages %}
-          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
-            {{ message }}
-            <button type="button" class="close" data-dismiss="alert" aria-label="Fermer">
-              <span aria-hidden="true">&times;</span>
-            </button>
-          </div>
-        {% endfor %}
-      {% endif %}
-    {% endwith %}
+    <h1 class="page-title text-center"><i class="fas fa-database mr-2"></i>Gestion des Données</h1>
+
+    <!-- Zone pour les messages flash -->
+    <div id="flash-message-container">
+        {% with messages = get_flashed_messages(with_categories=true) %}
+          {% if messages %}
+            {% for category, message in messages %}
+              <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
+                {{ message }}
+                <button type="button" class="close" data-dismiss="alert" aria-label="Fermer">
+                  <span aria-hidden="true">×</span>
+                </button>
+              </div>
+            {% endfor %}
+          {% endif %}
+        {% endwith %}
+    </div>
 
+    <!-- Onglets de navigation -->
     <ul class="nav nav-tabs" id="gestionTab" role="tablist">
-      <li class="nav-item">
-        <a class="nav-link active" id="matieres-tab" data-toggle="tab" href="#matieres" role="tab">
+      <li class="nav-item" role="presentation">
+        <a class="nav-link active" id="matieres-tab" data-toggle="tab" href="#matieres" role="tab" aria-controls="matieres" aria-selected="true">
           <i class="fas fa-book"></i> Matières
         </a>
       </li>
-      <li class="nav-item">
-        <a class="nav-link" id="sous-categories-tab" data-toggle="tab" href="#sous-categories" role="tab">
+      <li class="nav-item" role="presentation">
+        <a class="nav-link" id="sous-categories-tab" data-toggle="tab" href="#sous-categories" role="tab" aria-controls="sous-categories" aria-selected="false">
           <i class="fas fa-list"></i> Sous-Catégories
         </a>
       </li>
-      <li class="nav-item">
-        <a class="nav-link" id="textes-tab" data-toggle="tab" href="#textes" role="tab">
+      <li class="nav-item" role="presentation">
+        <a class="nav-link" id="textes-tab" data-toggle="tab" href="#textes" role="tab" aria-controls="textes" aria-selected="false">
           <i class="fas fa-file-alt"></i> Textes
         </a>
       </li>
-      <li class="nav-item">
-        <a class="nav-link" id="ajouter-tab" data-toggle="tab" href="#ajouter" role="tab">
+      <li class="nav-item" role="presentation">
+        <a class="nav-link" id="ajouter-tab" data-toggle="tab" href="#ajouter" role="tab" aria-controls="ajouter" aria-selected="false">
           <i class="fas fa-plus-circle"></i> Ajouter
         </a>
       </li>
     </ul>
 
+    <!-- Contenu des onglets -->
     <div class="tab-content" id="gestionTabContent">
+
       <!-- Onglet Matières -->
-      <div class="tab-pane fade show active" id="matieres" role="tabpanel">
+      <div class="tab-pane fade show active" id="matieres" role="tabpanel" aria-labelledby="matieres-tab">
         <div class="card">
           <div class="card-header">
             <i class="fas fa-book mr-2"></i>Liste des Matières
           </div>
           <ul class="list-group list-group-flush">
             {% for matiere in matieres %}
-              <li class="list-group-item">
+              <li class="list-group-item" id="matiere-{{ matiere.id }}">
                 <div class="d-flex justify-content-between align-items-center">
                   <span class="display-mode">{{ matiere.nom }}</span>
+                  <!-- Formulaire d'édition caché -->
+                  <form method="post" class="editable flex-grow-1 mr-2">
+                      <input type="hidden" name="action" value="edit_matiere_{{ matiere.id }}">
+                      <div class="input-group">
+                        <input type="text" name="edit_nom_matiere_{{ matiere.id }}" value="{{ matiere.nom }}" class="form-control" required>
+                        <div class="input-group-append">
+                          <button type="submit" class="btn btn-success btn-icon">
+                            <i class="fas fa-check"></i> Enregistrer
+                          </button>
+                          <button type="button" class="btn btn-secondary btn-icon cancel-edit">
+                            <i class="fas fa-times"></i> Annuler
+                          </button>
+                        </div>
+                      </div>
+                  </form>
+                  <!-- Boutons d'action visibles -->
                   <div class="action-buttons">
                     <button class="btn btn-warning btn-sm btn-icon edit-button">
                       <i class="fas fa-edit"></i> Modifier
                     </button>
-                    <form method="post" class="d-inline">
+                    <form method="post" class="d-inline delete-form">
                       <input type="hidden" name="action" value="delete_matiere_{{ matiere.id }}">
-                      <button type="submit" class="btn btn-danger btn-sm btn-icon" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette matière ?');">
+                      <button type="submit" class="btn btn-danger btn-sm btn-icon">
                         <i class="fas fa-trash"></i> Supprimer
                       </button>
                     </form>
                   </div>
                 </div>
-                <form method="post" class="editable">
-                  <input type="hidden" name="action" value="edit_matiere_{{ matiere.id }}">
-                  <div class="input-group">
-                    <input type="text" name="edit_nom_matiere_{{ matiere.id }}" value="{{ matiere.nom }}" class="form-control">
-                    <div class="input-group-append">
-                      <button type="submit" class="btn btn-success btn-icon">
-                        <i class="fas fa-check"></i> Enregistrer
-                      </button>
-                      <button type="button" class="btn btn-secondary btn-icon cancel-edit">
-                        <i class="fas fa-times"></i> Annuler
-                      </button>
-                    </div>
-                  </div>
-                </form>
               </li>
             {% else %}
               <li class="list-group-item text-center text-muted">Aucune matière trouvée.</li>
@@ -240,60 +292,60 @@
       </div>
 
       <!-- Onglet Sous-Catégories -->
-      <div class="tab-pane fade" id="sous-categories" role="tabpanel">
+      <div class="tab-pane fade" id="sous-categories" role="tabpanel" aria-labelledby="sous-categories-tab">
         <div class="card">
           <div class="card-header">
             <i class="fas fa-list mr-2"></i>Liste des Sous-Catégories
           </div>
           <ul class="list-group list-group-flush">
             {% for sous_categorie in sous_categories %}
-              <li class="list-group-item">
+              <li class="list-group-item" id="sous-categorie-{{ sous_categorie.id }}">
                 <div class="d-flex justify-content-between align-items-center">
-                  <span class="display-mode">
-                    {{ sous_categorie.nom }} 
-                    <small class="text-muted">
-                      <i class="fas fa-book mr-1"></i>{{ sous_categorie.matiere.nom }}
-                    </small>
-                  </span>
-                  <div class="action-buttons">
-                    <button class="btn btn-warning btn-sm btn-icon edit-button">
-                      <i class="fas fa-edit"></i> Modifier
-                    </button>
-                    <form method="post" class="d-inline">
-                      <input type="hidden" name="action" value="delete_sous_categorie_{{ sous_categorie.id }}">
-                      <button type="submit" class="btn btn-danger btn-sm btn-icon" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette sous-catégorie ?');">
-                        <i class="fas fa-trash"></i> Supprimer
-                      </button>
+                    <span class="display-mode">
+                        {{ sous_categorie.nom }}
+                        <small class="text-muted"><i class="fas fa-book"></i>{{ sous_categorie.matiere.nom }}</small>
+                    </span>
+                    <!-- Formulaire d'édition caché -->
+                    <form method="post" class="editable flex-grow-1 mr-2">
+                        <input type="hidden" name="action" value="edit_sous_categorie_{{ sous_categorie.id }}">
+                        <div class="form-row align-items-center">
+                            <div class="col-md-6 mb-2 mb-md-0">
+                                <input type="text" name="edit_nom_sous_categorie_{{ sous_categorie.id }}" value="{{ sous_categorie.nom }}" class="form-control" placeholder="Nom" required>
+                            </div>
+                            <div class="col-md-4 mb-2 mb-md-0">
+                                <select name="edit_matiere_id_{{ sous_categorie.id }}" class="form-control" required>
+                                {% for matiere in matieres %}
+                                    <option value="{{ matiere.id }}" {% if matiere.id == sous_categorie.matiere_id %}selected{% endif %}>
+                                    {{ matiere.nom }}
+                                    </option>
+                                {% endfor %}
+                                </select>
+                            </div>
+                            <div class="col-md-2">
+                                <div class="btn-group" role="group">
+                                    <button type="submit" class="btn btn-success btn-icon">
+                                        <i class="fas fa-check"></i> <span class="d-none d-lg-inline">Enr.</span>
+                                    </button>
+                                    <button type="button" class="btn btn-secondary btn-icon cancel-edit">
+                                        <i class="fas fa-times"></i> <span class="d-none d-lg-inline">Ann.</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
                     </form>
-                  </div>
-                </div>
-                <form method="post" class="editable">
-                  <input type="hidden" name="action" value="edit_sous_categorie_{{ sous_categorie.id }}">
-                  <div class="form-row">
-                    <div class="col-md-6 mb-2">
-                      <input type="text" name="edit_nom_sous_categorie_{{ sous_categorie.id }}" value="{{ sous_categorie.nom }}" class="form-control" placeholder="Nom">
-                    </div>
-                    <div class="col-md-4 mb-2">
-                      <select name="edit_matiere_id_{{ sous_categorie.id }}" class="form-control">
-                        {% for matiere in matieres %}
-                          <option value="{{ matiere.id }}" {% if matiere.id == sous_categorie.matiere_id %}selected{% endif %}>
-                            {{ matiere.nom }}
-                          </option>
-                        {% endfor %}
-                      </select>
-                    </div>
-                    <div class="col-md-2">
-                      <div class="btn-group">
-                        <button type="submit" class="btn btn-success btn-icon">
-                          <i class="fas fa-check"></i> Enregistrer
+                    <!-- Boutons d'action visibles -->
+                    <div class="action-buttons">
+                        <button class="btn btn-warning btn-sm btn-icon edit-button">
+                        <i class="fas fa-edit"></i> Modifier
                         </button>
-                        <button type="button" class="btn btn-secondary btn-icon cancel-edit">
-                          <i class="fas fa-times"></i> Annuler
+                        <form method="post" class="d-inline delete-form">
+                        <input type="hidden" name="action" value="delete_sous_categorie_{{ sous_categorie.id }}">
+                        <button type="submit" class="btn btn-danger btn-sm btn-icon">
+                            <i class="fas fa-trash"></i> Supprimer
                         </button>
-                      </div>
+                        </form>
                     </div>
-                  </div>
-                </form>
+                </div>
               </li>
             {% else %}
               <li class="list-group-item text-center text-muted">Aucune sous-catégorie trouvée.</li>
@@ -303,65 +355,71 @@
       </div>
 
       <!-- Onglet Textes -->
-      <div class="tab-pane fade" id="textes" role="tabpanel">
+      <div class="tab-pane fade" id="textes" role="tabpanel" aria-labelledby="textes-tab">
         <div class="card">
           <div class="card-header">
             <i class="fas fa-file-alt mr-2"></i>Liste des Textes
           </div>
           <ul class="list-group list-group-flush">
             {% for texte in textes %}
-              <li class="list-group-item">
-                <div class="d-flex justify-content-between align-items-center">
-                  <span class="display-mode">
-                    <strong>{{ texte.titre }}</strong>
-                    <br>
-                    <small class="text-muted">
-                      <i class="fas fa-list mr-1"></i>{{ texte.sous_categorie.nom }} 
-                      <i class="fas fa-book ml-2 mr-1"></i>{{ texte.sous_categorie.matiere.nom }}
-                    </small>
-                  </span>
-                  <div class="action-buttons">
-                    <button class="btn btn-warning btn-sm btn-icon edit-button">
-                      <i class="fas fa-edit"></i> Modifier
-                    </button>
-                    <form method="post" class="d-inline">
-                      <input type="hidden" name="action" value="delete_texte_{{ texte.id }}">
-                      <button type="submit" class="btn btn-danger btn-sm btn-icon" onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce texte ?');">
-                        <i class="fas fa-trash"></i> Supprimer
-                      </button>
+              <li class="list-group-item" id="texte-{{ texte.id }}">
+                 <div class="d-flex justify-content-between align-items-start"> <!-- align-items-start pour contenu multiligne -->
+                    <span class="display-mode">
+                        <strong>{{ texte.titre }}</strong>
+                        <small class="text-muted">
+                            <i class="fas fa-list"></i>{{ texte.sous_categorie.nom }}
+                            <i class="fas fa-book"></i>{{ texte.sous_categorie.matiere.nom }}
+                        </small>
+                        <!-- Optionnel: Aperçu du contenu -->
+                        <!-- <p class="text-muted mt-1 mb-0 small">{{ texte.contenu | truncate(100) }}</p> -->
+                    </span>
+                     <!-- Formulaire d'édition caché -->
+                    <form method="post" class="editable flex-grow-1 mr-2">
+                        <input type="hidden" name="action" value="edit_texte_{{ texte.id }}">
+                        <div class="form-group">
+                            <label for="edit_titre_texte_{{ texte.id }}" class="sr-only">Titre</label>
+                            <input type="text" id="edit_titre_texte_{{ texte.id }}" name="edit_titre_texte_{{ texte.id }}" value="{{ texte.titre }}" class="form-control mb-2" placeholder="Titre" required>
+                        </div>
+                        <div class="form-group">
+                             <label for="edit_contenu_texte_{{ texte.id }}" class="sr-only">Contenu</label>
+                            <textarea id="edit_contenu_texte_{{ texte.id }}" name="edit_contenu_texte_{{ texte.id }}" class="form-control mb-2" rows="4" placeholder="Contenu" required>{{ texte.contenu }}</textarea>
+                        </div>
+                        <div class="form-row align-items-center">
+                            <div class="col-md-8 mb-2 mb-md-0">
+                                 <label for="edit_sous_categorie_id_{{ texte.id }}" class="sr-only">Sous-catégorie</label>
+                                <select id="edit_sous_categorie_id_{{ texte.id }}" name="edit_sous_categorie_id_{{ texte.id }}" class="form-control" required>
+                                {% for sous_categorie in sous_categories %}
+                                    <option value="{{ sous_categorie.id }}" {% if sous_categorie.id == texte.sous_categorie_id %}selected{% endif %}>
+                                    {{ sous_categorie.nom }} ({{ sous_categorie.matiere.nom }})
+                                    </option>
+                                {% endfor %}
+                                </select>
+                            </div>
+                            <div class="col-md-4">
+                                <div class="btn-group" role="group">
+                                <button type="submit" class="btn btn-success btn-icon">
+                                    <i class="fas fa-check"></i> <span class="d-none d-lg-inline">Enr.</span>
+                                </button>
+                                <button type="button" class="btn btn-secondary btn-icon cancel-edit">
+                                    <i class="fas fa-times"></i> <span class="d-none d-lg-inline">Ann.</span>
+                                </button>
+                                </div>
+                            </div>
+                        </div>
                     </form>
-                  </div>
-                </div>
-                <form method="post" class="editable">
-                  <input type="hidden" name="action" value="edit_texte_{{ texte.id }}">
-                  <div class="form-group">
-                    <input type="text" name="edit_titre_texte_{{ texte.id }}" value="{{ texte.titre }}" class="form-control" placeholder="Titre">
-                  </div>
-                  <div class="form-group">
-                    <textarea name="edit_contenu_texte_{{ texte.id }}" class="form-control" rows="3" placeholder="Contenu">{{ texte.contenu }}</textarea>
-                  </div>
-                  <div class="form-row">
-                    <div class="col-md-8 mb-2">
-                      <select name="edit_sous_categorie_id_{{ texte.id }}" class="form-control">
-                        {% for sous_categorie in sous_categories %}
-                          <option value="{{ sous_categorie.id }}" {% if sous_categorie.id == texte.sous_categorie_id %}selected{% endif %}>
-                            {{ sous_categorie.nom }} ({{ sous_categorie.matiere.nom }})
-                          </option>
-                        {% endfor %}
-                      </select>
-                    </div>
-                    <div class="col-md-4">
-                      <div class="btn-group">
-                        <button type="submit" class="btn btn-success btn-icon">
-                          <i class="fas fa-check"></i> Enregistrer
+                    <!-- Boutons d'action visibles -->
+                    <div class="action-buttons">
+                        <button class="btn btn-warning btn-sm btn-icon edit-button">
+                        <i class="fas fa-edit"></i> Modifier
                         </button>
-                        <button type="button" class="btn btn-secondary btn-icon cancel-edit">
-                          <i class="fas fa-times"></i> Annuler
+                        <form method="post" class="d-inline delete-form">
+                        <input type="hidden" name="action" value="delete_texte_{{ texte.id }}">
+                        <button type="submit" class="btn btn-danger btn-sm btn-icon">
+                            <i class="fas fa-trash"></i> Supprimer
                         </button>
-                      </div>
+                        </form>
                     </div>
-                  </div>
-                </form>
+                </div>
               </li>
             {% else %}
               <li class="list-group-item text-center text-muted">Aucun texte trouvé.</li>
@@ -371,284 +429,365 @@
       </div>
 
       <!-- Onglet Ajouter -->
-      <div class="tab-pane fade" id="ajouter" role="tabpanel">
-        <!-- Formulaire d'ajout d'une matière -->
-        <div class="card mt-3">
-          <div class="card-header">
-            <i class="fas fa-plus-circle mr-2"></i>Ajouter une Matière
-          </div>
-          <div class="card-body">
-            <form method="post">
-              <input type="hidden" name="action" value="add_matiere">
-              <div class="form-group">
-                <label for="nom_matiere">Nom de la Matière</label>
-                <input type="text" id="nom_matiere" name="nom_matiere" class="form-control" required>
+      <div class="tab-pane fade" id="ajouter" role="tabpanel" aria-labelledby="ajouter-tab">
+        <div class="row">
+          <!-- Colonne pour Matière et Sous-catégorie -->
+          <div class="col-md-6">
+            <!-- Formulaire d'ajout d'une matière -->
+            <div class="card mb-4">
+              <div class="card-header">
+                <i class="fas fa-plus-circle mr-2"></i>Ajouter une Matière
               </div>
-              <button type="submit" class="btn btn-primary btn-icon">
-                <i class="fas fa-plus"></i> Ajouter
-              </button>
-            </form>
-          </div>
-        </div>
+              <div class="card-body">
+                <form method="post">
+                  <input type="hidden" name="action" value="add_matiere">
+                  <div class="form-group">
+                    <label for="nom_matiere">Nom de la Matière</label>
+                    <input type="text" id="nom_matiere" name="nom_matiere" class="form-control" required>
+                  </div>
+                  <button type="submit" class="btn btn-primary btn-icon">
+                    <i class="fas fa-plus"></i> Ajouter Matière
+                  </button>
+                </form>
+              </div>
+            </div>
 
-        <!-- Formulaire d'ajout d'une sous-catégorie -->
-        <div class="card mt-3">
-          <div class="card-header">
-            <i class="fas fa-plus-circle mr-2"></i>Ajouter une Sous-Catégorie
-          </div>
-          <div class="card-body">
-            <form method="post">
-              <input type="hidden" name="action" value="add_sous_categorie">
-              <div class="form-group">
-                <label for="nom_sous_categorie">Nom de la Sous-Catégorie</label>
-                <input type="text" id="nom_sous_categorie" name="nom_sous_categorie" class="form-control" required>
+            <!-- Formulaire d'ajout d'une sous-catégorie -->
+            <div class="card">
+              <div class="card-header">
+                <i class="fas fa-plus-circle mr-2"></i>Ajouter une Sous-Catégorie
               </div>
-              <div class="form-group">
-                <label for="matiere_id">Matière associée</label>
-                <select id="matiere_id" name="matiere_id" class="form-control" required>
-                  {% for matiere in matieres %}
-                    <option value="{{ matiere.id }}">{{ matiere.nom }}</option>
-                  {% endfor %}
-                </select>
+              <div class="card-body">
+                <form method="post">
+                  <input type="hidden" name="action" value="add_sous_categorie">
+                  <div class="form-group">
+                    <label for="nom_sous_categorie">Nom de la Sous-Catégorie</label>
+                    <input type="text" id="nom_sous_categorie" name="nom_sous_categorie" class="form-control" required>
+                  </div>
+                  <div class="form-group">
+                    <label for="matiere_id">Matière associée</label>
+                    <select id="matiere_id" name="matiere_id" class="form-control" required>
+                      <option value="" disabled selected>Choisir une matière...</option>
+                      {% for matiere in matieres %}
+                        <option value="{{ matiere.id }}">{{ matiere.nom }}</option>
+                      {% endfor %}
+                    </select>
+                  </div>
+                  <button type="submit" class="btn btn-primary btn-icon">
+                    <i class="fas fa-plus"></i> Ajouter Sous-Catégorie
+                  </button>
+                </form>
               </div>
-              <button type="submit" class="btn btn-primary btn-icon">
-                <i class="fas fa-plus"></i> Ajouter
-              </button>
-            </form>
-          </div>
-        </div>
-
-        <!-- Formulaire d'ajout d'un texte avec module IA -->
-<div class="card mt-3">
-  <div class="card-header">
-    <i class="fas fa-plus-circle mr-2"></i>Ajouter un Texte
-  </div>
-  <div class="card-body">
-    <ul class="nav nav-tabs" id="textInputTabs" role="tablist">
-      <li class="nav-item">
-        <a class="nav-link active" id="manual-tab" data-toggle="tab" href="#manual-input" role="tab">
-          <i class="fas fa-edit"></i> Saisie Manuelle
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" id="ia-tab" data-toggle="tab" href="#ia-input" role="tab">
-          <i class="fas fa-robot"></i> Génération IA
-        </a>
-      </li>
-    </ul>
-    
-    <div class="tab-content mt-3" id="textInputTabContent">
-      <!-- Onglet Saisie Manuelle -->
-      <div class="tab-pane fade show active" id="manual-input" role="tabpanel">
-        <form method="post">
-          <input type="hidden" name="action" value="add_texte">
-          <div class="form-group">
-            <label for="titre_texte">Titre du Texte</label>
-            <input type="text" id="titre_texte" name="titre_texte" class="form-control" required>
-          </div>
-          <div class="form-group">
-            <label for="contenu_texte">Contenu du Texte</label>
-            <textarea id="contenu_texte" name="contenu_texte" class="form-control" rows="5" required></textarea>
-          </div>
-          <div class="form-group">
-            <label for="sous_categorie_id">Sous-Catégorie</label>
-            <select id="sous_categorie_id" name="sous_categorie_id" class="form-control" required>
-              {% for sous_categorie in sous_categories %}
-                <option value="{{ sous_categorie.id }}">{{ sous_categorie.nom }} ({{ sous_categorie.matiere.nom }})</option>
-              {% endfor %}
-            </select>
-          </div>
-          <button type="submit" class="btn btn-primary btn-icon">
-            <i class="fas fa-plus"></i> Ajouter
-          </button>
-        </form>
-      </div>
-      
-      <!-- Onglet Génération IA -->
-      <div class="tab-pane fade" id="ia-input" role="tabpanel">
-        <form method="post" id="ia-generation-form">
-          <input type="hidden" name="action" value="generate_ia_content">
-          <div class="form-group">
-            <label for="ia_titre_texte">Titre du Texte</label>
-            <input type="text" id="ia_titre_texte" name="ia_titre_texte" class="form-control" required>
-          </div>
-          <div class="form-group">
-            <label for="youtube_url">URL de la vidéo YouTube</label>
-            <input type="url" id="youtube_url" name="youtube_url" class="form-control" placeholder="https://www.youtube.com/watch?v=..." required>
-          </div>
-          <div class="form-group">
-            <label for="ia_prompt">Prompt pour l'IA</label>
-            <textarea id="ia_prompt" name="ia_prompt" class="form-control" rows="3" placeholder="Exemple: Faire un résumé détaillé de cette vidéo avec les points clés" required></textarea>
-          </div>
-          <div class="form-group">
-            <label for="ia_model">Modèle Gemini</label>
-            <select id="ia_model" name="ia_model" class="form-control">
-              <option value="gemini-2.5-pro-exp-03-25">gemini-2.5-pro-exp-03-25</option>
-              <option value="gemini-1.5-pro">gemini-2.0-flash</option>
-              <option value="gemini-1.5-flash">gemini-1.5-flash</option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label for="ia_sous_categorie_id">Sous-Catégorie</label>
-            <select id="ia_sous_categorie_id" name="ia_sous_categorie_id" class="form-control" required>
-              {% for sous_categorie in sous_categories %}
-                <option value="{{ sous_categorie.id }}">{{ sous_categorie.nom }} ({{ sous_categorie.matiere.nom }})</option>
-              {% endfor %}
-            </select>
-          </div>
-          <button type="submit" id="generate-content-btn" class="btn btn-info btn-icon">
-            <i class="fas fa-magic"></i> Générer le Contenu
-          </button>
-          <div id="ia-loading" class="mt-3 d-none">
-            <div class="spinner-border text-primary" role="status">
-              <span class="sr-only">Génération en cours...</span>
             </div>
-            <span class="ml-2">Analyse de la vidéo en cours, veuillez patienter...</span>
           </div>
-          <div id="ia-result-container" class="mt-3 d-none">
-            <div class="form-group">
-              <label for="ia_generated_content">Contenu Généré</label>
-              <textarea id="ia_generated_content" name="ia_generated_content" class="form-control" rows="10" readonly></textarea>
+
+          <!-- Colonne pour Texte -->
+          <div class="col-md-6">
+            <!-- Formulaire d'ajout d'un texte avec module IA -->
+            <div class="card">
+              <div class="card-header">
+                <i class="fas fa-plus-circle mr-2"></i>Ajouter un Texte
+              </div>
+              <div class="card-body">
+                <ul class="nav nav-pills mb-3" id="textInputTabs" role="tablist">
+                  <li class="nav-item">
+                    <a class="nav-link active" id="manual-tab" data-toggle="pill" href="#manual-input" role="tab" aria-controls="manual-input" aria-selected="true">
+                      <i class="fas fa-edit mr-1"></i> Manuel
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" id="ia-tab" data-toggle="pill" href="#ia-input" role="tab" aria-controls="ia-input" aria-selected="false">
+                      <i class="fas fa-robot mr-1"></i> Génération IA
+                    </a>
+                  </li>
+                </ul>
+
+                <div class="tab-content" id="textInputTabContent">
+                  <!-- Onglet Saisie Manuelle -->
+                  <div class="tab-pane fade show active" id="manual-input" role="tabpanel" aria-labelledby="manual-tab">
+                    <form method="post" id="manual-add-text-form">
+                      <input type="hidden" name="action" value="add_texte">
+                      <div class="form-group">
+                        <label for="titre_texte">Titre du Texte</label>
+                        <input type="text" id="titre_texte" name="titre_texte" class="form-control" required>
+                      </div>
+                      <div class="form-group">
+                        <label for="contenu_texte">Contenu du Texte</label>
+                        <textarea id="contenu_texte" name="contenu_texte" class="form-control" rows="5" required></textarea>
+                      </div>
+                      <div class="form-group">
+                        <label for="sous_categorie_id">Sous-Catégorie</label>
+                        <select id="sous_categorie_id" name="sous_categorie_id" class="form-control" required>
+                          <option value="" disabled selected>Choisir une sous-catégorie...</option>
+                          {% for sous_categorie in sous_categories %}
+                            <option value="{{ sous_categorie.id }}">{{ sous_categorie.nom }} ({{ sous_categorie.matiere.nom }})</option>
+                          {% endfor %}
+                        </select>
+                      </div>
+                      <button type="submit" class="btn btn-primary btn-icon">
+                        <i class="fas fa-plus"></i> Ajouter Texte Manuel
+                      </button>
+                    </form>
+                  </div>
+
+                  <!-- Onglet Génération IA -->
+                  <div class="tab-pane fade" id="ia-input" role="tabpanel" aria-labelledby="ia-tab">
+                    <form id="ia-generation-form"> <!-- Pas de method="post" ici, géré par AJAX -->
+                      <input type="hidden" name="action" value="generate_ia_content"> <!-- Gardé pour info, mais pas soumis classiquement -->
+                      <div class="form-group">
+                        <label for="ia_titre_texte">Titre du Texte (pour référence)</label>
+                        <input type="text" id="ia_titre_texte" name="ia_titre_texte" class="form-control" required>
+                      </div>
+                      <div class="form-group">
+                        <label for="youtube_url">URL de la vidéo YouTube</label>
+                        <input type="url" id="youtube_url" name="youtube_url" class="form-control" placeholder="https://www.youtube.com/watch?v=..." required>
+                      </div>
+                      <div class="form-group">
+                        <label for="ia_prompt">Instruction pour l'IA (Prompt)</label>
+                        <textarea id="ia_prompt" name="ia_prompt" class="form-control" rows="3" placeholder="Ex: Faire un résumé détaillé de cette vidéo avec les points clés et des exemples." required></textarea>
+                      </div>
+                      <div class="form-group">
+                        <label for="ia_model">Modèle Gemini</label>
+                        <select id="ia_model" name="ia_model" class="form-control">
+                          <option value="gemini-2.5-pro-exp-03-25">gemini-2.5-pro-exp-03-25</option>
+                          <option value="gemini-2.0-flash">gemini-2.0-flash</option>
+                           <!-- Ajouter d'autres modèles si disponibles/pertinents -->
+                          </select>
+                      </div>
+                      <div class="form-group">
+                        <label for="ia_sous_categorie_id">Sous-Catégorie (pour classement)</label>
+                        <select id="ia_sous_categorie_id" name="ia_sous_categorie_id" class="form-control" required>
+                           <option value="" disabled selected>Choisir une sous-catégorie...</option>
+                          {% for sous_categorie in sous_categories %}
+                            <option value="{{ sous_categorie.id }}">{{ sous_categorie.nom }} ({{ sous_categorie.matiere.nom }})</option>
+                          {% endfor %}
+                        </select>
+                      </div>
+                      <button type="submit" id="generate-content-btn" class="btn btn-info btn-icon">
+                        <i class="fas fa-magic"></i> Générer le Contenu
+                      </button>
+                      <div id="ia-loading" class="mt-3 d-none">
+                        <div class="spinner-border text-primary" role="status">
+                          <span class="sr-only">Génération en cours...</span>
+                        </div>
+                        <span class="ml-2 align-middle">Analyse de la vidéo et génération en cours, veuillez patienter...</span>
+                      </div>
+                      <!-- Zone pour afficher les erreurs AJAX -->
+                      <div id="ia-error-container" class="mt-3 alert alert-danger d-none" role="alert"></div>
+                      <!-- Zone pour afficher le résultat -->
+                      <div id="ia-result-container" class="mt-3 d-none">
+                        <div class="form-group">
+                          <label for="ia_generated_content"><strong>Contenu Généré</strong></label>
+                          <textarea id="ia_generated_content" name="ia_generated_content" class="form-control" rows="10" readonly></textarea>
+                        </div>
+                        <button type="button" id="use-content-btn" class="btn btn-success btn-icon">
+                          <i class="fas fa-check"></i> Utiliser ce Contenu
+                        </button>
+                        <button type="button" id="modify-content-btn" class="btn btn-warning btn-icon ml-2">
+                          <i class="fas fa-edit"></i> Modifier avant Utilisation
+                        </button>
+                      </div>
+                    </form>
+                    <!-- Formulaire caché pour soumettre le texte généré/finalisé -->
+                    <form method="post" id="submit-ia-content-form" class="d-none">
+                      <input type="hidden" name="action" value="add_texte">
+                      <input type="hidden" id="final_titre_texte" name="titre_texte">
+                      <input type="hidden" id="final_contenu_texte" name="contenu_texte">
+                      <input type="hidden" id="final_sous_categorie_id" name="sous_categorie_id">
+                    </form>
+                  </div>
+                </div>
+              </div>
             </div>
-            <button type="button" id="use-content-btn" class="btn btn-success btn-icon">
-              <i class="fas fa-check"></i> Utiliser ce Contenu
-            </button>
-            <button type="button" id="modify-content-btn" class="btn btn-warning btn-icon ml-2">
-              <i class="fas fa-edit"></i> Modifier avant Utilisation
-            </button>
           </div>
-        </form>
-        <form method="post" id="submit-ia-content-form" class="d-none">
-          <input type="hidden" name="action" value="add_texte">
-          <input type="hidden" id="final_titre_texte" name="titre_texte">
-          <input type="hidden" id="final_contenu_texte" name="contenu_texte">
-          <input type="hidden" id="final_sous_categorie_id" name="sous_categorie_id">
-        </form>
-      </div>
-    </div>
-  </div>
-</div>
-
+        </div>
+      </div><!-- Fin Onglet Ajouter -->
 
-  
+    </div> <!-- Fin tab-content -->
+  </div> <!-- Fin container -->
 
   <!-- Scripts -->
-  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+  <!-- jQuery with SRI -->
+  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+  <!-- Popper.js with SRI -->
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+  <!-- Bootstrap JS with SRI -->
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
+
   <script>
     $(document).ready(function() {
-      // Gestion des boutons Modifier
+
+      // --- Gestion Générale UI ---
+
+      // Initialiser les tooltips si vous en ajoutez
+      // $('[data-toggle="tooltip"]').tooltip();
+
+      // Faire disparaître les messages flash après un délai
+      $('#flash-message-container .alert').delay(5000).fadeOut(1000);
+
+      // --- Gestion Édition Inline ---
+
+      // Clic sur le bouton "Modifier"
       $(document).on('click', '.edit-button', function(e) {
         e.preventDefault();
-        const listItem = $(this).closest('li');
+        const listItem = $(this).closest('.list-group-item');
+        // Cache tous les autres formulaires d'édition ouverts dans la même liste
+        listItem.siblings().find('.editable').slideUp();
+        listItem.siblings().find('.display-mode, .action-buttons').show();
+        // Affiche le formulaire d'édition pour cet item
         listItem.find('.editable').slideDown();
-        listItem.find('.display-mode').hide();
-        $(this).hide();
+        listItem.find('.display-mode, .action-buttons').hide();
+        // Focus sur le premier input du formulaire éditable
+        listItem.find('.editable').find('input[type="text"], textarea').first().focus();
       });
 
-      // Gestion des boutons Annuler
+      // Clic sur le bouton "Annuler" dans un formulaire d'édition
       $(document).on('click', '.cancel-edit', function(e) {
         e.preventDefault();
-        const listItem = $(this).closest('li');
+        const listItem = $(this).closest('.list-group-item');
         listItem.find('.editable').slideUp();
-        listItem.find('.display-mode').show();
-        listItem.find('.edit-button').show();
+        listItem.find('.display-mode, .action-buttons').show();
+        // Optionnel: Réinitialiser les valeurs du formulaire aux valeurs d'origine si nécessaire
+        // (nécessiterait de stocker les valeurs initiales ou de ne pas soumettre le formulaire)
       });
 
-      // Animation pour les alertes
-      $('.alert').delay(4000).fadeOut(500);
+      // --- Gestion Suppression ---
 
-      // Confirmation personnalisée pour la suppression
-      $('form[method="post"]').on('submit', function(e) {
-        if ($(this).find('button[type="submit"]').hasClass('btn-danger')) {
-          if (!confirm('Êtes-vous sûr de vouloir supprimer cet élément ?')) {
-            e.preventDefault();
+      // Intercepter la soumission des formulaires de suppression pour confirmation
+      $(document).on('submit', 'form.delete-form', function(e) {
+        const actionInput = $(this).find('input[name="action"]');
+        // Vérifier si c'est bien une action de suppression
+        if (actionInput.length > 0 && actionInput.val().startsWith('delete_')) {
+          // Utiliser une boîte de dialogue de confirmation
+          if (!confirm('Êtes-vous sûr de vouloir supprimer cet élément ? Cette action est irréversible.')) {
+            e.preventDefault(); // Annuler la soumission si l'utilisateur clique sur "Annuler"
           }
+          // Si l'utilisateur confirme, le formulaire est soumis normalement
         }
       });
-    });
-
-// Ajouter ce code à la fin de votre script existant dans gere.html (avant la balise </script> finale)
-
-// Fonctionnalité pour la génération de contenu IA
-$(document).ready(function() {
-  // Gestionnaire pour le formulaire de génération IA
-  $('#ia-generation-form').on('submit', function(e) {
-    e.preventDefault();
-    
-    const youtubeUrl = $('#youtube_url').val();
-    const prompt = $('#ia_prompt').val();
-    const model = $('#ia_model').val();
-    
-    if (!youtubeUrl || !prompt) {
-      alert('Veuillez remplir tous les champs requis.');
-      return;
-    }
-    
-    // Afficher l'indicateur de chargement
-    $('#generate-content-btn').prop('disabled', true);
-    $('#ia-loading').removeClass('d-none');
-    $('#ia-result-container').addClass('d-none');
-    
-    // Appel AJAX pour générer le contenu
-    $.ajax({
-      url: '/generate-content',
-      type: 'POST',
-      contentType: 'application/json',
-      data: JSON.stringify({
-        youtube_url: youtubeUrl,
-        prompt: prompt,
-        model: model
-      }),
-      success: function(response) {
-        $('#generate-content-btn').prop('disabled', false);
-        $('#ia-loading').addClass('d-none');
-        
-        if (response.success) {
-          // Afficher le résultat
-          $('#ia_generated_content').val(response.text);
-          $('#ia-result-container').removeClass('d-none');
-        } else {
-          alert('Erreur lors de la génération du contenu: ' + response.error);
+
+
+      // --- Gestion Génération IA ---
+
+      $('#ia-generation-form').on('submit', function(e) {
+        e.preventDefault(); // Empêche la soumission classique du formulaire
+
+        const generateBtn = $('#generate-content-btn');
+        const loadingIndicator = $('#ia-loading');
+        const resultContainer = $('#ia-result-container');
+        const errorContainer = $('#ia-error-container');
+        const generatedContentTextarea = $('#ia_generated_content');
+
+        const youtubeUrl = $('#youtube_url').val().trim();
+        const prompt = $('#ia_prompt').val().trim();
+        const model = $('#ia_model').val();
+        const title = $('#ia_titre_texte').val().trim();
+        const category = $('#ia_sous_categorie_id').val();
+
+        // Validation simple côté client
+        if (!youtubeUrl || !prompt || !title || !category) {
+          errorContainer.text('Veuillez remplir tous les champs requis pour la génération IA.').removeClass('d-none');
+          return;
+        }
+         // Validation basique de l'URL YouTube
+        const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+$/;
+        if (!youtubeRegex.test(youtubeUrl)) {
+            errorContainer.text('Veuillez entrer une URL YouTube valide.').removeClass('d-none');
+            return;
+        }
+
+
+        // Réinitialiser l'état UI
+        generateBtn.prop('disabled', true).find('i').removeClass('fa-magic').addClass('fa-spinner fa-spin');
+        loadingIndicator.removeClass('d-none');
+        resultContainer.addClass('d-none');
+        errorContainer.addClass('d-none').text('');
+        generatedContentTextarea.val('');
+
+        // Appel AJAX vers le backend Flask
+        $.ajax({
+          url: '/generate-content', // L'URL de votre route Flask pour la génération
+          type: 'POST',
+          contentType: 'application/json', // Important pour envoyer du JSON
+          data: JSON.stringify({ // Convertir les données JS en chaîne JSON
+            youtube_url: youtubeUrl,
+            prompt: prompt,
+            model: model
+            // Note: titre et catégorie ne sont pas envoyés pour génération, mais utilisés après
+          }),
+          success: function(response) {
+            if (response.success && response.text) {
+              generatedContentTextarea.val(response.text.trim()); // Afficher le texte reçu
+              resultContainer.removeClass('d-none'); // Afficher la zone de résultat
+            } else {
+              // Gérer les erreurs renvoyées par le backend (même si status 200)
+              const errorMessage = response.error || 'Une erreur inconnue est survenue lors de la génération.';
+              errorContainer.text('Erreur : ' + errorMessage).removeClass('d-none');
+            }
+          },
+          error: function(xhr, status, error) {
+            // Gérer les erreurs de communication réseau ou serveur (status != 2xx)
+            let errorMessage = 'Erreur lors de la communication avec le serveur. ';
+            if (xhr.responseJSON && xhr.responseJSON.error) {
+              errorMessage += xhr.responseJSON.error;
+            } else if (xhr.responseText) {
+                // Essayer d'afficher une partie de la réponse texte si JSON échoue
+                errorMessage += `(${xhr.status}: ${error}). Réponse: ${xhr.responseText.substring(0, 100)}...`;
+            } else {
+              errorMessage += `(${xhr.status}: ${error})`;
+            }
+             errorContainer.text(errorMessage).removeClass('d-none');
+          },
+          complete: function() {
+            // Quoi qu'il arrive (succès ou erreur), réactiver le bouton et cacher le spinner
+            generateBtn.prop('disabled', false).find('i').removeClass('fa-spinner fa-spin').addClass('fa-magic');
+            loadingIndicator.addClass('d-none');
+          }
+        });
+      });
+
+      // Bouton "Utiliser ce Contenu" (après génération IA)
+      $('#use-content-btn').on('click', function() {
+        const titre = $('#ia_titre_texte').val().trim();
+        const contenu = $('#ia_generated_content').val().trim();
+        const sousCategorieId = $('#ia_sous_categorie_id').val();
+
+        if (!titre || !contenu || !sousCategorieId) {
+           alert("Impossible d'utiliser le contenu : des informations (titre, contenu généré ou catégorie) sont manquantes.");
+           return;
         }
-      },
-      error: function(xhr, status, error) {
-        $('#generate-content-btn').prop('disabled', false);
-        $('#ia-loading').addClass('d-none');
-        alert('Erreur lors de la communication avec le serveur: ' + error);
-      }
-    });
-  });
-  
-  // Utiliser le contenu généré tel quel
-  $('#use-content-btn').on('click', function() {
-    const titre = $('#ia_titre_texte').val();
-    const contenu = $('#ia_generated_content').val();
-    const sousCategorie = $('#ia_sous_categorie_id').val();
-    
-    // Remplir le formulaire caché et le soumettre
-    $('#final_titre_texte').val(titre);
-    $('#final_contenu_texte').val(contenu);
-    $('#final_sous_categorie_id').val(sousCategorie);
-    $('#submit-ia-content-form').submit();
-  });
-  
-  // Modifier le contenu avant utilisation
-  $('#modify-content-btn').on('click', function() {
-    const titre = $('#ia_titre_texte').val();
-    const contenu = $('#ia_generated_content').val();
-    const sousCategorie = $('#ia_sous_categorie_id').val();
-    
-    // Basculer vers l'onglet manuel et préremplir les champs
-    $('#titre_texte').val(titre);
-    $('#contenu_texte').val(contenu);
-    $('#sous_categorie_id').val(sousCategorie);
-    $('#manual-tab').tab('show');
-  });
-});
-
-    
+
+        // Remplir le formulaire caché et le soumettre pour ajout
+        $('#final_titre_texte').val(titre);
+        $('#final_contenu_texte').val(contenu);
+        $('#final_sous_categorie_id').val(sousCategorieId);
+        $('#submit-ia-content-form').submit();
+      });
+
+      // Bouton "Modifier avant Utilisation" (après génération IA)
+      $('#modify-content-btn').on('click', function() {
+        const titre = $('#ia_titre_texte').val().trim();
+        const contenu = $('#ia_generated_content').val().trim();
+        const sousCategorieId = $('#ia_sous_categorie_id').val();
+
+        // Pré-remplir les champs du formulaire manuel
+        $('#titre_texte').val(titre);
+        $('#contenu_texte').val(contenu);
+        $('#sous_categorie_id').val(sousCategorieId);
+
+        // Basculer vers l'onglet de saisie manuelle
+        $('#manual-tab').tab('show'); // Utiliser Bootstrap pour changer d'onglet
+
+        // Optionnel: Faire défiler la page jusqu'au formulaire manuel
+        $('html, body').animate({
+            scrollTop: $("#manual-add-text-form").offset().top - 20 // -20 pour un peu d'espace au dessus
+        }, 500);
+
+        // Cacher la zone de résultat IA pour éviter la confusion
+         $('#ia-result-container').addClass('d-none');
+      });
+
+    }); // Fin $(document).ready
   </script>
 </body>
 </html>