@charset "utf-8";
/* CSS Document */

:root{
  		--couleur-claire: #003C8C;
  		/*--couleur-claire: #DF2856;*/
  		--couleur-foncee: #E63946;
	}
	
		/*#monmenu table.cadre {border:1;border-collapse:collapse;border-color:#FF9933}
		#monmenu td.textalign {vertical-align:text-middle;vertical-align:middle;}*/
        #monmenu ul {display: none; position: absolute; margin:0px; padding: 0px; border: 1px solid var(--couleur-foncee);z-index: 1;}
		#monmenu ul.niveau2 {left: 0px; top: 24px; opacity:.90;}
		#monmenu ul.niveau3 {left: 150px; top: -1px; opacity:.90}
        #monmenu li {list-style-type: none; position: relative; border-bottom:6px solid var(--couleur-claire); height:24px;line-height:24px;}
        #monmenu li:hover, #monmenu li.sfhover {border-bottom:6px solid var(--couleur-foncee);cursor: pointer;}
        #monmenu li a {text-decoration:none;}
        #monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}
		#monmenu li.menu {background-position:left; background-repeat: no-repeat;}
        #monmenu li.plus {background-color: var(--couleur-foncee); border-bottom: 1px solid var(--couleur-foncee);width: 200px;color:white;}
        #monmenu li li:hover, #monmenu li li.sfhover {background-color: var(--couleur-claire);cursor: pointer;}

/* ========================================================= */
/* =================== groups display ====================== */
/* ========================================================= */

.groups-container{
	display:flex;
	flex-wrap:wrap;
	gap:5px;
}

.group-box{
	width: calc(50% - 5px);
	box-sizing:border-box;
}

.group-title {
    background: linear-gradient(to bottom,#103a72,#08264a);
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    padding: 8px 5px;
    border-radius: 6px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    width:150px;
    cursor:pointer;
}

.group-content {
	/*width:100%;*/
    display: none;
}

.group-content.open {
	/*width:100%;*/
    display: block;
}

/* ========================================================= */
/* =============== display page principale ================= */
/* ========================================================= */

td.header {
background-image:url(/image/banniere_cdm2026.png);
vertical-align:text-middle;
vertical-align:middle;
background-repeat:no-repeat;
background-position:center;
color: white; /*si fonds foncé*/
}

td.footer {
background: var(--couleur-claire);
color: white;
}

/* ========================================================= */
/* ================== matchs de groupe ===================== */
/* ========================================================= */

table.match {
	width:100%;
	border:1px solid #CCC;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border-collapse:separate;
	border-spacing:0;
	overflow:hidden;
}

table.match tr:nth-child(4n+1),
table.match tr:nth-child(4n+2) {
	background:#FFF;
}

table.match tr:nth-child(4n+3),
table.match tr:nth-child(4n+4) {
	background:#f8f8f8;
}

table.match tr:nth-child(even) td{
	padding-bottom:4px;
}

table.match td 
{
    text-align: center;
    white-space: nowrap;
}

table.match td.date
{
    font-size:12px;
}

/* ========================================================= */
/* ===================== classement ======================== */
/* ========================================================= */

table.classement {
	width:100%;
	margin-left: auto;  
	margin-right: auto; 
	border:1px solid #CCC;
	border-collapse: collapse;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; 
}
table.classement th{
	background:#f3f3f3;
	white-space: nowrap;
	padding: 0px 4px;
}
table.classement tr:nth-child(odd) {
	background:#f8f8f8;
}
table.classement tr:nth-child(even) {
	background:#FFF;
}
table.classement td 
{
    text-align: center;
    white-space: nowrap;
    border:1px solid #CCC;
}
td.left {
	text-align: left !important;
}
td.right {
	text-align: right !important;
}

table.pronos td 
{
    white-space: nowrap;
}

/* ========================================================= */
/* ========================= chat ========================== */
/* ========================================================= */

#chat tr:nth-child(even) {
	background:#f8f8f8;
}
#chat tr:nth-child(odd) {
	background:#FFF;
}
#chat img {
	position: relative;
    top: 2.5px;
    height:15px;
}
#div_message img {
    height:15px;
}

/* ========================================================= */
/* ======================== liens ========================== */
/* ========================================================= */

a:link {
	color :black;
	text-decoration:none;
}
a:visited {
	color :black;
	text-decoration:none;
}
a:active {
	text-decoration:none;
}
a:hover {
	color:black;
	text-decoration:underline;
}


