:root {
    --fond: rgba(250, 250, 250, 1);
 
    --texte-vif: #000000;
    --texte-inverse: #000000;
    --texte: #2F4F4F;

    --gris: #a1a1a1;
    --gris-relief: #696969;    

    --bloc: #f3f3f3;
    --bordure: #cccccc;    

    --noir: #000000;
    --blanc: rgba(250, 250, 250, 1);
    --bleu: #318ab5;
    --bleu-clair: #e8f4fa;   
    --orange: #FD7E14;
    --rouge: #7b0000;     

    --surbrillance: #ff0000; 
    --ombre: rgba(0, 0, 0, 0.25);

    --panel: var(--rouge);

}

html.dark {
    --fond: #000000;

    --texte-vif: rgba(250, 250, 250, 1); 
    --texte-inverse: #FAFAFA;    
    --texte: #FAFAFA; 

    --gris: #444443;
    --gris-relief: #888;    

    --bloc: #242424;      
    --bordure: #444444;     

    --noir: #000000;
    --blanc: rgba(250, 250, 250, 1);
    --bleu: #5bb6e1;
    --bleu-clair: #e8f4fa;  
    --orange: #FD7E14;
    --rouge: #7b0000;  

    --surbrillance: #ff0000; 
    --ombre: #3c3c3c;

    --panel: var(--orange);

}

body {
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  font-size: 12px;
  font-weight: bold;
  background-color: var(--fond);
  color: var(--texte);
  margin: 0;
  transition: background-color 0.3s ease, color 0.3s ease;  
}
/* Conteneur central */
.center-div {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px; /* espace entre spinner et texte */
  text-align: center;
  font-size: 12px;
  font-variant: small-caps;
  transform: translateY(-10%); /* 👈 remonte de 100px */
}

/* Spinner */
.spinner {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow:
    -10px -10px 10px #6359f8,
     0px -10px 10px 0px #9c32e2,
     10px -10px 10px #f36896,
     10px 0 10px #ff0b0b,
     10px 10px 10px 0px #ff5500,
     0 10px 10px 0px #ff9500,
    -10px 10px 10px 0px #ffb700;

  display: flex;
  align-items: center;
  justify-content: center;

  animation: rot55 0.7s linear infinite;
}

/* Texte au centre du spinner */
.spinner-text {
  font-size: 10px;
  color: var(--texte-vif);
  animation: rot55 0.7s linear infinite reverse;
}

/* Texte sous le spinner */
.version {
  margin-top: 10px;
  font-size: 10px;
  color: var(--gris-relief);
}

.highlight {
    color: var(--texte-vif) !important;
    font-size: 12px;
    font-weight: bold;
}

/* Animation */
@keyframes rot55 {
  to {
    transform: rotate(360deg);
  }
}