:root {
  --machine-border-color:#030;
  --machine-bgcolor:#222;    
  --program-border-color:red;
  --program-idx-color:#888;  
  --program-control-color:red;
  --program-bgcolor:#111;  
  --comment-bgcolor:#111;
  --comment-border-color:red;
  --tape-border-color:#FF4;
  --tape-info-color:#FFF;
  --tape-info-bgcolor:#711;  
  --tape-control-color:purple;
  --transition-bgcolor:#181818;
  --transition-color:#CCC;
  --head-color:red;
  --cell-border-color:#888;
  --cell-bgcolor:#DDD;              
  --load-color:darkblue;
  --help-color:yellow;
  --highlight-bgcolor:#711; /*fffa8b*/
  --button-bgcolor:#660000;
  --button-color:white;
  --diagram-bgcolor:inherit;
  --diagram-border-color:inherit;  
}

@media print {
  div#TURING_MACHINE {
    transform: scale(0.75); /* Réduit la taille globale */
    transform-origin: top left; /* Évite le décalage */
    width: 100%; /* Permet l'ajustement */
    height: auto;
  }
}

/* POUR MASQUER LES DIV DU SIMULATEUR */
/* QUI NE SONT PAS DANS LA MODELE ABSTRAIT */
.hidden{
  display:none !important;
}

#MASK{
  background:#000;
  border-width:2px;
  border-style:solid;
  border-radius:4px;
  padding-left:6px;
  padding-right:8px;
  padding-top:0px;
  padding-bottom:2px;
  text-align:center;
  border-top-color:#BBB;
  border-bottom-color:#333;
  border-left-color:#888;  
  border-right-color:#444;  
  background:var(--button-bgcolor);  
  color:var(--button-color);
}


/* PETITS BOUTONS DE CONTRÔLE */
.push{
  box-sizing: border-box; 
  width:2rem;
  min-width:2rem;
  max-width:2rem;
  height:2rem;
  min-height:2rem;
  max-height:2rem;
  margin:0px;
  color:#DDD;
  padding:0px;
  padding-bottom:2px;  
  border-radius:3px;
  border-top: 1px #DDD solid;
  border-right: 1px #666 solid;
  border-bottom:1px #444 solid;
  border-left: 1px #AAA solid;
  background-color:#411;
  font-family:calibri;
  font-size:120%;
  font-weight:bold;
  text-align:center;
}

.push.disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(80%);
}

.push.alive {
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
  border-color: #99ccff;
}


/* Bloc principal de la machine */
#TURING_MACHINE {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction:column;
  justify-content: center;
  margin: 2em auto;
  padding: 0px;
  width: 840px;
  height: 134px; /* cf. constante mintall dans .js */
  border: 1px solid var(--machine-border-color);
  border-radius: 8px;
  bgcolor: var(--machine-bgcolor);;
  font-size: small;
  font-family: Calibri,"Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
  text-align: center;
  color: #FFF;
}

/* RUBAN ET SES ELEMENTS */

/* Le conteneur global */
#TAPE_CONTROL {
  box-sizing: border-box;
  position: absolute;
  top: 130px;
  left: 302px;
  width: 236px;
  border-radius: 4px;
  border: 1px dashed var(--tape-border-color);
  border-bottom-color:#44F;
  border-right-color:#44F;  
  font-family: Calibri;
}

/* les informations sur l'état de la machine */
#TAPE_CONTROL_INFO {
  box-sizing: border-box;  
  display: flex;
  border: 0px dashed var(--tape-info-bgcolor);
  border-left: 0px;
  border-right: 0px;
  background-color:var(--tape-info-bgcolor);
  color:var(--tape-info-color);
  border-radius:0px;
  height:32px;
  padding-left:1rem;
  width:auto;
  text-align:center;
  justify-content: center;
  font-size:1.125rem;
  font-family:calibri;
  font-weight:bold;
}

/* Le titre reste toujours visible */
#TAPE_CONTROL_TITLE {
  font-size: 125%;
  color: white;
  padding: 4px;
}

/* Le contenu peut être masqué facilement */
#TAPE_CONTROL_CONTENT {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 4px;
  padding: 8px;
}

#TAPE {  
  box-sizing: border-box;
  display: flex;  
  position:absolute;
  top:8px;
  left:8px;
  height: 114px;
  width: fit-content;
  max-width: calc(100% - 16px);
  padding:8px;
  padding-bottom:0px;  
  margin: 0px auto;
  border: 3px solid var(--tape-border-color);
  border-right-color:#44F;
  border-bottom-color:#44F;  
  border-radius: 8px;
  background-color: inherit;
  justify-content: center;
  align-items: flex-start;
  gap: 1px;
  overflow: hidden;
  flex-shrink: 0;
}

