/* ==========================================================================
   Feuille de Styles Globale - Plateforme Pédagogique
   VERSION : 2.0.0 (Refactoring & Organisation)
   AUTEURS : Jean-Pierre D. & Aura
   DESCRIPTION : Fichier CSS réorganisé pour la clarté et la maintenabilité.
   ========================================================================== */

/* ==========================================================================
   1. STYLES GLOBAUX & FONDATIONS (Body, Polices...)
   ========================================================================== */

body {
    font-family: 'Inter', sans-serif;
}

/* ==========================================================================
   2. COMPOSANTS RÉUTILISABLES & ÉLÉMENTS D'INTERFACE
   ========================================================================== */
   
/* --- Style pour l'Étiquette Sémantique du Bloc Riche --- */
.etiquette-semantique {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
    color: #1e3a8a; /* Un bleu profond et académique */
    padding-bottom: 0.25rem;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid #dbeafe; /* Un soulignement discret */
}

/* --- Cartes & Conteneurs Généraux --- */
.exercice-card {
    background-color: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 6px 10px -1px rgba(0,0,0,0.1), 0 4px 6px -1px rgba(0,0,0,0.06);
}

.exercice-element + .exercice-element {
    margin-top: 1.5rem; /* Espace entre les éléments de contenu */
}

/* --- Formulaires & Inputs --- */
.input-standard {
    width: 100%;
    padding: 0.5rem;
    border-width: 1px;
    border-radius: 0.375rem;
    border-color: #d1d5db; /* gray-300 */
}

.input-standard:focus {
    border-color: #3b82f6; /* blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.input-answer-container {
    width: 100%;
    max-width: 100%;
    position: relative; /* Pour le positionnement des icônes de feedback */
}

.input-answer {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 90px;
}
.editor-sticky-header {
  position: sticky;
  top: -1px; /* Petite astuce pour s'assurer que la bordure reste visible */
  background-color: white; /* Le fond doit etre opaque pour ne pas voir le contenu qui défile en dessous */
  padding-top: 1rem;
  padding-bottom: 1rem;
  z-index: 10; /* S'assure que l'en-tête passe au-dessus du reste du contenu */
  border-bottom: 1px solid #e5e7eb; /* Une petite ligne pour marquer la séparation */
  margin-bottom: 1rem;
}
/* --- CORRECTIF pour l'affichage en ligne de MathJax dans la classe .prose --- */
/* --- CORRECTIF pour l'affichage en ligne de MathJax PARTOUT --- */
/* --- CORRECTIF DÉFINITIF pour l'affichage en ligne de MathJax --- */
mjx-container {
    display: inline-block !important;
    vertical-align: middle;
}



/* --- Reset des Checkbox & Radio Buttons --- */
input[type='checkbox'],
input[type='radio'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 1.25em;
    width: 1.25em;
    border: 2px solid #6b7280; /* gray-500 */
    vertical-align: middle;
    position: relative;
    top: -0.1em;
    cursor: pointer;
}

input[type='radio'] {
    border-radius: 50%;
}

input[type='checkbox'] {
    border-radius: 0.25rem;
}

input[type='checkbox']:checked,
input[type='radio']:checked {
    border-color: #3b82f6; /* blue-500 */
    background-color: #3b82f6;
}

input[type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

input[type='radio']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

/* --- Badges & Indicateurs --- */
.mode-interactif-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    background-color: #e0f2fe; /* blue-100 */
    color: #0c4a6e; /* blue-900 */
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.help-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background-color: #6b7280; /* gray-500 */
    color: white;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    margin-left: 8px;
    user-select: none;
}
.help-icon:hover {
    background-color: #3b82f6; /* blue-500 */
}
/* guidage visuel pour le choix des étiquettes*/
.tag-recommended {
    border-color: #3b82f6; /* Bleu */
    box-shadow: 0 0 0 1px #3b82f6;
}

