/*0- Général */

    /** Translate global*/

/*0.1- Dark & Light*/
/*0.2- Navbar Profile-*/
/*0.3- Navbar Vertical-*/
/*0.4- NAVBAR ADMIN */
/*1- Tournament*/
    /*1.2- Tournament Detail*/
        /*1.3- Ads_inter_tournament*/
            /*1.4- End_ads_Tournament*/
/*3- Admin  */
    /*3.1- Admin Tournament
        /*3.1.2- Preuve Tournament

/*4- Porfile */
    /*4.1- Profile my_tournament*/


/*5-Reward */    

/*6-RECHERCHE */

/*7-BLOGPOST*/
    /*7.1-BLOGPOST DETAILS*/

    /*7.4 - BLOGPOST UNIVERS*/
    /*7.5 - CREER BLOGPOST*/

/*8-BONPLAN */
  /*8.2 - BONPLAN DETAIL*/
/*---------------------------------------------------*/
/*-------------------------------------*/
/*------------*/


/*0- Général-*/

.pub {
    display: block;
}

.pub-largeur {

    height: unset;
}

.expired-conte {
    display: none;
    /* Hides expired bon plans */
}

.pub-new-hauteur {
    height: 100px;
    margin: 15px 0;

}
     .pub-multiplex {

    height: unset; 
       width: unset;  
 

}
     

/** Translate global*/
.flag-icon-traslate{

height: 50px;

}
@-webkit-keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(20%, 0, 0);
      transform: translate3d(20%, 0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  @keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(20%, 0, 0);
      transform: translate3d(20%, 0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  .fadeInRight {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
  }

  .flag.dropdown-menu.drp.show {
    min-width: 90px;
    margin-bottom: 15px;
  }

  ul li {
    list-style: none;
  }

  .colordrop, .puce {
    color: #000000; /* Couleur par défaut */
  }

  .translator {
 /*    display: block; Assurez-vous que la section traducteur est visible */
  }

  .flag.dropdown-menu.drp {
    background-color: #000000 !important; /* Couleur de fond par défaut */
  }

  .drop-flag-translate{

	z-index:1000
  }
/* disparition bar google bar
 .nav-right {
  float: left !important;
  position: relative;
}*/
#google_translate_element {
  display: none;
}
.goog-te-banner {
  display: none;
}
 
.skiptranslate {
  display: none;
  bottom: 0px;
  position: relative;
}
.goog-te-spinner-pos {
  display: none !important;
}
body {
  top: 0px !important;
}
#goog-gt-tt {
  visibility: hidden;
  display: none !important;
}
.goog-text-highlight {
  display: none !important;
  Background-color: transparent;
} 


/*---------------------*/
/*---------------------*/
/*---------------------*/


/*0.1- Dark & Light*/
.dark-mode .all-my-tournament .txt-tournament{
    color:#0c123a ; 

}

.dark-mode .title-pop-ads{
    color:#0c123a ; 

}

.dark-mode .titre-challenge{
    color: white;

}
.light-mode .titre-challenge{    
    color:#0c123a ;

    }
    .light-mode .plateforme-top {
        background-color: #dbdbdb;
    }

 

.light-mode .nom-banner-top-tournament{

    color: white !important;

}

.light-mode .link-card-tournament{

    color:white !important

}


