.spacebar-hero .container { text-align: center; }
.spacebar-hero__inner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.spacebar-hero__inner h1 {
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(2rem, 8vw, 3.6rem);
  line-height: 1.05;
}
.bar-pictos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.bar-picto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  aspect-ratio: 3 / 4;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(30,20,70,.35), rgba(6,4,20,.55));
}
.bar-picto__icon {
  font-size: 5rem;
  color: #fff;
  line-height: 1;
}
.bar-picto__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: .5px;
  color: #fff;
}
.bar-cta { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.btn--outline {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.btn--outline:hover { background: rgba(255,255,255,.12); box-shadow: none; }
.offres-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.offre-card {
  padding: 2rem 1.6rem;
  border-radius: 26px;
  background: #0a0713;
  border: 1px solid rgba(255,255,255,.18);
  text-align: center;
}
.offre-card__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.offre-card__pic { font-size: 3rem; color: #fff; line-height: 1; }
.offre-card__head { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.offre-card__pct {
  font-family: var(--font-display);
  font-size: 2.8rem;
  line-height: .9;
  color: var(--c-red);
}
.offre-card__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 2rem;
  line-height: .95;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.offre-card:nth-child(2) .offre-card__pct { color: var(--c-primary); }
.offre-card__desc {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.1rem;
  line-height: 1.2;
  color: #fff;
}
.offre-card__sep {
  border: 0;
  height: 1px;
  background: rgba(255,255,255,.25);
  width: 70%;
  margin: 0 auto 1.2rem;
}
.offre-card__meta { margin: 0; color: var(--c-text-soft); font-size: 1.05rem; line-height: 1.3; }
@media (min-width: 961px) {
  .bar-pictos { max-width: 820px; margin-inline: auto; gap: 1.6rem; }
  .bar-picto__icon { font-size: 5.6rem; }
  .bar-picto__label { font-size: 2.2rem; }
  .bar-cta { flex-direction: row; justify-content: center; }
  .offres-grid { max-width: 820px; margin-inline: auto; gap: 1.6rem; }
}
@media (max-width: 960px) {
  .bar-pictos[data-carousel-ready="1"] {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    scrollbar-width: none;
  }
  .bar-pictos[data-carousel-ready="1"]::-webkit-scrollbar { display: none; }
  .bar-pictos[data-carousel-ready="1"] > * {
    flex: 0 0 40%;
    max-width: 40%;
    scroll-snap-align: center;
  }
}
/* data-actualites : carousel permanent quand grid--N < nombre d'articles.
   Cible .grid--3 / .grid--2 sur la piste pour adapter la largeur des
   cartes à la grille d'origine. */
.carousel__track.grid--3,
.carousel__track.grid--2 {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 1.6rem;
  padding-bottom: 1rem;
}
.carousel__track.grid--3::-webkit-scrollbar,
.carousel__track.grid--2::-webkit-scrollbar { display: none; }
.carousel__track.grid--3 > * {
  flex: 0 0 calc((100% - 3.2rem) / 3);
  max-width: calc((100% - 3.2rem) / 3);
  scroll-snap-align: start;
}
.carousel__track.grid--2 > * {
  flex: 0 0 calc((100% - 1.6rem) / 2);
  max-width: calc((100% - 1.6rem) / 2);
  scroll-snap-align: start;
}

.carousel__controls { display: flex; }
.carousel__arrow { display: flex; }

@media (max-width: 380px) {
	.offre-card{ padding: 2rem 1rem; }
	
}