/* --- Composants d'UI spécifiques --- */
.module-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.module-list-item .delete-btn {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
}
.module-list-item:hover .delete-btn {
    visibility: visible;
    opacity: 1;
}
.module-list-item .delete-btn:hover {
    background-color: #fee2e2; /* red-100 */
}

.jns-separator {
    border-top: 1px solid #e2e8f0; /* slate-200 */
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}
.jns-label {
    font-style: italic;
    color: #475569; /* slate-600 */
}

/* --- Styles pour le Feedback des Inputs (Correct / Incorrect) --- */
.feedback-correct {
    /* On utilise le vert de succès, cohérent avec l'exercice d'appariement */
    border-color: #10b981 !important; /* green-500 */
    /* On ajoute une "aura" de couleur pour un feedback plus visible */
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3) !important;
}

.feedback-incorrect {
    /* On utilise le rouge d'erreur, cohérent avec l'exercice d'appariement */
    border-color: #ef4444 !important; /* red-500 */
    /* On ajoute une "aura" de couleur pour un feedback plus visible */
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3) !important;
}
/* --- CORRECTIF pour l'affichage en ligne de MathJax dans la classe .prose --- */
.prose mjx-container {
    display: inline-block !important;
    vertical-align: middle;
}
/* ==========================================================================
   3. STYLES SPÉCIFIQUES AUX ÉLÉMENTS DE CONTENU
   ========================================================================== */

