/*
    Programme Pédagogique développé par P. Rahmouni oussama  - 2025 - OFPPT - ISMO Tétouan
    ousrah@gmail.com  -   +212 6 12 96 24 66
   */

/* --- style.css --- */

: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;
}

body { font-family: Arial, sans-serif; background-color: #f0f2f5; color: #333; line-height: 1.6; text-align: center; }
h1, h3, h4 { color: var(--color-dark); }
#unlock-btn { font-size: 0.6em; vertical-align: super; cursor: pointer; margin-left: 15px; opacity: 0.5; transition: opacity 0.2s; user-select: none; }
#unlock-btn:hover { opacity: 1; }
#level-path { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 20px auto; padding: 10px; }
.level-dot { width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 1.2em; position: relative; color: #fff; margin: 5px; }
.level-dot.unlocked { background-color: var(--color-primary); cursor: pointer; border: 3px solid var(--color-primary); }
.level-dot.unlocked:hover { background-color: #2980b9; }
.level-dot.active { background-color: var(--color-success); border-color: #27ae60; transform: scale(1.1); }
.level-dot.locked { background-color: var(--color-medium-gray); border: 3px solid #95a5a6; cursor: not-allowed; }
.level-dot:not(:last-child):after { content: ''; position: absolute; left: 100%; top: 50%; width: 20px; height: 4px; background: var(--color-medium-gray); transform: translateY(-50%); }
.main-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; padding: 20px; }
.maze-section, .program-section, .toolbox-section, .functions-section { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px #0000001a; text-align: left; align-self: flex-start; }
.maze-section { width: 550px; flex-shrink: 0; }
.program-section, .functions-section { flex-grow: 1; min-width: 300px; }
.toolbox-section { width: 260px; flex-shrink: 0; }
#maze-container { position: relative; display: grid; border: 2px solid var(--color-dark); margin: 20px auto 0; }
.cell { width: 35px; height: 35px; box-sizing: border-box; border: 1px solid #dcdcdc; }
.wall { background-color: var(--color-dark); }
.path { background-color: var(--color-light-gray); }
.start { background-color: var(--color-success); }
.end { background-color: var(--color-danger); }
#robot { position: absolute; width: 35px; height: 35px; font-size: 28px; line-height: 35px; text-align: center; color: var(--color-primary); transition: left .2s linear, top .2s linear, transform .2s ease-in-out; z-index: 10; pointer-events: none; }
#robot.crashed { color: var(--color-danger); animation: shake 0.5s ease-in-out; }
@keyframes shake { 0%, 100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-5px) rotate(-10deg); } 40% { transform: translateX(5px) rotate(10deg); } 60% { transform: translateX(-5px) rotate(-5deg); } 80% { translateX(5px) rotate(5deg); } }
.sortable-list { min-height: 50px; }
#instruction-list { padding: 10px; background: #e9eef2; border-radius: 5px; border: 1px dashed var(--color-medium-gray); height: 580px; max-height: 75vh; overflow-y: auto; }
#instruction-buttons { display: grid; grid-template-columns: 1fr; gap: 10px; min-height: 0; }
#extra-tools { margin-top: 15px; text-align: center; }
#show-all-tools-btn { background-color: var(--color-dark-gray); color: white; cursor: pointer; width: 100%; }
#show-all-tools-btn:hover { background-color: #6c7a7b; }
button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; font-size: 1em; font-weight: 600; border: none; border-radius: 5px; transition: background-color .2s, transform .1s; color: white; cursor: pointer; }
button:hover { filter: brightness(1.1); }
button:active { transform: scale(0.97); }
button:disabled { background: #95a5a6 !important; cursor: not-allowed; opacity: 0.7; transform: none; filter: none; }
button svg { width: 18px; height: 18px; }
.execution-panel { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 15px; align-items: center; }
#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); }
.io-btn { background-color: var(--color-dark-gray); padding: 6px 10px; }
#edit-btn { background-color: var(--color-info); }
#save-edit-btn { background-color: var(--color-success); }
#maze-io-buttons { text-align: right; margin-top: 10px; }
#program-io-buttons { text-align: right; margin: 10px 0; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.instruction-source, #instruction-list li, .functions-section li { cursor: grab; border-radius: 4px; padding: 8px 12px; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; transition: margin-left .2s ease-in-out; user-select: none; border: 1px solid #ccc; color: #333; }
#instruction-list li .instruction-text, .functions-section li .instruction-text { flex-grow: 1; text-align: left; }
.instruction-source { text-align: center; color: white; border: none; }
.instruction-avancer, .instruction-tourner { background-color: #e8f5e9; border-left: 5px solid #4CAF50; }
.instruction-boucle { background-color: #fff3e0; border-left: 5px solid #FF9800; }
.instruction-condition { background-color: #ffebee; border-left: 5px solid #F44336; }
.instruction-fonction { background-color: #f3e5f5; border-left: 5px solid var(--color-info); }
.instruction-source.instruction-avancer, .instruction-source.instruction-tourner { background-color: #4CAF50; }
.instruction-source.instruction-boucle { background-color: #FF9800; }
.instruction-source.instruction-condition { background-color: #F44336; }
.instruction-source.instruction-fonction { background-color: var(--color-info); }
#instruction-list li.highlight, .functions-section li.highlight { background-color: #f1c40f !important; border-color: #f39c12 !important; box-shadow: 0 0 0 3px #f1c40f; position: relative; z-index: 1; }
.delete-btn { background: var(--color-danger); color: white; border-radius: 50%; width: 22px; height: 22px; font-weight: 700; font-size: 16px; line-height: 0; padding: 0; }
.add-else-btn { background-color: var(--color-dark); color: white; padding: 1px 6px; font-size: 0.8em; border-radius: 4px; margin-left: 10px; font-weight: bold; }
#feedback { margin-top: 10px; text-align: center; font-size: 1em; }
#level-rules { font-weight: 700; color: #c0392b; min-height: 20px; }
#maze-top-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; min-height: 45px; }
.edit-buttons-container { display: flex; gap: 10px; }
#maze-container.editing { box-shadow: 0 0 0 3px var(--color-primary); }
#maze-container.editing .cell { cursor: pointer; transition: transform 0.1s; }
#maze-container.editing .cell:hover { transform: scale(1.05); filter: brightness(1.1); z-index: 20; position: relative; }
#edit-palette { display: flex; align-items: center; gap: 10px; background-color: #e9eef2; padding: 8px 12px; border-radius: 8px; }
#edit-palette h4 { margin: 0; color: var(--color-dark); font-size: 0.9em; }
#edit-palette label { cursor: pointer; font-size: 0.9em; }

/* NOUVEAU: Styles pour la section des fonctions */
.function-container { margin-top: 15px; }
.function-container h4 { color: var(--color-info); margin-bottom: 10px; }
.functions-section .sortable-list { min-height: 120px; padding: 10px; background: #f3e5f54d; border-radius: 5px; border: 1px dashed var(--color-info); max-height: 25vh; overflow-y: auto; }

footer { display: flex; justify-content: space-between; align-items: center; text-align: center; margin-top: 30px; padding: 15px 30px; color: var(--color-dark-gray); font-size: 0.9em; border-top: 1px solid var(--color-light-gray); }
#clear-cache-btn { background: none; border: 1px solid var(--color-medium-gray); color: var(--color-dark-gray); padding: 5px 8px; }
#clear-cache-btn:hover { background-color: var(--color-danger); color: white; border-color: var(--color-danger); }