/* =====================================================================
   Braillard — Bandeau pleine largeur (ex. Transition Workshop)
   Alignements maquette (1728px) : titre @ left 331 ; texte + lien @ left 608.
   ===================================================================== */
.br-band{
  background: var(--band-bg, #000);
  color: var(--band-fg, #fff);
  padding: clamp(64px, 8vw, 130px) 0;
}
.br-band__inner{ position: relative; }

.br-band__title{
  /* Figma : base Helvetica Neue 60px, seul « transition workshop » en serif italique */
  font-family: var(--br-font-body);
  font-weight: 400; font-style: normal;
  font-size: var(--band-title-size, clamp(32px, 3.47vw, 60px)); line-height: 1.15; letter-spacing: normal;
  max-width: min(738px, 42.7vw);
  margin: 0 0 0 min(331px, 19.16vw);
}
.br-band__title em{ font-family: var(--br-font-display); font-style: italic; font-weight: 300; font-size: var(--band-title-em-size, 1em); } /* PP Eiko italic -> Fraunces italic */
.br-band__title p{ margin: 0; }

.br-band__text{
  font-family: var(--br-font-body); font-size: var(--band-text-size, clamp(16px, 1.16vw, 20px)); /* Figma : 20px */
  line-height: 1.6; max-width: min(927px, 53.6vw);
  margin: clamp(40px, 5vw, 90px) 0 0 min(608px, 35.18vw);
}
.br-band__text p{ margin: 0; }

/* :visited EXPLICITE : le lien placeholder href="#" est toujours « visité »
   et une règle a:visited (kit/reset) passait devant → violet (retour client
   14.07 ; invisible au computed style, Chrome masque les couleurs :visited).
   --band-link = « Couleur du lien » du widget (repli : couleur du texte). */
.br-band__link,
.br-band__link:visited,
.br-band__link:hover{
  display: inline-flex; align-items: center; gap: 16px;
  margin: clamp(28px, 3vw, 48px) 0 0 min(608px, 35.18vw);
  color: var(--band-link, var(--band-fg, #fff)); text-decoration: none;
  font-family: var(--br-font-body); font-size: 16px;
}
.br-band__arrow{ color: var(--band-arrow, var(--band-link, var(--band-fg, #fff))); display: inline-flex; transition: transform .3s ease; }
.br-band__arrow svg{ width: clamp(90px, 12vw, 150px); height: auto; display: block; }
.br-band__link:hover .br-band__arrow{ transform: translateX(6px); }

@media (max-width: 900px){
  .br-band{ padding-left: 20px; padding-right: 20px; }
  .br-band__title{ max-width: 100%; margin-left: 0; }
  .br-band__text, .br-band__link{ max-width: 100%; margin-left: 0; }
}