/* --0.2- NAVBAR PROFILE*/
.modal-content{
    background-color: #232323;
  }  
  .light-mode .modal-content{
    background-color: white;
  }  
  
    .light-mode .point-user{
  color:white;
  
    }
  
  .coin-user{
  
    height: 30px;
  
  }
  
  .part-user {
    display: flex;
    align-items: center;
    justify-content: end;
    margin: 0 5px;
  }
  
  .bouton-nav {
  
    position: fixed;
    right: 0;
    display: flex;
    align-items: center;
    z-index: 1000;
    margin-top: 5px;
    top:5px;
  }
  
   
  .logo-mobile{
  
  display: none;
  
  }
  
  @media (max-width: 991.98px) {
  
    .logo-mobile{
  
      display: flex;
      justify-content: center;
      margin: 15px 0;
  
    }
  
    .part-user{
  
      padding-left: var(--bs-navbar-nav-link-padding-x);
      padding-right: var(--bs-navbar-nav-link-padding-x);
  
    }
  
  }
  
  @media screen and (max-width: 991px) {
  
    .div-logo-nav {
  
  display: none;
    }
  
    .navbar-primary-menu li a .nav-label {
      display: block;
    }
    
    .notif-none{
  
      display: block !important;
    
    }
  
  }
  
  @media screen and (max-width: 1105px) {
  
  .notif-none{
  
    display: none;
  
  }

}
  /*-------------------------------------------------------*/

/*0.3 Navbar Vertical ----------------*/
 






/*------------------------------*/
/*0.4 Navbar ADMIN ----------------*/
 
.nav-top-adminext{

    display: flex;
align-items: center;
}

.burger-admin{
margin-right:20px;

}
 
.sidebar {
  height: 100vh; /* hauteur de la fenêtre */
  overflow-y: auto; /* active le défilement vertical si le contenu dépasse */
  padding: 2px 10px;
  margin-bottom: 20px;
}





/*------------------------------*/

/*1- Tournament-*/
/*------------BANNIERE TOURNAMENT 3 CARDS---*/
@media (max-width: 3000px) {

.banner-pres {
    font-family: Arial, sans-serif; 
    color: #FFF; /* Texte blanc pour contraster */
    padding: 80px 0 20px 0;
      }

  .banner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 20px; /* Espacement entre les cards */
  }

  .banner-item {
    background-color: #252533; /* Fond sombre pour chaque card */
    border-radius: 12px;
    text-align: center;
    padding: 20px;
    flex: 1 1 calc(33.333% - 20px); /* Utilisation de flexbox pour une taille égale */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Ombre pour la profondeur */
    position: relative;
    overflow: visible; /* L'image peut dépasser de la card */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation au survol */
  }

 
.banner-item img {
    /* width: 120px; */
    height: 153px;
    object-fit: contain;
    margin-bottom: 15px;
    border-radius: 35%;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    position: absolute;
    top: -63px;
    left: 50%;
    transform: translateX(-50%);}

  .banner-item p {
     font-size: 16px;
    font-weight: 500;
    color: #A9A9B8; /* Gris clair pour le texte */
  }

  /* Ajouter les étapes sous les images */
  .step {
 
    margin:80px 0 15px 0;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    background-color: #ff5b5b; /* Couleur d'arrière-plan des étapes */
    padding: 5px 15px;
    border-radius: 50px;
    display: inline-block;
  }

  /* Flèche entre les cards */
  .arrow {
    font-size: 24px;
    color: #FFF;
    margin: 0 10px;
  }
}

  /* Adaptation pour petits écrans */
  @media (max-width: 768px) {
    .arrow {
      display: none; /* Cacher les flèches */
    }
    .banner-item {
      flex: 1 1 calc(50% - 20px); /* Deux cards par ligne */
    }

    .last-step-banner{
      margin-top: 25px;
    }

      .banner-item img {
    width: 120px; /* Taille ajustée pour l'image */
    height: 120px;
    object-fit: contain; /* S'assurer que l'image reste bien cadrée */
    margin-bottom: 15px;
    border-radius: 50%; /* Cercle pour l'icône */
    background: rgba(255, 255, 255, 0.1); /* Cercle subtil derrière l'icône */
    padding: 10px;
    position: absolute;
    top: -40px; /* L'image dépasse encore plus vers le haut */
    left: 50%;
    transform: translateX(-50%); /* Centrage horizontal */
  }
  }

  @media (max-width: 480px) {
    .banner-item {
      flex: 1 1 100%; /* Une card par ligne */
    }
    .step-two-banner{
margin-top:15px

    }
  }

