/* Reset */
html,body,div,span,applet,object,iframe,input,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
		margin:0;
		padding:0;
	}
	
	input, textarea { outline: none; }

/* General Section */
	html, body, textarea, input { 
		font-family: Helvetica, Arial, sans-serif;
		font-size:12px;
		-webkit-text-size-adjust:none;
	}
	body {
		background-image:url(../images/body_bg.jpg);
	}
	html, body {margin:0;padding:0;width:100%;height:100%;}
	#main-content {position:relative; min-height:100%;height:auto !important;height:100%;}
	#main-content .empty {height:85px; }

	header, footer, nav, section{
		display:block;
	}
	
	.left {
		float:left;
	}
	
	.right {
		float:right;
	}

/* Typography */
	a{ text-decoration:none; cursor:pointer;}
	a:hover { text-decoration:underline; }
	a, a:hover, a:visited, a:link {color:#000;}
	
	abbr {
	text-decoration: none;
	border-bottom: dotted 1px #couleur;
}
	
	h1, h2, h3, h4, h5, h6{
		font-weight:100;
		font-family: 'Cuprum', Arial, sans-serif;
		color:#000000;
	}
	h1 {
		font-size:28px;
		line-height:32px;
	}
	h2 {
		font-size:24px;
		line-height:26px;
	}
	h3 {
		font-size:20px;
		line-height:24px;
	}
	h4 {
		font-size:18px;
		line-height:22px;
	}
	h5 {
		font-size:16px;
		line-height:22px;
	}
	h6 {
		font-size:14px;
		line-height:20px;
	}
	h1 span{
		font-size:14px;
		line-height:14px;
	}
	h2 span{
		font-size:12px;
		line-height:12px;
	}
	h3 span{
		font-size:10px;
		line-height:10px;
	}
	
	p, ul, ol, pre{
		color:#424242;
		font-size:12px;
		font-family: Helvetica, Arial, sans-serif;
	}
	p {
		line-height:18px;
	}
	
	pre {
		border:1px solid #637285;
		border-left:5px solid #637285;
		padding:5px 20px;
		margin:20px;
	}
	
	blockquote{
		font-size:16px;
		font-family: Helvetica, Arial, sans-serif;
		font-style:italic;
		border-left:5px solid #637285;
		padding:0 20px;
		margin:20px;
	}
	
	hr { 
		display:block;
		height:0px;
		line-height:0px;
		border:0;
		border-top:1px solid #CCC;
		margin:16px 0;
		float:none;
		clear:both;
		padding:0;
	}
	strong{
		font-weight:700;
	}
	em{
		font-style:italic;
	}
	img{
		border:0;
	}
	
	.small{
		font-size:10px;
	}
	
	fieldset { border: 1px solid  #CCC; padding: 10px; }
	
	textarea {
	background: #ffffff;
	color: #333;
	border: 1px solid #ccc;
	padding: 2px;
	line-height: 1.4;
	outline: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
}
		
	.clear {
		clear:both;
	}
	.typography-heading p{
		margin-bottom:20px;
	}
	.typography-heading h1,h2,h3,h4,h5,h6 {
		color:#000000;
	}
	.typography-ul ul{
		float:left;
		margin-right:50px;
		margin-bottom:20px;
	}
	.normal-list {
		list-style: inside;
	}
	.lower-latin-list {
		list-style: lower-latin;
	}
	.square-list {
		list-style: square;
	}
	.number-list {
		list-style: decimal;
	}
	.none-list {
		list-style: none;
	}
	.circle-list {
		list-style: circle;
	}
	.italic {
		font-style:italic;
	}
	
/* Table */

	table {
		background-color:#FFFFFF;
		padding:1px;
		border:0px; /*  */
		border-spacing:0px;
	}
	table thead tr th {
		height:15px;
		text-align:left;
		padding-left:3px;
		color:#2a2a2a;
		font-size: 14px;
	}
	
	table tbody tr {
		background-color:#d9d9d9;
	}
	
	table tbody tr:hover {
		background-color:#C0BFA9;
	}
	
	table tbody tr td {
		height:15px;
		border-bottom:1px solid #d9d9d9;
		padding-left:3px;
		color:#000000;
		font-size: 14px;
		
	}
	.clear_table {
		padding:0;
		margin:0;
		border:0;
		background-color:#f7f7f7;
	}
	.clear_table tr td{
		padding:0;
		margin:0;
		border:0;
		background-color:#f7f7f7;
	}
	.name {
		color:#009cff;
	}
	.subject a{
		color:#6c6c6c;
	}
	.action img {
		padding-left:3px;
		padding-right:3px;
	}
	
	.published {
		color:#FFF;
		background:#7ac212;
		padding:2px 5px 2px 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	
	.not_published {
		color:#FFF;
		background:#5b5b5b;
		padding:2px 5px 2px 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	
	.moderation {
		color:#FFF;
		background:#ff9c00;
		padding:2px 5px 2px 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	/* Header */
	
	header{
		background-image:url(../images/bg_head.png);
		background-repeat:no-repeat;
		background-position:center;
		height:200px;
	}
	
	#bagraund-header {
		background-image:url();
		background-repeat:no-repeat;
		height:140px;
	}
	
	.centered {
		width:950px;
		margin:auto;
	}
	
	#logo{
		background:url(../images/logo.png) no-repeat;
		width:223px;
		float:left;
		margin-left:-30px;
		padding-left:30px;
		height:100px;
		display:block;
	}

/* Main Navigation */

	nav {
		height:40px;
		width:100%;
		background-image:url(../images/grid-bg.png);
		margin-top:-40px;

	}
	
	#main-nav {
		float:left;
		margin-top:7px;
	}

	
	ul#main-nav li {
			text-transform:uppercase;
			font-family: Helvetica, Arial, sans-serif;
			font-size:12px;
			list-style:none;
			float:left;
			color:#ffffff;
			height:10px;
			padding:5px 5px 10px 5px;
			margin-right:10px;
	}
	
	ul#main-nav li:hover {
			background:#ED7F10;
	}
	
	ul#main-nav li a {
		text-decoration:none;
		color:#fff;
	}

	ul#main-nav ul {
			width: 200px;
			list-style: none;
			display: none;
			position: absolute;
			background-color:#FFF;
			margin-left:-5px;
			margin-top:5px;
			z-index:1;
	}

	ul#main-nav ul li {
			min-width: 180px;
			float: left;
			display: block !important;
			display: inline;
			height:16px;
			padding:7px 0px 7px 0px;
			margin-left:10px;
			margin-right:10px;

	} 
	
	ul#main-nav ul li:hover {
		background:none;
	}
	
	ul#main-nav ul a {
			border: 0px;
			display: block;
	}
	
	ul#main-nav ul li ul {
			width: 190px;
			list-style: none;
			display: none;
			position: relative;
			background-color:#CECECE;
			margin-left:181px;
			margin-top:-21px;
			z-index:1;
	}

	ul#main-nav ul li ul li {
			min-width: 180px;
			float: left;
			display: block !important;
			display: inline;
			background-color:#EFEFEF;
			height:20px;
			padding:7px 0px 7px 0px;
			margin-left:10px;
			margin-right:10px;

	}
	
	ul#main-nav ul li ul li:hover {
			background:#DCDCDC;
	}
	
	
	/* Second Menu */
	ul#main-nav li:hover li a,
	ul#main-nav li.iehover li a {
			float: none;
			color: #7e7e7e;
			text-transform:none;
	}
	
	ul#main-nav li:hover li a:hover,
	ul#main-nav li:hover li:hover a,
	ul#main-navli.iehover li a:hover,
	ul#main-nav li.iehover li.iehover a {
			color: #232323;
	}
	
	ul#main-nav ul ul {
			display: none;
			position: absolute;
			top: 0;
		 
	}
	
	ul#main-nav li:hover ul ul,
	ul#main-nav li.iehover ul ul {
			display: none;
	}
	
	ul#main-nav li:hover ul,
	ul#main-nav ul li:hover ul,
	ul#main-nav li.iehover ul,
	ul#main-nav ul li.iehover ul {
			display: block;
	}
	
	.separation-menu {
		border-top:1px solid #cccccc;
	}
	.pull-down:hover {
		background-image:url(../images/navigation_action.png);
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		margin-top:-1px;
	}
	.pull-down:hover a{
		color:#FFF;
	}
	#active {
		background:#CC5500;
	}

	
	#main-nav-two {
		float:right;
		background-image:url(../images/menu-two-bg.png);
		height:33px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border:1px solid #4b5060;
		margin-top:3px;
	}
	
	#main-nav-two li {
		float:left;
		list-style:none;
		margin-left:5px;
		margin-right:5px;
		padding-top:7px;
		text-transform:uppercase;
		font-family: Helvetica, Arial, sans-serif;
		font-size:12px;
		color:#272b37;
	}
	
	#main-nav-two li a{
		color:#4b5060;
		text-decoration:none;
	}
	
	.counter {
		display:block; 
		width:20px; 
		height:18px;
		padding-top:4px;
		text-align:center; 
		overflow:hidden; 
		right:0;
		margin-left:65px;
		margin-top:-35px;
		color:#fff; 
		font-size:9px;
		background-image:url(../images/counter.png);
		background-repeat:no-repeat;
		-webkit-border-radius: 999px;
		-moz-border-radius: 999px;
		border-radius: 999px;
	}
	
	.separator {
		border-left:1px solid #a7a7a7;
		margin-top:3px;
		height:20px;
		width:2px;
		display:block;
		float:left;
		margin-left:1px;
		margin-right:1px;
	}

/* User Panel in header*/

	#user-panel {
		margin-top:30px;
		color:#272b37;
		float:right;
	}
	
	#user-panel ul {
		float:left;
		padding-right:10px;
	}
	
	#user-panel li {
		list-style:none;
		color:#272b37;
	}
	
	#user-panel a {
		text-decoration:none;
		border-bottom:1px  dashed #272b37;
		color:#272b37;
	}
	
	#user-panel a:hover {
		border:0;
	}
	
	#user-panel span {
		border-left:1px solid #272b37;
		margin-left:2px;
		margin-right:5px;
	}
	
	#search {
		float:right;
	}
	#search input[type="text"] {
		border:0px;
		width:210px;
		height:35px;
		font-family: Helvetica, Arial, sans-serif;
		font-size:12px;
		padding-left:10px;
		padding-right:40px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		color:#585d63;
		background-color:#c0c1c7;
		border:1px solid #9fa1a5;
	}
	
	#search .submit {
		margin-top:-37px;
		margin-left:230px;
	}
	
	#search .submit input {
		background: url("../images/search.png") no-repeat;
		height:37px;
		width:37px;
	}



/* greeting  */
	.greeting {
		background-color:#f7f7f7;
		background-image:url(../images/greeting_bg.png);
		border:1px solid #d5d5d5;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		color:#2b2b2b;
		font-family: Helvetica, Arial, sans-serif;
		padding:10px;
		margin-top:20px;
	}
	.greeting p{
		font-size:12px;
		line-height:15px;
	}
	.greeting-title {
		font-weight:bold;
		padding-bottom:5px;
		font-family:12px;
	}
/* Grid */
	.grid-1 {
		width:948px;
		margin-top:20px;
	}
	.grid-2 {
		width:300px;
		margin-top:20px;
		margin-right:24px;
		float:left;
	}
	.grid-3 {
		width:462px;
		margin-top:20px;
		margin-right:24px;
		float:left;
	}
	.grid-4 {
		width:622px;
		margin-top:20px;
		margin-right:24px;
		float:left;
	}
	.grid-5 {
		width:220px;
		margin-top:20px;
		margin-right:24px;
		float:left;
	}
	.grid-6 {
		width:702px;
		margin-top:20px;
		margin-right:24px;
		float:left;
	}
	.grid-7 {
		width:50%;
		margin-top:20px;
		margin-right:24px;
		float:left;
	}
	.grid-8 {
		width:44%;
		margin-top:20px;
		margin-right:24px;
		float:left;
	}
	.grid-9 {
		width:75%;
		margin-top:20px;
		margin-right:24px;
		float:left;
	}
	.grid-10 {
		width:20%;
		margin-top:20px;
		margin-right:24px;
		float:left;
	}
	.title-grid {
		background-repeat:repeat-x;
		background-image:url(../images/grid-bg.png);
		border:1px solid #1f252e;
		height:30px;
		padding-top:12px;
		padding-right:15px;
		padding-left:5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		letter-spacing:1px;
	}

	.title-grid span {
		float:left;
	}
	.title-grid center {
		float:center;
	}
	.title-grid ul {
		float:right;
	}
	.title-grid ul {
		height:35px;
		margin-left:2px;
	}
	.content-gird-1 {
		background-color:#f1f0f6;
		min-height:25px;
		margin-top:-10px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding:10px;
		color:#424242;
	}
	.content-gird-2 {
		background-color:#CECECE;
		min-height:50px;
		margin-top:-10px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding:10px;
		color:#424242;
	}
	.content-gird-3 {
		background-color:#9E9E9E;
		min-height:50px;
		margin-top:-10px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding:10px;
		color:#424242;
	}
	.content-gird-4 {
		background-color:#927D6A;
		min-height:50px;
		margin-top:-10px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding:10px;
		color:#424242;
	}
	.content-gird-5 {
		background-color:#CECECE;
		margin-top:-10px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding:10px;
		color:#424242;
	}
	.title-grid span {
		color:#FFF;
		padding-left:5px;
		text-transform:uppercase;
		font-family: 'Cuprum', Arial, sans-serif;
		font-size:12px;
	}
	.title-grid center {
		color:#FFF;
		padding-left:5px;
		text-transform:uppercase;
		font-family: 'Cuprum', Arial, sans-serif;
		font-size:12px;
	}
	.last {
		margin-right:0px;
	}
	.size-medium {
		height:310px;
	}
	
     .avis_dossier {
        width:auto;
        margin:0 auto;
        padding:10px;
        background:white;
        border:1px solid #DDD;
        border-radius:5px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        }

	/* Statistics */
	#statistic {
		width:950;
		height:285px;
		margin-top:50px;
		margin-bottom:25px;
	}
	.chart {
		width:465px;
		height:285px;
		border:0;
		margin-left:-1px;
	}
	.chart-title {
		margin-top:-34px;
		padding-left:5px;
	}
	.chart-title ul.tabNavigation {
		float:right;
		margin-right:20px;
	}
	.chart-title ul.tabNavigation li.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited{
		color:#2b2b2b;
			
	}
	.chart-title ul.tabNavigation  { 

	}
	.chart-title ul.tabNavigation li.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
		 background: #f1f0f6; 
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		color:#2b2b2b;
	}
	.chart-title span {
		color:#2b2b2b;
		font-family: 'Cuprum', Arial, sans-serif;
		font-size:16px;
		text-transform:uppercase;
		letter-spacing:1px;
		
	}
	.chart-content {
		clear:both;
		background-color:#f1f0f6;
		width:453px;
		height:275px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding:6px;
	}
/* MAIN MENU */
	ul#main-menu {
		list-style: none;
		margin:0px -10px 0px -10px;
	}
	ul#main-menu li {
		float: left;
		margin:10px;
		height:67px;
		padding:5px;
		text-transform:uppercase;
		background-image:url(../images/greeting_bg.png);
		background-repeat:repeat-x;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border:1px solid #dadada;
	}
	ul#main-menu li a {
		display: block;
		width:205px;
		height:77px;
		color:#202020;
	}
	ul#main-menu li:hover a{
		display: block;
		color:#ffffff;
		text-decoration:none;
	}
	ul#main-menu li:hover {
		background-image:url(../images/m-hover.png);
		text-decoration: none;
		color:#FFF;
	}
	ul#main-menu li a img {
		padding: 10px 15px 5px;
	}
	ul#main-menu li a span {
		display: block;
		padding: 0 0 5px;
		line-height: 20px;
	}
	ul#main-menu li .section {
		padding-top:5px;
		font-weight:bold;
	}
	ul#main-menu li .description {
		color:#004d7e;
		text-transform:none;
		line-height: 1.3em;
		font-size:11px;
		margin-top:-5px;
	}
	ul#main-menu li:hover .description {
		color:#e0e0e0;
	}
	.icons {
		display:block;
		float:left;
		width:70px;
		height:70px;
		cursor:pointer;
		margin-right:10px;
	}
	ul#main-menu li div.chat {
		background:url(../images/m-icons.png) no-repeat;
	}
	ul#main-menu li:hover div.chat {
	background:url(../images/m-icons.png) no-repeat;
	background-position:0px -71px;
	}
	ul#main-menu li div.users {
		background:url(../images/m-icons.png) no-repeat;
		background-position:-70px 0px;
	}
	ul#main-menu li:hover div.users {
	background:url(../images/m-icons.png) no-repeat;
	background-position:-70px -71px;
	}
	ul#main-menu li div.statics {
		background:url(../images/m-icons.png) no-repeat;
		background-position:-140px 0px;
	}
	ul#main-menu li:hover div.statics {
	background:url(../images/m-icons.png) no-repeat;
	background-position:-140px -71px;
	}
	ul#main-menu li div.settings {
		background:url(../images/m-icons.png) no-repeat;
		background-position:-210px 0px;
	}
	ul#main-menu li:hover div.settings {
	background:url(../images/m-icons.png) no-repeat;
	background-position:-210px -71px;
	}
	ul#main-menu li div.cron {
		background:url(../images/m-icons.png) no-repeat;
		background-position:-282px 0px;
	}
	ul#main-menu li:hover div.cron {
	background:url(../images/m-icons.png) no-repeat;
	background-position:-282px -71px;
	}
	ul#main-menu li div.add_post {
		background:url(../images/m-icons.png) no-repeat;
		background-position:-352px 0px;
	}
	ul#main-menu li:hover div.add_post {
	background:url(../images/m-icons.png) no-repeat;
	background-position:-352px -71px;
	}
	ul#main-menu li div.widget {
		background:url(../images/m-icons.png) no-repeat;
		background-position:-422px 0px;
	}
	ul#main-menu li:hover div.widget {
	background:url(../images/m-icons.png) no-repeat;
	background-position:-422px -71px;
	}
	ul#main-menu li div.ticket {
		background:url(../images/m-icons.png) no-repeat;
		background-position:-493px 0px;
	}
	ul#main-menu li:hover div.ticket {
	background:url(../images/m-icons.png) no-repeat;
	background-position:-493px -71px;
	}

	
/* MESSAGE */
	.messages {
		border:1px solid #CCC;
		background-color:#ffffff;
		padding:10px 50px 10px 50px;
	}
	.messages ul {
		margin-left:-10px;
	}
	.messages ul li {
		list-style:none;
		float:left;
	}
	.messages ul li  a{
		color:#FFF;
	}
	.messages ul li  a:hover{
		text-decoration:none;
	}
	#message-button-right {
		float:right;
	}
	.message-list {
		margin-top:10px;
	}
	.message {
		min-height:80px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding:15px;
		margin-top:10px;
	}
	.message.wan {
		background-color:#eeeeee;
	}
	.message.wan-dark {
		background-color:#cccccc;
	}
	.message-info {
		margin-left:80px;
	}
	.author-message {
		color:#777777;
		padding-bottom:10px;
	}
	.message-date {
		float:right;
		color:#444444;
		margin-top:20px;
	}
	.text-message {
		color:#444444;
	}
	.button-message, .button-message span {
		display: inline-block;
		min-width:100px;
		height:25px;
		border:1px solid #1f252e;
		color:#FFF;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		text-decoration:none;
		cursor:pointer;
		font-size:13px;
		text-align:center;
		background-image:url(../images/button-messages.png);
		padding-top:8px;
		padding-left:10px;
		padding-right:10px;
		margin-left:10px;
	}
	button {
		display: inline-block;
		min-width:100px;
		height:35px;
		border:1px solid #39669d;
		color:#FFF;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		text-decoration:none;
		cursor:pointer;
		font-size:13px;
		text-align:center;
		background-image:url(../images/button-messages.png);
		padding-left:10px;
		padding-right:10px;
		margin-top:10px;
	}
	button:hover {
		background-image:url(../images/button-messages.png);
		background-position:-0px -36px;
		border:1px solid #2c333d;
	}
	.form-message {
		margin-top:20px;
		margin-left:50px;
	}
	.form-message p{
		padding:5px;
	}
	#text {
		width:805px;
		height:70px;
	}
	.reply-title {
		font-size:14px;
	}
/* Notebook */
	#note {
		width:257px;
		height:270px;
		resize: none;
		overflow: auto;
		outline: none;
	}

/* Tabs */
	.tabs ul.tabNavigation  { 
		height:26px;
		margin-top:2px;
	}
	
	
/* Button */
	.button-input {
		min-width:86px;
		height:26px;
		border:0;
		color:#FFF;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		text-transform:uppercase;
		cursor:pointer;
		margin-top:7px;
		margin-right:10px;
		padding-bottom:2px;
		display: inline-block;
		padding-right:5px;
		padding-left:5px;
	}
	.button-input.blue {
		background-image:url(../images/button.png);
	}
	.button-input.gray {
		background-image:url(../images/button.png);
		background-position:0 -26px;
	}
	.button-input.gris {
		background-color:#999087;
	}
	.button-input.bleu {
		background-color:#046380;
	}
	.button-input.chat1 {
		background-color:#046380;
	}
	.button-input.chat2 {
		background-color:#B9121B;
	}

	.button-a, .button-a span {
		display:inline-block;
		min-width:86px;
		height:26px;
		border:0;
		color:#FFF;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		text-transform:uppercase;
		text-decoration:none;
		cursor:pointer;
		font-size:12px;
		text-align:center;	
	}
	.button-a span {
		padding-top:5px;
	}
	.button-a:hover {
		text-decoration:none;
	}
		
	
	.button-a.gray {
		background-image:url(../images/button.png);
		background-position:0 -26px;
	}
	
	.button-a.blue {
		background-image:url(../images/button.png);
	}
	.more-center {
		margin:0 auto; width:86px;
	}


/* Gallery */
	.gallery {
		list-style:none;
		margin-left:-12px;
		margin-right:-12px;
	}
	
	.gallery li {
		float:left;
		padding-bottom:5px;
		padding-top:5px;
		display: inline-block;
		position: relative;
	}
	
	.gallery li img {
		border:1px #CCC solid;
		margin-right:12px;
		margin-left:12px;
	}
	
	.gallery li:hover .img_options {display: block}
	
	.gallery .img_options {position: absolute;z-index: 99;  bottom: 25px; left:24px; display: none}
	.gallery .img_options img { border: none; }
	.gallery .img_options li { display: inline-block; float: none;margin: 0 !important;text-align: center; }
	
	.image_container{
	   width:110px;
	   height:110px;
	}


