:root {
  --color-primary: #3498db;
  --color-success: #2ecc71;
  --color-warning: #f1c40f;
  --color-danger: #e74c3c;
  --color-info: #9b59b6;
  --color-dark: #34495e;
  --color-light-gray: #ecf0f1;
  --color-medium-gray: #bdc3c7;
  --color-dark-gray: #7f8c8d;
  --color-date: #1abc9c;
  --color-structure: #e67e22;
  --color-function: #a569bd;
}

body {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 15px;
  background-color: #f0f2f5;
  color: #333;
  line-height: 1.5;
}
/* Style pour bloquer le scroll en mode plein écran */
body.fullscreen-active {
    overflow: hidden;
}

#format-code-btn {
    background-color: #9b59b6; /* Une couleur violette pour la "magie" */
}

li[data-type="ECRIRE"] .value-input {
  /* La propriété magique : dit à l'élément de prendre tout l'espace horizontal restant */
  flex-grow: 1; 
  
  /* On s'assure que le navigateur n'impose pas de largeur minimale qui pourrait gêner */
  min-width: 50px; 
}
.speed-control-container {
  display: flex;
  align-items: center; /* Aligne verticalement le label, le slider et le chiffre */
  gap: 8px; /* Espace entre les éléments */
  margin-bottom: 15px; /* Espace avant les boutons d'exécution */
  color: var(--color-dark);
}

.speed-control-container label {
  font-weight: 500;
}

#speed-slider {
  flex-grow: 1; /* Permet au slider de prendre toute la place disponible */
  cursor: pointer;
}

#speed-value {
  font-weight: bold;
  background-color: var(--color-light-gray);
  padding: 2px 8px;
  border-radius: 4px;
  min-width: 20px; /* Assure que la mise en page ne bouge pas */
  text-align: center;
}
h1, h3, h4 {
  color: var(--color-dark);
  text-align: center;
  font-weight: 500;
}
h1 { font-size: 1.7em; margin-bottom: 15px; }
h4 { text-align: left; margin-top: 15px; margin-bottom: 10px; border-bottom: 2px solid var(--color-light-gray); padding-bottom: 5px; font-size: 1.1em; }

/* MODIFIEZ le style de .level-header pour empiler les éléments verticalement */
.level-header { 
  display: flex; 
  flex-direction: column; /* NOUVEAU */
  justify-content: center; 
  align-items: center; 
  gap: 15px; /* Augmentation de l'espace */
  flex-wrap: wrap; 
  margin: 10px auto; 
  padding: 10px; 
}

/* SUPPRIMEZ la classe .header-buttons (elle est remplacée par .global-actions) */
/* .header-buttons { display: flex; gap: 8px; } */ /* Supprimez ou commentez cette ligne */

/* AJOUTEZ le style pour la nouvelle ligne de boutons */
.global-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
}

#unlock-btn, #clear-cache-btn, #free-mode-btn, 
#export-solutions-btn, #import-solutions-btn,
#export-readable-btn { /* <-- AJOUTEZ L'ID ICI */
  background-color: var(--color-warning); 
  font-size: 1.1em; 
  padding: 6px; 
  width: 40px; 
  height: 38px; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}
#clear-cache-btn { background-color: var(--color-danger); }
#free-mode-btn { background-color: var(--color-info); }

/* AJOUT du style pour les nouveaux boutons */
#export-solutions-btn, #import-solutions-btn,
#export-readable-btn { /* <-- AJOUTEZ L'ID ICI AUSSI */
  background-color: var(--color-date);
}
#unlock-btn, #clear-cache-btn, #free-mode-btn {
  background-color: var(--color-warning); font-size: 1.1em; padding: 6px; width: 40px; height: 38px; display: flex; justify-content: center; align-items: center;
}
#clear-cache-btn { background-color: var(--color-danger); }
#free-mode-btn { background-color: var(--color-info); }

