/* CSS Custom Properties for Layout */
:root {
    /* Navbar widths based on Bootstrap col-* classes and desired XS behavior */
    /* For XS (col-auto, icons only) - assuming a fixed width for when text is hidden */
    --navbar-width-xs: 70px; /* Example: Adjust if actual icon bar width is different */

    /* For SM (col-sm-3 is 25% of parent) */
    --navbar-width-sm: 25%;

    /* For MD (col-md-3 is 25% of parent) */
    --navbar-width-md: 25%;

    /* For LG & XL (col-lg-2 is 16.66666667% of parent) */
    --navbar-width-lg: 16.66666667%;

    /* Current navbar width - this will be updated by media queries */
    --navbar-width-current: var(--navbar-width-xs);
}

@font-face {
 font-family: Bruno ;
 src: local("BrunoAceRegular.ttf") format("ttf");    
}

*{
   margin: 0;
   padding: 0 ;
}
.hero-banner {
    background: url('/assets/img/stade.png') center center / cover no-repeat;
    height: 100vh;
    position: relative;
}
.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
   background-image: linear-gradient(180deg, rgba(2, 7, 48, 0.86) 31%, rgba(2, 7, 3, 0.2) 60%);
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.3s;
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.herohome {
    background-image: url("/assets/img/stade.jpg");

   background-repeat: no-repeat;  
  position: relative;
  /*min-height: 100vh;*/
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.hero-text{
   background: rgba(123, 180, 246, 1);
   color: rgb(249, 250, 255); 
   height:auto;
   /* width: 100%;   */   
   font-size: 20px;   
}

.herohome::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.5);
}

.herohome-content {
  position: relative;
  z-index: 100000;
}


.lateral-navbar-column {
  background-color: #222;
  min-height: 100vh;
  position: sticky;
  top: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  z-index: 100;
}

main {
  overflow-x: hidden;
  overflow-y: auto;
}

.card.profile-card {
  background-color: #333;
  border-radius: 12px;
  min-height: 100%;
}

.card-body.profile-card-body-custom {
  font-size: 0.95rem;
}

@media (max-width: 576px) {
  .card-body.profile-card-body-custom {
    font-size: 0.85rem;
  }
}


.image-hero{
   width:auto;
   height: 30vw;
   object-fit: cover; 
   margin: auto;
}
.info-bonus{
   font-size: 1rem;
}

.card-body{
   font-size: 2vw;
}
.chat{   
   height: 650px;
   background-color:#7BB4F6;
   color :#020730;
}
.iconchat{
   height: 30px;
   width: 30px;
}

textarea{
 height: 100px;
}
.sticky{
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #020730;
}
.subs{
   
   filter: brightness(120%);
 }

.list-item{
   list-style: none;
}


body{   
   width: 100%;
   background: #020730;
   padding:5px;
   background-image: url("/assets/img/feminine-world-cup-trophy.png");
   background-repeat: no-repeat;  
   background-position: 70% top;   
  
}.redlight{
   color: #E87575;
}
h2{
   color: #fff;
   
}

label{
   color: #fff;
   text-align: center;
}
.text-hero{
  color: rgba(2, 7, 48, 1);
  line-height : 2em;
}
.info-group{
   font-size: 80px;
}
#linkhome{
   display: flex;
   align-items: center;
   color: rgba(0, 33, 72, 1);
   font-size: 40px;
   text-decoration: none;
}
.ball{
   height: 20px;
   width: auto;

}

.hero-icon-ranking {
	width: 144px;
	height: 164px;
	background-size: cover;
	background-repeat: no-repeat;
	display: inline-block;
	background-image: url("/assets/img/icon-park-outline_ranking.png");
}
.hero-logo{
   display: flex;  
   background: rgba(123, 180, 246, 1);
   height: 60px;
   width: auto;  
}
.hero{
      margin-top: 2%;
}
/* .btn-subscribe{
   height: 120px;
   background: rgb(255, 255, 255);
   color: rgba(199, 7, 7, 1);
   margin-top: 107px;  
   padding: 10px;
   border: none;
   font-size: 60px; 
} */
.cont,form{
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: auto;
   padding: 0;
}

.card{
 background: #002148;
}
.card-img-top{
   height:6vw;
   width:6vw;
   background: #002148;
}

.alert-primary{
   background: rgba(0, 33, 72, 1); 
}
.currentDate, .alert-primary{
   color: #3FD03A;
}

.lateralnav{
background-color: #002148;
color:rgba(123, 180, 246, 1);

}
.lateralnav a{
   color: rgb(239, 239, 240);   
}
.nav-item:hover{
   background-color: #b8cbe2;
}

.divider-menu{
   width: 100%;
   height: 2px;
   color: rgba(123, 180, 246, 1);
   opacity: 1;
}

.hero-ranking{
   background-color: rgba(0, 33, 72, 1);
}
.hero-subscribing{
   background-color: rgba(0, 33, 72, 1);  
  
   padding: 20px;  
   font-size: 40px;
   color:#fff;  
}

.info{
   border-radius: 10px;
}

.form-group{
   width: 800px;
}
.form-control-lg::placeholder{
    color:#e9d5d5;
    font-style: italic;
}

th{
   color: #e6e4e4;
   font-size: 20px;
}
tr{
   color:#7bb4f6;
   background-color: rgba(0, 33, 72, 1);
}

tr:hover{
   color: #8ad387;
}

tr:nth-child(odd) {
   background-color: rgb(1, 41, 91);

}
.tablehead{
   /* background: rgb(0,33,72) !important; */
background: linear-gradient(0deg, rgba(1,41,91,1) 0%, rgba(2,7,48,1) 100%);
   /* background-color: rgb(220, 222, 221) !important; */
}
.bruno{
font-family: 'Bruno Ace', sans-serif;
text-align: center;                
}

.fontsaira{
font-family: 'Saira', sans-serif;
}


.btn-validate{
   height: 120px;
   width: 350px;
   background: rgb(255, 255, 255);
   color: rgba(199, 7, 7, 1);
   margin-top: 20px;  
   padding: 10px;
   border: none;
   font-size: 60px;
   display: flex;   
   align-items: center;
   text-align: center; 
}

.dice{
  width: 50px;
  padding: 6px; 
}

.btn-play{
   font-family: 'Saira Condensed', sans-serif;
   align-items: center;  
   height: auto;
   margin: auto;
   padding: 0;
   background: #020730;
   border: 1px solid #7BB4F6;
   color:#7BB4F6; 
   font-size: 1rem; 
}
.btnrealscore{
   background: #f9b7f7;
   border: 5px solid #48046f;
   color:#400763; 
}
.imglogin{
   height: 50px;
   width: auto;
}
.linklogin{
   font-size: 40px; 
}

.linktocreate{
   font-size: 16px;

}

#rank2{
height:30%;
background-color:#E87575;

}
#rank1{
height:40%;
background-color:#7BB4F6
}
#rank0{
height:50%;
background-color:#A8EE87
}

.hero-text{
   background: rgba(123, 180, 246, 1);
   color: rgba(2, 7, 48, 1); 
   height:auto;
   /* width: 100%;   */   
   font-size: 20px;   
}

#nummatch{
   display: none;

}

.fade-out {
	-webkit-animation: fade-out 2s ease-out both;
	        animation: fade-out 2s ease-out both;
}

.modal-header{
   color: #fff;
   background-color: rgb(13, 93, 190);
   border-bottom: none;

}
.modal-body{
   color: #fff;
   background-color: rgb(54, 136, 236);
   margin: 0;
   padding: 0;
   
}
.input{

}
.modal-footer{
   color: #fff;
   background-color: rgb(21, 103, 204);
   border-top: none;
}


/* ----------------------------------------------
 * Generated by Animista on 2023-8-30 22:54:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
 @-webkit-keyframes fade-out {
   0% {
     opacity: 1;
   }
   50%{
      opacity: 1;
    }
   100% {
     opacity: 0;
   }
 }
 @keyframes fade-out {
   0% {
     opacity: 1;
   }
   50%{
      opacity: 1;
    }
   100% {
     opacity: 0;
   }
 }
 
 






/* Mediaquerie */
/* écran téléphone portrait */
/* @media (max-width: 575.98px)  */
@media (max-width: 590px){



.btn-play{ 
   height: auto;
   border: 1px solid #7BB4F6;
   font-size: 10px;
   padding: 1px;
   margin:2px; 
}

#rank2{
height:40%;
}
#rank1{
height:50%;
}
#rank0{
height:70%;
}