/*----------------------------*/


.tournament-page .title-tournament {
    font-size: 20px;
    padding-top: 9px 0;
}

.tournament-page .casino-card {
    background: linear-gradient(135deg, rgba(42, 87, 142, 0.9), rgba(0, 0, 0, 0.7));
    /* Arrière-plan dégradé */
    border-radius: 15px;
    /* Bordures arrondies */
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    /* Assurez-vous que l'image ne déborde pas */
    position: relative;
    /* Positionnement relatif pour les effets de pseudo-éléments */
}



.tournament-page .casino-card:hover {
    transform: translateY(-10px);
    /* Légère élévation au survol */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    /* Ombre plus prononcée */
}

.tournament-page .card-title {
    font-size: 1.5rem;
    /* Taille de la police pour le titre */
    margin-bottom: 0.5rem;
}

.tournament-page .tournament-page .text-yellow {
    color: #FFC107;
    /* Couleur jaune pour la catégorie */
}

.tournament-page .text-white {
    color: white;
    /* Couleur blanche pour le texte */
}

.tournament-page .bouton-bon-plan {
    display: inline-block;
    padding: 9px 24px;
    margin: 10px 0;
    background-color: #FFC107;
    /* Jaune vif pour le bouton */
    color: #2e3b4e;
    /* Couleur de texte sombre pour le bouton */
    border-radius: 25px;
    /* Bordures arrondies pour le bouton */
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    /* Texte en majuscules */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    width: 150px;
    text-align: center;
    /* Centre le texte à l'intérieur du bouton */
    line-height: 24px;
    /* Ajuste la hauteur de ligne pour centrer verticalement le texte */
}

.tournament-page .txt-participer {}

.tournament-page .bouton-bon-plan:hover {
    background-color: #ffca28;
    /* Couleur plus claire au survol */
    transform: scale(1.05);
    /* Légère augmentation de taille au survol */
    box-shadow: 0 4px 20px rgba(255, 202, 40, 0.5);
    /* Ombre douce */
}

.tournament-page .icon {
    font-size: 1rem;
    /* Taille d'icône */
    margin-right: 5px;
    /* Espacement entre l'icône et le texte */
}


.tournament-page .row {
    flex-direction: unset;

}

.subcat-toornament{
    position: absolute;
       top: 5px;
    right: 10px;
    background: black;
    border-radius: 170px;
    padding: 0.5% 1.5%;
background: #fe2f60;
}

.expire-tournament{
font-size:15px;

}

@media (max-width: 1353px) {
    .tournament-page .bouton-bon-plan {

        line-height: 20px;
        /* Ajuste la hauteur de ligne pour centrer verticalement le texte */
    }

}


@media (max-width: 1290px) {

    .tournament-page .column-gauche {

        padding-left: 47px;
    }

}


@media (max-width: 1201px) {

    .tournament-page .column-gauche {

        padding-left: 62px;
    }

}


@media (max-width: 991px) {

    .tournament-page .column-gauche {

        padding-left: 8px;
    }

    .tournament-page .casino-card::after {
        content: "";

        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        /* Ombre douce */
        opacity: 0;
        /* Par défaut, l'ombre est invisible */
        transition: unset;
    }

    .tournament-page .casino-card:hover::after {
        opacity: 0;
        /* Ombre devient visible au survol */
    }

    .tournament-page .casino-card:hover {
        transform: translateY(0);
        /* Légère élévation au survol */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        /* Ombre plus prononcée */
    }

    .tournament-page .casino-card {
        background: linear-gradient(135deg, rgba(42, 87, 142, 0.9), rgba(0, 0, 0, 0.7));
        /* Arrière-plan dégradé */
        border-radius: 15px;
        /* Bordures arrondies */
        transition: unset;
        overflow: hidden;
        /* Assurez-vous que l'image ne déborde pas */
        position: relative;
        /* Positionnement relatif pour les effets de pseudo-éléments */
    }



}




