/* BOUTONS */
button,
.button,
.btn,
input[type="submit"],
button[type="submit"],
.btn-header a,
.wp-block-button__link {
  padding: 12px 30px 10px 30px !important;
  border: none;
  text-decoration: none;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 50px;
  font-weight: 700 !important;
}

button:not(.menu-toggle),
html input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button .wp-block-button__link {
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 30px;
}

.section-boutons {
  column-gap: 20px;
  align-items: center;
  display: flex;
  flex-direction: row;
}

.bg-principale .btn-light {
  background-color: var(--accent) !important;
}

.btn-light:hover {
  background-color: var(--blanc) !important;
  color: var(--noir) !important;
}

.btn-dark:hover {
  background-color: var(--noir) !important;
  color: var(--blanc) !important;
}

/* BOUTONS STYLE LIEN - BLOCS, COLONNES */
.colonne .section-boutons .button,
.bloc .section-boutons .button {
  padding: 0px !important;
  background-color: transparent;
}

.colonne .section-boutons .button.coul-noir,
.bloc .section-boutons .button.coul-noir {
  color: var(--noir);
}

.colonne .section-boutons .button.coul-noir:hover,
.bloc .section-boutons .button.coul-noir:hover {
  color: var(--accent);
}

.colonne.bg-accent .section-boutons .button.coul-noir:hover,
.bloc.bg-accent .section-boutons .button.coul-noir:hover {
  color: var(--principale);
}

.colonne .section-boutons .button.coul-blanc,
.bloc .section-boutons .button.coul-blanc {
  color: var(--blanc);
}

.colonne .section-boutons .button.coul-blanc:hover,
.bloc .section-boutons .button.coul-blanc:hover {
  color: var(--accent);
}

.colonne.bg-accent .section-boutons .button.coul-blanc:hover,
.bloc.bg-accent .section-boutons .button.coul-blanc:hover {
  color: var(--principale);
}

/* --------------- RESPONSIVE --------------- */

@media screen and (max-width: 1270px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 960px) {}

@media screen and (max-width: 820px) {}

@media screen and (max-width: 768px) {
  .section-boutons {
    align-items: flex-start;
    flex-direction: column;
    row-gap: 20px;
  }
}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 450px) {}