/* =====================================================================
   Widget « Bouton » — CTA charte Braillard (flèche signature).
   Styles : plein (fond noir) / contour / lien fléché.
   ===================================================================== */
.br-btn-wrap{ font-family: var(--br-font-body); }

.br-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  text-decoration: none; cursor: pointer; box-sizing: border-box;
  font-family: var(--br-font-body); font-weight: 500;
  font-size: clamp(16px, 1.3vw, 20px); letter-spacing: -0.2px; line-height: 1.2;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.br-btn__label{ white-space: nowrap; }
.br-btn__arrow{ display: inline-flex; color: currentColor; transition: transform .3s ease; }

/* --- Plein (fond noir, texte blanc) — s'inverse au survol --- */
.br-btn--plein{
  padding: clamp(15px, 1.5vw, 20px) clamp(22px, 2.2vw, 34px);
  background: var(--br-black, #000); color: var(--br-white, #fff);
  border: 1px solid var(--br-black, #000); border-radius: 0;
}
.br-btn--plein:hover{ background: transparent; color: var(--br-black, #000); }

/* --- Contour (bordure noire) — se remplit au survol --- */
.br-btn--contour{
  padding: clamp(15px, 1.5vw, 20px) clamp(22px, 2.2vw, 34px);
  background: transparent; color: var(--br-black, #000);
  border: 1px solid var(--br-black, #000); border-radius: 0;
}
.br-btn--contour:hover{ background: var(--br-black, #000); color: var(--br-white, #fff); }

/* --- Lien fléché (sans fond, longue flèche façon CTA band/cover) --- */
.br-btn--lien{
  padding: 0; gap: 16px; background: none; border: 0; color: var(--br-black, #000);
  font-weight: 400; font-size: clamp(15px, 1.05vw, 17px); letter-spacing: normal;
}

/* Flèche : compacte dans les boîtes, longue en style lien */
.br-btn--plein .br-btn__arrow svg,
.br-btn--contour .br-btn__arrow svg{ width: 22px; height: 22px; display: block; }
.br-btn--lien .br-btn__arrow svg{ width: clamp(84px, 10vw, 130px); height: auto; display: block; }

/* Micro-animation de la flèche au survol (glisse dans son sens) */
.br-btn--arrow-right:hover .br-btn__arrow{ transform: translateX(5px); }
.br-btn--arrow-left:hover .br-btn__arrow{ transform: translateX(-5px); }

/* Pleine largeur (boîtes) */
.br-btn--full{ display: flex; width: 100%; }