/*1.1.2- Banner TOP*/

.banner-intra-tournament{

display: flex;
flex-direction: column;
align-items: center;
}

 .plat-tournament{

    margin-right: 10px;

 }
/* Style pour le lien principal */
.more-tournament {
    display: block;
  /* width: 200px;  
     height: 250px;   */
     width: 247px;  
     height: 169px;
    overflow: hidden;
    text-decoration: none; /* Supprime les soulignements de lien */
    padding: unset!important;
}

/* Conteneur principal de l'image et du texte */
.banner-intra-tournament {
    display: flex;
    flex-direction: column;
    align-items: center; 
    width: 100%; 
}

/* Image */
.img-banner-toptournament {
    width: 100%; /* Largeur de l'image identique à celle du conteneur */
  /*  height: 150px;   */
    object-fit: contain; /* Recadre l'image pour remplir la zone sans déformer */
}

/* Conteneur du texte */
.left-banner-top-tournament {
    height: 50px; /* Hauteur fixe pour le conteneur de texte */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

/* Texte du titre */
.nom-banner-top-tournament {
    font-size: 18px;
    line-height: 1.2;
    margin: 0;
    white-space: normal; /* Permet au texte de passer à la ligne */
    word-break: break-word; /* Force le retour à la ligne pour les mots longs */
    overflow: hidden;
    text-overflow: ellipsis; /* Points de suspension si le texte dépasse */
    max-height: 40px; /* Limite la hauteur pour éviter que le texte ne prenne trop de place */
}




/*--------------------------*/


/*1.2- TOURNAMENT DETAIL*/

.tournament-detail .img-detail-top {

    border-radius: 65px;

}

.tournament-detail .titre-bon-plan-produit {

    text-transform: uppercase;
}

.tournament-detail .titre-tournament {

    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;

}

.tournament-detail .more-detail-tournament {

    margin-top: 15px;

}

.tournament-detail .ligne-detail-tournament {

    display: flex;
    width: 100%;
    justify-content: space-around;
}

.tournament-detail .rewards {
    margin-right: 4px;

}

 
/*FAQ Tournament DETAIL*/

 
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 0;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.faq-question {
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    background: #007BFF;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.faq-question:hover {
    text-decoration: underline;
}

.faq-answer {
    padding: 15px;
    font-size: 14px;
    line-height: 1.6;
    display: none;
    background: #f9f9f9;
}

.faq-question::after {
    content: '+';
    font-size: 18px;
}

.faq-item.active .faq-question::after {
    content: '-';
}

.faq-item.active .faq-answer {
    display: block;
} 

 
/*-------------------*/

#adblock-warning {
    background-color: red;
    color: white;
    text-align: center;
    font-size: 14px;
   padding: 10px;
    width: 100%;
    z-index: 9999; /* Assure que le bandeau est toujours visible en haut */
  }
 
  
  @media (max-width: 768px) {
    #adblock-warning p {
      font-size: 14px; /* Réduit la taille du texte pour les petits écrans */
   padding: unset;
    }
  }
  
/*ANTI ADBLOCK*/

   /* Style pour l'overlay sombre */
/* Style pour l'overlay sombre */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fond sombre */
    z-index: 9999; /* Couvrir tout le contenu */
    pointer-events: auto; /* Permet à l'overlay de capter les événements */
}

/* Désactive l'interaction avec le contenu sous l'overlay */
#content {
    pointer-events: none; /* Désactive les événements de la souris sur le contenu */
}

/* Réactive l'interaction avec le contenu lorsque l'overlay est masqué */
#content.active {
    pointer-events: auto; /* Rétablir les événements sur le contenu */
}


/* Masquer le contenu de la page si un bloqueur est détecté */
#content {
    display: block;
}

