/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 02.01.2016, 21:23:52
    Author     : fraichor
*/
body{
    font:600 medium sans-serif ;
    font-size: 12px;
    font-family: bruin , verdana;
    color:#000;
    background-color: #000;

}

ul, ol{
    list-style: none;
}
li{
    padding: 0px;
    margin: 0px;
    border: none;
}
a, a:link,a:visited,a:hover,a:focus{
    outline: none;
    text-decoration: none;
    font-family: bruin , verdana;
}
.gold-bg,.silber-bg,.bronze-bg{
    background-position: center center;
    background-size: 135% auto;
}
.gold-bg{
    background-image:url("../img/wmmGold-bg.png");
}
.silber-bg{
    background-image:url("../img/wmmSilber-bg.png");
}
.bronze-bg{
    background-image:url("../img/wmmBronze-bg.png");
}
.container{
    margin: 0px;
    padding: 0px;
    width: 100%;
}
.row, .col,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12
{
    margin: 0px;
    padding: 0px
}
span.glyphicon {
    color: black;
}
.wmm-rows{
    background-color: #fff;
    min-height: 20px;
}

.wmm-meta-and-header{
    background-color: #f00000;
    background-image: url("../img/header-bg.png");
    background-size: 100%;
}
/*
######## META ################################
*/


.wmm-meta{
    background-color: black;
    height: 25px;
}


/*
######## HEADER ################################
*/

.wmm-header{
    padding: 20px 0 20px;
    background: none;
    min-height: 200px;
}
.wmm-user-properties-block-right .wmm-user-properties-row > div {
    float: right;
}
.wmm-user-properties-cell-container{
    width: 50px;
}
.wmm-user-properties-cell-container-block-2{
    width: 90px;
}
.wmm-user-properties-cell-container-block-3{
    width: 160px;
}

.wmm-user-properties-cell{
    margin: 4px auto;
    background-color: white;
    width: 90%;
    height: 40px;
    text-align: center;
    padding: 12px 0px;
    font-size: 12px;
    border-radius: 2px;
}
.wmm-user-properties .wmm-chrono-and-belt{
    text-align: center;
    text-transform: uppercase;
    color: #f00000;
}
.wmm-user-properties .wmm-chrono-and-belt > div{
    margin: 0px;
    padding: 2px;
}
.wmm-user-properties .wmm-chrono-and-belt .wmm-chrono,
.wmm-user-properties .wmm-chrono-and-belt .wmm-chrono-text{
    background-color: black;
}
.wmm-user-properties .wmm-chrono-and-belt .wmm-belt img{
    width: 100%;
    max-width: 130px;
}
.wmm-user-properties .wmm-chrono .ui-clock {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    color: #f00000;
    font-family: bruin,Verdana;
    text-shadow: none;
}
.ui-widget{
    font-family: bruin,verdana;
}
.ui-accordion .ui-accordion-content{
    margin-top: 0px;
}
/*
######## Main Navigation ########################
*/
.wmm-navigation div, .wmm-navigation nav{
    margin: 0px;
    padding: 0px;
    background: none;
    border: 0;
    box-shadow:none;
    border-radius: 0px;
}

.wmm-navigation{
    background-color: #c30000;
}
.wmm-navigation .navbar-default{
    min-height: 5px;
}
.wmm-navigation ul.navbar-nav{
    width: 100%;
}
.wmm-navigation ul.navbar-nav > li{
    background-color: #000;
    -ms-transform: skewX(-25deg); /* IE 9 */
    -webkit-transform: skewX(-25deg); /* Safari */
    transform: skewX(-25deg);
    width: 16.4%;
    margin-right: 0.2%;
    text-align: center;
}
.wmm-navigation ul.navbar-nav > li.active{
    background-color: #fff;
    color: #000;
}
.wmm-navigation ul.navbar-nav > li > a,
.wmm-navigation ul.navbar-nav > li > a:hover,
.wmm-navigation ul.navbar-nav > li > a:focus,
.wmm-navigation ul.navbar-nav > li > a:link{
    padding: 8px;
    font-size: 16px;
    -ms-transform: skewX(25deg); /* IE 9 */
    -webkit-transform: skewX(25deg); /* Safari */
    transform: skewX(25deg);
    color: #fff;
    background: none;
    box-shadow: none;
    outline: none;
    text-shadow: none;

}
.wmm-navigation ul.navbar-nav > li.active > a{
    color: #000;
}
.wmm-navigation ul.navbar-nav > li > a:hover{
    color: #f00000;
    background: none;
    box-shadow: none;
    outline: none;
}
.wmm-navigation ul.navbar-nav > li.active > a:hover{
    color: #c30000;
}


.wmm-navigation .navbar-toggle:hover {
    background-color: white;
    color: black;
}
.wmm-navigation .navbar-toggle:hover span.icon-bar {
    color: black;
    background-color: black;
}
.wmm-navigation .navbar-toggle span.icon-bar {
    color: white;
    background-color: white;
}
.wmm-navigation .navbar-toggle {
    background-color: black;
    border: 1px solid white;
    border-radius: 0px;
    color: white;
    margin-right: 0;
}
/*
######## INFO ########################
*/
.wmm-main-content-info > div{
    padding: 20px 5px;
}
.wmm-main-content-info > div:last-child span{
    font-size: 100%;
}
/*
######## TAB NAVIGATION ########################
*/

.wmm-main-tab-navigation .tabs ul.nav-tabs > li.tab-navigation-item{
    border: none;
    margin: 0px;
    padding: 0px;
}
.wmm-main-tab-navigation *{
    border: none;
}
.wmm-main-tab-navigation{
    background-position: bottom;
    background-repeat: repeat-x;
    background-image: url("#{resource['images:tabs-bg.png']}");
    padding:0 0 2px 20px;
}

.wmm-main-tab-navigation .tabs ul li.tab-navigation-item{
    -ms-transform: skewX(-25deg); /* IE 9 */
    -webkit-transform: skewX(-25deg); /* Safari */
    transform: skewX(-25deg);
    background-image: url("#{resource['images:red-horizontal-line-as-bg.png']}");
    background-position: left;
    background-size: 80% 100%;
    background-repeat: repeat-y;
    color: #f00000;
    width: 20%;
    min-width: 200px;
    margin-right: 0%;
    padding: 8px;

}
.wmm-main-tab-navigation .tabs ul.nav-tabs > li.tab-navigation-item{
    padding: 8px 10px 2px;
    margin-right: 0%;
}
.wmm-main-tab-navigation .tabs ul li.tab-navigation-item > .row{

    -ms-transform: skewX(25deg); /* IE 9 */
    -webkit-transform: skewX(25deg); /* Safari */
    transform: skewX(25deg);
}
.wmm-main-tab-navigation .tabs ul li.tab-navigation-item .glyphicon{
    display: block;
    margin: 5px;
    padding-top: 5px;
    color: white;
    font-size: 100%;

}
.wmm-main-tab-navigation .tabs ul li.tab-navigation-item .tabs-navigation-bg{


    -ms-transform: skewX(-25deg); /* IE 9 */
    -webkit-transform: skewX(-25deg); /* Safari */
    transform: skewX(-25deg);
    background-color: black;

}
.wmm-main-tab-navigation .tabs ul li.tab-navigation-item .tabs-navigation-bg .tab-item-text{

    -ms-transform: skewX(25deg); /* IE 9 */
    -webkit-transform: skewX(25deg); /* Safari */
    transform: skewX(25deg);
}
.wmm-main-tab-navigation .tabs ul li.tab-navigation-item .tabs-navigation-bg .tab-item-text a{
    display: block;
    padding: 10px;
    text-align: center;
    color: white;
    outline: none;
}

.wmm-main-tab-navigation .tabs ul li.tab-navigation-item.active .tabs-navigation-bg{

    background-color: white;
    border:2px solid #f00000;

}
.wmm-main-tab-navigation .tabs ul li.tab-navigation-item.active .tabs-navigation-bg .tab-item-text a{
    color: black;
    padding-bottom: 7px;

}

.wmm-main-tab-navigation .tabs ul li.tab-navigation-item .tabs-navigation-bg .tab-item-text a:hover,
.wmm-main-tab-navigation .tabs ul li.tab-navigation-item.active .tabs-navigation-bg .tab-item-text a:hover,
.wmm-main-tab-navigation .tabs ul li.tab-navigation-item .tabs-navigation-bg .tab-item-text a:focus,
.wmm-main-tab-navigation .tabs ul li.tab-navigation-item.active .tabs-navigation-bg .tab-item-text a:focus{
    color: white;
}
.wmm-main-tab-navigation .tabs ul li.tab-navigation-item .tabs-navigation-bg .tab-item-text a:hover,
.wmm-main-tab-navigation .tabs ul li.tab-navigation-item.active .tabs-navigation-bg .tab-item-text a:hover{
    color: #f00000;
}


/*
######## CONTENT ########################
*/

.wmm-container-bg{
    background-image: url("../img/container-bg.png");
    background-repeat: repeat;
}
.wmm-container-bg .wmm-rows{
    background:none;
}
.wmm-content-bg{
    background-image: url("../img/content-bg.png");
    background-repeat: repeat;
    min-height: 20px;
}
.wmm-container-bg .wmm-content-bg .wmm-main-content-modules{
}
.wmm-container-bg .wmm-content-bg .wmm-main-content-modules .wmm-content-Modules-right{
    background-color: black;
    min-height: 250px;
    padding: 20px;
}
.wmm-container-bg .wmm-content-bg .wmm-main-content-modules .wmm-content-Modules-left{
    padding: 20px 40px;
    min-height: 250px;
}
.wmm-container-bg .wmm-content-bg .wmm-main-content-modules .wmm-content-Modules-left .wmm-modules h3 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    font-family: bruin,verdana;
    font-size: 100%;
    height: auto;
    padding: 0;
    margin: 0 0 1px;
}
.wmm-container-bg .wmm-content-bg .wmm-main-content-modules .wmm-content-Modules-left .wmm-modules h3 > .ui-icon {
    display: none;
}

.wmm-container-bg .wmm-content-bg .wmm-main-content-modules .wmm-content-Modules-left .wmm-modules .wmm-module-header {
    border-bottom: 4px solid black;
    padding-left: 20px;
}
.wmm-container-bg .wmm-content-bg .wmm-main-content-modules .wmm-content-Modules-left .wmm-modules .wmm-module-header .wmm-module-header-skew {
    background-color: #f00000;
    color: white;
    padding: 5px;
    width: 220px;
    -ms-transform: skewX(-25deg); /* IE 9 */
    -webkit-transform: skewX(-25deg); /* Safari */
    transform: skewX(-25deg);
}
.wmm-container-bg .wmm-content-bg .wmm-main-content-modules .wmm-content-Modules-left .wmm-modules .wmm-module-header .wmm-module-header-skew >div{

    -ms-transform: skewX(25deg); /* IE 9 */
    -webkit-transform: skewX(25deg); /* Safari */
    transform: skewX(25deg);
}
.wmm-container-bg .wmm-content-bg .wmm-main-content-modules .wmm-content-Modules-left .wmm-modules .wmm-module-header .wmm-module-header-skew .glyphicon {
    color: white;
    font-size: 80%;
    text-shadow: none;
}
.wmm-container-bg .wmm-content-bg .wmm-main-content-modules .wmm-content-Modules-left .wmm-modules .wmm-module-header .wmm-module-header-skew .wmm-tab-title {
    padding-left: 10px;
}
.wmm-container-bg .wmm-content-bg .wmm-main-content-modules .wmm-content-Modules-left .wmm-modules .wmm-module-header .wmm-module-header-skew .glyphicon.glyphicon-minus {
    display:none;
}
.wmm-container-bg .wmm-content-bg .wmm-main-content-modules .wmm-content-Modules-left .wmm-modules .ui-state-active .wmm-module-header .wmm-module-header-skew .glyphicon.glyphicon-plus {
    display:none;
}
.wmm-container-bg .wmm-content-bg .wmm-main-content-modules .wmm-content-Modules-left .wmm-modules .ui-state-active .wmm-module-header .wmm-module-header-skew .glyphicon.glyphicon-minus {
    display:inline;
}
.wmm-container-bg .wmm-content-bg .wmm-main-content-modules .wmm-content-Modules-left h3.ui-state-hover {
    box-shadow: none;
}


