/* =========================================================
    Buttons
    ========================================================= */

a:where(:not(.wp-element-button)):hover {
  text-decoration: none;
}

/* Flèche blanche par défaut */

.wp-block-button .wp-element-button,
.wp-block-button__link {
  transition: background-color 0.15s ease-out, color 0.15s ease-out,
    border-color 0.15s ease-out, transform 0.15s ease-out;
  will-change: background-color, color, border-color, transform;
}

/* .wp-block-button .wp-element-button:hover,
.wp-block-button .wp-element-button:focus {
  transform: translateY(-1px);
}

.wp-block-button .wp-element-button:active {
  transform: translateY(0);
} */

.button-devis a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.button-devis a::before {
  content: "";
  width: 12px;
  height: 22px;
  background-image: url(/wp-content/themes/le-cosinus-2025/assets/pictos/doc-blue.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  vertical-align: middle;
  transition: 0.2s ease-in;
}

/* .button-devis a::after {
        background-image: url(/wp-content/themes/le-cosinus-2025/assets/pictos/chevron-right-blue.svg) !important;
        } */

.wc-block-cart__submit-button {
  transition: 0.2s ease-in !important;
}

.button-devis a:hover,
.btn-accent a:hover,
.wc-block-cart__submit-button:hover {
  background-color: var(--wp--preset--color--white) !important;
  color: var(--wp--preset--color--dark-blue);
}

.btn-flex a {
  display: inline-block !important;
}

.btn-solid-primary,
.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
  background-color: var(--wp--preset--color--dark-blue); /* bleu foncé */
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--14);
  font-weight: 700;
  line-height: inherit;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--wp--preset--color--dark-blue);
  border-radius: 2px;
  cursor: pointer;
  transition: 0.2s ease-in;
}

.btn-solid-primary:hover,
.btn-solid-primary:focus-visible {
  background-color: var(--wp-preset--color-white);
  color: var(--wp-preset--color-dark-blue);
}

.btn-solid-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-solid-primary:focus-visible {
  outline: 2px solid #f6b44b;
  outline-offset: 2px;
}

.btn-solid-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
  background-color: var(--wp--preset--color--yellow); /* bleu foncé */
  color: var(--wp--preset--color--dark-blue);
  font-size: var(--wp--preset--font-size--14);
  font-weight: 700;
  line-height: inherit;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--wp--preset--color--dark-blue);
  border-radius: 2px;
  cursor: pointer;
  transition: 0.2s ease-in;
}

.btn-solid-accent:hover,
.btn-solid-accent:focus-visible {
  background-color: var(--wp-preset--color-white);
  color: var(--wp-preset--color-dark-blue);
}

.btn-solid-accent:focus-visible {
  outline: 2px solid #f6b44b;
  outline-offset: 2px;
}

/* Icône à gauche (doc.svg) */
.btn-surmesure a,
.btn-custom a {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-surmesure a:before {
  content: "";
  display: inline-block;
  background-image: url("/wp-content/themes/le-cosinus-2025/assets/pictos/doc.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}

.btn-surmesure a:hover {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--dark-blue);
}

.btn-custom a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
}

.btn-custom a::before {
  content: "";
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
}

.btn-envelope-orange a::before {
  background-image: url("/wp-content/themes/le-cosinus-2025/assets/pictos/envelope_orange.svg");
  width: 18px;
  height: 15px;
}

.btn-cart a::before {
  background-image: url("/wp-content/themes/le-cosinus-2025/assets/pictos/cart.svg");
  width: 18px;
  height: 18px;
}

.btn-account a::before {
  background-image: url("/wp-content/themes/le-cosinus-2025/assets/pictos/account.svg");
  width: 18px;
  height: 18px;
}

.single_add_to_cart_button {
  border: solid 1px var(--wp--preset--color--dark-blue);
}

.btn-contact {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--wp--preset--color--white);
  background-color: var(--wp--preset--color--dark-blue);
  border-radius: 2px;
  transition: 0.2s ease-in;
}

.btn-contact:hover .phone-number {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--dark-blue);
}

.btn-contact .phone-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  background-color: var(--wp--preset--color--dark-blue);
  border-right: 1px solid var(--wp--preset--color--white);
}