/* Masquer le contenu de la page si un bloqueur est détecté */
#blockedContent {
    display: none;
}

/* Message d'avertissement si un bloqueur est détecté */
#adblockMessage {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #d30000;
    color: white;
    padding: 20px;
    border-radius: 10px;
    font-weight: bold;
    text-align: center;
    z-index: 10000;
    max-width: 400px;
    width: 90%;
}
.button-anti-adblock{

margin-top:15px;
 
}

/* Classe pour désactiver les interactions sur la page */
.no-interaction {
    pointer-events: none;
    opacity: 0.5; /* Optionnel : rend le contenu légèrement transparent pour indiquer que l'interaction est désactivée */
}



/* Désactiver les boutons au départ, mais permettre l'interaction dans le pop-up */
.back-btn, .reload-btn {
    background-color: #4CAF50; /* Vert */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    margin-top: 10px;
}

/* Couleur au survol des boutons */
.back-btn:hover, .reload-btn:hover {
    background-color: #45a049; /* Couleur plus foncée lors du survol */
}

/*---------------------------------*/

/*1.3- Ads_Inter_Tournament*/

.ads-inter .popup {
 
    z-index: 10;
 
   
      border-radius: 10px;
     font-family: 'Arial', sans-serif;
}

.ads-inter .popup-content {
    background-color: #fefefe;
 
    padding: 10px;
    border: 1px solid #888;
    width: 80%; /* Largeur */
    max-width: 600px; /* Largeur max */
}

.ads-inter .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.ads-inter .close:hover,
.ads-inter .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
 
  
 
 

.title-pop-ads {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
 }
 
.subcategory h3 {
    font-size: 18px;
    color: #555;
    margin: 10px 0;
}

.image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
        margin: 10px auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

 
.image-wrapper img {
 
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
  

.img-preuve {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color:#0c123a ; 
}

.img-preuve input[type="file"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    width: 100%;
    max-width: 300px;
    cursor: pointer;
    transition: border-color 0.3s ease;

}

.img-preuve input[type="file"]:hover {
    border-color: #007bff;
}
 

.img-preuve button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.img-preuve button:hover {
    background-color: #0056b3;
}

#imagePreviewtournamentContainer img {
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

#sendingMessage {
    font-size: 14px;
    color:#0c123a ; 
    background-color: #eaf4fc;
    border: 1px solid #007bff;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
}
 
#closePopup {
    position: relative;
    right: 5px;
    font-size: 24px;
    color: #aaa;
    cursor: pointer;
    transition: color 0.3s ease;
}

#closePopup:hover {
    color: #333;
}



 
/*-------Image infos preuve-----*/

/* Ajoutons des styles pour masquer les catégories non correspondantes */
.subcategory {
    display: none; /* Par défaut, toutes les catégories sont masquées */
}

.subcategory-container {
    display: flex;
    flex-direction: column;
    text-align: center;

}

  
 

/* Masquer l'image par défaut */
/* Masquer l'image par défaut */
.info-image {
    max-width: 90%; /* Limiter la largeur à 90% de son conteneur */
    height: auto; /* Laisser la hauteur s'ajuster automatiquement */
    margin-top: 10px;
    transition: transform 0.3s ease; /* Transition pour le zoom */
    object-fit: contain; /* Cette propriété permet à l'image de s'ajuster sans couper des parties de l'image */
    position: relative; /* Nécessaire pour positionner le symbole + */
}

/* Positionner les icônes au centre de l'image */
.image-wrapper {
    position: relative; /* Nécessaire pour positionner les icônes par rapport à l'image */
}