.cell {
  box-sizing: border-box;    
  width: 42px;
  height: 32px;
  border: 2px solid var(--cell-border-color);
  background-color: var(--cell-bgcolor);
  color: #111;
  text-align: center;
  line-height: 36px;
  font-size: 1.6em;
  border-radius: 4px;
  font-family:calibri;
}

.cell-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48px;
}


.cell.head {
  background-color: #161616;
  color: #FFF;
  border: 2px solid var(--head-color);
  border-bottom-left-radius:0px;
  border-bottom-right-radius:0px;
/*  outline: 2px solid  var(--head-color);  */
  font-weight: bold;
}


.cell.shifted {
  background-color: #88F; /* Rouge clair ou #f88 pour plus doux */
  color: #00C;
  border: 2px solid #00C;
  outline: none;
  font-weight: bold;
}


.index {
    margin-top: 0px;
    margin-bottom: 0px;    
    font-size: 12px;
    color: #AAA;
}

#CURRENT_STATE {
    box-sizing: border-box;        
    position:absolute;
    display:block;
    top:81px;
    left:382px;    
    width:76px;
    height:36px;    
    padding: 4;
    font-size: 1.6em;
    font-family:"calibri";
    font-weight: bold;
    color: #FFF;
    background-color: #161616;
    border-radius: 0 0 6px 6px;
    border: 2px solid red;
    min-height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    item-align:center;
}


/* LE BLOC CONTENANT LES COMMENTAIRES/INFORMATIONS */
#COMMENTS::before{
    display:block;
    width:100%;
    content:"COMMENTAIRES";
    text-align:left;
    color: #F00;
}

#COMMENTS {
  box-sizing: border-box;    
  position:absolute;
  right:8px;
  top:264px;
  width:542px;
  height:92px;
  padding:8px;
  padding-top:4px;
  border-radius:8px;
  border: 1px dashed var(--comment-border-color);  
  background:var(--comment-bgcolor);
  color:#CCC;
  font-family:Calibri;
  font-weight:normal;
  text-align:left;
  font-size:120%;
}
  

/* LE BLOC CONTENANT LES INSTRUCTIONS DE LA MACHINE */
/* Le conteneur global */
#PROGRAM_CONTROL {
  box-sizing: border-box;
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 32.5%;
  height:132px;
  border-radius: 4px;
  border: 1px dashed var(--program-border-color);
  font-family: Calibri;
}

/* Le titre reste toujours visible */
#PROGRAM_CONTROL_TITLE {
  font-size: 125%;
  color: white;
  padding: 4px;
}

/* Le contenu peut être masqué facilement */
#PROGRAM_CONTROL_CONTENT {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 4px;
  padding: 8px;
}

#PROGRAM {
  box-sizing: border-box;
  position:absolute;
  display: flex;
  flex-direction: column;
  top:66px;
  left:8px;
  width: 32.5%;
  height:392px;
  margin: 0px;
  margin-top:64px;
  background-color:var(--program-bgcolor);
  border: 3px solid var(--program-border-color);
  border-radius: 8px;
  padding: 8px;
  font-family: "Courier New", monospace;
  font-size: 14px;
  color: #eee;
  gap: 1px; /* espace subtil entre lignes */
  overflow-x: hidden;
  overflow-y: auto;  
}

.transition {
  display: flex;
  align-items: flex-start; /* aligne le haut de la transition */
  background-color: var(--transition-bgcolor);
  color: var(--transition-color);  
  border-radius: 2px;
  border-left:3px solid transparent;
}

.transition.error {
  background-color: #880000; /* Fond rouge sombre */
  color: #ff0;               /* Texte jaune */
  opacity: 0.8;
}

.transition-index {
  width: 2em;
  text-align: right;
  color: var(--program-idx-color);
  background:#111;
  padding-right:8px;
  margin-right: 8px; /* espace visuel avec le corps */
  font-size:12px;
}

.transition-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  white-space: pre;
  align-items: flex-start;  
}


.transition-left {
  flex: none;
  min-width: 4.0em;
  text-align: right;
  padding-right: 0.25em;
}

.transition-arrow {
  flex: none;
  width: 2em;
  text-align: center;
}

