*{
  margin: 0;
  padding: 0;
}

html, body{
 height:100%;
}

body{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati;
  font-size: 13px;
  color: #a1a465;
  min-height:100%;
  height:auto !important; /* ie6 ignores it */
  height:100%; /* fix */
  width:90%;
  background: #7f796a;
  margin: auto;
}

#daylight_contenu{
	background: #2b2c1b;
	padding: 1px 2px 5px 2px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#a_01{
	color: #a1a465;
	text-decoration: none;
}

#a_01:hover{
	color: #FFFFFF;
	background: #a1a465;
	text-decoration: none;
}

#a_02{
	color: #000000;
	text-decoration: none;
}

#a_02:hover{
	color: #a1a465;
	background: #2b2c1b;
	text-decoration: none;
}

h1{
	background: #a1a465;
	color: #000000;
	font-size: 13px;
	padding:3px;
}

h2{
	color: #a1a465;
	text-align: center;
}

a{
  color: #74772e;
  text-decoration: none;
}

a:hover{
  color: #FFFFFF;
  background: #74772e;
  text-decoration: none;
}

table{
  margin: 0 0 1em;
  color: #74772e;
  font-size:12px;
  border-collapse: collapse;
  white-space : nowrap;
}

table td, table th{
  padding: .2em .4em;
  vertical-align:top;
}

#bas{
	background: #2b2c1b;
	word-spacing:12px;
	text-align: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
/***************NEWS******************/
/* Bloc principal contenant la news */
/* Bloc principal contenant la news */
#news {
	background-color: #a8aa6d;
	width: 98%;
	margin: 10px 0;
	border-radius: 10px;
	padding: 6px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.25);
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Tableau de la news */
#tab_news {
	width: 100%;
	background-color: #a3a36b;
	border: 1px solid #404020;
	border-radius: 6px;
	padding: 10px;
	border-collapse: collapse;
	table-layout: fixed;
	word-wrap: break-word; 
	overflow-wrap: break-word;
	color: #000000;
}

/* Toutes les cellules du tableau */
#tab_news td {
	vertical-align: top;
	word-wrap: break-word; 
	overflow-wrap: break-word;
	white-space: normal; /* ✅ permet le retour à la ligne dans le texte */
}

/* Liens des autres news */
#a_tab_news {
	color: #303010;
	text-decoration: none;
	word-break: break-word; /* ✅ casse les longs liens si besoin */
}
#a_tab_news:hover {
	text-decoration: underline;
}

#latest_upd {
	background-color: #a8aa6d;
	width: 98%;
	margin: 10px 0;
	border-radius: 10px;
	padding: 6px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.25);
	overflow-wrap: break-word;
	word-wrap: break-word;
	color: #303010;
}
#latest_upd a {
    color: #303010;
}

/* Bouton Discord */
a.discord-link {
	background-color: #404020;
	color: #d5d58f;
	padding: 4px 8px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: bold;
	white-space: nowrap; /* empêche le bouton lui-même de se couper */
}
a.discord-link:hover {
	background-color: #56562e;
}

/* Paragraphes */
p {
	line-height: 1.5;
	margin: 6px 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
/***************NEWS******************/

#tabjeu{
	color: #000000;
	width: 100%;
}
#tabjeu-titre{
	color: #000000;
	background: #85C8BF;
	width: 100%;
}

#score_map
{
	width: 100%;
	color: #FFFFFF;
	text-align: center;
}
#td_score_map
{
	width: 20%;
	border: 1px solid;
}
#td_score_map_team
{
	width: 30%;
}

#table_demo
{
	width: 100%;
	background: #FFFFFF;
	border: 1px solid;
	border-color: #e8aa1c;
}
#table_demo td
{
	border: 1px solid;
	border-color: #a1a465;
	vertical-align: middle;
}
#table_summary
{
	color: black;
	width: 100%;
	background: #a1a465;
	border: 1px solid;
	white-space: pre-line;
}
#table_summary td
{
	border: 1px solid;
	border-color: black;
}

#select_list{
 width:90px;   
}

#msg_warning{
 background: #1379c7;
 color: #000000;
 padding: 2px 0px 5px 2px;
 border: solid;
}
#msg_ok{
 background: #20cc15;
 color: #000000;
 padding: 2px 0px 5px 2px;
 border: solid;
}
#msg_ko{
 background: #d54d49;
 color: #000000;
 padding: 2px 0px 5px 2px;
 border: solid;
}

#label_2{
	background: #74772e;
	color: #000000;
	border: solid;
	border-radius: 10px 100px / 120px;
	width: 50%;
	padding-left:10px;
}
/* INFO BULL */
/* Style pour le conteneur */
.tooltip-container {
    position: relative;
    display: inline-block;
    margin-left: 10px; /* Espace entre l'info et le champ */
}

/* Style pour l'icône (i) */
.info-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #e8aa1c;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.info-icon:hover {
    background-color: #be9026;
}