.zoom-icon {
    position: absolute;
    top: 50%; /* Centrer verticalement */
    left: 50%; /* Centrer horizontalement */
    transform: translate(-50%, -50%); /* Centrer parfaitement */
    font-size: 3rem; /* Taille de l'icône */
    color: rgba(255, 255, 255, 0.7); /* Couleur de l'icône */
    display: block; /* Par défaut, afficher l'icône de zoom (+) */
    pointer-events: none; /* Ne pas interférer avec les clics sur l'image */
    opacity: 0.8; /* Opacité de l'icône */
    transition: opacity 0.3s ease; /* Transition pour l'opacity */
}

/* Lorsque l'image est zoomée, masquer l'icône de zoom (+) et afficher l'icône de dézoom (-) */
.info-image.zoomed + .zoom-icon.zoom-in {
    display: none; /* Masquer l'icône de zoom (+) */
}

 .zoom-icon.zoom-out {
    opacity: 0.4;
}
 
 
/* Effet de zoom lorsque la classe 'zoomed' est activée */
.info-image.zoomed {
    transform: scale(1.9); /* Zoom léger de 90% */
    cursor: zoom-out; /* Changer le curseur en loupe inversée */
}

/* Change le curseur en loupe au survol de l'image avant zoom */
.info-image:not(.zoomed):hover {
    cursor: zoom-in; /* Définit le curseur en forme de loupe (+) */
}


/*--------------------------*/

/*1.4- End_ads_Tournament*/

   /* Style pour le pop-up */
 .end_ads .popup {
    display: none; /* Caché par défaut */
    position: fixed;
    z-index: 1000; /* Au-dessus des autres contenus */
    left: 0;
    top: 0;
    width: 100%; /* Largeur pleine */
    height: 100%; /* Hauteur pleine */
     background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
}

.end_ads .popup-content {
    background-color: #fefefe;
    margin: 13% auto; /* Centré */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Largeur */
    max-width: 600px; /* Largeur max */

}

.end_ads .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.end_ads .close:hover,
.end_ads .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.end_ads .img-preuve{

    color:#0c123a ; 

}

/*2 - Bon Plan */

.evenement-label {
    font-weight: bold;
    color: #28a745  !important;
 
    text-transform: uppercase;
}


/*2.1 Bon Plan Détail ---*/

.bouton-bon-plan-detail{

border-radius: 60px;
background-color: orange
}

/*---------*/



/*3 */
/*3.1*/
/*3.12 - Preuve Toornament*/
 


    /* Styles pour activer le zoom */
    .zoomable {
        cursor: zoom-in;
        transition: transform 0.3s ease;
    }

    /* Quand l'image est cliquée, elle s'agrandit */
    .zoomed {
        transform: scale(2); /* Zoom 2x */
        cursor: zoom-out;
    }

    /* Centrer l'image dans la modale */
    .modal-body {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    /*---------------*/
    /* Styles de la disposition en colonne */
 
 .all-participation{

     display: flex;
     flex-wrap: wrap;

 }

.participant-card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin:0 10px 10px 0;
    width: 47%;
}

.participant-card h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

.participant-detail {
    margin-bottom: 10px;
}

.participant-detail strong {
    color: #333;
}

.participant-images {
    display: flex;
    gap: 15px;
}

.participant-images img {
    max-width: 100px;
    height: auto;
    cursor: pointer;
}

.btn {
    padding: 6px 12px;
    font-size: 14px;
    margin: 2px;
}

.btn-success {
    background-color: #28a745;
    color: white;
    border: none;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
    border: none;
}

.btn:hover {
    opacity: 0.8;
}

.alert {
    padding: 5px;
    text-align: center;
}

.modal-content{
background-color:white !important;

} 



/*Zoomable*/
.zoomable {
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

.zoomed-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* Fond semi-transparent */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Cache les parties de l'image hors écran */
    z-index: 1055; /* Au-dessus de la modale */
}

.zoomed-image {
    max-width: none; /* Pas de limite de taille */
    max-height: none;
    transform: scale(3); /* Zoom initial à 3x */
    cursor: grab;
    transition: transform 0.3s ease;
    position: absolute;
}