#level-path { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.level-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 700; color: #fff; margin: 5px; cursor: pointer; border: 2px solid var(--color-primary); background-color: var(--color-primary); transition: all 0.3s ease; }
.level-dot.unlocked:hover { filter: brightness(1.1); transform: scale(1.1); }
.level-dot.active { background-color: var(--color-success); border-color: #27ae60; transform: scale(1.15); box-shadow: 0 0 15px rgba(46, 204, 113, 0.7); }
.level-dot.locked { background-color: var(--color-medium-gray); border-color: #95a5a6; cursor: not-allowed; }

#level-objective-container { max-width: 90%; margin: 0 auto 20px auto; text-align: center; }
#level-rules { display: inline-block; text-align: center; font-weight: 500; color: var(--color-structure); background-color: #fff9e6; border: 1px solid var(--color-structure); border-radius: 8px; padding: 10px 18px; margin: 0; }

.main-container { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: 20px; padding: 20px; max-width: 1920px; margin: 0 auto; }
.program-section { width: calc(48% - 13px); min-width: 450px; max-width: 800px; background: transparent; box-shadow: none; padding: 0; }
.toolbox-section, .execution-area-section { background: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); text-align: left; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.toolbox-section { width: calc(22% - 14px); min-width: 240px; }
.execution-area-section { width: calc(30% - 13px); min-width: 330px; }

.program-actions-sticky { position: sticky; top: 0; background-color: #f0f2f5; padding: 10px 0; z-index: 10; margin-bottom: 15px; }
.program-header-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; background: #fff; padding: 10px 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }

.view-selector-container { display: flex; align-items: center; gap: 8px; }
.view-selector-container label { font-weight: 500; color: var(--color-dark); }
#view-mode-select { padding: 6px 10px; border: 1px solid var(--color-medium-gray); border-radius: 5px; background-color: #fff; font-size: 0.9em; font-weight: 500; cursor: pointer; }
#view-mode-select:focus { outline: 2px solid var(--color-primary); }

#program-io-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
#program-io-buttons button { font-size: 1.1em; padding: 0; width: 38px; height: 36px; display: flex; justify-content: center; align-items: center; background-color: var(--color-dark-gray); }
#program-io-buttons #clear-program-btn, #editor-view-controls button { background-color: var(--color-danger); }
#program-io-buttons #save-btn { background-color: var(--color-success); }
#program-io-buttons #copy-btn, #program-io-buttons #paste-btn { background-color: var(--color-primary); }
#program-io-buttons #export-btn, #program-io-buttons #import-btn { background-color: var(--color-date); }

.program-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 15px;
}
.program-header h3 { margin: 0; text-align: left; font-size: 1.2em; flex-grow: 1; }
#program-title-input { background: transparent; border: none; border-bottom: 1px dotted var(--color-dark-gray); font-size: 1em; color: var(--color-dark); padding: 2px 5px; width: 50%; }
.editor-view-controls button { width: 36px; height: 34px; padding: 0; font-size: 1em; background-color: var(--color-info); }

.functions-definition-section, #editor-container, #feedback { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
#editor-container { position: relative; }

#editor-wrapper.editor-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f0f2f5;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}
#editor-wrapper.editor-fullscreen > div {
    height: auto;
    flex-shrink: 0;
}
#editor-wrapper.editor-fullscreen #monaco-editor-container { 
    height: calc(100vh - 120px); 
}
#editor-wrapper.editor-fullscreen #instruction-list {
    height: 50vh; /* Ajuster la hauteur en mode plein écran si nécessaire */
}