/* Stats List */
	ul.stats-list {
		list-style:none;
		list-style-image:none;
		padding:0;
		margin:4px 0;
	}
	ul.stats-list li {
		border-top:1px solid #b5b5b5;
		padding-top:7px;
		padding-bottom:7px;
		margin:0;
		color:#737373;
		font-size:12px;
		height:20px;
	}
	ul.stats-list li:first-child{border-top:0}
	ul.stats-list li:hover{background-color:#ededed}
	ul.stats-list li a{display:block; color:#737373;}
	ul.stats-list li a:hover{text-decoration:none}
	ul.stats-list li a span{
		font-size:16px;
		display:inline-block;
		text-align:right;
		width:100px;
		margin-right:15px;
		color:#2b2b2b;
	}
/* Online users */
	.user {
		background-color:#ffffff;
		height:75px;
		color:#272b37;
		margin-bottom:12px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding:10px;
		-moz-box-shadow: -2px 2px 2px #cccccc;
		-webkit-box-shadow: -2px 2px 2px #cccccc;
		box-shadow: -2px 2px 2px #cccccc;
	}
	.info {
		padding-left:10px;
		width:160px;
		float:left;
	}
	.status-user {
		font-size:11px;
		padding-top:4px;
	}
	.group {
		font-size:11px;
		margin-top:10px;

	}
	.group a {
		color:#5a95cd;
		text-decoration:underline;
	}
	.group a:hover {
		text-decoration:none;
	}
	.avatar {
		float:left;
	}
	.title {
		font-weight:bold;
	}
	.action-user {
		width:25px;
		height:95px;
		float:right;
		background-color:#3e434f;
		background-image:url(../images/user-bg.png);
		margin:-10px;
		-webkit-border-top-right-radius: 5px;
		-webkit-border-bottom-right-radius: 5px;
		-moz-border-radius-topright: 5px;
		-moz-border-radius-bottomright: 5px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	.action-user li {
		list-style:none;
		height:24px;
	}
	.action-user li a{
		background-repeat: no-repeat;
		text-indent: -9999px;
		display:block;
		height:21px;
		width:24px;
		border-bottom:1px solid #2f3844;
	}

	.action-message {
		background: url(../images/user-menu.png);
		background-position: 8px 8px;
	}
	.action-info {
		background-image:url(../images/user-menu.png);
		background-position: 8px -15px;
	}
	.action-banned {
		background-image:url(../images/user-menu.png);
		background-position: 8px -37px;
	}
	.action-delete {
		background-image:url(../images/user-menu.png);
		background-position: 8px -57px;
		border:0px;
	}
	
/* ALERTS */
	.alert {	
		height:25px;	
		padding-left:10px;
		padding-top:11px;
		text-transform:uppercase;	
		margin-bottom:5px;
		margin-top:5px;
		font-weight:bold;
	}
	.alert.gray {
		background-image:url(../images/notification.jpg);
		border:1px solid #808080;
		color:#808080;
	}
	.alert.green {
		background-image:url(../images/notification.jpg);
		background-position:0 -180px;
		border:1px solid #789b00;
		color:#789b00;
	}
	.alert.red {
		background-image:url(../images/notification.jpg);
		background-position:0 -120px;
		border:1px solid #ff6511;
		color:#b90000;
	}
	.alert.blue {
		height:40px;	
		background-image:url(../images/notification.jpg);
		background-position:0 -240px;
		border:1px solid #0086d3;
		color:#0086d3;
	}
	.alert.orange {
		background-image:url(../images/notification.jpg);
		background-position:0 -60px;
		border:1px solid #ffa200;
		color:#ffa200;
	}
	.alert .close {
		float:right; 
		top:0; 
		right:0;
		width:26px; 
		height:26px; 
		display:block;
		background:url('../images/close.png') no-repeat; 
		text-indent:-9999px; 
		margin-top:-5px; 
		margin-right:10px; 
	}
		
		
/* ACCARDION */ 
	.accordion section 
	{
		border-bottom: 1px solid #ccc;
		margin:5px 0px;
		background-color: #fff;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
		background-image: -webkit-linear-gradient(top, #fff, #eee);
		background-image:    -moz-linear-gradient(top, #fff, #eee);
		background-image:     -ms-linear-gradient(top, #fff, #eee);
		background-image:      -o-linear-gradient(top, #fff, #eee);
		background-image:         linear-gradient(top, #fff, #eee);
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	
	.accordion h2 {
		font-size:18px;
	}
	.accordion h2,
	 .accordion p
	{
		margin: 0;	
	}
	
	.accordion div
	{
		height: 150px;
		display: none;
	}
	
	.accordion p
	{
		padding: 10px;
	}
	 
	.accordion h2 a 
	{
		display: block;
		position: relative;
		font-family: "Cuprum", Arial, sans-serif;
		padding: 10px;
		color: #333;
		outline: 0;
		text-decoration: none;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	
	.accordion h2 a:hover 
	{
		background: #fff;
	}
	 
	.accordion h2.active a:after 
	{  
		content: '';
		position: absolute;
		right: 10px;
		top: 50%;
		margin-top: -3px;
		border-top: 5px solid #333;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;	
	}
	
/* FORMS */
	input[type="text"],input[type="password"] {
		border:1px solid #CCC;
		height:24px;
		font-family: Helvetica, Arial, sans-serif;
		padding-left:10px;
		padding-right:10px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		color:#959595;
		background-color:#FFF;
	}

	.small {
		width:200px;
	}
	.medium {
		width:270px;
	}
	.large {
		width:500px;
	}
	textarea {
		border:1px solid #CCC;
		font-family: Helvetica, Arial, sans-serif;
		padding-left:10px;
		padding-right:10px;
		padding-top:5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		color:#959595;
		background-color:#FFF;
	}
	.uploader{
	position:relative;
	display:inline-block;
	overflow:hidden;
	cursor:default;
	padding:0;
	margin:10px 0px;
	-moz-box-shadow:0px 0px 5px #ddd;
	-webkit-box-shadow:0px 0px 5px #ddd;
	box-shadow:0px 0px 5px #ddd;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	}
	
	.filename{
	float:left;
	display:inline-block;
	outline:0 none;
	height:32px;
	width:190px;
	}
	
	.button_files {
	float:left;
	height:25px;
	display:inline-block;
	outline:0 none;
	padding:0px 12px;
	margin:0;
	cursor:pointer;
	border:1px solid;
	font:bold 12px Helvetica, Arial, sans-serif;
	-moz-border-radius:0px 5px 5px 0px;
	-webkit-border-radius:0px 5px 5px 0px;
	border-radius:0px 5px 5px 0px;
	-moz-box-shadow:0px 0px 1px #fff inset;
	-webkit-box-shadow:0px 0px 1px #fff inset;
	box-shadow:0px 0px 1px #fff inset;
	}
	
	
	.uploader input[type=file]{
	position:absolute;
	top:0; right:0; bottom:0;
	border:0;
	padding:0; margin:0;
	height:20px;
	cursor:pointer;
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity: 0;
	opacity:0;
	}
	
	input[type=button]::-moz-focus-inner{padding:0; border:0 none; -moz-box-sizing:content-box;}
	input[type=button]::-webkit-focus-inner{padding:0; border:0 none; -webkit-box-sizing:content-box;}
	input[type=text]::-moz-focus-inner{padding:0; border:0 none; -moz-box-sizing:content-box;}
	input[type=text]::-webkit-focus-inner{padding:0; border:0 none; -webkit-box-sizing:content-box;}
	.black .button_files{
	color:#fff;
	text-shadow:1px 1px 0px #111111;
	background:#3a424d;
	border-color:#111111;
	}
	
	.black:hover .button_files{
	background:#363f4a;
	}
	div.progressbar
	{
		border: 1px solid #1f252e;
		background-color: #efefef;
		border-radius: 3px;
		-o-border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		width:290px;
	}
	
	div.progressbar div
	{
		background: url(../images/progessbar.gif);
		height: 25px;
		text-align: center;
		font-size: 11px; font-weight: bold; color: #fff; line-height: 20px;
		text-shadow: 0px 0px 3px #000;
		-o-text-shadow: 0px 0px 3px #000;
		-moz-text-shadow: 0px 0px 3px #000;
		-webkit-text-shadow: 0px 0px 3px #000;
		border-radius: 2px;
		-o-border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		padding-top:4px;
	}
	.elem {
		clear:both;
		padding-top:10px;
	}
	.indent {
		margin-left:180px;
	}
	.input-slider {
		background-color:#000;
	}
	#amount, #amount2, #amount3 , #amount4{
		background-color:#f1f0f6; border:0; color:#60b0e5;
	}
	.distance p{
		float:left;
		width:180px;
	}
	.checkbox, .radio {
	width: 19px;
	height: 25px;
	padding: 0 5px 0 0;
	background: url(../images/checkbox.png) no-repeat;
	display: block;
	clear: left;
	float: left;
	margin-top:-3px;
	}
	.radio {
		background: url(../images/radio.png) no-repeat;
	}
/******* VALIDATE FORM *******/

	#customForm input.error{
		background: #f8dbdb;
		border-color: #e77776;
	}
	#customForm textarea.error{
		background: #f8dbdb;
		border-color: #e77776;
	}
	#customForm div span.error{
		color: #e46c6e;
	}
	#error{
		margin-bottom: 20px;
		border: 1px solid #efefef;
	}
	#error ul{
		list-style: square;
		padding: 5px;
		font-size: 11px;
	}
	#error ul li{
		list-style-position: inside;
		line-height: 1.6em;
	}
	#error ul li strong{
		color: #e46c6d;
	}
	#error.valid ul li strong{
		color: #93d72e;
	}
	
	/* Contact LIST */
		
		.slider { width:100%+10px;; min-height: 250px; display: block; position: relative; background: #fff; overflow: hidden; margin:-10px; }
		.slider ul { list-style: none; }
		.slider-content { float: left; width: 100%; display: block; overflow: auto; min-height: 250px; }
		.slider-content ul { float: left; width: 100%; display: block; position: relative; }
		.slider-content ul li { float: left; width: 100%; }
		.slider-content ul ul li a { padding: 5px 10px; display: block; border-bottom: 1px solid #f3f3f3; text-transform: capitalize; }
		.slider-content ul ul li a:hover { background: #f3faff; border-color: #d5ebf9; }
		.slider-content .title { padding: 5px 0; text-indent: 10px; background: #eaeaea; color: #807f7f; width: 100%; float: left; font-weight: bold; text-transform: uppercase; }
		.slider-content .selected .title { background: rgb(246,246,246); /* Old browsers */
		background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,246,1)), color-stop(100%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(234,234,234,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
		background: linear-gradient(top, rgba(246,246,246,1) 0%,rgba(234,234,234,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */ }
		.slider .slider-nav { position: absolute; right: 0; top: 0; margin-top:10px; background: #666; min-height: 250px; background: rgb(246,246,246); /* Old browsers */
		background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,246,1)), color-stop(100%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(234,234,234,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
		background: linear-gradient(top, rgba(246,246,246,1) 0%,rgba(234,234,234,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */}
		.slider .slider-nav ul { padding: 5px 0; }
		.slider .slider-nav li a { padding: 3px 5px; line-height: 13px; text-align: center; color: #807f7f; font-weight: bold; display: block; text-transform: uppercase; cursor: pointer; }
		.slider #debug { position: absolute; bottom: 0; left: 0; padding: 5px; background: #000; color: #fff; }
		.slider .arrow { font-size: 0px; line-height: 0%; width: 0px; border-bottom: 8px solid #fff; border-left: 5px solid #333; border-right: 5px solid #333; position: relative; top: 5px; }
		.slider .down { border-bottom: none; border-top: 8px solid #fff; top: 15px; }
		.slider .slide-up, .slider .slide-down { height: 30px; background: #333; text-align: center; cursor: pointer; float: right; width: 100%; position: relative;background: rgb(246,246,246); /* Old browsers */
		background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,246,1)), color-stop(100%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(234,234,234,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
		background: linear-gradient(top, rgba(246,246,246,1) 0%,rgba(234,234,234,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */ }
		.up-sl {
			background-image:url(../images/contact-nav.png);
			width:28px;
			height:14px;
			display:block;
			margin:auto;
			margin-top:7px;
		}
		.down-sl {
			background-image:url(../images/contact-nav.png);
			background-position:0px 14px;
			width:28px;
			height:14px;
			display:block;
			margin:auto;
			margin-top:7px;
		}
	
	/* Pop-up notifications */
	div.jGrowl {
		z-index: 			9999;
		color: 				#fff;
		font-size: 			12px;
	}
	
	/** Special IE6 Style Positioning **/
	div.ie6 {
		position: 			absolute;
	}
	
	div.ie6.top-right {
		right: 				auto;
		bottom: 			auto;
		left: 				expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
		top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
	}
	
	div.ie6.top-left {
		left: 				expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
		top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
	}
	
	div.ie6.bottom-right {
		left: 				expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
		top: 				expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
	}
	
	div.ie6.bottom-left {
		left: 				expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
		top: 				expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
	}
	
	div.ie6.center {
		left: 				expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
		top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
		width: 				100%;
	}
	
	/** Normal Style Positions **/
	div.jGrowl {
		position:			absolute;
	}
	
	body > div.jGrowl {
		position:			fixed;
	}
	
	div.jGrowl.top-left {
		left: 				0px;
		top: 				0px;
	}
	
	div.jGrowl.top-right {
		right: 				0px;
		top: 				0px;
	}
	
	div.jGrowl.bottom-left {
		left: 				0px;
		bottom:				0px;
	}
	
	div.jGrowl.bottom-right {
		right: 				0px;
		bottom: 			0px;
	}
	
	div.jGrowl.center {
		top: 				0px;
		width: 				50%;
		left: 				25%;
	}
	
	/** Cross Browser Styling **/
	div.center div.jGrowl-notification, div.center div.jGrowl-closer {
		margin-left: 		auto;
		margin-right: 		auto;
	}
	
	div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer {
		background-color: 		#000;
		opacity: 				.85;
		-ms-filter: 			"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; 
		filter: 				progid:DXImageTransform.Microsoft.Alpha(Opacity=85); 
		zoom: 					1;
		width: 					235px;
		padding: 				10px;
		margin-top: 			5px;
		margin-bottom: 			5px;
		font-family: 			Tahoma, Arial, Helvetica, sans-serif;
		font-size: 				1em;
		text-align: 			left;
		display: 				none;
		-moz-border-radius: 	5px;
		-webkit-border-radius:	5px;
	}
	
	div.jGrowl div.jGrowl-notification {
		min-height: 			40px;
	}
	
	div.jGrowl div.jGrowl-notification,
	div.jGrowl div.jGrowl-closer {
		margin: 				10px;
	}
	
	div.jGrowl div.jGrowl-notification div.jGrowl-header {
		font-weight: 			bold;
		font-size:				.85em;
	}
	
	div.jGrowl div.jGrowl-notification div.jGrowl-close {
		z-index:				99;
		float: 					right;
		font-weight: 			bold;
		font-size: 				1em;
		cursor:					pointer;
	}
	
	div.jGrowl div.jGrowl-closer {
		padding-top: 			4px;
		padding-bottom: 		4px;
		cursor: 				pointer;
		font-size:				.9em;
		font-weight: 			bold;
		text-align: 			center;
	}
	
	/** Hide jGrowl when printing **/
	@media print {
		div.jGrowl {
			display: 			none;
		}
	}
/* EDITOR */
	#editor {
		width:910px;
		font-family:Arial, Helvetica, sans-serif;
	}
		
/* FOOTER */

footer {
    margin-top: auto;
    height: 60px;
    width: 100%;
    background-image: url('../images/grid-bg.png');
    background-repeat: repeat;
}

.info-tooter {
    width: 948px;
    margin: auto;
    height: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #fafcfb;
    font-size: 12px;
    font-family: Helvetica, Arial, sans-serif;
}

#left {
    float: left;
    padding-bottom: 10px;
}

#left a {
    color: #FFFFFF;
    text-decoration: underline;
}

#left a:hover {
    color: #ffcc00;
}

#right {
    float: right;
    padding-bottom: 10px;
    margin-right: -10px;
    color: #fafcfb;
    overflow: hidden;
    zoom: 1;
}

#right li {
    list-style: none;
    float: left;
    border-left: 1px solid #869eb8;
    padding: 0 10px;
    margin: 0 1px 0 -1px;
}

#right li a {
    color: #869eb8;
    text-decoration: underline;
}

#right li a:hover {
    text-decoration: none;
}


	/* Historique */ 

	      div#historique {
		width:100%;       	
		height: 180px;
      	overflow: auto;
      	border: 1px solid #000000;
		border-radius: 5px;
		background: #EFEFEF;
		font-size: 14px;

      }
div#historique span#message
					{ color: #046380; font-size: 85%; }
					
div#historique span#ancien
					{ color: #7F7F7F; font-size: 85%; }
					
div#historique span#inter 
					{ color: #9F0808; font-size: 85%; }
					
div#historique span#recru 	
				{ color: #3D7209; font-size: 85%; }
				
div#historique span#req 
					{ color: #9F0808; font-size: 85%; }
					
div#historique span#op 	
				{ color: #3D7209; font-size: 85%; }
				
div#historique span#srv 	
				{ color: #000000; font-size: 85%; }
				
	      div#historique-admin {
		width:100%;       	
		height: 1000px;
      	overflow: auto;
      	border: 1px solid #000000;
		border-radius: 5px;
		background: #EFEFEF;
		font-size: 14px;

      }
div#historique-admin span#message
					{ color: #046380; font-size: 85%; }
					
div#historique-admin span#inter 
					{ color: #9F0808; font-size: 85%; }
					
div#historique-admin span#recru 	
				{ color: #3D7209; font-size: 85%; }
				
div#historique-admin span#srv 	
				{ color: #000000; font-size: 85%; }
				
	      div#budget {
		width:100%;       	
		height: 100px;
      	overflow: auto;
      	border: 1px solid #000000;
		border-radius: 5px;
		background: #EFEFEF;
		font-size: 14px;

      }
				
div#budget span#depense 
					{ color: #9F0808; font-size: 85%; }
					
div#budget span#recette 	
				{ color: #3D7209; font-size: 85%; }
				
	      div#stats {
		width:100%;       	
		height: 100px;
      	overflow: auto;
      	border: 1px solid #000000;
		border-radius: 5px;
		background: #EFEFEF;
		font-size: 14px;

      }
				
div#stats span#malus 
					{ color: #9F0808; font-size: 85%; }
					
div#stats span#bonus 	
				{ color: #3D7209; font-size: 85%; }
				
	      div#affichage {
		width:100%;       	
		height: 200px;
      	overflow: auto;
      	border: 1px solid #000000;
		border-radius: 5px;
		background: #EFEFEF;
		font-size: 14px;
}

	      div#participants {
		width:100%;       	
		height: 140px;
      	overflow: auto;
      	border: 1px solid #000000;
		border-radius: 5px;
		background: #EFEFEF;
		font-size: 14px;
}

	/* Synoptiques */
	
.synoptique0 { /* Indisponible */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #000000; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique1.dispo-ok { /* Disponible */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #000000; 
		background: #419F2E; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique1.dispo-nok { /* Disponible */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #1e1e1e; 
		background: #faff93; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique20 { /* Disponible Manque personnel */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #419F2E; 
		background: #797a79; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique2 { /* Alerté */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #ff0101; 
		background: #ffffff; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique3 { /* En transit */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #000000; 
		background: #FF140C; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		 
.synoptique4 { /* Sur les lieux */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #000000; 
		background: #FF5900; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique5 { /* Transport CH */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #000000; 
		background: #495CFF; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique6 { /* Arrivé CH */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #495CFF; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique7 { /* Retour Disponible */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #000000; 
		background: #84CECC; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique8 { /* Retour indisponible */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #FFD940; 
		background: #0118EA; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique9 { /* Indisponible (entretien) */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #434543; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique10 { /* Départ recouverture opérationnelle */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #000000; 
		background: #FF483D; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique11 { /* Arrivé recouverture opérationnelle */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #235218; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique12 { /* En transfert */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #E8CC06; 
		background: #000000; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique13 { /* Manoeuvre disponible */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #419F2E; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique14 { /* Manoeuvre indisponible */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #6E0B14; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique15 { /* Réserve opérationnelle */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #795344; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique16 { /* Désinfection */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #4E3D28; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		
.synoptique17 { /* En panne */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #000000; 
		background: #434543; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.synoptique18 { /* Entretien */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #B2119D; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		
.synoptique19 { /* Indisponible matériel */
		text-align: center; 
		border: 1px solid #000000; 
		width: 90px; 
		padding: 3px; 
		color: #000000; 
		background: #798081; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		


	/* Synoptiques Intervention */
	
.inter0 { /* Indisponible */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #000000; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter1 { /* Disponible */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #000000; 
		background: #419F2E; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter2 { /* Alerté */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #ff0000; 
		background: #ffffff; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter3 { /* En transit */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #fafafa; 
		background: #ff0800; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		 
.inter4 { /* Sur les lieux */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #000000; 
		background: #ff0000; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter5 { /* Transport CH */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #000000; 
		background: #495CFF; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter6 { /* Arrivé CH */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #495CFF; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter7 { /* Retour Disponible */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #ffffff; 
		background: #419F2E; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter8 { /* Retour indisponible */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #419F2E; 
		background: #000000; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter9 { /* Indisponible (entretien) */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #434543; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter10 { /* Départ recouverture opérationnelle */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #000000; 
		background: #FF483D; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter11 { /* Arrivé recouverture opérationnelle */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #235218; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter12 { /* En transfert */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #E8CC06; 
		background: #000000; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter13 { /* Manoeuvre disponible */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #419F2E; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter14 { /* Manoeuvre indisponible */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #6E0B14; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter15 { /* Réserve opérationnelle */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #795344; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter16 { /* Désinfection */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #4E3D28; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		
.inter17 { /* En panne */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #000000; 
		background: #434543; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}

.inter18 { /* Entretien */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #B2119D; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		
.inter19 { /* Indisponible matériel */
		text-align: center; 
		border: 1px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #000000; 
		background: #798081; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		

	/* Synoptiques Services */
	
.service1 { /* A contacter */
		text-align: center; 
		border: 1px solid #000000; 
		padding: 2px 10px;
		width: auto; 
		color: #000000; 
		background: #FF0000; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		
.service2 { /* Prévenu */
		text-align: center; 
		border: 1px solid #000000; 
		width: auto; 
		padding: 2px 10px;
		color: #000000; 
		background: #088A08; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		
.service3 { /* Se rend sur les lieux */
		text-align: center; 
		border: 1px solid #000000; 
		width: auto; 
		padding: 2px 10px;
		color: #000000; 
		background: #7401DF; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		
.service4 { /* Sur les lieux */
		text-align: center; 
		border: 1px solid #000000; 
		width: auto; 
		padding: 2px 10px;
		color: #000000; 
		background: #FF4000; 
		border-radius: 10px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		
.caserne1 { /* Diffusé */
		text-align: center; 
		border: 0px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #000000; 
		background: #FF0000; 
		border-radius: 5px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		
.caserne2 { /* Acquitement lecture */
		text-align: center; 
		border: 0px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #000000; 
		background: #FF4000; 
		border-radius: 5px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		
.caserne3 { /* En intervention */
		text-align: center; 
		border: 0px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #000000; 
		background: #088A08; 
		border-radius: 5px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		
.caserne4 { /* Problème matériel / Délai de départ écoulé */
		text-align: center; 
		border: 0px solid #000000; 
		width: 100px; 
		padding: 3px; 
		color: #FFFFFF; 
		background: #000000; 
		border-radius: 5px; 
		box-shadow: 8px 8px 12px #aaa;
		display: inline-block;
		margin-left: 15px;
		margin-top: 5px;
		}
		

table.disponible 						{ text-align: center; }
table.disponible th						{ border: 4px ; min-width: 200px; padding: 3px; }
table.disponible th.Astreinte			{ color: #000000; background: #234CA5; border-radius: 5px; } 
table.disponible th.Garde				{ color: #FFFFFF; background: #419F2E; border-radius: 5px; }
table.disponible th.Intervention			{ color: #FFFFFF; background: #DB2218; border-radius: 5px; } 
table.disponible th.Sport				{ color: #000000; background: #FDD131; border-radius: 5px; }
table.disponible th.head				{ color: #000000; background: #FFFFFF; border-radius: 5px; border-color: #000000; border: 1px; }

#msg 
{ 
border-top : 1px solid #696969; 
width : auto; 
}

#signature 
{ 
border-top : 1px solid #696969; 
width : 20px; 
text-align: center;
}


/* SELECT */
select#planning {
   -webkit-appearance: button;
   -webkit-border-radius: 5px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-image: url(../images/select.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   color: #555;
   font-size: inherit;
   margin: 10px;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 135px;
}

select#piquet {
   -webkit-appearance: button;
   -webkit-border-radius: 5px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-image: url(../images/select.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   color: #000000;
   font-size: inherit;
   margin: 2px;
   overflow: hidden;
   padding: 3px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 75px;
}

/* === PATCH SDIS118 - Synoptique véhicules panel === */
.synoptique,
.synoptique0,
.synoptique1,
.synoptique1.dispo-ok,
.synoptique1.dispo-nok,
.synoptique2,
.synoptique3,
.synoptique4,
.synoptique5,
.synoptique6,
.synoptique7,
.synoptique8,
.synoptique9,
.synoptique10,
.synoptique11,
.synoptique12,
.synoptique13,
.synoptique14,
.synoptique15,
.synoptique16,
.synoptique17,
.synoptique18,
.synoptique19,
.synoptique20 {
    text-align: center;
    border: 1px solid #000000;
    width: 90px;
    padding: 3px;
    border-radius: 10px;
    box-shadow: 8px 8px 12px #aaa;
    display: inline-block;
    margin-left: 15px;
    margin-top: 5px;
}

.synoptique0 { color: #ffffff; background: #000000; }
.synoptique1,
.synoptique1.dispo-ok { color: #000000; background: #419f2e; }
.synoptique1.dispo-nok,
.synoptique20 { color: #1e1e1e; background: #faff93; }
.synoptique2 { color: #ff0101; background: #ffffff; }
.synoptique3 { color: #ffffff; background: #ff140c; }
.synoptique4 { color: #000000; background: #ff140c; }
.synoptique5 { color: #000000; background: #495cff; }
.synoptique6 { color: #ffffff; background: #495cff; }
.synoptique7 { color: #ffffff; background: #419f2e; }
.synoptique8 { color: #ffd940; background: #0118ea; }
.synoptique9 { color: #ffffff; background: #434543; }
.synoptique10 { color: #000000; background: #ff483d; }
.synoptique11 { color: #ffffff; background: #235218; }
.synoptique12 { color: #e8cc06; background: #000000; }
.synoptique13 { color: #ffffff; background: #419f2e; }
.synoptique14 { color: #ffffff; background: #6e0b14; }
.synoptique15 { color: #ffffff; background: #795344; }
.synoptique16 { color: #ffffff; background: #4e3d28; }

/* CTA CODIS - Pré-alerte */
.synoptique21,
.inter21 {
    text-align: center;
    border: 1px solid #8a6500;
    width: 100px;
    padding: 3px;
    color: #1f252e;
    background: #f2c230;
    border-radius: 10px;
    box-shadow: 8px 8px 12px #aaa;
    display: inline-block;
    margin-left: 15px;
    margin-top: 5px;
}
.synoptique17 { color: #000000; background: #434543; }
.synoptique18 { color: #ffffff; background: #b2119d; }
.synoptique19 { color: #000000; background: #798081; }
/* === FIN PATCH SDIS118 - Synoptique véhicules panel === */








/* === Zone18 site polish start === */
html,
body {
    background-color: #e8ebef;
}

body {
    color: #242a33;
}

a,
a:hover,
a:visited,
a:link {
    color: #1f252e;
}

a:hover {
    color: #b22922;
}

#content {
    padding-bottom: 20px;
}

.centered {
    max-width: 950px;
}

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10 {
    margin-bottom: 18px;
}

.title-grid {
    height: auto;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #151a21;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    background: #1f252e;
    box-shadow: 0 2px 7px rgba(31, 37, 46, 0.12);
    letter-spacing: 0;
    line-height: 34px;
}

.title-grid span,
.title-grid center {
    float: none;
    display: inline-block;
    padding-left: 0;
    color: #ffffff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 34px;
    text-transform: uppercase;
    letter-spacing: 0;
}

.title-grid ul {
    height: auto;
    margin: 0;
    line-height: 34px;
}

.content-gird-1,
.content-gird-2,
.content-gird-3,
.content-gird-4,
.content-gird-5 {
    margin-top: 0;
    padding: 12px;
    color: #343b45;
    background: #ffffff;
    border: 1px solid #d8dde5;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(31, 37, 46, 0.08);
}

.avis_dossier,
.messages,
.message {
    border: 1px solid #d8dde5;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(31, 37, 46, 0.07);
}

hr {
    border-top-color: #d8dde5;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: #ffffff;
}

table thead tr th,
table tbody tr td {
    height: auto;
    padding: 8px 9px;
    border-bottom: 1px solid #d8dde5;
    color: #242a33;
    font-size: 12px;
    line-height: 17px;
}

table thead tr th {
    color: #1f252e;
    background: #f1f0f6;
    font-weight: bold;
}

table tbody tr {
    background: #ffffff;
}

table tbody tr:nth-child(even) {
    background: #f8f9fb;
}

table tbody tr:hover {
    background: #fff4f2;
}

.clear_table,
.clear_table tr td {
    width: auto;
    background: transparent;
    border: 0;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
    min-height: 28px;
    border: 1px solid #c8ced8;
    border-radius: 6px;
    color: #242a33;
    background-color: #ffffff;
    box-shadow: inset 0 1px 2px rgba(31, 37, 46, 0.06);
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    border-color: #b22922;
    box-shadow: 0 0 0 2px rgba(178, 41, 34, 0.12);
}

textarea {
    line-height: 18px;
}

.button-input,
.button-a,
.button-a span {
    min-height: 30px;
    height: auto;
    padding: 0 12px;
    border: 1px solid #151a21;
    border-radius: 6px;
    color: #ffffff;
    background: #1f252e;
    background-image: none;
    font-weight: bold;
    line-height: 28px;
    text-transform: uppercase;
    text-decoration: none;
    box-sizing: border-box;
}

.button-input:hover,
.button-a:hover,
.button-a:hover span {
    color: #ffffff;
    background: #b22922;
    border-color: #b22922;
    text-decoration: none;
}

.button-input.blue,
.button-input.bleu,
.button-a.blue {
    background: #255f8f;
    border-color: #255f8f;
}

.button-input.gray,
.button-input.gris,
.button-a.gray {
    background: #555f6d;
    border-color: #555f6d;
}

.button-input.chat1 {
    background: #2d7d62;
    border-color: #2d7d62;
}

.button-input.chat2 {
    background: #b22922;
    border-color: #b22922;
}

.alert {
    min-height: 20px;
    height: auto;
    padding: 10px 38px 10px 12px;
    border-radius: 6px;
    background-image: none;
    color: #242a33;
    font-weight: bold;
    line-height: 18px;
    text-transform: none;
    position: relative;
}

.alert.gray {
    color: #3f4651;
    background: #eef1f5;
    border: 1px solid #c8ced8;
}

.alert.green {
    color: #225b32;
    background: #e8f5ec;
    border: 1px solid #84bd94;
}

.alert.red {
    color: #84211c;
    background: #fdecea;
    border: 1px solid #e59b95;
}

.alert.blue {
    color: #22587a;
    background: #e9f4fb;
    border: 1px solid #93bed8;
}

.alert.orange {
    color: #7a4c0b;
    background: #fff4df;
    border: 1px solid #e6bd70;
}

.alert .close {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 0;
    background: none;
}

.alert .close::before {
    content: "x";
    display: block;
    color: inherit;
    font-size: 14px;
    line-height: 18px;
    text-indent: 0;
    text-align: center;
}

#historique {
    max-height: 260px;
    overflow: auto;
    padding-right: 6px;
    line-height: 19px;
}

#historique span {
    font-weight: bold;
}

@media screen and (max-width: 980px) {
    .grid-1,
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6,
    .grid-7,
    .grid-8,
    .grid-9,
    .grid-10 {
        width: 100%;
        margin-right: 0;
        float: none;
    }
}
/* === Zone18 site polish end === */























/* === Zone18 decoration layer start === */
header {
    position: relative;
}

#bagraund-header {
    position: relative;
}

#logo {
    margin-top: 18px;
}

#user-panel {
    float: right;
    max-width: 650px;
    margin-top: 24px;
    margin-right: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    background: rgba(31, 37, 46, 0.90);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
    color: #ffffff;
    font-size: 11px;
}

#user-panel ul {
    display: block;
    float: none;
    padding: 0;
}

#user-panel li {
    display: block;
    list-style: none;
    color: #ffffff;
    line-height: 16px;
}

#user-panel li:first-child {
    padding-bottom: 5px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

#user-panel font {
    color: #ffffff;
}

#user-panel strong {
    color: #ffffff;
}

#user-panel a {
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    text-decoration: none;
}

#user-panel a:hover {
    color: #ffcec9;
    border-bottom-color: #ffcec9;
}

.greeting {
    border: 1px solid #d8dde5;
    border-radius: 6px;
    background: #ffffff;
    background-image: none;
    box-shadow: 0 4px 12px rgba(31, 37, 46, 0.08);
    color: #242a33;
}

.greeting-title {
    color: #1f252e;
    font-weight: bold;
}

ul#main-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

ul#main-menu li {
    float: none;
    width: 217px;
    min-height: 74px;
    height: auto;
    margin: 0;
    padding: 0;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    background: #ffffff;
    background-image: none;
    box-shadow: 0 4px 12px rgba(31, 37, 46, 0.08);
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

ul#main-menu li:hover {
    background: #1f252e;
    background-image: none;
    border-color: #1f252e;
    box-shadow: 0 7px 16px rgba(31, 37, 46, 0.18);
    transform: translateY(-1px);
}

ul#main-menu li a {
    width: auto;
    min-height: 74px;
    height: auto;
    padding: 0;
    color: #1f252e;
}

ul#main-menu li:hover a {
    color: #ffffff;
}

ul#main-menu li .section {
    padding-top: 10px;
    font-size: 12px;
    line-height: 18px;
}

ul#main-menu li .description {
    color: #5b6470;
    line-height: 16px;
}

ul#main-menu li:hover .description {
    color: #d8dde5;
}

.icons {
    margin-top: 2px;
}

.avatar {
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(31, 37, 46, 0.14);
}

.action img,
a img {
    vertical-align: middle;
}

.published,
.not_published,
.moderation {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 6px;
    color: #ffffff;
    line-height: 15px;
}

footer {
    min-height: 64px;
    height: auto;
    margin-top: 24px;
    background: #1f252e;
    background-image: none;
    border-top: 3px solid #b22922;
}

.info-tooter {
    width: 948px;
    height: auto;
    min-height: 24px;
    padding-top: 20px;
    padding-bottom: 18px;
    color: #ffffff;
    line-height: 18px;
}

#left,
#right {
    padding-bottom: 0;
}

#left a,
#right li a {
    color: #ffffff;
    text-decoration: underline;
}

#left a:hover,
#right li a:hover {
    color: #ffcec9;
    text-decoration: none;
}

#right li {
    border-left-color: rgba(255, 255, 255, 0.22);
}

div.jGrowl div.jGrowl-notification,
div.jGrowl div.jGrowl-closer {
    border-radius: 6px;
    background: #1f252e;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

@media screen and (max-width: 980px) {
    #user-panel {
        float: none;
        max-width: none;
        margin-top: 100px;
    }

    .info-tooter {
        width: calc(100% - 24px);
    }

    #left,
    #right {
        float: none;
        margin-right: 0;
    }

    ul#main-menu li {
        width: calc(50% - 8px);
    }
}
/* === Zone18 decoration layer end === */



/* === Zone18 centered logo start === */
#bagraund-header {
    position: relative;
}

#logo {
    float: none;
    position: relative;
    display: block;
    width: 100%;
    height: 160px;
    margin: 0 auto;
    padding-left: 0;
    background-image: none;
    filter: none;
}

#user-panel {
    position: absolute;
    top: 18px;
    left: 0;
    right: auto;
    float: none;
    max-width: 720px;
    margin: 0;
    transform: none;
}

@media screen and (max-width: 980px) {
    #logo {
        height: 172px;
        margin-top: 0;
    }

    #user-panel {
        top: 14px;
        left: 12px;
        width: calc(100% - 24px);
        max-width: none;
    }
}
/* === Zone18 centered logo end === */











/* === Zone18 index home start === */
.zone18-home header.zone18-home-header {
    height: 240px;
    background-position: center center, center center;
    background-size: cover, cover;
}

.zone18-home #bagraund-header {
    height: 190px;
}

.zone18-login-band {
    min-height: 52px;
    margin-top: -50px;
    background: #1f252e;
    border-top: 3px solid #b22922;
    border-bottom: 1px solid #10141a;
    box-shadow: 0 4px 12px rgba(31, 37, 46, 0.18);
    position: relative;
    z-index: 20;
}

.zone18-login-form {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    color: #ffffff;
}

.zone18-login-form label {
    color: #ffffff;
    font-weight: bold;
}

.zone18-login-form input[type="text"],
.zone18-login-form input[type="password"] {
    width: 170px;
    height: 30px;
    min-height: 30px;
    border-color: #c8ced8;
    border-radius: 6px;
}

.zone18-login-submit {
    height: 32px;
    min-width: 112px;
    padding: 0 14px;
    border: 1px solid #345f8d;
    border-radius: 6px;
    color: #ffffff;
    background: #345f8d;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}

.zone18-login-submit:hover {
    background: #b22922;
    border-color: #b22922;
}

.zone18-login-form a {
    color: #ffffff;
    font-weight: bold;
}

.zone18-login-form a:hover {
    color: #ffcec9;
}

.zone18-login-separator {
    color: rgba(255, 255, 255, 0.55);
}

.zone18-home-alerts {
    padding-top: 16px;
}

.zone18-home-content {
    padding-top: 14px;
}

.zone18-home-main {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 18px;
    margin-bottom: 18px;
}

.zone18-home-intro,
.zone18-home-side,
.zone18-home-previews {
    border: 1px solid #d8dde5;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(31, 37, 46, 0.08);
    overflow: hidden;
}

.zone18-home-titlebar {
    padding: 12px 14px;
    color: #ffffff;
    background: #1f252e;
    border-bottom: 3px solid #b22922;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

.zone18-home-intro-body {
    padding: 20px;
}

.zone18-home-intro h1 {
    margin: 0 0 12px;
    color: #1f252e;
    font-size: 25px;
    font-weight: bold;
    line-height: 31px;
}

.zone18-home-intro p {
    max-width: 680px;
    margin: 0 0 12px;
    color: #404854;
    font-size: 13px;
    line-height: 21px;
}

.zone18-home-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.zone18-home-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #1f252e;
    border-radius: 6px;
    color: #ffffff !important;
    background: #1f252e;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}

.zone18-home-actions a:first-child {
    border-color: #b22922;
    background: #b22922;
}

.zone18-home-actions a:hover {
    background: #345f8d;
    border-color: #345f8d;
    text-decoration: none;
}

.zone18-home-side ul {
    margin: 0;
    padding: 14px 16px 16px;
}

.zone18-home-side li {
    list-style: none;
    padding: 9px 0;
    border-bottom: 1px solid #e5e9ef;
    color: #404854;
    font-size: 13px;
    line-height: 18px;
}

.zone18-home-side li:last-child {
    border-bottom: 0;
}

.zone18-preview-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 14px;
}

.zone18-preview-row a {
    display: block;
    height: 82px;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    background: #f8f9fb;
    overflow: hidden;
}

.zone18-preview-row img {
    display: block;
    width: 100%;
    height: 82px;
    object-fit: cover;
}

@media screen and (max-width: 980px) {
    .zone18-login-form {
        flex-wrap: wrap;
        padding: 8px 0;
    }

    .zone18-login-form input[type="text"],
    .zone18-login-form input[type="password"] {
        width: 150px;
    }

    .zone18-home-main,
    .zone18-preview-row {
        display: block;
    }

    .zone18-home-side,
    .zone18-preview-row a {
        margin-top: 14px;
    }

    .zone18-home-actions {
        display: block;
    }

    .zone18-home-actions a {
        margin: 0 8px 8px 0;
    }
}
/* === Zone18 index home end === */



/* === Zone18 jeu accueil start === */
.jeu-news {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(31, 37, 46, 0.07);
}

.jeu-news strong {
    color: #b22922;
    text-transform: uppercase;
}

.jeu-board,
.jeu-panel {
    border: 1px solid #d8dde5;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(31, 37, 46, 0.08);
    overflow: hidden;
}

.jeu-board {
    margin-bottom: 18px;
}

.jeu-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 3px solid #b22922;
    background: #1f252e;
}

.jeu-board-head h1 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    line-height: 28px;
}

.jeu-board-head p {
    margin: 4px 0 0;
    color: #d8dde5;
    line-height: 18px;
}

.jeu-head-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 6px;
    color: #ffffff !important;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

.jeu-head-link:hover {
    background: #b22922;
    border-color: #b22922;
    text-decoration: none;
}

.jeu-identity {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 0;
    border-bottom: 1px solid #e1e5eb;
}

.jeu-grade,
.jeu-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 72px;
    padding: 10px 12px;
    border-right: 1px solid #e1e5eb;
}

.jeu-info:last-child {
    border-right: 0;
}

.jeu-grade img {
    max-width: 38px;
    max-height: 38px;
}

.jeu-grade span,
.jeu-info span,
.jeu-stats span {
    display: block;
    color: #6a737f;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    text-transform: uppercase;
}

.jeu-grade strong,
.jeu-info strong {
    display: block;
    color: #1f252e;
    font-size: 13px;
    line-height: 18px;
}

.jeu-stats {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}

.jeu-stats div {
    min-height: 58px;
    padding: 10px 8px;
    border-right: 1px solid #e1e5eb;
    text-align: center;
}

.jeu-stats div:last-child {
    border-right: 0;
}

.jeu-stats strong {
    display: block;
    color: #b22922;
    font-size: 18px;
    line-height: 24px;
}

.jeu-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 18px;
}

.jeu-panel-large {
    grid-column: span 1;
}

.jeu-panel-title {
    padding: 11px 14px;
    color: #ffffff;
    background: #1f252e;
    border-bottom: 3px solid #b22922;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

.jeu-empty {
    padding: 14px;
    color: #5d6672;
}

.jeu-table {
    width: 100%;
    border-collapse: collapse;
}

.jeu-table th,
.jeu-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #e1e5eb;
    color: #343b45;
    font-size: 12px;
    line-height: 17px;
}

.jeu-table th {
    color: #1f252e;
    background: #f1f0f6;
    font-weight: bold;
    text-align: left;
}

.jeu-table tr:last-child td {
    border-bottom: 0;
}

.jeu-table a {
    color: #b22922;
    font-weight: bold;
}

.jeu-note-form {
    padding: 12px;
}

.jeu-note-form textarea {
    width: 100%;
    min-height: 170px;
    box-sizing: border-box;
    resize: vertical;
}

.jeu-note-form .button-input {
    margin-top: 10px;
}

.jeu-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
}

.jeu-links a {
    display: block;
    padding: 9px 10px;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    color: #1f252e;
    background: #f8f9fb;
    font-weight: bold;
    text-decoration: none;
}

.jeu-links a:hover {
    color: #ffffff;
    background: #b22922;
    border-color: #b22922;
    text-decoration: none;
}

@media screen and (max-width: 980px) {
    .jeu-board-head,
    .jeu-news {
        display: block;
    }

    .jeu-head-link {
        margin-top: 10px;
    }

    .jeu-identity,
    .jeu-stats,
    .jeu-layout {
        display: block;
    }

    .jeu-grade,
    .jeu-info,
    .jeu-stats div {
        border-right: 0;
        border-bottom: 1px solid #e1e5eb;
    }

    .jeu-panel {
        margin-bottom: 16px;
    }
}
/* === Zone18 jeu accueil end === */











/* === Zone18 header background start === */
header {
    height: 220px;
    background-color: #1f252e;
    background-image:
        linear-gradient(rgba(15, 18, 23, 0.10), rgba(15, 18, 23, 0.04)),
        url("../images/bg_head10.png");
    background-repeat: no-repeat;
    background-position: center center, center 54%;
    background-size: cover, cover;
}

#bagraund-header {
    height: 170px;
    background-image: none;
}

#logo {
    margin-top: 0;
    filter: none;
}

#user-panel {
    margin-top: 28px;
}

nav {
    margin-top: -50px;
}
/* === Zone18 header background end === */



/* === Zone18 UI uniform start === */
form .elem {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 10px;
    align-items: center;
    margin: 0 0 10px;
}

form .elem label {
    color: #242a33;
    font-weight: bold;
    line-height: 18px;
}

form .elem .right {
    float: none;
    width: auto;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
    max-width: 100%;
}

select {
    min-height: 30px;
    padding: 5px 8px;
}

textarea {
    box-sizing: border-box;
}

.button-input,
button,
input[type="submit"] {
    vertical-align: middle;
}

.button-input {
    white-space: normal;
}

.display,
table.display {
    width: 100%;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    overflow: hidden;
}

.display th,
.display td,
table.display th,
table.display td {
    padding: 8px 9px;
    line-height: 18px;
}

.display th,
table.display th {
    color: #1f252e;
    background: #eef1f5;
    font-weight: bold;
}

.content-gird-1 > form,
.content-gird-2 > form,
.content-gird-3 > form {
    margin: 0;
}

.content-gird-1 center form,
.content-gird-2 center form {
    display: inline-block;
    text-align: left;
}

.form-actions,
.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}

.form-actions.center,
.action-row.center {
    justify-content: center;
}

.sdis-mini-link,
.content-gird-1 a,
.content-gird-2 a {
    font-weight: bold;
}

.sdis-muted {
    color: #6a737f;
}

.sdis-status {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 6px;
    background: #eef1f5;
    color: #343b45;
    font-weight: bold;
    line-height: 16px;
}

.sdis-status.green {
    background: #e8f5ec;
    color: #225b32;
}

.sdis-status.red {
    background: #fdecea;
    color: #84211c;
}

.sdis-status.orange {
    background: #fff4df;
    color: #7a4c0b;
}

.sdis-status.blue {
    background: #e9f4fb;
    color: #22587a;
}

.panel-summary,
.sdis-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.panel-summary > div,
.sdis-summary > div {
    padding: 10px;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    background: #ffffff;
    text-align: center;
}

.panel-summary b,
.sdis-summary b {
    display: block;
    color: #b22922;
    font-size: 20px;
    line-height: 24px;
}

.panel-summary span,
.sdis-summary span {
    display: block;
    color: #4e5865;
    font-weight: bold;
    line-height: 17px;
}

@media screen and (max-width: 980px) {
    form .elem {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .panel-summary,
    .sdis-summary {
        grid-template-columns: 1fr 1fr;
    }
}
/* === Zone18 UI uniform end === */


/* === Zone18 jeu accueil sobre start === */
.jeu-home-profile {
    padding-top: 4px;
}

.jeu-home-grade {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0 12px;
    border-bottom: 1px solid #d8dde5;
}

.jeu-home-grade img {
    max-width: 46px;
    max-height: 46px;
}

.jeu-home-grade b {
    display: block;
    color: #1f252e;
    font-size: 16px;
    line-height: 22px;
}

.jeu-home-grade span {
    color: #6a737f;
    font-weight: bold;
}

.jeu-home-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 12px 0;
}

.jeu-home-status-grid div,
.jeu-home-mini div {
    padding: 9px;
    border: 1px solid #d8dde5;
    border-radius: 5px;
    background: #ffffff;
}

.jeu-home-status-grid span,
.jeu-home-mini span {
    display: block;
    color: #6a737f;
    font-size: 11px;
    font-weight: bold;
    line-height: 15px;
    text-transform: uppercase;
}

.jeu-home-status-grid b {
    display: block;
    color: #1f252e;
    line-height: 18px;
}

.jeu-home-mini {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.jeu-home-mini b {
    display: block;
    color: #b22922;
    font-size: 18px;
    line-height: 24px;
}

.jeu-home-mini-site {
    margin-bottom: 12px;
}

.jeu-home-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.jeu-home-links a {
    padding: 8px 9px;
    border: 1px solid #cfd5dd;
    border-radius: 5px;
    background: #ffffff;
    color: #1f252e;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.jeu-home-links a:hover,
.jeu-home-table a:hover {
    color: #ffffff;
    background: #b22922;
    border-color: #b22922;
    text-decoration: none;
}

.jeu-home-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.jeu-home-table th,
.jeu-home-table td {
    padding: 8px 9px;
    border-bottom: 1px solid #d8dde5;
    color: #343b45;
    line-height: 18px;
    text-align: left;
}

.jeu-home-table th {
    background: #e9edf2;
    color: #1f252e;
    font-weight: bold;
}

.jeu-home-table tr:last-child td {
    border-bottom: 0;
}

.jeu-home-table a {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid #b22922;
    border-radius: 4px;
    color: #b22922;
    font-weight: bold;
}

.jeu-home-news-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jeu-home-news-list li {
    padding: 8px 0;
    border-bottom: 1px solid #d8dde5;
    line-height: 18px;
}

.jeu-home-news-list li:last-child {
    border-bottom: 0;
}

.jeu-home-note textarea {
    width: 100%;
    min-height: 170px;
    box-sizing: border-box;
    resize: vertical;
}

.jeu-home-actions {
    margin-top: 10px;
    text-align: right;
}

.jeu-home-empty {
    padding: 6px 0;
    color: #666;
}

@media screen and (max-width: 980px) {
    .jeu-home-status-grid,
    .jeu-home-mini,
    .jeu-home-links {
        grid-template-columns: 1fr;
    }
}
/* === Zone18 jeu accueil sobre end === */

/* === Zone18 jeu situation propre start === */
.jeu-situation-card {
    padding: 0;
}

.jeu-situation-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px;
    border: 1px solid #d8dde5;
    border-radius: 5px;
    background: #ffffff;
}

.jeu-situation-grade {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    min-width: 58px;
    height: 58px;
    border: 1px solid #d8dde5;
    border-radius: 5px;
    background: #f8f9fb;
}

.jeu-situation-grade img {
    max-width: 46px;
    max-height: 46px;
}

.jeu-situation-name span {
    display: block;
    color: #8a2b25;
    font-size: 11px;
    font-weight: bold;
    line-height: 15px;
    text-transform: uppercase;
}

.jeu-situation-name b {
    display: block;
    color: #1f252e;
    font-size: 18px;
    line-height: 23px;
}

.jeu-situation-name em {
    display: block;
    color: #5f6874;
    font-style: normal;
    font-weight: bold;
    line-height: 18px;
}

.jeu-situation-lines {
    margin: 10px 0;
    border: 1px solid #d8dde5;
    border-radius: 5px;
    overflow: hidden;
    background: #ffffff;
}

.jeu-situation-lines div {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #e1e5eb;
}

.jeu-situation-lines div:last-child {
    border-bottom: 0;
}

.jeu-situation-lines span {
    color: #6a737f;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.jeu-situation-lines b {
    color: #1f252e;
    line-height: 18px;
}

.jeu-situation-stats div {
    text-align: center;
}

@media screen and (max-width: 980px) {
    .jeu-situation-lines div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}
/* === Zone18 jeu situation propre end === */

/* === Zone18 jeu tableaux propres start === */
.jeu-clean-card {
    border: 1px solid #d8dde5;
    border-radius: 5px;
    background: #ffffff;
    overflow: hidden;
}

.jeu-clean-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 3px solid #b22922;
    background: #ffffff;
}

.jeu-clean-head img {
    max-width: 42px;
    max-height: 42px;
}

.jeu-clean-head b {
    display: block;
    color: #1f252e;
    font-size: 17px;
    line-height: 22px;
}

.jeu-clean-head span {
    display: block;
    color: #6a737f;
    font-weight: bold;
    line-height: 18px;
}

.jeu-clean-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.jeu-clean-table th,
.jeu-clean-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #e1e5eb;
    line-height: 18px;
    text-align: left;
    vertical-align: middle;
}

.jeu-clean-table tr:last-child th,
.jeu-clean-table tr:last-child td {
    border-bottom: 0;
}

.jeu-clean-table th {
    width: 145px;
    color: #1f252e;
    background: #eef1f5;
    font-weight: bold;
}

.jeu-clean-table td {
    color: #343b45;
}

.jeu-clean-table td b {
    color: #b22922;
}

.jeu-clean-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    background: #e8f5ec;
    color: #225b32;
    font-weight: bold;
}

.jeu-activity-table {
    margin-bottom: 12px;
    border: 1px solid #d8dde5;
    border-radius: 5px;
    overflow: hidden;
}

.jeu-clean-subtitle {
    margin: 2px 0 8px;
    color: #1f252e;
    font-weight: bold;
    text-transform: uppercase;
}

@media screen and (max-width: 980px) {
    .jeu-clean-table th,
    .jeu-clean-table td {
        display: block;
        width: auto;
    }

    .jeu-clean-table th {
        border-bottom: 0;
        padding-bottom: 3px;
    }

    .jeu-clean-table td {
        padding-top: 3px;
    }
}
/* === Zone18 jeu tableaux propres end === */

/* === Zone18 jeu finition start === */
.jeu-section-card {
    border: 1px solid #d8dde5;
    border-radius: 5px;
    background: #ffffff;
    overflow: hidden;
}

.jeu-wide-table th {
    width: auto;
}

.jeu-wide-table thead th {
    border-bottom: 1px solid #cfd5dd;
    background: #eef1f5;
}

.jeu-wide-table tbody tr:nth-child(even) td {
    background: #fafbfc;
}

.jeu-table-action,
.jeu-clean-table a.jeu-table-action {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid #b22922;
    border-radius: 4px;
    color: #b22922;
    font-weight: bold;
    text-decoration: none;
}

.jeu-table-action:hover,
.jeu-clean-table a.jeu-table-action:hover {
    color: #ffffff;
    background: #b22922;
    text-decoration: none;
}

.jeu-clean-news-list {
    padding: 0 10px;
}

.jeu-clean-news-list li {
    position: relative;
    padding: 9px 0 9px 14px;
}

.jeu-clean-news-list li:before {
    content: "";
    position: absolute;
    top: 16px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b22922;
}

.jeu-clean-note {
    padding: 10px;
}

.jeu-clean-note textarea {
    min-height: 190px;
    border: 1px solid #cfd5dd;
    border-radius: 5px;
    background: #fbfcfd;
    color: #343b45;
    line-height: 18px;
}

.jeu-clean-note textarea:focus {
    border-color: #b22922;
    background: #ffffff;
}

.jeu-home-empty {
    padding: 12px;
    color: #666;
    background: #ffffff;
}
/* === Zone18 jeu finition end === */

/* === Zone18 forum propre start === */
.forum-intro {
    padding: 12px;
    border: 1px solid #d8dde5;
    border-radius: 5px;
    background: #ffffff;
}

.forum-intro b,
.forum-intro span {
    display: block;
}

.forum-intro b {
    color: #1f252e;
    font-size: 16px;
    line-height: 22px;
}

.forum-intro span {
    color: #5f6874;
    line-height: 18px;
}

.forum-section {
    margin-top: 18px;
}

.forum-category-list {
    border: 1px solid #d8dde5;
    border-radius: 5px;
    background: #ffffff;
    overflow: hidden;
}

.forum-category-row {
    display: grid;
    grid-template-columns: 16px 1fr 78px 88px 165px;
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border-bottom: 1px solid #e1e5eb;
    color: #343b45;
    text-decoration: none;
}

.forum-category-row:last-child {
    border-bottom: 0;
}

.forum-category-row:hover {
    background: #f8f9fb;
    text-decoration: none;
}

.forum-category-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #aeb7c2;
}

.forum-category-row.is-new .forum-category-dot {
    background: #b22922;
}

.forum-category-main b,
.forum-category-main em {
    display: block;
}

.forum-category-main b {
    color: #1f252e;
    line-height: 18px;
}

.forum-category-main em {
    color: #66707c;
    font-style: normal;
    line-height: 17px;
}

.forum-category-stat {
    color: #66707c;
    text-align: center;
    line-height: 15px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
}

.forum-category-stat b {
    display: block;
    color: #b22922;
    font-size: 17px;
    line-height: 21px;
}

.forum-category-last {
    color: #66707c;
    text-align: right;
    font-size: 11px;
    line-height: 16px;
}

.forum-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.forum-toolbar a,
.forum-message-actions a {
    display: inline-block;
    padding: 5px 9px;
    border: 1px solid #b22922;
    border-radius: 4px;
    color: #b22922;
    background: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

.forum-toolbar a:hover,
.forum-message-actions a:hover {
    color: #ffffff;
    background: #b22922;
    text-decoration: none;
}

.forum-topic-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #d8dde5;
    border-radius: 5px;
    background: #ffffff;
    overflow: hidden;
}

.forum-topic-table th,
.forum-topic-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #e1e5eb;
    line-height: 18px;
    text-align: left;
}

.forum-topic-table th {
    background: #eef1f5;
    color: #1f252e;
}

.forum-topic-table tr:last-child td {
    border-bottom: 0;
}

.forum-topic-table small {
    display: block;
    color: #66707c;
}

.forum-topic-table a {
    color: #1f252e;
}

.forum-state {
    display: inline-block;
    min-width: 58px;
    padding: 3px 6px;
    border-radius: 4px;
    background: #eef1f5;
    color: #4d5662;
    font-weight: bold;
    text-align: center;
}

.forum-state-nouveau,
.forum-state-important {
    background: #fdecea;
    color: #8a2b25;
}

.forum-state-ferme {
    background: #f1f1f1;
    color: #555;
}

.forum-message-card {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 14px;
    width: 948px;
    margin-top: 18px;
}

.forum-message-author,
.forum-message-body {
    border: 1px solid #d8dde5;
    border-radius: 5px;
    background: #ffffff;
}

.forum-message-author {
    padding: 14px 12px;
    text-align: center;
}

.forum-message-author img {
    max-width: 52px;
    max-height: 52px;
    margin-bottom: 8px;
}

.forum-message-author b,
.forum-message-author span,
.forum-message-author em,
.forum-message-author strong {
    display: block;
}

.forum-message-author b {
    color: #1f252e;
    font-size: 16px;
    line-height: 22px;
}

.forum-message-author span,
.forum-message-author em {
    color: #66707c;
    font-style: normal;
    line-height: 18px;
}

.forum-message-author strong {
    margin-top: 6px;
    color: #b22922;
}

.forum-message-body {
    overflow: hidden;
}

.forum-message-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid #e1e5eb;
    background: #eef1f5;
    color: #59636f;
    font-weight: bold;
}

.forum-message-content {
    min-height: 110px;
    padding: 14px;
    color: #343b45;
    line-height: 20px;
}

.forum-signature {
    margin: 0 14px 12px;
    padding-top: 10px;
    border-top: 1px solid #e1e5eb;
    color: #66707c;
}

.forum-message-actions {
    padding: 10px 12px;
    border-top: 1px solid #e1e5eb;
    text-align: right;
}

.forum-message-card.is-deleted .forum-message-body {
    opacity: 0.82;
}

.forum-form {
    border: 1px solid #d8dde5;
    border-radius: 5px;
    background: #ffffff;
    padding: 12px;
}

.forum-form input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

.forum-form-actions {
    margin-top: 12px;
    text-align: right;
}

@media screen and (max-width: 980px) {
    .forum-category-row,
    .forum-message-card {
        display: block;
        width: auto;
    }

    .forum-category-stat,
    .forum-category-last {
        margin-top: 6px;
        text-align: left;
    }

    .forum-message-author {
        margin-bottom: 10px;
    }
}
/* === Zone18 forum propre end === */

/* === Zone18 forum tableau ancien start === */
.forum-section-old {
    margin-top: 16px;
}

.forum-home-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #d4d8df;
    background: #ffffff;
}

.forum-home-table th {
    padding: 8px 10px;
    background: #eef1f5;
    border-bottom: 1px solid #d4d8df;
    color: #1f252e;
    font-weight: bold;
    text-align: left;
}

.forum-home-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #e4e7ec;
    color: #343b45;
    vertical-align: middle;
}

.forum-home-table tr:last-child td {
    border-bottom: 0;
}

.forum-home-table tr:hover td {
    background: #f8f9fb;
}

.forum-home-table tr.forum-home-new td {
    background: #fff7f6;
}

.forum-home-status {
    width: 34px;
    text-align: center !important;
}

.forum-home-status img,
.forum-legend-table img {
    max-width: 18px;
    vertical-align: middle;
}

.forum-home-main a {
    color: #1f252e;
    font-weight: bold;
    text-decoration: underline;
}

.forum-home-main small {
    display: block;
    margin-top: 3px;
    color: #66707c;
    line-height: 17px;
}

.forum-home-count {
    width: 78px;
    text-align: center !important;
}

.forum-home-last {
    width: 160px;
    color: #66707c !important;
    text-align: right !important;
}

.forum-legend-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.forum-legend-table td {
    padding: 7px 10px;
    color: #4d5662;
    text-align: center;
}

@media (max-width: 760px) {
    .forum-home-table,
    .forum-home-table thead,
    .forum-home-table tbody,
    .forum-home-table tr,
    .forum-home-table th,
    .forum-home-table td {
        display: block;
        width: auto;
    }

    .forum-home-table thead {
        display: none;
    }

    .forum-home-table tr {
        border-bottom: 1px solid #e4e7ec;
    }

    .forum-home-status,
    .forum-home-count,
    .forum-home-last {
        text-align: left !important;
    }

    .forum-home-count,
    .forum-home-last {
        display: inline-block;
        padding-top: 0;
        width: auto;
    }
}
/* === Zone18 forum tableau ancien end === */

/* === Zone18 forum sujet ancien start === */
.forum-old-toolbar {
    margin: 0;
    text-align: right;
    line-height: 22px;
}

.forum-old-toolbar a {
    color: #1f252e;
    text-decoration: underline;
}

.forum-old-message {
    margin-top: 14px;
}

.forum-old-author {
    min-height: 170px;
}

.forum-old-author h3 {
    margin: 4px 0 10px;
    color: #1f252e;
    font-size: 17px;
}

.forum-old-grade {
    max-width: 58px;
    max-height: 58px;
}

.forum-old-body {
    min-height: 170px;
}

.forum-old-content {
    min-height: 95px;
    color: #343b45;
    line-height: 20px;
}

.forum-old-content p {
    margin-top: 0;
}

.forum-old-meta {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #e1e5eb;
}

.forum-old-meta .right a {
    margin-left: 8px;
    color: #b22922;
    font-weight: bold;
}

@media (max-width: 760px) {
    .forum-old-toolbar {
        text-align: left;
    }
}
/* === Zone18 forum sujet ancien end === */

/* === Zone18 forum sujet compact start === */
.forum-old-user-tab {
    width: 190px;
}

.forum-old-message-tab {
    width: 734px;
}

.forum-old-author {
    min-height: 145px;
    padding: 8px;
}

.forum-old-author h3,
.forum-old-author .forum-old-name {
    margin: 3px 0 8px;
    font-size: 12px;
    line-height: 16px;
}

.forum-old-grade {
    max-width: 38px;
    max-height: 38px;
}

.forum-old-name span {
    font-size: 10px;
    line-height: 13px;
}

.forum-old-author .elem {
    padding-top: 5px;
    font-size: 11px;
    line-height: 15px;
    text-align: left;
}

.forum-old-author .elem label,
.forum-old-author .elem .right {
    display: block;
    float: none;
}

.forum-old-author .elem label {
    color: #1f252e;
}

.forum-old-author .elem .right {
    color: #66707c;
}
/* === Zone18 forum sujet compact end === */

/* === Zone18 forum finitions start === */
.forum-access-head {
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid #d4d8df;
    background: #ffffff;
}

.forum-access-head b,
.forum-access-head span {
    display: block;
}

.forum-access-head b {
    color: #1f252e;
    line-height: 18px;
}

.forum-access-head span {
    color: #66707c;
    line-height: 17px;
}

.forum-topic-old-table {
    margin-top: 8px;
}

.forum-form-row {
    margin-bottom: 12px;
}

.forum-form-row label {
    display: block;
    margin-bottom: 5px;
    color: #1f252e;
}

.forum-form-row input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    padding: 8px;
    border: 1px solid #cbd1da;
    border-radius: 3px;
    background: #ffffff;
}

.forum-form-row textarea {
    width: 100%;
    min-height: 220px;
}

.forum-form-actions {
    margin-top: 12px;
    text-align: right;
}

.forum-home-table td[colspan] {
    padding: 14px;
    color: #66707c;
    text-align: center;
}
/* === Zone18 forum finitions end === */

/* === Zone18 fond uniforme start === */
html,
body {
    min-height: 100%;
    background: #e8ebef !important;
    background-image: none !important;
}

#main-content,
#content {
    background: transparent !important;
    background-image: none !important;
}

body::before,
body::after {
    background: transparent !important;
}
/* === Zone18 fond uniforme end === */

/* === Zone18 forum grade pseudo ligne start === */
.forum-old-identity {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin-bottom: 8px !important;
    text-align: left !important;
}

.forum-old-identity .forum-old-grade {
    display: inline-block !important;
    flex: 0 0 auto !important;
    max-width: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
}

.forum-old-identity .forum-old-name {
    display: inline-block !important;
    margin: 0 !important;
    color: #1f252e !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 16px !important;
    text-align: left !important;
}
/* === Zone18 forum grade pseudo ligne end === */

/* === Zone18 chat finitions start === */
.chat-salon-grid {
    margin-top: 12px;
}

.chat-salon-box {
    padding: 10px;
}

.chat-salon-form {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.chat-salon-form .button-input {
    margin: 0;
}

.chat-layout {
    display: grid;
    grid-template-columns: 1fr 230px;
    gap: 18px;
    width: 948px;
    margin-top: 18px;
}

.chat-messages-panel,
.chat-users-panel {
    border: 1px solid #d8dde5;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(31, 37, 46, 0.08);
    overflow: hidden;
}

.chat-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-bottom: 1px solid #d8dde5;
    background: #eef1f5;
    color: #1f252e;
    font-weight: bold;
}

.chat-panel-title em {
    color: #66707c;
    font-style: normal;
    font-size: 11px;
}

.chat-scroll {
    height: 500px;
    overflow: auto;
}

.chat-message-scroll {
    display: flex;
    flex-direction: column-reverse;
}

.chat-message-row {
    display: grid;
    grid-template-columns: 52px 150px 1fr;
    gap: 10px;
    padding: 8px 10px;
    border-top: 1px solid #eef1f5;
    color: #343b45;
    line-height: 18px;
}

.chat-message-row:first-child {
    border-top: 0;
}

.chat-message-row:hover {
    background: #fafbfc;
}

.chat-message-time {
    color: #7b8490;
    font-size: 11px;
}

.chat-message-author {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #1f252e;
}

.chat-message-author img {
    flex: 0 0 auto;
}

.chat-message-author b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-message-text img {
    vertical-align: middle;
}

.chat-system-row {
    grid-template-columns: 52px 1fr;
}

.chat-system-message {
    grid-column: 2 / 4;
    color: #66707c;
    font-style: italic;
    font-weight: bold;
}

.chat-users-scroll {
    padding: 8px;
    box-sizing: border-box;
}

.chat-user-row {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    gap: 5px;
    align-items: center;
    padding: 6px 5px;
    border-bottom: 1px solid #eef1f5;
    color: #343b45;
}

.chat-user-row span {
    color: #1f252e;
    font-weight: bold;
    cursor: pointer;
}

.chat-user-row small {
    grid-column: 2 / 5;
    color: #66707c;
    font-size: 10px;
    line-height: 13px;
}

.chat-user-row em {
    grid-column: 2 / 5;
    color: #888;
    font-size: 10px;
    font-style: italic;
}

.chat-user-row.is-absent {
    opacity: 0.62;
}

.chat-user-badge {
    max-width: 16px;
    max-height: 16px;
}

.chat-empty {
    padding: 14px;
    color: #66707c;
    text-align: center;
}

.chat-compose-box,
.chat-private-box {
    padding: 10px 12px;
}

.chat-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-bottom: 8px;
}

.chat-tools a {
    display: inline-flex;
    align-items: center;
}

.chat-smileys {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-left: 8px;
}

.chat-compose-line {
    display: grid;
    grid-template-columns: 130px 1fr 90px;
    gap: 8px;
    align-items: center;
}

.chat-abs-link {
    color: #b22922 !important;
    font-weight: bold;
}

.chat-compose-line textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 34px;
    max-height: 86px;
    padding: 8px;
    border: 1px solid #cbd1da;
    border-radius: 4px;
    resize: vertical;
}

.chat-private-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.chat-private-form b {
    margin-right: 6px;
    color: #1f252e;
}

.chat-private-form input[type="text"] {
    width: 190px;
    padding: 7px 8px;
    border: 1px solid #cbd1da;
    border-radius: 4px;
}

@media (max-width: 760px) {
    .chat-layout {
        display: block;
        width: auto;
    }

    .chat-users-panel {
        margin-top: 14px;
    }

    .chat-message-row {
        grid-template-columns: 48px 1fr;
    }

    .chat-message-text {
        grid-column: 2;
    }

    .chat-compose-line {
        grid-template-columns: 1fr;
    }
}
/* === Zone18 chat finitions end === */

/* === Zone18 chat ameliorations plus start === */
.chat-message-row.is-own-message {
    background: #fff7f6;
    border-left: 3px solid #b22922;
}

.chat-message-row.is-own-message .chat-message-author b {
    color: #b22922;
}

.chat-user-row {
    grid-template-columns: 10px 22px 1fr auto auto;
}

.chat-user-row small,
.chat-user-row em {
    grid-column: 3 / 6;
}

.chat-presence-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.chat-presence-dot.is-green {
    background: #40a957;
    box-shadow: 0 0 0 2px rgba(64, 169, 87, 0.16);
}

.chat-presence-dot.is-grey {
    background: #a7adb5;
    box-shadow: 0 0 0 2px rgba(167, 173, 181, 0.16);
}

.chat-private-manage {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #d8dde5;
}

.chat-private-manage > b {
    display: block;
    margin-bottom: 8px;
    color: #1f252e;
}

.chat-private-small-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 7px;
}

.chat-private-small-form input[type="text"],
.chat-private-small-form select {
    min-width: 180px;
    padding: 7px 8px;
    border: 1px solid #cbd1da;
    border-radius: 4px;
    background: #ffffff;
}
/* === Zone18 chat ameliorations plus end === */

/* === Zone18 chat connectes ligne start === */
.chat-user-row {
    grid-template-columns: 10px 22px auto 1fr auto auto !important;
}

.chat-user-row span:not(.chat-presence-dot) {
    white-space: nowrap;
}

.chat-user-row small {
    grid-column: auto !important;
    color: #66707c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-user-row em {
    grid-column: 3 / 7 !important;
}
/* === Zone18 chat connectes ligne end === */

/* === Zone18 chat absent droite start === */
.chat-user-row {
    grid-template-columns: 10px 22px auto minmax(0, 1fr) auto auto auto !important;
}

.chat-user-row small {
    grid-column: 4 !important;
    min-width: 0;
}

.chat-user-row em {
    grid-column: 7 !important;
    justify-self: end !important;
    color: #888 !important;
    font-size: 10px !important;
    font-style: italic !important;
    white-space: nowrap !important;
}
/* === Zone18 chat absent droite end === */

/* === Zone18 chat quitter bouton start === */
.chat-private-box {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

.chat-private-form {
    margin: 0 !important;
}

.chat-private-leave {
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
}

.chat-leave-button,
.chat-leave-button:link,
.chat-leave-button:visited {
    color: #ffffff !important;
    background: #b22922 !important;
    border-color: #8f211c !important;
}

.chat-leave-button:hover {
    color: #ffffff !important;
    background: #8f211c !important;
    text-decoration: none !important;
}

.chat-private-manage {
    flex: 0 0 100% !important;
}
/* === Zone18 chat quitter bouton end === */

/* === Zone18 panel sante v2 start === */
.panel-health-top {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 12px;
}

.panel-health-top > div {
    padding: 12px;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    background: #ffffff;
}

.panel-health-top b,
.panel-health-top span,
.panel-health-top strong {
    display: block;
}

.panel-health-top b {
    color: #1f252e;
    line-height: 18px;
}

.panel-health-top strong {
    color: #b22922;
    font-size: 30px;
    line-height: 38px;
}

.panel-health-top span {
    color: #4e5865;
    line-height: 19px;
}

.panel-health-alert {
    padding: 10px 12px;
    border: 1px solid #f0c7c3;
    border-radius: 6px;
    background: #fff7f6;
    color: #84211c;
    font-weight: bold;
    line-height: 19px;
}

.panel-health-ok {
    border-color: #bee0c7;
    background: #f3fbf5;
    color: #225b32;
}

.panel-health-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.panel-health-table code {
    white-space: normal;
    color: #343b45;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11px;
}

.panel-health-scan-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.panel-health-scan-summary span {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 6px;
    background: #eef1f5;
    color: #1f252e;
    font-weight: bold;
}

@media screen and (max-width: 980px) {
    .panel-health-top {
        grid-template-columns: 1fr;
    }
}
/* === Zone18 panel sante v2 end === */

/* === Zone18 statistiques start === */
.stats-hero {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 12px;
    align-items: center;
}

.stats-hero b,
.stats-hero span,
.stats-hero strong {
    display: block;
}

.stats-hero b {
    color: #1f252e;
    font-size: 17px;
    line-height: 24px;
}

.stats-hero strong {
    color: #b22922;
    font-size: 22px;
    line-height: 28px;
    text-align: right;
}

.stats-hero span {
    color: #5f6874;
    line-height: 18px;
}

.stats-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.stats-summary > div {
    padding: 12px 10px;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    background: #ffffff;
    text-align: center;
}

.stats-summary b {
    display: block;
    color: #b22922;
    font-size: 24px;
    line-height: 30px;
}

.stats-summary span {
    display: block;
    color: #4e5865;
    font-weight: bold;
    line-height: 17px;
}

.stats-clean-table,
.stats-wide-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.stats-clean-table th,
.stats-clean-table td,
.stats-wide-table th,
.stats-wide-table td {
    padding: 8px 9px;
    border-bottom: 1px solid #d8dde5;
    color: #343b45;
    line-height: 18px;
    vertical-align: middle;
}

.stats-clean-table th,
.stats-wide-table th {
    color: #1f252e;
    text-align: left;
}

.stats-wide-table thead th {
    background: #eef1f5;
}

.stats-clean-table tr:last-child th,
.stats-clean-table tr:last-child td,
.stats-wide-table tr:last-child td {
    border-bottom: 0;
}

.stats-muted {
    color: #6a737f;
    font-size: 11px;
}

.stats-grade {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
}

.stats-bars {
    display: grid;
    gap: 8px;
}

.stats-bar-row {
    display: grid;
    grid-template-columns: 1fr 36px;
    gap: 8px;
    align-items: center;
}

.stats-bar-row span {
    color: #1f252e;
    font-weight: bold;
    line-height: 16px;
}

.stats-bar-row b {
    color: #b22922;
    text-align: right;
}

.stats-bar-row div {
    grid-column: 1 / 3;
    height: 7px;
    border-radius: 10px;
    background: #eef1f5;
    overflow: hidden;
}

.stats-bar-row em {
    display: block;
    height: 7px;
    border-radius: 10px;
    background: #b22922;
}

@media screen and (max-width: 980px) {
    .stats-hero {
        grid-template-columns: 1fr;
    }

    .stats-hero strong {
        text-align: left;
    }

    .stats-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* === Zone18 statistiques end === */

/* === Zone18 panel joueurs plus start === */
.panel-player-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.panel-player-summary > div {
    padding: 10px;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    background: #ffffff;
    text-align: center;
}

.panel-player-summary b {
    display: block;
    color: #b22922;
    font-size: 22px;
    line-height: 28px;
}

.panel-player-summary span {
    display: block;
    color: #4e5865;
    font-weight: bold;
    line-height: 17px;
}

.panel-player-filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.panel-player-filters label {
    display: block;
    color: #1f252e;
    font-weight: bold;
    line-height: 18px;
}

.panel-player-filters input[type="text"],
.panel-player-filters select {
    box-sizing: border-box;
    width: 100%;
    margin-top: 4px;
    padding: 7px 8px;
    border: 1px solid #cbd1da;
    border-radius: 4px;
    background: #ffffff;
}

.panel-player-filter-actions {
    display: flex;
    gap: 8px;
    align-items: end;
}

.panel-player-table-wrap {
    max-height: 620px;
    overflow: auto;
}

.panel-player-table th,
.panel-player-table td {
    vertical-align: middle;
}

.panel-player-main {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 170px;
}

.panel-player-main div,
.panel-player-main b,
.panel-player-main span {
    display: block;
}

.panel-player-main b {
    color: #1f252e;
    line-height: 17px;
}

.panel-player-main span {
    color: #6a737f;
    font-size: 10px;
    line-height: 14px;
}

.panel-player-badge {
    display: inline-block;
    margin: 1px 2px 1px 0;
    padding: 3px 6px;
    border-radius: 5px;
    background: #eef1f5;
    color: #343b45;
    font-weight: bold;
    line-height: 15px;
}

.panel-player-badge.state {
    background: #e9f4fb;
    color: #22587a;
}

.panel-player-badge.staff {
    background: #fff4df;
    color: #7a4c0b;
}

.panel-player-badge.ban {
    background: #fdecea;
    color: #84211c;
}

.panel-player-badge.inactive {
    background: #f1f1f1;
    color: #555;
}

.panel-player-actions {
    white-space: nowrap;
}

.panel-player-actions a {
    display: inline-block;
    margin: 2px;
    padding: 4px 7px;
    border: 1px solid #b22922;
    border-radius: 4px;
    color: #b22922 !important;
    font-weight: bold;
    text-decoration: none;
}

.panel-player-actions a:hover {
    background: #b22922;
    color: #ffffff !important;
}

@media screen and (max-width: 980px) {
    .panel-player-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .panel-player-filters {
        grid-template-columns: 1fr 1fr;
    }
}
/* === Zone18 panel joueurs plus end === */

.pj-page {
    margin-top: 10px;
}

.pj-hero {
    background: #1b2028;
    color: #fff;
    border-radius: 6px;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.pj-kicker {
    font-size: 11px;
    text-transform: uppercase;
    color: #9fb3cf;
    font-weight: 800;
    margin-bottom: 5px;
}

.pj-hero h2 {
    margin: 0 0 5px;
    font-size: 26px;
    color: #fff;
}

.pj-hero p {
    margin: 0;
    color: #d7deea;
    font-size: 13px;
}

.pj-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pj-btn,
.pj-primary-btn,
.pj-danger-btn {
    display: inline-block;
    border: 0;
    border-radius: 5px;
    padding: 8px 12px;
    font-weight: 800;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
}

.pj-btn {
    background: #eef2f7;
    color: #1b2028;
}

.pj-btn-danger,
.pj-danger-btn {
    background: #b9312b;
    color: #fff;
}

.pj-primary-btn {
    background: #2d5f93;
    color: #fff;
}

.pj-status {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 14px 0;
}

.pj-status-card,
.pj-card {
    background: #fff;
    border: 1px solid #dfe5ed;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(20,30,45,.08);
}

.pj-status-card {
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 800;
    color: #2e3744;
}

.pj-status-card span:first-child {
    color: #697587;
    font-size: 12px;
    text-transform: uppercase;
}

.pj-badge {
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 900;
}

.pj-badge-ok { background: #e6f6ec; color: #24773e; }
.pj-badge-danger { background: #fde8e7; color: #a52d28; }
.pj-badge-warning { background: #fff4d9; color: #8b5d00; }
.pj-badge-neutral { background: #edf2f8; color: #334155; }

.pj-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.pj-grid-forms {
    grid-template-columns: repeat(4, 1fr);
}

.pj-card {
    padding: 15px;
}

.pj-card-large {
    min-height: 100%;
}

.pj-card-title {
    margin: -15px -15px 14px;
    padding: 12px 15px;
    background: #1b2028;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 6px 6px 0 0;
}

.pj-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pj-info-grid div {
    background: #f5f7fa;
    border: 1px solid #e1e7ef;
    border-radius: 5px;
    padding: 9px 10px;
}

.pj-info-grid b,
.pj-form label,
.pj-inline-form label {
    display: block;
    color: #677386;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.pj-info-grid span {
    color: #202936;
    font-weight: 800;
}

.pj-form input,
.pj-form select,
.pj-inline-form input,
.pj-inline-form select {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    border: 1px solid #cfd8e3;
    border-radius: 5px;
    padding: 8px 9px;
    background: #fff;
}

.pj-inline-form button,
.pj-form button {
    width: 100%;
}

.pj-top-space {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e3e8ef;
}

.pj-muted,
.pj-empty {
    color: #6b7685;
    background: #f5f7fa;
    border-radius: 5px;
    padding: 9px 10px;
    margin-bottom: 10px;
}

.pj-grade-box {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #e6ebf2;
    margin-bottom: 8px;
}

.pj-grade-box span {
    color: #677386;
    font-size: 12px;
}

.pj-formation-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.pj-formation-list span {
    background: #edf2f8;
    color: #263241;
    border: 1px solid #dce5ef;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 800;
}

.pj-log-list {
    display: grid;
    gap: 8px;
}

.pj-log-list div {
    border-left: 3px solid #2d5f93;
    background: #f7f9fc;
    padding: 8px 10px;
    line-height: 1.45;
}

.pj-log-list span {
    display: block;
    color: #687386;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 2px;
}

@media (max-width: 1100px) {
    .pj-hero,
    .pj-actions {
        display: block;
    }

    .pj-actions {
        margin-top: 12px;
    }

    .pj-status,
    .pj-grid,
    .pj-grid-forms,
    .pj-info-grid {
        grid-template-columns: 1fr;
    }
}

.ps-page { margin-top: 10px; }

.ps-hero {
    background: #1b2028;
    color: #fff;
    border-radius: 6px;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.ps-kicker {
    font-size: 11px;
    text-transform: uppercase;
    color: #9fb3cf;
    font-weight: 900;
    margin-bottom: 5px;
}

.ps-hero h2 {
    margin: 0 0 5px;
    font-size: 25px;
    color: #fff;
}

.ps-hero p {
    margin: 0;
    color: #d7deea;
    font-size: 13px;
}

.ps-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ps-btn,
.ps-primary-btn,
.ps-danger-btn,
.ps-mini-danger {
    display: inline-block;
    border: 0;
    border-radius: 5px;
    padding: 8px 12px;
    font-weight: 900;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
}

.ps-btn {
    background: #eef2f7;
    color: #1b2028;
}

.ps-primary-btn {
    background: #2d5f93;
    color: #fff;
}

.ps-danger-btn,
.ps-mini-danger {
    background: #b9312b;
    color: #fff;
}

.ps-full-link {
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

.ps-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 14px 0;
}

.ps-stats div,
.ps-card {
    background: #fff;
    border: 1px solid #dfe5ed;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(20,30,45,.08);
}

.ps-stats div {
    padding: 13px 15px;
}

.ps-stats span {
    display: block;
    color: #697587;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.ps-stats b {
    color: #1f2937;
    font-size: 24px;
}

.ps-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 14px;
    margin-bottom: 14px;
}

.ps-grid-ban {
    grid-template-columns: 1fr 1fr;
    margin-top: 14px;
}

.ps-card {
    padding: 15px;
}

.ps-card-title {
    margin: -15px -15px 14px;
    padding: 12px 15px;
    background: #1b2028;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 6px 6px 0 0;
}

.ps-form label {
    display: block;
    color: #677386;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 5px;
}

.ps-form input,
.ps-form select,
.ps-form textarea,
.ps-filters input,
.ps-filters select {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    border: 1px solid #cfd8e3;
    border-radius: 5px;
    padding: 8px 9px;
    background: #fff;
}

.ps-form button {
    width: 100%;
}

.ps-empty,
.ps-empty-cell {
    color: #6b7685;
    background: #f5f7fa;
    border-radius: 5px;
    padding: 10px;
}

.ps-ban-list {
    display: grid;
    gap: 10px;
    max-height: 355px;
    overflow: auto;
    padding-right: 4px;
}

.ps-ban-item {
    border: 1px solid #e2e8f0;
    border-left: 4px solid #b9312b;
    border-radius: 5px;
    padding: 10px;
    background: #fbfcfe;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px 10px;
}

.ps-ban-item b { color: #202936; }
.ps-ban-item span,
.ps-ban-item small { color: #687386; }
.ps-ban-item p {
    grid-column: 1 / -1;
    margin: 5px 0;
}
.ps-ban-item small { grid-column: 1 / 2; }
.ps-link-danger {
    color: #b9312b;
    font-weight: 900;
    text-decoration: none;
    text-align: right;
}

.ps-badge {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
.ps-badge-ok { background: #e6f6ec; color: #24773e; }
.ps-badge-danger { background: #fde8e7; color: #a52d28; }
.ps-badge-warning { background: #fff4d9; color: #8b5d00; }

.ps-filters {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr auto auto;
    gap: 8px;
    align-items: start;
    margin-bottom: 12px;
}

.ps-table-wrap {
    overflow: auto;
}

.ps-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}

.ps-table th {
    background: #eef2f7;
    color: #334155;
    font-size: 11px;
    text-transform: uppercase;
    text-align: left;
    padding: 9px;
}

.ps-table td {
    border-bottom: 1px solid #e5ebf2;
    padding: 9px;
    vertical-align: top;
}

.ps-table a {
    color: #2d5f93;
    font-weight: 900;
    text-decoration: none;
}

.ps-info-list {
    display: grid;
    gap: 8px;
}

.ps-info-list div {
    background: #f5f7fa;
    border: 1px solid #e1e7ef;
    border-radius: 5px;
    padding: 9px 10px;
}

.ps-info-list b {
    display: block;
    color: #677386;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.ps-info-list span {
    color: #202936;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .ps-hero,
    .ps-actions {
        display: block;
    }

    .ps-actions { margin-top: 12px; }

    .ps-stats,
    .ps-grid,
    .ps-grid-ban,
    .ps-filters {
        grid-template-columns: 1fr;
    }
}

.pm-page { margin-top: 10px; }

.pm-hero {
    background: #1b2028;
    color: #fff;
    border-radius: 6px;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.pm-kicker {
    font-size: 11px;
    text-transform: uppercase;
    color: #9fb3cf;
    font-weight: 900;
    margin-bottom: 5px;
}

.pm-hero h2 {
    margin: 0 0 5px;
    font-size: 25px;
    color: #fff;
}

.pm-hero p {
    margin: 0;
    color: #d7deea;
    font-size: 13px;
}

.pm-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pm-btn,
.pm-primary-btn {
    display: inline-block;
    border: 0;
    border-radius: 5px;
    padding: 8px 12px;
    font-weight: 900;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
}

.pm-btn {
    background: #eef2f7;
    color: #1b2028;
}

.pm-primary-btn {
    background: #2d5f93;
    color: #fff;
}

.pm-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 14px 0;
}

.pm-stats div,
.pm-card {
    background: #fff;
    border: 1px solid #dfe5ed;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(20,30,45,.08);
}

.pm-stats div {
    padding: 13px 15px;
}

.pm-stats span {
    display: block;
    color: #697587;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.pm-stats b {
    color: #1f2937;
    font-size: 24px;
}

.pm-card {
    padding: 15px;
    margin-bottom: 14px;
}

.pm-card-title {
    margin: -15px -15px 14px;
    padding: 12px 15px;
    background: #1b2028;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 6px 6px 0 0;
}

.pm-filters {
    display: grid;
    grid-template-columns: 1.3fr 1fr .75fr 1fr auto auto;
    gap: 8px;
    align-items: start;
}

.pm-filters input,
.pm-filters select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cfd8e3;
    border-radius: 5px;
    padding: 8px 9px;
    background: #fff;
}

.pm-filters input:disabled {
    background: #eef2f7;
    color: #8a95a5;
}

.pm-empty {
    color: #6b7685;
    background: #f5f7fa;
    border-radius: 5px;
    padding: 10px;
}

.pm-group-list {
    display: grid;
    gap: 12px;
}

.pm-group {
    border: 1px solid #e2e8f0;
    border-left: 4px solid #2d5f93;
    border-radius: 5px;
    padding: 11px;
    background: #fbfcfe;
}

.pm-group-hot {
    border-left-color: #b9312b;
}

.pm-group-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.pm-group-head b {
    color: #202936;
    font-size: 15px;
}

.pm-group-head span {
    color: #687386;
    font-size: 12px;
    font-weight: 800;
}

.pm-badge {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 900;
    margin-left: 5px;
    white-space: nowrap;
}

.pm-badge-danger { background: #fde8e7; color: #a52d28; }
.pm-badge-warning { background: #fff4d9; color: #8b5d00; }
.pm-badge-neutral { background: #edf2f8; color: #334155; }

.pm-player-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.pm-player-list a {
    display: grid;
    gap: 2px;
    background: #fff;
    border: 1px solid #e1e7ef;
    border-radius: 5px;
    padding: 9px 10px;
    text-decoration: none;
}

.pm-player-list a b {
    color: #1f2937;
}

.pm-player-list a span,
.pm-player-list a small {
    color: #687386;
}

.pm-table-wrap {
    overflow: auto;
}

.pm-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
}

.pm-table th {
    background: #eef2f7;
    color: #334155;
    font-size: 11px;
    text-transform: uppercase;
    text-align: left;
    padding: 9px;
}

.pm-table td {
    border-bottom: 1px solid #e5ebf2;
    padding: 9px;
    vertical-align: top;
}

.pm-inline-players {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pm-inline-players a {
    background: #edf2f8;
    color: #263241;
    border-radius: 999px;
    padding: 4px 8px;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 1100px) {
    .pm-hero,
    .pm-actions {
        display: block;
    }

    .pm-actions { margin-top: 12px; }

    .pm-stats,
    .pm-filters,
    .pm-player-list {
        grid-template-columns: 1fr;
    }

    .pm-group-head {
        display: block;
    }
}

.psec-page { margin-top: 10px; }

.psec-hero {
    background: #1b2028;
    color: #fff;
    border-radius: 6px;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.psec-kicker {
    font-size: 11px;
    text-transform: uppercase;
    color: #9fb3cf;
    font-weight: 900;
    margin-bottom: 5px;
}

.psec-hero h2 {
    margin: 0 0 5px;
    font-size: 25px;
    color: #fff;
}

.psec-hero p {
    margin: 0;
    color: #d7deea;
    font-size: 13px;
}

.psec-score {
    min-width: 130px;
    text-align: center;
    background: #fff;
    color: #1b2028;
    border-radius: 6px;
    padding: 10px 12px;
}

.psec-score span {
    display: block;
    color: #697587;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.psec-score b {
    display: block;
    font-size: 28px;
}

.psec-score-ok b { color: #24773e; }
.psec-score-warning b { color: #8b5d00; }
.psec-score-danger b { color: #a52d28; }

.psec-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 14px 0;
}

.psec-stats div,
.psec-card {
    background: #fff;
    border: 1px solid #dfe5ed;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(20,30,45,.08);
}

.psec-stats div {
    padding: 13px 15px;
}

.psec-stats span {
    display: block;
    color: #697587;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.psec-stats b {
    color: #1f2937;
    font-size: 24px;
}

.psec-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.psec-card {
    padding: 15px;
    margin-bottom: 14px;
}

.psec-card-title {
    margin: -15px -15px 14px;
    padding: 12px 15px;
    background: #1b2028;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 6px 6px 0 0;
}

.psec-table-wrap {
    overflow: auto;
}

.psec-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.psec-table th {
    background: #eef2f7;
    color: #334155;
    font-size: 11px;
    text-transform: uppercase;
    text-align: left;
    padding: 9px;
}

.psec-table td {
    border-bottom: 1px solid #e5ebf2;
    padding: 9px;
    vertical-align: top;
}

.psec-table small {
    color: #687386;
}

.psec-table code {
    font-size: 11px;
    white-space: normal;
}

.psec-link {
    color: #2d5f93;
    font-weight: 900;
    text-decoration: none;
}

.psec-badge {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.psec-badge-ok { background: #e6f6ec; color: #24773e; }
.psec-badge-danger { background: #fde8e7; color: #a52d28; }
.psec-badge-warning { background: #fff4d9; color: #8b5d00; }
.psec-badge-neutral { background: #edf2f8; color: #334155; }

.psec-alert-list,
.psec-list,
.psec-log-list {
    display: grid;
    gap: 9px;
}

.psec-alert-list div,
.psec-list div,
.psec-log-list div {
    background: #f7f9fc;
    border: 1px solid #e1e7ef;
    border-left: 4px solid #2d5f93;
    border-radius: 5px;
    padding: 9px 10px;
    line-height: 1.45;
}

.psec-alert-list div.warning,
.psec-list div.warning {
    border-left-color: #d09516;
}

.psec-alert-list div.danger,
.psec-list div.danger {
    border-left-color: #b9312b;
}

.psec-list b {
    display: block;
    color: #202936;
    margin-top: 5px;
}

.psec-list span,
.psec-log-list span {
    display: block;
    color: #687386;
    font-size: 12px;
    font-weight: 800;
    margin-top: 2px;
}

.psec-empty,
.psec-empty-cell {
    color: #6b7685;
    background: #f5f7fa;
    border-radius: 5px;
    padding: 10px;
}

@media (max-width: 1100px) {
    .psec-hero,
    .psec-grid {
        display: block;
    }

    .psec-score {
        margin-top: 12px;
    }

    .psec-stats {
        grid-template-columns: 1fr;
    }
}

.pdash-page { margin-top: 10px; }

.pdash-hero {
    background: #1b2028;
    color: #fff;
    border-radius: 6px;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.pdash-kicker {
    color: #9fb3cf;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.pdash-hero h2 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 26px;
}

.pdash-hero p {
    margin: 0;
    color: #d7deea;
}

.pdash-server {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pdash-server a {
    background: #fff;
    color: #1b2028;
    border-radius: 5px;
    text-decoration: none;
    padding: 8px 10px;
    min-width: 110px;
}

.pdash-server span {
    display: block;
    color: #697587;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.pdash-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin: 14px 0;
}

.pdash-stats a,
.pdash-card {
    background: #fff;
    border: 1px solid #dfe5ed;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(20,30,45,.08);
}

.pdash-stats a {
    padding: 13px 14px;
    text-decoration: none;
}

.pdash-stats span {
    display: block;
    color: #697587;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.pdash-stats b {
    display: block;
    color: #1f2937;
    font-size: 24px;
    line-height: 1.1;
}

.pdash-stats small {
    color: #687386;
}

.pdash-quick {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.pdash-quick a,
.pdash-link {
    color: #2d5f93;
    font-weight: 900;
    text-decoration: none;
}

.pdash-quick a {
    background: #eef2f7;
    color: #1b2028;
    border-radius: 5px;
    padding: 8px 12px;
}

.pdash-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.pdash-card {
    padding: 15px;
}

.pdash-card-title {
    margin: -15px -15px 14px;
    padding: 12px 15px;
    background: #1b2028;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 6px 6px 0 0;
}

.pdash-badge {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.pdash-badge-ok { background: #e6f6ec; color: #24773e; }
.pdash-badge-danger { background: #fde8e7; color: #a52d28; }
.pdash-badge-warning { background: #fff4d9; color: #8b5d00; }
.pdash-badge-neutral { background: #edf2f8; color: #334155; }

.pdash-alerts,
.pdash-mini-list,
.pdash-veh-list,
.pdash-log-list {
    display: grid;
    gap: 9px;
}

.pdash-alerts a,
.pdash-mini-list a,
.pdash-veh-list a,
.pdash-log-list div {
    background: #f7f9fc;
    border: 1px solid #e1e7ef;
    border-left: 4px solid #2d5f93;
    border-radius: 5px;
    padding: 9px 10px;
    text-decoration: none;
    color: #202936;
    line-height: 1.45;
}

.pdash-alerts a.warning,
.pdash-veh-list a {
    border-left-color: #d09516;
}

.pdash-alerts a.danger {
    border-left-color: #b9312b;
}

.pdash-alerts span,
.pdash-mini-list span,
.pdash-veh-list span,
.pdash-log-list span {
    display: block;
    color: #687386;
    font-size: 12px;
    font-weight: 800;
    margin-top: 3px;
}

.pdash-empty,
.pdash-empty-cell {
    color: #6b7685;
    background: #f5f7fa;
    border-radius: 5px;
    padding: 10px;
}

.pdash-table-wrap {
    overflow: auto;
}

.pdash-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.pdash-table th {
    background: #eef2f7;
    color: #334155;
    font-size: 11px;
    text-transform: uppercase;
    text-align: left;
    padding: 9px;
}

.pdash-table td {
    border-bottom: 1px solid #e5ebf2;
    padding: 9px;
    vertical-align: top;
}

.pdash-note-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cfd8e3;
    border-radius: 5px;
    padding: 10px;
    resize: vertical;
}

.pdash-note-form button {
    margin-top: 8px;
    border: 0;
    background: #2d5f93;
    color: #fff;
    border-radius: 5px;
    padding: 8px 12px;
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 1100px) {
    .pdash-hero,
    .pdash-grid {
        display: block;
    }

    .pdash-server {
        margin-top: 12px;
        justify-content: flex-start;
    }

    .pdash-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

.panel-login-body {
    background: #e6e8eb;
}

.panel-login-shell {
    width: 980px;
    max-width: calc(100% - 40px);
    margin: 42px auto 30px;
}

.panel-login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.panel-login-mark {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: #1b2028;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.panel-login-brand h1 {
    margin: 0 0 4px;
    color: #1b2028;
    font-size: 26px;
}

.panel-login-brand p {
    margin: 0;
    color: #687386;
}

.panel-login-layout {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 18px;
}

.panel-login-copy,
.panel-login-card {
    background: #fff;
    border: 1px solid #dfe5ed;
    border-radius: 7px;
    box-shadow: 0 10px 26px rgba(20,30,45,.12);
}

.panel-login-copy {
    min-height: 330px;
    padding: 28px;
    background:
        linear-gradient(135deg, rgba(27,32,40,.95), rgba(42,50,62,.94)),
        url("../images/bg-header.jpg");
    background-size: cover;
    background-position: center;
    color: #fff;
}

.panel-login-kicker {
    display: inline-block;
    color: #9fb3cf;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 10px;
}

.panel-login-copy h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 30px;
}

.panel-login-copy p {
    color: #d7deea;
    font-size: 14px;
    line-height: 1.65;
    width: 86%;
}

.panel-login-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 34px;
}

.panel-login-stats div {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 6px;
    padding: 12px;
}

.panel-login-stats span {
    display: block;
    color: #cfd8e6;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.panel-login-stats b {
    font-size: 24px;
    color: #fff;
}

.panel-login-card {
    padding: 24px;
}

.panel-login-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}

.panel-login-title h3 {
    margin: 0;
    color: #1f2937;
    font-size: 22px;
}

.panel-login-title span {
    background: #e6f6ec;
    color: #24773e;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 900;
}

.panel-login-error {
    background: #fde8e7;
    color: #a52d28;
    border: 1px solid #f3c7c4;
    border-radius: 5px;
    padding: 10px 12px;
    font-weight: 800;
    margin-bottom: 14px;
}

.panel-login-form label {
    display: block;
    color: #687386;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 900;
    margin: 12px 0 5px;
}

.panel-login-form input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cfd8e3;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    background: #fff;
}

.panel-login-form input:focus {
    outline: none;
    border-color: #2d5f93;
    box-shadow: 0 0 0 3px rgba(45,95,147,.14);
}

.panel-login-form button {
    width: 100%;
    border: 0;
    border-radius: 5px;
    background: #2d5f93;
    color: #fff;
    margin-top: 16px;
    padding: 11px 14px;
    font-weight: 900;
    cursor: pointer;
}

.panel-login-note {
    margin-top: 14px;
    background: #f5f7fa;
    border-radius: 5px;
    color: #687386;
    padding: 10px;
    line-height: 1.5;
}

@media (max-width: 850px) {
    .panel-login-layout,
    .panel-login-stats {
        grid-template-columns: 1fr;
    }

    .panel-login-copy p {
        width: 100%;
    }
}

.panel-login-body {
    background: #e6e8eb;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.panel-login-shell {
    width: 980px;
    max-width: calc(100% - 40px);
    margin: 42px auto 30px;
    flex: 1 0 auto;
}

.panel-login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.panel-login-mark {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: #1b2028;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.panel-login-brand h1 {
    margin: 0 0 4px;
    color: #1b2028;
    font-size: 26px;
}

.panel-login-brand p {
    margin: 0;
    color: #687386;
}

.panel-login-layout {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 18px;
}

.panel-login-copy,
.panel-login-card {
    background: #fff;
    border: 1px solid #dfe5ed;
    border-radius: 7px;
    box-shadow: 0 10px 26px rgba(20,30,45,.12);
}

.panel-login-copy {
    min-height: 330px;
    padding: 28px;
    background:
        linear-gradient(135deg, rgba(27,32,40,.95), rgba(42,50,62,.94)),
        url("../images/bg-header.jpg");
    background-size: cover;
    background-position: center;
    color: #fff;
}

.panel-login-kicker {
    display: inline-block;
    color: #9fb3cf;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 10px;
}

.panel-login-copy h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 30px;
}

.panel-login-copy p {
    color: #d7deea;
    font-size: 14px;
    line-height: 1.65;
    width: 86%;
}

.panel-login-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 34px;
}

.panel-login-stats div {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 6px;
    padding: 12px;
}

.panel-login-stats span {
    display: block;
    color: #cfd8e6;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.panel-login-stats b {
    font-size: 24px;
    color: #fff;
}

.panel-login-card {
    padding: 24px;
}

.panel-login-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}

.panel-login-title h3 {
    margin: 0;
    color: #1f2937;
    font-size: 22px;
}

.panel-login-title span {
    background: #e6f6ec;
    color: #24773e;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 900;
}

.panel-login-error {
    background: #fde8e7;
    color: #a52d28;
    border: 1px solid #f3c7c4;
    border-radius: 5px;
    padding: 10px 12px;
    font-weight: 800;
    margin-bottom: 14px;
}

.panel-login-form label {
    display: block;
    color: #687386;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 900;
    margin: 12px 0 5px;
}

.panel-login-form input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cfd8e3;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    background: #fff;
}

.panel-login-form input:focus {
    outline: none;
    border-color: #2d5f93;
    box-shadow: 0 0 0 3px rgba(45,95,147,.14);
}

.panel-login-form button {
    width: 100%;
    border: 0;
    border-radius: 5px;
    background: #2d5f93;
    color: #fff;
    margin-top: 16px;
    padding: 11px 14px;
    font-weight: 900;
    cursor: pointer;
}

.panel-login-note {
    margin-top: 14px;
    background: #f5f7fa;
    border-radius: 5px;
    color: #687386;
    padding: 10px;
    line-height: 1.5;
}

.panel-login-body footer {
    flex-shrink: 0;
    margin-top: 20px;
    background: #1b2028;
    border-top: 3px solid #b22922;
    color: #fff;
}

.panel-login-body footer .info-footer,
.panel-login-body footer .info-tooter {
    width: 980px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding: 18px 0;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
}

.panel-login-body footer #left {
    float: none;
    color: #fff;
    padding: 0;
}

.panel-login-body footer a {
    color: #fff;
    text-decoration: underline;
}

.panel-login-body footer a:hover {
    color: #ffcc00;
}

@media (max-width: 850px) {
    .panel-login-layout,
    .panel-login-stats {
        grid-template-columns: 1fr;
    }

    .panel-login-copy p {
        width: 100%;
    }
}

.psec-page { margin-top: 10px; }

.psec-hero {
    background: #1b2028;
    color: #fff;
    border-radius: 6px;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.psec-kicker {
    font-size: 11px;
    text-transform: uppercase;
    color: #9fb3cf;
    font-weight: 900;
    margin-bottom: 5px;
}

.psec-hero h2 {
    margin: 0 0 5px;
    font-size: 25px;
    color: #fff;
}

.psec-hero p {
    margin: 0;
    color: #d7deea;
    font-size: 13px;
}

.psec-score {
    min-width: 130px;
    text-align: center;
    background: #fff;
    color: #1b2028;
    border-radius: 6px;
    padding: 10px 12px;
}

.psec-score span {
    display: block;
    color: #697587;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.psec-score b {
    display: block;
    font-size: 28px;
}

.psec-score-ok b { color: #24773e; }
.psec-score-warning b { color: #8b5d00; }
.psec-score-danger b { color: #a52d28; }

.psec-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 14px 0;
}

.psec-stats div,
.psec-card {
    background: #fff;
    border: 1px solid #dfe5ed;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(20,30,45,.08);
}

.psec-stats div {
    padding: 13px 15px;
}

.psec-stats span {
    display: block;
    color: #697587;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.psec-stats b {
    color: #1f2937;
    font-size: 24px;
}

.psec-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.psec-card {
    padding: 15px;
    margin-bottom: 14px;
}

.psec-card-title {
    margin: -15px -15px 14px;
    padding: 12px 15px;
    background: #1b2028;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 6px 6px 0 0;
}

.psec-table-wrap {
    overflow: auto;
}

.psec-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.psec-table th {
    background: #eef2f7;
    color: #334155;
    font-size: 11px;
    text-transform: uppercase;
    text-align: left;
    padding: 9px;
}

.psec-table td {
    border-bottom: 1px solid #e5ebf2;
    padding: 9px;
    vertical-align: top;
}

.psec-table small {
    color: #687386;
}

.psec-table code {
    font-size: 11px;
    white-space: normal;
}

.psec-link {
    color: #2d5f93;
    font-weight: 900;
    text-decoration: none;
}

.psec-badge {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.psec-badge-ok { background: #e6f6ec; color: #24773e; }
.psec-badge-danger { background: #fde8e7; color: #a52d28; }
.psec-badge-warning { background: #fff4d9; color: #8b5d00; }
.psec-badge-neutral { background: #edf2f8; color: #334155; }

.psec-alert-list,
.psec-list,
.psec-log-list {
    display: grid;
    gap: 9px;
}

.psec-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.psec-actions-grid > div {
    background: #f7f9fc;
    border: 1px solid #e1e7ef;
    border-radius: 5px;
    padding: 11px;
}

.psec-actions-grid b {
    display: block;
    color: #202936;
    margin-bottom: 4px;
}

.psec-actions-grid span {
    display: block;
    color: #687386;
    line-height: 1.45;
    margin-bottom: 10px;
}

.psec-actions-grid button,
.psec-inline-form button {
    border: 0;
    border-radius: 5px;
    background: #2d5f93;
    color: #fff;
    padding: 7px 10px;
    font-weight: 900;
    cursor: pointer;
}

.psec-actions-grid button.warning {
    background: #b88717;
}

.psec-inline-form {
    margin-top: 8px;
}

.psec-alert-list div,
.psec-list div,
.psec-log-list div {
    background: #f7f9fc;
    border: 1px solid #e1e7ef;
    border-left: 4px solid #2d5f93;
    border-radius: 5px;
    padding: 9px 10px;
    line-height: 1.45;
}

.psec-alert-list div.warning,
.psec-list div.warning {
    border-left-color: #d09516;
}

.psec-alert-list div.danger,
.psec-list div.danger {
    border-left-color: #b9312b;
}

.psec-list b {
    display: block;
    color: #202936;
    margin-top: 5px;
}

.psec-list span,
.psec-log-list span {
    display: block;
    color: #687386;
    font-size: 12px;
    font-weight: 800;
    margin-top: 2px;
}

.psec-empty,
.psec-empty-cell {
    color: #6b7685;
    background: #f5f7fa;
    border-radius: 5px;
    padding: 10px;
}

@media (max-width: 1100px) {
    .psec-hero,
    .psec-grid {
        display: block;
    }

    .psec-score {
        margin-top: 12px;
    }

    .psec-stats {
        grid-template-columns: 1fr;
    }

    .psec-actions-grid {
        grid-template-columns: 1fr;
    }
}

.equipe-page {
    margin-top: 10px;
}

.equipe-hero {
    background: #1b2028;
    color: #fff;
    border-radius: 6px;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    margin-bottom: 14px;
}

.equipe-kicker {
    color: #9fb3cf;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.equipe-hero h2 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 26px;
}

.equipe-hero p {
    margin: 0;
    color: #d7deea;
}

.equipe-stats {
    display: grid;
    grid-template-columns: repeat(3, 92px);
    gap: 8px;
}

.equipe-stats div {
    background: #fff;
    color: #1b2028;
    border-radius: 5px;
    padding: 9px 10px;
    text-align: center;
}

.equipe-stats span {
    display: block;
    color: #697587;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.equipe-stats b {
    display: block;
    font-size: 22px;
}

.equipe-section {
    margin-bottom: 14px;
}

.equipe-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.equipe-card {
    background: #fff;
    border: 1px solid #dfe5ed;
    border-left: 4px solid #2d5f93;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(20,30,45,.08);
    padding: 13px;
}

.equipe-role-admin {
    border-left-color: #b9312b;
}

.equipe-role-modo {
    border-left-color: #2d5f93;
}

.equipe-role-support {
    border-left-color: #6b5aa8;
}

.equipe-role-scenario {
    border-left-color: #b88717;
}

.equipe-card-head {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.equipe-avatar {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: #eef2f7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.equipe-avatar img {
    max-width: 34px;
    max-height: 34px;
}

.equipe-avatar span {
    font-weight: 900;
    color: #1b2028;
}

.equipe-card h3 {
    margin: 0 0 3px;
    color: #1f2937;
    font-size: 17px;
}

.equipe-role {
    color: #687386;
    font-weight: 900;
    font-size: 12px;
}

.equipe-online {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.equipe-online.on {
    background: #e6f6ec;
    color: #24773e;
}

.equipe-online.off {
    background: #edf2f8;
    color: #687386;
}

.equipe-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.equipe-details div {
    background: #f7f9fc;
    border: 1px solid #e1e7ef;
    border-radius: 5px;
    padding: 8px 9px;
}

.equipe-details b {
    display: block;
    color: #687386;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.equipe-details span,
.equipe-details a {
    color: #202936;
    font-weight: 800;
    text-decoration: none;
}

.equipe-details a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .equipe-hero {
        display: block;
    }

    .equipe-stats {
        grid-template-columns: repeat(3, 1fr);
        margin-top: 12px;
    }

    .equipe-cards,
    .equipe-details {
        grid-template-columns: 1fr;
    }
}

.equipe-page {
    margin-top: 10px;
}

.equipe-intro {
    background: #f7f9fc;
    border: 1px solid #e1e7ef;
    border-radius: 6px;
    padding: 12px 14px;
    color: #202936;
    font-size: 14px;
}

.equipe-intro b {
    color: #1b2028;
    font-size: 22px;
    margin-right: 5px;
}

.equipe-intro span {
    color: #687386;
    margin-left: 12px;
}

.equipe-section {
    margin-bottom: 14px;
}

.equipe-roster {
    display: grid;
    gap: 8px;
}

.equipe-row {
    background: #fff;
    border: 1px solid #dfe5ed;
    border-left: 3px solid #2d5f93;
    border-radius: 5px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 44px 1.1fr 1.2fr 80px 90px;
    gap: 10px;
    align-items: center;
}

.equipe-role-admin {
    border-left-color: #b9312b;
}

.equipe-role-modo {
    border-left-color: #2d5f93;
}

.equipe-role-support {
    border-left-color: #6b5aa8;
}

.equipe-role-scenario {
    border-left-color: #b88717;
}

.equipe-grade {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: #eef2f7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.equipe-grade img {
    max-width: 34px;
    max-height: 34px;
}

.equipe-identity h3 {
    margin: 0 0 3px;
    color: #1f2937;
    font-size: 16px;
}

.equipe-identity span,
.equipe-meta span {
    display: block;
    color: #687386;
    font-size: 12px;
}

.equipe-meta b {
    display: block;
    color: #202936;
    font-weight: 900;
    margin-bottom: 3px;
}

.equipe-contact a,
.equipe-contact span {
    color: #2d5f93;
    font-weight: 900;
    text-decoration: none;
    font-size: 12px;
}

.equipe-state {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    text-align: center;
}

.equipe-state.on {
    background: #e6f6ec;
    color: #24773e;
}

.equipe-state.off {
    background: #edf2f8;
    color: #687386;
}

@media (max-width: 900px) {
    .equipe-row {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .equipe-grade {
        margin: 0 auto;
    }
}

.equipe-page {
    margin-top: 10px;
}

.equipe-intro {
    background: #f7f9fc;
    border: 1px solid #e1e7ef;
    border-radius: 6px;
    padding: 12px 14px;
    color: #202936;
    font-size: 14px;
}

.equipe-intro b {
    color: #1b2028;
    font-size: 22px;
    margin-right: 5px;
}

.equipe-intro span {
    color: #687386;
    margin-left: 12px;
}

.equipe-section {
    margin-bottom: 14px;
}

.equipe-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.equipe-mini-card {
    background: #fff;
    border: 1px solid #dfe5ed;
    border-left: 3px solid #2d5f93;
    border-radius: 5px;
    padding: 11px;
    box-shadow: 0 4px 12px rgba(20,30,45,.06);
}

.equipe-role-admin {
    border-left-color: #b9312b;
}

.equipe-role-modo {
    border-left-color: #2d5f93;
}

.equipe-role-support {
    border-left-color: #6b5aa8;
}

.equipe-role-scenario {
    border-left-color: #b88717;
}

.equipe-mini-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.equipe-grade {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: #eef2f7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.equipe-grade img {
    max-width: 34px;
    max-height: 34px;
}

.equipe-mini-card h3 {
    margin: 0 0 3px;
    color: #1f2937;
    font-size: 16px;
}

.equipe-mini-role {
    color: #2d5f93;
    font-weight: 900;
    font-size: 12px;
    margin-bottom: 9px;
}

.equipe-mini-info {
    display: grid;
    gap: 5px;
    margin-bottom: 9px;
}

.equipe-mini-info span {
    background: #f7f9fc;
    border: 1px solid #e1e7ef;
    border-radius: 4px;
    color: #202936;
    padding: 5px 7px;
    font-size: 12px;
}

.equipe-state {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    text-align: center;
}

.equipe-state.on {
    background: #e6f6ec;
    color: #24773e;
}

.equipe-state.off {
    background: #edf2f8;
    color: #687386;
}

.equipe-mini-contact a,
.equipe-mini-contact span {
    display: block;
    background: #eef2f7;
    border-radius: 4px;
    color: #1b2028;
    padding: 6px 8px;
    text-align: center;
    font-weight: 900;
    text-decoration: none;
    font-size: 12px;
}

.equipe-mini-contact a:hover {
    background: #dfe7f1;
}

@media (max-width: 900px) {
    .equipe-mini-grid {
        grid-template-columns: 1fr;
    }
}

/* === Zone18 responsive mobile step 2 start === */
html,
body {
    min-width: 0;
}

img,
video,
canvas,
iframe {
    max-width: 100%;
}

@media (max-width: 980px) {
    .centered {
        box-sizing: border-box;
        width: auto !important;
        max-width: none !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    #content {
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
    }

    .grid-1,
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6,
    .grid-7,
    .grid-8,
    .grid-9,
    .grid-10 {
        box-sizing: border-box;
        float: none !important;
        clear: both;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .title-grid {
        box-sizing: border-box;
        min-height: 38px;
        padding-left: 10px;
        padding-right: 10px;
        overflow: hidden;
    }

    .title-grid span,
    .title-grid center {
        max-width: 100%;
        line-height: 18px;
        padding-top: 9px;
        padding-bottom: 9px;
        white-space: normal;
    }

    .content-gird-1,
    .content-gird-2,
    .content-gird-3,
    .content-gird-4,
    .content-gird-5 {
        box-sizing: border-box;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .content-gird-1 > table,
    .content-gird-2 > table,
    .content-gird-3 > table,
    .content-gird-4 > table,
    .content-gird-5 > table,
    .display,
    table.display {
        min-width: 560px;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    select,
    textarea {
        box-sizing: border-box;
        max-width: 100% !important;
    }

    input[size],
    textarea[cols] {
        width: 100% !important;
    }

    .button-input,
    input[type="submit"],
    button,
    .button-a {
        min-height: 38px;
        line-height: 36px;
    }

    .elem {
        box-sizing: border-box;
    }

    .elem label,
    .elem .right,
    .elem > .right {
        float: none !important;
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        text-align: left;
    }

    .right,
    .left {
        max-width: 100%;
    }

    .cke,
    .cke_inner,
    .cke_contents,
    .cke_chrome {
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

@media (max-width: 700px) {
    body {
        font-size: 13px;
    }

    header {
        height: 150px;
        background-size: auto 150px;
    }

    #bagraund-header {
        height: 110px;
    }

    #logo {
        max-width: 100%;
        margin-left: 0;
        padding-left: 0;
        background-size: contain;
        background-position: center top;
    }

    table thead tr th,
    table tbody tr td {
        padding: 7px 8px;
        font-size: 12px;
        line-height: 16px;
    }

    .alert {
        box-sizing: border-box;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .centered {
        margin-left: 6px !important;
        margin-right: 6px !important;
    }

    header {
        height: 130px;
        background-size: auto 130px;
    }

    #bagraund-header {
        height: 92px;
    }

    .content-gird-1,
    .content-gird-2,
    .content-gird-3,
    .content-gird-4,
    .content-gird-5 {
        padding: 9px;
    }

    .button-input,
    input[type="submit"],
    button,
    .button-a {
        margin-top: 4px;
    }

    .zone18-login-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .zone18-login-form input,
    .zone18-login-form button,
    .zone18-login-form a,
    .zone18-login-form label {
        width: 100% !important;
        box-sizing: border-box;
        text-align: left;
    }
}
/* === Zone18 responsive mobile step 2 end === */

/* === Zone18 mobile tables step 3 start === */
@media (max-width: 620px) {
    table.z18-mobile-card-table {
        min-width: 0 !important;
        width: 100% !important;
        border: 0;
        background: transparent;
    }

    table.z18-mobile-card-table thead {
        display: none;
    }

    table.z18-mobile-card-table tbody,
    table.z18-mobile-card-table tr,
    table.z18-mobile-card-table td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    table.z18-mobile-card-table tbody tr {
        margin: 0 0 10px;
        border: 1px solid #d8dde5;
        border-radius: 6px;
        background: #ffffff !important;
        overflow: hidden;
        box-shadow: 0 3px 9px rgba(31, 37, 46, 0.07);
    }

    table.z18-mobile-card-table tbody tr:hover {
        background: #ffffff !important;
    }

    table.z18-mobile-card-table tbody tr td {
        display: grid;
        grid-template-columns: minmax(105px, 38%) minmax(0, 1fr);
        gap: 8px;
        align-items: center;
        min-height: 34px;
        padding: 8px 10px !important;
        border-bottom: 1px solid #edf0f4;
        background: transparent !important;
        text-align: left !important;
        word-break: break-word;
    }

    table.z18-mobile-card-table tbody tr td:last-child {
        border-bottom: 0;
    }

    table.z18-mobile-card-table tbody tr td::before {
        content: attr(data-label);
        color: #1f252e;
        font-weight: 700;
        text-transform: none;
    }

    table.z18-mobile-card-table tbody tr td[data-label="Action"]::before,
    table.z18-mobile-card-table tbody tr td[data-label="Selection"]::before {
        color: #687386;
    }

    table.z18-mobile-card-table tbody tr td center {
        text-align: left;
    }

    table.z18-mobile-scroll-table {
        min-width: 720px;
    }

    .content-gird-1:has(table.z18-mobile-scroll-table)::before,
    .content-gird-2:has(table.z18-mobile-scroll-table)::before,
    .content-gird-3:has(table.z18-mobile-scroll-table)::before,
    .content-gird-4:has(table.z18-mobile-scroll-table)::before,
    .content-gird-5:has(table.z18-mobile-scroll-table)::before {
        content: "Faites glisser le tableau horizontalement";
        display: block;
        margin-bottom: 7px;
        color: #687386;
        font-size: 12px;
        font-weight: 700;
    }
}
/* === Zone18 mobile tables step 3 end === */

/* === Zone18 mobile forms step 4 start === */
@media (max-width: 700px) {
    a,
    button,
    input,
    select,
    textarea,
    label {
        -webkit-tap-highlight-color: rgba(178, 41, 34, 0.18);
    }

    #content input[type="text"],
    #content input[type="password"],
    #content input[type="email"],
    #content input[type="number"],
    #content input[type="date"],
    #content input[type="search"],
    #content select,
    #content textarea {
        width: 100% !important;
        min-height: 42px;
        margin-top: 4px;
        margin-bottom: 8px;
        padding: 9px 10px;
        font-size: 15px;
        line-height: 20px;
    }

    #content textarea {
        min-height: 140px;
    }

    #content input[type="checkbox"],
    #content input[type="radio"] {
        width: 20px;
        height: 20px;
        min-height: 20px;
        vertical-align: middle;
    }

    #content label {
        display: block;
        margin-bottom: 4px;
        font-size: 13px;
        line-height: 18px;
    }

    #content .elem {
        margin-bottom: 12px;
    }

    #content .elem label {
        float: none !important;
        width: auto !important;
        margin-bottom: 5px;
    }

    #content .elem .right {
        float: none !important;
        width: 100% !important;
    }

    #content .button-input,
    #content input[type="submit"],
    #content input[type="button"],
    #content button,
    #content .button-a {
        min-height: 42px;
        min-width: 120px;
        padding-left: 14px;
        padding-right: 14px;
        font-size: 13px;
        line-height: 40px;
    }

    #content center .button-input,
    #content center input[type="submit"],
    #content center input[type="button"],
    #content center button {
        width: 100%;
        max-width: 320px;
    }

    #content form br + br {
        display: none;
    }

    #content .chosen-container,
    #content .chosen-container-single,
    #content .chosen-container-multi {
        width: 100% !important;
        max-width: 100% !important;
    }

    #content .chosen-container-single .chosen-single {
        min-height: 42px;
        line-height: 42px;
        box-sizing: border-box;
    }

    #content .chosen-container-multi .chosen-choices {
        min-height: 42px;
        box-sizing: border-box;
    }

    #content .cke,
    #content .cke_chrome {
        width: 100% !important;
    }

    #content .cke_top {
        white-space: normal;
    }

    #content .dataTables_filter,
    #content .dataTables_length {
        float: none !important;
        width: 100%;
        margin-bottom: 8px;
        text-align: left;
    }

    #content .dataTables_filter input,
    #content .dataTables_length select {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (max-width: 520px) {
    #content .button-input,
    #content input[type="submit"],
    #content input[type="button"],
    #content button {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        white-space: normal;
    }

    #content a.button-a,
    #content .button-a {
        display: block;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    #content p[align="right"],
    #content div[align="right"] {
        text-align: left !important;
    }
}
/* === Zone18 mobile forms step 4 end === */

/* === Zone18 mobile finish step 5 start === */
html,
body {
    overflow-x: hidden;
}

* {
    max-width: 100%;
}

@media (max-width: 800px) {
    body {
        background-attachment: scroll !important;
    }

    #main-content {
        min-width: 0;
    }

    header {
        margin-bottom: 0;
    }

    nav {
        position: sticky;
        top: 0;
        z-index: 999;
        height: auto !important;
        margin-top: 0 !important;
        background-image: none !important;
        background-color: #1f252e !important;
        box-shadow: 0 3px 10px rgba(0,0,0,0.20);
    }

    #control-panel {
        display: none;
    }

    #content {
        padding-top: 6px;
    }

    .grid-1,
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6,
    .grid-7,
    .grid-8,
    .grid-9,
    .grid-10 {
        margin-top: 12px !important;
        margin-bottom: 12px !important;
    }

    .title-grid {
        border-radius: 5px 5px 0 0;
    }

    .content-gird-1,
    .content-gird-2,
    .content-gird-3,
    .content-gird-4,
    .content-gird-5 {
        border-radius: 0 0 5px 5px;
        box-shadow: 0 2px 8px rgba(31, 37, 46, 0.08);
    }

    footer {
        height: auto !important;
        min-height: 0 !important;
        padding: 12px 8px;
        box-sizing: border-box;
        background: #1f252e;
    }

    footer .info-tooter,
    footer #left,
    footer #right {
        float: none !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        color: #ffffff !important;
        line-height: 18px;
        text-align: center;
    }

    footer a {
        color: #ffffff !important;
        font-weight: 700;
    }

    #main-content .empty {
        height: 20px !important;
    }

    .alert {
        margin-top: 8px;
        margin-bottom: 8px;
    }
}

@media (max-width: 620px) {
    header {
        height: 120px !important;
        background-size: auto 120px !important;
        background-position: center top !important;
    }

    #bagraund-header {
        height: 92px !important;
    }

    #logo {
        float: none !important;
        display: block !important;
        width: 100% !important;
        height: 92px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background-position: center top !important;
        background-size: contain !important;
    }

    .title-grid span,
    .title-grid center {
        font-size: 12px;
    }

    h1 {
        font-size: 22px;
        line-height: 26px;
    }

    h2 {
        font-size: 19px;
        line-height: 23px;
    }

    h3 {
        font-size: 17px;
        line-height: 21px;
    }

    h4 {
        font-size: 15px;
        line-height: 19px;
    }

    p,
    ul,
    ol,
    pre {
        font-size: 13px;
        line-height: 18px;
    }

    .alert .close {
        top: 8px;
        right: 8px;
    }
}

@media (max-width: 420px) {
    header {
        height: 105px !important;
        background-size: auto 105px !important;
    }

    #bagraund-header,
    #logo {
        height: 78px !important;
    }

    .centered {
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    .title-grid {
        min-height: 34px;
        line-height: 34px;
    }

    .title-grid span,
    .title-grid center {
        padding-top: 8px;
        padding-bottom: 8px;
        line-height: 16px;
    }
}

/* Accueil non connecte */
@media (max-width: 700px) {
    .zone18-home-header {
        height: 130px !important;
        background-size: auto 130px !important;
    }

    .zone18-login-band {
        padding: 8px 0 !important;
    }

    .zone18-home-main,
    .zone18-home-grid,
    .zone18-home-preview-grid {
        display: block !important;
        width: 100% !important;
    }

    .zone18-home-intro,
    .zone18-home-card,
    .zone18-home-panel,
    .zone18-home-preview {
        box-sizing: border-box;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
    }
}
/* === Zone18 mobile finish step 5 end === */

/* === Zone18 mobile compact menu start === */
@media (max-width: 800px) {
    body.mobile-menu-active,
    html.mobile-menu-active {
        overflow-x: hidden;
    }

    header,
    .zone18-home-header {
        display: none !important;
    }

    nav {
        margin-top: 0 !important;
    }

    #content {
        padding-top: 10px !important;
    }

    ul#main-nav,
    #main-nav {
        max-height: calc(100vh - 46px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    ul#main-nav > li.mobile-has-submenu > a {
        position: relative;
        padding-right: 42px !important;
    }

    ul#main-nav > li.mobile-has-submenu > a::after {
        content: "+";
        position: absolute;
        right: 16px;
        top: 50%;
        width: 22px;
        height: 22px;
        margin-top: -11px;
        border-radius: 50%;
        background: rgba(255,255,255,0.10);
        color: #ffffff;
        font-size: 18px;
        font-weight: 700;
        line-height: 21px;
        text-align: center;
    }

    ul#main-nav > li.mobile-has-submenu.mobile-submenu-open > a::after {
        content: "-";
    }

    ul#main-nav > li.mobile-has-submenu > ul,
    ul#main-nav > li.mobile-has-submenu > ul ul {
        display: none !important;
    }

    ul#main-nav > li.mobile-has-submenu.mobile-submenu-open > ul {
        display: block !important;
    }

    ul#main-nav > li.mobile-has-submenu.mobile-submenu-open > ul ul {
        display: block !important;
    }

    ul#main-nav > li.mobile-has-submenu.mobile-submenu-open > a {
        background: rgba(255,255,255,0.10) !important;
    }

    ul#main-nav ul li a {
        min-height: 36px !important;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }
}
/* === Zone18 mobile compact menu end === */

/* === Zone18 mobile submenu visible fix start === */
@media (max-width: 800px) {
    nav.mobile-menu-open ul#main-nav > li.mobile-has-submenu.mobile-submenu-open > ul,
    nav.mobile-menu-open #main-nav > li.mobile-has-submenu.mobile-submenu-open > ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        z-index: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
    }

    nav.mobile-menu-open ul#main-nav > li.mobile-has-submenu:not(.mobile-submenu-open) > ul,
    nav.mobile-menu-open #main-nav > li.mobile-has-submenu:not(.mobile-submenu-open) > ul {
        display: none !important;
    }

    nav.mobile-menu-open ul#main-nav ul li,
    nav.mobile-menu-open #main-nav ul li {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    nav.mobile-menu-open ul#main-nav ul li a,
    nav.mobile-menu-open #main-nav ul li a {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-height: 38px !important;
        color: #ffffff !important;
        background: rgba(255,255,255,0.05) !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    nav.mobile-menu-open ul#main-nav > li.mobile-has-submenu.mobile-submenu-open {
        height: auto !important;
        overflow: visible !important;
    }
}
/* === Zone18 mobile submenu visible fix end === */

/* === Zone18 mobile submenu front fix start === */
@media (max-width: 800px) {
    nav {
        position: sticky !important;
        top: 0 !important;
        z-index: 2147483000 !important;
        overflow: visible !important;
    }

    nav .centered {
        position: relative !important;
        z-index: 2147483000 !important;
        overflow: visible !important;
    }

    nav.mobile-menu-open ul#main-nav,
    nav.mobile-menu-open #main-nav {
        position: relative !important;
        z-index: 2147483000 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #1f252e !important;
    }

    nav.mobile-menu-open ul#main-nav li,
    nav.mobile-menu-open #main-nav li {
        position: relative !important;
        z-index: 2147483000 !important;
        overflow: visible !important;
        height: auto !important;
    }

    nav.mobile-menu-open ul#main-nav li ul,
    nav.mobile-menu-open #main-nav li ul,
    nav.mobile-menu-open ul#main-nav li:hover ul,
    nav.mobile-menu-open #main-nav li:hover ul,
    nav.mobile-menu-open ul#main-nav ul ul,
    nav.mobile-menu-open #main-nav ul ul {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 2147483000 !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: 0 !important;
        background: #151a21 !important;
    }

    nav.mobile-menu-open ul#main-nav > li.mobile-has-submenu > ul,
    nav.mobile-menu-open #main-nav > li.mobile-has-submenu > ul {
        display: none !important;
    }

    nav.mobile-menu-open ul#main-nav > li.mobile-has-submenu.mobile-submenu-open > ul,
    nav.mobile-menu-open #main-nav > li.mobile-has-submenu.mobile-submenu-open > ul {
        display: block !important;
    }

    nav.mobile-menu-open ul#main-nav > li.mobile-has-submenu.mobile-submenu-open > ul li,
    nav.mobile-menu-open #main-nav > li.mobile-has-submenu.mobile-submenu-open > ul li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    nav.mobile-menu-open ul#main-nav > li.mobile-has-submenu.mobile-submenu-open > ul li a,
    nav.mobile-menu-open #main-nav > li.mobile-has-submenu.mobile-submenu-open > ul li a {
        display: block !important;
        width: 100% !important;
        min-height: 38px !important;
        padding: 10px 12px 10px 30px !important;
        box-sizing: border-box !important;
        color: #ffffff !important;
        background: #151a21 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    nav.mobile-menu-open ul#main-nav > li.mobile-has-submenu.mobile-submenu-open > ul li a:hover,
    nav.mobile-menu-open #main-nav > li.mobile-has-submenu.mobile-submenu-open > ul li a:hover {
        background: #2a313c !important;
    }

    #content,
    #main-content,
    section {
        position: relative;
        z-index: 1;
    }
}
/* === Zone18 mobile submenu front fix end === */

/* === Zone18 mobile menu overlay final start === */
@media (max-width: 800px) {
    nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        z-index: 2147483647 !important;
        overflow: visible !important;
        background: #1f252e !important;
        box-shadow: 0 3px 12px rgba(0,0,0,0.30) !important;
    }

    nav .centered {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        overflow: visible !important;
    }

    .mobile-menu-toggle {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        z-index: 2147483647 !important;
    }

    ul#main-nav,
    #main-nav {
        position: fixed !important;
        top: 46px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 2147483646 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 8px 0 18px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        background: #1f252e !important;
        box-shadow: none !important;
    }

    nav:not(.mobile-menu-open) ul#main-nav,
    nav:not(.mobile-menu-open) #main-nav {
        display: none !important;
    }

    nav.mobile-menu-open ul#main-nav,
    nav.mobile-menu-open #main-nav {
        display: block !important;
    }

    body {
        padding-top: 46px !important;
    }

    header,
    .zone18-home-header {
        display: none !important;
    }

    #content,
    #main-content,
    section,
    footer {
        position: relative !important;
        z-index: 1 !important;
    }

    nav.mobile-menu-open ul#main-nav > li,
    nav.mobile-menu-open #main-nav > li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        background: transparent !important;
        overflow: visible !important;
    }

    nav.mobile-menu-open ul#main-nav > li > a,
    nav.mobile-menu-open #main-nav > li > a {
        display: block !important;
        width: 100% !important;
        min-height: 42px !important;
        padding: 12px 42px 12px 14px !important;
        box-sizing: border-box !important;
        color: #ffffff !important;
        background: #1f252e !important;
        border-bottom: 1px solid rgba(255,255,255,0.10) !important;
        line-height: 18px !important;
    }

    nav.mobile-menu-open ul#main-nav > li > ul,
    nav.mobile-menu-open #main-nav > li > ul,
    nav.mobile-menu-open ul#main-nav > li > ul ul,
    nav.mobile-menu-open #main-nav > li > ul ul {
        position: static !important;
        display: none !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        transform: none !important;
        background: #151a21 !important;
        box-shadow: none !important;
        border: 0 !important;
        z-index: 2147483646 !important;
    }

    nav.mobile-menu-open ul#main-nav > li.mobile-submenu-open > ul,
    nav.mobile-menu-open #main-nav > li.mobile-submenu-open > ul,
    nav.mobile-menu-open ul#main-nav > li.mobile-submenu-open > ul ul,
    nav.mobile-menu-open #main-nav > li.mobile-submenu-open > ul ul {
        display: block !important;
    }

    nav.mobile-menu-open ul#main-nav ul li,
    nav.mobile-menu-open #main-nav ul li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    nav.mobile-menu-open ul#main-nav ul li a,
    nav.mobile-menu-open #main-nav ul li a {
        display: block !important;
        width: 100% !important;
        min-height: 38px !important;
        padding: 10px 12px 10px 30px !important;
        box-sizing: border-box !important;
        color: #ffffff !important;
        background: #151a21 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        line-height: 18px !important;
    }

    nav.mobile-menu-open ul#main-nav ul ul li a,
    nav.mobile-menu-open #main-nav ul ul li a {
        padding-left: 44px !important;
        background: #10141a !important;
    }
}
/* === Zone18 mobile menu overlay final end === */