/* Style pour la bulle d'information (tooltip) */
.tooltip-text {
    visibility: hidden;
    width: 220px; /* Largeur de la bulle */
    background-color: #333; /* Fond sombre */
    color: #fff; /* Texte blanc */
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    bottom: 125%; /* Position au-dessus de l'icône */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre subtile */
}

/* Petite flèche sous la bulle */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%; /* Position sous la bulle */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent; /* Triangle avec couleur de fond */
}

/* Afficher la bulle au survol de l'icône */
.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
/* INFO BULL FIN */
/* MENU f_player.php et f_map.php */
/* Onglets de menu sous le titre */
.tab-menu {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tab-menu button {
  background-color: #e8aa1c;
  color: black;
  border: none;
  padding: 7px 18px;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out;
}

.tab-menu button:hover {
  background-color: #be9026;
  transform: scale(1.03);
}

.tab-menu button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
}

.tab-menu button.active {
  background-color: #e8aa1c;
  box-shadow: 0 0 0 3px #a1a465; /* Nouveau contour vert-jaune */
}
/* MENU f_player.php FIN */
/* NEWS */
pre {
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
  font-family: monospace;
  border: 1px solid #ccc;
  white-space: pre-wrap; /* pour garder le retour à la ligne */
}
code {
  background-color: #f9f2f4;
  color: #7f796a;
  padding: 2px 4px;
  font-size: 95%;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  border: 1px solid #e1e1e8;
  border-radius: 4px;
}
/* NEWS FIN */
/* BUTTON WATCH VIDEO */
.watch-button {
  background-color: #e8aa1c;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.2s ease-in-out;
}
.watch-button:hover {
  background-color: #be9026;
}
.watch-button img {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}
/* BUTTON WATCH VIDEO END */
/* TABLE RANKING */
    table.placement {
        width: 100%;
        border-collapse: collapse;
        background: white;
        margin-top: 5px;
        font-family: Arial, sans-serif;
		color: black;
    }
    table.placement th, table.placement td {
        border: 1px solid #ddd;
        padding: 5px;
    }
    table.placement th {
        background-color: #f2f2f2;
        font-weight: bold;
    }
    .gold {
        background-color: #FFD700;
        font-weight: bold;
    }
    .silver {
        background-color: #C0C0C0;
        font-weight: bold;
    }
    .bronze {
        background-color: #CD7F32;
        font-weight: bold;
    }
/* TABLE RANKING END */
/* POULE */
.poule-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* espace entre les poules */

    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 25px;
    border-radius: 6px;
    background: #f9f9f9;
}
.single-poule {
    width: 500px; /* ou 300px, selon ton design */
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 6px;
    background: white;
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
}
.poule-title {
    font-weight: bold;
    font-size: 1.3em;
    margin-bottom: 10px;
    color: #333;
}
.match-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.team-block {
    flex: 1;
}
.vs {
    margin: 0 10px;
    font-weight: bold;
    color: #666;
}
/* POULE END */

.green {
  color: green;
  font-weight: bold;
}

.blue {
  color: #007BFF;
  font-weight: bold;
}

.red {
  color: red;
  font-weight: bold;
}

.pending { 
	background-color: #d3d3d3; 
	color: grey;
}

/* DISCORD TOP WEBSITE */
.discord-button {
  display: inline-flex;
  align-items: center;
  background-color: #5865F2;
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.discord-button:hover {
  background-color: #4752C4;
}

.discord-button svg {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
/* DISCORD TOP WEBSITE END */
/* BANNIERE TOP WEBSITE */
.tfc-title {
  display: inline-block;
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: 2.2rem;
  letter-spacing: 1px;
  color: #e8aa1c;
  text-shadow: 2px 2px 0 #000, 4px 4px 0 #2b2c1b;
  padding: 10px 20px;
  text-decoration: none;
  background: #2b2c1b;
  border: 2px solid #FFD700;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.tfc-title:hover {
  transform: scale(1.01);
  color: #fff;
  background: #2b2c1b;
}

/* BANNIERE TOP WEBSITE END */
/* TOP WEBSITE */
#haut {
  background: #2b2c1b;
  padding: 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.haut-left img.tfc-logo {
  width: 700px;
  max-width: 100%;
  height: auto;
  display: block;
}

.haut-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
#menu {
  background-color: #2b2c1b;
  padding: 2px 15px;
  display: flex;
  flex-wrap: wrap;              /* ✅ permet le retour à la ligne */
  gap: 20px 16px;               /* espace horizontal et vertical entre les éléments */
  font-size: 0.95rem;
  font-weight: bold;
  color: #fff;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  justify-content: flex-start;  /* garde les éléments alignés à gauche */
  align-items: center;
}
/* TOP WEBSITE END */
.match-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 10px;
    margin: 10px 0;
}

