html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/************/
/** HEADER **/
/************/

header {
  background-color: #ff7b00;
  padding: 10px 20px;
}

.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.rubato-logo {
  max-height: 40px; /* Ajuste la taille du logo */
  height: auto;
}

.cta-button {
  background-color: #FF7B00;
  border: none;
  padding: 10px 20px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  background-color: white;
  color: #FF7B00;
  padding: 8px 16px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.cta-button:hover {
    background-color: #FF7B00;
    color: white;
}

               /**********/
/***************** BODY ****************/
               /**********/

.wood-strip {
    width: 100%;            /* La bande prend toute la largeur de son conteneur */
    height: 5px;            /* La hauteur de la bande (ajuste selon ton besoin) */
    background-color: #24a37c; /* Couleur marron */
}

.row1, .row2 {
	background-color: #146860;
}

.row1 {
    padding-top: 5px; /* Ajuste la valeur selon tes besoins */
}

.container {
	padding: 5px;
}

/************/
/** SPACER **/
/************/

.footer-spacer {
    background-color: #f1efe6;
    height: 300px; /* Adjust as needed to leave space for the footer */
}

/**********/
/* FOOTER */
/**********/

footer {
    background-color: #FF7B00;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%; /* S'assurer que le footer occupe toute la largeur */
    display: flex; /* Activer Flexbox */
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    height: 53px; /* Donner une hauteur suffisante */
	padding-bottom : 15px;
}

/*
button:hover #rubato-logo {
    transform: rotate(360deg);
}*/

#rubato-logo {
    width: 80px;
    height: auto;
    /*transition: transform 0.5s ease-in-out;*/
    animation: rotate 12s linear infinite;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

@keyframes rotate {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}