/* =====================================================
   PLV2026 - LOGIN V2
   ===================================================== */
body{
	background-color: #f6f8fc !important;
	background-image: none !important;
}
body#login{

    margin:0;
    padding:0;

    background:
        linear-gradient(
            135deg,
            #eef3f8 0%,
            #dde6f0 100%
        ) !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
}

/* conteneur principal */

body#login #content.login{

    margin:80px auto !important;

    padding:60px !important;

    background:#fdfdfd !important;

    border-radius:24px !important;

    box-shadow: 0 0 0 !important;

    text-align:center;
}

/* logo */

body#login .logo_login{

    max-width: 100% !important;
    width:100% !important;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

/* titre */

body#login h1{

    font-size:30px !important;

    font-weight:700 !important;

    color:#172a3b !important;

    text-shadow:none !important;

    margin-bottom:40px !important;

    letter-spacing:-1px;
}

/* zones */

body#login .input{

    margin-bottom:18px !important;
}
body#login #content.login div.input{

    background:none !important;
    background-color:transparent !important;

    border:none !important;

    box-shadow:none !important;
    -moz-box-shadow:none !important;
    -webkit-box-shadow:none !important;
    -o-box-shadow:none !important;

    opacity:1 !important;
    filter:none !important;
    line-height:normal !important;

    margin-top:0 !important;
    margin-bottom:18px !important;
    height: 53px;
}

/* champs */

body#login input[type=text],
body#login input[type=password]{

    width:100% !important;

    height:56px !important;

    padding:0 18px !important;

    border:1px solid #d9e2ec !important;

    border-radius:14px !important;

    background:#f8fafc !important;

    font-size:16px !important;

    box-sizing:border-box;

    transition:.2s;
}

body#login input[type=text]:focus,
body#login input[type=password]:focus{

    border-color:#43a047 !important;

    background:#ffffff !important;

    outline:none !important;

    box-shadow:
        0 0 0 4px rgba(67,160,71,.12);
}

/* bouton */

body#login .submit{

    margin-top:25px;
}

body#login input[type=submit]{

    height:56px !important;

    padding:0 35px !important;

    border:none !important;

    border-radius:14px !important;

    background:#ff6600 !important;

    color:#ffffff !important;

    font-size:16px !important;

    font-weight:600 !important;

    cursor:pointer;

    transition:.2s;

    box-shadow: 0 0 0 !important;
    text-shadow: 0 0 0 aliceblue;
}

body#login input[type=submit]:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 28px rgba(67,160,71,.35);
}

body#login #content .notif{

    width:100% !important;

    box-sizing:border-box;

    padding:16px 20px !important;

    margin:0 0 20px 0 !important;

    border-radius:12px !important;

    border:none !important;

    box-shadow:none !important;

    background:none !important;

    text-shadow:none !important;

    font-size:14px !important;

    font-weight:500 !important;
}

/* Erreur */

body#login #content .notif.error{

    background:#fee2e2 !important;

    color:#991b1b !important;

    border:1px solid #fecaca !important;

    text-shadow:none !important;

    box-shadow:none !important;
}

.footer-totem{
	text-align: center;
}

/* ===========================
   SIDEBAR 2026
   =========================== */
#sidebar:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
}

#sidebar{
    width:260px !important;
    background-color: #0f1724 !important;
    border-right:none !important;
    box-shadow:
        4px 0 20px rgba(0,0,0,.15);
    padding-top:30px;
    position: fixed;
}

/* logo actuel masqué */
#sidebar .logo{
    display:none !important;
}

/* reset */
#sidebar ul{
    margin:0;
    padding:0;
}

#sidebar li{
    list-style:none;
}

/* menu principal */
#sidebar > ul > li > a{
    display:block;
    height:54px;
    line-height:54px;
    color:#d8e1eb !important;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    background:none !important;
    transition:.2s;

}
#sidebar ul li ul{
    border-right: none !important;
}
/* hover */
#sidebar > ul > li > a:hover{

    background:
        rgba(255,255,255,.04);

    color:#ffffff !important;
}
#sidebar img{
    filter: brightness(0) invert(1);
}

/* actif */
#sidebar > ul > li.current > a{
    border-left:4px solid #43b042;
    background:
        rgba(255,255,255,.04);
    border-left:4px solid orange;
}