/* === Zone18 mobile menu visible fix start === */
@media (max-width: 800px) {
    nav {
        display: block !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #1f252e !important;
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0 !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    .mobile-menu-toggle span {
        display: inline-block !important;
        width: 24px !important;
        text-align: center !important;
        font-size: 22px !important;
        line-height: 18px !important;
    }

    nav:not(.mobile-menu-open) ul#main-nav,
    nav:not(.mobile-menu-open) #main-nav {
        display: none !important;
    }

    nav.mobile-menu-open ul#main-nav,
    nav.mobile-menu-open #main-nav {
        display: block !important;
    }
}
/* === Zone18 mobile menu visible fix end === */

/* === Zone18 mobile menu desktop hide fix start === */
.mobile-menu-toggle {
    display: none !important;
}

@media (max-width: 800px) {
    .mobile-menu-toggle {
        display: flex !important;
    }
}
/* === Zone18 mobile menu desktop hide fix end === */

/* === Zone18 mobile menu desktop hard hide fix start === */
@media (min-width: 801px) {
    .mobile-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
    }
}

@media (max-width: 800px) {
    .mobile-menu-toggle {
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        pointer-events: auto !important;
        position: fixed !important;
        left: 0 !important;
    }
}
/* === Zone18 mobile menu desktop hard hide fix end === */

