/* 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;
}

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