/*
######## FOOTER ########################
*/
.wmm-footer {
    background-color: black;
    color: white;
}
.wmm-footer .wmm-main-footer ul {
    display: table;
}
.wmm-footer .wmm-main-footer ul divider {
    padding: 5px 0;
}
.wmm-footer .wmm-main-footer ul .divider {
    padding: 10px 0;
}
.wmm-footer .wmm-main-footer ul li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: white;
    display: block;
    font-size: 10px;
}
.wmm-footer .wmm-main-footer ul li a:hover {
    color: #f00000;
}
























.wmm-blackbg{
    background-color: black;
    color: white;
}
.wmm-whitebg{
    background-color: white;
    color: black;
}





@media screen and (max-width: 767px) {
    .wmm-user-properties-cell-container-block-2 {
        width: 65px;
    }
    .wmm-user-properties-cell-container-block-3 {
        width: 155px;
    }
    .wmm-user-properties-cell-container {
        width: 44px;
    }
    .wmm-user-properties-block-right .wmm-user-properties-row > div {
        float: left;
    }
    .wmm-navigation .navbar-default ul.navbar-nav > li {
        background-color: #000;
        margin-right: 0;
        transform: skewX(0deg);
        width: 100%;
    }
    .wmm-navigation .navbar-default ul.navbar-nav > li > a, .wmm-navigation .navbar-default ul.navbar-nav > li > a:hover, .wmm-navigation .navbar-default ul.navbar-nav > li > a:focus, .wmm-navigation .navbar-default ul.navbar-nav > li > a:link {
        transform: skewX(0deg);
    }
    .wmm-navigation .navbar-default ul.navbar-nav {
        margin: 0 0 5px;
    }
    .wmm-meta-and-header {
        background-size: auto auto;
    }


}

.wmm-login-form .row div,
.wmm-registration-form .row div {
    padding: 5px 5px;
}
.wmm-login-form .row div label,
.wmm-registration-form .row div label {
    float:right;
    font-size:12px;
    padding-top:10px;
}
.wmm-login-form .row div input,
.wmm-registration-form .row div input {
    max-width: 200px;
}
a.wmm-logo {
    display: inline-block;
    width: 50px;
    height:20px;
    background-size: 90%;
    /* SVG vectoriel — net à toutes les tailles (l'ancien PNG reste dans img/) */
    background-image: url(../img/wmm-logo-white.svg?v=3);
    background-repeat: no-repeat;
    background-position: left center;
    margin: 2px 0px;
}
.wmm-content-modules-center{
    padding-bottom: 20px;
}

/* Variables pour la couleur et l'angle d'inclinaison */
:root {
  --angle: -15deg; /* Angle d'inclinaison */
  --red-color: #c30000; /* Couleur rouge de l'exemple */
  --black-color: #222;
  --white-color: #fff;
}

.angled-menu ul {
  list-style: none; /* Supprime les puces */
  padding: 0;
  margin: 0;
  display: flex; /* Aligne les éléments côte à côte */
}

.angled-menu li, .wmm-accordion .panel-heading {
  /* 1. Applique l'inclinaison à l'onglet */
  transform: skewX(var(--angle));
  
  /* Pour l'apparence */
  background: var(--black-color); 
  border: 1px solid var(--red-color);
  border-right: none; /* Permet aux bords inclinés de se toucher */
  margin-right: -5px; /* Chevauchement pour masquer le bord */
  position: relative;
  z-index: 1; /* Assure que l'onglet est au-dessus des autres */
  min-width: 120px;
  text-align: center;
}

.angled-menu li:last-child {
  border-right: 1px solid var(--red-color); /* Remet le bord droit pour le dernier */
  margin-right: 0; 
}

/* Style de l'onglet actif */
.angled-menu li.active {
  background: var(--red-color);
  z-index: 2; /* Pour qu'il chevauche légèrement les inactifs */
}

.angled-menu li a  {
  /* 2. Compense l'inclinaison du parent pour que le contenu soit droit */
  transform: skewX(calc(var(--angle) * -1));
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: var(--white-color);
  font-weight: bold;
  border-radius: 0px;
}

.angled-menu li.active a,
.angled-menu li.active a:focus,
.angled-menu li.active a:hover,
.angled-menu li.active a:active{
    background: none;
    color:black;
}
.angled-menu li a:hover,
.angled-menu li a:focus,
.angled-menu li a:active{
    color:  black;
    background: none;
}
.angled-menu li:hover{
    background: var(--red-color);
}
 .wmm-accordion .panel-heading{ 
     border-radius: 0px;
     margin: 0 10px;
     padding: 0px 15px;
     background: var(--red-color);
     color: var(--white-color);
     min-width:250px;
 }
.wmm-accordion .panel-heading > * {
    transform: skewX(calc(var(--angle) * -1));
     font-weight: bold;
     font-size: 14px;
}
.wmm-accordion .panel-heading .badge {
    margin: 0 5px;
}
 .wmm-accordion .panel-default,
 .wmm-accordion .panel-primary,
 .wmm-accordion .panel-danger, .wmm-accordion .panel {
     border:none;
 }
.wmm-accordion .panel-heading + .panel-collapse > .panel-body{
    border-top: 0px solid var(--red-color);
    
}

.wmm-content-module .progress{
    background: var(--black-color);
    border: 0px solid var(--black-color);
    border-radius: 0px;
    margin:5px 20% 10px 0;
    padding:1px;
    height: 10px;
}
.wmm-content-module .progress .progress-bar{
    background: var(--red-color);
    border: none;
    border-radius: 0px; 
}
.wmm-accordion .panel-heading a {
    display: inline-block;
    width: 100%;
    padding: 5px 0px;
    color: var(--white-color);
}
.wmm-accordion .panel-heading a:hover,
.wmm-accordion .panel-heading a:focus {
    color: var(--white-color);
    background: none;
}

/* Accordéons imbriqués — panel-heading noir (nested wmm-accordion OU panel dans panel-body) */
.wmm-accordion .wmm-accordion .panel-heading,
.wmm-accordion .panel-body > .panel > .panel-heading {
    background: var(--black-color);
    border-left: 3px solid var(--red-color);
    margin: 0 5px;
}

