/* === ACCUEIL / CAROUSEL === */

/* Le carousel doit rester sous la navbar */
.carousel,
.carousel-inner {
  position: relative;
  z-index: 1;
}

/* Chaque slide est l’ancre de position pour la caption */
.carousel-item {
  position: relative;       /* clé pour positionner la caption */
  height: 90vh;
}

/* Image plein cadre */
.carouselBackgroundImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Caption superposée à l’image */
.carousel-caption {
  position: absolute;       /* superposée à l’image */
  z-index: 20;              /* > image, < navbar */
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0 auto;
  width: 50em;
  text-align: left !important;

  display: flex;            /* perso + texte côte à côte */
  flex-direction: row;
  align-items: center;
}

/* Perso dans la caption */
.persoPos1 {
  height: 60vh;
  margin-right: 2em;
}

/* Texte dans la caption */
.carousel-caption h5 {
  font-family: "DINNextLTPro-MediumCond" !important;
  font-size: 3em;
  display: inline-block;
  padding: 0 0.2em;
  background-color: rgba(17, 17, 17, 0.6);
}
.carousel-caption p {
  font-family: "DINNextLTPro-Regular" !important;
  font-size: 1.5em;
  display: inline-block;
  padding: 0 0.2em;
  background-color: rgba(17, 17, 17, 0.6);
}

/* Flèches et points visibles au-dessus de l’image */
.carousel .carousel-control-prev,
.carousel .carousel-control-next,
.carousel-indicators {
  z-index: 25;
}

/* ===== Infos serveur ===== */
.serverInfo {
  height: 30vh;
  background: #000;
  color: #fff;
  text-align: center;
  font-family: "DIN 1451 Mittelschrift";
}
.serverInfoStatsContainer {
  position: relative;
  left: 0;
  top: -16px;
  z-index: 1;
  display: flex !important;
  flex-direction: row;
}
.serverInfoStats {
  z-index: 2;
  width: calc(55% - (30vh + 37px) + 1vh);
  height: calc(30vh + 37px);
  background: var(--dark-blue);
}
.serverInfoStatsClip {
  z-index: 2;
  width: calc(30vh + 37px);
  height: calc(30vh + 37px);
  background: var(--dark-blue);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}
.serverInfoJoin {
  position: absolute;
  right: 0;
  top: 16px;
  z-index: 1;
  background-image: url("../images/backgrounds/blue-background.jpg");
  box-shadow: inset 0 0 77px 1px #000;
  height: calc(100% - 32px);
  width: calc(45% + (30vh + 16px));
}
.serverInfoStatsTitle {
  font-size: 3vh;
  margin-top: 2vh;
  margin-bottom: 5vh;
}
.serverStatsColumn { padding-right: 2vh; }
.serverStatsIcon { font-size: 6vh; }
.serverStatsNumber { font-size: 3vh; }
.serverStatsDetail { margin-top: -2vh; font-size: 2vh; }
.morePaddingRight { padding-right: 10vh; }

/* ===== Actualités ===== */
.actualite {
  position: relative;
  margin: 4vh auto 0;
  font-family: "DIN Next LT W01 Bold";
  font-size: 48px;
  width: 80vw;
}
.actualite-articleContainer {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
}
.actualite-articleContainer img {
  border-radius: 10px;
  width: 50vh;
}
.actualite-articleContainer h5 {
  color: var(--main-blue);
  margin-bottom: -0.5vh;
  font-size: 2vh;
}
.actualite-articleContainer h1 { font-size: 4vh; }
.actualite-articleContainer p { font-size: 2vh; }

.actualiteArticle {
  display: flex !important;
  flex-direction: column;
  width: 50vh;
}

.articleText {
  font-family: "DINNextLTPro-Regular" !important;
  font-size: 2vh;
}

/* ===== News top ===== */
.newsTopImage {
  height: 25vh;
  width: 100%;
  background-image: url("../../../api.rosewood-rp.net/upload/blue-background.jpg");
  box-shadow: inset 0 0 77px 1px #000;
}
.newsTopTex {
  color: #fff;
  width: 80vw;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
  .persoPos1 { display: none; }

  .carousel-caption {
    width: auto;
    padding: 0 16px;
  }

  .carouselBackgroundImage {
    width: auto;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;
  }
}

@media (max-width: 1024px) {
  .serverInfoStatsClip { display: none; }
  .serverInfoStatsContainer { flex-direction: column; }
  .serverInfoStats { width: 100%; }
  .serverInfoJoin { position: static; width: 100%; }
  .morePaddingRight { padding-right: 5vh; }

  .actualite {
    margin-top: 35vh;
    font-size: 48px;
    width: 80vw;
  }
}