:root {
  --BGround-color0: #030304; 
/*  --BGround-color2: #333434;  */ 
  --BGround-Txt: #F0804F;
}
body {
  font-family: Arial, sans-serif;
  margin: 0 auto;
  max-width: 100%;
  background-color: #131414;
  color: #f1f1f1;
  padding: 0;
}

.box {
  flex: 1 1 35%;
  background-color: var(--BGround-color2); 
  margin: 1px auto;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 15px;
  color: #F1E12F;
  max-height: 750px;
  overflow-y: auto;
}

.flex-container {
  display: flex;
  background-color: var(--BGround-color2); 
  gap: 5px;
  margin: 1px auto;
  flex-wrap: wrap;
}

.boxy {
  flex: 1 1 60%;
  color: #F0F;
  background-color: var(--BGround-color2); 
  margin: 0 auto;
  padding: 4px 0px 0px 0px;
  box-sizing: border-box;
  border-radius: 15px;
}

.flex-container1 {
  display: flex;
  background-color: var(--BGround-color2); 
  gap: 5px;
  padding: 0;
  flex-wrap: wrap;
}

/* custom.css */
.container {
  display: flex;
  gap: 3%;
  width: 100%;
  padding: 0;

/*  box-shadow: inset 0 0 5px rgba(F, F, F, 0.7); */
}

.flex-container > .col {
  flex: 1 1 33%;
  padding: 0;
  box-sizing: border-box;
}

.flex-container1 > .col {
  flex: 1 1 80%;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  display: flex;
  width: 1210px;  /* -------------  800  --  960  --  1024  --  1280  -- 1500  */
/*  background-color: #232424; /* ------------------------- */
  margin: 0 auto;
  padding: 2px 0;
  gap: 0;
  flex-wrap: wrap;
}

.navbar > .col {
  margin: 0 auto;
  gap: 0;
  flex: 1 1 100%;
}

.boz {
  flex: 1 1 100%;  /* ----  45  ------------------------------------------ */
  width: 1920px;  /* ----------------------------------------------------- */ 
/*  background-color: #000000; */  /*  ---   232424 ---  */
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7);
}

#chat-box {
  margin: 0;
  border-radius: 15px;
  border: 1px solid #333;
  background: #052737;
  text-align: left;
  color: #FFFFFF;
  height: 370px;
  max-width: 100%;
  overflow-y: auto;
  padding: 3px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7);
}

.msg {
  margin: 4px 8px 4px 0;
  padding: 10px;
  border-radius: 20px;
  background: #171717;
  color: #EEEEEE; /*  ORANGE  ---***************************************---    */
  text-align: left;
  font-size: 0.8em;
}

.msg strong {
  color: #4dd0f1;
  font-size: 1em;
  display: inline-block;
  text-align: left;
}

.time {
  font-size: 0.8em;
  color: #ada;
}

form {
  margin-top: 8px;
  display: flex;
  background: #0a0a0a;
  gap: 5px;
  align-items: center;
}

input[type=text] {
  padding: 8px;
  border: 1px solid #555;
  border-radius: 4px;
  max-width: 470px;
  background: #1c1c1c;
  color: #f1f1f1;
}

input[type=text]::placeholder {
  color: #aaa;
}

#name {
  width: 22%;
}

#content {
  flex: 1;
}

#btChanger1 {
  flex: 1 1 60%;
  padding: 2px 2px;
  border: none;
  background: #1F1F1F;
  color: #6FB7FF; /*  #AFB7FF  __   #6FB7FF  */
  font-size: 1.75em;
  cursor: pointer;
  border-radius: 15px;
  transition: background 0.3s;
}

#btChanger1:hover {
  color: #FEC08E;
  background: #272727;
  cursor: pointer;
  border-radius: 15px;
}

#btChanger2 {
  flex: 1 1 60%;
  padding: 2px 2px;
  border: none;
  background: #1F1F1F;
  color: #AFB7FF;
  font-size: 1.75em;
  cursor: pointer;
  border-radius: 15px;
  transition: background 0.3s;
}

#btChanger2:hover {
  color: #FEC08E;
  background: #272727;
  cursor: pointer;
  border-radius: 15px;
}

#btChanger3 {
  flex: 1 1 60%;
  padding: 2px 2px;
  border: none;
  background: #1F1F1F;
  color: #007BFF;
  font-size: 1.75em;
  cursor: pointer;
  border-radius: 15px;
  transition: background 0.3s;
}

#btChanger3:hover {
  color: #FEC08E;
  background: #272727;
  cursor: pointer;
  border-radius: 15px;
}

#btChanger4 {
  flex: 1 1 60%;
  padding: 2px 2px;
  border: none;
  background: #1F1F1F;
  color: #AFB7FF;
  font-size: 1.75em;
  cursor: pointer;
  border-radius: 15px;
  transition: background 0.3s;
}

#btChanger4:hover {
  color: #FEC08E;
  background: #272727;
  cursor: pointer;
  border-radius: 15px;
}

#btChanger5 {
  flex: 1 1 60%;
  padding: 2px 2px;
  border: none;
  background: #B5C555;  /* 1F1F1F */
  color: #007BFF;
  font-size: 1.75em;
  cursor: pointer;
  border-radius: 15px;
  transition: background 0.3s;
}

#btChanger5:hover {
  color: #FEC08E;
  background: #B5C555;  /* 272727 */ 
  cursor: pointer;
  border-radius: 15px;
/}

