.bs-manifeste { font-family: var(--ha-sans); padding: clamp(72px, 9vw, 136px) 0 clamp(8px, 1.5vw, 24px); }
.bs-manifeste-int { width: min(1240px, 100% - 2 * var(--ha-gouttiere)); margin-inline: auto; text-align: center; }
.bs-postit {
  display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: clamp(26px, 3.4vw, 44px);
  background: var(--ha-jaune); border-radius: 3px; transform: rotate(-7deg);
  box-shadow: 0 1px 1px rgba(24, 25, 27, .12), 0 10px 18px -6px rgba(24, 25, 27, .28);
}
.bs-postit img { display: block; width: 26px; height: auto; }
.bs-manifeste-texte {
  margin: 0; color: var(--ha-noir);
  font-weight: 900; font-size: clamp(36px, 5.3vw, 82px); line-height: 1.1; letter-spacing: -.038em;
}
/* une ligne : une boîte rognée à son texte, où le bloc jaune passe */
.bs-ligne { position: relative; display: block; width: max-content; max-width: 100%; margin-inline: auto; overflow: hidden; padding: .02em .08em; margin-block: -.02em; }
.bs-ligne-texte { display: block; }
.bs-balai { position: absolute; inset: 0; background: var(--ha-jaune); transform: translateX(-102%); pointer-events: none; }

/* le script a découpé les lignes : le texte attend, le bloc jaune le découvre */
.bs-js .bs-ligne-texte { opacity: 0; }
.bs-js .bs-postit { opacity: 0; }
/* ha-page.css coupe toute animation d'un « !important » : les animations de ce bloc le portent aussi, et ne valent que
   hors mouvement réduit */
@media (prefers-reduced-motion: no-preference) {
  .bs-js.bs-joue .bs-postit { opacity: 1; animation: bs-postit 700ms var(--ha-courbe) both !important; }
  .bs-js.bs-joue .bs-balai { animation: bs-balai 1000ms linear both !important; animation-delay: calc(var(--i, 0) * 340ms + 160ms) !important; }
  .bs-js.bs-joue .bs-ligne-texte { animation: bs-texte 1000ms linear both !important; animation-delay: calc(var(--i, 0) * 340ms + 160ms) !important; }
}
/* revenu au repos (après un redécoupage), ou à plat */
.bs-js.bs-fini .bs-postit, .bs-js.bs-fini .bs-ligne-texte { opacity: 1; }
.bs-js.bs-fini .bs-balai { transform: translateX(102%); }
.bs-js.bs-fini.bs-joue .bs-postit, .bs-js.bs-fini.bs-joue .bs-ligne-texte, .bs-js.bs-fini.bs-joue .bs-balai { animation: none !important; }

@keyframes bs-balai {
  0% { transform: translateX(-102%); animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
  50% { transform: translateX(0); animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
  100% { transform: translateX(102%); }
}
@keyframes bs-texte { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes bs-postit { 0% { transform: translateY(14px) rotate(-16deg) scale(.7); opacity: 0; } 100% { transform: rotate(-7deg); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .bs-ligne-texte, .bs-postit { opacity: 1 !important; }
  .bs-balai { display: none; }
}

.bs-chiffres { font-family: var(--ha-sans); padding: clamp(40px, 6vw, 88px) 0 0; }
.bs-chiffres-int { width: min(1280px, 100% - 32px); margin-inline: auto; }
.bs-chiffres-kicker { justify-content: center; }
.bs-chiffres-titre { margin: 18px auto clamp(32px, 4vw, 56px); text-align: center; }
.bs-cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bs-carte {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  /* les proportions de la slide ; la hauteur ne descend pas sous ce que le texte demande (la carte rogne ce qui déborde) ;
     width: 100% : dans une grille, un élément qui porte un rapport ne s'étire plus dans sa colonne, sa largeur se
     déduirait de sa hauteur minimale et la rangée déborderait (494 px par carte à 768 px de large) */
  width: 100%; aspect-ratio: 342 / 249; min-height: 360px; padding: clamp(28px, 3.7vw, 56px);
  border-radius: clamp(24px, 2.3vw, 32px); background: var(--ha-noir); color: var(--ha-blanc);
}
.bs-chiffre { margin: 0; position: relative; z-index: 2; font-weight: 400; font-size: clamp(64px, 8vw, 124px); line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
/* « ans » : la moitié du chiffre, sur sa ligne de base */
.bs-unite { font-size: .5em; letter-spacing: -.01em; }
.bs-legende { margin: clamp(18px, 1.8vw, 26px) 0 0; position: relative; z-index: 2; max-width: 18em; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; text-wrap: pretty; }
.bs-decor { position: absolute; z-index: 1; pointer-events: none; user-select: none; }
/* la carte noire : les courbes couvrent la carte, tenues en haut à droite ; le chiffre et sa phrase en bas */
.bs-carte-noire { justify-content: flex-end; background: var(--ha-noir); box-shadow: none; }
.bs-courbes { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 0; }
/* la carte photo : la réunion floue, le chiffre en haut, les pixels jaunes en bas à droite */
.bs-carte-photo { background: #5b5a59; box-shadow: none; }
.bs-fond { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.bs-carte-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(24, 25, 27, .34), rgba(24, 25, 27, .12) 70%); }
.bs-pixels { right: -2.75%; bottom: 0; width: 69%; height: auto; }

/* l'arrivée : les cartes montent d'un cran et se fondent, l'une après l'autre */
.bs-anim .bs-carte { opacity: 0; transform: translateY(26px); }
@media (prefers-reduced-motion: no-preference) {
  .bs-anim.bs-vu .bs-carte { opacity: 1; transform: none; transition: opacity 700ms var(--ha-courbe), transform 800ms var(--ha-courbe) !important; transition-delay: calc(var(--i, 0) * 110ms) !important; }
}
@media (prefers-reduced-motion: reduce) { .bs-anim .bs-carte { opacity: 1 !important; transform: none !important; } }

@media (max-width: 640px) {
  .bs-cartes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bs-carte { aspect-ratio: auto; min-height: 380px; }
  .bs-postit { width: 50px; height: 50px; }
}

.td-proudly-titre { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; width: 124px; font-size: 12px; line-height: 1; white-space: nowrap; }
.td-proudly-titre .bs-proudly-logo { display: block; width: 124px; height: auto; }
/* « since 2026 » : en capitales espacées, nettement plus petit que les lettres du logo, tenu sous lui (aligné à sa droite) */
.td-proudly-titre .bs-fin-titre { position: relative; align-self: flex-end; white-space: nowrap; font-family: var(--ha-sans); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ha-texte-2); }
/* « (proudly) » : juste à gauche de « since », décalé vers le haut et penché, noir sur surligneur jaune */
.td-proudly-titre .bs-proudly {
  position: absolute; right: calc(100% + 5px); top: -.55em; padding: 2px 5px 3px; border-radius: 3px;
  background: var(--ha-jaune); color: var(--ha-noir); letter-spacing: 0; text-transform: none;
  font-weight: 700; font-size: 10px; line-height: 1.1; transform: rotate(-5deg); transform-origin: 100% 100%;
}