body {
  background-color: var(--bg-color);
  min-height: 100vh; /* s’adapte à la taille écran */
  font-family: var(--font-family), monospace;



  background-image:
    linear-gradient(var(--line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-color) 1px, transparent 1px);
  background-size: 35px 35px;
  animation: drift 25s linear infinite;
  
  @keyframes drift {
    from { background-position: 0 0; }
    to   { background-position: 100px 100px; }
  }

}


.container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
  margin-top: 50px;
}

.title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

h1 {
  color: var(--text-color);
  font-size: 60px;
}

h2{
  color: var(--text-color);
}

.actu{
  box-shadow: var(--box-shadow);
  border: var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
  max-width: 70%; /* limite largeur pour meilleure lisibilité */
  width: 70%;
  padding: 10px;
  gap: 2rem;
  color:var(--text-color);
}

.actu h3{
  font-size: 34px;
  color: var(--text-color);
  text-align: left;
}

.actu ul{
  font-size: 18px;
  margin-left: 20px;
}


.main-text{
  box-shadow: var(--box-shadow);
  border: var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
  max-width: 70%; /* limite largeur pour meilleure lisibilité */
  padding: 10px;
  gap: 2rem;
  color: var(--text-color) ;
}

.main-text h3{
  font-size: 34px;
  color: var(--text-color);
  text-align: left;
}

.main-text p{
  font-size: 20px;
  line-height: 1.40;
  justify-content: center;
  text-align: justify;
}