.transition-right {
  flex: 1;
  text-align: left;
}

.highlight {
  background-color: var(--highlight-bgcolor); /* jaune pâle */
  border-left: 3px solid white; /* bordure orange */
  color:white;
  font-weight:bold;
}


/* LE BLOC DE CHARGEMENT DU FICHIER PROGRAMME */
#PROGRAM_LOADER {
  box-sizing: border-box;  
  border-radius:4px;
  padding: 8px; 
  text-align:center;
  font-family: inherit;
  color: #ddd;
}

#fileInput {
  margin-top: 4px;
}


/* FORMAT DU NOM DU FICHIER PROGRAMME DANS LE BLOC DE CHARGEMENT */
#FILENAME::before{font-size:normal;content:"➥ ";}
#FILENAME::after{font-size:large;content:"";}
#FILENAME{
  color:yellow;
  font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
  text-weight:bold;
  margin:8px;
  margin-top:0px;
  padding:8px;
  border-radius:4px;
  background:inherit;
  height:32px;
  font-size:100%;
  overflow:hidden;
  visibility:visible;
}

/* LES COMPTEURS DE COMPLEXITE EN TEMPS ET EN ESPACE */
#COMPLEXITY::before {
  width:100%;
  content:"COMPLEXITÉ :";
  font-size:120%;
}

#COMPLEXITY {
  box-sizing: border-box;  
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  align-items: center;  
  position: absolute;
  top: 132px;
  right: 58px;
  height:64px;
  width:192px;  
  border:1px dashed #FFF;
  border-radius:8px;
}

#TAU::before, #EPSILON::before{
  content:"τ(x) = ";
  font-family:"Trebuchet MS";
  font-style:italic;
}

#EPSILON::before{content:"ε(x) = ";}
#TAU, #EPSILON{
  margin:0rem;
  height:0px;
  box-sizing: border-box;  
  color:#FFF;
  font-family:cmr14;
  font-style:normal;
  font-size:125%;
  background:inherit;
  text-align:center;
  border-color:#DDD;  
}
#TAU{
  margin-right:1rem;
}
#EPSILON{
  margin-left:1rem;
}


/* BULLE D'AIDE */

#INFOBULLE::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -4px;
  border-width: 4px;
  border-style: solid;
  border-color: #DDD transparent transparent transparent;
}


#INFOBULLE {
  position: absolute;
  display: none;
  background-color: rgba(5, 5, 5, 0.5); /* fond semi-transparent */
  opacity:0.1;  
  color:#DDD;
  padding: 0px 8px;
  border: 1px dotted #DDD; 
  border-radius: 6px;
  border-bottom-left-radius:0px;
  font-size: 12px;
  font-family:calibri;
  font-style:italic;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  box-shadow: 4px 3px 3px rgba(0,0,0,0.75);
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
  text-transform:lowercase;
}

#INFOBULLE.visible {
  display: block;
  opacity: 1;
}

#SELECTFILEBUTTON{
    background:#411;
    border-radius:4px;
    color:white;
    padding:4px;
    padding-left:8px;
    padding-right:8px;    
    font-family:calibri;
}


/* gestion de graphviz */


#DIAGRAM.hidden {
  display: none;
}

#DIAGRAM {
  box-sizing: border-box;      
    position:absolute;
    bottom:8px;
    right:8px;
    display: flex;
    justify-content: center;   /* Centre horizontalement */
    align-items: center;       /* Centre verticalement */
    height: 300px;             /* ou toute autre hauteur fixe ou relative */
    width: 542px;              /* ou 100%, selon ton besoin */
    background: var(--diagram-bgcolor);
    border: 1px dashed var(--diagram-border-color);
    border-radius: 8px;
    padding: 0.5em;
    box-shadow: 0 2px 6px rgba(0.3, 0.3, 0.3, 0.2);
    overflow: auto;
}

#DIAGRAM svg {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  margin: auto;
  transform-origin: center center;
}


.graphviz-canvas {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

.graphviz-canvas svg {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  transform-origin: center center;
}


a.back2simulator::before {
    content:"⇱ Simulateur ⇲";
}
a.back2simulator{
    color:white;
    border:1px dashed red;
    padding:8px;
    padding-top:2px;
    padding-bottom:2px;
    border-radius:4px;
    background:#600;
    font-family:calibri;
    font-size:smaller;
    display:block;
    margin-left:auto;
    margin-right:5em;
    width:7em;
    text-align:center;"
}