/* === Zone18 panel scenario domaine start === */
.panel-scenario-domain-card .elem {
    clear: both;
    overflow: hidden;
}

.panel-scenario-domain-card .right {
    box-sizing: border-box;
    max-width: 100%;
}

.panel-scenario-domain-card select,
.panel-scenario-domain-card input[type="text"],
.panel-scenario-domain-card textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
/* === Zone18 panel scenario domaine end === */









/* === Zone18 modern menu start === */
nav {
    width: 100%;
    min-height: 46px;
    height: auto;
    margin-top: -46px;
    background: #1f252e;
    border-top: 3px solid #b22922;
    border-bottom: 1px solid #0c1015;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .22);
    position: relative;
    z-index: 5000;
}

nav .centered {
    overflow: visible;
}

ul#main-nav,
#main-nav {
    float: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 43px;
    margin: 0;
    padding: 5px 0;
}

ul#main-nav li {
    float: none;
    position: relative;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff;
    background: transparent;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    text-transform: none;
}

ul#main-nav > li > a,
ul#main-nav .pull-down > a {
    font-size: 13px;
}

ul#main-nav > li {
    min-height: 31px;
}

ul#main-nav > li:hover {
    background: transparent;
}

ul#main-nav li a,
ul#main-nav > li > a,
ul#main-nav .pull-down > a {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 31px;
    padding: 0 8px;
    color: #fff;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    text-decoration: none;
    line-height: 16px;
    font-weight: 700;
    text-shadow: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
}