/*4- Porfile */
    /*4.1- Profile my_tournament*/

.all-my-tournament{

    display: flex;
    flex-wrap: wrap;

}

.all-my-tournament .list-group-item{

    margin:0 10px 10px 0;
    width: 47%;
    border-radius: 8px;
}

.list-group-item{
display: flex;

}

.img-my-tournament{
margin-right: 10px;

}


@media (max-width: 1000px) {
    .list-group-item{
        
        flex-direction: column;
        
        }
}



/* 5- REWARD */

.card-space {
    margin-right: 10px;
    width: 315px;
}
.reward-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(299px, 0.25fr));
    gap: 1.5rem;
    margin: 15px 0;
    
}

.card-reward {
    display: flex;
    flex-direction: column;
    height: 100%; /* Toutes les cartes s'alignent sur la hauteur la plus grande */
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}


/*6 - RECHERCHE*/

.search-sub-categories{

    margin: 50px 0;

}

.search-subcat{

    display: flex !important;
    
}

.list-search-subcat{

margin-right: 55px;

}

.border-img-subsearch{
border-radius: 12px;
margin-top: 10px;
}


/*7-BLOGPOST*/



/*7.1-BLOGPOST DETAILS*/
.blog-connex{

    height:140px
}
/*---------------------------------------*/
/*------BLOGPOST IN BP*----------*/

.bloginbp {
    text-decoration: none;
    display: flex;
    padding: 10px;
}

.bloginbp:hover {
    text-decoration: none;
}

.titre-blog-in-bp {
    margin-bottom: 10px;
}


@media screen and (max-width: 872px) {

    .bloginbp {

        flex-direction: column;
        width: 180px;
     }

}

@media screen and (max-width: 740px) {

    .bloginbp {

        flex-direction: column;
        width: 155px;
    }
  }


/*7.4 - BLOGPOST UNIVERS*/
/*----------------*/
/*UNIVERS*/

