@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i&display=swap');



/*Slider*/

.main-contenant{
padding-bottom: 5px;

}

.contenant{
  margin-bottom: 55px;
}


.dark-mode .main-contenant{
  background-color: #000000; /* Couleur blanche */
  /*color: #fff;*/
}

/*Version desktop (web)*/
@media (min-width: 1200px) {
    .cacher_en_version_web {
        display: none;
    }
}

/*Version mobil*/
@media (max-width: 1200px) {
  .cacher_en_version_mobile {
      display: none;
  }
}

.sdkw-container{
  background: #FFFFFF;
}


/* sportsbook_top_events */
.sportsbook_top_events{
  margin-bottom: 20px;
}

/*Images rectangulaire alignées*/
.gallery-container-perso {
  width: 100%;
  overflow-x: auto;
  margin: 0px 0 0px 0;
}

.gallery-perso {
  display: flex;
  flex-wrap: nowrap;
  margin-right: 5px;
}

.image-perso {
  flex: 0 0 auto;
  margin: 0px 5px 10px 2px;
  text-align: center;
  border: 2px solid #FD5704;
  border-radius: 10px;

  /* background: rgb(154,51,0);
  background: linear-gradient(0deg, rgba(154,51,0,1) 0%, rgba(252,86,4,1) 50%, rgba(154,51,0,1) 100%); */

  background-color: #FD5704; /* Couleur de fond */
  /* background: linear-gradient(#e08534, #9a3300); */

}

.image-perso img {
  width: 170px; /* Ajustez la largeur des images selon vos besoins */
  height: 110px;
  border-radius: 10px;
}

.title-perso {
  margin-top: 5px;
  color: #fff;
}




