/* Theme « Retrospective » du site prog.experimentations.xyz pour les visualisateurs de boucles.
   Charge APRES style-commun.css : en-tete blanc avec titre gris fin et filet, navigation en
   onglets sobres, pied en bandeau rouille avec lisere orange (comme l'accueil et le hub). */

body { font-size: 18px; color: var(--noir); display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; width: 100%; min-width: 0; }
@media (max-width: 640px) { main { padding: 14px; } .table-trace { font-size: .85em; } }
a { color: var(--rouille); }
a:hover { color: var(--accent); }

.en-tete {
  background: var(--blanc);
  padding: 34px 40px 0;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid var(--gris-filet);
  align-items: flex-end;
}
.en-tete-titre {
  color: var(--gris-titre);
  font-family: var(--police-titre);
  font-weight: 300;
  font-size: 38px;
  letter-spacing: -.5px;
  text-transform: none;
  padding-bottom: 10px;
}
.barre-navigation { gap: 2px; padding-bottom: 0; }
.barre-navigation a {
  color: var(--gris-titre);
  border: 0;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  padding: 6px 10px 8px;
  font-weight: 400;
  font-size: 16px;
}
.barre-navigation a:hover { color: var(--rouille); background: transparent; border-color: var(--accent-clair); }
.barre-navigation a.actif { color: var(--rouille); background: transparent; border-color: var(--rouille); font-weight: 700; }

/* Les actions : sobres, cadre fin, survol orange pale */
.action { background: var(--blanc); color: var(--noir); font-family: var(--police-corps); font-weight: 700; }
.action:hover { background: var(--accent-clair); }

footer {
  background: var(--rouille);
  border-top: 7px solid var(--accent);
  color: var(--blanc);
  margin-top: 60px;
  padding: 14px 40px;
  font-size: 15px;
}
footer p { margin: 0; }
footer a { color: var(--blanc); }
footer a:hover { color: #FFE3C2; }

@media (max-width: 640px) {
  .en-tete { padding: 24px 16px 0; }
  .en-tete-titre { font-size: 30px; }
}

/* Tables de trace : en-tete rouille, comme les tableaux des diaporamas R03 a R06 */
.table-trace thead th { background: var(--rouille); color: var(--blanc); }
.carte-tour-numero { background: var(--rouille); }

/* Consoles : comme les blocs « Résultat » des diaporamas (fond brun tres fonce, texte clair) */
.console { background: #1B1714; color: #F2EDE6; }

/* Petits ecrans : la table de trace et le code defilent dans leur boite, la page ne deborde pas */
#zoneTrace { overflow-x: auto; }
.traceur-grille > * { min-width: 0; }
.boite-volet { overflow-x: auto; }