/* ═══════════════ BOURSES D'ÉTAT — RENVOI VERS L'ANBG ═══════════════
   Partagé par admissions.html et l'accueil React (importé dans
   web/src/index.css, couche « vanille ») : une seule définition pour
   les deux mondes.

   Bloc clair au milieu d'une page sombre : le contraste de fond dit
   « ceci vient d'ailleurs » avant même qu'on lise. C'est aussi ce qui
   rend le logo de l'Agence lisible — ses lettres sont bleu marine.
   Les couleurs sont posées en dur, sans variables de thème : le bloc
   doit se présenter à l'identique en thème sombre comme en clair. */
.brs { padding-block: clamp(48px, 8vh, 84px); }
.brs__wrap { max-width: 880px; margin: 0 auto; padding-inline: 24px; }

.brs__carte {
  background: linear-gradient(160deg, #E7F3E9 0%, #DCEEE1 100%);
  border: 1px solid rgba(27,107,53,.22);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 40px);
  color: #10201a;
}

.brs__tete {
  display: flex; align-items: center; gap: clamp(20px, 4vw, 38px);
  flex-wrap: wrap;
}
.brs__logo {
  flex: 0 0 auto; width: clamp(150px, 20vw, 210px); height: auto;
}
.brs__intro { flex: 1 1 320px; min-width: 0; }

.brs__eyebrow {
  font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: #1B6B35; margin-bottom: 8px;
}
.brs__titre {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.35rem, 3.2vw, 1.9rem); line-height: 1.15;
  color: #0B120E; margin-bottom: 12px;
}
.brs__desc {
  font-size: clamp(.94rem, 1.7vw, 1rem); line-height: 1.65;
  color: #2A3B32;
}
.brs__desc strong { color: #10201a; font-weight: 700; }

/* Les trois gestes, numérotés : ici l'ordre porte une information —
   sans la préinscription, la demande de bourse n'aboutit pas. */
.brs__etapes {
  list-style: none; margin: clamp(24px, 3.5vw, 34px) 0 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  counter-reset: brs;
}
.brs__etapes li {
  counter-increment: brs;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(27,107,53,.16);
  border-radius: 13px; padding: 15px 16px 16px;
}
.brs__etapes li::before {
  content: counter(brs);
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-bottom: 9px;
  border-radius: 50%; background: #1B6B35; color: #fff;
  font-family: var(--display); font-size: .82rem; font-weight: 700;
}
.brs__etapes strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: .95rem; color: #0B120E; margin-bottom: 5px;
}
.brs__etapes span {
  font-size: .87rem; line-height: 1.55; color: #33463C;
}

/* Le geste de l'étape 1 est actionnable directement : un petit bouton
   vers le formulaire de candidature, sans quitter la carte. */
.brs__etape-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 11px; padding: 8px 15px; border-radius: 99px;
  font-family: var(--display); font-weight: 700; font-size: .8rem;
  text-decoration: none; background: #1B6B35; color: #fff;
  transition: background .18s ease;
}
.brs__etape-btn:hover { background: #14522A; }
.brs__etape-btn:focus-visible { outline: 3px solid #0B120E; outline-offset: 2px; }

.brs__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(22px, 3vw, 30px);
}
.brs__btn {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 22px; border-radius: 99px;
  font-family: var(--display); font-weight: 700; font-size: .92rem;
  text-decoration: none; white-space: nowrap;
  border: 1.5px solid #1B6B35; color: #1B6B35; background: transparent;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.brs__btn:hover { background: rgba(27,107,53,.1); transform: translateY(-1px); }
.brs__btn--primary { background: #1B6B35; color: #fff; }
.brs__btn--primary:hover { background: #14522A; color: #fff; }
.brs__btn:focus-visible { outline: 3px solid #0B120E; outline-offset: 2px; }
.brs__ext { font-size: 1rem; line-height: 1; }

.brs__note {
  margin-top: 18px; font-size: .8rem; line-height: 1.6; color: #4A5B52;
}

@media (max-width: 640px) {
  .brs__tete { justify-content: center; text-align: center; }
  .brs__logo { width: min(190px, 55vw); }
  .brs__btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .brs__btn { transition: none; }
  .brs__btn:hover { transform: none; }
}