.carousel-univers-blog {
    margin: 20px 0;
  
  }
  
  .nav-univers-cat {
    margin: 0 auto;
    border-radius: 8px;
  
  }
  
  .carre-blog-carousel-univers {
  
    align-items: center;
    border-radius: 10px 10px 0 0;
    height: auto;
    text-align: center;
  }
  
  .bas-carre-univers-blog {
  
    gap: 10px;
    position: absolute;
    bottom: 15px;
  
  }
  
  .image-blog-univers-car {
  
    filter: brightness(0.73);
  }
  
  .titre-univers-blog-car {
  
    font-size: 18px;
    font-weight: 500;
    padding: 0 11px;
    text-align: center;
  }
  
  .bp-univers-blog {
  
    background-color: #30323c;
    margin-top: 10px;
    border-radius: 8px;
  }
  
  .bon-plan-univers-blog {
    align-items: center;
    border-radius: 15px;
    display: flex;
  
    padding: 0 0 10px 15px;
  
  }
  
  .image-bp-univers-blog {
  
  
    border-radius: 7px;
    object-fit: cover;
   
  
  }
  
  .nom-bp-univers {
  
    color: white;
  
    text-align: center;
    padding: 7px;
  
    font-size: 17px;
  }
  
  .title-bp-universe {
    font-size: 28px;
    text-align: center;
  
  }
  
  .title-bp-main-blog {
  
    font-size: 19px;
    text-align: center;
    margin: 5px 0;
  }
  
  .list-bp-univers-blog {
  
    margin-top: 10px;
  
  }
  
  .space-crea-detail-blog {
    max-width: 200px;
    /* ajustez la largeur maximale selon vos besoins */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .signal-blogpost {
  
    margin-left: 10px;
    background: red;
    padding: 4px 5px;
  }
  
  .cat-color-blog-univers {
  
    background-color: rgb(48 50 60) !important;
    border-radius: 8px;
  }
  

  .first-cat-home-blog-uni{

    display: flex;
    flex-direction: column;
   }

/*7.5- CREER BLOGPOST */
.translation_create_blog{
text-transform: capitalize;
color:red;
}




  /*8- BONPLAN */



  /*8.2- BONPLAN DETAIL */
  /*----------BON PLAN DETAIL -------*/

.like-bp-detail {
  position: absolute;
  right: 0;
}

.title-detail-bp {
  width: 1200px;
  margin: 0 auto;
  font-size: 50px;
}

.button-more-detail-bp {
 
  color: #86d1ff;
}

.bouton-deal-detail {
  display: flex;
  align-items: center;
  margin-top: 24px;
}

.promo-bonplan-detail {
  background: white;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 45px;
  padding: 0 27px 0 12px;
  margin-left: 10px;
  height: 30px;
  position: relative;
}

/*---------------------------------*/
/* Styles pour le bouton commutateur */
.toggle-button {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: #4f5159;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 16px;
}

/* Style pour les icônes du mode */
.sun-icon,
.moon-icon {
  display: none;
}

.light-mode .sun-icon {
  display: inline-block;
}

.dark-mode .moon-icon {
  display: inline-block;
}

.blogpost-same-subcategory {
  background-color: #30323c;
  margin-top: 10px;
      border-radius: 8px;
}

.article-connex-bp {
  text-align: center;
  padding: 5px 5px;
}

/*--------------------------------*/
/* ARTICLE CONNEXE*/

.title-connexe {
  font-size: 30px;
  margin: 0 0 10px 0;

}

.sect-autres-bonsplans {
  background-color: #30323c;
  border-radius: 10px;
  color: #fff;
  height: auto;
  padding: 19px;
  width: 100%;
}

.article-connexe {
  background-color: unset;
  text-decoration: none;
  border: none;

}

.connexe-englobe {
  width: unset;
  justify-content: space-evenly;
  display: flex;
}

.img-connexe-bp {
  border-radius: 8px;
}

.col-connexe {
  width: 170px;
  margin-right: 25px;
}

.carousel-wrapper-connexe {
  height: unset;
  width: 100%;
  top: 30%;
  left: 50%;
  overflow: hidden;
}

.title-cat-bp-connexe {
  font-size: 25px;
  color: white;
  padding: 10px 0;
}

.title-bp-connexe {
  font-size: 18px;
  color: white;
  margin-bottom: 5px;
}

.body-card-connexe {
  padding: 8px 0;
}

.icon-like-connexe {
  height: 25px;
  width: 25px;
  filter: invert(1);
  object-fit: cover;
  margin-left: 10px;
}

.prix-gratuit-connexe {
  color: red;
  font-weight: 600;
  font-size: 19px;
  margin: 0 0 6px 0;

}

.prix-final-connexe {
  color: red;
  font-weight: 600;
  font-size: 19px;
  margin: 0 0 6px 0;
}

.prix-barre-connexe {
  text-decoration: line-through;
  color: grey;
  text-decoration: line-through;
  font-family: "Sans code 3", sans-serif;
  font-size: 18px;
}

.prix-before-after {
  display: flex;
}

.prix-connex-bp {
  display: flex;
  flex-wrap: wrap;
}

.prix-left-connex-bp {
  margin-right: 6px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.percent-reduc-connex-bp {
  margin-left: 6px;
}

.crown-connex-bp {
  color: white;
  filter: invert(1);
  height: 30px;
  object-fit: scale-down;
}

.compteur-like-connex-bp {
  color: white;
  pointer-events: none;
  display: flex;
  width: 62px;
  align-items: center;
}

/*--------------------------------------*/
/*BOUTON SIGNALER */

.button-signal-bp {
  color: white;
}

.button-signal-bp:hover {
  background-color: red;
}

.signal-bonplan-detail {
  background-color: red;
}

.signal-bonplan-detail:hover {
  background-color: #e50000;

}