/*
 * Affectabot - jeu pour apprendre l'affectation de variables en Python
 * Copyright (C) 2026 Célia Piquet
 * Licence GNU GPL v3 ou ultérieure : voir le fichier LICENSE
 */

/* Palette : --pink: #e040fb  --metal-dark: #111115  --metal: #1a1a22 */

html { font-size: 18px; }

/* ── Mode debug ─────────────────────────────────────────────────── */
.debug-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 200, 0, 0.08);
    border: 1px solid rgba(255, 200, 0, 0.35);
    border-radius: 6px;
    padding: 6px 12px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}
.debug-label { color: #ffc800; }
.debug-input {
    width: 60px;
    background: #1a1a22;
    border: 1px solid #ffc800;
    border-radius: 4px;
    color: #ffc800;
    text-align: center;
    padding: 2px 4px;
    font-family: inherit;
}
.debug-btn {
    background: transparent;
    border: 1px solid #ffc800;
    border-radius: 4px;
    color: #ffc800;
    padding: 2px 10px;
    cursor: pointer;
    font-family: inherit;
}
.debug-btn:hover { background: rgba(255, 200, 0, 0.15); }

/* ── Ligne courante ─────────────────────────────────────────────── */
#current {
    background-color: rgba(224, 64, 251, 0.15);
    border-left: 3px solid #e040fb !important;
}

.codeLine {
    height: 48px;
    margin-left: 10px;
    border-radius: 6px;
}

/* ── Global ─────────────────────────────────────────────────────── */
body.bg-dark {
    background: linear-gradient(160deg, #08080c 0%, #0e0e14 60%, #0a0a10 100%);
    font-family: 'Courier New', Courier, monospace;
    color: #e0e0e0;
    min-height: 100dvh;
    padding-top: 15px;
}

/* ── Blocs de jeu ───────────────────────────────────────────────── */
#codeCol, .colRes {
    background: linear-gradient(160deg, #111116, #181820);
    border: 1px solid #2e2e3a;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.04);
    animation: borderColor 5s ease infinite;
}

#codeCol.success h3, .colRes.success h3 {
    border-bottom-color: #4caf50;
}


.colRes.success .var-table thead th {
    color: #2e4a2e;
    border-bottom-color: #2e4a2e;
}

.colRes.success .var-name,
.colRes.success .var-value {
    color: #4caf50;
}

#codeCol.success, .colRes.success {
    border-color: #4caf50 !important;
    animation: none;
    box-shadow: 0 4px 24px rgba(76, 175, 80, 0.2);
}

@keyframes borderColor {
    0%, 100% { border-color: #2e2e3a; }
    50%       { border-color: rgba(224, 64, 251, 0.4); }
}

/* ── Titres ─────────────────────────────────────────────────────── */
#gameArea h1 { font-size: 1.6rem; }
#gameArea h2 { font-size: 1.1rem; margin-bottom: 1rem; color: #aaaaaa; font-family: 'Courier New', monospace; }

#codeCol h3, .colRes h3 {
    color: #e0e0e0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    border-bottom: 2px solid #6e30ff;
    padding-bottom: 8px;
}

h1 {
    color: #e040fb;
    font-weight: 700;
    text-shadow: 0 0 14px rgba(224, 64, 251, 0.45);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-family: 'Courier New', monospace;
}

/* ── Barre de progression batterie ─────────────────────────────── */
.battery-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    z-index: 100;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid #2e2e3a;
}

.battery-tip { display: none; }

.battery-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 0;
}

.battery-segment {
    flex: 1;
    height: 12px;
    border-radius: 2px;
    border: 1px solid #2e2e3a;
    background: #111116;
    transition: background 0.4s ease;
}

