/* Style commun aux visualisateurs de boucles Python.
   Signature colorblock orange, identique aux visualisateurs de conditions :
   fond creme, bordures noires epaisses, ombres decalees, polices
   Bungee / Lilita One / Nunito. */

:root {
  --accent: #FF9500;
  --accent-clair: #FFCC00;
  --noir: #111;
  --blanc: #fff;
  --creme: #FFF7E6;
  --vrai: #16a34a;
  --faux: #FF3B30;
  --bleu: #2563eb;
  --gris-ignore: #9aa0a6;

  /* Couleurs pleines par colonne de variable dans la table de trace. */
  --colonne-1: #2563eb;
  --colonne-2: #16a34a;
  --colonne-3: #ea580c;
  --colonne-4: #7c3aed;
  --colonne-5: #db2777;
  --colonne-6: #0d9488;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  color: var(--noir);
  background: var(--creme);
  font-weight: 700;
  line-height: 1.5;
}

code, .monospace, textarea, .affichage-code {
  font-family: 'Consolas', 'Menlo', 'Courier New', monospace;
}

/* En-tete et navigation entre les visualisations */
.en-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 24px;
  background: var(--noir);
}

.en-tete-titre {
  font-family: 'Bungee', cursive;
  color: var(--blanc);
  font-size: 20px;
  margin: 0;
}

.barre-navigation { display: flex; gap: 8px; flex-wrap: wrap; }

.barre-navigation a {
  color: #ddd;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  padding: 6px 16px;
  border: 3px solid #444;
  border-radius: 999px;
}

.barre-navigation a:hover {
  color: var(--noir);
  background: var(--accent-clair);
  border-color: var(--accent-clair);
}

.barre-navigation a.actif {
  color: var(--noir);
  background: var(--accent);
  border-color: var(--accent);
}

main { max-width: 1080px; margin: 0 auto; padding: 22px; }

.intro {
  background: var(--blanc);
  border: 4px solid var(--noir);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--accent);
  padding: 16px 22px;
  font-size: 1.05em;
  margin-bottom: 18px;
}

/* Actions (boutons) */
.action {
  font-family: 'Lilita One', cursive;
  font-size: 1.05em;
  cursor: pointer;
  background: var(--blanc);
  color: var(--noir);
  border: 4px solid var(--noir);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--noir);
  padding: 10px 20px;
}

.action:hover { background: var(--accent-clair); }
.action.actif { background: var(--accent); }
.action:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--noir); }

.barre-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

/* Boites de contenu */
.boite-controle {
  background: var(--blanc);
  border: 5px solid var(--noir);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--noir);
  padding: 22px 26px;
  margin-bottom: 22px;
}

.boite-titre {
  font-family: 'Lilita One', cursive;
  font-size: 1.3em;
  margin: 0 0 14px;
}

/* Curseurs (range, debut, fin, pas) */
.ligne-curseur {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.nom-curseur {
  font-family: 'Consolas', monospace;
  font-size: 1.2em;
  font-weight: 800;
  color: var(--bleu);
  min-width: 70px;
}

.ligne-curseur input[type="range"] {
  flex: 1;
  min-width: 180px;
  height: 14px;
  accent-color: var(--accent);
}

.valeur-curseur {
  font-family: 'Consolas', monospace;
  font-size: 1.4em;
  font-weight: 800;
  min-width: 48px;
  text-align: center;
  border: 4px solid var(--noir);
  border-radius: 10px;
  padding: 4px 8px;
}

/* Champ de code */
.zone-code-titre {
  font-family: 'Lilita One', cursive;
  font-size: 1.2em;
  margin: 0 0 10px;
}

#champsCode,
.champs-code {
  width: 100%;
  min-height: 150px;
  background: var(--blanc);
  color: var(--noir);
  border: 4px solid var(--noir);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--noir);
  padding: 14px;
  font-size: 16px;
  line-height: 1.7;
  resize: vertical;
  outline: none;
}