a.YSF {
  flex: 1 1 60%;
/*  padding: 2px 2px; */
  border: none;
/*  background: #454545; */ 
  color: #3585F5;
/*  font-size: 1.75em; */
  cursor: pointer;
/*  border-radius: 15px; */
  transition: background 0.3s;
}

a.YSF:hover {
  color: #FEC08E;
/*  background: #454545; */
  cursor: pointer;
/*  border-radius: 15px; */
}

a.ADM {
  flex: 1 1 60%;
/*  padding: 2px 2px; */
  border: none;
  background: #454545; 
  color: #3585F5;
/*  font-size: 1.75em; */
  cursor: pointer;
/*  border-radius: 15px; */
  transition: background 0.3s;
}

a.ADM:hover {
  color: #FEC08E;
  background: #454545; 
  cursor: pointer;
/*  border-radius: 15px; */
}



a.ADM-CHAT {
  flex: 1 1 60%;
/*  padding: 2px 2px; */
  border: none;
  background: #454545;
  color: #3585F5;
/*  font-size: 1.75em; */
  cursor: pointer;
/*  border-radius: 15px; */
  transition: background 0.3s;
}

a.ADM-CHAT:hover {
  color: #E6E6E6;
  background: #454545;
  cursor: pointer;
/*  border-radius: 15px; */
}


a.ADM-ID {
  flex: 1 1 60%;
/*  padding: 2px 2px; */
  border: none;
  background: #353535;
  color: #076E77;
/*  font-size: 1.75em; */
  cursor: pointer;
/*  border-radius: 15px; */
  transition: background 0.3s;
}

a.ADM-ID:hover {
  color: #47FE47;
  background: #353535;
  cursor: pointer;
/*  border-radius: 15px; */
}

a.ADM-IP {
  flex: 1 1 60%;
/*  padding: 2px 2px; */
  border: none;
  background: #353535;
  color: #8E2707;
/*  font-size: 1.75em; */
  cursor: pointer;
/*  border-radius: 15px; */
  transition: background 0.3s;
}

a.ADM-IP:hover {
  color: #FE4747;
  background: #353535;
  cursor: pointer;
/*  border-radius: 15px; */
}

a.ADM-Log {
    flex: 1 1 60%; 
    border: none; 
 /*    background: #1F1F1F;  */
    color: #EFB727; 
    cursor: pointer; 
    transition: background 0.3s;
}

a.ADM-Log:hover {
    color: #23E617; 
  /*   background: #1F1F1F;  */
    cursor: pointer;
}

h2 {
  text-align: center;
  background-color: #072F4F;
  color: #00bcd4;
  padding: 15px;
  border-radius: 15px;
}

/* Animations clignotantes solides */
	@keyframes blink-orange {
	   0%, 100% { color: orange; }
	   50% { color: #672727; }
	}

	@keyframes blink-green {
	   0%, 100% { color: lightgreen; }
	   50% { color: #276727; }
	}

	@keyframes blink-magenta {
	   0%, 100% { color: #FF77FF; }
	   50% { color: #672767; }
	}

	@keyframes blink-cyan {
	   0%, 100% { color: cyan; }
	   50% { color: #275767; }
	}

	@keyframes blink-red {
	   0%, 100% { color: red; }
	   50% { color: #772727; }
	}

	a.clignote1 {
	   animation: blink-orange 2s linear infinite;
	   font-weight: bold;
	   text-decoration: underline;
      	   padding: 5px 8px;
      	   border-radius: 6px;
      	   color: orange;
	}

	a.clignote2 {
	   animation: blink-green 2s linear infinite;
	   font-weight: bold;
	   text-decoration: underline;
      	   padding: 5px 8px;
      	   border-radius: 6px;
      	   color: lightgreen;
	}

	a.clignote3 {
	   animation: blink-magenta 2s linear infinite;
	   font-weight: bold;
	   text-decoration: underline;
      	   padding: 5px 8px;
      	   border-radius: 6px;
      	   color: magenta;
	}

	a.clignote4 {
	   animation: blink-cyan 2s linear infinite;
	   font-weight: bold;
	   text-decoration: underline;
      	   padding: 5px 8px;
      	   border-radius: 6px;
      	   color: cyan;
	}

	a.clignote5 {
	   animation: blink-red 2s linear infinite;
	   font-weight: bold;
	   text-decoration: underline;
      	   padding: 5px 8px;
      	   border-radius: 6px;
      	   color: red;
	}

    a:hover {
      color: #111; /* ED1  */
    }

/* =============================================================================
   DataTables : lignes entre rangées TRANSPARENTES
   ============================================================================= */

table.dataTable tbody td,
table.dataTable tbody th {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important; 
}

table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.even {
  background-color: transparent !important;
}

table.dataTable {
  background-color: transparent;
}

table.dataTable thead th,
table.dataTable thead th:first-child,
table.dataTable thead th:last-child {
  background-color: transparent !important;
  border-top: none !important;
/*  color: var(--BGround-Txt) !important; */   /* --- */  
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* =============================================================================
   DataTables : texte d’info UNIQUEMENT ici, avec couleur personnalisée
   Un seul bloc .dataTables_info pour éviter la surcharge
   ============================================================================= */

.dataTables_info {
/*  color: #E0E0D0 !important; */  /* -- #F0E0C0 --  couleur de secours */
  color: var(--BGround-Txt) !important;   
  font-size: 0.9em;
  background-color: var(--BGround-color2); 
  padding: 3px 8px;
  border-radius: 10px;
}

/* Tu peux ajouter ici d'autres variables dynamiques */