input[type="submit"],input[type="reset"],input[type="checkbox"],input[type="button"] {
  cursor: pointer;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border:solid 1px grey;
  padding: 10px 30px;
  color: black;
}
input[type="submit"], input.active {
  background-color: #4CAF50;
  color: white;
}
input[type="submit"]:hover{
  background-color: green;
  color: white;
}
input[type="button"]:hover {
  background-color: #4CAF50;
  color: white;
}
input[type="reset"]:hover {
  background-color: grey;
  color: white;
}
input[name="envoi"] {
  padding: 0px 10px !important;
}
input[type="search"] {
background-image: url(/image/search.png);
background-size: 15px;
background-repeat:no-repeat;
background-position:left;
padding-left: 20px;
margin-right:2px;
border:solid 1px grey;
}
input[type="number"] {
	max-width: 35px;
	border:solid 1px grey;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	text-align: center;
}
/*html { background: #000 url(/image/fond_rouge.jpg) no-repeat 50% 0; font-family:Arial, Helvetica, sans-serif;}*/
html { background: var(--couleur-claire) ; font-family:Arial, Helvetica, sans-serif;}
body
{ 
color:#000;
/*background-image:url(/image/ballon_fond_clair.png);*/
background-image:url(/image/trait.png);
margin-top:0;
margin-left:0;
margin-right:0;
margin-bottom:0;
}
.text
{
text-decoration:none;
}
.highlight
{
    background: yellow;
}
.drawBlock 
{
	display:none;
}
.bordgauche
{
 border-left: solid 1px #999;
}
.bordhaut
{
 border-top: solid 1px #999;
}
.borddroit
{
 border-right: solid 1px #999;
}
.bordbas
{
	border-bottom: solid 1px #999;
	text-align: center;
}
.barre img
{
width:100%;
height:20px;
}
.banniere
{
width:100%;
height:100%;
}
#cyan
{
color:cyan;
}
div.arrondi { 
border-top: solid 1px var(--couleur-foncee);
border-left: solid 1px var(--couleur-foncee);
border-right: solid 1px var(--couleur-foncee);
border-bottom: 1px solid var(--couleur-foncee);

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; 
}

th.rotation {
background-color: white !important;
height: 120px;
white-space: nowrap;
}

th.rotation > div {
  	transform: translate3d(35px, 40px, 0) rotate(-45deg);
	transform-origin: left bottom;
}

th.rotation > div > span {
  /*border-bottom: 1px solid #ccc;
  padding: 5px 10px;*/
}

div.tempo {
	position:absolute;
	top:1px;
	right:1px;
    width: 200px;
    height: 60px;
  border:1px grey;
  background-color:white;
  text-align:center;
  line-height:60px;
  -moz-animation: fadeout 5s;
  -webkit-animation: fadeout 5s;
  animation: fadeout 5s;
    /*animation-name: fadeout;
    animation-duration: 5s;*/
    visibility:hidden
}

@keyframes fadeout {
    from {visibility:visible;opacity:1;}
    to {opacity:0;visibility:hidden;}
}

@-webkit-keyframes fadeout {
    from {visibility:visible;opacity:1;}
    to {opacity:0;visibility:hidden;}
}

@-moz-keyframes fadeout {
    from {visibility:visible;opacity:1;}
    to {opacity:0;visibility:hidden;}
}
/*
[class^="radio"] {
  display: none;
}

[id^="label"]:checked + .group-title + div {
  display: block;
}

[id^="label"] + label:after {
  content: "  ▼"; 
}

[id^="label"]:checked + label:after  {
  content: "  ▲";
}
*/
/* ========================================================= */
/* ==================== title sortable ===================== */
/* ========================================================= */

.sortable
{
    cursor:pointer;
    /*padding:8px 12px;
    white-space:nowrap;*/
}

.hidden
{
    display:none;
}

input[type="text"][id^="header"].asc + label:after {
  content: " ▲"; 
  opacity:.30;
  font-size:8px;
  text-align:right;
}
input[type="text"][id^="header"].desc + label:after {
  content: " ▼";
  opacity:.30;
  font-size:8px;
  text-align:right; 
}
input[type="text"][id^="header"].none + label:after {
  content: "";
  text-align:right; 
}

/* ========================================================= */
/* ======================= tooltip ========================= */
/* ========================================================= */

.tooltip
{
	position:relative;
	display:inline-block;
	cursor:pointer;
}

.tooltip .tooltiptext
{
	visibility:hidden;
	opacity:0;
	position:absolute;
	z-index:1000;
	left:50%;
	transform:translateX(-50%);
	bottom:130%;
	min-width:220px;
	background:#222;
	color:#fff;
	text-align:left;
	padding:10px 12px;
	border-radius:8px;
	font-size:14px;
	line-height:20px;
	box-shadow:0 2px 10px rgba(0,0,0,0.3);
	transition:opacity 0.2s;
	pointer-events:none;
}

.tooltip:hover .tooltiptext
{
	visibility:visible;
	opacity:0.8;
}

/* ========================================================= */
/* ======================= scores ========================== */
/* ========================================================= */

.exact_score
{
	background:#9acd32;
}

.good_sens_bonifie
{
	background:#c6e56a;
}

.good_sens
{
	background:#ffff00;
}

.bad_sens_bonifie
{
	background:#ffd27f;
}

.bad_sens
{
	background:#ffffff;
}

.premium
{
    color: #1e66ff; /* bleu */
}

/* ========================================================= */
/* ===================== list_user ========================= */
/* ========================================================= */

.amis
{
    color: orange;
}

.premium.amis
{
    color: #1e66ff; /* fallback */
    background: linear-gradient(90deg, #1e66ff, orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.me
{
    color: red !important;
    background: none !important;
    -webkit-text-fill-color: red !important;
    -webkit-background-clip: initial !important;
}

/* ========================================================= */
/* ======================= badges ========================== */
/* ========================================================= */

.badge_tooltip
{
    position:relative;
    display:inline-block;
}

.badge_small
{
    cursor:pointer;
    margin-right:2px;
}

.badge_big
{
    display:none;
    position:absolute;
    top:30px;
    left:0;
    z-index:999;

    background:white;
    padding:8px;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.badge_tooltip:hover .badge_big
{
    display:block;
}