body {
  font-family: 'Roboto', sans-serif;
  padding-top: 56px; /* espace à cause du menu fixe */
}
/*
.hero {
  position: relative;
  background: url('../Images/Banner_site_RSO.jpg') center/cover no-repeat;
  padding: 50px 20px;
  color: white;
  text-align: center;
}

.hero {
  position: relative;
  background: url('../Images/Banner_site_RSO.jpg') no-repeat;
  background-size: cover;
  background-position: center top;
  min-height: 40vh;
  padding: 50px 20px;
  color: white;
  text-align: center;
}
*/
.hero {
  position: relative;
  background: url('../Images/Banner_site_RSO.jpg') no-repeat;
  background-size: cover;
  background-position: center top;
  min-height: 35vh;
  padding: 50px 20px;
  color: white;
  text-align: center;
}

@media (min-width: 1200px) {
  .hero {
    min-height: 55vh; /* plus d’air sur grand écran */
    background-position: center 1%;
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2); /* fond semi-transparent derrière le texte */
  backdrop-filter: blur(2px); /* léger effet de flou derrière */
  border-radius: 10px;
  max-width: 900px;
}
.hero a.btn {
  position: relative;
  z-index: 1; /* reste visible au-dessus de l’effet de fond */
}
.event-card:hover {
  transform: translateY(-5px);
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
footer {
  background-color: #343a40;
  color: white;
}
.ratio-3x4 {
aspect-ratio: 3 / 4; /* format affiche */
}
.card-img-top {
object-fit: contain;
max-height: 350px;  /* tu peux ajuster (300, 350, 400…) */
width: 100%;
background: #fff;
padding: 10px;
}
section {
  scroll-margin-top: 80px; /* hauteur de ta navbar */
}

.partner-carousel {
  position: relative;
  width: 100%;
  height: 80px;
  overflow: hidden;
}

.partner-track {
  display: flex;
  width: max-content;
  animation: scroll-left 20s linear infinite;
  align-items: center;
}

.partner-track img {
  height: 60px;
  width: auto;
  flex-shrink: 0;
  transition: transform 0.3s;
  margin: 0 1.5rem;
}

.partner-track img:hover {
  transform: scale(1.1);
}

.bi-facebook {
  color: #1877F2;
}

.bi-instagram {
  color: #E4405F;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .partner-track img {
    height: 40px;
    margin: 0 0.5rem;
  }
  .hero {
    min-height: 15vh; /* plus compact */
    padding: 2rem 1rem;
  }
  .hero-content {
    padding: 1rem 1.5rem;
  }
  .hero h1 {
    font-size: 1.6rem;
  }
  .hero p {
    font-size: 1rem;
  }
}


.newsletter-book {
  position: relative;
  width: min(280px, 90vw);     /* largeur max contrôlée */
  max-height: 80vh;           /* jamais plus haut que l’écran */
  margin: auto;
  perspective: 1200px;        /* clé pour l’effet 3D */
}

.newsletter-cover {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;

  border-radius: 6px;
  background: #fff;

  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  transition:
    transform .5s ease,
    box-shadow .5s ease;
  transform-origin: left center;
}

/* Tranche du livre */
.newsletter-book::after {
  content: "";
  position: absolute;
  top: 6px;
  right: -14px;
  width: 14px;
  height: calc(100% - 12px);
  background: linear-gradient(
    to right,
    #eee,
    #ccc,
    #aaa
  );
  border-radius: 0 6px 6px 0;
}

/* Effet livre AU SURVOL */
.newsletter-book:hover .newsletter-cover {
  transform: rotateY(-18deg) translateY(-6px);
  box-shadow: 0 20px 45px rgba(0,0,0,.35);
}


#flipbook {
  margin: 0 auto;
}

#flipbook img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.section-title {
  font-weight: 700;
  letter-spacing: .5px;
}


.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #f0ad4e;
  margin-top: 8px;
}

.justifier {
  text-align: justify;
  text-justify: inter-word;
}