.battery-segment.filled {
    background: linear-gradient(90deg, #9d4edd, #e040fb);
    border-color: #e040fb;
    box-shadow: 0 0 6px rgba(224, 64, 251, 0.4);
}

.battery-segment.current {
    background: linear-gradient(90deg, #9d4edd, #e040fb);
    border-color: #e040fb;
    box-shadow: 0 0 10px rgba(224, 64, 251, 0.7);
    animation: batteryPulse 0.8s ease-in-out infinite alternate;
}

.battery-container.success { border-top-color: #4caf50; }

.battery-container.success .battery-segment.filled,
.battery-container.success .battery-segment.current {
    background: #4caf50;
    border-color: #4caf50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
    animation: none;
}

@keyframes batteryPulse {
    from { opacity: 1; }
    to   { opacity: 0.3; }
}

/* ── Zone de code ───────────────────────────────────────────────── */
#codeZone {
    background: #0d0d11;
    border: 1px solid #2e2e3a;
    border-radius: 6px;
    padding: 15px;
    min-height: 200px;
    font-family: 'Courier New', monospace;
    font-size: 1.25rem;
    color: #e0e0e0;
}

p {
    font-size: 1rem;
}

/* ── Zones résultats ────────────────────────────────────────────── */
#answerZone, #playerRes {
    background: #0d0d11;
    border: 1px solid #2e2e3a;
    border-radius: 6px;
    padding: 10px;
    min-height: 80px;
}

/* ── Tableau terminal variables ─────────────────────────────────── */
.var-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
}

.var-table thead th {
    color: #3a3a4a;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.9rem;
    font-weight: 700;
    border-bottom: 1px solid #3a3a4a;
    padding: 4px 10px;
    text-align: left;
}

.var-table tbody tr {
    border-bottom: 1px solid #2e2e3a;
    transition: background 0.2s ease;
}

.var-table tbody tr:last-child { border-bottom: none; }

.var-name {
    color: #9d4edd;
    padding: 6px 10px;
    white-space: nowrap;
    width: 35%;
    letter-spacing: 1px;
}

.var-value {
    padding: 4px 10px;
    color: #9d4edd;
    font-weight: 600;
}

.var-correct {
    color: #4caf50 !important;
}

.var-empty {
    color: #444;
    padding: 8px 10px;
    text-align: center;
    letter-spacing: 4px;
}

/* ── Carrés de variables ────────────────────────────────────────── */
.square {
    min-width: 50px;
    min-height: 44px;
    width: fit-content;
    height: fit-content;
    padding: 5px 12px;
    background: #0d0d11;
    border: 1px solid #e040fb !important;
    box-shadow: 0 0 8px rgba(224, 64, 251, 0.25);
    color: #e040fb;
    font-weight: bold;
    font-size: 1.1rem;
    font-family: 'Courier New', monospace;
    transition: all 0.2s ease;
    border-radius: 4px;
    word-break: break-word;
}

.square.square-wide {
    max-width: 100%;
    font-size: 1.05rem;
}

span {
    color: #e0e0e0;
    font-weight: 500;
}

.text-muted {
    color: #888888 !important;
}

.square.success {
    border: 1px solid #4caf50 !important;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
    color: #4caf50;
}

.success span { color: #4caf50; }

/* ── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0d0d11; }
::-webkit-scrollbar-thumb { background: #3a3a4a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #e040fb; }

/* ── Modale fin de parcours ─────────────────────────────────────── */
.completion-modal-content {
    background: linear-gradient(145deg, #111116, #181820);
    border: 1px solid rgba(224, 64, 251, 0.4);
    border-radius: 12px;
    color: #e0e0e0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

.completion-modal-content .modal-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
}

.completion-trophy {
    font-size: 4rem;
    animation: trophy-bounce 1s ease-in-out infinite alternate;
}

@keyframes trophy-bounce {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-8px) scale(1.05); }
}

/* ── Badge thème ────────────────────────────────────────────────── */
.theme-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid;
    font-weight: 600;
    font-size: 0.95em;
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
}

/* ── Sélecteur de parcours ──────────────────────────────────────── */
#themeList {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.theme-list-item {
    background: linear-gradient(145deg, #111116, #181820);
    border: 1px solid #2e2e3a;
    border-radius: 8px;
    padding: 14px 18px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}

.theme-list-item:hover {
    transform: translateX(5px);
    border-color: rgba(224, 64, 251, 0.5);
    box-shadow: 0 4px 20px rgba(224, 64, 251, 0.1);
}

.theme-list-icon { font-size: 1.8rem; flex-shrink: 0; }

.theme-list-name {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
}