ul#main-nav > li > a[href="#"]::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 3px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid rgba(255, 255, 255, .9);
    transition: transform .15s ease;
}

ul#main-nav > li:hover > a,
ul#main-nav > li > a:hover,
ul#main-nav .pull-down:hover > a {
    color: #fff;
    background: #b22922;
    border-color: #d64e47;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .18);
}

ul#main-nav > li:hover > a[href="#"]::after,
ul#main-nav > li > a[href="#"]:hover::after {
    transform: rotate(180deg);
    border-top-color: #fff;
}

ul#main-nav ul {
    display: none;
    position: absolute;
    top: 37px;
    left: 0;
    width: auto;
    width: 210px;
    min-width: 210px;
    max-width: 230px;
    margin: 0;
    padding: 6px;
    background: #eef2f6;
    border: 1px solid #cfd6df;
    border-top: 3px solid #b22922;
    border-radius: 6px;
    box-shadow: 0 12px 24px rgba(10, 15, 22, .22);
    z-index: 6000;
}

ul#main-nav > li > ul::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 18px;
    width: 10px;
    height: 10px;
    background: #b22922;
    border-radius: 2px;
    transform: rotate(45deg);
}

ul#main-nav li:hover > ul,
ul#main-nav li.iehover > ul {
    display: block;
}