#champsCode:focus,
.champs-code:focus { border-color: var(--accent); }

.message-erreur {
  background: var(--faux);
  color: var(--blanc);
  border: 4px solid var(--noir);
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800;
  margin-bottom: 18px;
}

/* ============================================================
   Table de trace : une rangee par tour de boucle.
   ============================================================ */
.table-trace {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--blanc);
  border: 5px solid var(--noir);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--noir);
  overflow: hidden;
}

.table-trace th,
.table-trace td {
  padding: 12px 14px;
  text-align: center;
  font-family: 'Consolas', monospace;
  font-size: 1.05em;
  border-bottom: 2px solid #eee;
}

.table-trace thead th {
  background: var(--noir);
  color: var(--blanc);
  font-family: 'Bungee', cursive;
  font-size: 0.82em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.table-trace .colonne-tour { color: var(--accent-clair); }

.trace-numero { font-weight: 800; color: #555; }

.trace-rangee-sortie td {
  background: #f3f4f6;
  color: #555;
  font-style: italic;
}

.trace-valeur-changee {
  background: var(--accent);
  color: var(--noir);
  font-weight: 800;
  border-radius: 8px;
}

.badge-condition {
  display: inline-block;
  font-family: 'Bungee', cursive;
  font-size: 0.78em;
  color: var(--blanc);
  border: 3px solid var(--noir);
  border-radius: 30px;
  padding: 4px 14px;
}

.badge-vrai { background: var(--vrai); }
.badge-faux { background: var(--faux); }

.trace-instruction {
  font-family: 'Consolas', 'DejaVu Sans Mono', monospace;
  font-weight: 700;
  color: var(--noir);
  text-align: left;
}

/* Valeur de la variable de boucle injectee dans l'instruction (ex. le « n »). */
.trace-valeur-boucle {
  background: var(--bleu);
  color: var(--blanc);
  font-weight: 800;
  border-radius: 6px;
  padding: 0 5px;
}

/* ============================================================
   Barre d'accumulateur : le total qui grossit a chaque tour.
   ============================================================ */
.boite-accumulateur { display: flex; flex-direction: column; gap: 10px; }

.ligne-accumulateur {
  display: grid;
  grid-template-columns: 56px 1fr 90px;
  align-items: center;
  gap: 14px;
}

.accumulateur-tour {
  font-family: 'Bungee', cursive;
  font-size: 0.9em;
  color: var(--accent);
  text-align: center;
}

.accumulateur-piste {
  background: #f0ead9;
  border: 3px solid var(--noir);
  border-radius: 10px;
  height: 34px;
  overflow: hidden;
}

.accumulateur-remplissage {
  height: 100%;
  background: var(--accent);
  border-radius: 6px 0 0 6px;
  transition: width 0.3s ease;
  min-width: 3px;
}

.accumulateur-valeur {
  font-family: 'Consolas', monospace;
  font-size: 1.3em;
  font-weight: 800;
  text-align: right;
}

/* ============================================================
   Puces de valeurs generees par range()
   ============================================================ */
.boite-valeurs { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.puce-valeur {
  font-family: 'Consolas', monospace;
  font-size: 1.25em;
  font-weight: 800;
  color: var(--blanc);
  background: var(--bleu);
  border: 4px solid var(--noir);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--noir);
  padding: 10px 16px;
  animation: apparition 0.2s ease;
}

@keyframes apparition {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.puce-vide { font-style: italic; color: #777; font-family: 'Nunito', sans-serif; }

.compte-tours {
  font-family: 'Lilita One', cursive;
  font-size: 1.3em;
  margin-top: 16px;
}

.compte-tours strong { color: var(--accent); }

/* Console de sortie (style terminal) */
.console {
  background: #0E1A12;
  color: #34C759;
  border: 5px solid var(--noir);
  border-radius: 14px;
  box-shadow: 8px 8px 0 var(--accent);
  padding: 18px 24px;
  font-family: 'Consolas', monospace;
  font-size: 1.2em;
  white-space: pre-wrap;
  margin-top: 18px;
}

.console .invite { color: #7CC79B; }

/* ============================================================
   Accueil : cartes de visualisation
   ============================================================ */
.grille-visualisations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.carte-visualisation {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--noir);
  background: var(--blanc);
  border: 5px solid var(--noir);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--noir);
  padding: 20px 22px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.carte-visualisation:hover { transform: translate(-2px, -2px); box-shadow: 11px 11px 0 var(--accent); }
.carte-visualisation:active { transform: translate(3px, 3px); box-shadow: 4px 4px 0 var(--noir); }

.carte-numero {
  font-family: 'Bungee', cursive;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.carte-titre { font-family: 'Lilita One', cursive; font-size: 1.4rem; margin: 4px 0 8px; }
.carte-description { font-weight: 700; font-size: 0.96em; color: #444; }

.carte-quiz { box-shadow: 8px 8px 0 var(--bleu); }
.carte-quiz:hover { box-shadow: 11px 11px 0 var(--bleu); }
.carte-quiz .carte-numero { color: var(--bleu); }

/* ============================================================
   Quiz
   ============================================================ */
.quiz-question {
  font-family: 'Lilita One', cursive;
  font-size: 1.3em;
  margin: 0 0 14px;
}

.quiz-choix { display: flex; flex-direction: column; gap: 12px; }

.quiz-choix .action { text-align: left; font-family: 'Consolas', monospace; }
.quiz-choix .action.choix-correct { background: var(--vrai); color: var(--blanc); }
.quiz-choix .action.choix-incorrect { background: var(--faux); color: var(--blanc); }

.quiz-explication {
  margin-top: 16px;
  background: var(--accent-clair);
  border: 4px solid var(--noir);
  border-radius: 12px;
  padding: 14px 18px;
  font-weight: 700;
}

.zone-score {
  font-family: 'Bungee', cursive;
  font-size: 1em;
  margin-left: auto;
}

/* ============================================================
   Deroule SANS table : une carte par tour (sequence verticale).
   ============================================================ */
.deroule-cartes { display: flex; flex-direction: column; gap: 16px; }

.fleche-tours {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bungee', cursive;
  font-size: 1.4em;
  color: var(--accent);
  margin: -6px 0;
}

.carte-tour {
  background: var(--blanc);
  border: 5px solid var(--noir);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--accent);
  padding: 16px 20px;
  animation: apparition 0.25s ease;
}

.carte-tour.carte-sortie {
  box-shadow: 8px 8px 0 var(--gris-ignore);
  background: #f7f7f7;
}

.carte-tour-entete {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.carte-tour-numero {
  font-family: 'Bungee', cursive;
  font-size: 1em;
  color: var(--blanc);
  background: var(--noir);
  border-radius: 30px;
  padding: 5px 16px;
}

.carte-tour-variables {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.puce-variable { display: flex; flex-direction: column; min-width: 78px; }

.puce-variable-nom {
  font-family: 'Consolas', 'DejaVu Sans Mono', monospace;
  font-size: 0.85em;
  font-weight: 800;
  color: var(--blanc);
  background: var(--noir);
  padding: 3px 10px;
  border-radius: 8px 8px 0 0;
  text-align: center;
}

.puce-variable-valeur {
  font-family: 'Consolas', 'DejaVu Sans Mono', monospace;
  font-size: 1.5em;
  font-weight: 800;
  color: var(--blanc);
  text-align: center;
  padding: 12px 14px;
  border-radius: 0 0 8px 8px;
  border: 3px solid var(--noir);
  border-top: none;
}

.puce-variable.changee .puce-variable-valeur {
  outline: 4px solid var(--accent);
  outline-offset: -1px;
}

.puce-boucle .puce-variable-nom { background: var(--bleu); }
.puce-boucle .puce-variable-valeur { background: var(--bleu); }
.puce-normale .puce-variable-valeur { background: #475569; }

.carte-tour-instruction {
  font-family: 'Consolas', 'DejaVu Sans Mono', monospace;
  font-weight: 700;
  font-size: 1.05em;
  background: var(--creme);
  border: 3px solid var(--noir);
  border-radius: 10px;
  padding: 10px 14px;
}

.carte-tour-sortie-texte {
  font-family: 'Lilita One', cursive;
  font-size: 1.2em;
  color: #555;
}

/* ============================================================
   Traceur de memoire ligne par ligne (lecteur pas-a-pas)
   ============================================================ */
.lecteur-controles {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--blanc);
  border: 4px solid var(--noir);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--noir);
  padding: 12px 16px;
  margin-bottom: 18px;
}

.lecteur-controles .action { padding: 8px 14px; box-shadow: 3px 3px 0 var(--noir); font-size: 0.95em; }
.lecteur-controles .action:active { box-shadow: 1px 1px 0 var(--noir); }

.lecteur-curseur { flex: 1; min-width: 160px; height: 14px; accent-color: var(--accent); }

.lecteur-etat {
  font-family: 'Lilita One', cursive;
  font-size: 1.05em;
  margin-left: auto;
  white-space: nowrap;
}

.lecteur-vitesse { display: flex; align-items: center; gap: 8px; font-size: 0.9em; }
.lecteur-vitesse input[type="range"] { width: 90px; accent-color: var(--accent); }

.traceur-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 880px) { .traceur-grille { grid-template-columns: 1fr; } }

.boite-volet {
  background: var(--blanc);
  border: 5px solid var(--noir);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--noir);
  padding: 16px 18px;
}

.volet-titre {
  font-family: 'Lilita One', cursive;
  font-size: 1.1em;
  margin: 0 0 12px;
}

/* Code avec numeros de ligne et ligne courante surlignee */
.code-tracee {
  font-family: 'Consolas', 'DejaVu Sans Mono', monospace;
  font-size: 1.02em;
  line-height: 1.6;
}

.code-ligne { display: flex; gap: 12px; padding: 2px 6px; border-radius: 6px; white-space: pre; }
.code-ligne.code-active { background: var(--accent-clair); box-shadow: inset 4px 0 0 var(--accent); }
.code-numero { color: #999; min-width: 26px; text-align: right; user-select: none; }
.code-contenu { white-space: pre; }

/* Cases memoire */
.memoire-cases { display: flex; gap: 14px; flex-wrap: wrap; min-height: 70px; }

.memoire-case { display: flex; flex-direction: column; min-width: 70px; animation: apparition 0.18s ease; }

.memoire-case-nom {
  font-family: 'Consolas', 'DejaVu Sans Mono', monospace;
  font-size: 0.82em;
  font-weight: 800;
  color: var(--blanc);
  background: var(--noir);
  padding: 3px 10px;
  border-radius: 8px 8px 0 0;
  text-align: center;
}

.memoire-case-valeur {
  font-family: 'Consolas', 'DejaVu Sans Mono', monospace;
  font-size: 1.35em;
  font-weight: 800;
  color: var(--blanc);
  text-align: center;
  padding: 11px 13px;
  border-radius: 0 0 8px 8px;
  border: 3px solid var(--noir);
  border-top: none;
  word-break: break-word;
}

.memoire-case.changee .memoire-case-valeur { outline: 4px solid var(--accent); outline-offset: -1px; }

.val-entier { background: #2563eb; }
.val-float { background: #0d9488; }
.val-chaine { background: #ea580c; }
.val-booleen { background: #7c3aed; }
.val-liste { background: #db2777; }
.val-aucun { background: #64748b; }
.val-autre { background: #475569; }

.memoire-vide { color: #999; font-style: italic; }

.console-traceur { margin-top: 0; min-height: 48px; font-size: 1.05em; }
.console-traceur .console-vide { color: #4b7a5c; font-style: italic; }

footer { text-align: center; color: #555; padding: 26px; font-size: 0.95em; }
footer a { color: var(--bleu); font-weight: 800; }