.theme-list-desc { color: #888888; font-size: 1rem; margin-top: 2px; }

.theme-list-badge {
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid;
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.theme-progress-bar-wrap {
    height: 3px;
    background: #2e2e3a;
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.theme-progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.theme-badge-done {
    opacity: 0.7;
}

.theme-reset-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid #555566;
    border-radius: 4px;
    color: #aaaabc;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px 7px;
    line-height: 1.4;
    transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.2s;
    white-space: nowrap;
}
.theme-reset-btn:hover {
    color: #e040fb;
    border-color: #e040fb;
    background: rgba(224,64,251,0.08);
    transform: rotate(-30deg);
}

.theme-start-btn {
    background: transparent;
    border: 1px solid;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.theme-start-btn:hover { background: rgba(255, 255, 255, 0.06); }

#themeSelector h1 {
    color: #e040fb;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-family: 'Courier New', monospace;
}

/* ── Zone programme ─────────────────────────────────────────────── */
.program-separator { border-color: #2e2e3a; margin: 15px 0; }

#programZone {
    background: #0d0d11;
    border: 1px solid #2e2e3a;
    border-radius: 6px;
    padding: 10px 15px;
    min-height: 50px;
    max-height: 220px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
}

.program-line { display: flex; align-items: baseline; padding: 2px 0; line-height: 1.5; }

.program-line-num {
    color: #3a3a4a;
    font-size: 0.8em;
    min-width: 2em;
    text-align: right;
    margin-right: 14px;
    user-select: none;
    flex-shrink: 0;
}

.program-line code { color: #c0c0d0; white-space: pre; }

.program-counter {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 1px;
    color: #555566;
    margin-left: 8px;
    vertical-align: middle;
}

.program-counter-over,
.success .program-counter-over { color: #ff9800 !important; }
.program-counter-success       { color: #4caf50; }

.par-hint {
    font-size: 0.72rem;
    color: #555566;
    margin-left: 10px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    vertical-align: middle;
}
.par-hint.par-hint-over { color: #ff9800; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #codeCol, .colRes { margin-bottom: 15px; padding: 15px; }
    #codeCol h3, .colRes h3 { font-size: 0.96rem; }
}

/* ── Robot ──────────────────────────────────────────────────────── */
.robot-container {
    position: fixed;
    bottom: 28px;
    right: 20px;
    z-index: 1000;
}

.robot-image {
    width: 112px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
}

.robot-image:hover  { transform: scale(1.05); }
.robot-image:active { transform: scale(0.95); }

/* ── Bulle de dialogue ──────────────────────────────────────────── */
.speech-bubble {
    position: absolute;
    bottom: 115px;
    right: 0;
    background: #181820;
    border: 1px solid rgba(224, 64, 251, 0.4);
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    max-width: 260px;
    min-width: 260px;
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 999;
}

.speech-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
.speech-bubble.show:hover { opacity: 0.15; transition: opacity 0.2s ease; }

.speech-bubble.error {
    border-color: rgba(244, 67, 54, 0.6);
    background: #1e1214;
    box-shadow: 0 8px 24px rgba(244, 67, 54, 0.2);
}
.speech-bubble.error::after { border-top-color: #1e1214; }
.speech-bubble.error .speech-text { color: #ff8a80; }

.speech-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 30px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #181820;
}

.speech-text { margin: 0; font-size: 1rem; color: #c0c0d0; line-height: 1.5; }

.bubble-close {
    position: absolute;
    top: 5px;
    right: 7px;
    background: none;
    border: none;
    color: #666677;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}
.bubble-close:hover { color: #e040fb; }

/* ── Bounce robot ───────────────────────────────────────────────── */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px); }
    60% { transform: translateY(-8px); }
}

.robot-image.bounce { animation: bounce 1s ease-in-out; }

/* ── Glow (conservé pour usage futur) ───────────────────────────── */
@keyframes glow {
    from { text-shadow: 0 0 5px #e040fb, 0 0 10px #e040fb; }
    to   { text-shadow: 0 0 15px #e040fb, 0 0 30px #e040fb; }
}

/* ── Map des niveaux ────────────────────────────────────────────── */
.map-stars-summary {
    text-align: center;
    color: #aaa;
    font-size: 0.95rem;
    margin-bottom: 1.4rem;
    letter-spacing: 1px;
}

.bolt-on  { color: #ffd600; }
.bolt-off { color: #2a2a38; }

/* ── Serpentin ───────────────────────────────────────────────────── */
.level-path {
    --node-size: 76px;
    --conn-thickness: 3px;
    max-width: 700px;
    margin: 0 auto;
    padding-bottom: 80px;
}

.path-row {
    display: flex;
    align-items: center;
}

/* Nœud */
.path-node {
    width: var(--node-size);
    height: var(--node-size);
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid #2e2e3a;
    background: #0d0d11;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    position: relative;
    z-index: 1;
}

.path-node:hover:not(.node-locked) {
    transform: scale(1.12);
    z-index: 2;
}

.path-node.node-locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.path-node.node-unlocked {
    border-color: var(--theme-color, #e040fb);
    border-style: dashed;
}

.path-node.node-current {
    border-color: var(--theme-color, #e040fb);
    border-style: solid;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color, #e040fb) 25%, transparent);
    animation: node-pulse 1.6s ease-in-out infinite alternate;
}

@keyframes node-pulse {
    from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color, #e040fb) 20%, transparent); }
    to   { box-shadow: 0 0 12px 4px color-mix(in srgb, var(--theme-color, #e040fb) 50%, transparent); }
}

.path-node.node-done-1 {
    border-color: var(--theme-color, #e040fb);
    border-style: solid;
    background: color-mix(in srgb, var(--theme-color, #e040fb) 12%, #0d0d11);
    box-shadow: 0 0 8px color-mix(in srgb, var(--theme-color, #e040fb) 30%, transparent);
}

.path-node.node-done-2 {
    border-color: #ffd600;
    border-style: solid;
    background: color-mix(in srgb, #ffd600 8%, #0d0d11);
    box-shadow: 0 0 10px rgba(255, 214, 0, 0.35);
}

.node-num {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: #666677;
    line-height: 1;
    margin-bottom: 5px;
}

.path-node.node-unlocked .node-num,
.path-node.node-current  .node-num  { color: var(--theme-color, #e040fb); }
.path-node.node-done-1   .node-num  { color: var(--theme-color, #e040fb); }
.path-node.node-done-2   .node-num  { color: #ffd600; }

.node-bolts { font-size: 0.8rem; line-height: 1; display: flex; gap: 2px; }

/* Connecteurs horizontaux */
.path-conn-h {
    flex: 1;
    height: var(--conn-thickness);
    background: #1e1e2a;
    position: relative;
}

.path-conn-h.conn-done {
    background: var(--theme-color, #e040fb);
    box-shadow: 0 0 6px color-mix(in srgb, var(--theme-color, #e040fb) 60%, transparent);
}

.path-conn-h.conn-current {
    background: var(--theme-color, #e040fb);
    box-shadow: 0 0 6px color-mix(in srgb, var(--theme-color, #e040fb) 60%, transparent);
}

/* Connecteurs verticaux (virages) */
.path-turn {
    display: flex;
    height: 34px;
    align-items: stretch;
}

.path-turn-right { justify-content: flex-end; padding-right: 37px; }
.path-turn-left  { justify-content: flex-start; padding-left: 37px; }

.path-turn-line {
    width: var(--conn-thickness);
    background: #1e1e2a;
}

.path-turn-line.conn-done {
    background: var(--theme-color, #e040fb);
    box-shadow: 0 0 6px color-mix(in srgb, var(--theme-color, #e040fb) 60%, transparent);
}

.path-turn-line.conn-current {
    background: var(--theme-color, #e040fb);
    box-shadow: 0 0 6px color-mix(in srgb, var(--theme-color, #e040fb) 60%, transparent);
}

/* ── Affichage éclairs lors du succès ───────────────────────────── */
.success-bolts {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    z-index: 2000;
    pointer-events: none;
    animation: bolts-pop 1.2s ease forwards;
    letter-spacing: 8px;
}

@keyframes bolts-pop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    70%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ── Footer ─────────────────────────────── */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 6px 24px;
  font-size: .75rem;
  color: #7d8590;
  z-index: 1;
}

.site-footer a {
  color: inherit;
}

/* ── Bouton mode clair/sombre ───────────────────────────────────────── */
.theme-toggle-btn {
    position: fixed;
    top: 12px;
    right: 14px;
    z-index: 2000;
    background: rgba(255,255,255,0.06);
    border: 1px solid #444455;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 0 0;
    padding-top: 3px;
}
.theme-toggle-btn:hover { border-color: #e040fb; background: rgba(224,64,251,0.1); }

/* ── Mode clair ─────────────────────────────────────────────────────── */

body.light-mode {
    background: #f2f2f7 !important;
    color: #0f0f1a !important;
}

body.light-mode .theme-toggle-btn {
    background: rgba(0,0,0,0.05);
    border-color: #bbbbc8;
}
body.light-mode .theme-toggle-btn:hover {
    border-color: #6000c0;
    background: rgba(96, 0, 192, 0.08);
}

/* Titres */
body.light-mode h1 { color: #9500d3; text-shadow: none; }
body.light-mode #gameArea h2 { color: #44445a; }
body.light-mode #codeCol h3, body.light-mode .colRes h3 {
    color: #0f0f1a;
    border-bottom-color: #6000c0;
}
body.light-mode #themeSelector h1 { color: #9500d3; }
body.light-mode #themeSelector p  { color: #44445a; }

/* Spans généraux */
body.light-mode span { color: #0f0f1a; }
body.light-mode .text-muted { color: #55556a !important; }

/* Blocs de jeu */
body.light-mode #codeCol,
body.light-mode .colRes {
    background: #ffffff;
    border-color: #c8c8d8;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    animation: none;
}
body.light-mode #codeCol.success,
body.light-mode .colRes.success {
    border-color: #4caf50 !important;
    box-shadow: 0 4px 20px rgba(76,175,80,0.15);
}

/* Zone de code */
body.light-mode #codeZone {
    background: #eaeaf3;
    border-color: #c8c8d8;
    color: #0f0f1a;
}
body.light-mode #current {
    background-color: rgba(96, 0, 192, 0.09);
    border-left-color: #6000c0 !important;
}

/* Zones résultats */
body.light-mode #answerZone,
body.light-mode #playerRes {
    background: #eaeaf3;
    border-color: #c8c8d8;
}

/* Tableau variables */
body.light-mode .var-table thead th {
    color: #9898b0;
    border-bottom-color: #c8c8d8;
}
body.light-mode .var-table tbody tr { border-bottom-color: #e0e0ea; }
body.light-mode .var-name,
body.light-mode .var-value { color: #5800b0; }
body.light-mode .var-empty { color: #bbbbcc; }

/* Succès variables */
body.light-mode .colRes.success .var-table thead th {
    color: #3a7a3a;
    border-bottom-color: #3a7a3a;
}
body.light-mode .colRes.success .var-name,
body.light-mode .colRes.success .var-value { color: #4caf50; }

/* Zone programme */
body.light-mode #programZone {
    background: #eaeaf3;
    border-color: #c8c8d8;
}
body.light-mode .program-line-num { color: #c0c0d0; }
body.light-mode .program-line code { color: #222233; }
body.light-mode .program-separator { border-color: #c8c8d8; }
body.light-mode .program-counter { color: #aaaabc; }

/* Batterie */
body.light-mode .battery-container {
    background: rgba(242, 242, 247, 0.95);
    border-top-color: #c8c8d8;
}
body.light-mode .battery-segment {
    background: #d8d8e8;
    border-color: #c0c0d0;
}
body.light-mode .battery-segment.filled {
    background: linear-gradient(90deg, #9d4edd, #e040fb);
    border-color: #e040fb;
    box-shadow: 0 0 6px rgba(224, 64, 251, 0.4);
}
body.light-mode .battery-segment.current {
    background: linear-gradient(90deg, #9d4edd, #e040fb);
    border-color: #e040fb;
    box-shadow: 0 0 10px rgba(224, 64, 251, 0.7);
}
body.light-mode .battery-container.success { border-top-color: #4caf50; }

/* Bulle robot */
body.light-mode .speech-bubble {
    background: #ffffff;
    border-color: rgba(96, 0, 192, 0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
body.light-mode .speech-bubble::after { border-top-color: #ffffff; }
body.light-mode .speech-text { color: #222233; }
body.light-mode .bubble-close { color: #aaaabc; }
body.light-mode .bubble-close:hover { color: #6000c0; }

body.light-mode .speech-bubble.error {
    border-color: rgba(211, 47, 47, 0.5);
    background: #fff5f5;
    box-shadow: 0 8px 24px rgba(211, 47, 47, 0.12);
}
body.light-mode .speech-bubble.error::after { border-top-color: #fff5f5; }
body.light-mode .speech-bubble.error .speech-text { color: #c62828; }

/* Sélecteur de parcours */
body.light-mode .theme-list-item {
    background: #ffffff;
    border-color: #c8c8d8;
}
body.light-mode .theme-list-item:hover {
    border-color: rgba(96, 0, 192, 0.45);
    box-shadow: 0 4px 20px rgba(96, 0, 192, 0.07);
}
body.light-mode .theme-list-desc { color: #55556a; }
body.light-mode .theme-progress-bar-wrap { background: #e0e0ea; }
body.light-mode .theme-reset-btn {
    color: #7777aa;
    border-color: #c0c0d0;
    background: rgba(0,0,0,0.03);
}
body.light-mode .theme-reset-btn:hover {
    color: #6000c0;
    border-color: #6000c0;
    background: rgba(96,0,192,0.06);
}

/* Map des niveaux : fond blanc neutre, la bordure et les éclairs portent la couleur */
body.light-mode .path-node               { background: #ffffff; border-color: #c8c8d8; }
body.light-mode .path-node.node-locked   { opacity: 0.5; background: #eeeef4; }
body.light-mode .path-node.node-unlocked { border-color: var(--theme-color); }
body.light-mode .path-node.node-current  { border-color: var(--theme-color); }
body.light-mode .path-node.node-done-1   {
    border-color: var(--theme-color);
    box-shadow: 0 0 10px color-mix(in srgb, var(--theme-color) 22%, transparent);
}
body.light-mode .path-node.node-done-2   {
    border-color: #b89000;
    box-shadow: 0 0 10px rgba(184, 144, 0, 0.35);
}
body.light-mode .node-num                         { color: #aaaabc; }
body.light-mode .path-node.node-done-2 .node-num  { color: #8a6800; }
body.light-mode .bolt-on                           { color: #c8920a; }
body.light-mode .bolt-off                          { color: #d0d0e0; }
body.light-mode .path-conn-h                       { background: #dddde8; }
body.light-mode .path-conn-h.conn-done             { background: var(--theme-color); }
body.light-mode .path-conn-h.conn-current          { background: var(--theme-color); }
body.light-mode .path-turn-line                    { background: #dddde8; }
body.light-mode .path-turn-line.conn-done          { background: var(--theme-color); }
body.light-mode .path-turn-line.conn-current       { background: var(--theme-color); }
body.light-mode .map-stars-summary                 { color: #55556a; }

/* Modale fin de parcours */
body.light-mode .completion-modal-content {
    background: #ffffff;
    border-color: rgba(96, 0, 192, 0.3);
    color: #0f0f1a;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
body.light-mode .completion-modal-content .modal-title { color: #0f0f1a; }
body.light-mode .completion-modal-content .text-muted { color: #55556a !important; }
body.light-mode .completion-modal-content p { color: #333344; }

/* Boutons Bootstrap */
body.light-mode .btn-outline-secondary {
    color: #44445a;
    border-color: #c8c8d8;
}
body.light-mode .btn-outline-secondary:hover {
    background: #eaeaf3;
    color: #0f0f1a;
}

/* Scrollbar */
body.light-mode ::-webkit-scrollbar-track { background: #eaeaf3; }
body.light-mode ::-webkit-scrollbar-thumb { background: #c0c0d0; }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: #6000c0; }

/* Footer */
body.light-mode .site-footer { color: #9090a8; }

/* Debug bar */
body.light-mode .debug-bar {
    background: rgba(180, 120, 0, 0.06);
    border-color: rgba(150, 100, 0, 0.35);
}
body.light-mode .debug-label { color: #8a5000; }
body.light-mode .debug-input {
    background: #ffffff;
    border-color: #8a5000;
    color: #8a5000;
}
body.light-mode .debug-btn {
    border-color: #8a5000;
    color: #8a5000;
}
body.light-mode .debug-btn:hover { background: rgba(138, 80, 0, 0.1); }