ul#main-nav li:hover ul ul,
ul#main-nav li.iehover ul ul {
    display: none;
}

ul#main-nav ul li:hover > ul,
ul#main-nav ul li.iehover > ul {
    display: block;
}

ul#main-nav ul li {
    display: block;
    float: none;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

ul#main-nav li:hover li a,
ul#main-nav li.iehover li a,
ul#main-nav ul li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    float: none;
    width: 100%;
    max-width: 100%;
    min-height: 28px;
    padding: 6px 8px;
    color: #26303b;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    line-height: 15px;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    white-space: normal;
    box-shadow: none;
    box-sizing: border-box;
    overflow: hidden;
}

ul#main-nav ul li a::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    background: #9aa4b2;
    border-radius: 999px;
}

ul#main-nav ul li:has(> ul) > a {
    padding-right: 24px;
}

ul#main-nav ul li:has(> ul) > a::after {
    content: "›";
    position: absolute;
    right: 9px;
    color: #7d8794;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

ul#main-nav li:hover li a:hover,
ul#main-nav li:hover li:hover > a,
ul#main-nav li.iehover li a:hover,
ul#main-nav li.iehover li.iehover > a,
ul#main-nav ul li:hover > a,
ul#main-nav ul li a:hover {
    color: #fff;
    background: #b22922;
    border-color: #b22922;
    box-shadow: inset 3px 0 0 #1f252e;
}