/* Carousel d'image Partner */
.carousel_content{
  max-width: 100%;
  max-height: 5rem;
  padding: 15px 5px 20px 5px;
  background: rgb(93,1,1);
  /* background: linear-gradient(0deg, rgba(252,86,4,1) 0%, rgba(154,51,0,1) 100%); */
  background: linear-gradient(#FD5704, #D36600);
  /* background-color: #FD5704; /* Couleur de fond */
}


.carousel{
  margin: 0 0px 0px 20px;

}


.carousel div{
  margin : 0px 0px;
}

.carousel img{
  width: auto;
  height: 50px;
}


/* Menu secondaire */
.navbar_perso {
    /* background-color: #333; */
    padding: 5px 0;
    text-align: center;
}

.navbar_perso ul {
    list-style-type: none;
    padding: 0;
}

.navbar_perso li {
    display: inline;
    margin: 0 20px;
    font-size: 18px;
    color: white;
}

.navbar_perso .fas{
  color: #000000;
}




.dark-mode .navbar_perso .fas{
  color: #FFFFFF;
}


.elastic {
    transition: transform 0.5s ease;
}

/* Styles pour les icônes (Font Awesome) */
.navbar_perso .fa {
    font-size: 24px;
    margin-right: 5px;
}

/* top-even */
.top-even{
  padding: 10px 0px;
  background: rgb(93,1,1);
  /* background: linear-gradient(0deg, rgba(252,86,4,1) 0%, rgba(154,51,0,1) 100%); */
  background: linear-gradient(#FD5704, #D36600);
  /* background-color: #fc5604; /* Couleur de fond */

  margin-bottom: 10px;
}

.top-even .texte{
  color: #fff;
  font-weight: bold;
  font-size: 15px;

}

.top-even .icone-droite{
  float:right;
  color: #fff;
  margin-top: 5px;
  margin-right: 8px;
}

.top-even .icone-gauche{
  color: #fff;
  margin-left: 8px;
}


.content-secondaire{
  padding: 10px 0px;
  margin: 0px 0px 0px 0px;
}


/* Style des lien avec terme et condition */
.main-link-perso {
  display: flex;
  flex-wrap: wrap;
  /*justify-content: flex-start;  //Alignement à gauche */

  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  margin: 5px 0px 0px 0px;
  padding: 20px 0px;
  border-top: 4px solid #000000;
  border-bottom: 4px solid #000000;
}

.dark-mode .main-link-perso{
  border-top: 4px solid #FFFFFF;
  border-bottom: 4px solid #FFFFFF;
}

.item-link-perso {
  margin: 0px 5px 0px 5px; /* Marge entre les éléments */
}

.item-link-perso a {
  text-decoration: none;
  color: #000000;
  font-weight: 600;
}

.dark-mode .item-link-perso a {
  text-decoration: none;
  color: #FFFFFF;
  /* Ajoutez les styles de lien souhaités */
}

/* Conteneur principal des liens (affichage horizontal) */
.main-link-pers {
  display: flex; /* Alignement en ligne */
  flex-wrap: wrap; /* Permet le retour à la ligne si nécessaire */
  justify-content: center; /* Centre les liens horizontalement */
  align-items: center;
  margin: 5px 0px; /* Marge réduite */
  padding: 8px 0px;
  border-top: 2px solid #ccc; /* Bordure plus discrète */
  border-bottom: 2px solid #ccc;
  font-size: 10px;
}

/* Dark Mode pour le conteneur */
.dark-mode .main-link-pers {
  border-top: 2px solid #444;
  border-bottom: 2px solid #444;
}

/* Style des items de la liste */
.item-link-pers {
  margin: 0 5px; /* Espacement horizontal */
  display: flex;
  align-items: center;
}

/* Style des liens */
.item-link-pers a {
  text-decoration: none;
  color: #666; /* Couleur grise pour un effet discret */
  font-size: 10px; /* Taille réduite */
  font-weight: normal; /* Suppression du gras */
}

/* Séparateur "|" */
.item-link-pers::after {
  content: "|";
  color: #999; /* Couleur du séparateur */
  margin-left: 5px;
}

/* Supprime le dernier séparateur */
.item-link-pers:last-child::after {
  content: "";
}

/* Mode sombre pour les liens */
.dark-mode .item-link-pers a {
  color: #bbb;
}

/* Effet au survol (légèrement plus foncé) */
.item-link-pers a:hover {
  color: #333; /* Rend légèrement plus visible au survol */
}


/* Lien d'application mobile et reseau sociaux */
.top-div-perso {
    width: 100%;
    height: 80px; /* Ajustez la hauteur selon vos besoins */
    background-color: #ccc; /* Couleur de fond */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px; /* Espace intérieur */
    margin-bottom: 10px;
  }


  .top-div-perso .logo-img1 {
    width: 110px; /* Ajustez la largeur de l'image */
    height: auto; /* Ajustez la hauteur de l'image */
  }

  .top-div-perso .logo-img2 {
    width: 180px; /* Ajustez la largeur de l'image */
    height: auto; /* Ajustez la hauteur de l'image */
  }


  .bottom-div-perso {
  display: flex;
  justify-content: space-between;
  width: 100%;
}


.bottom-div-perso div {
  background-color: #ccc; /* Couleur de fond */
  width: 32%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.bottom-div-perso a {
  display: block;
  margin: auto;
  width: 40px; /* Ajustez la largeur de l'image */
  height: 40px; /* Ajustez la hauteur de l'image */
  object-fit: cover; /* Assurez-vous que l'image est complètement visible */
}


.bottom-div-perso .left-div, .bottom-div-perso .right-div, .bottom-div-perso .center-div {
  width: 23%; /* Ajustez la largeur des divs selon vos besoins */
  height: 70px; /* Ajustez la hauteur des divs selon vos besoins */
}

.bottom-div-perso .left-div, .bottom-div-perso .right-div {
  background-color: #ccc; /* Couleur de fond des divs aux extrémités */
}

.bottom-div-perso .center-div {
  background-color: #ccc; /* Couleur de fond du div central */
}


/*  plus-18 */
.plus-18 {
  padding: 0px 5px 0px 10px;
  width: 100%;
  overflow: hidden; /* Pour empêcher le contenu de déborder du conteneur */
}

.plus-18 .left {
  float: left;
  width: 80px;
  height: auto;
}

.plus-18 .right {
  float: right;
  border: 3px solid #000000;
  padding: 2px;
  border-radius: 100%;
  font-weight: 600;
}

.dark-mode .plus-18 .right {
  border: 3px solid #FFFFFF;
  color: #FFFFFF;
}

/* Bouton d'inscription et telechargement d'application mobile */
.bouton-inscription-telecharg {
    width: 100%;
    text-align: center; /* Aligner les boutons horizontalement dans le centre */
    margin-top:0px;
    padding: 2px 15px;
}

.bouton-inscription {
    float: left;
    margin-right: 10px; /* Ajoutez de la marge à droite pour séparer les boutons */
    width: 45%;
}

.bouton-telecharg {
    float: right;
    margin-left: 10px; /* Ajoutez de la marge à gauche pour séparer les boutons */
    width: 45%;
}

/* Styles pour la première ul (mode tablette) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .web-hidden {
        display: none;
    }
}

/* Styles pour la deuxième ul (mode tablette) */
@media screen and (max-width: 768px) and (max-width: 1180px) {
    .mobile-hidden {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }
}