/* icônes actuelles */
#sidebar > ul > li > a img{
    opacity:.6;
    width:20px !important;
    margin-right:12px;
}
#sidebar > ul > li > ul > li > a img{
    opacity:.6;
    width:20px !important;
    margin-right:12px;
}

/* sous-menu */
#sidebar ul li ul{
    background: none !important;
    padding-bottom:12px;
    box-shadow: none !important;
}

#sidebar ul li ul li a{
    display:block;
    padding: 8px 20px 8px 0px;
    color:#b5c0cc !important;
    font-size:14px;
    text-decoration:none;
    transition:.2s;
}

/* hover sous-menu */
#sidebar ul li ul li a:hover{

    color:#ffffff !important;
}

/* séparateur visuel */
#sidebar > ul > li{

    margin-bottom:2px;
}
#sidebar ul li ul li a{
    background:none !important;
    color:#aab4c2;
    font-size:14px;
}
#sidebar ul li ul li a img {
    padding-right: 8px;
}
#sidebar ul li ul li{

    border:none !important;
}
#sidebar li.current > a{

    border-left:4px solid #ff6600;
    color:#ff6600 !important;
}
#sidebar li.current > a img{

    filter:
    brightness(0)
    saturate(100%)
    invert(53%)
    sepia(93%)
    saturate(2178%)
    hue-rotate(2deg)
    brightness(103%)
    contrast(105%);
}
.sidebar-footer{
    position:absolute;
    left:20px;
    right:20px;
    bottom:20px;
}

.sidebar-support{
    display:flex;
    align-items:center;
    gap:10px;
    height:44px;
    padding:0 14px;
    border-radius:10px;
    background:rgba(255,255,255,.05);
    color:#d8e1eb;
    text-decoration:none;
    font-weight:600;
    transition:.25s;
}
.sidebar-support span{
    width: auto !important;
    border: none !important;
}
.sidebar-support svg{
    width:18px;
    height:18px;
    color:#94a3b8;
    transition:.25s;
}

.sidebar-support:hover{
    background:rgba(255,102,0,.08);
    color:#ffffff;
}

.sidebar-support:hover svg{
    color:#ff6600;
    transform:scale(1.1);
}

.sidebar-copyright{
    margin-top:14px;
    text-align:center;
    font-size:11px;
    color:#64748b;
    letter-spacing:.3px;
}

/* ===========================
   HEADER 2026
   =========================== */

#logo-header{
    padding-left: 10px;
}
#head{

    height:70px !important;
    background: none !important;
    background-color: #0f1724 !important;
    border:none !important;
    box-shadow:
        0 2px 12px rgba(0,0,0,.06);
    display:flex;
    align-items:center;
    justify-content:flex-end;
    position: fixed;
}

/* bloc utilisateur */

#head .left{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:14px;
    color:#6b7280;
    background: none !important;
    padding-right: 30px;
    float: right;
}

/* suppression du "Bonjour" gris */

#head .left{
    font-weight:500;
}
#head .profile{
    display:none !important;
}
#head .left a:first-of-type{
    font-weight:600;
    text-decoration:none;
}
#head .left a:last-of-type{
    text-decoration:none;
    font-weight:600;
}

/* ----------------- */
/* PAGE */
/* ----------------- */
h1{
	color: #172234 !important;
	height: auto !important;
}
h1 svg{
	height: 40px;
	width: 40px;
	vertical-align: middle !important;
	color: #fff;
}
.icon-box{
    width:60px;
    height:60px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:#ff6600;
    border-radius:8px;
    vertical-align:middle;
    color:#ffffff;
    margin-right: 10px;
    transition:all .4s ease;
}
.icon-box:hover{
    background:rgba(255,102,0,.08);
    color:#ff8533;
    box-shadow:0 4px 12px rgba(255,102,0,.06);
    border: 2px solid rgba(255,102,0,.06);
}

.icon-box:hover svg{
    transform:scale(1.15) rotate(5deg);
}
#content .bloc .title{
	background: none !important;
}

.dark #content .bloc {
  border-radius: 10px;
  padding: 10px;
}
#content .bloc .content {
  background-color: #fff;
}
.dark #content .bloc {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

/* =====================================
   BLOCS 2026
   ===================================== */

.bloc{

    background:#ffffff !important;

    border:none !important;

    border-radius:16px !important;

    overflow:hidden;

    box-shadow:
        0 8px 24px rgba(15,23,36,.08);

    margin-bottom:30px;
}

/* titre du bloc */