ul#main-nav ul li:hover > a::before,
ul#main-nav ul li a:hover::before {
    background: #fff;
}

ul#main-nav ul li:hover > a::after,
ul#main-nav ul li a:hover::after {
    color: #fff;
}

ul#main-nav ul li ul,
ul#main-nav ul ul {
    position: absolute;
    top: -6px;
    left: 100%;
    width: 210px;
    min-width: 210px;
    max-width: 230px;
    margin: 0 0 0 8px;
    padding: 6px;
    background: #eef2f6;
    border: 1px solid #cfd6df;
    border-left: 4px solid #b22922;
    border-top: 1px solid #cfd6df;
    border-radius: 6px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .30);
}

ul#main-nav ul ul::before {
    content: "";
    display: block;
    position: absolute;
    top: 14px;
    left: -9px;
    width: 11px;
    height: 11px;
    background: #eef2f6;
    border-left: 1px solid #cfd6df;
    border-bottom: 1px solid #cfd6df;
    border-radius: 2px;
    transform: rotate(45deg);
}

ul#main-nav ul ul li a {
    min-height: 27px;
    color: #26303b;
    background: transparent;
    border-color: transparent;
    font-weight: 700;
}

ul#main-nav ul ul li a::before {
    width: 6px;
    height: 6px;
    background: transparent;
    border: 1px solid #8c96a5;
    box-sizing: border-box;
}

ul#main-nav ul ul li:hover > a,
ul#main-nav ul ul li a:hover {
    color: #fff;
    background: #b22922;
    border-color: #b22922;
    box-shadow: inset 3px 0 0 #1f252e;
}

ul#main-nav ul ul li:hover > a::before,
ul#main-nav ul ul li a:hover::before {
    background: #d2564e;
    border-color: #d2564e;
}

ul#main-nav ul ul ul {
    background: #eef2f6;
    border-left-color: #d2564e;
}

ul#main-nav .separation-menu {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #dce1e8;
}

ul#main-nav ul ul .separation-menu {
    border-top-color: #dce1e8;
}

ul#main-nav .separation-menu > a {
    margin-top: 0;
}

.pull-down:hover {
    margin-top: 0;
    background-image: none;
    border-radius: 6px;
}

.pull-down:hover a {
    color: #fff;
}

ul#main-nav > li > .counter {
    position: absolute;
    top: -6px;
    right: -7px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 16px;
    height: 16px;
    margin: 0;
    padding: 0 4px;
    overflow: visible;
    color: #fff;
    background: #b22922;
    background-image: none;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(31, 37, 46, .24);
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
}

ul#main-nav > li > a + .counter {
    right: -2px;
}

ul#main-nav > li:has(> .counter) > a {
    padding-right: 22px;
}

ul#main-nav > li > a[href="panel/"] {
    min-width: 42px;
    padding-right: 7px;
    padding-left: 7px;
    font-size: 0;
}

ul#main-nav > li > a[href="panel/"]::before {
    content: "Panel";
    font-size: 13px;
}

ul#main-nav > li > a[href="classement.php"],
ul#main-nav > li > a[href="messages.php?messages=liste"] {
    white-space: nowrap;
}

@media screen and (max-width: 980px) {
    .centered {
        width: calc(100% - 24px);
    }

    ul#main-nav,
    #main-nav {
        align-items: flex-start;
        padding: 5px 0 7px;
    }

    ul#main-nav ul {
        top: 36px;
    }
}

@media screen and (max-width: 760px) {
    nav {
        margin-top: 0;
    }

    ul#main-nav,
    #main-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
    }

    ul#main-nav > li > a {
        justify-content: space-between;
    }

    ul#main-nav ul,
    ul#main-nav ul li ul,
    ul#main-nav ul ul {
        position: static;
        min-width: 0;
        max-width: none;
        margin: 3px 0 7px 10px;
        box-shadow: none;
    }

    ul#main-nav > li > ul::before,
    ul#main-nav ul ul::before {
        display: none;
    }
}
/* === Zone18 modern menu end === */





/* === Zone18 footer modern start === */
footer.zone18-footer {
    min-height: 0;
    height: auto;
    margin-top: 24px;
    padding: 0;
    background: #1f252e;
    background-image: none;
    border-top: 3px solid #b22922;
    color: #dfe5ec;
}

.zone18-footer-inner {
    width: 948px;
    max-width: calc(100% - 28px);
    margin: 0 auto;
    padding: 15px 0;
    box-sizing: border-box;
    font-size: 12px;
    color: #aeb7c3;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zone18-footer-inner a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}

.zone18-footer-inner a:hover {
    color: #ffcc00;
    text-decoration: underline;
}

@media (max-width: 760px) {
    .zone18-footer-inner {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}
/* === Zone18 footer modern end === */


/* === Zone18 desktop menu comfort start === */
@media (min-width: 801px) and (pointer: fine) {
    ul#main-nav > li > ul {
        top: 32px;
    }

    ul#main-nav li.z18-menu-open > ul {
        display: block;
    }

    ul#main-nav li.z18-menu-open ul li:not(.z18-menu-open) > ul {
        display: none;
    }

    ul#main-nav ul li.z18-menu-open > ul {
        display: block;
    }

    ul#main-nav li.z18-menu-open > a,
    ul#main-nav > li.z18-menu-open > a[href="#"] {
        color: #fff;
        background: #b22922;
        border-color: #d64e47;
        box-shadow: 0 5px 12px rgba(0, 0, 0, .18);
    }

    ul#main-nav li.z18-menu-open > a[href="#"]::after {
        transform: rotate(180deg);
        border-top-color: #fff;
    }

    ul#main-nav ul li.z18-menu-open > a {
        color: #fff;
        background: #b22922;
        border-color: #b22922;
        box-shadow: inset 3px 0 0 #1f252e;
    }

    ul#main-nav ul li.z18-menu-open > a::before {
        background: #fff;
    }

    ul#main-nav ul li.z18-menu-open > a::after {
        color: #fff;
    }
}
/* === Zone18 desktop menu comfort end === */

/* === Zone18 menu meteo start === */
ul#main-nav > li.menu-meteo-item > a {
    min-width: 32px;
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
}

ul#main-nav > li.menu-meteo-item > a[href="#"]::after {
    display: none;
}

.menu-meteo-sun {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #ffffff;
    font-size: 17px;
    line-height: 18px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

ul#main-nav .menu-meteo-panel {
    left: auto;
    right: 0;
    width: 220px;
    min-width: 220px;
    max-width: 240px;
    background: #ffffff;
}

ul#main-nav .menu-meteo-panel li {
    display: block;
    width: auto;
}

ul#main-nav .menu-meteo-panel li span {
    display: block;
    padding: 7px 9px;
    color: #111111 !important;
    font-size: 12px;
    line-height: 15px;
    font-weight: 700;
    background: transparent;
    border-bottom: 1px solid #dce1e8;
}

ul#main-nav .menu-meteo-panel li:last-child span {
    color: #222222 !important;
    font-weight: 600;
    border-bottom: 0;
}

ul#main-nav .menu-meteo-panel li span b {
    color: #000000 !important;
}

ul#main-nav li.menu-meteo-item:hover > ul,
ul#main-nav li.menu-meteo-item.z18-menu-open > ul {
    display: block;
}

@media (max-width: 800px) {
    ul#main-nav > li.menu-meteo-item > a {
        justify-content: flex-start;
    }

    ul#main-nav .menu-meteo-panel {
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}
/* === Zone18 menu meteo end === */

/* === Zone18 standard synoptique vehicules === */
.standard-syno-panel {
    padding: 10px !important;
}

.standard-syno-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    min-height: 22px;
    font-weight: bold;
    text-align: center;
}

.standard-syno-head i {
    color: rgba(255, 255, 255, .6);
    font-style: normal;
    font-size: 14px;
    line-height: 1;
}

.standard-syno-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    font-size: 26px;
    line-height: 28px;
}

.standard-syno-veh-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    align-items: center;
    gap: 8px;
    min-height: 36px;
}

.standard-syno-veh-list [class^="synoptique"],
.standard-syno-veh-list [class*=" synoptique"] {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 6px 9px !important;
    border-radius: 7px !important;
    box-shadow: 0 2px 5px rgba(31, 37, 46, .14) !important;
    font-size: 12px !important;
    line-height: 16px !important;
    text-align: center;
}

.standard-syno-veh-list [class^="synoptique"] abbr,
.standard-syno-veh-list [class*=" synoptique"] abbr {
    display: block;
    text-decoration: none;
}

.standard-syno-veh-list [class^="synoptique"] b,
.standard-syno-veh-list [class*=" synoptique"] b {
    display: block;
    white-space: nowrap;
}

.standard-syno-veh-list .synoptique21 {
    background: #f2c230 !important;
    color: #1f252e !important;
    border-color: #8a6500 !important;
}

@media (max-width: 700px) {
    .standard-syno-veh-list {
        grid-template-columns: repeat(2, minmax(66px, 1fr));
        gap: 6px;
    }

    .standard-syno-veh-list [class^="synoptique"],
    .standard-syno-veh-list [class*=" synoptique"] {
        min-width: 66px;
        padding: 5px 7px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 430px) {
    .standard-syno-veh-list {
        grid-template-columns: 1fr;
    }
}
/* === Zone18 standard synoptique vehicules end === */

/* ZONE18 PANEL JOUEUR HOVER FIX */
.pj-page .pj-primary-btn,
.pj-page .pj-danger-btn,
.pj-page .pj-btn {
    box-sizing: border-box !important;
    border: 0 !important;
    background-image: none !important;
    min-height: 34px !important;
    line-height: 18px !important;
    padding: 8px 12px !important;
    transform: none !important;
}

.pj-page .pj-primary-btn:hover,
.pj-page .pj-danger-btn:hover,
.pj-page .pj-btn:hover,
.pj-page .pj-primary-btn:focus,
.pj-page .pj-danger-btn:focus,
.pj-page .pj-btn:focus {
    border: 0 !important;
    background-image: none !important;
    background-position: 0 0 !important;
    min-height: 34px !important;
    line-height: 18px !important;
    padding: 8px 12px !important;
    transform: none !important;
    text-decoration: none !important;
}

/* === Zone18 composants uniformes start === */
.z18-dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 18px;
}

.z18-dashboard-hero,
.z18-card,
.z18-kpi {
    box-sizing: border-box;
}

.z18-dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    color: #ffffff;
    background: #1f252e;
    border: 1px solid #151a21;
    border-bottom: 4px solid #b22922;
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(31, 37, 46, .16);
}

.z18-dashboard-hero h1 {
    margin: 3px 0;
    color: #ffffff;
    font-size: 30px;
    line-height: 34px;
    font-weight: 800;
    letter-spacing: 0;
}

.z18-dashboard-hero p {
    margin: 0;
    color: #d9dde4;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.z18-eyebrow {
    display: block;
    color: #aeb7c5;
    font-size: 11px;
    line-height: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.z18-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.z18-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.z18-dashboard-grid-main {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
}

.z18-card {
    background: #ffffff;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(31, 37, 46, .08);
}

.z18-card-title {
    padding: 11px 14px;
    color: #ffffff;
    background: #1f252e;
    border-bottom: 3px solid #b22922;
    font-size: 14px;
    line-height: 18px;
    font-weight: 800;
    text-transform: uppercase;
}

.z18-card > .z18-empty,
.z18-card > .z18-alert-list,
.z18-card > .z18-info-grid,
.z18-card > .z18-kpi-grid,
.z18-card > .z18-operation-box,
.z18-card > .z18-weather,
.z18-card > .z18-timeline,
.z18-card > .z18-note-form,
.z18-card > .z18-mini-list {
    margin: 14px;
}

.z18-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.z18-info-grid div {
    min-height: 52px;
    padding: 10px 11px;
    background: #f4f6f9;
    border: 1px solid #dce2ea;
    border-radius: 5px;
}

.z18-info-grid span,
.z18-kpi span {
    display: block;
    color: #6a7382;
    font-size: 11px;
    line-height: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.z18-info-grid b {
    display: block;
    margin-top: 4px;
    color: #1f252e;
    font-size: 14px;
    line-height: 18px;
}

.z18-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.z18-kpi-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.z18-kpi {
    min-height: 82px;
    padding: 13px 12px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    box-shadow: 0 5px 14px rgba(31, 37, 46, .06);
}

.z18-kpi b {
    display: block;
    margin-bottom: 7px;
    color: #b22922;
    font-size: 28px;
    line-height: 30px;
    font-weight: 800;
}

.z18-btn,
a.z18-btn,
button.z18-btn,
input.z18-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 7px 12px;
    color: #1f252e;
    background: #eef1f5;
    border: 1px solid #cfd5dd;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 16px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.z18-btn:hover,
a.z18-btn:hover,
button.z18-btn:hover,
input.z18-btn:hover {
    color: #ffffff;
    background: #1f252e;
    border-color: #1f252e;
    text-decoration: none;
}

.z18-btn-red,
a.z18-btn-red,
button.z18-btn-red {
    color: #ffffff;
    background: #b22922;
    border-color: #b22922;
}

.z18-btn-red:hover,
a.z18-btn-red:hover,
button.z18-btn-red:hover {
    background: #8f1f1a;
    border-color: #8f1f1a;
}

.z18-btn-light,
a.z18-btn-light {
    color: #1f252e;
    background: #ffffff;
    border-color: #ffffff;
}

.z18-btn-small,
a.z18-btn-small {
    min-height: 28px;
    padding: 5px 9px;
    font-size: 12px;
}

.z18-btn-full {
    width: 100%;
    margin-top: 10px;
}

.z18-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    font-style: normal;
    font-size: 12px;
    line-height: 14px;
    font-weight: 800;
}

.z18-badge-success {
    color: #1d6131;
    background: #e5f5ea;
}

.z18-badge-warning {
    color: #7a4b00;
    background: #fff2cc;
}

.z18-badge-danger {
    color: #8f1f1a;
    background: #fde7e5;
}

.z18-badge-neutral {
    color: #4d5664;
    background: #eef1f5;
}

.z18-alert-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.z18-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #d8dde5;
    border-left: 5px solid #3f6c9f;
    border-radius: 5px;
    background: #f8fafc;
}

.z18-alert b {
    display: block;
    margin-bottom: 3px;
    color: #1f252e;
}

.z18-alert span {
    display: block;
    color: #3f4652;
    line-height: 18px;
}

.z18-alert-danger {
    border-left-color: #b22922;
    background: #fff3f2;
}

.z18-alert-warning {
    border-left-color: #d18b1f;
    background: #fff9ec;
}

.z18-alert-success {
    border-left-color: #2f8a45;
    background: #f4fbf6;
}

.z18-operation-box b,
.z18-operation-box span,
.z18-operation-box small {
    display: block;
}

.z18-operation-box b {
    color: #1f252e;
    font-size: 18px;
    line-height: 22px;
}

.z18-operation-box span {
    margin-top: 5px;
    color: #b22922;
    font-weight: 800;
}

.z18-operation-box small {
    margin-top: 5px;
    color: #6a7382;
    font-weight: 700;
}

.z18-empty {
    padding: 13px;
    color: #667083;
    background: #f7f9fb;
    border: 1px solid #dce2ea;
    border-radius: 5px;
    line-height: 18px;
}

.z18-empty a {
    color: #b22922;
    font-weight: 800;
}

.z18-weather {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    background: #f8fafc;
}

.z18-weather strong {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #ffffff;
    background: #3f6c9f;
    border-radius: 50%;
    font-size: 27px;
    line-height: 48px;
}

.z18-weather b,
.z18-weather span,
.z18-weather small {
    display: block;
}

.z18-weather b {
    color: #1f252e;
    font-size: 17px;
}

.z18-weather span {
    margin-top: 3px;
    color: #3f4652;
    font-weight: 800;
}

.z18-weather small {
    margin-top: 5px;
    color: #6a7382;
}

.z18-weather-warning strong {
    background: #d18b1f;
}

.z18-weather-danger strong {
    background: #b22922;
}

.z18-weather-success strong {
    background: #2f8a45;
}

.z18-timeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.z18-timeline-row {
    padding: 9px 10px;
    border-left: 4px solid #b22922;
    background: #f8fafc;
    border-radius: 0 5px 5px 0;
}

.z18-timeline-row small {
    display: block;
    margin-bottom: 3px;
    color: #667083;
    font-weight: 800;
}

.z18-timeline-row span {
    color: #2f3540;
    line-height: 18px;
}

.z18-mini-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.z18-mini-list div {
    padding: 8px 9px;
    color: #3f4652;
    background: #f8fafc;
    border: 1px solid #dce2ea;
    border-radius: 5px;
}

.z18-mini-list small {
    display: block;
    margin-bottom: 3px;
    color: #667083;
    font-weight: 800;
}

.z18-table {
    width: calc(100% - 28px);
    margin: 14px;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid #d8dde5;
}

.z18-table th,
.z18-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #e1e5eb;
    text-align: left;
    vertical-align: middle;
    line-height: 18px;
}

.z18-table th {
    color: #1f252e;
    background: #eef1f5;
    font-weight: 800;
    text-transform: uppercase;
}

.z18-table tr:nth-child(even) td {
    background: #fafbfc;
}

.z18-table tr:last-child td {
    border-bottom: 0;
}

.z18-table td b {
    color: #1f252e;
}

.z18-note-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.z18-note-form textarea {
    width: 100%;
    min-height: 150px;
    padding: 10px;
    box-sizing: border-box;
    color: #2f3540;
    background: #f8fafc;
    border: 1px solid #cfd5dd;
    border-radius: 5px;
    resize: vertical;
}

.z18-note-form textarea:focus {
    outline: none;
    background: #ffffff;
    border-color: #b22922;
    box-shadow: 0 0 0 3px rgba(178, 41, 34, .12);
}

@media (max-width: 980px) {
    .z18-dashboard-grid,
    .z18-dashboard-grid-main {
        grid-template-columns: 1fr;
    }

    .z18-info-grid,
    .z18-kpi-grid,
    .z18-kpi-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .z18-dashboard-hero,
    .z18-alert {
        align-items: stretch;
        flex-direction: column;
    }

    .z18-hero-actions {
        justify-content: flex-start;
    }

    .z18-info-grid,
    .z18-kpi-grid,
    .z18-kpi-grid-2 {
        grid-template-columns: 1fr;
    }

    .z18-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}
/* === Zone18 composants uniformes end === */

/* === Zone18 menu fluide final start === */
@media (min-width: 801px) {
    nav {
        position: relative;
        z-index: 9000;
        overflow: visible;
        background: #1f252e;
        border-top: 3px solid #b22922;
        border-bottom: 1px solid #0b0f14;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    }

    nav .centered {
        overflow: visible;
    }

    ul#main-nav,
    #main-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
        min-height: 46px;
        padding: 6px 0;
        overflow: visible;
    }

    ul#main-nav > li {
        position: relative;
        min-height: 34px;
    }

    ul#main-nav > li > a {
        min-height: 34px;
        padding: 0 10px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 800;
        line-height: 16px;
        transition: background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
    }

    ul#main-nav > li:hover > a,
    ul#main-nav > li.z18-menu-open > a,
    ul#main-nav > li > a:focus {
        color: #ffffff;
        background: #b22922;
        border-color: #d64e47;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, .22);
    }

    ul#main-nav > li > a[href="#"]::after {
        margin-left: 5px;
        transition: transform .16s ease, border-top-color .16s ease;
    }

    ul#main-nav > li:hover > a[href="#"]::after,
    ul#main-nav > li.z18-menu-open > a[href="#"]::after {
        transform: rotate(180deg);
        border-top-color: #ffffff;
    }

    ul#main-nav > li::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 34px;
        height: 12px;
        display: none;
    }

    ul#main-nav > li:hover::after,
    ul#main-nav > li.z18-menu-open::after {
        display: block;
    }

    ul#main-nav ul {
        display: block !important;
        position: absolute;
        top: 44px;
        left: 0;
        min-width: 220px;
        max-width: 260px;
        width: max-content;
        padding: 7px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(8px);
        background: #f5f7fa;
        border: 1px solid #cfd6df;
        border-top: 3px solid #b22922;
        border-radius: 7px;
        box-shadow: 0 18px 34px rgba(10, 15, 22, .28);
        transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
        z-index: 9100;
    }

    ul#main-nav > li > ul::before {
        content: "";
        position: absolute;
        top: -9px;
        left: 20px;
        width: 11px;
        height: 11px;
        background: #b22922;
        border-radius: 2px;
        transform: rotate(45deg);
    }

    ul#main-nav li:hover > ul,
    ul#main-nav li.z18-menu-open > ul,
    ul#main-nav li:focus-within > ul {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    ul#main-nav li:hover ul ul,
    ul#main-nav li.z18-menu-open ul li:not(.z18-menu-open) > ul {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(8px);
    }

    ul#main-nav ul li:hover > ul,
    ul#main-nav ul li.z18-menu-open > ul,
    ul#main-nav ul li:focus-within > ul {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }

    ul#main-nav ul li {
        position: relative;
        display: block;
        width: 100%;
    }

    ul#main-nav ul li a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        min-height: 30px;
        width: 100%;
        padding: 7px 9px;
        color: #25303b;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 12px;
        font-weight: 800;
        line-height: 16px;
        text-decoration: none;
        white-space: normal;
        transition: background .12s ease, color .12s ease, border-color .12s ease, padding-left .12s ease;
    }

    ul#main-nav ul li a::before {
        content: "";
        width: 6px;
        height: 6px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: #a0a9b6;
    }

    ul#main-nav ul li:hover > a,
    ul#main-nav ul li.z18-menu-open > a,
    ul#main-nav ul li a:focus {
        color: #ffffff;
        background: #b22922;
        border-color: #b22922;
        padding-left: 12px;
        box-shadow: inset 3px 0 0 #1f252e;
    }

    ul#main-nav ul li:hover > a::before,
    ul#main-nav ul li.z18-menu-open > a::before,
    ul#main-nav ul li a:focus::before {
        background: #ffffff;
    }

    ul#main-nav ul li:has(> ul) > a::after {
        right: 10px;
        color: #7f8996;
    }

    ul#main-nav ul li:has(> ul):hover > a::after,
    ul#main-nav ul li.z18-menu-open > a::after {
        color: #ffffff;
    }

    ul#main-nav ul ul {
        top: -7px;
        left: calc(100% + 9px);
        margin: 0;
        border-top: 1px solid #cfd6df;
        border-left: 4px solid #b22922;
        transform: translateX(8px);
    }

    ul#main-nav ul ul::before {
        content: "";
        position: absolute;
        top: 16px;
        left: -10px;
        width: 11px;
        height: 11px;
        background: #f5f7fa;
        border-left: 1px solid #cfd6df;
        border-bottom: 1px solid #cfd6df;
        border-radius: 2px;
        transform: rotate(45deg);
    }

    ul#main-nav > li > .counter {
        top: -8px;
        right: -5px;
        z-index: 2;
        min-width: 18px;
        height: 18px;
        line-height: 18px;
        font-size: 10px;
        background: #b22922;
        border: 2px solid #ffffff;
        box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    }
}
/* === Zone18 menu fluide final end === */

/* === Zone18 bouton admin compact start === */
@media (min-width: 801px) {
    ul#main-nav > li.menu-admin-panel > a,
    ul#main-nav > li > a[href="panel/"] {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        min-height: 34px !important;
        padding: 0 !important;
        font-size: 0 !important;
        color: #ffffff !important;
        background: transparent;
        border-color: transparent;
    }

    ul#main-nav > li.menu-admin-panel > a::before,
    ul#main-nav > li > a[href="panel/"]::before {
        content: "ADM" !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 24px;
        color: #ffffff;
        background: #b22922;
        border: 1px solid #d64e47;
        border-radius: 5px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, .20);
        font-size: 10px !important;
        line-height: 12px;
        font-weight: 900;
        letter-spacing: 0;
    }

    ul#main-nav > li.menu-admin-panel:hover > a,
    ul#main-nav > li.menu-admin-panel > a:hover,
    ul#main-nav > li > a[href="panel/"]:hover {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    ul#main-nav > li.menu-admin-panel:hover > a::before,
    ul#main-nav > li.menu-admin-panel > a:hover::before,
    ul#main-nav > li > a[href="panel/"]:hover::before {
        background: #8f1f1a;
        border-color: #ffffff;
        transform: translateY(-1px);
    }
}
/* === Zone18 bouton admin compact end === */

/* === Zone18 admin toujours sur la ligne start === */
@media (min-width: 801px) {
    nav .centered {
        position: relative;
    }

    ul#main-nav,
    #main-nav {
        position: relative;
        padding-right: 46px !important;
    }

    ul#main-nav > li.menu-admin-panel,
    ul#main-nav > li:has(> a[href="panel/"]) {
        position: absolute !important;
        top: 6px !important;
        right: 0 !important;
        width: 38px !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 4;
    }

    ul#main-nav > li.menu-admin-panel > a,
    ul#main-nav > li:has(> a[href="panel/"]) > a {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 34px !important;
        min-height: 34px !important;
        justify-content: center !important;
    }
}
/* === Zone18 admin toujours sur la ligne end === */