.dice{
  display: none;
  width: auto;
  padding: 2px;
  font-size: 16px; 
}
.imglogin{
   height: 50px;
   width: auto;
}



.logowc2022{
   object-fit: cover;
   width: 100%;
   height: auto;
   margin: auto;
  
}
.hero-text{ 
   height:auto;
   /* width: 100%;   */
   margin-top: 20px;
   font-size: 20px;   
}
h3{
   font-size: 40px;
}

.info{
   border-radius: 10px;   
}

.hero-logo{  
 height: 60px;    
}
.bruno{
   font-size: 40px;
}

.currentDate{
   font-size: 0.5rem;
}
.row{
 --bs-gutter-x: 0;
}


.linklogin{ 
   font-size: 10px;
}
#linkhome{ 
   font-size: 40px;
}
tr{
   padding-left: 5px;
  
}
.table, .table>:not(caption)>*>*{     
   font-size: 8px;
   padding : 0;
}
.mdate{
   font-size: 8px;
}
.close-game{
   font-size: 6px;
}
td{
   flex-wrap: nowrap;
 
}
.hero-ranking{
   
   font-size: 10px;   
}
th{

   font-size: 16px;
}
.hero-subscribing{     

   padding: 10px;  
   font-size: 12px;
   color:#fff;  
}
.btn-validate{
   height: auto;
   width: 10%;
   font-size: 20px;  
}



   }

/* Top Players Podium Styling */
.top-players-podium {
    /* Basic flex setup if Bootstrap's .row isn't enough, but .row should handle alignment */
    align-items: flex-end; /* Align items to the bottom to simulate podium heights */
    margin-top: 2rem;
    margin-bottom: 2rem;
    color: #ffffff; /* Assuming text is white as per existing style */
}

.player-podium-slot {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push card to bottom of slot */
    padding: 10px;
}

.player-card {
    background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent card */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 10px; /* Spacing for the card itself */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.player-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.podium-first {
    /* Style for the 1st place - potentially taller or more prominent */
    min-height: 280px; /* Taller than others */
    background-color: rgba(255, 215, 0, 0.2); /* Gold-ish tint */
    border-color: rgba(255, 215, 0, 0.5);
}

.podium-second {
    min-height: 240px; /* Medium height */
    background-color: rgba(192, 192, 192, 0.15); /* Silver-ish tint */
    border-color: rgba(192, 192, 192, 0.4);
}

.podium-third {
    min-height: 200px; /* Base height */
    background-color: rgba(205, 127, 50, 0.15); /* Bronze-ish tint */
    border-color: rgba(205, 127, 50, 0.4);
}

.player-avatar {
    width: 100px; /* Adjust size as needed */
    height: 100px;
    border: 3px solid #fff; /* White border around avatar */
    margin-bottom: 1rem !important; /* Bootstrap override if needed */
}

.podium-first .player-avatar {
    width: 120px; /* Larger avatar for 1st place */
    height: 120px;
    border-color: gold;
}

.player-name {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.podium-first .player-name {
    font-size: 1.5rem; /* Larger name for 1st place */
    color: gold;
}

.player-score {
    font-size: 1rem;
    margin-bottom: 1rem;
}

/* Ensure links within cards are visible */
.player-card a.btn {
    color: #fff;
    border-color: #fff;
}

.player-card a.btn:hover {
    background-color: #fff;
    color: #333;
}

/* Responsive adjustments if Bootstrap columns aren't enough */
@media (max-width: 767px) {
    .top-players-podium .player-podium-slot {
        margin-bottom: 1.5rem; /* Space between stacked cards */
    }

    .player-card, .podium-first, .podium-second, .podium-third {
        min-height: auto; /* Reset min-height for stacked layout */
    }
}


/* Ensure text in striped table body cells remains white */
.table-striped.text-white tbody tr td,
.table-striped.text-white tbody tr th {
    color: #ffffff; /* Force white text */
}

/* Also ensure the base text color for the table with .text-white is white for non-striped or header/footer if needed */
/* This might be slightly redundant if .text-white is already on the table element but adds specificity */
.table.text-white tbody td,
.table.text-white tbody th,
.table.text-white thead th,
.table.text-white tfoot td,
.table.text-white tfoot th {
    color: #ffffff;
}

/* If the issue is specifically the background of the striped row:
   This rule makes the odd rows slightly more transparent black, good for dark themes.
   If the user's 'dark blue' is from another source, this might not be enough,
   but it standardizes the striping for a dark theme.
*/
.table-striped.text-white tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05); /* Subtle dark stripe */
}
.table-striped.text-white tbody tr:nth-of-type(even) {
    background-color: transparent; /* Or the table's base dark color if set */
}

/* Custom styles for the table in showpronoplayer.php and similar tables */

/* Ensure good contrast for striped rows with white text */
.table-striped.text-white tbody tr:nth-of-type(odd) {
    /* background-color: rgba(255, 255, 255, 0.05); */ /* Example, if needed */
}

/* Ensure good contrast on row hover with white text */
.table-hover.text-white tbody tr:hover {
    background-color: rgb(82, 43, 173);
    color: #fff;
}

/* Override for Bootstrap's table-success to ensure good contrast with white text */
.table.text-white .table-success,
.table.text-white tr.table-success > th,
.table.text-white tr.table-success > td {
    background-color: #0f5132; /* Darker success green */
    border-color: #0a3622;    /* Adjusted darker border */
    color: #ffffff;
}

/* Override for Bootstrap's table-danger to ensure good contrast with white text */
.table.text-white .table-danger,
.table.text-white tr.table-danger > th,
.table.text-white tr.table-danger > td {
    background-color: #e44850; /* Darker success green */
    border-color: #5c1414;    /* Adjusted darker border */
    color: #ffffff;
}


/* Override for Bootstrap's table-info to ensure good contrast with white text */
.table.text-white .table-info,
.table.text-white tr.table-info > th,
.table.text-white tr.table-info > td {
    background-color: #1ec0e0; /* Custom darker cyan/blue */
    border-color: #05505e;
    color: #ffffff;
}

/* Ensure hover on success/info rows maintains readability and indication */
.table-hover.text-white tbody tr.table-success:hover > td,
.table-hover.text-white tbody tr.table-success:hover > th {
    background-color: #082f1c  !important; /* Darker hover for the new success green */
    color: #ffffff;
}

.table-hover.text-white tbody tr.table-info:hover > td,
.table-hover.text-white tbody tr.table-info:hover > th {
    background-color: #076478; /* Slightly darker cyan/blue on hover */
    color: #ffffff;
}

/* Specificity for striped rows that are also success/info */
.table-striped.text-white tbody tr:nth-of-type(odd).table-success > td,
.table-striped.text-white tbody tr:nth-of-type(odd).table-success > th {
    background-color: #0f5132; /* Darker success green */
    color: #ffffff;
}

.table-striped.text-white tbody tr:nth-of-type(odd).table-info > td,
.table-striped.text-white tbody tr:nth-of-type(odd).table-info > th {
    background-color: #087990;
    color: #ffffff;
}

/* Ensure link colors are also visible on these backgrounds */
.table.text-white .table-success a,
.table.text-white .table-info a {
    color: #f0f0f0;
    text-decoration: underline;
}

.table.text-white .table-success a:hover,
.table.text-white .table-info a:hover {
    color: #ffffff;
}


/* Responsive Header Adjustments */
.hero-logo a.bruno {
    font-size: 3rem; /* Default size */
}
.user-info-header .btn-primary { /* Targeting login button */
    padding: 0.5rem 1rem; /* Default for btn-md like size */
    font-size: 1rem;
}

@media (max-width: 767px) {
    .hero-logo a.bruno {
        font-size: 2.2rem; /* Smaller logo text on mobile */
        text-align: center;
    }
    .user-info-header {
        margin-top: 1rem; /* Space when stacked */
    }
    .user-info-header .btn-primary {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem; /* Slightly smaller button */
    }
    .header-main-flex-container { /* Assuming you add this class to the main py-5 div in header */
         padding-top: 1.5rem !important;
         padding-bottom: 1.5rem !important;
    }
}

/* Responsive Home Page (Not Logged In) Adjustments */
.hero-text h2 {
    font-size: 2rem; /* Default */
}
.hero-text .text-hero {
    font-size: 1rem; /* Default */
}
.hero-text .fa-futbol {
    /* fa-3x is already quite large. If it needs to be smaller: */
    /* font-size: 2.5em; */ /* Example */
}
.subs-button-container .btn-lg { /* Target specific subscribe button container */
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
}