.bloc .title{

    background:#ffffff !important;

    border:none !important;

    padding:24px 30px 10px 30px;

    min-height:auto !important;
}

/* contenu */

.bloc .content{
    background:#ffffff !important;

}

#playlist_title h1{

    font-size:34px !important;

    font-weight:700;

    color:#202e40 !important;

    margin:0;
}

#playlist_title .selector{
    display:inline-block;
    padding:10px 14px;
    border:1px solid #dbe3ea;
    border-radius:10px;
    background:#f8fafc;
    min-width:280px;
}


.table input[type=text]{

    width:45px;

    text-align:center;

    border:1px solid #dbe3ea;

    border-radius:8px;

    background:#ffffff;

    padding:6px;
}

.messi-actions .btn, .messi-titlebox{
	text-shadow: none !important;
}

.messi-box{
    border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.messi-titlebox{
    background:#0f1724;
    color:#fff;
}
.messi-footbox{
    background:#f8fafc;
}


.chkValid,
.messi-actions .btnbox button{

    background:#ff6600 !important;

    color:#ffffff !important;

    border:none !important;

    border-radius:10px;

    padding:12px 22px;

    font-weight:600;

    cursor:pointer;
}
.messi-content video,
.messi-content img,
.messi-content iframe{
	width: 640px;
}

/* =====================================
   TABLEAUX 2026
   ===================================== */
#content .bloc .title {
  height: 52px !important;
}
#content .selector, #content .selector select, #content .selector span {
  width: 300px !important;
}

.table{

    width:100%;

    border-collapse:separate;

    border-spacing:0;

    background:#ffffff;
}

/* ---------------------------------
   Entêtes
--------------------------------- */

.table thead th{
    background:#f8fafc;
    color:#202e40;
    font-size:13px;
    font-weight:700;
    letter-spacing:.04em;
    padding:14px 12px;
    padding-bottom: 14px !important;
    border-bottom:2px solid #e2e8f0;
}

/* ---------------------------------
   Cellules
--------------------------------- */

.table td{
    border-bottom:1px solid #edf2f7;
    color:#334155;
    vertical-align:middle;
}

/* ---------------------------------
   Hover
--------------------------------- */

.table tbody tr:hover{

    filter:brightness(98%);

    transition:.15s;
}

/* ---------------------------------
   Lignes client (vert)
--------------------------------- */

.table tr[style*="#c9fcd8"]{

    background:#edfdf3 !important;
}

/* ---------------------------------
   Lignes enseigne (bleu)
--------------------------------- */

.table tr[style*="#d2eaff"]{

    background:#eef6ff !important;
}

/* ---------------------------------
   Noms des spots
--------------------------------- */

.table td:nth-child(2){

    font-weight:600;
}

/* ---------------------------------
   Etat disabled
--------------------------------- */

.table .disabled{
    color:#333 !important;
    font-weight:400 !important;
}

/* ---------------------------------
   Champs ordre
--------------------------------- */

.table input[type=text]{

    width:30px;
    height:16px;
    text-align:center;
    border:1px solid #dbe3ea;
    border-radius:8px;
    background:#ffffff;
    color:#202e40;
    font-weight:600;
}

/* focus */

.table input[type=text]:focus{

    border-color:#ff6600;

    outline:none;

    box-shadow:
        0 0 0 3px rgba(255,102,0,.15);
}

/* ---------------------------------
   Colonnes actions
--------------------------------- */

.table td.showSpot,
.table td.delete{

    text-align:center;
}

/* ---------------------------------
   Icônes PNG actuelles
--------------------------------- */

.table td img{

    transition:.15s;

    opacity:.8;
}

.table td img:hover{

    opacity:1;

    transform:scale(1.10);
}

/* ---------------------------------
   Cellules vides (édition impossible)
--------------------------------- */

.table td:empty{

    color:#cbd5e1;
}

/* ---------------------------------
   Dernière ligne
--------------------------------- */

.table tbody tr:last-child td{

    border-bottom:none;
}

/* ==========================
   Barre d'information playlist
   ========================== */

.content .alerte{
    float:left;
    margin-bottom:10px;
    background:#fff7ed;
    color:#ea580c !important;
    border-left:4px solid #ff6600;
    border-radius:10px;
    padding:12px 18px !important;
    font-weight:600;
}

/* légende à droite */

.playlist-legend{
    float:right;
    display:flex;
    align-items:center;
    gap:22px;
    height:42px;
    font-size:13px;
    font-weight:600;
    color:#64748b;
}