.btn-contact .phone-icon-wrapper img {
  width: 18px;
  height: 18px;
}

.btn-contact .phone-number {
  display: flex;
  align-items: center;
  background-color: var(--wp--preset--color--dark-blue);
  color: var(--wp--preset--color--white);
  padding: 8px;
  text-decoration: none;
}

/* Buttons chevron  */
.is-style-btn-link-chevron .wp-block-button__link.wp-element-button::after,
.is-style-btn-link-chevron::after {
  transition: transform 0.3s ease;
}
.is-style-btn-link-chevron
  .wp-block-button__link.wp-element-button:hover::after,
.is-style-btn-link-chevron:hover::after {
  transform: translateX(6px);
}

/* CSS Variants de Styles BTN */
/* Chevron  */
.wp-element-button.is-style-btn-link-chevron {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--wp--preset--color--dark-blue);
  font-weight: 700;
  transition: 0.1s ease-in;
}

.wp-element-button.is-style-btn-link-chevron::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 22px;
  background-image: url(/wp-content/themes/le-cosinus-2025/assets/pictos/chevron-right.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  vertical-align: middle;
}

.wp-element-button.is-style-btn-link-chevron:hover {
  text-decoration: underline;
  /* transform: translateY(-1px); */
}

/* Mail / Devis  */
.wp-block-button.is-style-btn-doc .wp-element-button,
.wp-block-button.is-style-btn-mail .wp-element-button,
.wp-block-button.is-style-btn-user .wp-element-button,
.wp-block-button.is-style-btn-cart .wp-element-button {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  height: 46px;
  line-height: 1;
  padding: 0 16px;
  border: 1px solid var(--wp--preset--color--dark-blue);
}

.wp-block-button.is-style-btn-doc .wp-element-button::before {
  background-image: url(/wp-content/themes/le-cosinus-2025/assets/pictos/doc.svg);
}
.wp-block-button.is-style-btn-doc .wp-element-button::before,
.wp-block-button.is-style-btn-mail .wp-element-button::before,
.wp-block-button.is-style-btn-user .wp-element-button::before,
.wp-block-button.is-style-btn-cart .wp-element-button::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.wp-block-button.is-style-btn-solid-chevron .wp-element-button::after {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'><path fill='white' d='M1.26562 15.8555C0.949219 15.8555 0.667969 15.75 0.457031 15.5391C0 15.1172 0 14.3789 0.457031 13.957L6.39844 7.98047L0.457031 2.03906C0 1.61719 0 0.878906 0.457031 0.457031C0.878906 0 1.61719 0 2.03906 0.457031L8.78906 7.20703C9.24609 7.62891 9.24609 8.36719 8.78906 8.78906L2.03906 15.5391C1.82812 15.75 1.54688 15.8555 1.26562 15.8555Z'/></svg>");
  display: flex;
  align-items: center;
  margin-top: 2px;
}

.wp-block-button.is-style-btn-doc .wp-element-button:hover {
  background: #fff;
  color: var(--wp--preset--color--dark-blue);
}

.wp-block-button.is-style-btn-solid-chevron .wp-element-button:hover::after {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'><path fill='%23EBA04A' d='M1.26562 15.8555C0.949219 15.8555 0.667969 15.75 0.457031 15.5391C0 15.1172 0 14.3789 0.457031 13.957L6.39844 7.98047L0.457031 2.03906C0 1.61719 0 0.878906 0.457031 0.457031C0.878906 0 1.61719 0 2.03906 0.457031L8.78906 7.20703C9.24609 7.62891 9.24609 8.36719 8.78906 8.78906L2.03906 15.5391C1.82812 15.75 1.54688 15.8555 1.26562 15.8555Z'/></svg>");
}

/* BTN READ MORE */
.wp-block-read-more.is-style-btn-link-chevron {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: var(--wp--preset--color--dark-blue);
  text-decoration: none;
  gap: 10px;
}

.wp-block-read-more.is-style-btn-link-chevron::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 22px;
  background-image: url("/wp-content/themes/le-cosinus-2025/assets/pictos/chevron-right.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.wp-block-read-more.is-style-btn-link-chevron:hover,
.wp-block-read-more.is-style-btn-link-chevron:focus {
  text-decoration: underline;
}