@media (max-width: 767px) {
    .hero-text h2 {
        font-size: 1.6rem; /* Smaller for mobile */
        text-align: center;
    }
    .hero-text .text-hero {
        font-size: 0.95rem; /* Smaller for mobile */
        text-align: center;
    }
    .hero-text .fa-futbol {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        /* font-size: 2em; */ /* Smaller icon if needed */
    }
    /* Ensure hero image and text stack well */
    .home-hero-section > div { /* Assuming home-hero-section is the class for the row containing image and text */
        text-align: center;
    }
    .subs-button-container .btn-lg {
         padding: 0.4rem 0.8rem;
         font-size: 1rem;
    }
}


/* Responsive Play Page Adjustments */
.play-page-container h1.info-bonus {
    font-size: 1.75rem; /* Default */
}

.match-row td {
    padding: 0.75rem 0.5rem; /* Adjust padding for table cells */
    vertical-align: middle;
}

.mdate { /* For match date column */
    font-size: 0.9rem;
    /* Consider text wrapping for long dates */
}

.score { /* For team names and scores in table */
    font-size: 0.95rem;
    font-weight: bold;
}

.match-row .btn-primary { /* "Jouer" button */
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
}

.close-game { /* "il n'est plus possible de pronostiquer" text */
    font-size: 0.85rem;
    font-style: italic;
}

.score-input-modal {
    text-align: center;
}

@media (max-width: 767px) {
    .play-page-container h1.info-bonus {
        font-size: 1.4rem;
        text-align: center;
    }
    .mdate {
        font-size: 0.8rem;
    }
    .score {
        font-size: 0.85rem;
    }
    .match-row .btn-primary {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
    .team-name-modal { /* Team names in modal */
         margin-bottom: 0.5rem;
    }
}

@media (max-width: 575px) { /* Extra small screens for modal */
    .modal-body .row > div { /* Make score inputs and team names stack better */
        margin-bottom: 0.5rem;
    }
    .modal-body .row .col-6 { /* Score inputs take more width */
         flex: 0 0 auto;
         width: 48%; /* Slightly less than 50% to account for gutter */
    }
     .team-name-modal {
        font-weight: bold;
    }
}


/* Responsive Rank Page Adjustments */
/* Styles for ranking table on home.php, mimicking showpronoplayer.php table */
.rank-page-container .table {
    border: 1px solid #dee2e6; /* Matches showpronoplayer table-bordered style */
}

.rank-page-container h1 {
    font-size: 2rem; /* Default h1 size */
    margin-bottom: 1rem;
}

.rank-page-container .table thead th {
    /* Style for table headers on rank page if needed */
    /* Example: border-bottom: 2px solid #fff; */
    background-color: #343a40; /* Matches .thead-dark from showpronoplayer */
    color: #fff; /* Matches .thead-dark from showpronoplayer */
    border-color: #454d55; /* Matches .thead-dark from showpronoplayer */
}

.rank-page-container .table tbody td,
.rank-page-container .table tbody th { /* For the rank number */
    vertical-align: middle;
    border: 1px solid #dee2e6; /* Matches showpronoplayer table-bordered style */
}

/* Handling long usernames in the rank table's name column */
.rank-page-container .table td:nth-child(2) { /* Targets the second 'td', which is the username */
    word-break: break-word; /* Allow long words to break and wrap */
    overflow-wrap: break-word; /* Alternative for word breaking */
    /* Consider a max-width if necessary, but table-responsive helps */
    /* max-width: 200px; */ /* Example, adjust as needed if you don't want too much wrapping */
}
.rank-page-container .table td:nth-child(2) a {
    /* Ensure link color is consistent if general link styles interfere */
    color: #f0f0f0; /* Using the light grey from previous link styles */
}
.rank-page-container .table td:nth-child(2) a:hover {
    color: #ffffff;
}

/* Mimic .table-striped and .table-hover from showpronoplayer.php for .rank-page-container table */
.rank-page-container .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05); /* Standard Bootstrap striping for dark tables */
}

.rank-page-container .table-hover tbody tr:hover {
    background-color: rgb(82, 43, 173); /* From existing hover style */
    color: #fff; /* Ensure text remains white on hover */
}


@media (max-width: 767px) {
    .rank-page-container h1 {
        font-size: 1.6rem; /* Smaller h1 for mobile */
        text-align: center;
    }
    .rank-page-container .table {
        font-size: 0.9rem; /* Slightly smaller table text on mobile */
    }
}


/* Responsive ShowPronoPlayer Page Adjustments */
.showpronoplayer-inner-content h1 {
    font-size: 1.8rem; /* Default h1 on this page */
    margin-bottom: 0.75rem;
}

.showpronoplayer-inner-content h4 {
    font-size: 1.2rem; /* Default h4 on this page */
    margin-bottom: 1.5rem;
}

/* Fine-tune table cell content on this specific page if needed */
.showpronoplayer-inner-content .table td,
.showpronoplayer-inner-content .table th {
    font-size: 0.9rem; /* Base font size for table content */
    /* Consider word-break for team names if they can be very long,
       though table-responsive is the main tool here.
       Example:
       word-break: break-word;
    */
}

.-inner-content .table td:nth-child(1), /* Date column */
.showpronoplayer-inner-content .table th:nth-child(1) {
    /* white-space: nowrap; /* Optional: if dates should not wrap */
}


@media (max-width: 767px) {
    .showpronoplayer-inner-content h1 {
        font-size: 1.5rem; /* Smaller h1 for mobile */
        text-align: center;
    }
    .showpronoplayer-inner-content h4 {
        font-size: 1.1rem; /* Smaller h4 for mobile */
        text-align: center;
    }
    .showpronoplayer-inner-content .table {
        font-size: 0.85rem; /* Slightly smaller table text on mobile */
    }
    .showpronoplayer-inner-content .table td,
    .showpronoplayer-inner-content .table th {
        padding: 0.4rem 0.3rem; /* Reduce padding in cells on mobile */
    }
}

@media (max-width: 575px) {
    .showpronoplayer-inner-content .table {
        font-size: 0.75rem; /* Even smaller for very small screens */
    }
     /* On very small screens, you might hide team codes if names are long */
    .showpronoplayer-inner-content .table .team-code-display { /* Add this class to span around team codes if you want to hide them */
        /* display: none; */
    }
}


/* Responsive Auth Page Adjustments (connexion.php, subscribe.php) */
.gradient-custom .card { /* Target cards within the gradient background */
    border: none; /* Remove border if any was added by other styles */
}

.gradient-custom .card-body {
    padding: 2rem; /* Default padding */
}

/* Ensure labels stack above inputs by default due to form-label and block inputs */
.gradient-custom .form-label {
    display: block; /* Or rely on Bootstrap default for form-label */
    text-align: left;
    margin-bottom: 0.5rem;
}

.gradient-custom .btn-md { /* Styles for buttons if changed to btn-md */
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
}

/* Media queries from previous attempt */
@media (max-width: 767px) {
    .gradient-custom .card-body {
        padding: 1.5rem;
    }
}