/* nettoyage avant le tableau */

.table{

    clear:both;
}

/* ==========================
   Spots clients
   ========================== */

.table tr[style*="#c9fcd8"]{

    background:#fff7ed !important;
}

/* ==========================
   Spots enseigne
   ========================== */

.table tr[style*="#d2eaff"]{

    background:#eefcf9 !important;
}

.legend-client::before{

    content:"";

    display:inline-block;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#ff6600;

    margin-right:8px;
}

.legend-store::before{

    content:"";

    display:inline-block;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#14b8a6;

    margin-right:8px;
}

.table tr[style*="#c9fcd8"] td:nth-child(2){

    color:#c2410c;
}

.table tr[style*="#d2eaff"] td:nth-child(2){

    color:#0f766e;
}

.content.dashboard{
	clear: both;
}
.content.dashboard table thead tr{
	height: 44px;
}

.sidebar-info{

    margin:30px 18px 20px 18px;

    padding:14px;

    background:rgba(255,255,255,.05);

    border-left:4px solid #ff6600;

    border-radius:10px;

    color:#cbd5e1;

    font-size:12px;

    line-height:1.5;
}

.sidebar-info strong{
    margin-bottom:8px;
    color:#ffffff;
    font-size:13px;
}

.sidebar-info p{
    margin:0;
}

.sidebar-info strong:last-child{
    color:#ff6600;
}
.playlist_select option{
	background: none;
	color: #202e40;
}
.playlist_select option:hover{
	background: #fff1e8 !important;
	color: #202e40;
}
#content table tbody tr td.icon img  {
  width: 20px;
}
#content .bloc .title .toggle {
  display: none !important;
}

/* ==========================
   Jours de diffusion
   ========================== */
.jour-icon-all{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:24px;
    margin-right:4px;
    border-radius:6px;
    background:#ffffff;
    border:1px solid #ff6600;
    color:#ff6600;
    font-size:12px;
    font-weight:700;
    line-height:1;
    box-sizing:border-box;
}
.jour-icon{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    margin-right:4px;
    border-radius:6px;
    background:#ffffff;
    border:1px solid #ff6600;
    color:#ff6600;
    font-size:12px;
    font-weight:700;
    line-height:1;
    box-sizing:border-box;
}
.messi-titlebox.anim.info {
  background-color: #f60 !important;
}
.icon.valid svg{
	color: green;
}
.icon.wait svg{
	color: #ff6600;
}


/* =====================================
   Liste des templates
   ===================================== */

.content.dashboard table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:#fff;
}

.content.dashboard thead th{
    background:#f8fafc;
    color:#202e40;
    padding:16px;
    font-size:13px;
    font-weight:700;
    border-bottom:2px solid #e2e8f0;
}

.content.dashboard tbody td{
    padding:18px;
    vertical-align:middle;
    border-bottom:1px solid #edf2f7;
}

.content.dashboard tbody tr:hover{

    background:#fafafa;
}

/* =====================================
   Aperçu template
   ===================================== */

.content.dashboard tbody td:first-child img{
    width:240px;
    border-radius:12px;
    border:1px solid #e2e8f0;
    box-shadow:
        0 4px 12px rgba(0,0,0,.06);
    transition:.2s;
}

.content.dashboard tbody tr:hover td:first-child img{
    transform:scale(1.02);
}
.content.dashboard tbody td:nth-child(2){
    font-size:15px;
    font-weight:700;
    color:#202e40;
}
.content.dashboard tbody td:nth-child(3){
    color:#64748b;
    font-weight:600;
}
.content.dashboard tbody td:nth-child(4){
    color:#94a3b8;
    font-size:14px;
}
#tabs1{
    display:flex;
    gap:12px;
    margin-bottom:25px;
}

#tabs1 a{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    height:42px !important;
    padding:0 20px !important;
    background:#ffffff !important;
    border:1px solid #dbe3ea !important;
    border-radius:10px !important;
    color:#475569 !important;
    font-size:14px !important;
    font-weight:600 !important;
    text-decoration:none !important;
    transition:.2s;
    width: auto  !important;
}

#tabs1 a:hover{
    border-color:#ff6600 !important;
    color:#ff6600 !important;
}

#tabs1 a.active{
    background:#ff6600 !important;
    border-color:#ff6600 !important;
    color:#ffffff !important;
}