/* === Zone18 evolution visuelle globale start === */
:root {
    --z18-ink: #1f252e;
    --z18-ink-2: #2c3440;
    --z18-red: #b22922;
    --z18-red-dark: #8f1f1a;
    --z18-paper: #ffffff;
    --z18-soft: #f3f5f8;
    --z18-soft-2: #e7ebf0;
    --z18-line: #d7dde5;
    --z18-muted: #697383;
    --z18-green: #2f7d4c;
    --z18-orange: #b16a11;
    --z18-blue: #2f5f91;
    --z18-radius: 6px;
    --z18-shadow: 0 10px 24px rgba(31, 37, 46, .10);
    --z18-shadow-soft: 0 5px 14px rgba(31, 37, 46, .07);
}

html,
body {
    background: #e8ebef !important;
}

body {
    color: var(--z18-ink);
    text-rendering: optimizeLegibility;
}

#main-content {
    background: #e8ebef;
}

header {
    box-shadow: 0 1px 0 rgba(178, 41, 34, .80);
}

nav {
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-bottom: 1px solid rgba(0, 0, 0, .22);
    box-shadow: 0 10px 22px rgba(31, 37, 46, .16);
}

#content {
    padding-top: 22px;
    padding-bottom: 34px;
}

#content > .centered {
    width: calc(100% - 28px);
    max-width: 1180px;
}

a,
a:link,
a:visited {
    color: var(--z18-ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--z18-red);
}

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10 {
    margin-bottom: 20px;
}

.title-grid {
    display: flex;
    align-items: center;
    min-height: 39px;
    height: auto !important;
    padding: 0 16px !important;
    color: #ffffff;
    background: var(--z18-ink);
    border: 1px solid #151a21;
    border-bottom: 3px solid var(--z18-red);
    border-radius: var(--z18-radius) var(--z18-radius) 0 0;
    box-shadow: var(--z18-shadow-soft);
    box-sizing: border-box;
}

.title-grid span,
.title-grid center {
    display: block;
    float: none !important;
    width: 100%;
    min-height: 0;
    padding: 0 !important;
    color: #ffffff;
    font-size: 14px;
    line-height: 18px;
    font-weight: 900;
    letter-spacing: 0;
    text-align: left;
    text-transform: uppercase;
}

.title-grid center {
    text-align: center;
}

.title-grid ul {
    margin: 0;
    padding: 0;
}

.content-gird-1,
.content-gird-2,
.content-gird-3,
.content-gird-4,
.content-gird-5,
.avis_dossier,
.messages,
.message,
.forum-message-card,
.forum-topic-toolbar,
.forum-category-card,
.forum-subject-card,
.jeu-panel,
.z18-card {
    background: var(--z18-paper);
    border: 1px solid var(--z18-line);
    border-top: 0;
    border-radius: 0 0 var(--z18-radius) var(--z18-radius);
    box-shadow: var(--z18-shadow-soft);
    box-sizing: border-box;
}

.content-gird-1,
.content-gird-2,
.content-gird-3,
.content-gird-4,
.content-gird-5 {
    padding: 15px !important;
    color: var(--z18-ink-2);
}

.z18-card,
.jeu-panel {
    border: 1px solid var(--z18-line);
    border-radius: var(--z18-radius);
    overflow: hidden;
}

.z18-card-title,
.jeu-panel-title {
    border-bottom: 3px solid var(--z18-red);
}

.content-gird-1 p,
.content-gird-2 p,
.content-gird-3 p,
.content-gird-4 p,
.content-gird-5 p {
    line-height: 1.55;
}

.content-gird-1 > h1,
.content-gird-2 > h1,
.content-gird-3 > h1,
.content-gird-4 > h1,
.content-gird-5 > h1,
.content-gird-1 > h2,
.content-gird-2 > h2,
.content-gird-3 > h2,
.content-gird-4 > h2,
.content-gird-5 > h2,
.content-gird-1 > h3,
.content-gird-2 > h3,
.content-gird-3 > h3,
.content-gird-4 > h3,
.content-gird-5 > h3 {
    margin-top: 0;
    color: var(--z18-ink);
    letter-spacing: 0;
}

table,
table.display,
.dataTables_wrapper table,
.content-gird-1 table,
.content-gird-2 table,
.content-gird-3 table,
.content-gird-4 table,
.content-gird-5 table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--z18-paper);
    border: 1px solid var(--z18-line);
    border-radius: var(--z18-radius);
    box-shadow: 0 3px 10px rgba(31, 37, 46, .04);
}

table thead tr th,
table tbody tr td,
table.display thead tr th,
table.display tbody tr td {
    padding: 9px 10px;
    color: var(--z18-ink-2);
    border-right: 0;
    border-bottom: 1px solid var(--z18-line);
    font-size: 12px;
    line-height: 17px;
    vertical-align: middle;
}

table thead tr th,
table.display thead tr th {
    color: var(--z18-ink);
    background: #eef1f5;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

table tbody tr:nth-child(even),
table.display tbody tr:nth-child(even) {
    background: #f8fafc;
}

table tbody tr:hover,
table.display tbody tr:hover {
    background: #fff4f2;
}

table tbody tr:last-child td,
table.display tbody tr:last-child td {
    border-bottom: 0;
}

.clear_table,
.clear_table tbody,
.clear_table tr,
.clear_table td,
.clear_table th {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
textarea {
    min-height: 34px;
    padding: 7px 9px;
    color: var(--z18-ink);
    background: #ffffff;
    border: 1px solid #cbd3dd;
    border-radius: 5px;
    box-shadow: inset 0 1px 2px rgba(31, 37, 46, .05);
    box-sizing: border-box;
    outline: none;
}

textarea {
    min-height: 96px;
    line-height: 18px;
    resize: vertical;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    border-color: var(--z18-red);
    box-shadow: 0 0 0 3px rgba(178, 41, 34, .14), inset 0 1px 2px rgba(31, 37, 46, .04);
}

#content input[type="submit"],
#content input[type="button"],
#content button,
.button-input,
.button-a,
.button-a span,
.z18-btn,
.jeu-table-action {
    min-height: 34px;
    height: auto;
    padding: 8px 13px;
    color: #ffffff;
    background: var(--z18-ink);
    background-image: none !important;
    border: 1px solid #151a21;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(31, 37, 46, .10);
    box-sizing: border-box;
    font-size: 13px;
    line-height: 16px;
    font-weight: 900;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
}

#content input[type="submit"]:hover,
#content input[type="button"]:hover,
#content button:hover,
.button-input:hover,
.button-a:hover,
.button-a:hover span,
.z18-btn:hover,
.jeu-table-action:hover {
    color: #ffffff;
    background: var(--z18-red);
    border-color: var(--z18-red);
    box-shadow: 0 6px 14px rgba(178, 41, 34, .20);
    text-decoration: none;
    transform: translateY(-1px);
}

.button-input.red,
.button-input.chat2,
.z18-btn-red,
.jeu-table-action-danger,
#content input[type="submit"].danger,
#content button.danger {
    color: #ffffff;
    background: var(--z18-red);
    border-color: var(--z18-red);
}

.button-input.red:hover,
.button-input.chat2:hover,
.z18-btn-red:hover,
.jeu-table-action-danger:hover,
#content input[type="submit"].danger:hover,
#content button.danger:hover {
    background: var(--z18-red-dark);
    border-color: var(--z18-red-dark);
}

.button-input.green,
.button-input.chat1,
.z18-btn-green,
#content input[type="submit"].green,
#content button.green {
    color: #ffffff;
    background: var(--z18-green);
    border-color: var(--z18-green);
}

.button-input.gray,
.button-input.gris,
.button-a.gray,
.z18-btn-light,
.jeu-table-action-light {
    color: var(--z18-ink);
    background: #eef1f5;
    border-color: #cbd3dd;
}

.button-input.gray:hover,
.button-input.gris:hover,
.button-a.gray:hover,
.z18-btn-light:hover,
.jeu-table-action-light:hover {
    color: #ffffff;
    background: var(--z18-ink);
    border-color: var(--z18-ink);
}

.alert,
.z18-alert,
.z18-alert-line,
.sdis-status,
.badge,
.etat-badge,
.spp-badge {
    border-radius: 5px;
    box-sizing: border-box;
    font-weight: 800;
}

.alert {
    min-height: 0;
    padding: 10px 14px;
    border: 1px solid var(--z18-line);
    background: #f7f9fb;
    color: var(--z18-ink);
    box-shadow: 0 4px 12px rgba(31, 37, 46, .06);
}

.alert.green,
.z18-alert-success,
.sdis-status.ok,
.sdis-status.green {
    color: #1f623c;
    background: #eaf6ef;
    border-color: #b8ddc6;
}

.alert.red,
.z18-alert-danger,
.sdis-status.ko,
.sdis-status.red {
    color: #8f1f1a;
    background: #fff0ee;
    border-color: #e7b5b1;
}

.alert.orange,
.z18-alert-warning,
.sdis-status.warning,
.sdis-status.orange {
    color: #8a4d08;
    background: #fff6e8;
    border-color: #edcc99;
}

.alert.blue,
.z18-alert-info,
.sdis-status.info,
.sdis-status.blue {
    color: #244f78;
    background: #eef6ff;
    border-color: #b9d4ef;
}

.badge,
.etat-badge,
.spp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 8px;
    color: var(--z18-ink);
    background: #eef1f5;
    border: 1px solid #cbd3dd;
    font-size: 11px;
    line-height: 14px;
    text-transform: uppercase;
}

.avis_dossier,
.messages,
.message {
    padding: 14px;
}

.forum-message-card,
.forum-topic-toolbar {
    border-radius: var(--z18-radius);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    margin-left: 6px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 5px !important;
}

#historique {
    max-height: 300px;
    overflow: auto;
    padding-right: 6px;
    line-height: 19px;
}

#historique span {
    font-weight: 900;
}

@media (max-width: 980px) {
    #content > .centered {
        width: auto;
        max-width: none;
    }

    .title-grid {
        min-height: 40px;
    }

    .title-grid span,
    .title-grid center {
        font-size: 13px;
    }

    .content-gird-1,
    .content-gird-2,
    .content-gird-3,
    .content-gird-4,
    .content-gird-5 {
        padding: 12px !important;
    }
}

@media (max-width: 700px) {
    #content {
        padding-top: 14px;
    }

    table,
    table.display,
    .content-gird-1 table,
    .content-gird-2 table,
    .content-gird-3 table,
    .content-gird-4 table,
    .content-gird-5 table {
        font-size: 12px;
    }

    #content input[type="submit"],
    #content input[type="button"],
    #content button,
    .button-input,
    .button-a,
    .button-a span,
    .z18-btn,
    .jeu-table-action {
        width: auto;
        max-width: 100%;
        min-height: 36px;
        white-space: normal;
    }
}
/* === Zone18 evolution visuelle globale end === */

/* === Zone18 corrections centrage/footer start === */
#content > .centered {
    margin-left: auto !important;
    margin-right: auto !important;
}

.title-grid {
    justify-content: center !important;
}

.title-grid span,
.title-grid center {
    text-align: center !important;
}

.content-gird-1 > center,
.content-gird-2 > center,
.content-gird-3 > center,
.content-gird-4 > center,
.content-gird-5 > center,
.z18-hero-actions,
.z18-kpi,
.z18-empty {
    text-align: center;
}

.content-gird-1 form center,
.content-gird-2 form center,
.content-gird-3 form center,
.content-gird-4 form center,
.content-gird-5 form center {
    display: block;
    text-align: center;
}

footer.zone18-footer,
footer.zone18-footer .zone18-footer-inner,
footer.zone18-footer .zone18-footer-inner * {
    color: #dfe5ec !important;
}

footer.zone18-footer {
    background: #1f252e !important;
    background-image: none !important;
    border-top: 3px solid #b22922 !important;
}

footer.zone18-footer a,
footer.zone18-footer a:link,
footer.zone18-footer a:visited {
    color: #ffffff !important;
    text-decoration: none;
}

footer.zone18-footer a:hover {
    color: #ffcc00 !important;
    text-decoration: underline;
}

footer.zone18-footer .zone18-footer-inner {
    text-align: center !important;
}
/* === Zone18 corrections centrage/footer end === */

/* === Zone18 meteo toujours sur la ligne start === */
@media (min-width: 801px) {
    ul#main-nav,
    #main-nav {
        padding-right: 88px !important;
    }

    ul#main-nav > li.menu-meteo-item {
        position: absolute !important;
        top: 6px !important;
        right: 42px !important;
        width: 38px !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 5;
    }

    ul#main-nav:not(:has(> li.menu-admin-panel)) > li.menu-meteo-item {
        right: 0 !important;
    }

    ul#main-nav > li.menu-meteo-item > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    ul#main-nav > li.menu-meteo-item:hover > a,
    ul#main-nav > li.menu-meteo-item.z18-menu-open > a {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    ul#main-nav > li.menu-meteo-item .menu-meteo-sun {
        width: 28px !important;
        height: 28px !important;
        color: #ffffff !important;
        font-size: 23px !important;
        line-height: 28px !important;
        text-align: center;
    }

    ul#main-nav > li.menu-meteo-item > ul.menu-meteo-panel {
        top: 44px !important;
        right: 0 !important;
        left: auto !important;
    }
}
/* === Zone18 meteo toujours sur la ligne end === */

/* === Zone18 menu desktop large start === */
@media (min-width: 801px) {
    nav > .centered {
        width: calc(100% - 32px) !important;
        max-width: 1240px !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    ul#main-nav,
    #main-nav {
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 3px !important;
        padding-right: 90px !important;
        box-sizing: border-box;
    }

    ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel) {
        flex: 0 0 auto !important;
    }

    ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel) > a {
        padding-left: 9px !important;
        padding-right: 9px !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 801px) and (max-width: 1120px) {
    nav > .centered {
        width: calc(100% - 16px) !important;
        max-width: none !important;
    }

    ul#main-nav,
    #main-nav {
        gap: 2px !important;
        padding-right: 86px !important;
    }

    ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel) > a {
        padding-left: 7px !important;
        padding-right: 7px !important;
        font-size: 12px !important;
    }
}
/* === Zone18 menu desktop large end === */

/* === Zone18 standard modules centres start === */
.standard-page-wrap {
    width: 948px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.standard-page-wrap .grid-1 {
    float: none !important;
    width: 948px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.standard-page-wrap .standard-history-block {
    clear: left;
}

.standard-page-wrap .grid-4 {
    width: 622px !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.standard-page-wrap .grid-2 {
    width: 300px !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.standard-page-wrap .grid-2.last {
    margin-right: 0 !important;
}

.standard-page-wrap .content-gird-1,
.standard-page-wrap .content-gird-2,
.standard-page-wrap .content-gird-3,
.standard-page-wrap .content-gird-4,
.standard-page-wrap .content-gird-5 {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 980px) {
    .standard-page-wrap {
        width: 100%;
    }

    .standard-page-wrap .grid-1,
    .standard-page-wrap .grid-2,
    .standard-page-wrap .grid-4 {
        float: none !important;
        clear: both;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* === Zone18 standard modules centres end === */

/* === Zone18 centrage global anciennes pages start === */
#content > .centered {
    width: 948px !important;
    max-width: calc(100% - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

#content > .centered > .grid-1 {
    float: none !important;
    width: 948px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

#content > .centered > .clear {
    clear: both;
}

#content > .centered > .grid-2.last,
#content > .centered > .grid-3.last,
#content > .centered > .grid-4.last,
#content > .centered > .grid-5.last,
#content > .centered > .grid-6.last,
#content > .centered > .grid-7.last,
#content > .centered > .grid-8.last,
#content > .centered > .grid-9.last,
#content > .centered > .grid-10.last {
    margin-right: 0 !important;
}

#content > .centered:has(.z18-dashboard),
#content > .centered:has(.leaflet-container),
#content > .centered:has(.cta-console-page),
#content > .centered:has(.cta-console),
#content > .centered:has(.carte-zone18),
#content > .centered:has(.zone18-map),
#content > .centered:has(.z18-map) {
    width: calc(100% - 28px) !important;
    max-width: 1180px !important;
}

#content > .centered:has(.z18-dashboard) > .grid-1,
#content > .centered:has(.leaflet-container) > .grid-1,
#content > .centered:has(.cta-console-page) > .grid-1,
#content > .centered:has(.cta-console) > .grid-1,
#content > .centered:has(.carte-zone18) > .grid-1,
#content > .centered:has(.zone18-map) > .grid-1,
#content > .centered:has(.z18-map) > .grid-1 {
    width: 100% !important;
}

@media (max-width: 980px) {
    #content > .centered {
        width: auto !important;
        max-width: none !important;
    }

    #content > .centered > .grid-1,
    #content > .centered > .grid-2,
    #content > .centered > .grid-3,
    #content > .centered > .grid-4,
    #content > .centered > .grid-5,
    #content > .centered > .grid-6,
    #content > .centered > .grid-7,
    #content > .centered > .grid-8,
    #content > .centered > .grid-9,
    #content > .centered > .grid-10 {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}
/* === Zone18 centrage global anciennes pages end === */

/* === Zone18 pages importantes uniformisation start === */
#content > .centered:has(.z18-page-shell) {
    width: calc(100% - 28px) !important;
    max-width: 1180px !important;
}

#content > .centered:has(.z18-page-shell) > .grid-1 {
    width: 100% !important;
}

.z18-page-shell {
    width: 100%;
    margin: 0 auto 28px;
    color: var(--z18-ink-2);
    box-sizing: border-box;
}

.z18-page-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 18px;
    padding: 22px 24px;
    color: #ffffff;
    background: var(--z18-ink);
    border-radius: 6px;
    border-bottom: 4px solid var(--z18-red);
    box-shadow: var(--z18-shadow-soft);
    box-sizing: border-box;
}

.z18-page-kicker {
    display: block;
    margin: 0 0 6px;
    color: #aeb8c5;
    font-size: 12px;
    line-height: 15px;
    font-weight: 900;
    text-transform: uppercase;
}

.z18-page-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: 32px;
    line-height: 36px;
    font-weight: 900;
    letter-spacing: 0;
}

.z18-page-hero p {
    margin: 6px 0 0;
    color: #d8dde6;
    font-size: 14px;
    line-height: 20px;
    font-weight: 800;
}

.z18-page-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.z18-stat-grid {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
}

.z18-stat-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.z18-stat-card {
    padding: 15px 16px;
    background: #ffffff;
    border: 1px solid var(--z18-line);
    border-radius: 6px;
    box-shadow: var(--z18-shadow-soft);
    box-sizing: border-box;
}

.z18-stat-card span {
    display: block;
    margin: 0 0 8px;
    color: var(--z18-muted);
    font-size: 11px;
    line-height: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.z18-stat-card strong {
    display: block;
    color: var(--z18-ink);
    font-size: 19px;
    line-height: 24px;
    font-weight: 900;
}

.z18-card {
    background: #ffffff;
}

.z18-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 0 16px;
    color: #ffffff;
    background: var(--z18-ink);
    border-bottom: 3px solid var(--z18-red);
    box-sizing: border-box;
}

.z18-card-title span,
.z18-card-title strong {
    color: #ffffff;
    font-size: 13px;
    line-height: 17px;
    font-weight: 900;
    text-transform: uppercase;
}

.z18-empty {
    padding: 16px;
    color: var(--z18-muted);
    font-weight: 800;
    text-align: center;
}

.z18-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.z18-badge-muted {
    color: #5f6b7a;
    background: #eef1f5;
    border: 1px solid #d7dde5;
}

.z18-progress {
    height: 10px;
    margin: 18px 16px 6px;
    overflow: hidden;
    background: #eef1f5;
    border-radius: 999px;
}

.z18-progress span {
    display: block;
    height: 100%;
    background: var(--z18-red);
    border-radius: inherit;
}

.z18-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
}

.z18-chip-list span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    color: #2d6c38;
    background: #e8f5ea;
    border: 1px solid #cdebd2;
    border-radius: 999px;
    font-size: 12px;
    line-height: 15px;
    font-weight: 900;
}

.z18-career-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 18px;
    align-items: start;
}

.z18-career-main,
.z18-career-history {
    grid-column: span 1;
}

.z18-check-list {
    padding: 10px 16px 16px;
}

.z18-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--z18-line);
}

.z18-check-row:last-child {
    border-bottom: 0;
}

.z18-check-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 15px;
    line-height: 24px;
    font-weight: 900;
}

.z18-check-row.is-ok span {
    background: var(--z18-green);
}

.z18-check-row.is-nok span {
    background: var(--z18-red);
}

.z18-check-row p {
    margin: 0;
    color: var(--z18-ink-2);
    font-size: 13px;
    line-height: 18px;
    font-weight: 800;
}

.z18-career-grade-card {
    padding: 18px;
    text-align: center;
}

.z18-career-grade-card img {
    display: block;
    max-width: 72px;
    max-height: 72px;
    margin: 0 auto 10px;
}

.z18-career-grade-card strong,
.z18-career-grade-card small {
    display: block;
}

.z18-career-grade-card strong {
    color: var(--z18-ink);
    font-size: 18px;
    line-height: 23px;
    font-weight: 900;
}

.z18-career-grade-card small {
    margin-top: 5px;
    color: var(--z18-muted);
    font-size: 12px;
    line-height: 16px;
    font-weight: 800;
}

.z18-rank-track {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 16px;
}

.z18-rank-track span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #778292;
    background: #eef1f5;
    border: 1px solid #d7dde5;
    border-radius: 50%;
    font-size: 12px;
    line-height: 15px;
    font-weight: 900;
}

.z18-rank-track span.is-done {
    color: #ffffff;
    background: var(--z18-ink);
    border-color: var(--z18-ink);
}

.z18-rank-track span.is-next {
    color: #ffffff;
    background: var(--z18-red);
    border-color: var(--z18-red);
}

.z18-rank-track-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.z18-rank-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 6px 8px;
    background: #f5f7fa;
    border: 1px solid var(--z18-line);
    border-radius: 6px;
    box-sizing: border-box;
}

.z18-rank-step img {
    display: block;
    max-width: 28px;
    max-height: 28px;
    margin: 0 auto;
}

.z18-rank-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #ffffff;
    background: var(--z18-ink);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
}

.z18-rank-step strong {
    overflow: hidden;
    color: var(--z18-ink);
    font-size: 12px;
    line-height: 15px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.z18-rank-step em {
    padding: 3px 6px;
    color: #ffffff;
    background: var(--z18-red);
    border-radius: 999px;
    font-size: 10px;
    line-height: 12px;
    font-style: normal;
    font-weight: 900;
}

.z18-rank-step.is-done {
    background: #edf2f7;
}

.z18-rank-step.is-current {
    background: #fff4f2;
    border-color: #e0aaa5;
}

.z18-rank-step.is-next {
    background: #f9fafb;
    border-color: #cbd3dd;
}

.z18-history-list {
    padding: 10px 16px 16px;
}

.z18-history-list > div {
    padding: 10px 0;
    border-bottom: 1px solid var(--z18-line);
}

.z18-history-list > div:last-child {
    border-bottom: 0;
}

.z18-history-list time {
    display: block;
    margin: 0 0 4px;
    color: var(--z18-muted);
    font-size: 11px;
    line-height: 14px;
    font-weight: 900;
}

.z18-history-list p {
    margin: 0;
    color: var(--z18-ink-2);
    font-size: 12px;
    line-height: 17px;
    font-weight: 800;
}

@media (max-width: 980px) {
    .z18-page-hero {
        display: block;
        padding: 18px;
    }

    .z18-page-hero h1 {
        font-size: 25px;
        line-height: 30px;
    }

    .z18-page-hero-actions {
        justify-content: flex-start;
        margin-top: 14px;
    }

    .z18-stat-grid-4,
    .z18-career-layout {
        grid-template-columns: 1fr;
    }
}
/* === Zone18 pages importantes uniformisation end === */

/* === Zone18 largeur uniforme pages start === */
:root {
    --z18-page-width: 1180px;
    --z18-page-gutter: 28px;
}

#content > .centered,
.standard-page-wrap {
    width: calc(100% - var(--z18-page-gutter)) !important;
    max-width: var(--z18-page-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

#content > .centered > .grid-1,
.standard-page-wrap .grid-1 {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.standard-page-wrap .grid-4 {
    width: calc(100% - 324px) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.standard-page-wrap .grid-2 {
    width: 300px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.standard-page-wrap .grid-2.last {
    margin-right: 0 !important;
}

#content > .centered:has(.z18-page-shell),
#content > .centered:has(.z18-dashboard),
#content > .centered:has(.leaflet-container),
#content > .centered:has(.cta-console-page),
#content > .centered:has(.cta-console),
#content > .centered:has(.carte-zone18),
#content > .centered:has(.zone18-map),
#content > .centered:has(.z18-map) {
    width: calc(100% - var(--z18-page-gutter)) !important;
    max-width: var(--z18-page-width) !important;
}

@media (max-width: 980px) {
    #content > .centered,
    .standard-page-wrap {
        width: auto !important;
        max-width: none !important;
    }

    .standard-page-wrap .grid-1,
    .standard-page-wrap .grid-2,
    .standard-page-wrap .grid-4 {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* === Zone18 largeur uniforme pages end === */

/* === Zone18 notifications globales start === */
#z18-toast-stack {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(390px, calc(100vw - 28px));
    pointer-events: none;
}

.z18-toast {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 10px 10px 10px 12px;
    border: 1px solid #d8dfe8;
    border-left-width: 5px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(31, 37, 46, .22);
    color: #1f252e;
    font: 800 13px/18px Arial, sans-serif;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: auto;
}

.z18-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.z18-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.z18-toast-body {
    min-width: 0;
}

.z18-toast-body b,
.z18-toast-body strong {
    color: inherit;
}

.z18-toast-close {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: #eef1f5;
    color: #4f5967;
    cursor: pointer;
    font: 900 12px/24px Arial, sans-serif;
    text-align: center;
}

.z18-toast-close:hover {
    background: #1f252e;
    color: #ffffff;
}

.z18-toast-success {
    border-left-color: #2d8d46;
}

.z18-toast-success .z18-toast-icon {
    background: #2d8d46;
}

.z18-toast-error {
    border-left-color: #b73b32;
}

.z18-toast-error .z18-toast-icon {
    background: #b73b32;
}

.z18-toast-warning {
    border-left-color: #d49218;
}

.z18-toast-warning .z18-toast-icon {
    background: #d49218;
}

.z18-toast-info {
    border-left-color: #315f8f;
}

.z18-toast-info .z18-toast-icon {
    background: #315f8f;
}

@media (max-width: 700px) {
    #z18-toast-stack {
        top: 10px;
        right: 10px;
        left: 10px;
        width: auto;
    }
}
/* === Zone18 notifications globales end === */