body {
  font-family: sans-serif;
  text-align: center;
   background-color: rgb(265, 65, 1);
  
}

.playground {
  width: 601px;
  height: 601px;
  
  margin: 20px auto;
  position: relative;
  overflow: hidden;

  /* couleur de fond orange */
  background-color: rgb(265, 65, 1); 
  
  /* contour noir autour du div */
  border: 1px solid black;

  /* grille noire */
  background-image:
    linear-gradient(to right, black 1px, transparent 0px),
    linear-gradient(to bottom, black 1px, transparent 0px);
  background-size: 30px 30px; /* taille des cases */
}



.shape:active {
  cursor: grabbing;
}

.palette {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.palette .shape {
  position: static;
}

.controls {
  margin: 10px;
}



#clearBtn {
  background-color: transparent;  /* de base transparent */
  color: black;                   /* texte noir */
  border: 2px solid black;        /* contour noir */
  padding: 10px 60px;
  border-radius:8px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.4s ease;
}

/* au survol */
#clearBtn:hover {
  background-color: black;  /* fond noir */
  color: white;             /* texte blanc */
  border: 2px solid black;  /* contour reste noir */
  transform: none;          /* pas de grossissement */
}




h1 {
  font-size: 40px;   
}

p {
  font-size: 20px;