/* --- Exercice d'Appariement (Matching) --- */
.matching-container {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: 0.5rem;
    flex-wrap: wrap;
}
.matching-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .matching-column {
        width: 48%;
        margin-bottom: 0;
    }
}
.matching-item {
    padding: 0.75rem;
    border: 2px solid #d1d5db;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    background-color: white;
    word-break: break-word;
    display: flex;
    align-items: center;
}
.matching-item:hover {
    border-color: #60a5fa;
}
.matching-item.selected {
    background-color: #bfdbfe;
    border-color: #3b82f6;
    font-weight: 600;
}
.matching-item.paired-success {
    background-color: #d1fae5;
    border-color: #10b981;
    opacity: 0.7;
    cursor: not-allowed;
}
.matching-item.paired-error {
    background-color: #fee2e2;
    border-color: #ef4444;
}
.matching-item.paired-color-1 { background-color: #fef3c7; border-color: #f59e0b; }
.matching-item.paired-color-2 { background-color: #dbeafe; border-color: #3b82f6; }
.matching-item.paired-color-3 { background-color: #fce7f3; border-color: #ec4899; }
.matching-item.paired-color-4 { background-color: #e0e7ff; border-color: #6366f1; }
.matching-item.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f3f4f6;
}
.shake {
    animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* --- Question Numérique (Feedback) --- */
.input-answer-container .feedback-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    font-weight: bold;
}
.input-answer-container .feedback-icon.success {
    color: #10b981;
}
.input-answer-container .feedback-icon.error {
    color: #ef4444;
}

/* --- Vidéo Intégrée --- */
.video-thumbnail-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Style pour les QCM en mode évaluation (sans bonne réponse) */
.checkbox-option.selection-evaluation {
    background-color: #eef2ff; /* indigo-50 */
    border-color: #6366f1;   /* indigo-500 */
}

/* ==========================================================================
   4. STYLES DES MISES EN PAGE (Layouts)
   ========================================================================== */

/* Layout Deux Colonnes Simple */
.exercice-card.layout-deux_colonnes_texte .exercice-introduction-media-container .exercice-enonce-general-wrapper > div {
     column-count: 2;
     column-gap: 2rem;
}

/* Layout Texte à Gauche, Image à Droite */
.exercice-card.layout-texte_gauche_image_droite .exercice-introduction-media-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.exercice-card.layout-texte_gauche_image_droite .exercice-enonce-general-wrapper {
    flex: 1;
    order: 1;
}
.exercice-card.layout-texte_gauche_image_droite .exercice-illustration-principale-wrapper {
    flex-basis: 30%;
    order: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Layout Image à Gauche, Texte à Droite */
.exercice-card.layout-image_gauche_texte_droite .exercice-introduction-media-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.exercice-card.layout-image_gauche_texte_droite .exercice-enonce-general-wrapper {
    flex: 1;
    order: 2;
}
.exercice-card.layout-image_gauche_texte_droite .exercice-illustration-principale-wrapper {
    flex-basis: 30%;
    order: 1;
}

/* Layout Texte Dessus, Image Dessous */
.exercice-card.layout-texte_dessus_image_dessous .exercice-introduction-media-container {
    display: flex;
    flex-direction: column;
}
.exercice-card.layout-texte_dessus_image_dessous .exercice-enonce-general-wrapper {
    order: 1;
    margin-bottom: 1rem;
}
.exercice-card.layout-texte_dessus_image_dessous .exercice-illustration-principale-wrapper {
    order: 2;
    display: flex;
    justify-content: center;
}

/* Layout Image Dessus, Texte Dessous */
.exercice-card.layout-image_dessus_texte_dessous .exercice-introduction-media-container {
    display: flex;
    flex-direction: column;
}
.exercice-card.layout-image_dessus_texte_dessous .exercice-enonce-general-wrapper {
    order: 2;
    margin-top: 1rem;
}
.exercice-card.layout-image_dessus_texte_dessous .exercice-illustration-principale-wrapper {
    order: 1;
}
/* ==========================================================================
   5. STYLES DE LA MISE EN PAGE PRINCIPALE (Layout)
   ========================================================================== */

/*
 * @description: Conteneur de la barre latérale gauche de l'application.
 * @note:
 * Cette classe a été créée pour remplacer la classe utilitaire Tailwind "w-1/4"
 * qui était directement dans le fichier HTML. En centralisant la définition
 * de la largeur ici, nous rendons le HTML plus lisible (sémantique) et la
 * maintenance de la mise en page beaucoup plus simple.
 * La largeur de 16.667% correspond à la classe "w-1/6" de Tailwind,
 * ce qui réalise la demande de réduction d'environ un tiers par rapport
 * aux 25% originaux.
*/
.app-layout__sidebar {
    width: 16.667%;
}

/* Empêche les éléments d'être coupés entre les colonnes */
.module-element {
	display: flow-root; /* Force l'élément à respecter le contexte des floats */
    break-inside: avoid;
}

/* ==========================================================================
   6. STYLES POUR LA VUE CHAPITRE (NUMÉROTATION ET STRUCTURE)
   ========================================================================== */

.section-title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 600; /* font-semibold */
    color: #2563eb; /* blue-600 */
    border-bottom: 3px solid #bfdbfe; /* border-blue-200 */
    padding-bottom: 0.75rem; /* pb-3 */
    margin-bottom: 2rem; /* mb-8 */
}

.module-title-numero {
    font-size: 1.75 rem; /* text-2xl */
    font-weight: 600; /* font-semibold */
    color: #1e293b; /* slate-800 */
    margin-bottom: 1.25rem;
}

.module-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #334155; /* slate-700 */
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0; /* slate-200 */
}
/* ==========================================================================
   7. STYLES SPÉCIFIQUES POUR LES CONTENEURS DE MODULES
   ========================================================================== */

/* Style pour les modules d'information (fond bleu, bordure gauche) */
.info-module-container {
    padding: 1.5rem;
    background-color: #eff6ff; /* bg-blue-50 */
    border-left: 4px solid #3b82f6; /* border-blue-500 */
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Style pour le module de Bilan (fond vert, bordure gauche) */
.bilan-module-container {
    padding: 1.5rem;
    background-color: #f0fdfa; /* bg-green-50 */
    border-left: 4px solid #10b981; /* border-green-500 */
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}
/* ... (début du fichier inchangé) ... */

/* ==========================================================================
   8. STYLES POUR LA VUE CHAPITRE (Améliorés Phase 2e)
   ========================================================================== */

/* --- STYLES UNIFIÉS POUR TOUS LES TITRES DE MODULES --- */
.module-title,
.module-title-numero {
    font-size: 1.5rem; /* text-2xl de Tailwind. */
    font-weight: 600;
    margin-bottom: 1.25rem;
}

/* Style spécifique pour les titres numérotés (Activités, Exercices) */
.module-title-numero {
    color: #1e293b; /* slate-800 */
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0; /* slate-200 */
}

/* Style spécifique pour les titres non-numérotés (Prérequis, Bilan...) */
.module-title {
    color: #334155; /* slate-700 */
}


/* Améliore la lisibilité du texte dans les conteneurs d'info, comme discuté. */
.info-module-container .prose,
.conclusion-module-container .prose {
    font-size: 1.125rem; /* ~18px, pour une meilleure lisibilité */
    line-height: 1.75rem; /* Interlignage confortable */
    color: #1e293b; /* Un gris-noir plus foncé pour le corps du texte */
}

/* Assure que les titres dans les boîtes d'info sont bien visibles */
.info-module-container .module-title {
    color: #1e3a8a; /* Un bleu plus soutenu */
}

/* Style pour les conteneurs de conclusion (Bilan, Synthèse) */
.conclusion-module-container {
    padding: 1.5rem;
    background-color: #f0fdfa; /* bg-green-50 */
    border-left: 4px solid #10b981; /* border-green-500 */
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.conclusion-module-container .module-title {
    color: #047857; /* Un vert plus soutenu */
}
/* ==========================================================================
   9. STYLES POUR LA DISPOSITION IMAGE DANS UN ÉLÉMENT (CORRIGÉ)
   ========================================================================== */

/* On applique les styles flexbox uniquement lorsque c'est nécessaire */
.element-content-container.layout-image-gauche,
.element-content-container.layout-image-droite {
    display: flex;
    gap: 1.5rem; /* Espace entre l'image et le contenu */
    align-items: flex-start; /* Aligne les éléments en haut */
}

/* Image à gauche, texte à droite */
.element-content-container.layout-image-gauche {
    flex-direction: row;
}

/* Image à droite, texte à gauche */
.element-content-container.layout-image-droite {
    flex-direction: row-reverse;
}

/* Le conteneur de l'image (la colonne de l'image) */
.element-image-wrapper {
    flex-shrink: 0; /* Empêche l'image de se réduire */
    width: 33.33%;
    max-width: 250px; /* Limite la taille maximale de l'image */
}

/* Le conteneur du texte (la colonne du contenu) */
.element-text-content {
    flex-grow: 1; /* Le texte prend le reste de la place */
    min-width: 0; /* Correction de bug classique avec flexbox pour éviter le débordement */
}
/* ==========================================================================
   10. AMÉLIORATION ERGONOMIQUE DE L'ÉDITEUR DE MODULE
   ========================================================================== */

/* Limite la hauteur de la liste des éléments et active le défilement */
#content-elements-list {
    /* Hauteur maximale d'environ 3x sa hauteur minimale (150px) */
    max-height: 500px; 
    overflow-y: auto; /* Affiche la barre de défilement si nécessaire */
    scroll-behavior: smooth; /* Rend le défilement plus fluide */
}
/* ==========================================================================
   11. STYLES POUR LES CONTENUS RICHES (Éditeur & Visualiseur)
   ========================================================================== */

/* Assure que les listes s'affichent correctement PARTOUT (dans l'éditeur
   ET dans le contenu final généré qui utilise la classe .prose) */
[contenteditable="true"] ul, [contenteditable="true"] ol,
.prose ul, .prose ol {
    list-style: revert;
    margin-left: 2rem;
}