/* ===== STAT CARDS (titantron) ===== */
.wmm-stat-card {
    display: inline-block;
    background: var(--black-color);
    border: 1px solid var(--red-color);
    border-top: 3px solid var(--red-color);
    padding: 10px 15px;
    margin: 5px;
    min-width: 80px;
    text-align: center;
    vertical-align: top;
}
.wmm-stat-value {
    display: block;
    font-size: 28px;
    font-weight: bold;
    color: var(--white-color);
    line-height: 1;
}
.wmm-stat-label {
    display: block;
    font-size: 10px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* ===== RESULTS TABLE (titantron match history) ===== */
.wmm-results-table {
    width: 100%;
    border-collapse: collapse;
}
.wmm-results-table thead tr {
    background: var(--red-color);
    color: var(--white-color);
}
.wmm-results-table th {
    padding: 6px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
}
.wmm-results-table tbody tr {
    background: var(--black-color);
    border-bottom: 1px solid #333;
    color: var(--white-color);
}
.wmm-results-table tbody tr:nth-child(even) { background: #1a1a1a; }
.wmm-results-table td {
    padding: 6px 10px;
    font-size: 12px;
    vertical-align: middle;
}
.wmm-results-table .result-win  { color: #4caf50; font-weight: bold; }
.wmm-results-table .result-loss { color: var(--red-color); font-weight: bold; }

/* ===== COMMENTARY SEGMENTS & TOOLTIPS ===== */
wmm-segment { display: inline; }

.wmm-seg-superstar,
.wmm-seg-move {
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
}
.wmm-seg-superstar { color: #2196F3; }
.wmm-seg-move      { color: #4CAF50; }

/* Élément qui NOMME un PPV (directive wmm-ppv-tip). Il se greffe sur du
   balisage existant dans des contextes très différents — bandeau sombre du
   chapiteau, cellules claires du calendrier — donc il hérite de la couleur
   ambiante au lieu d'en imposer une. */
.wmm-ppv-link {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

/* ===== FICHE DE SURVOL (tooltip) =====
   Montée sur <body> en position:fixed par la directive wmmSegment — c'est ce
   qui l'empêche d'être rognée par l'overflow des panels et accordéons. Les
   coordonnées sont posées en JS ; ne pas remettre de positionnement ici. */
.wmm-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10050;
    width: 290px;
    /* Filet de sécurité en plus du clamp JS : sur un très petit écran (320px),
       290px + les 8px de marge de chaque côté ne laisse presque rien. */
    max-width: calc(100vw - 16px);
    background: #fff;
    color: #2b2b2b;
    border: 1px solid #e2e2e2;
    border-top: 4px solid #9e9e9e;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
    pointer-events: none;
    /* Masquée tant que le JS ne l'a pas placée, sinon elle apparaît
       brièvement en haut à gauche de l'écran. */
    opacity: 0;
    transition: opacity .12s ease;
}
.wmm-tip.is-placed { opacity: 1; }

/* ---- Écrans tactiles : fiche centrée façon modale ----
   Pas de calcul de position — le centrage CSS pur reste correct même quand
   la carte grandit après le chargement des données (contrairement à un
   ancrage JS, qu'il faudrait recalculer). Scroll interne si la fiche est
   plus haute que l'écran (petit téléphone, palmarès complet). */
.wmm-tip.is-touch {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
.wmm-tip-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 10049; /* juste sous .wmm-tip */
    opacity: 0;
    transition: opacity .12s ease;
}
.wmm-tip-backdrop.is-placed { opacity: 1; }

/* La fiche a pointer-events:none (elle ne doit pas intercepter le survol
   souris) — le bouton de fermeture doit rester cliquable au-dessus de ça. */
.wmm-tip-close {
    display: none;
    position: absolute;
    top: 8px; right: 8px;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: none;
    background: #f0f0f0;
    color: #666;
    font-size: 13px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
}
.wmm-tip.is-touch .wmm-tip-close { display: block; }
/* Sans ça le bouton chevaucherait le badge OVR / niveau de puissance,
   poussé au bord droit par .wmm-tip-head (justify-content:space-between). */
.wmm-tip.is-touch .wmm-tip-head { padding-right: 26px; }

.wmm-tip-superstar      { border-top-color: #2196F3; }
.wmm-tip-move           { border-top-color: #4CAF50; }
.wmm-tip-power-FINISHER { border-top-color: #f44336; }
.wmm-tip-power-HIGH     { border-top-color: #ff9800; }
.wmm-tip-power-MEDIUM   { border-top-color: #fbc02d; }
.wmm-tip-power-LOW      { border-top-color: #9e9e9e; }

/* Fiche PPV — le palier se lit au premier coup d'œil à la couleur du liseré.
   Les règles de palier suivent .wmm-tip-ppv : même spécificité, l'ordre
   décide, donc GrandSlam/Super GrandSlam l'emportent sur la teinte de base. */
.wmm-tip-ppv                  { border-top-color: #7e57c2; }
.wmm-tip-tier-GRANDSLAM       { border-top-color: #ffa000; }
.wmm-tip-tier-SUPER_GRANDSLAM { border-top-color: #d32f2f; }

.wmm-tip-loading {
    color: #999;
    text-align: center;
    padding: 10px 0;
}

/* -- En-tête -- */
.wmm-tip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.wmm-tip-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}
.wmm-tip-ovr {
    flex: none;
    min-width: 34px;
    text-align: center;
    background: #2196F3;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border-radius: 5px;
    padding: 2px 7px;
}
.wmm-tip-power {
    flex: none;
    background: #f0f0f0;
    color: #555;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    border-radius: 4px;
    padding: 3px 7px;
}
.wmm-tip-sub {
    color: #888;
    font-size: 11px;
    margin-top: 2px;
}

/* Coefficient d'importance du PPV, en pastille — teinte accordée au palier. */
.wmm-tip-coef {
    background: #ede7f6;
    color: #5e35b1;
    font-weight: 700;
    font-size: 12px;
    border-radius: 4px;
    padding: 3px 7px;
    white-space: nowrap;
}
.wmm-tip-tier-GRANDSLAM .wmm-tip-coef       { background: #fff3e0; color: #e65100; }
.wmm-tip-tier-SUPER_GRANDSLAM .wmm-tip-coef { background: #ffebee; color: #c62828; }
.wmm-tip-desc {
    font-size: 11px;
    line-height: 1.45;
    color: #555;
}

/* -- Sections -- */
.wmm-tip-section {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid #f0f0f0;
}
.wmm-tip-label {
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 9px;
    font-weight: 700;
    color: #aaa;
    margin-bottom: 4px;
}
.wmm-tip-none {
    color: #bbb;
    font-style: italic;
    font-size: 11px;
}

/* -- Bilan V/M -- */
.wmm-tip-record {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.wmm-tip-record-val { font-size: 16px; font-weight: 700; color: #2E7D32; }
.wmm-tip-record-val .sep { color: #ccc; font-weight: 400; margin: 0 1px; }
.wmm-tip-record-pct { font-size: 12px; font-weight: 700; color: #2E7D32; }
.wmm-tip-record-sub { font-size: 10px; color: #aaa; text-transform: uppercase; }
.wmm-tip-bar {
    height: 4px;
    background: #eee;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 5px;
}
.wmm-tip-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #66bb6a, #2E7D32);
}

/* -- Chips -- */
.wmm-tip-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wmm-tip-chip {
    background: #f4f4f4;
    color: #555;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.wmm-tip-chip.is-gold   { background: #fdf3d4; color: #8a6d00; }
.wmm-tip-chip.is-silver { background: #f0f0f0; color: #6b6b6b; }
.wmm-tip-chip.is-bronze { background: #f6e5d8; color: #8a5325; }
.wmm-tip-chip.is-ppv    { background: #e8f1fd; color: #1565c0; }

/* -- Métriques de move -- */
.wmm-tip-metrics {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.wmm-tip-metric {
    flex: 1;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    padding: 6px 4px;
    text-align: center;
}
.wmm-tip-metric .val {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    line-height: 1.1;
}
.wmm-tip-metric .val.is-warn { color: #e65100; }
.wmm-tip-metric .key {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #aaa;
    margin-top: 2px;
}

/* -- Placeholder animation -- */
.wmm-tip-anim {
    margin-top: 10px;
    padding: 8px;
    border: 1px dashed #ddd;
    border-radius: 6px;
    text-align: center;
    color: #bbb;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
/* ===== LEAGUE ROSTER CHIPS ===== */
.wmm-league-roster {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 8px;
}
/* ===== AVATAR GÉNÉRIQUE (sm / md / lg) ===== */
.wmm-avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.15);
}
.wmm-avatar-sm { width: 30px; height: 30px; }
.wmm-avatar-md { width: 48px; height: 48px; }
.wmm-avatar-lg { width: 80px; height: 80px; border-color: #c30000; }

/* ===== CHIP GÉNÉRIQUE (sm / md / lg) ===== */
.wmm-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 3px 8px 3px 6px;
    font-size: 0.82rem;
    cursor: default;
    transition: border-color 0.15s;
}
.wmm-chip:hover        { border-color: rgba(255,255,255,0.3); }
.wmm-chip-sm           { font-size: 0.75rem; padding: 2px 6px 2px 4px; }
.wmm-chip-md           { font-size: 0.82rem; padding: 3px 8px 3px 6px; }
.wmm-chip-lg           { font-size: 0.95rem; padding: 5px 12px 5px 8px; }
.wmm-chip-user         { border-color: var(--red-color); }
.wmm-chip-ovr {
    font-size: 0.72rem;
    font-weight: bold;
    color: #888;
    padding-left: 1px;
}
.wmm-chip-user .wmm-chip-ovr { color: var(--red-color); }
.wmm-chip-icon {
    font-size: 1.12rem;
    opacity: 0.85;
}

/* Texte lisible sur barres d'accordéon colorées */
.wmm-accordion .panel-heading a .wmm-seg-superstar,
.wmm-accordion .panel-heading a .wmm-seg-move {
    color: inherit;
    text-decoration-color: rgba(255,255,255,0.5);
}
.wmm-accordion .panel-heading a .text-muted {
    color: rgba(255,255,255,0.75) !important;
}

/* Participants gagnant / perdant dans les tables de matchs */
.wmm-participant-win  { background: rgba(92,184,92,.25); border-radius: 3px; padding: 1px 4px; }
.wmm-participant-loss { background: rgba(217,83,79,.25); border-radius: 3px; padding: 1px 4px; }

/* Ligne dépliante de commentaire dans les tables de matchs */
.wmm-commentary-row > td.wmm-commentary-cell {
    padding: 0 !important;
    border-top: none !important;
    background: #111;
}
.wmm-commentary-row .wmm-commentary-feed { color: #ccc; }

/* ===================================================================
   DÉROULÉ DE MATCH (page commentaires) — 3 colonnes 5 / 60 / 35
   Reprend le langage des pages Superstar / Ligue / Ranking : carte
   blanche à bord fin, barres .ss-bar, noms en bleu, moves en vert.
   =================================================================== */
.mcm-topbar { margin-bottom: 12px; }

.mcm {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-left: 4px solid #2196F3;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.mcm-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 12px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}
.mcm-type {
    font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: #fff; background: #1a1a1a; padding: 3px 9px; border-radius: 3px;
}
.mcm-title { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.mcm-meta  { margin-left: auto; font-size: 12px; color: #999; }
.mcm-meta .fa { margin-right: 3px; }

/* Ouverture / verdict */
.mcm-open {
    padding: 11px 14px; font-size: 13.5px; color: #555;
    background: #fafafa; border-bottom: 1px solid #f0f0f0;
}
.mcm-close {
    padding: 12px 14px; border-top: 2px solid #4CAF50; background: #fafafa;
    font-size: 15px; font-weight: 700; color: #2E7D32;
}
.mcm-close .fa { margin-right: 6px; }

/* Grille */
.mcm-cols { display: grid; grid-template-columns: 5% 60% 35%; }

.mcm-turn { border-bottom: 1px solid #f0f0f0; }
.mcm-turn:nth-child(even) { background: #fcfcfc; }
/* Tours où rien ne bouge (relever en boucle) : mis en retrait */
.mcm-turn.is-idle .mcm-c2 { opacity: 0.5; }
.mcm-turn.is-key { background: rgba(195,0,0,0.045); }

/* Pas de filet entre le tour et le récit — ils se lisent ensemble */
.mcm-c1 { padding: 8px 4px 8px 10px; }
.mcm-c2 { padding: 8px 14px 8px 4px; border-right: 1px solid #f0f0f0; }
.mcm-c3 { padding: 7px 12px 8px; }

.mcm-tno { font-size: 10.5px; font-weight: 700; color: #555; white-space: nowrap; }
.mcm-turn.is-key .mcm-tno { color: #c30000; }

.mcm-ln { font-size: 12.5px; color: #333; line-height: 1.5; }

/* Statistiques de fin de tour — un bloc par superstar concernée par
   l'action du tour, son nom dedans (pas en en-tête de colonne : ça
   disparaissait sur mobile et ne tenait pas au-delà de 2 participants). */
.mcm-actor { margin-bottom: 9px; }
.mcm-actor:last-child { margin-bottom: 0; }
.mcm-actor-name {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; color: #2196F3;
    margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mcm-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.mcm-mcell { display: flex; align-items: center; gap: 5px; min-width: 0; }
.mcm-mcell .mcm-k { flex: none; width: 22px; }

.mcm-k { font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; color: #999; }

.mcm-bar {
    flex: 1; min-width: 26px; height: 7px;
    background: #ececec; border-radius: 4px; overflow: hidden;
}
.mcm-fill { display: block; height: 100%; border-radius: 4px; background: #9e9e9e; }
.mcm-fill.is-low  { background: #e57373; }
.mcm-fill.is-mid  { background: #ffb300; }
.mcm-fill.is-high { background: #4CAF50; }
.mcm-fill.is-mom  { background: #2196F3; }

.mcm-v {
    font-family: Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    color: #1a1a1a; min-width: 20px; text-align: right; flex: none;
}
.mcm-d {
    font-family: Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
    min-width: 25px; flex: none;
}
.mcm-d.is-up   { color: #2E7D32; }
.mcm-d.is-down { color: #c30000; }
.mcm-d.is-flat { color: #bbb; }

.mcm-flag {
    font-size: 8.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    color: #fff; background: #c30000; border-radius: 2px; padding: 0 4px; flex: none;
}
.mcm-flag.is-fin { background: #e0a800; color: #1a1a1a; }

/* Légende */
.mcm-leg {
    display: flex; flex-wrap: wrap; gap: 16px;
    padding: 8px 12px; background: #fafafa; border-top: 1px solid #f0f0f0;
    font-size: 11px; color: #999;
}
.mcm-leg > div { display: flex; align-items: center; gap: 6px; }
.mcm-leg .mcm-bar { width: 24px; flex: none; }

/* ---- Volet interne (accordéons Titantron) ----
   Même grille, resserrée et scrollable dans la carte de match. */
.mcm-inline {
    background: #fafafa;
    border-top: 2px solid #c30000;
    max-height: 300px;
    overflow-y: auto;
}
.mcm-inline .mcm-turn { background: #fff; }
.mcm-inline .mcm-turn:nth-child(even) { background: #fcfcfc; }
.mcm-inline .mcm-c1 { padding: 6px 4px 6px 8px; }
.mcm-inline .mcm-c2 { padding: 6px 10px 6px 4px; }
.mcm-inline .mcm-c3 { padding: 5px 10px 6px; }
.mcm-inline .mcm-ln  { font-size: 12px; }
.mcm-inline .mcm-tno { font-size: 10px; }
.mcm-inline .mcm-close { font-size: 13px; padding: 9px 12px; }
.mcm-inline .tt-commentary-empty { padding: 10px 12px; }

/* Lignes techniques */
.mcm-debug {
    padding: 10px 14px; background: #14141c; border-top: 2px solid #c30000;
    max-height: 320px; overflow-y: auto;
}
.mcm-debug-line {
    font-family: Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 11px; color: #b8b8c4; padding: 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mcm-debug-turn { color: #64b5f6; margin-right: 6px; }
.mcm-controls { padding: 9px 14px; border-top: 1px solid #f0f0f0; }

@media (max-width: 820px) {
    .mcm-cols { grid-template-columns: 1fr; }
    .mcm-c2 { border-right: none; padding: 4px 14px 8px; }
    .mcm-c1 { padding: 8px 14px 0; }
    .mcm-c3 { border-top: 1px solid #f0f0f0; }
    .mcm-fhead { display: none; }
}

/* Bouton logout dans la bande noire supérieure */
.wmm-logout-btn {
    float: right;
    color: rgba(255,255,255,0.6);
    font-size: 0.82rem;
    padding: 4px 8px;
    border: 0px solid rgba(255,255,255,0.2);
    border-radius: 3px;
    transition: color 0.15s, border-color 0.15s;
    margin-top: 2px;
}
.wmm-logout-btn:hover { color: #fff; border-color: var(--red-color); }
.wmm-logout-btn .fa { margin-right: 4px; }

/* =====================================================================
   NAVIGATION MOBILE — barre fixe en bas (visible uniquement sur xs)
   ===================================================================== */
.wmm-mobile-nav {
    display: none; /* caché par défaut; activé via media query */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    height: 56px;
    background: #111;
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-direction: row;
    align-items: stretch;
}
.wmm-mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.45);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    padding: 4px 2px 2px;
    transition: color 0.15s;
    overflow: hidden;
}
.wmm-mobile-nav-item i {
    font-size: 1.15rem;
    margin-bottom: 2px;
    display: block;
}
.wmm-mobile-nav-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.wmm-mobile-nav-item:hover,
.wmm-mobile-nav-item.wmm-mobile-nav-active {
    color: var(--red-color);
    text-decoration: none;
}
.wmm-mobile-nav-item.wmm-mobile-nav-active i {
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    /* Afficher la barre mobile */
    .wmm-mobile-nav { display: flex; }

    /* Cacher la navigation desktop (pills) */
    .wmm-navigation { display: none !important; }

    /* Espace sous le contenu pour ne pas être masqué par la barre */
    .wmm-container-bg { padding-bottom: 60px; }
    .wmm-footer       { padding-bottom: 62px; }
}


/* =====================================================================
   GORILLA POSITION — page admin (régie du GM)
   Palette : noir profond, rouge sang, or. Volontairement distincte des
   autres pages : c'est le backstage, pas le show.
   ===================================================================== */

/* Bouton Admin dans le bandeau (à côté de logout) */
.wmm-admin-btn {
    float: right;
    color: #fbbf24;
    font-size: 0.82rem;
    padding: 4px 10px;
    margin-top: 2px;
    margin-right: 10px;
    border: 1px solid rgba(251,191,36,0.35);
    border-radius: 3px;
    transition: all 0.15s;
}
.wmm-admin-btn:hover {
    color: #111;
    background: #fbbf24;
    border-color: #fbbf24;
    text-decoration: none;
}
.wmm-admin-btn .fa { margin-right: 4px; }

/* ---- Conteneur & hero ---- */
.gorilla {
    color: #e8e8e8;
    font-family: 'Segoe UI', Roboto, sans-serif;
}
.gorilla-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 26px;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0505 100%);
    border: 1px solid #2a2a2a;
    border-left: 4px solid var(--red-color);
    border-radius: 6px;
    margin-bottom: 20px;
}
.gorilla-hero h1 {
    font-size: 2rem;
    margin: 4px 0;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.gorilla-hero p { color: #999; margin: 0; font-size: 0.9rem; }
.gorilla-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--red-color);
}
.gorilla-live .dot {
    width: 9px; height: 9px;
    background: var(--red-color);
    border-radius: 50%;
    animation: gorillaPulse 1.4s infinite;
    box-shadow: 0 0 8px var(--red-color);
}
@keyframes gorillaPulse { 0%,100%{opacity:1;} 50%{opacity:0.25;} }
.gorilla-home-btn {
    background: transparent;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 9px 16px;
    font-size: 0.85rem;
    transition: all 0.15s;
    cursor: pointer;
}
.gorilla-home-btn:hover { background: #fff; color: #111; border-color: #fff; }

.gorilla-loading { text-align: center; padding: 60px; color: #777; }

/* ---- Panneaux ---- */
.gorilla-panel {
    background: #111;
    border: 1px solid #262626;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
}
.gorilla-panel-title {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin: 0 0 6px;
    border-bottom: 1px solid #262626;
    padding-bottom: 10px;
}
.gorilla-panel-title .fa { color: var(--red-color); margin-right: 8px; }
.gorilla-panel-hint { color: #888; font-size: 0.82rem; margin: 8px 0 16px; }

/* ---- Cycle du show (phases) ---- */
.gorilla-phases {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
}
.gorilla-phase {
    flex: 1 1 300px;
    display: flex;
    gap: 14px;
    background: #0c0c0c;
    border: 1px solid #262626;
    border-radius: 6px;
    padding: 18px;
}
.gorilla-phase.morning { border-top: 3px solid #f0a000; }
.gorilla-phase.evening { border-top: 3px solid #5b6cff; }
.gorilla-phase .phase-icon { font-size: 2rem; opacity: 0.85; }
.gorilla-phase.morning .phase-icon { color: #f0a000; }
.gorilla-phase.evening .phase-icon { color: #7b8cff; }
.gorilla-phase h3 { margin: 0 0 6px; color: #fff; font-size: 1rem; }
.gorilla-phase p { color: #999; font-size: 0.8rem; margin: 0 0 12px; }
.gorilla-phase-arrow { display: flex; align-items: center; color: #444; font-size: 1.4rem; }

.gorilla-btn {
    border: none;
    border-radius: 4px;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    color: #fff;
}
.gorilla-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.gorilla-btn .fa { margin-right: 6px; }
.gorilla-btn-book { background: #f0a000; color: #111; }
.gorilla-btn-book:hover:not(:disabled) { background: #ffb920; }
.gorilla-btn-go { background: #4a5bff; }
.gorilla-btn-go:hover:not(:disabled) { background: #6274ff; }

/* ---- Colonnes (settings | side) ---- */
.gorilla-columns { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.gorilla-settings { flex: 2 1 520px; }
.gorilla-side { flex: 1 1 300px; }

.gorilla-settings-head { display: flex; justify-content: space-between; align-items: center; }
.gorilla-settings-actions { display: flex; align-items: center; gap: 10px; }
.gorilla-override-badge {
    background: rgba(251,191,36,0.15);
    color: #fbbf24;
    font-size: 0.72rem;
    padding: 3px 9px;
    border-radius: 10px;
    border: 1px solid rgba(251,191,36,0.3);
}
.gorilla-mini-btn {
    background: transparent;
    color: #aaa;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.76rem;
    cursor: pointer;
    transition: all 0.15s;
}
.gorilla-mini-btn:hover:not(:disabled) { color: #fff; border-color: #666; }
.gorilla-mini-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.gorilla-search {
    position: relative;
    margin-bottom: 16px;
}
.gorilla-search .fa { position: absolute; left: 11px; top: 11px; color: #666; }
.gorilla-search input {
    width: 100%;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 4px;
    color: #eee;
    padding: 9px 12px 9px 32px;
    font-size: 0.85rem;
}
.gorilla-search input:focus { outline: none; border-color: var(--red-color); }

.gorilla-group { margin-bottom: 18px; }
.gorilla-group-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #f0a000;
    margin: 0 0 8px;
}
.gorilla-group-title .fa { margin-right: 6px; }

.gorilla-setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #1e1e1e;
    border-radius: 4px;
    margin-bottom: 6px;
    background: #0c0c0c;
    transition: border-color 0.15s;
}
.gorilla-setting.is-overridden { border-left: 3px solid #fbbf24; background: #12100a; }
.gorilla-setting .setting-info { display: flex; flex-direction: column; gap: 2px; }
.setting-key { color: #ddd; font-size: 0.8rem; background: none; padding: 0; }
.setting-default { color: #fbbf24; font-size: 0.68rem; }
.setting-control { display: flex; align-items: center; gap: 8px; }
.setting-input {
    width: 90px;
    background: #000;
    border: 1px solid #333;
    border-radius: 4px;
    color: #fff;
    padding: 5px 8px;
    font-size: 0.85rem;
    text-align: right;
}
.setting-input:focus { outline: none; border-color: var(--red-color); }
.setting-reset {
    background: transparent;
    border: none;
    color: #fbbf24;
    cursor: pointer;
    font-size: 0.85rem;
}
.setting-reset:hover { color: #fff; }
.setting-spin { color: #666; }

/* Switch booléen */
.gorilla-switch { position: relative; display: inline-block; width: 42px; height: 22px; margin: 0; }
.gorilla-switch input { opacity: 0; width: 0; height: 0; }
.gorilla-switch .slider {
    position: absolute; cursor: pointer; inset: 0;
    background: #333; border-radius: 22px; transition: 0.2s;
}
.gorilla-switch .slider:before {
    content: ""; position: absolute;
    height: 16px; width: 16px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%; transition: 0.2s;
}
.gorilla-switch input:checked + .slider { background: var(--red-color); }
.gorilla-switch input:checked + .slider:before { transform: translateX(20px); }

/* ---- Console ---- */
.gorilla-console .console-feed {
    background: #060606;
    border: 1px solid #222;
    border-radius: 4px;
    padding: 10px;
    max-height: 240px;
    overflow-y: auto;
    font-family: 'Consolas', monospace;
    font-size: 0.76rem;
}
.console-line { padding: 3px 0; border-bottom: 1px solid #141414; display: flex; gap: 8px; }
.console-line:last-child { border-bottom: none; }
.console-time { color: #555; flex-shrink: 0; }
.console-empty { color: #555; font-style: italic; }
.console-info .console-msg { color: #9db4d0; }
.console-success .console-msg { color: #5fd08a; }
.console-danger .console-msg { color: #ff6b6b; }

/* ---- Zone rouge ---- */
.gorilla-danger { border-color: #3a1010; background: #120808; }
.gorilla-danger .gorilla-panel-title { color: #ff6b6b; }
.gorilla-danger .gorilla-panel-title .fa { color: #ff6b6b; }
.gorilla-keyfield { position: relative; margin-bottom: 14px; }
.gorilla-keyfield .fa { position: absolute; left: 11px; top: 11px; color: #a55; }
.gorilla-keyfield input {
    width: 100%;
    background: #0a0505;
    border: 1px solid #4a1a1a;
    border-radius: 4px;
    color: #eee;
    padding: 9px 12px 9px 32px;
    font-size: 0.85rem;
}
.gorilla-keyfield input:focus { outline: none; border-color: var(--red-color); }
.gorilla-danger-actions { display: flex; flex-direction: column; gap: 8px; }
.gorilla-btn-ghost {
    background: transparent;
    border: 1px solid #444;
    color: #ccc;
}
.gorilla-btn-ghost:hover:not(:disabled) { background: #1e1e1e; color: #fff; }
.gorilla-btn-danger { background: var(--red-color); }
.gorilla-btn-danger:hover:not(:disabled) { background: #e01010; }

@media (max-width: 767px) {
    .gorilla-hero { flex-direction: column; gap: 14px; align-items: flex-start; }
    .gorilla-phase-arrow { transform: rotate(90deg); }
}

/* =====================================================================
   TITANTRON — contenu des accordéons (design clair)
   Couleurs : blanc (base) · rouge (#c30000, accents) · noir (texte/écran) ·
   bleu (#2196F3, superstars) · vert (#4CAF50, moves & victoires).
   Le cadre des accordéons (rouge niv.1 / noir imbriqué) n'est PAS touché ;
   on ne stylise que ce qui vit dans .panel-body.
   ===================================================================== */

/* Titres d'accordéons alignés à gauche (au lieu de centrés) — global */
.wmm-accordion .panel-heading { text-align: left; }
.wmm-accordion .panel-heading a { text-align: left; }

/* ---- Bannière : affiche du prochain PPV (hors accordéon) ----
   VISUELS DE PPV : le fond est pour l'instant un dégradé propre au palier.
   Quand les images seront prêtes, les brancher PPV par PPV sans rien toucher
   d'autre — l'attribut data-ppv porte la clé de l'enum :

       .tt-ppv-banner[data-ppv="MASTERMANIA"] {
           background-image:
               linear-gradient(135deg, rgba(74,11,11,.82), rgba(43,5,5,.88)),
               url('../img/ppv/mastermania.jpg');
           background-size: cover;
           background-position: center;
       }

   Garder le dégradé EN PREMIER dans background-image : il assombrit la photo
   et c'est lui qui garantit la lisibilité du texte quelle que soit l'image. */
.tt-ppv-banner {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 18px;
    padding: 22px 18px;
    color: #fff;
    text-align: center;
    background: linear-gradient(135deg, #2b1a4a 0%, #4a2c7a 50%, #1e1233 100%);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.tt-ppv-banner.tier-GRANDSLAM {
    background: linear-gradient(135deg, #4a3105 0%, #a3730c 50%, #2e1e02 100%);
}
.tt-ppv-banner.tier-SUPER_GRANDSLAM {
    background: linear-gradient(135deg, #4a0b0b 0%, #a81616 50%, #2b0505 100%);
}
.tt-ppv-inner { position: relative; z-index: 2; }

.tt-ppv-kicker {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
}
.tt-ppv-title {
    display: inline-block;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 6px 0 4px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.tt-ppv-tier {
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.8);
}
.tt-ppv-strip {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.18);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.72);
}

/* Étincelles décoratives — discrètes, puis vives le soir du PPV */
.tt-spark {
    position: absolute;
    z-index: 1;
    color: rgba(255,255,255,0.35);
    font-size: 14px;
    animation: ttSparkle 3.2s ease-in-out infinite;
}
.tt-spark.p1 { top: 14%; left: 8%;   animation-delay: 0s; }
.tt-spark.p2 { top: 68%; left: 16%;  animation-delay: .8s; }
.tt-spark.p3 { top: 22%; right: 11%; animation-delay: 1.5s; }
.tt-spark.p4 { top: 72%; right: 7%;  animation-delay: 2.3s; }
@keyframes ttSparkle {
    0%, 100% { opacity: .15; transform: scale(.8); }
    50%      { opacity: .9;  transform: scale(1.25); }
}

/* Le soir du PPV : l'affiche s'embrase. */
.tt-ppv-banner.is-tonight {
    animation: ttBannerGlow 1.6s ease-in-out infinite;
}
.tt-ppv-banner.is-tonight .tt-ppv-kicker,
.tt-ppv-banner.is-tonight .tt-ppv-title { color: #ffd54f; }
.tt-ppv-banner.is-tonight .tt-spark { color: #ffd54f; animation-duration: 1.1s; }
@keyframes ttBannerGlow {
    0%, 100% { box-shadow: 0 0 0 2px #ffd54f, 0 6px 22px rgba(255,213,79,0.35); }
    50%      { box-shadow: 0 0 0 2px #fff3c4, 0 6px 34px rgba(255,213,79,0.75); }
}

/* ---- Bandeau de la page Configuration ----
   Même famille visuelle que l'affiche du Titantron (dégradé par palier,
   étincelles, embrasement le soir du PPV), mais au service d'un contenu
   fonctionnel : les compteurs, la jauge de PA, puis le contexte de saison.
   Réutilise .tt-spark et .tt-ppv-strip — d'où leur présence ici. */
.cfg-banner {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 18px;
    padding: 20px 18px;
    color: #fff;
    background: linear-gradient(135deg, #2b1a4a 0%, #4a2c7a 50%, #1e1233 100%);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.cfg-banner.tier-GRANDSLAM {
    background: linear-gradient(135deg, #4a3105 0%, #a3730c 50%, #2e1e02 100%);
}
.cfg-banner.tier-SUPER_GRANDSLAM {
    background: linear-gradient(135deg, #4a0b0b 0%, #a81616 50%, #2b0505 100%);
}
.cfg-banner.is-tonight { animation: ttBannerGlow 1.6s ease-in-out infinite; }
.cfg-banner.is-tonight .tt-spark { color: #ffd54f; animation-duration: 1.1s; }
.cfg-banner-inner { position: relative; z-index: 2; }

.cfg-banner-head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
.cfg-banner-title {
    margin: 0;
    font-size: 22px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.cfg-banner-star {
    font-size: 12px; letter-spacing: 1px;
    color: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 3px;
    padding: 2px 8px;
}

.cfg-tiles {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 14px 0 12px;
}
.cfg-tile {
    flex: 1; min-width: 120px;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    padding: 10px 12px;
    text-align: center;
}
.cfg-tile-val {
    display: block;
    font-size: 22px; font-weight: 700; line-height: 1.1;
}
.cfg-tile-val.is-ok   { color: #a5d6a7; }
.cfg-tile-val.is-over { color: #ff8a80; }
.cfg-tile-key {
    display: block;
    margin-top: 4px;
    font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}

.cfg-gauge {
    height: 10px;
    border-radius: 5px;
    background: rgba(0,0,0,0.3);
    overflow: hidden;
}
.cfg-gauge-fill {
    height: 100%;
    background: linear-gradient(90deg, #66bb6a, #43a047);
    transition: width .25s ease;
}
.cfg-gauge.is-over .cfg-gauge-fill {
    background: linear-gradient(90deg, #ef5350, #c62828);
}
.cfg-gauge-legend {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
    margin-top: 6px;
    font-size: 10px; letter-spacing: .5px;
    color: rgba(255,255,255,0.6);
}

.cfg-warn {
    margin-top: 10px;
    background: rgba(198,40,40,0.35);
    border: 1px solid rgba(255,138,128,0.5);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12px;
    color: #ffcdd2;
}

/* La bande de saison réutilise .tt-ppv-strip — seul l'alignement diffère. */
.cfg-strip { justify-content: flex-start; }

@media (max-width: 767px) {
    .cfg-banner-title { font-size: 17px; letter-spacing: 1px; }
    .cfg-tile-val     { font-size: 18px; }
    .cfg-strip        { justify-content: center; }
}

/* ---- Calendrier de la saison (accordéon) ---- */
.tt-season { display: flex; flex-direction: column; gap: 6px; }
.tt-season-row { display: flex; align-items: stretch; gap: 8px; }
.tt-season-cycle {
    flex: 0 0 30px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #bbb; letter-spacing: .5px;
}
.tt-season-cells { display: flex; flex: 1; gap: 5px; }

.tt-day {
    flex: 1;
    min-width: 0;              /* sans ça, le nom du PPV impose la largeur */
    min-height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    background: #fafafa;
    font-size: 12px;
    color: #777;
}
.tt-day.is-past { opacity: .45; }
.tt-day-nr { font-weight: 600; }

/* Le PPV clôt la ligne : carreau plus large, nommé, mis en évidence. */
.tt-day.is-ppv {
    flex: 2.6;
    background: #ede7f6;
    border-color: #b39ddb;
    color: #4527a0;
}
.tt-day-ppv {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-align: center;
    line-height: 1.15;
    padding: 2px 4px;
}
.tt-day.is-ppv[data-tier="GRANDSLAM"] {
    background: #fff3e0; border-color: #ffb74d; color: #e65100;
}
.tt-day.is-ppv[data-tier="SUPER_GRANDSLAM"] {
    background: #ffebee; border-color: #ef5350; color: #b71c1c;
}

/* Jour actuel. Le second sélecteur est nécessaire pour repasser devant les
   règles de palier ci-dessus (plus spécifiques) quand le jour courant EST
   un jour de PPV. */
.tt-day.is-current,
.tt-day.is-ppv.is-current[data-tier] {
    background: #c30000;
    border-color: #c30000;
    color: #fff;
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(195,0,0,0.25);
}
.tt-day.is-current .tt-day-nr,
.tt-day.is-current .tt-day-ppv { color: #fff; }

.tt-season-legend {
    margin-top: 12px;
    display: flex; flex-wrap: wrap; gap: 14px;
    font-size: 10px; color: #999;
    text-transform: uppercase; letter-spacing: .5px;
}
.tt-legend-swatch {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: -1px;
}
.tt-legend-swatch.is-current { background: #c30000; }
.tt-legend-swatch.is-ppv     { background: #ede7f6; border: 1px solid #b39ddb; }
.tt-legend-swatch.is-gs      { background: #fff3e0; border: 1px solid #ffb74d; }
.tt-legend-swatch.is-sgs     { background: #ffebee; border: 1px solid #ef5350; }

@media (max-width: 767px) {
    .tt-ppv-title    { font-size: 24px; letter-spacing: 1px; }
    .tt-ppv-strip    { gap: 10px; font-size: 10px; }
    .tt-day          { min-height: 28px; font-size: 11px; }
    .tt-day-ppv      { font-size: 8px; }
    .tt-season-cycle { flex-basis: 22px; font-size: 9px; }
}

/* ---- Ruban de stats (Dernières nouvelles) ---- */
.tt-statribbon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}
.tt-stat {
    flex: 1 1 90px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-top: 3px solid #c30000;
    border-radius: 6px;
    padding: 12px 10px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.tt-stat-val {
    display: block;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: #1a1a1a;
}
.tt-stat-label {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #999;
}
.tt-stat.is-blue  { border-top-color: #2196F3; }
.tt-stat.is-blue  .tt-stat-val { color: #1565C0; }
.tt-stat.is-green { border-top-color: #4CAF50; }
.tt-stat.is-green .tt-stat-val { color: #2E7D32; }
.tt-stat.is-gold  { border-top-color: #e0a800; }
.tt-stat-titles { font-size: 20px; font-weight: 800; line-height: 1; }
.tt-stat-titles .g { color: #e0a800; }
.tt-stat-titles .s { color: #9e9e9e; }
.tt-stat-titles .b { color: #b06a3b; }
.tt-stat-titles .sep { color: #ddd; font-weight: 400; margin: 0 2px; }

/* ---- Fil d'actualités (Dernières nouvelles) ---- */
.tt-news { display: flex; flex-direction: column; gap: 10px; }
.tt-news-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #ececec;
    border-left: 4px solid #bbb;
    border-radius: 6px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.tt-news-item .tt-news-ico {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px;
}
.tt-news-item .tt-news-body { flex: 1; }
.tt-news-title { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: #1a1a1a; }
.tt-news-text  { margin: 0; font-size: 13px; color: #555; line-height: 1.5; }
.tt-news-win  { border-left-color: #4CAF50; }
.tt-news-win  .tt-news-ico { background: #4CAF50; }
.tt-news-loss { border-left-color: #c30000; }
.tt-news-loss .tt-news-ico { background: #c30000; }
.tt-news-next { border-left-color: #2196F3; }
.tt-news-next .tt-news-ico { background: #2196F3; }
/* Titres — la couleur de la ceinture porte l'information, pas le libellé.
   Les trophées de league (MIB, couronne, Rumble, Chamber) n'ont pas de
   division : ils prennent le violet. Une ceinture vacante reste grise. */
.tt-news-title-gold   { border-left-color: #C9A227; }
.tt-news-title-gold   .tt-news-ico { background: #C9A227; }
.tt-news-title-silver { border-left-color: #8E9BA6; }
.tt-news-title-silver .tt-news-ico { background: #8E9BA6; }
.tt-news-title-bronze { border-left-color: #A9713B; }
.tt-news-title-bronze .tt-news-ico { background: #A9713B; }
.tt-news-title-none   { border-left-color: #7E57C2; }
.tt-news-title-none   .tt-news-ico { background: #7E57C2; }
.tt-news-title-vacant { border-left-color: #c0c0c0; background: #fafafa; }
.tt-news-title-vacant .tt-news-ico { background: #c0c0c0; }
.tt-news-title-vacant .tt-news-title { color: #777; font-weight: 600; }
.tt-empty {
    text-align: center;
    color: #999;
    padding: 26px 10px;
    font-size: 13px;
}
.tt-empty .fa { display: block; font-size: 26px; opacity: 0.25; margin-bottom: 8px; }

/* ---- Cartes de match (simulés / mes matchs / à venir) ---- */
.tt-matchlist { display: flex; flex-direction: column; gap: 10px; }
.tt-match {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-left: 4px solid #d0d0d0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.tt-match:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.tt-match.tt-won  { border-left-color: #4CAF50; }
.tt-match.tt-lost { border-left-color: #c30000; }
.tt-match.tt-upcoming { border-left-color: #2196F3; }

.tt-match-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}
.tt-type {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: #1a1a1a;
    padding: 3px 9px;
    border-radius: 3px;
}
.tt-type.is-special { background: #c30000; }
.tt-match-meta {
    font-size: 12px;
    color: #999;
    margin-left: auto;
}
.tt-match-meta .fa { margin-right: 3px; }
.tt-match-actions { display: flex; gap: 5px; }
.tt-icon-btn {
    width: 28px; height: 28px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #666;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}
.tt-icon-btn:hover { background: #c30000; color: #fff; border-color: #c30000; text-decoration: none; }

.tt-bout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 12px 14px;
    font-size: 14px;
}
.tt-fighter { display: inline-flex; align-items: center; gap: 5px; }
.tt-fighter .wmm-seg-superstar { font-weight: 600; }
.tt-fighter.is-win  .wmm-seg-superstar { color: #2E7D32; font-weight: 700; }
.tt-fighter.is-loss .wmm-seg-superstar { color: #999; }
.tt-fighter.is-loss { opacity: 0.75; }
.tt-win-ico { color: #e0a800; font-size: 12px; }
.tt-vs {
    color: #bbb;
    font-size: 11px;
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 2px;
}

/* Lien entre coéquipiers d'un tag team : « A & B vs C & D ».
   Volontairement plus discret et plus serré que le « vs » qui, lui,
   sépare les deux camps. */
.tt-amp {
    color: #8a8a8a;
    font-size: 12px;
    font-weight: 400;
    margin: 0 1px;
}

/* ---- Écran de commentaire (dépliant) ---- */
.tt-commentary {
    background: #14141c;
    border-top: 2px solid #c30000;
    max-height: 260px;
    overflow-y: auto;
    padding: 12px 16px;
}
.tt-commentary-line {
    margin: 0 0 5px;
    font-size: 13px;
    line-height: 1.55;
    color: #d8d8d8;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tt-commentary-line:last-child { border-bottom: none; margin-bottom: 0; }
.tt-commentary-empty { color: #888; font-size: 12px; }
/* Segments sur fond sombre : bleu/vert plus lumineux */
.tt-commentary .wmm-seg-superstar { color: #64b5f6; }
.tt-commentary .wmm-seg-move      { color: #81c784; }

/* ---- Barre d'actions (Matchs à venir) ---- */
.tt-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.tt-action {
    flex: 1 1 200px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.tt-action-btn {
    width: 100%;
    border: none;
    border-radius: 5px;
    padding: 11px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    color: #fff;
}
.tt-action-btn .fa { margin-right: 6px; }
.tt-action-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tt-action-generate { background: #2196F3; }
.tt-action-generate:hover:not(:disabled) { background: #1976D2; }
.tt-action-simulate { background: #c30000; }
.tt-action-simulate:hover:not(:disabled) { background: #e01010; }
.tt-action-hint { margin: 8px 0 0; font-size: 11px; color: #999; }

.tt-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 5px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
}
.tt-alert-success { background: #eaf6ea; border: 1px solid #c3e6c3; color: #2E7D32; }
.tt-alert-error   { background: #fdeaea; border: 1px solid #f5c6c6; color: #c30000; }

/* ---- Numéro de fixture (à venir) ---- */
.tt-fixture-nr {
    font-size: 11px;
    color: #bbb;
    font-weight: 700;
    margin-right: 2px;
}

/* =====================================================================
   Jumbotrons masqués — ils prenaient trop de place (demande Yann).
   ===================================================================== */
.jumbotron { display: none !important; }

/* =====================================================================
   UNIVERSE — encyclopédie du jeu (design clair, cohérent avec titantron)
   Composants génériques réutilisables (.uni-*) : cartes concept, tables
   claires, timeline de saison, callouts, flux d'attributs. Couleurs :
   blanc · rouge (#c30000) · noir · bleu (#2196F3) · vert (#4CAF50).
   ===================================================================== */

/* En-tête compact (remplace le jumbotron) */
.uni-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #fff 0%, #f7f7f9 100%);
    border: 1px solid #e6e6e6;
    border-left: 4px solid #c30000;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.uni-hero .uni-hero-ico {
    font-size: 26px;
    color: #c30000;
    flex-shrink: 0;
}
.uni-hero h2 { margin: 0 0 3px; font-size: 20px; font-weight: 800; color: #1a1a1a; letter-spacing: 0.5px; }
.uni-hero p  { margin: 0; font-size: 13px; color: #666; line-height: 1.5; }

/* Lead d'accordéon */
.uni-lead {
    font-size: 14px;
    color: #444;
    line-height: 1.65;
    margin: 0 0 16px;
}
.uni-lead strong { color: #1a1a1a; }

/* Grille de cartes concept */
.uni-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}
.uni-card {
    flex: 1 1 220px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.uni-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}
.uni-card-head .uni-ico {
    width: 30px; height: 30px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
    background: #c30000;
}
.uni-card-head .uni-ico.b { background: #2196F3; }
.uni-card-head .uni-ico.g { background: #4CAF50; }
.uni-card-head .uni-ico.k { background: #1a1a1a; }
.uni-card-head .uni-ico.gold { background: #e0a800; }
.uni-card-title { font-size: 13px; font-weight: 700; color: #1a1a1a; }
.uni-card-text { font-size: 12.5px; color: #666; line-height: 1.55; margin: 0; }
.uni-card-text strong { color: #333; }

/* Callout (note en évidence) */
.uni-callout {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #f5faff;
    border: 1px solid #d6e9fb;
    border-left: 4px solid #2196F3;
    border-radius: 6px;
    padding: 11px 14px;
    margin: 14px 0;
    font-size: 13px;
    color: #345;
    line-height: 1.55;
}
.uni-callout .fa { color: #2196F3; margin-top: 2px; }
.uni-callout.is-green { background: #f2faf3; border-color: #cde9d0; border-left-color: #4CAF50; color: #2b4a2e; }
.uni-callout.is-green .fa { color: #4CAF50; }
.uni-callout.is-red { background: #fdf3f3; border-color: #f3d2d2; border-left-color: #c30000; color: #5a2020; }
.uni-callout.is-red .fa { color: #c30000; }
.uni-callout.is-gold { background: #fffaf0; border-color: #f0e2c0; border-left-color: #e0a800; color: #6a5320; }
.uni-callout.is-gold .fa { color: #e0a800; }

/* Table claire (PPV, titres, match types, powerlevels) */
.uni-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    overflow: hidden;
    margin: 6px 0 12px;
    font-size: 13px;
}
.uni-table thead th {
    background: #1a1a1a;
    color: #fff;
    text-align: left;
    padding: 9px 12px;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 700;
}
.uni-table tbody td {
    padding: 9px 12px;
    border-top: 1px solid #f0f0f0;
    color: #444;
    vertical-align: middle;
}
.uni-table tbody tr:nth-child(even) td { background: #fafafa; }
.uni-table tbody tr:hover td { background: #fff7f7; }
.uni-table .uni-t-name { font-weight: 700; color: #1a1a1a; }
.uni-table .uni-t-sub { font-size: 11px; color: #999; }

/* Badges / pills */
.uni-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 11px;
    color: #fff;
    background: #888;
    white-space: nowrap;
}
.uni-pill.c4    { background: #78909c; }
.uni-pill.c6    { background: #2196F3; }
.uni-pill.c8    { background: #c30000; }
.uni-pill.gold  { background: #e0a800; }
.uni-pill.silver{ background: #9e9e9e; }
.uni-pill.bronze{ background: #b06a3b; }
.uni-pill.day   { background: #eee; color: #555; }
.uni-pill.pow-low    { background: #9e9e9e; }
.uni-pill.pow-medium { background: #ffb300; }
.uni-pill.pow-high   { background: #fb8c00; }
.uni-pill.pow-fin    { background: #c30000; }

/* Timeline de saison (12 PPV) */
.uni-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 8px 0 14px;
}
.uni-tl-node {
    flex: 1 1 90px;
    min-width: 82px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-top: 3px solid #78909c;
    border-radius: 6px;
    padding: 8px 6px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.uni-tl-node.c6 { border-top-color: #2196F3; }
.uni-tl-node.c8 { border-top-color: #c30000; background: #fff9f9; }
.uni-tl-day  { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: 0.5px; }
.uni-tl-name { font-size: 12px; font-weight: 700; color: #1a1a1a; margin: 2px 0; line-height: 1.2; }
.uni-tl-coef { font-size: 10px; font-weight: 700; color: #78909c; }
.uni-tl-node.c6 .uni-tl-coef { color: #2196F3; }
.uni-tl-node.c8 .uni-tl-coef { color: #c30000; }

/* Flux d'attributs (X → Y → current) */
.uni-flow {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
}
.uni-flow-step {
    flex: 1 1 160px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.uni-flow-step .uni-flow-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    background: #c30000;
    border-radius: 3px;
    padding: 2px 7px;
    margin-bottom: 6px;
}
.uni-flow-step.b .uni-flow-tag { background: #2196F3; }
.uni-flow-step.g .uni-flow-tag { background: #4CAF50; }
.uni-flow-step h5 { margin: 0 0 4px; font-size: 13px; color: #1a1a1a; font-weight: 700; }
.uni-flow-step p  { margin: 0; font-size: 12px; color: #666; line-height: 1.5; }
.uni-flow-arrow { display: flex; align-items: center; color: #ccc; font-size: 18px; }

/* Barre d'échelle (stamina/momentum) */
.uni-scale {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 12.5px;
}
.uni-scale .uni-scale-label { font-weight: 700; color: #1a1a1a; min-width: 92px; }
.uni-scale .uni-scale-bar {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #4CAF50 0%, #ffb300 55%, #c30000 100%);
}
.uni-scale .uni-scale-val { font-size: 11px; color: #888; white-space: nowrap; }

@media (max-width: 767px) {
    .uni-flow-arrow { transform: rotate(90deg); }
}

/* =====================================================================
   SUPERSTAR — fiche du joueur (design clair, cohérent titantron/universe)
   Couleurs : blanc · rouge (#c30000) · noir · bleu (#2196F3) · vert (#4CAF50).
   ===================================================================== */

/* En-tête portrait + identité */
.ss-header {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a0d0d 100%);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.ss-portrait {
    width: 84px; height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #c30000;
    background: #fff;
    flex-shrink: 0;
}
.ss-id { flex: 1; min-width: 0; }
.ss-name { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: #fff; letter-spacing: 0.5px; }
.ss-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ss-overall {
    background: #c30000; color: #fff;
    font-size: 13px; font-weight: 800;
    padding: 2px 10px; border-radius: 4px;
}
.ss-tag { font-size: 12px; color: rgba(255,255,255,0.75); }
.ss-tag .fa { margin-right: 3px; opacity: 0.7; }
.ss-morale { display: flex; align-items: center; gap: 8px; max-width: 320px; }
.ss-morale-label { font-size: 11px; color: rgba(255,255,255,0.6); white-space: nowrap; }
.ss-morale-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.15); border-radius: 3px; overflow: hidden; }
.ss-morale-fill { display: block; height: 100%; background: #4CAF50; border-radius: 3px; }
.ss-morale-val { font-size: 11px; color: #fff; font-weight: 700; }

/* Grille d'attributs (barres) */
.ss-attrs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 20px;
}
.ss-attr { padding: 3px 0; }
.ss-attr-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.ss-attr-label { font-size: 12px; color: #555; }
.ss-attr-val   { font-size: 12px; font-weight: 700; color: #1a1a1a; }
.ss-bar { height: 7px; background: #ececec; border-radius: 4px; overflow: hidden; }
.ss-bar.lg { height: 10px; }
.ss-bar-fill { height: 100%; border-radius: 4px; background: #9e9e9e; transition: width 0.3s; }
.ss-bar-fill.is-low  { background: #e57373; }
.ss-bar-fill.is-mid  { background: #ffb300; }
.ss-bar-fill.is-high { background: #4CAF50; }
.ss-bar-fill.is-offense { background: #fb8c00; }
.ss-bar-fill.is-defense { background: #2196F3; }

/* Jauges de forme */
.ss-gauges { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.ss-gauge-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; font-size: 13px; color: #444; }
.ss-gauge-head .fa { color: #c30000; margin-right: 5px; }
.ss-gauge-head strong { color: #1a1a1a; }

/* Mini-cartes (détermination, moral) */
.ss-mini-grid { display: flex; gap: 12px; margin-bottom: 8px; }
.ss-mini {
    flex: 1;
    background: #fff;
    border: 1px solid #ececec;
    border-top: 3px solid #9e9e9e;
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.ss-mini.is-red  { border-top-color: #c30000; }
.ss-mini.is-blue { border-top-color: #2196F3; }
.ss-mini-val { font-size: 26px; font-weight: 800; color: #1a1a1a; line-height: 1; }
.ss-mini-val span { font-size: 14px; color: #bbb; }
.ss-mini-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 6px; }
.ss-mini-label .fa { margin-right: 3px; }
.ss-mini.is-red  .ss-mini-label .fa { color: #c30000; }
.ss-mini.is-blue .ss-mini-label .fa { color: #2196F3; }

/* Palmarès : bilan V/M */
.ss-record {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.ss-record-main { display: flex; align-items: baseline; gap: 6px; }
.ss-record-w { font-size: 30px; font-weight: 800; color: #2E7D32; line-height: 1; }
.ss-record-sep { font-size: 14px; font-weight: 700; color: #2E7D32; }
.ss-record-t { font-size: 14px; color: #888; }
.ss-record-bar { height: 8px; background: #ececec; border-radius: 4px; overflow: hidden; margin: 10px 0 4px; }
.ss-record-fill { height: 100%; background: linear-gradient(90deg, #4CAF50, #2E7D32); border-radius: 4px; }
.ss-record-pct { font-size: 11px; color: #999; text-align: right; }

/* Palmarès : cartes titres */
.ss-titles { display: flex; flex-wrap: wrap; gap: 10px; }
.ss-title-card {
    flex: 1 1 100px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 12px 8px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.ss-title-card .fa { font-size: 20px; }
.ss-title-card.gold    .fa { color: #e0a800; }
.ss-title-card.silver  .fa { color: #9e9e9e; }
.ss-title-card.bronze  .fa { color: #b06a3b; }
.ss-title-card.king    .fa { color: #8e24aa; }
.ss-title-card.survivor .fa { color: #2196F3; }
.ss-title-count { display: block; font-size: 22px; font-weight: 800; color: #1a1a1a; line-height: 1; margin: 5px 0 2px; }
.ss-title-name { display: block; font-size: 10px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; }

/* Relations : stable / tag */
.ss-rel-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.ss-rel-card {
    flex: 1 1 240px;
    display: flex; gap: 12px; align-items: center;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.ss-rel-ico {
    width: 40px; height: 40px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 17px; flex-shrink: 0;
    background: #c30000;
}
.ss-rel-ico.g { background: #4CAF50; }
.ss-rel-ico.k { background: #78909c; }
.ss-rel-title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.ss-rel-sub { font-size: 12px; color: #777; }
.ss-badge {
    display: inline-block; font-size: 10px; font-weight: 700;
    background: #fff3cd; color: #8a6d00; border: 1px solid #f0e0a0;
    padding: 1px 6px; border-radius: 10px;
}
.ss-badge .fa { color: #e0a800; }

.ss-section-title { font-size: 13px; font-weight: 700; color: #1a1a1a; text-transform: uppercase; letter-spacing: 0.5px; margin: 4px 0 10px; }
.ss-section-title .fa { color: #c30000; margin-right: 5px; }

/* Rivalités */
.ss-rival { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ss-rival-name { flex: 0 0 130px; font-size: 13px; }
.ss-rival-bar { flex: 1; height: 7px; background: #ececec; border-radius: 4px; overflow: hidden; }
.ss-rival-fill { display: block; height: 100%; border-radius: 4px; }
.ss-rival-fill.is-tension { background: #ffb300; }
.ss-rival-fill.is-rival   { background: #fb8c00; }
.ss-rival-fill.is-war     { background: #c30000; }
.ss-rival-tag { flex: 0 0 64px; text-align: right; font-size: 11px; font-weight: 700; }
.ss-rival-tag.is-tension { color: #b8860b; }
.ss-rival-tag.is-rival   { color: #e65100; }
.ss-rival-tag.is-war     { color: #c30000; }

/* Finances */
.ss-fin-top {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ss-fin-balance {
    flex: 2 1 240px;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d2a13 100%);
    border-radius: 8px;
    padding: 16px 20px;
    color: #fff;
}
.ss-fin-balance-label { font-size: 12px; color: rgba(255,255,255,0.65); }
.ss-fin-balance-label .fa { margin-right: 5px; }
.ss-fin-balance-val { font-size: 30px; font-weight: 800; color: #5fd08a; margin-top: 4px; line-height: 1; }
.ss-fin-salary {
    flex: 1 1 130px;
    background: #fff;
    border: 1px solid #ececec;
    border-top: 3px solid #4CAF50;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.ss-fin-salary-val { font-size: 22px; font-weight: 800; color: #2E7D32; line-height: 1; }
.ss-fin-salary-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.ss-fin-amt { text-align: right; font-weight: 700; color: #1a1a1a; white-space: nowrap; }

@media (max-width: 767px) {
    .ss-attrs { grid-template-columns: 1fr; }
    .ss-header { flex-direction: column; text-align: center; }
    .ss-morale { max-width: none; }
}

/* Palmarès — table des matchs spéciaux */
.ss-sp-num { text-align: center; white-space: nowrap; }
.ss-sp-wins { color: #e0a800; font-weight: 700; }
.ss-sp-wins .fa { margin-right: 2px; }
.ss-sp-empty td { opacity: 0.5; }

/* Palmarès — couche PPV (distincte des matchs spéciaux) */
.ss-ppv { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 6px; }
.ss-ppv-stat {
    flex: 0 0 auto; min-width: 130px;
    background: #fff; border: 1px solid #ececec; border-top: 3px solid #2196F3;
    border-radius: 6px; padding: 10px 16px; text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.ss-ppv-stat.is-win { border-top-color: #e0a800; }
.ss-ppv-val { display: block; font-size: 24px; font-weight: 800; color: #1a1a1a; line-height: 1; }
.ss-ppv-stat.is-win .ss-ppv-val { color: #b8860b; }
.ss-ppv-label { display: block; font-size: 10px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 5px; }
.ss-ppv-hint { flex: 1 1 200px; font-size: 11px; color: #999; margin: 0; line-height: 1.5; }
.ss-ppv-hint .fa { color: #2196F3; }

/* =====================================================================
   LEAGUE — chips de roster (design clair)
   ===================================================================== */
.lg-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 12px; }
.lg-chip {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 108px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.lg-chip:hover { border-color: #c9c9c9; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.lg-chip.is-user { border-color: #c30000; background: #fff8f8; }
.lg-chip-avatar {
    width: 64px; height: 72px;
    object-fit: contain;
}
.lg-chip-info { min-width: 0; }
.lg-chip-name { display: flex; align-items: baseline; gap: 5px; font-size: 14px; line-height: 1.4; }
.lg-chip-name wmm-segment { min-width: 0; overflow-wrap: anywhere; }
.lg-chip-name .wmm-seg-superstar { font-weight: 600; }
.lg-user-star { color: #bc8800; flex-shrink: 0; }
.lg-chip-record { display: block; margin-top: 5px; color: #777; font-size: 11px; line-height: 1.5; }
.lg-chip-honors { display: flex; gap: 8px; min-height: 18px; margin-top: 4px; }
.lg-chip-ovr {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 48px; font-size: 18px; font-weight: 800;
    color: #fff; background: #1a1a1a;
    border-radius: 6px; padding: 5px;
}
.lg-chip-ovr-label { font-size: 9px; letter-spacing: .6px; font-weight: 600; opacity: .8; }
.lg-chip.is-user .lg-chip-ovr { background: #c30000; }
.lg-chip-honor { font-size: 13px; }
@media (max-width: 380px) {
    .lg-chip { grid-template-columns: 52px minmax(0, 1fr) 36px; gap: 8px; padding: 10px; }
    .lg-chip-avatar { width: 52px; height: 64px; }
}

/* =====================================================================
   RANKING — podium, classement des shows, tableau d'honneur
   ===================================================================== */
.rk-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    margin: 6px 0 20px;
    flex-wrap: wrap;
}
.rk-step {
    flex: 0 1 170px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 16px 12px 12px;
    text-align: center;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.rk-step.is-first  { border-top: 4px solid #e0a800; padding-top: 26px; transform: scale(1.06); z-index: 1; }
.rk-step.is-second { border-top: 4px solid #9e9e9e; }
.rk-step.is-third  { border-top: 4px solid #b06a3b; }
.rk-step.is-user   { box-shadow: 0 0 0 2px rgba(195,0,0,0.35); }
.rk-medal {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px; color: #fff;
    background: #9e9e9e;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}
.rk-step.is-first  .rk-medal { background: #e0a800; width: 32px; height: 32px; top: -16px; font-size: 15px; }
.rk-step.is-third  .rk-medal { background: #b06a3b; }
.rk-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ececec;
    margin-bottom: 8px;
}
.rk-step.is-first .rk-avatar { width: 68px; height: 68px; border-color: #e0a800; }
.rk-step-name { font-size: 14px; font-weight: 700; }
.rk-step-ovr  { font-size: 13px; font-weight: 800; color: #c30000; margin-top: 3px; }
.rk-step-sub  { font-size: 11px; color: #999; margin-top: 2px; }

.rk-rank {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 24px; height: 24px;
    border-radius: 50%;
    background: #eee; color: #555;
    font-size: 12px; font-weight: 800;
}
.rk-rank.is-top { background: #e0a800; color: #fff; }
.rk-row-user td { background: #fff8f8 !important; }

/* Classement des shows : barres */
.rk-show {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 9px 14px;
    margin-bottom: 7px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.rk-show.is-user { border-color: #c30000; background: #fff8f8; }
.rk-show-name { flex: 0 0 160px; font-size: 14px; font-weight: 700; color: #1a1a1a; }
.rk-show-bar {
    flex: 1;
    height: 9px;
    background: #ececec;
    border-radius: 5px;
    overflow: hidden;
}
.rk-show-fill {
    display: block; height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, #c30000, #e04040);
}
.rk-show-ovr { flex: 0 0 36px; text-align: right; font-weight: 800; color: #1a1a1a; }

/* Tableau d'honneur : pastilles de comptage */
.rk-h {
    display: inline-block;
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 12px; font-weight: 800;
    color: #fff;
}
.rk-h.gold   { background: #e0a800; }
.rk-h.silver { background: #9e9e9e; }
.rk-h.bronze { background: #b06a3b; }
.rk-h.dark   { background: #1a1a1a; }
.rk-h.blue   { background: #2196F3; }
.rk-h.red    { background: #c30000; }

@media (max-width: 767px) {
    .rk-step.is-first { transform: none; }
    .rk-show-name { flex-basis: 110px; }
}

/* =====================================================================
   LE CHAPITEAU — bandeau vitrine du header (partial headerShowcase.xhtml)
   Scène de music-hall : fond nuit à halos rouge/or, guirlandes d'ampoules
   clignotantes, étincelles, nom en or scintillant, chrono néon, vitrine à
   trophées illuminée. L'ancien design (userPropertiesPartials) est intact.
   ===================================================================== */

/* Le bandeau rouge du header s'efface quand le chapiteau est présent */
.wmm-header:has(.wmm-marquee) {
    background-color: #07070c;
    background-image: none;
}

.wmm-marquee {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 120% at 8% 50%,  rgba(195,0,0,0.38), transparent 60%),
        radial-gradient(ellipse 55% 120% at 92% 50%, rgba(224,168,0,0.22), transparent 60%),
        radial-gradient(ellipse 90% 160% at 50% 130%, rgba(80,0,0,0.5), transparent 70%),
        linear-gradient(180deg, #101018 0%, #0a0a10 55%, #050508 100%);
    box-shadow:
        inset 0 0 40px rgba(0,0,0,0.7),
        0 4px 18px rgba(0,0,0,0.55);
    border: 1px solid #2a2a35;
}

/* ---- Guirlandes d'ampoules ---- */
.mq-garland {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 12px;
    background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15));
}
.mq-bulb {
    width: 7px; height: 7px;
    border-radius: 50%;
    animation: mqBlink 1.6s infinite;
}
.mq-bulb:nth-child(3n+1) { background: #ffd76a; box-shadow: 0 0 6px 1px rgba(255,215,106,0.9); animation-delay: 0s; }
.mq-bulb:nth-child(3n+2) { background: #ff5252; box-shadow: 0 0 6px 1px rgba(255,82,82,0.9);  animation-delay: .55s; }
.mq-bulb:nth-child(3n)   { background: #cfe8ff; box-shadow: 0 0 6px 1px rgba(207,232,255,0.9); animation-delay: 1.1s; }
.mq-bulb:nth-child(4n)   { animation-duration: 2.3s; }
.mq-bulb:nth-child(5n)   { animation-duration: 1.1s; }
@keyframes mqBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.18; }
}

/* ---- Corps ---- */
.mq-body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 22px;
    flex-wrap: wrap;
}

/* Étincelles */
.mq-spark {
    position: absolute;
    color: #ffe9a8;
    text-shadow: 0 0 8px rgba(255,233,168,0.9);
    font-size: 11px;
    pointer-events: none;
    animation: mqTwinkle 2.8s infinite;
    opacity: 0;
}
.mq-spark.s1 { top: 12%; left: 30%;  animation-delay: 0s; }
.mq-spark.s2 { top: 62%; left: 24%;  animation-delay: .9s;  font-size: 8px; }
.mq-spark.s3 { top: 20%; left: 55%;  animation-delay: 1.6s; }
.mq-spark.s4 { top: 70%; left: 62%;  animation-delay: .4s;  font-size: 9px; }
.mq-spark.s5 { top: 10%; left: 84%;  animation-delay: 2.1s; font-size: 8px; }
.mq-spark.s6 { top: 58%; left: 91%;  animation-delay: 1.2s; }
@keyframes mqTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1.15) rotate(25deg); }
}

/* ---- Identité ---- */
.mq-star { min-width: 180px; }
.mq-name {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.1;
    background: linear-gradient(100deg, #f5d97b 0%, #fff3c4 28%, #e0a800 50%, #fff3c4 72%, #f5d97b 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: mqShimmer 5.5s linear infinite;
    text-shadow: 0 2px 14px rgba(224,168,0,0.25);
}
@keyframes mqShimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 220% center; }
}
.mq-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; align-items: center; }
.mq-ovr {
    background: #c30000;
    color: #fff;
    font-size: 12px; font-weight: 800;
    padding: 2px 9px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(195,0,0,0.6);
}
.mq-tag { font-size: 12px; color: rgba(255,255,255,0.75); }
.mq-tag .fa { margin-right: 3px; opacity: 0.7; }
.mq-bank { color: #7fe09a; font-weight: 700; }

/* ---- Chrono néon ---- */
.mq-chrono { text-align: center; min-width: 170px; }
.mq-chrono-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: rgba(255,255,255,0.65);
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mq-live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ff3030;
    box-shadow: 0 0 8px 2px rgba(255,48,48,0.8);
    animation: mqBlink 1.2s infinite;
}
.mq-chrono-time {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #ff4040;
    text-shadow:
        0 0 6px rgba(255,64,64,0.9),
        0 0 22px rgba(255,64,64,0.45);
    line-height: 1.1;
}
.mq-chrono-sub { font-size: 10px; color: rgba(255,255,255,0.45); letter-spacing: 1px; }

/* ---- Prochain PPV, sous le chrono ---- */
.mq-chrono-ppv {
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
}
.mq-ppv-countdown {
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffd54f;
    background: rgba(255,213,79,0.12);
    border: 1px solid rgba(255,213,79,0.35);
    border-radius: 3px;
    padding: 1px 5px;
}
.mq-ppv-name {
    color: rgba(255,255,255,0.8);
    letter-spacing: .5px;
    text-transform: uppercase;
    font-weight: 600;
}
.mq-ppv-name:hover { color: #fff; }

/* Le soir du PPV, le bloc s'allume et pulse : l'événement est CE soir. */
.mq-chrono-ppv.is-tonight .mq-ppv-countdown {
    color: #1a1a1a;
    background: #ffd54f;
    border-color: #ffd54f;
    animation: mqPpvPulse 1.4s ease-in-out infinite;
}
.mq-chrono-ppv.is-tonight .mq-ppv-name {
    color: #ffd54f;
    text-shadow: 0 0 8px rgba(255,213,79,0.6);
}
@keyframes mqPpvPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255,213,79,0); }
    50%      { box-shadow: 0 0 10px rgba(255,213,79,0.85); }
}

/* ---- Vitrine à trophées ---- */
.mq-trophies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    max-width: 340px;
}
.mq-trophy {
    position: relative;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    background: #15151d;
    border: 1px solid #2c2c38;
    color: #3c3c4a;
    cursor: default;
    transition: transform 0.15s;
}
.mq-trophy:hover { transform: scale(1.12); }
.mq-count {
    position: absolute;
    bottom: -4px; right: -4px;
    min-width: 17px; height: 17px;
    border-radius: 9px;
    background: #0a0a10;
    border: 1px solid #2c2c38;
    color: #555;
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
}
/* Abréviations du jeu (RR, MIB, KoR, HIC, SvSr, Mania) */
.mq-abbr { font-size: 11px; font-weight: 800; letter-spacing: 0.3px; line-height: 1; }
.t-svs .mq-abbr   { font-size: 10px; }
.t-mania .mq-abbr { font-size: 9px; }

/* Médaillons de titre (Or/Argent/Bronze) — les fonds dédiés wmmGold-bg /
   wmmSilber-bg / wmmBronze-bg, centrés, 100% × 100% de l'élément. Sur un
   ::before pour que le filtre « éteint » ne teinte pas le compteur. */
.mq-trophy.mq-belt::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 50%;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    /* Éteint par défaut : tamisé mais le métal reste reconnaissable
       (or / argent / bronze distinguables même sans titre décroché) */
    filter: brightness(0.55) saturate(0.8);
}
.mq-trophy.mq-belt.t-gold::before   { background-image: url(../img/wmmGold-bg.png); }
.mq-trophy.mq-belt.t-silver::before { background-image: url(../img/wmmSilber-bg.png); }
.mq-trophy.mq-belt.t-bronze::before { background-image: url(../img/wmmBronze-bg.png); }
.mq-trophy .mq-count { z-index: 1; }
.mq-trophy.mq-belt.is-lit::before { filter: none; }

/* Allumé : couleur + halo + pulsation douce */
.mq-trophy.is-lit { animation: mqGlowPulse 2.6s infinite; }
.mq-trophy.is-lit .mq-count { background: #fff; color: #111; border-color: #fff; }
.mq-trophy.t-gold.is-lit   { border-color: #ffd76a; box-shadow: 0 0 14px 2px rgba(224,168,0,0.75); }
.mq-trophy.t-silver.is-lit { border-color: #dcdcdc; box-shadow: 0 0 14px 2px rgba(190,190,190,0.6); }
.mq-trophy.t-bronze.is-lit { border-color: #d29a67; box-shadow: 0 0 14px 2px rgba(176,106,59,0.65); }
.mq-trophy.t-rumble.is-lit { background: radial-gradient(circle at 35% 30%, #7cb9f7, #2196F3); color: #0b3f6e; border-color: #8fc4f9; box-shadow: 0 0 14px 2px rgba(33,150,243,0.65); }
.mq-trophy.t-mib.is-lit    { background: radial-gradient(circle at 35% 30%, #56e08a, #1d9e50); color: #0c4425; border-color: #7ce8a6; box-shadow: 0 0 14px 2px rgba(46,180,100,0.65); }
.mq-trophy.t-kor.is-lit    { background: radial-gradient(circle at 35% 30%, #d79bf0, #8e24aa); color: #43104f; border-color: #dfb0f3; box-shadow: 0 0 14px 2px rgba(142,36,170,0.65); }
.mq-trophy.t-hic.is-lit    { background: radial-gradient(circle at 35% 30%, #ff8a80, #c30000); color: #5c0000; border-color: #ff9d94; box-shadow: 0 0 14px 2px rgba(195,0,0,0.7); }
.mq-trophy.t-svs.is-lit    { background: radial-gradient(circle at 35% 30%, #90cbf9, #1565C0); color: #072a4d; border-color: #a5d5fa; box-shadow: 0 0 14px 2px rgba(21,101,192,0.65); }
.mq-trophy.t-mania.is-lit  { background: radial-gradient(circle at 35% 30%, #ffd76a, #ff8f00); color: #6a3c00; border-color: #ffe08c; box-shadow: 0 0 16px 3px rgba(255,143,0,0.75); }
@keyframes mqGlowPulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.28); }
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .mq-body { justify-content: center; text-align: center; }
    .mq-star { text-align: center; }
    .mq-meta { justify-content: center; }
    .mq-trophies { justify-content: center; max-width: none; }
}
@media (max-width: 480px) {
    .mq-name { font-size: 20px; }
    .mq-chrono-time { font-size: 24px; }
    .mq-trophy { width: 36px; height: 36px; font-size: 13px; }
}