@media (max-width: 575px) {
    .gradient-custom .card-body {
        padding: 1rem;
    }
    /* If buttons were KEPT as btn-lg in HTML, resize them here */
    .gradient-custom .btn-lg {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    /* If buttons were CHANGED to btn-md in HTML, this styles them for mobile */
    .gradient-custom .btn-md {
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
    }
    .gradient-custom .form-label-lg {
        font-size: 1rem;
    }
    .gradient-custom .form-control-lg {
        font-size: 1rem;
        padding: 0.4rem 0.75rem;
    }
}


/* Responsive Global Stats Page Adjustments */
.global-stats-page-container h1 { /* Main page title */
    font-size: 2rem;
    margin-bottom: 1.5rem;
    /* text-center is already on the h1 in HTML, so no need to repeat here unless overriding */
}

.global-stats-page-container .stats-section h2 { /* Section titles */
    font-size: 1.6rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 0.5rem;
}

.global-stats-page-container .stats-section p,
.global-stats-page-container .stats-section li.list-group-item { /* Paragraphs and list items */
    font-size: 0.95rem;
    line-height: 1.6;
}

.global-stats-page-container .stats-section h4 { /* Sub-headings like in Match Deep Dive */
    font-size: 1.25rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

/* Styling for list-group-items if default Bootstrap needs override for this page's context */
.global-stats-page-container .list-group-item {
    background-color: rgba(255, 255, 255, 0.03) !important; /* Subtle background for list items */
    border-color: rgba(255, 255, 255, 0.08) !important; /* Subtle border */
    /* text-white class is on the li element in global_stats.php, so color: #fff should be inherited. */
}

.global-stats-page-container .list-group-item .badge {
    font-size: 0.85rem; /* Adjust badge font size */
}

/* Additional styling for the small text in Oracle Leaderboard */
.global-stats-page-container #outcome-predictor-leaderboard .list-group-item small {
    font-size: 0.8em; /* Make it relative to the li font size */
    opacity: 0.8;
}


@media (max-width: 767px) {
    .global-stats-page-container h1 {
        font-size: 1.7rem;
    }
    .global-stats-page-container .stats-section h2 {
        font-size: 1.4rem;
    }
    .global-stats-page-container .stats-section p,
    .global-stats-page-container .stats-section li.list-group-item {
        font-size: 0.9rem;
    }
    .global-stats-page-container .stats-section h4 {
        font-size: 1.1rem;
    }
    .global-stats-page-container .list-group-item {
        padding: 0.6rem 0.8rem;
    }
    .global-stats-page-container .list-group-item .badge {
        font-size: 0.8rem;
    }
    /* Adjust flex behavior in list items if they get too cramped */
    .global-stats-page-container .list-group-item.d-flex {
        /* flex-direction: column; */ /* Example: stack content within list items */
        /* align-items: flex-start !important; */
    }
}

@media (max-width: 575px) {
    .global-stats-page-container {
        padding-left: 0.75rem !important; /* Reduce side padding on very small screens */
        padding-right: 0.75rem !important;
    }
    .global-stats-page-container h1 {
        font-size: 1.5rem;
    }
    .global-stats-page-container .stats-section h2 {
        font-size: 1.25rem;
    }
     .global-stats-page-container .stats-section p,
    .global-stats-page-container .stats-section li.list-group-item {
        font-size: 0.85rem;
    }
    .global-stats-page-container .stats-section h4 {
        font-size: 1rem;
    }
}


/* Profile List Page Styles */
.profile-list-page {
    display: flex;
    align-items: center;
  
    /* General page container styles if needed */
}

.profile-list-page .profile-card {
    background-color: rgba(255, 255, 255, 0.08); /* Subtle card background for dark theme */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem; /* Standard Bootstrap card radius */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    height: 100%; /* Make cards in a row take up equal height */
}

.profile-list-page .profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

/* The img tag for avatar has .card-img-top, .img-fluid, .rounded-circle, .mx-auto, .d-block, .mb-2, .mt-3 */
/* It also has inline styles for 100px x 100px and object-fit: cover */
/* No additional general CSS needed for .player-avatar class here unless overriding inline. */

.profile-list-page .profile-card .card-body { /* Bootstrap's card-body class */
    /* text-center was added in HTML to this div */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows card body to take available space */
}

.profile-list-page .profile-card .card-title { /* This is the h5 for username */
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
    color: #fff; /* Ensure white color inherited correctly */
}

.profile-list-page .profile-card .card-text {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: #f0f0f0; /* Lighter text for stats */
    flex-grow: 1; /* Push button to bottom if this is the last text element before button */
}

.profile-list-page .profile-card .card-text strong {
    font-weight: 600;
    color: #ffffff; /* Make strong parts white */
}

.profile-list-page .profile-card .edit-avatar-btn {
    /* The button has .btn .btn-dark. Inline styles were reported for positioning. */
    /* If we want to ensure it's at the bottom: */
    margin-top: auto; /* Pushes button to the bottom of the card-body flex column */
    /* Making it a bit smaller to fit cards better */
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

/* Responsive adjustments for profile cards */
@media (max-width: 575px) { /* Extra small screens */
    .profile-list-page .profile-card .card-title {
        font-size: 1rem;
    }
    .profile-list-page .profile-card .card-text {
        font-size: 0.85rem;
    }
    /* Avatar has inline 100px. To override for XS: */
    .profile-list-page .profile-card img.card-img-top { /* More specific selector for the avatar */
        width: 80px !important;
        height: 80px !important;
    }
}


/* Global Layout: Sidebar (lateralnav) and Main Content Area */

.page-wrapper.container-fluid {
    /* This is the top-level wrapper for sidebar + content.
       No specific styles needed here unless to clear a fixed header.
       Example if header.php creates a 60px fixed top banner:
       padding-top: 60px;
    */
}

.lateralnav { /* This is the main sidebar column, which has Bootstrap's sticky-top */
    background-color: #002148; /* Base background for the nav */
    color: rgba(123, 180, 246, 1); /* Default text color for items if not overridden by links */
    /* vh-100, overflow-auto are from Bootstrap classes applied in lateralNavbar.php */
    /* sticky-top from Bootstrap provides: position: sticky, top: 0, z-index: 1020 */
    /* We might want a slightly higher z-index if other elements interfere */
    /*z-index: 1025;
    /* If there's a fixed top header (e.g., 60px high) from header.php,
       the 'top' value for sticky-top needs to account for it.
       This can be done by adding a class to body/page-wrapper when fixed header is active,
       or by ensuring the .row containing sidebar+main is offset.
       For now, assuming top:0 from sticky-top is fine (no fixed header above this row).
       If header.php's top banner IS fixed/sticky, this needs adjustment:
       top: 60px; /* Assuming 60px header height */
       /*height: calc(100vh); /* Adjust height if top is offset */
    
}

.lateralnav a {
   color: rgb(239, 239, 240);
}

.main-content-area { /* This is the <main class="col ... main-content-area"> */
    height: 100vh; /* Make it full viewport height */
    overflow-y: auto; /* Allow its own content to scroll vertically */
    /*margin-left: var(--navbar-width-current); /* Added this line */
    /* If there's a fixed top header (e.g., 60px high) from header.php:
       height: calc(100vh - 60px);
    */
    /* Padding (like ps-md-2 pt-2) is applied directly on the <main> tag in HTML templates */
}

/* Ensure that on small screens where navbar might stack or hide,
   the main content area takes full width properly.
   Bootstrap's `col` class in a row should handle this automatically
   if the navbar column hides or becomes col-12.
*/
@media (max-width: 575.98px) { /* Corresponds to Bootstrap's sm breakpoint, where col-auto is used for navbar */
    .main-content-area {
        /* If navbar is col-auto (icon width) and visible, main content should still flow beside it.
           If navbar was to stack on top (col-12), then main content would be col-12 too.
           The flex-nowrap on parent row prevents stacking of columns.
           The ps-md-2 on main content provides left space from navbar on md+ screens.
           On smaller screens, if navbar is col-auto, main-content (as .col) will take rest.
           No specific margin override needed here unless navbar behavior changes.
        */
    }
    .lateralnav.col-auto {
        /* Minimal styles for when it's icon-only */
        display: flex; /* Ensure it's a flex container to center its child */
        justify-content: center; /* Center the inner .d-flex.flex-column */
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}


/* Explicit width control for the lateral navbar column */
.lateral-navbar-column {
    flex-shrink: 0; /* Prevent shrinking in flex context */
    width: var(--navbar-width-current); /* Set width using the current variable */
    /* Bootstrap's col-* classes also set flex-basis and max-width.
       This width might override or work with them.
       Explicitly setting flex-basis might be good too.
    */
    flex-basis: var(--navbar-width-current);
}

/* Update --navbar-width-current based on breakpoints */
/* XS is already default in :root for --navbar-width-current */
/* No specific media query needed for XS unless to override the :root default */

/* SM Breakpoint (Bootstrap: >= 576px) */
@media (min-width: 576px) {
    :root {
        --navbar-width-current: var(--navbar-width-sm);
    }
}

/* MD Breakpoint (Bootstrap: >= 768px) */
@media (min-width: 768px) {
    :root {
        --navbar-width-current: var(--navbar-width-md);
    }
}

/* LG Breakpoint (Bootstrap: >= 992px) */
@media (min-width: 992px) {
    :root {
        --navbar-width-current: var(--navbar-width-lg);
    }
}

/* XL & XXL Breakpoints (Bootstrap: >= 1200px, >=1400px) */
/* It will continue to use --navbar-width-lg unless overridden for xl/xxl specifically */
/* The col-lg-2 class on navbar should handle its max width within Bootstrap's grid. */
/* This CSS primarily ensures the variable --navbar-width-current is correctly set. */

/* Auth Page Background */
.gradient-custom {
    background: linear-gradient(to bottom right, #020730, #001f3f) !important; /* Subtle dark blue gradient */
    /* Ensure it still allows content centering via Bootstrap flex utilities */
}

/* Auth Page Enhancements */
.auth-card {
    background-color: #003366 !important; /* Lighter shade of blue */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    padding: 3rem !important;
    border-radius: 0.5rem; /* Optional: for rounded corners */
}

.auth-card .form-label {
    color: #ffffff !important; /* Ensure good contrast */
    /* font-size: 1.1rem; /* Optional: Adjust if needed */
}

.auth-card .form-control {
    background-color: #f8f9fa !important; /* Light grey background */
    color: #212529 !important; /* Dark text color */
    border: 1px solid #7BB4F6 !important;
}

.auth-card .form-control:focus {
    border-color: #A8EE87 !important; /* Brighter border on focus (green from palette) */
    box-shadow: 0 0 0 0.2rem rgba(168, 238, 135, 0.35) !important;
    background-color: #ffffff !important; /* Whiter background on focus */
}

.auth-card .btn-primary { /* Assuming submit buttons are btn-primary */
    background-color: #7BB4F6 !important;
    color: #ffffff !important;
    border-color: #6caddf !important; /* Slightly darker border for the button */
    padding: 0.75rem 1.25rem !important; /* Make button a bit larger */
    font-size: 1.1rem !important;
}

.auth-card .btn-primary:hover {
    background-color: #A8EE87 !important; /* Green from palette for hover */
    border-color: #98d877 !important; /* Darker green for hover border */
    color: #ffffff !important; /* White text on hover for better vibrancy */
}

/* Styling for links like "Pas encore inscrit ?" */
.auth-card .linktocreate,
.auth-card .linktoconnexion { /* Added a hypothetical class for "Already have an account?" link */
    color: #f0f0f0 !important; /* Light color for better visibility on dark card */
    font-size: 0.95rem;
}

.auth-card .linktocreate:hover,
.auth-card .linktoconnexion:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* Responsive adjustments for auth-card padding */
@media (max-width: 767px) {
    .auth-card {
        padding: 2rem !important; /* Reduce padding on medium devices */
    }
}

@media (max-width: 575px) {
    .auth-card {
        padding: 1.5rem !important; /* Further reduce padding on small devices */
    }
    .auth-card .form-label {
        font-size: 0.9rem; /* Slightly smaller labels on very small screens */
    }
    .auth-card .form-control {
        font-size: 0.9rem; /* Slightly smaller inputs on very small screens */
    }
    .auth-card .btn-primary {
        padding: 0.6rem 1rem !important;
        font-size: 1rem !important;
    }
}

/* Carte de match principale */
.match-card {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.95) 0%, rgba(20, 20, 40, 0.95) 100%);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.match-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.match-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(102, 126, 234, 0.3);
}

.match-card:hover::before {
    opacity: 1;
}

.match-card.saved {
    border-color: rgba(16, 185, 129, 0.4);
}

.match-card.saved::before {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    opacity: 1;
}

.match-card.archived {
    opacity: 0.6;
    border-color: rgba(107, 114, 128, 0.3);
}

.match-card.archived::before {
    background: linear-gradient(90deg, #6b7280 0%, #9ca3af 100%);
    opacity: 0.5;
}

/* Header de la carte */
.match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.match-date {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 500;
}

.match-badge {
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    letter-spacing: 0.3px;
}

.badge-upcoming {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.badge-live {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    color: white;
    animation: pulse 2s infinite;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.badge-finished {
    background: rgba(107, 114, 128, 0.3);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(107, 114, 128, 0.4);
}

.badge-locked {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: rgba(20, 20, 40, 1);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.badge.bg-info {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Contenu principal */
.match-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    padding: 0.5rem;
    border-radius: 8px;
}

.team:hover {
    background: rgba(102, 126, 234, 0.1);
    transform: scale(1.05);
}

.team-flag {
    width: 40px !important;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.team:hover .team-flag {
    transform: scale(1.1);
}

.team-name {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}

/* Inputs de score */
.score-inputs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

.score-inputs small {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    text-align: center;
    display: block;
    width: 100%;
}

/* Force l'alignement horizontal des inputs */
.score-input,
.score-separator {
    display: inline-block !important;
}

.score-team1,
.score-separator,
.score-team2 {
    float: none !important;
    vertical-align: middle;
}

.score-input {
    width: 60px;
    height: 60px;
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    transition: all 0.3s ease;
    /* Masquer les flèches de number input */
    -moz-appearance: textfield;
}

/* Masquer les spinners pour Chrome, Safari, Edge */
.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.score-input:focus {
    outline: none;
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    transform: scale(1.05);
}

.score-input:disabled {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

.score-separator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.75rem;
    font-weight: 700;
}

/* Champs d'élimination */
.elimination-fields {
    background: rgba(102, 126, 234, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem;
}

.elimination-fields .form-label {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.elimination-fields .form-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 8px;
    padding: 0.5rem;
    transition: all 0.3s ease;
}

.elimination-fields .form-select:focus {
    background: rgba(102, 126, 234, 0.1);
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.elimination-fields .form-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.elimination-fields .form-check-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.elimination-fields .form-check-input {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}

.elimination-fields .form-check-input:checked {
    background-color: #667eea;
    border-color: #667eea;
}

.elimination-fields .form-check-input:disabled {
    opacity: 0.5;
}

/* Footer de la carte */
.match-footer {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.save-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.save-status.show {
    opacity: 1;
}

.save-status.success {
    color: #10b981;
}

.save-status.success .status-icon::before {
    content: '✓';
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #10b981;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    color: white;
    font-weight: bold;
}

.save-status.error {
    color: #ef4444;
}

.save-status.error .status-icon::before {
    content: '✗';
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #ef4444;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    color: white;
    font-weight: bold;
}

.save-status.saving {
    color: #667eea;
}

.points-display {
    color: #fbbf24;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.locked-message {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
    font-size: 0.9rem;
    text-align: center;
    font-style: italic;
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: 1rem;
}

/* Spinner de chargement */
.spinner {
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top: 2px solid #667eea;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .match-card {
        padding: 1rem;
    }

    .match-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .team-name {
        font-size: 0.9rem;
    }

    .team-flag {
        width: 32px !important;
        height: 24px;
    }
    
    .score-inputs {
        order: 2;
        margin: 1rem 0;
    }

    .score-input {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .score-separator {
        font-size: 1.5rem;
    }

    .elimination-fields {
        padding: 0.75rem;
    }

    .elimination-fields .col-auto {
        width: 100%;
    }

    .match-footer {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}
.score-wrapper {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
}

.ranking-container {
    max-width: 1200px;
    margin: 0 auto;
}

.ranking-card {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.95) 0%, rgba(20, 20, 40, 0.95) 100%);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ranking-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ranking-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(102, 126, 234, 0.3);
}

.ranking-card:hover::before {
    opacity: 1;
}

.ranking-card.top-1 {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(30, 30, 50, 0.95) 100%);
    border-color: rgba(255, 215, 0, 0.4);
}

.ranking-card.top-1::before {
    background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
    opacity: 1;
}

.ranking-card.top-2 {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.12) 0%, rgba(30, 30, 50, 0.95) 100%);
    border-color: rgba(192, 192, 192, 0.3);
}

.ranking-card.top-2::before {
    background: linear-gradient(90deg, #C0C0C0 0%, #A8A8A8 100%);
    opacity: 1;
}

.ranking-card.top-3 {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.12) 0%, rgba(30, 30, 50, 0.95) 100%);
    border-color: rgba(205, 127, 50, 0.3);
}

.ranking-card.top-3::before {
    background: linear-gradient(90deg, #CD7F32 0%, #B8732D 100%);
    opacity: 1;
}

.ranking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ranking-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.rank-number {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    min-width: 60px;
    text-align: center;
}

.top-1 .rank-number {
    color: #FFD700;
    font-size: 2.5rem;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.top-2 .rank-number {
    color: #C0C0C0;
    font-size: 2.2rem;
}

.top-3 .rank-number {
    color: #CD7F32;
    font-size: 2.2rem;
}

.player-info {
    flex: 1;
}

.player-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
    text-decoration: none;
    display: inline-block;
    transition: color 0.3s ease;
}

.player-name:hover {
    color: #667eea;
}

.top-1 .player-name {
    color: #FFD700;
}

.top-2 .player-name {
    color: #C0C0C0;
}

.top-3 .player-name {
    color: #CD7F32;
}

.total-points {
    font-size: 2rem;
    font-weight: 700;
    color: #667eea;
    text-align: right;
}

.top-1 .total-points {
    color: #FFD700;
}

.top-2 .total-points {
    color: #C0C0C0;
}

.top-3 .total-points {
    color: #CD7F32;
}

.points-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ranking-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
    text-align: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.stat-item:hover {
    background: rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    display: block;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.medal-icon {
    font-size: 2.5rem;
    margin-right: 0.5rem;
}

@media (max-width: 768px) {
    .ranking-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .ranking-left {
        width: 100%;
    }

    .total-points {
        text-align: left;
    }

    .ranking-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .rank-number {
        min-width: 40px;
        font-size: 1.5rem;
    }
}

.ranking-section {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding: 0 1rem;
}

.ranking-compact-card {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.95) 0%, rgba(20, 20, 40, 0.95) 100%);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.ranking-compact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ranking-compact-card:hover {
    transform: translateX(4px);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ranking-compact-card:hover::before {
    opacity: 1;
}

.ranking-compact-card.top-1 {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(30, 30, 50, 0.95) 100%);
    border-color: rgba(255, 215, 0, 0.4);
}

.ranking-compact-card.top-1::before {
    background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
    opacity: 1;
}

.ranking-compact-card.top-2 {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.12) 0%, rgba(30, 30, 50, 0.95) 100%);
    border-color: rgba(192, 192, 192, 0.3);
}

.ranking-compact-card.top-2::before {
    background: linear-gradient(90deg, #C0C0C0 0%, #A8A8A8 100%);
    opacity: 1;
}

.ranking-compact-card.top-3 {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.12) 0%, rgba(30, 30, 50, 0.95) 100%);
    border-color: rgba(205, 127, 50, 0.3);
}

.ranking-compact-card.top-3::before {
    background: linear-gradient(90deg, #CD7F32 0%, #B8732D 100%);
    opacity: 1;
}

.rank-left-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.rank-position {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    min-width: 45px;
    text-align: center;
}

.top-1 .rank-position {
    color: #FFD700;
    font-size: 1.8rem;
}

.top-2 .rank-position {
    color: #C0C0C0;
    font-size: 1.6rem;
}

.top-3 .rank-position {
    color: #CD7F32;
    font-size: 1.6rem;
}

.rank-player-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.rank-player-name:hover {
    color: #667eea;
}

.top-1 .rank-player-name {
    color: #FFD700;
}

.top-2 .rank-player-name {
    color: #C0C0C0;
}

.top-3 .rank-player-name {
    color: #CD7F32;
}

.rank-score {
    font-size: 1.5rem;
    font-weight: 700;
    color: #667eea;
    min-width: 80px;
    text-align: right;
}

.top-1 .rank-score {
    color: #FFD700;
}

.top-2 .rank-score {
    color: #C0C0C0;
}

.top-3 .rank-score {
    color: #CD7F32;
}

.ranking-header-section {
    margin-bottom: 1.5rem;
    text-align: center;
}

.ranking-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.ranking-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
}

@media (max-width: 768px) {
    .rank-position {
        min-width: 35px;
        font-size: 1.2rem;
    }
    
    .rank-player-name {
        font-size: 1rem;
    }
    
    .rank-score {
        font-size: 1.2rem;
        min-width: 60px;
    }
    
    .ranking-compact-card {
        padding: 0.75rem 1rem;
    }
}
.player-profile-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.player-name-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.player-total-score {
    font-size: 2.5rem;
    font-weight: 700;
    color: #667eea;
}

.score-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.prediction-card {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.95) 0%, rgba(20, 20, 40, 0.95) 100%);
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.prediction-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.prediction-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    border-color: rgba(102, 126, 234, 0.3);
}

.prediction-card:hover::before {
    opacity: 1;
}

.prediction-card.result-perfect {
    border-color: rgba(76, 175, 80, 0.4);
}

.prediction-card.result-perfect::before {
    background: linear-gradient(90deg, #4CAF50 0%, #66BB6A 100%);
    opacity: 1;
}

.prediction-card.result-good {
    border-color: rgba(255, 193, 7, 0.4);
}

.prediction-card.result-good::before {
    background: linear-gradient(90deg, #FFC107 0%, #FFD54F 100%);
    opacity: 1;
}

.prediction-card.result-ok {
    border-color: rgba(33, 150, 243, 0.4);
}

.prediction-card.result-ok::before {
    background: linear-gradient(90deg, #2196F3 0%, #42A5F5 100%);
    opacity: 1;
}

.prediction-card.result-failed {
    border-color: rgba(244, 67, 54, 0.4);
}

.prediction-card.result-failed::before {
    background: linear-gradient(90deg, #F44336 0%, #EF5350 100%);
    opacity: 1;
}

.match-date-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    background: rgba(102, 126, 234, 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

.match-teams-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.team-info {
    flex: 1;
    text-align: center;
}

.team-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
}

.team-code {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.score-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.score-display {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem 1.5rem;
    border-radius: 10px;
    min-width: 100px;
    text-align: center;
}

.score-type-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vs-separator {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 700;
}

.prediction-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.points-earned {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.points-earned.perfect {
    color: #4CAF50;
}

.points-earned.good {
    color: #FFC107;
}

.points-earned.ok {
    color: #2196F3;
}

.points-earned.failed {
    color: #F44336;
}

.no-prediction-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.no-prediction-text {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 1rem;
    font-style: italic;
}

.edit-button {
    padding: 0.4rem 1rem;
    background: rgba(255, 193, 7, 0.2);
    color: #FFC107;
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.edit-button:hover {
    background: rgba(255, 193, 7, 0.3);
    color: #FFD54F;
    transform: translateY(-1px);
}

.play-button {
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
    color: white;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.play-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
    color: white;
}

@media (max-width: 768px) {
    .match-teams-section {
        flex-direction: column;
    }
    
    .score-display {
        font-size: 1.5rem;
        padding: 0.4rem 1rem;
    }
    
    .player-name-title {
        font-size: 1.5rem;
    }
    
    .player-total-score {
        font-size: 2rem;
    }
}

.player-profile-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.player-name-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.player-total-score {
    font-size: 2.5rem;
    font-weight: 700;
    color: #667eea;
}

.score-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.prediction-card {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.95) 0%, rgba(20, 20, 40, 0.95) 100%);
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.prediction-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.prediction-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    border-color: rgba(102, 126, 234, 0.3);
}

.prediction-card:hover::before {
    opacity: 1;
}

.prediction-card.result-perfect {
    border-color: rgba(76, 175, 80, 0.4);
}

.prediction-card.result-perfect::before {
    background: linear-gradient(90deg, #4CAF50 0%, #66BB6A 100%);
    opacity: 1;
}

.prediction-card.result-good {
    border-color: rgba(255, 193, 7, 0.4);
}

.prediction-card.result-good::before {
    background: linear-gradient(90deg, #FFC107 0%, #FFD54F 100%);
    opacity: 1;
}

.prediction-card.result-ok {
    border-color: rgba(33, 150, 243, 0.4);
}

.prediction-card.result-ok::before {
    background: linear-gradient(90deg, #2196F3 0%, #42A5F5 100%);
    opacity: 1;
}

.prediction-card.result-failed {
    border-color: rgba(244, 67, 54, 0.4);
}

.prediction-card.result-failed::before {
    background: linear-gradient(90deg, #F44336 0%, #EF5350 100%);
    opacity: 1;
}

.match-date-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    background: rgba(102, 126, 234, 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

.match-teams-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.team-info {
    flex: 1;
    text-align: center;
}

.team-flag {
    width: 40px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.team-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
}

.team-code {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.score-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.score-display {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem 1.5rem;
    border-radius: 10px;
    min-width: 100px;
    text-align: center;
}

.score-type-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vs-separator {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 700;
}

.prediction-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.points-earned {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.points-earned.perfect {
    color: #4CAF50;
}

.points-earned.good {
    color: #FFC107;
}

.points-earned.ok {
    color: #2196F3;
}

.points-earned.failed {
    color: #F44336;
}

.no-prediction-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.no-prediction-text {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 1rem;
    font-style: italic;
}

.edit-button {
    padding: 0.4rem 1rem;
    background: rgba(255, 193, 7, 0.2);
    color: #FFC107;
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.edit-button:hover {
    background: rgba(255, 193, 7, 0.3);
    color: #FFD54F;
    transform: translateY(-1px);
}

.play-button {
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
    color: white;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.play-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
    color: white;
}

@media (max-width: 768px) {
    .match-teams-section {
        flex-direction: column;
    }
    
    .score-display {
        font-size: 1.5rem;
        padding: 0.4rem 1rem;
    }
    
    .player-name-title {
        font-size: 1.5rem;
    }
    
    .player-total-score {
        font-size: 2rem;
    }
}


        .logo-peps-container {
            display: flex;
            align-items: left;
            gap: 15px;
        }
        .logo-peps-svg {
            width: 500px;
            height: auto;
            transition: transform 0.3s ease;
        }
        .logo-peps-svg:hover {
            transform: scale(1.05);
        }
        @media (max-width: 768px) {
            .logo-peps-svg {
                width: 150px;
            }
        }
/* === CHAT WIDGET === */
#chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  max-width: 400px;
}

/* Bouton toggle */
#chat-toggle {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

#chat-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

#chat-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6c757d;
  animation: pulse 2s infinite;
}

#chat-indicator.online {
  background: #28a745;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Container du chat */
.chat-container {
  display: none;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  overflow: hidden;
  margin-top: 12px;
  width: 380px;
  max-height: 500px;
  display: flex;
  flex-direction: column;
}

.chat-container.active {
  display: flex;
}

/* En-tête du chat */
.chat-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-close-chat {
  background: transparent;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.btn-close-chat:hover {
  background: rgba(255,255,255,0.2);
}

/* Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 15px;
  background: #f8f9fa;
  max-height: 350px;  
  display: inline-block;
  background: white;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  white-space: normal !important ;
  max-width: 100%;
  overflow-x: hidden;
  overflow-wrap:  anywhere !important;
  word-break: break-word !important;
}

.chat-message {
  margin-bottom: 12px;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-message-header {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 4px;
  font-weight: 500;
}

.chat-message-content {
  display: inline-block;
  background: white;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  white-space: normal !important ;
  max-width: 100%;
  overflow-x: hidden;
  overflow-wrap:  anywhere !important;
  word-break: break-word !important;
}

.chat-message.own .chat-message-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  margin-left: auto;
  max-width: 50%;
}

.chat-message.other .chat-message-content {
  background: white;
  max-width: 50%;
}

/* Formulaire */
.chat-form {
  display: flex;
  padding: 12px;
  background: white;
  border-top: 1px solid #e9ecef;
  gap: 8px;
}

.chat-form input {
  flex: 1;
  border: 1px solid #dee2e6;
  border-radius: 20px;
  padding: 10px 15px;
  font-size: 14px;
}

.chat-form input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.chat-form button {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
}

/* Status */
.chat-status {
  font-size: 12px;
  color: #6c757d;
  padding: 8px 12px;
  text-align: center;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
}

/* Message de chargement */
.chat-loading {
  background: white;
  color: #6c757d;
  padding: 15px;
  margin-top: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
  #chat-widget {
    right: 10px;
    bottom: 10px;
    left: 10px;
    max-width: none;
  }
  
  .chat-container {
    width: 100%;
  }
  
  #chat-toggle {
    width: 100%;
    justify-content: center;
  }
}

/* Scrollbar personnalisée */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: #555;
}

------ profil page 
.profile-header-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border-radius: 20px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.profile-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.avatar-container {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 1.5rem;
}

.profile-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.avatar-container:hover .profile-avatar {
    transform: scale(1.05);
    border-color: rgba(102, 126, 234, 0.6);
}

.edit-avatar-overlay {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid rgba(30, 30, 50, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.edit-avatar-overlay:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
}

.edit-avatar-overlay i {
    color: white;
    font-size: 1rem;
}

.profile-username {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 1.5rem;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
}

.stat-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.stat-card:hover {
    background: rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #667eea;
    display: block;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-card {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.95) 0%, rgba(20, 20, 40, 0.95) 100%);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
}

.settings-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-group-modern {
    margin-bottom: 1.5rem;
}

.form-label-modern {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.95rem;
}

.form-input-modern {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input-modern:focus {
    outline: none;
    border-color: #667eea;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.switch-container {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.switch-container:hover {
    background: rgba(255, 255, 255, 0.05);
}

.form-check-input {
    width: 3rem;
    height: 1.5rem;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #667eea;
    border-color: #667eea;
}

.form-check-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    margin-left: 0.5rem;
}

.btn-save-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
    cursor: pointer;
}

.btn-save-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.modal-content {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.98) 0%, rgba(20, 20, 40, 0.98) 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
}

.modal-title {
    color: #fff !important;
    font-size: 1.3rem;
    font-weight: 700;
}

.modal-body {
    color: #fff;
    padding: 2rem;
}

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
}

.form-label {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.modal .form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #fff;
    padding: 0.75rem;
    transition: all 0.3s ease;
}

.modal .form-control:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    color: #fff;
}

.modal .form-control::file-selector-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 1rem;
    transition: all 0.3s ease;
}

.modal .form-control::file-selector-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.form-text {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.85rem;
}

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.6rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.modal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.modal .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 0.6rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.modal .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}

.modal-backdrop {
    backdrop-filter: blur(4px);
}

@media (max-width: 768px) {
    .profile-header-card {
        padding: 1.5rem;
    }
    
    .avatar-container,
    .profile-avatar {
        width: 120px;
        height: 120px;
    }
    
    .profile-username {
        font-size: 1.5rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
}

.login-page {
 /*   min-height: 100vh;
    background: linear-gradient(135deg, rgba(20, 20, 40, 1) 0%, rgba(30, 30, 50, 1) 50%, rgba(40, 40, 60, 1) 100%);
    position: relative;
    overflow: hidden;*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* Effet de particules en arrière-plan */
.login-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.15) 0%, transparent 50%);
    animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.login-container {
    position: relative;
    z-index: 1;
    width: 50%;
    max-width: 480px;
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-card {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.95) 0%, rgba(20, 20, 40, 0.95) 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.login-header {
 
    text-align: center;
    margin-bottom: 2.5rem;
}

.login-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    display: inline-block;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.login-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.login-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
}

.form-group-modern {
    margin-bottom: 1.5rem;
}

.form-label-login {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    text-align: left;
}

.input-group-modern {
    position: relative;
    display: flex;
    align-items: stretch;
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.1rem;
    z-index: 2;
    pointer-events: none;
}

.form-input-login {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input-login::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-input-login:focus {
    outline: none;
    border-color: #667eea;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.btn-login {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
}

.btn-login::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-login:hover::before {
    width: 300px;
    height: 300px;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.btn-login:active {
    transform: translateY(0);
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 2rem 0;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.divider span {
    padding: 0 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.signup-link {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.signup-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin-bottom: 0;
}

.signup-text a {
    color: #667eea;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.signup-text a:hover {
    color: #764ba2;
    text-decoration: underline;
}

.alert-modern {
    background: rgba(244, 67, 54, 0.15);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: #ff6b6b;
    font-size: 0.95rem;
    text-align: center;
}

/* Responsive */
@media (max-width: 576px) {
    .login-card {
        padding: 2rem 1.5rem;
    }
    
    .login-title {
        font-size: 1.6rem;
    }
    
    .login-icon {
        font-size: 2.5rem;
    }
}

.signup-page {
   /* min-height: 100vh;
    background: linear-gradient(135deg, rgba(20, 20, 40, 1) 0%, rgba(30, 30, 50, 1) 50%, rgba(40, 40, 60, 1) 100%);
    position: relative;
    overflow: hidden;*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* Effet de particules en arrière-plan */
.signup-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.15) 0%, transparent 50%);
    animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.signup-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.signup-card {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.95) 0%, rgba(20, 20, 40, 0.95) 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.signup-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.signup-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.signup-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    display: inline-block;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.signup-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.signup-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
}

.form-group-modern {
    margin-bottom: 1.5rem;
}

.form-label-signup {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    text-align: left;
}

.input-group-modern {
    position: relative;
    display: flex;
    align-items: stretch;
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.1rem;
    z-index: 2;
    pointer-events: none;
}

.form-input-signup {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input-signup::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-input-signup:focus {
    outline: none;
    border-color: #667eea;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.btn-signup {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
}

.btn-signup::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-signup:hover::before {
    width: 300px;
    height: 300px;
}

.btn-signup:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.btn-signup:active {
    transform: translateY(0);
}

.login-link {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.login-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin-bottom: 0;
}

.login-text a {
    color: #667eea;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.login-text a:hover {
    color: #764ba2;
    text-decoration: underline;
}

.alert-modern {
    background: rgba(244, 67, 54, 0.15);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: #ff6b6b;
    font-size: 0.95rem;
    text-align: center;
}

.password-requirements {
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1.5rem;
    text-align: left;
}

.password-requirements-title {
    color: #667eea;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.password-requirements ul {
    margin: 0;
    padding-left: 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    line-height: 1.8;
}

/* Responsive */
@media (max-width: 576px) {
    .signup-card {
        padding: 2rem 1.5rem;
    }
    
    .signup-title {
        font-size: 1.6rem;
    }
    
    .signup-icon {
        font-size: 2.5rem;
    }
}


---page home 
.ranking-section {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding: 0 1rem;
}

.ranking-compact-card {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.95) 0%, rgba(20, 20, 40, 0.95) 100%);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.ranking-compact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ranking-compact-card:hover {
    transform: translateX(4px);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ranking-compact-card:hover::before {
    opacity: 1;
}

.ranking-compact-card.top-1 {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(30, 30, 50, 0.95) 100%);
    border-color: rgba(255, 215, 0, 0.4);
}

.ranking-compact-card.top-1::before {
    background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
    opacity: 1;
}

.ranking-compact-card.top-2 {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.12) 0%, rgba(30, 30, 50, 0.95) 100%);
    border-color: rgba(192, 192, 192, 0.3);
}

.ranking-compact-card.top-2::before {
    background: linear-gradient(90deg, #C0C0C0 0%, #A8A8A8 100%);
    opacity: 1;
}

.ranking-compact-card.top-3 {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.12) 0%, rgba(30, 30, 50, 0.95) 100%);
    border-color: rgba(205, 127, 50, 0.3);
}

.ranking-compact-card.top-3::before {
    background: linear-gradient(90deg, #CD7F32 0%, #B8732D 100%);
    opacity: 1;
}

.rank-left-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.rank-position {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    min-width: 45px;
    text-align: center;
}

.top-1 .rank-position {
    color: #FFD700;
    font-size: 1.8rem;
}

.top-2 .rank-position {
    color: #C0C0C0;
    font-size: 1.6rem;
}

.top-3 .rank-position {
    color: #CD7F32;
    font-size: 1.6rem;
}

.rank-player-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.rank-player-name:hover {
    color: #667eea;
}

.top-1 .rank-player-name {
    color: #FFD700;
}

.top-2 .rank-player-name {
    color: #C0C0C0;
}

.top-3 .rank-player-name {
    color: #CD7F32;
}

.rank-score {
    font-size: 1.5rem;
    font-weight: 700;
    color: #667eea;
    min-width: 80px;
    text-align: right;
}

.top-1 .rank-score {
    color: #FFD700;
}

.top-2 .rank-score {
    color: #C0C0C0;
}

.top-3 .rank-score {
    color: #CD7F32;
}

.ranking-header-section {
    margin-bottom: 1.5rem;
    text-align: center;
}

.ranking-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.ranking-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
}

/* Styles pour les accordéons de poules */
.groups-section {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1rem;
}

.groups-header {
    text-align: center;
    margin-bottom: 2rem;
}

.groups-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.groups-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
}

.accordion-item {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.95) 0%, rgba(20, 20, 40, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px !important;
    margin-bottom: 1rem;
    overflow: hidden;
}

.accordion-button {
    background: rgba(102, 126, 234, 0.1);
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    border: none;
    padding: 1.25rem 1.5rem;
}
.accordion-button::after {
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg ... chevron ... %3C/svg%3E");
    transition: transform 0.2s ease-in-out;
}

.accordion-button.collapsed::after {
    transform: rotate(0deg);
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    color: #667eea;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border: none;
}

.accordion-button::after {
    filter: brightness(0) invert(1);
}

.accordion-body {
    background: rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
}

.table-groups {
    background: transparent;
    color: #fff;
    margin-bottom: 0;
}

.table-groups thead {
    background: rgba(102, 126, 234, 0.15);
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
}

.table-groups th {
    color: #667eea;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding: 0.75rem;
    border: none;
}

.table-groups td {
    color: rgba(255, 255, 255, 0.9);
    padding: 0.75rem;
    border-color: rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.table-groups tbody tr {
    transition: all 0.3s ease;
}

.table-groups tbody tr:hover {
    background: rgba(102, 126, 234, 0.1);
}

.team-flag {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 3px;
    margin-right: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.team-name-cell {
    display: flex;
    align-items: center;
    font-weight: 500;
}

@media (max-width: 768px) {
    .rank-position {
        min-width: 35px;
        font-size: 1.2rem;
    }
    
    .rank-player-name {
        font-size: 1rem;
    }
    
    .rank-score {
        font-size: 1.2rem;
        min-width: 60px;
    }
    
    .ranking-compact-card {
        padding: 0.75rem 1rem;
    }
    
    .table-groups {
        font-size: 0.85rem;
    }
}

---fin page home
---debut page compare_predicted.php 

.section-title {
            color: #fff;
            font-size: 1.8rem;
            margin: 30px 0 15px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .match-card {
            background: linear-gradient(135deg, rgba(30, 30, 50, 0.95) 0%, rgba(20, 20, 40, 0.95) 100%);
            border-radius: 14px;
            margin-bottom: 1rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            overflow: hidden;
            transition: all 0.3s ease;
            position: relative;
        }

        .match-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .match-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
            border-color: rgba(102, 126, 234, 0.3);
        }

        .match-card:hover::before {
            opacity: 1;
        }

        .match-header {
            display: flex;
            align-items: center;
            padding: 1.25rem;
            background: rgba(102, 126, 234, 0.1);
            cursor: pointer;
            user-select: none;
            gap: 15px;
            transition: all 0.3s ease;
        }

        .match-header:hover {
            background: rgba(102, 126, 234, 0.15);
        }

        .team-logos {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .team-logo {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border-radius: 50%;
            border: 2px solid white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .match-info {
            flex: 1;
        }

        .match-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 4px;
        }

        .match-date {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.6);
        }

        .match-phase {
            display: inline-block;
            padding: 0.4rem 0.8rem;
            background: rgba(102, 126, 234, 0.3);
            color: #fff;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .toggle-icon {
            font-size: 1.2rem;
            color: #667eea;
            transition: transform 0.3s;
            margin-left: auto;
        }

        .match-card.open .toggle-icon {
            transform: rotate(180deg);
        }

        .match-body {
            display: none;
            padding: 1.5rem;
            background: rgba(0, 0, 0, 0.2);
            position: relative;
        }

        .match-body.open {
            display: block;
        }

        .match-body.locked::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(30, 30, 50, 0.92);
            backdrop-filter: blur(4px);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0 0 14px 14px;
        }

        .match-body.locked::after {
            content: '🔒 Pronostics masqués jusqu\'a fermeture des pronostics (J-1)';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 11;
            font-size: 1.3rem;
            font-weight: 600;
            color: #fbbf24;
            text-align: center;
        }

        .table-wrapper {
            overflow-x: auto;
            margin-bottom: 20px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.03);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            min-width: 500px;
        }

        thead {
            background: rgba(102, 126, 234, 0.2);
            color: white;
        }

        th {
            padding: 12px;
            text-align: center;
            font-weight: 600;
            font-size: 0.9rem;
            color: #667eea;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        th:first-child {
            text-align: left;
            padding-left: 20px;
        }

        td {
            padding: 12px;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.9);
        }

        tbody tr:hover {
            background: rgba(102, 126, 234, 0.1);
        }

        tbody tr:last-child td {
            border-bottom: none;
        }

        .prono-value {
            font-weight: 600;
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.9);
        }

        .prono-value.highlight {
            color: #667eea;
            background: rgba(102, 126, 234, 0.2);
            padding: 6px 12px;
            border-radius: 6px;
        }

        .user-col {
            min-width: 80px;
        }

        .heatmap {
            display: flex;
            height: 40px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .heat-green {
            background: linear-gradient(135deg, #48bb78, #38a169);
        }

        .heat-yellow {
            background: linear-gradient(135deg, #ecc94b, #d69e2e);
        }

        .heat-red {
            background: linear-gradient(135deg, #f56565, #e53e3e);
        }

        .heatmap-legend {
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.6);
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 4px;
        }

        @media (max-width: 768px) {
            .match-header {
                padding: 15px;
            }

            .match-title {
                font-size: 1rem;
            }

            .team-logo {
                width: 32px;
                height: 32px;
            }

            .section-title {
                font-size: 1.4rem;
            }

            table {
                font-size: 0.9rem;
            }
            
            .match-body.locked::after {
                font-size: 1.1rem;
            }
        }