.match-item {
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 8px;
    background-color: #f9f9f9;
    overflow: hidden;
}

.match-card {
    padding: 10px;
    border: 1px solid #ccc;
    font-family: Arial, sans-serif;
    border-radius: 8px;
    background-color: #fdfdfd;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

.match-card * {
    max-width: 100%;
    box-sizing: border-box;
}

.table-wrapper {
    overflow-x: auto;
}

.score-table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.score-table th,
.score-table td {
    padding: 6px 12px;
    border-bottom: 1px solid #ccc;
}

.score-table th {
    font-weight: bold;
    background-color: #f1f1f1;
    text-align: center;
}

/* === Séparations verticales === */

/* Ligne à droite de "Team" */
.score-table th:first-child,
.score-table td:first-child {
    border-right: 2px solid #000;
}

/* Ligne à droite de "Maps score" */
.score-table th:nth-child(2),
.score-table td:nth-child(2) {
    border-right: 2px solid #000;
}

/* Ligne à droite de "Total score" */
.score-table th:nth-child(3),
.score-table td:nth-child(3) {
    border-right: 2px solid #000;
}

/* Survol pour lisibilité */
.score-table tr:hover {
    background-color: #f5faff;
    transition: background-color 0.2s ease;
}

/* --- Styles de résultat --- */
.winner {
    background-color: #d4f8d4; /* vert clair */
    color: #2e7d32;           /* vert foncé */
}

.loser {
    background-color: #f8d4d4; /* rouge clair */
    color: #c62828;           /* rouge foncé */
}

.draw {
    background-color: #dbe6f0; /* bleu-gris clair */
    color: #1c2c3c;            /* gris-bleu foncé */
}

/* SPINNER */
#loading {
  text-align: center;
  padding: 50px;
  font-size: 1.5em;
}

#table_id_spin {
  display: none;
}

.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #555;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: auto;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* SPINNER END */
/* FILTERS PUBLIC PAGE */
.filters {
	margin: 5px 0;
	clear: both;
}

.filter-button {
	padding: 2px 7px;
	margin: 5px auto 0 auto;
	border: 1px solid #ccc;
	background-color: #f0f0f0;
	cursor: pointer;
	border-radius: 3px;
	text-decoration: none;
	color: black;
	display: inline-block;
	text-align: center;
}

.filter-button.selected {
	background-color: #4CAF50;
	color: white;
	font-weight: bold;
}
/* FILTERS PUBLIC PAGE END */
/* videos plusieurs joueurs */
.video-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 1200px;
  margin-top: 5px;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
}

/* Reset global: ne touche pas aux iframes par défaut */
iframe {
  position: static;
  width: 100%;
  height: 600px;
  border: none;
}

/* Responsive uniquement dans un wrapper prévu pour ça */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.video-wrapper > iframe,
.video-wrapper > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.controls {
  margin: 10px 0;
  text-align: center;
}

button {
  padding: 10px 20px;
  background-color: #74772e;
  color: white;
  border: none;
  cursor: pointer;
  margin: 5px;
  font-size: 14px;
}

button:hover {
  background-color: #a1a465;
}

#play-pause-videos, #rewind-videos {
  display: none;
}

/* Tooltip Styles */
.tooltip-container {
  display: inline-block;
  position: relative;
  margin-left: 10px;
}

.tooltip-text {
  visibility: hidden;
  width: 200px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 10;
  bottom: 125%; /* Place above the icon */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 12px;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* videos plusieurs joueurs END */
  table.table_admin_match {
    table-layout: fixed;
    width: 100%; /* ou une largeur fixe si tu préfères, ex : 600px */
    border-collapse: collapse;
  }

  td.td_admin_match_player {
    width: 150px !important;
    text-align: center;
    border: 1px solid #555;
    padding: 4px;
    overflow: hidden; /* évite que le texte dépasse */
    white-space: nowrap; /* garde le texte sur une seule ligne */
    text-overflow: ellipsis; /* ajoute "..." si le texte est trop long */
  }
  
/* bouton plus page admin team */

.btn-plus {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 20px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  padding: 0;
  vertical-align: middle;
  margin-left: 5px;
}

.btn-plus:hover {
  background-color: #e2e2e2;
  border-color: #999;
  transform: scale(1.1);
}
/* team name + logo team */
.team-header {
	background: #a1a465;
    display: flex;
    align-items: flex-start; 
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.team-names {
    display: flex;
    flex-direction: column; /* nom court au-dessus, nom complet en dessous */
}

.team-short {
    margin: 0;
}

.team-full {
    font-size: 1.1em;
    color: #444;
}
/* table match admin_match */
table.match-table {
	border-collapse: collapse;
	width: 100%;
}
.match-table td, .match-table th {
	border: 1px solid #ccc;
	padding: 6px;
	text-align: center;
	vertical-align: middle;
}
.score-stack {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tooltip-container {
	position: relative;
	display: inline-block;
}