.functions-definition-section { background-color: #fcfcfc; border: 1px solid #e8e8e8; margin-bottom: 20px; }
.function-container { background-color: #fff; border: 1px solid var(--color-function); border-radius: 8px; padding: 15px; margin-top: 15px; }
.function-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #eee; }
.params-list { display: flex; flex-direction: column; gap: 5px; }
.delete-function-btn { background: var(--color-danger); margin-left: auto; }
#add-function-btn { background-color: var(--color-function); }

.sortable-list { min-height: 40px; padding: 10px; background: #f0f2f5; border-radius: 5px; border: 1px dashed var(--color-medium-gray); margin-top: 5px; }
.declaration-zone { background-color: #fffbe6; }
.algo-keyword { color: var(--color-info); font-weight: bold; font-family: "Courier New", Courier, monospace; font-size: 1.1em; margin: 10px 0 5px 0; }
#instruction-list, .function-body { overflow-y: auto; }
#instruction-list { height: 60vh; max-height: 700px; }
.function-body { max-height: 300px; }

#instruction-buttons, #function-instruction-buttons { display: grid; gap: 8px; padding: 0; background: none; border: none; min-height: 0; }
#instruction-buttons { grid-template-columns: 1fr; }
#function-instruction-buttons { grid-template-columns: 1fr 1fr; }

.instruction-source, .instruction-function { border-radius: 5px; text-align: center; color: white; border: none; padding: 8px 10px; font-weight: 500; font-size: 0.9em; cursor: grab; }
.instruction-function { background-color: var(--color-function); }
.instruction-source.instruction-variable { background-color: #4caf50; }
.instruction-source.instruction-io { background-color: #2196f3; }
.instruction-source.instruction-boucle { background-color: #ff9800; }
.instruction-source.instruction-condition { background-color: #f44336; }

.sortable-list li { cursor: default; border-radius: 4px; padding: 6px 10px; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; user-select: none; border: 1px solid #ddd; background-color: #fff; transition: margin-left 0.2s ease-in-out; }
.sortable-list li.instruction-variable { background-color: #f5fff5; }
.sortable-list li.instruction-io { background-color: #f2f8fd; }
.sortable-list li.instruction-boucle { background-color: #fff8f0; }
.sortable-list li.instruction-condition { background-color: #fff5f5; }
.sortable-list li.instruction-function { 
  background-color: #f8f2fc;
  color: var(--color-dark);
}

.drag-handle { cursor: grab; color: #aaa; margin-right: 8px; }
.instruction-text { flex-grow: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 0.9em; }
.sortable-list li input, .sortable-list li select { padding: 4px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; background-color: #fff; }

.delete-btn, .delete-param-btn { border: none; cursor: pointer; color: white; border-radius: 50%; width: 20px; height: 20px; font-weight: 700; line-height: 0; padding: 0; margin-left: 6px; flex-shrink: 0; }
.delete-btn, .delete-param-btn { background: var(--color-danger); }

/* --- MODIFICATION : Styles pour les boutons de paramètres --- */
.add-else-btn, .add-param-btn { 
    background-color: var(--color-dark); 
    border-radius: 4px; 
    width: auto; 
    padding: 2px 8px;
    font-size: 0.9em; 
    border: none;
    color: white;
    cursor: pointer;
}
.add-param-btn {
    background-color: var(--color-function);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 1.1em;
    padding: 0;
    line-height: 0;
}
/* --- FIN DES MODIFICATIONS --- */

.sortable-list li.highlight { background-color: var(--color-warning) !important; border-color: #f39c12 !important; }

button { padding: 8px 12px; font-size: 1em; border: none; border-radius: 5px; transition: all 0.2s; color: white; cursor: pointer; }
button:hover:not(:disabled) { filter: brightness(1.1); }
button:active:not(:disabled) { transform: scale(0.97); }
button:disabled { background: #95a5a6 !important; cursor: not-allowed; opacity: 0.7; }

#feedback { margin-top: 20px; text-align: center; font-size: 0.9em; }

.execution-panel { display: flex; justify-content: space-around; gap: 8px; margin-bottom: 15px; }
.execution-panel button { flex-grow: 1; font-size: 1.1em; }
#execute-btn { background-color: var(--color-success); }
#reset-btn { background-color: var(--color-warning); }
#stop-btn { background-color: var(--color-danger); }
#step-prev-btn, #step-next-btn { background-color: var(--color-primary); }

.output-area { background-color: var(--color-dark); color: #fff; border-radius: 5px; padding: 15px; margin-bottom: 20px; height: 26vh; overflow-y: auto; font-family: "Courier New", Courier, monospace; white-space: pre-wrap; word-break: break-all; }
.output-area .console-input { background: none; border: none; color: #fff; font-family: inherit; width: 80%; }
.output-area .console-prompt { color: var(--color-success); }
.output-area .error-message { color: var(--color-danger); font-weight: bold; }

#variable-watcher table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
#variable-watcher th, #variable-watcher td { text-align: left; padding: 6px; border-bottom: 1px solid var(--color-dark-gray); vertical-align: top; }
#variable-watcher .undefined-value { color: var(--color-medium-gray); font-style: italic; }
#variable-watcher .matrix-table { border-collapse: collapse; margin-top: 4px; }
#variable-watcher .matrix-table td { border: 1px solid var(--color-dark-gray); padding: 2px 5px; text-align: center; }
#variable-watcher .scope-name { font-weight: bold; color: var(--color-info); padding-top: 10px; border-bottom: 2px solid var(--color-info); }

footer { text-align: center; padding: 20px; margin-top: 20px; color: var(--color-dark-gray); font-size: 0.9em; }
/* --- STYLES POUR LA MODALE D'EXPORTATION --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.modal-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.modal-box {
  background-color: white;
  color: #333;
  padding: 25px 35px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  width: 90%;
  max-width: 500px;
  transform: scale(1);
  transition: transform 0.3s ease;
}

.modal-overlay.hidden .modal-box {
    transform: scale(0.9);
}

.modal-box h3 {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
  color: var(--color-dark);
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modal-content label {
  font-weight: 500;
  margin-bottom: -10px;
}

.modal-content input {
  padding: 10px;
  border: 1px solid var(--color-medium-gray);
  border-radius: 5px;
  font-size: 1em;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 25px;
}

#modal-save-btn {
  background-color: var(--color-success);
}
#modal-cancel-btn {
  background-color: var(--color-dark-gray);
}

/* Rend le point vert quand il est complété */
.level-dot.completed {
    background-color: var(--color-success);
    border-color: #27ae60;
}

/* Essentiel pour positionner l'icône à l'intérieur */
.level-dot {
    position: relative;
    /* ... autres styles ... */
}

/* Cache le numéro quand le niveau est complété */
.level-dot.completed .level-number {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Masque l'icône de validation PAR DÉFAUT */
.level-check-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.1em;
    opacity: 0; /* <-- Très important, l'icône est invisible par défaut */
    transition: opacity 0.2s ease;
}

/* Affiche l'icône SEULEMENT si le parent a la classe .completed */
.level-dot.completed .level-check-icon {
    opacity: 1; /* <-- L'icône devient visible */
}
.instruction-source.instruction-comment {
  background-color: var(--color-dark-gray); /* Une couleur neutre */
}

/* Style pour le bloc de commentaire dans la liste d'instructions */
.sortable-list li.instruction-comment {
  background-color: #f8f9fa; /* Un gris très clair */
  color: #6c757d; /* Un texte grisé */
  border-color: #dee2e6;
}

/* S'assure que le champ de texte du commentaire prend toute la place */
.instruction-comment .comment-input {
  flex-grow: 1;
  background: transparent;
  border: none;
  color: #6c757d;
  font-style: italic;
}

.instruction-comment .comment-input:focus {
  outline: none;
}

/* Style spécifique pour le nouveau bouton d'exécution JavaScript */
#execute-js-btn {
    background-color: var(--color-warning); /* Utilise la couleur "warning" (jaune) */
    color: var(--color-dark); /* Le texte doit être sombre sur un fond jaune pour être lisible */
}

/* Icône à l'intérieur du bouton JS */
#execute-js-btn .fa-js-square {
    margin-right: 6px; /* Ajoute un petit espace entre l'icône et le texte "JS" */
}
#execute-py-btn {
    background-color: var(--color-primary); /* Utilise la couleur primaire (bleu) */
}

#execute-py-btn .fa-python {
    margin-right: 6px;
}