/*
 * Visualiseur de récursivité - exploration des appels récursifs en Python.
 *
 * SPDX-FileCopyrightText: 2026 Laurent Abbal
 * SPDX-License-Identifier: AGPL-3.0-only
 *
 * Le texte complet de la licence figure dans LICENSE.
 * Les bibliothèques tierces conservent leurs licences respectives.
 *
 * Code source : https://forge.apps.education.fr/visualiseur-recursivite/visualiseur-recursivite.forge.apps.education.fr
 */
:root { --ink:#30353d; --muted:#737982; --line:#e5e7eb; --soft:#f5f6f8; --purple:#7759c2; --purple-dark:#5c43a4; --blue:#1f75cb; --orange:#d97706; --panel:#fff; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:#fff; height:100vh; overflow:hidden; }
button { border:1px solid transparent; border-radius:5px; cursor:pointer; font-weight:600; transition:background .18s, border-color .18s; }
button:disabled { opacity:.45; cursor:not-allowed; }
.topbar { height:52px; background:#292c32; color:#fff; display:flex; align-items:center; gap:22px; padding:0 20px; }
.gitlab-mark { font-size:27px; color:#fc6d26; line-height:1; }
.brand { font-weight:700; letter-spacing:-.3px; font-size:16px; }
.global-search { height:32px; width:270px; border:1px solid #555a63; background:#3a3e46; border-radius:5px; color:#fff; padding:0 12px; outline:none; }
.global-search::placeholder { color:#b8bbc1; }
.top-actions { margin-left:auto; display:flex; gap:18px; align-items:center; color:#dfe1e5; font-size:19px; }
.avatar { width:28px; height:28px; border-radius:50%; background:#d66b37; display:grid; place-items:center; font-size:12px; font-weight:700; }
.layout { height:100vh; display:flex; }
.sidebar { width:238px; background:#fff; border-right:1px solid var(--line); padding:18px 12px; flex-shrink:0; }
.sidebar-project { padding:4px 12px 22px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.project-kicker { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.8px; }
.project-name { font-size:15px; font-weight:700; margin-top:6px; }
.side-link { display:flex; align-items:center; gap:11px; padding:9px 12px; color:#555b65; font-size:13px; border-radius:5px; margin:2px 0; }
.side-link.active { color:var(--purple-dark); background:#f0edfa; font-weight:700; }
.side-icon { width:16px; text-align:center; color:#747a83; font-size:14px; }
.side-link.active .side-icon { color:var(--purple); }
.main-wrap { flex:1; overflow:auto; min-width:0; }
.project-header { background:#fff; border-bottom:1px solid var(--line); padding:22px 34px 0; }
.breadcrumb { color:var(--muted); font-size:12px; margin-bottom:18px; }
.breadcrumb strong { color:var(--ink); }
.project-title-row { display:flex; align-items:flex-start; gap:14px; }
.repo-icon { width:42px; height:42px; background:#ece9fb; color:var(--purple); border-radius:8px; display:grid; place-items:center; font-size:21px; font-weight:800; }
h1 { font-size:24px; letter-spacing:-.5px; line-height:1.15; }
.visibility { display:inline-block; margin:5px 0 0 8px; border:1px solid #cfd2d7; border-radius:12px; padding:2px 8px; color:#676d76; font-size:11px; vertical-align:middle; }
.subtitle { color:var(--muted); font-size:13px; margin-top:6px; }
.project-meta { margin-left:auto; display:flex; gap:18px; color:var(--muted); font-size:12px; padding-top:8px; }
.project-meta strong { color:var(--ink); }
.tabs { display:flex; gap:24px; margin-top:23px; }
.tab { padding:11px 2px; color:#666c75; font-size:13px; border-bottom:2px solid transparent; }
.tab.active { color:var(--ink); border-bottom-color:var(--purple); font-weight:700; }
.content { width:100%; height:100%; padding:18px 24px 22px; display:flex; flex-direction:column; }
.notice { background:#f0edfa; border:1px solid #ddd6f5; border-left:3px solid var(--purple); border-radius:5px; padding:12px 15px; font-size:13px; display:flex; align-items:center; gap:9px; margin-bottom:15px; }
.notice strong { color:var(--purple-dark); }
.learning-path { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:15px; }
.lesson { background:#fff; border:1px solid #e1e4e8; border-radius:5px; padding:9px 12px; color:#666c75; font-size:12px; }
.lesson strong { display:block; color:var(--ink); font-size:12px; margin-bottom:3px; }
.lesson-number { color:var(--purple); font-weight:800; margin-right:5px; }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:24px; margin-bottom:21px; position:relative; padding-right:56px; }
.section-title { font-size:20px; font-weight:700; display:flex; align-items:center; gap:10px; }
.title-icon { width:28px; height:28px; flex-shrink:0; object-fit:contain; }
.branch { background:#fff; border:1px solid #d4d7dc; color:#454a52; padding:7px 11px; font-size:12px; border-radius:5px; }
#exampleSelect { position:relative; top:4px; height:32px; margin-left:12px; padding-right:32px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 fill=%27none%27 stroke=%27%23454a52%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:10px 6px; }
#exampleSelect:focus { outline:none; border-color:var(--purple); box-shadow:0 0 0 3px #7759c226; }
.controls { display:flex; gap:7px; align-items:center; position:relative; top:4px; }
.controls button { height:32px; padding:8px 12px; font-size:12px; display:inline-flex; align-items:center; gap:6px; }
#runBtn { background:var(--purple); color:#fff; }
#runBtn:hover:not(:disabled) { background:var(--purple-dark); }
.secondary-btn { background:#fff; border-color:#cfd3d8; color:#4b515a; }
.secondary-btn:hover:not(:disabled) { background:#f3f4f6; }
#log-status { color:var(--muted); font-size:12px; margin-left:5px; min-width:75px; }
#shareBtn i { font-size:11px; }
#share-status { color:var(--purple-dark); font-size:12px; margin-left:2px; }
.share-wrap { position:relative; display:inline-flex; }
#share-tooltip { position:absolute; top:calc(100% + 8px); right:0; z-index:20; width:max-content; max-width:min(520px, 60vw); padding:7px 10px; border:1px solid #d4d7dc; border-radius:5px; background:#fff; box-shadow:0 6px 18px #1e293b1f; color:#4b515a; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:11px; line-height:1.45; text-align:left; overflow-wrap:anywhere; }
#share-tooltip[hidden] { display:none; }
.about-button { width:32px; height:32px; position:absolute; top:4px; right:0; display:grid; place-items:center; border:1px solid #d4d7dc; border-radius:50%; background:#fff; color:var(--muted); font-size:14px; }
.about-button:hover { background:#f5f3fa; border-color:var(--purple); color:var(--purple); }
.about-dialog { width:min(420px, calc(100vw - 32px)); margin:auto; padding:48px 24px 28px; border:1px solid #e2e5ea; border-radius:12px; background:#f6f7f9; color:#8390a1; box-shadow:0 16px 48px #1e293b26; }
.about-dialog::backdrop { background:#1e293b55; }
.about-close { position:absolute; top:10px; right:10px; width:28px; height:28px; display:grid; place-items:center; background:transparent; color:#8390a1; font-size:16px; }
.about-close:hover { background:#e9ecf1; color:var(--ink); }
.about-author { margin-bottom:18px; text-align:center; font-size:14px; line-height:1.5; color:inherit; }
.about-title { text-align:center; text-transform:uppercase; font-family:monospace; font-size:11px; line-height:1.6; font-weight:500; letter-spacing:.6px; }
.about-links { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:10px; }
.about-links a { width:32px; height:32px; display:grid; place-items:center; border-radius:5px; color:#8390a1; font-size:16px; text-decoration:none; }
.about-links a:hover { background:#e9ecf1; color:var(--purple); }
.about-button:focus-visible, .about-close:focus-visible, .about-links a:focus-visible { outline:2px solid var(--purple); outline-offset:3px; }
.workspace { flex:1; min-height:0; display:grid; grid-template-columns: minmax(210px, 0.95fr) minmax(210px, 0.95fr) minmax(270px, 1.15fr) minmax(270px, 1.15fr); border:1px solid #dfe2e6; border-radius:6px; overflow:hidden; background:#fff; }
.panel { background:var(--panel); display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.panel + .panel { border-left:1px solid #dfe2e6; }
.panel-header { background:#fbfbfb; border-bottom:1px solid #e5e5e5; padding:10px 14px; display:flex; justify-content:space-between; align-items:center; color:#454a52; font-size:13px; font-weight:700; }
.panel-header small { color:var(--muted); font-weight:500; }
.panel-header .fa-solid { color:var(--purple); margin-right:6px; }
.CodeMirror { height:100% !important; font-size:13px; }

/* Style didactique pour la pile d'appels */
#stack-container { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column-reverse; gap:10px; background:#ffffff; }
.stack-frame { background:#fff; border:1px solid #e2e8f0; padding:12px; border-radius:8px; font-size:12px; box-shadow:2px 2px 0 #e2e8f0; transition:all 0.2s ease; }
.stack-frame.active { background:#fffdf5; border-color:#f59e0b; box-shadow:2px 2px 0 #f59e0b; }
.stack-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.stack-badge { font-size:10px; font-weight:700; padding:3px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:0.4px; display:inline-flex; align-items:center; gap:4px; }
.stack-badge.active-badge { background:#fef3c7; color:#b45309; border:1px solid #fde68a; }
.stack-badge.waiting-badge { background:#e0f2fe; color:#0369a1; border:1px solid #bae6fd; }
.stack-title, .nested-box-title { font-family:monospace; font-size:14px; font-weight:700; color:#1e293b; display:flex; align-items:center; gap:6px; }
.stack-title { margin-bottom:8px; }
.call-icon { color:var(--purple); font-size:12px; }
.stack-param-tag, .box-args { background:#f1f5f9; color:#475569; padding:2px 6px; border-radius:4px; font-size:12px; font-family:monospace; font-weight:600; }
.stack-info-box { background:rgba(255,255,255,0.75); border-radius:6px; padding:8px 10px; border:1px solid #e2e8f0; font-size:11px; display:flex; flex-direction:column; gap:4px; }
.stack-row { display:flex; justify-content:space-between; gap:8px; }
.stack-key { color:#64748b; font-weight:600; }
.stack-val { font-family:monospace; font-weight:600; color:#0f172a; }
.didactic-note { background:#f2f9f7; border:1px solid #bdddd1; border-radius:6px; padding:7px 9px; font-size:11px; color:#286555; margin-top:6px; line-height:1.35; font-weight:500; display:flex; align-items:center; gap:6px; }
.didactic-note-muted { background:#f7f7f7; border-color:#e5e5e5; color:#737373; }
.stack-footer-note { padding:8px 12px; background:#fff; border-top:1px solid #ded5ed; color:#64748b; font-size:11px; line-height:1.3; }

/* Boîtes Imbriquées */
#boxes-container { flex:1; width:100%; height:100%; overflow-y:auto; padding:14px; background:#ffffff; }
.nested-box { border:1px solid #e2e8f0; border-radius:10px; padding:10px; margin-bottom:8px; background:#ffffff; box-shadow:2px 2px 0 #e2e8f0; transition:all 0.25s ease; }
.nested-box.box-active { border-color:#f59e0b; background:#fffdf5; box-shadow:2px 2px 0 #f59e0b; }
.nested-box.box-returned { border-color:#579b8b; background:#f2f9f7; box-shadow:2px 2px 0 #579b8b; }
.nested-box.box-error { border-color:#c96969; background:#fff7f7; box-shadow:2px 2px 0 #c96969; }
.nested-box.box-pending { border-color:#e2e8f0; background:#ffffff; box-shadow:2px 2px 0 #e2e8f0; }
.nested-box-header { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-bottom:4px; flex-wrap:wrap; gap:6px; }
.nested-box-meta { display:flex; align-items:center; gap:6px; }
.nested-box-meta .box-id { font-size:10px; color:#64748b; font-weight:600; background:#f1f5f9; padding:2px 5px; border-radius:4px; }
.box-badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; display:inline-flex; align-items:center; gap:4px; }
.badge-active { background:#fef3c7; color:#b45309; border:1px solid #fde68a; }
.badge-returned { background:#e2f1eb; color:#286555; border:1px solid #bdddd1; }
.badge-error { background:#fbeaea; color:#984545; border:1px solid #e8bbbb; }
.badge-pending { background:#e2e8f0; color:#475569; }
.nested-box-children { display:flex; flex-direction:column; gap:8px; margin-top:8px; padding-left:12px; border-left:2px dashed #cbd5e1; }

#tree-container { flex:1; width:100%; height:100%; background:#ffffff; overflow:hidden; position:relative; }
.node { --node-border:#e2e8f0; --node-fill:#fff; }
.node.node-active { --node-border:#f59e0b; --node-fill:#fffdf5; }
.node.node-returned { --node-border:#579b8b; --node-fill:#f2f9f7; }
.node.node-error { --node-border:#c96969; --node-fill:#fff7f7; }
.node circle { fill:var(--node-fill); stroke:var(--node-border); stroke-width:1px; filter:drop-shadow(2px 2px 0 var(--node-border)); transition:fill .3s, stroke .3s; }
.node text { font-family:monospace; font-size:11px; fill:#4b515a; }
.link { fill:none; stroke:#c7cbd1; stroke-width:1.5px; }
#stack-container.is-empty, #tree-container.is-empty, #boxes-container.is-empty { display:block; padding:0; }
.empty-state { padding:48px 16px 24px; text-align:center; font-size:13px; line-height:1.5; color:#64748b; }
.empty-state-icon { display:block; height:32px; margin-bottom:10px; font-size:28px; line-height:32px; color:#cbd5e1; }
.empty-state-title { display:block; margin-bottom:4px; }
.empty-state-description { font-size:11px; }
.empty-state-description .fa-play { margin-inline:4px; }
.legend { display:flex; gap:15px; padding:10px 14px; border-top:1px solid #e5e7eb; color:var(--muted); font-size:11px; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:4px; }
@media (max-width:1100px) { .workspace { grid-template-columns:1fr 1fr; } }
@media (max-width:700px) { .workspace { grid-template-columns:1fr; overflow-y:auto; } }