/** /php5/manager/vues/css/index/index.css **/
FORM {
	height: 100%;
	width: 100%;
}

.alertbox .titre {
	font-size: 14px;
}

ul {
	text-align: center;
	font-size: 14px;
	padding:30px 50px;
	margin: 0;
	list-style-type: none;
}



/** /php5/manager/themes/defaut/css/index/index.css **/
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #999999;
}

#mylayer{
	display: none;
}

.connexion{
	font-family: Arial;
	font-weight: bold;
	font-size: 12pt;
	color: #CD0104;
}

.mdp{
	font-family: Arial;
	font-weight: normal;
	font-size: 8pt;
	color: #000000;
}

.poweredby{color: #FFFFFF;padding-left:45px}
.poweredby a{color: #FFFFFF}

#loginerror_alert_box {
	width:360px;
}

#loginerror_alert_box .corps {
	padding-top: 20px;
	padding-bottom: 20px;
}

#content {
	height:100%;
	width:100%;
	z-index: 25;
}
.bg_page {
	width:100%;
	position:absolute;
	bottom:0;
	top:0;
	z-index:1;
}

.bg_page img {
	max-height:100%;
	position:absolute;
	bottom:0;
}
.logo_online{
	width:25%;
	top:27px;
	right:35px;
	z-index:10;
	position:absolute;
}
.conteneur_image img{
	width: 100%;
}
.form_connexion {
	background: url(/php5/manager/themes/defaut/medias/img/login/form_connexion.png) no-repeat;
	width: 310px;
	height: 253px;	
	position:relative;
	z-index:30;
	margin:0;
	padding:0;
	float:right;
	
}
.champ {
	height: 30px;
	line-height: 30px;
	margin-bottom:4px;
	width: 154px;
	background-color:#f3f3f4;
	border: none;
	cursor: auto;
	color: #666666;
	text-align: center;
	font-size: 12px;
	border-radius: 0;
	padding: 1px;
}

a.btn {
	color:#FFFFFF;
	height: 31px;
	width: 188px;
	cursor: pointer;
	text-align: center;
	text-decoration: none!important;
	outline: none;
	display: inline-block;
	line-height: 31px;
	vertical-align: middle;
	border: none;	
	background-color: #666666;
	white-space: nowrap;
	font-size:11px;
	text-transform: uppercase;
	font-size: 14px;
}

a.btn:hover{
	font-weight: bold;
}

.texte_lien, .texte_lien a {
	color: #666666;
	text-align: center;
	font-size: 9px;	
	margin-top: 5px;
	text-decoration: none;
}

.btn_connexion {
	margin-top:10px; 
	margin-left:60px;
}

.clear{
	clear: both;
}

#div_connexion {
	z-index: 31;
}
/** /php5/manager/themes/defaut/css/_global.css **/
BODY,
HTML {
    font-family: Arial, Helvetica, sans-serif;
    /*font-size:12px;*/
    font-size: 11px;
    height: 100%;
    /*	width: 100%;*/
    vertical-align: top;
    margin: 0;
    padding: 0;
}

A {
    color: #000000;
}

LABEL {
    cursor: pointer;
}

.input:focus {
    background-color: #e9e9e9;
    border: 1px solid;
    color: black;
}

.input {
    background-color: #ffffff;
    border: 1px solid #cccccc;
}

INPUT,
SELECT,
A {
    outline-color: #464c58;
}

.highlight {
    background-color: #ffdfdf;
    border: 1px solid #ff0000 !important;
    color: #ff0000;
}

.float-clear {
    clear: both;
}

/**
 * Classes globales
 */

.bold {
    font-weight: bold;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.upper,
.uppercase {
    text-transform: uppercase;
}

.cap,
.capitalize {
    text-transform: capitalize;
}

.rouge {
    color: #d21242;
    /*#cc0b0c;*/
}

.block {
    display: block;
}

.blanc {
    color: #fff;
}

.clear {
    clear: both;
}

.clickable {
    cursor: pointer;
}

.hidden {
    visibility: hidden;
}

.no_display {
    display: none;
}

.erreur {
    text-align: center;
    color: #cc0b0c;
    font-weight: bold;
}

select.erreur {
    border: 1px solid #ff0000 !important;
    background-color: #ffdfdf !important;
    color: #000000 !important;
    font-weight: normal !important;
}

.ajaxloading {
    display: inline-block;
    font-weight: bold;
    background: url('/php5/manager/themes/defaut/medias/img/loading.gif') no-repeat transparent;
    padding: 0 0 0 20px;
    margin: 20px auto 20px auto;
}

.spinnerG {
    background: url('/php5/manager/themes/defaut/medias/img/spinner_g.gif') no-repeat transparent 50% 50%;
}

.spinnerD {
    background: url('/php5/manager/themes/defaut/medias/img/spinner_d.gif') no-repeat transparent 50% 50%;
}

/**
* Champs de formulaire multitext
*/
.multitext LABEL {
    text-transform: uppercase;
    font-weight: bold;
}

.imgflag {
    margin: 0 5px 0 5px;
    vertical-align: text-top;
}

/**
 * Pages centrales
 */
.page {
    padding: 0;
}

.page_content {
    /*width: 889px;*/
    /*margin: 0 10px 0 2px;*/
    /*margin: 0 10px 0 1%;*/
    margin: 0 1%;
}

/**
 * Bandeau commun des pages centrales
 **/
.bandeau {
    margin: 0 1%;
}

.bandeau > .titre {
    text-align: right;
    color: #e0e0e0;
    font-family:
        Arial Black,
        Arial,
        Helvetica,
        sans-serif;
    font-weight: bold;
    font-style: italic;
    font-size: 25px;
    float: right;
    width: 400px;
    margin-right: 1%;
}

.bandeau > .retour {
    background: transparent url(/php5/manager/themes/defaut/medias/img/retour.png) no-repeat bottom left;
    padding-left: 30px;
    font-weight: bold;
    vertical-align: bottom;
    display: block;
    padding-top: 8px;
    width: 100px;
    text-transform: capitalize;
    float: left;
}

.bandeau > A.retour:link,
.bandeau > A.retour:visited,
.bandeau > A.retour:active {
    text-decoration: none;
    color: #595959;
}

.bandeau > A.retour:hover {
    color: #666666;
    text-decoration: text-underline;
}

.chemin {
    width: 100%;
    height: 34px;
    border: 1px solid #d21242;
    background-color: #d21242;
}

.chemin .img_gauche {
    background: #d21242;
    height: 34px;
    width: 18px;
    padding: 0;
    margin: 0;
}

.chemin .texte {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #ffffff;
    height: 34px;
    margin: 0;
}

.chemin .img_droite {
    background: #d21242;
    height: 34px;
    width: 8px;
    margin: 0;
    padding: 0;
}

.bandeau > .hint {
    font-size: 11px;
    background: #f1f1f1;
    border: 1px solid #b3b3b3;
    /*height:42px;*/
    margin: 14px 0 0 0;
}

.bandeau > .hint > .icone {
    background: transparent url(/php5/manager/themes/defaut/medias/img/bandeau/hint_icones.png) no-repeat;
    width: 32px;
    height: 32px;
    margin: 5px 9px 5px 9px;
    float: left;
}

.bandeau > .hint > .texte {
    /*height: 44px;*/
    margin: 2px 0 1px 0;
    padding-top: 5px;
    margin-left: 50px;
    margin-bottom: 8px;
    line-height: 14px;
}

.titre_tableau_min {
    background-color: #464c58;
    /*#d21242;*/
    font-weight: bold;
    height: 40px !important;
    /*25px;*/
    padding: 0 6px;
    color: #fff;
    font-size: 13.2px;
    text-transform: uppercase;
    text-indent: 6px;
}

.titre_tableau_rouge,
.titre_tableau_bleu,
.titre_tableau_theme {
    padding: 0 6px;
    text-indent: 6px;
    height: 40px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13.2px;
    padding: 6px 0;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
}

.titre_tableau_rouge {
    color: #d21242;
}

.titre_tableau_bleu {
    color: #3daabf;
}

.titre_tableau_theme {
    text-align: left;
    color: #fff;
    background-color: rgb(70, 76, 88);
}

.table_listing {
    border-collapse: collapse;
}

.table_listing td,
.table_listing th {
    border: 1px solid #b3b3b3;
}

.soustitre_gris {
    background-color: #e7e7e7;
}

.soustitre_gris_clair {
    background-color: #f0f0f0;
}

/**
 * Pour les pages aux couleurs du menu de droite
 **/
.page_droite .chemin {
    border-color: #3daabf;
    background-color: #3daabf;
}

.page_droite .chemin .img_gauche,
.page_droite .chemin .img_droite {
    background-color: #3daabf;
}

.page_droite .bandeau > .hint > .icone {
    background-image: url(/php5/manager/themes/defaut/medias/img/bandeau/hint_icones_droite.png);
}

.page_droite .soustitre {
    background-color: #ccdfe6;
}

/**
 * Pour les suivis
 **/
.img_status {
    height: 17px;
    width: 17px;
    display: inline-block;
}

.img_comp_module {
    background: url(/php5/manager/themes/defaut//medias/img/suivi/icn_status.png) 0 0 no-repeat transparent;
}

.img_not_attempted {
    background: url(/php5/manager/themes/defaut//medias/img/suivi/icn_status.png) 0 -17px no-repeat transparent;
}

.img_incomplete {
    background: url(/php5/manager/themes/defaut//medias/img/suivi/icn_status.png) 0 -34px no-repeat transparent;
}

.img_passed {
    background: url(/php5/manager/themes/defaut//medias/img/suivi/icn_status.png) 0 -51px no-repeat transparent;
}

.img_completed {
    background: url(/php5/manager/themes/defaut//medias/img/suivi/icn_status.png) 0 -51px no-repeat transparent;
}

.img_failed {
    background: url(/php5/manager/themes/defaut//medias/img/suivi/icn_status.png) 0 -68px no-repeat transparent;
}

/**
 * Icones 20px X 20px
 **/

.icone20 {
    background-color: transparent;
    background-image: url(/php5/manager/themes/defaut/medias/img/icones20.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

.img_puce {
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: scroll;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.puce_bleu {
    background-image: url(/php5/manager/themes/defaut/medias/img/puce_bleu.png);
}

.puce_rouge {
    background-image: url(/php5/manager/themes/defaut/medias/img/puce_rouge.png);
}

.puce_bas_bleu {
    background-image: url(/php5/manager/themes/defaut/medias/img/puce_bas_bleu.png);
}

.puce_bas_rouge {
    background-image: url(/php5/manager/themes/defaut/medias/img/puce_bas_rouge.png);
}

.icone_oeil {
    background-position: 0px -20px;
}

.icone_checkgris {
    background-position: 0px -40px;
}

.icone_calendar {
    background-position: 0px -60px;
}

.icone_replie {
    background-position: 0px -80px;
}

.icone_deplie {
    background-position: 0px -100px;
}

.icone_ordiloupe {
    background-position: 0px -120px;
}

.icone_engrplay {
    /*background-position: 0px -140px;*/
    background-position: 0px -280px;
}

.icone_creerth {
    background-position: 0px -160px;
}

.icone_creerssth {
    background-position: 0px -180px;
}

.icone_engr {
    background-position: 0px -200px;
}

.icone_trash {
    background-position: 0px -220px;
}

.icone_vcheck {
    background-position: 0px -240px;
}

.icone_interdit {
    background-position: 0px -260px;
}

.icone_engrdisabled {
    background-position: 0px -300px;
}

/**
 * Icones 23px X 23px
 **/

.icone23 {
    background-color: transparent;
    background-image: url(/php5/manager/themes/defaut/medias/img/icones23.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    vertical-align: middle;
    width: 23px;
    height: 23px;
}

.icone23_theme {
    background-position: 0px -23px;
}

.icone23_sstheme {
    background-position: 0px -46px;
}

.icone23_docloupe {
    background-position: 0px -69px;
}

.icone23_refresh {
    background-position: 0px -92px;
}

.icone23_print {
    background-position: 0px -115px;
}

.icone23_excel {
    background-position: 0px -138px;
}

.icone23_mail {
    background-position: 0px -161px;
}

.icone23_chap {
    background-position: 0px -184px;
}

.icone23_unk1 {
    background-position: 0px -207px;
}

.icone23_unk2 {
    background-position: 0px -230px;
}

.icone23_edit {
    background-position: 0px -253px;
}

.icone23_trash {
    background-position: 0px -276px;
}

.icone23_tools {
    background-position: 0px -299px;
}

.icone23_export {
    background-position: 0px -322px;
}

.icone23_drag {
    background-position: 0px -345px;
}

.icone23_vtheme {
    background-position: 0px -368px;
}

.icone23_vsstheme {
    background-position: 0px -391px;
}

.icone23_vchap {
    background-position: 0px -414px;
}

.icone23_import {
    background-position: 0px -437px;
}

.icone23_full {
    background-position: 0px -460px;
}

.icone23_check {
    background-position: 0px -483px;
}

.icone23_sand {
    background-position: 0px -506px;
}

.icone23_bd {
    background-position: 0px -529px;
}

.icone23_nemail {
    background-position: 0px -552px;
}

.icone23_newfolder {
    background-position: 0px -575px;
}

.icone23_pie {
    background-position: 0px -598px;
}

.icone23_upload {
    background-position: 0px -621px;
}

.icone23_unk3 {
    background-position: 0px -644px;
}

.icone23_unk4 {
    background-position: 0px -667px;
}

.icone23_unk5 {
    background-position: 0px -692px;
}

/**
 * Des boutons en ligne
**/
.ligne_boutons {
    padding: 0 0 15px 0;
    margin: 0 1%;
}

.ligne_boutons .bouton {
    float: right;
    margin-left: 10px;
}

/**
 * Boutons
**/
.ligne_bouton_droite {
    height: 23px;
}

.ligne_bouton_droite .bouton {
    float: right;
    margin-left: 20px;
}

.ligne_bouton_gauche .bouton {
    float: left;
    margin-right: 20px;
}

.bouton {
    text-align: center;
    /*height:23px;*/
    /*background: #f1f1f1;
	border:1px solid #B3B3B3;*/
    background: #808285;
    height: 40px;
    line-height: 40px;
    transition: background-color 0.25s;
}

.bouton:hover {
    background: #b3b3b3 !important;
}

.bouton .iconeg,
.bouton .iconed {
    display: none;
}

.bouton .iconeg {
    float: left;
}

.bouton .iconed {
    float: right;
}

.bouton .texte {
    /*font-size:11px;
	font-weight:bold;
	text-transform: uppercase;
	margin-left: 30px;
	margin-right: 10px;
	line-height:23px;
	white-space:nowrap;*/
    font-size: 1em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 14px !important;
    white-space: nowrap;
}

.bouton a {
    text-decoration: none;
}

.bouton a:hover {
    color: #666666;
}

/* Vignette */
.vignette_container {
    height: 30px;
    overflow: hidden;
    margin: 0 1%;
}

.vignette {
    background-color: #ffffff;
    color: #d21242;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 8px;
    font-weight: bold;
    white-space: nowrap;
    float: left;
    font-size: 13px;
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    /*border-radius: 10px 10px 0 0;*/
    height: 22px;
}

/**
 * Barres de progression
 */
@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }

    to {
        background-position: 0 0;
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }

    to {
        background-position: 0 0;
    }
}

.progress {
    overflow: hidden;
    height: 20px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff !important;
    text-align: center;
    background-color: #428bca;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: width 0.6s ease;
    transition: width 0.6s ease;
}

.progress-striped .progress-bar {
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 40px 40px;
}

.progress.active .progress-bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}

.progress-bar-success {
    background-color: #5cb85c;
}

.progress-striped .progress-bar-success {
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
}

.progress-bar-info {
    background-color: #5bc0de;
}

.progress-striped .progress-bar-info {
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
}

.progress-bar-warning {
    background-color: #f0ad4e;
}

.progress-striped .progress-bar-warning {
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
}

.progress-bar-danger {
    background-color: #d21242;
}

.progress-striped .progress-bar-danger {
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
}

.progress {
    background-color: #e6e9ed;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.progress-bar {
    background-color: #3cabbf;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.progress-bar-success {
    background-color: #8cc152;
}

.progress-text-success {
    color: #8cc152;
}

.progress-bar-info {
    background-color: #3cabbf;
}

.progress-text-info {
    color: #3cabbf;
}

.progress-bar-warning {
    background-color: #e86f50;
}

.progress-text-warning {
    color: #e86f50;
}

.progress-bar-danger {
    background-color: #d21242;
}

.progress-text-danger {
    color: #d21242;
}

/* Tableaux */
.table_bordered {
    border-collapse: collapse;
    border-right: 1px solid #b3b3b3;
    border-bottom: 1px solid #b3b3b3;
}

.table_bordered thead th {
    background: #464c58;
    color: #ffffff;
    font-size: 13.2px;
}

.table_bordered th,
.table_bordered td {
    border-left: 1px solid #b3b3b3;
    border-top: 1px solid #b3b3b3;
    padding: 4px;
}

.table_bordered tfoot td {
    background: #f1f1f1;
}

.page-title {
    background: #d21242;

    /*height: 24px;
	line-height: 24px;
	padding: 44px 48px 0 48px;*/
    height: 40px;
    line-height: 40px;
    width: 100%;
    padding: 0 48px;
    margin: 0 0 15px 0;
    vertical-align: bottom;
    color: #ffffff;
    font-size: 1.5em;
    text-transform: uppercase;
    position: fixed;
    top: 0;
    z-index: 10;
    display: none;
}

.page-title.menu_reporting {
    background: #3daabf;
}

.cerabox-content .page-title {
    position: absolute;
}

body.reporting .page-title,
.page_droite .page-title,
.page_droite ~ #cerabox .page-title {
    background: #3daabf;
}

.page-title-spacer {
    height: 40px;
    margin-bottom: 15px;
    display: none;
}

.return-url {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    /*height: 68px;*/
    /*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAABCCAYAAADOpi9SAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5RDlEQ0NENTlCQjZFNDExQjNEMkJCNjdBOTI5NjVBOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0OTc3NTBCQ0I2OUMxMUU0QTg3NkE1NDA0N0QxOEYyNSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0OTc3NTBCQkI2OUMxMUU0QTg3NkE1NDA0N0QxOEYyNSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5RTlEQ0NENTlCQjZFNDExQjNEMkJCNjdBOTI5NjVBOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5RDlEQ0NENTlCQjZFNDExQjNEMkJCNjdBOTI5NjVBOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pqpf5LYAAAE7SURBVHja7NkxDsIwDAXQtDCydanEBjfgHlydGzAidanEwAqllbrHjp1vR7KlqOuTmzZ23F1SuqdGok8NRWADG9jABjawptjvul7renvHbtDpuSwP75kVQZFYMRSFVYEisGrQ2lhVaE2sOrQWlgrtrbEk6LXrbuvjZInlQEfLzHKhB6s9C4FqYGFQKRYKlWDh0FKsCbQEawblYk2hHKw5lIp1AaVg3UBzWFfQHHYm1qMDAprDDnvWcjHvb8EUu2VrzIH37E8IcO4DcwWm/LrcgKmHggsw57g1B3MLGVNwSYloBi4tvk3AkrYGDpY2jFCwRisOA2tdckDAmtdHXPDPEssFf6yxZLCHzHLBLrBVwLUHIKpgxGhJDYwa2qmAkeNQMRg9aBaBjwkfG/jcQmZTK3s2sIENrOf4CzAATnji5U+Eg0YAAAAASUVORK5CYII=);*/
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5RDlEQ0NENTlCQjZFNDExQjNEMkJCNjdBOTI5NjVBOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGODM1NjVCREMwQ0ExMUU0ODc0Qzg1NTBFMzVBODM5MSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGODM1NjVCQ0MwQ0ExMUU0ODc0Qzg1NTBFMzVBODM5MSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMzM5RDlBMUNBQzBFNDExQTk2OTg0NTdDRjAwNDI1MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5RDlEQ0NENTlCQjZFNDExQjNEMkJCNjdBOTI5NjVBOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiSpLcsAAAGxSURBVHja7NfZTsJAFAbgFqto9FLFGHHFuOAansPn9goXEOOCuzECxisXULH+JzlNjKEDXegZSZv8acMk5cuZdubUnDeMHUPjI2FofsTAGBjg+EZedAU2kSKyizzpBvxCji5s+xap43oPqekCJFyJcM4PuG7glEcq0sCmU7m/A/jtE6d95NXrTa0QK1cE5L7V4IJpmjhh0zKGJIBUnQJwDwrcErLo5+ZWBLhlJOP3D6wu41Z5ao2ogR/IIXCPLrgE4+aCPj9+gA3GVVxwfYybDePt8wqsM64aBc4rkHAHwNUU05pFZsJc+a2QcEmcVpB02Ptmp8A8cM+K8Uw3cD3VD+YwjWOK8TJyJwkcRLbckNyxFJAbySl2kOMuSOqgS8i15DPoIFMuSGq5jsNE+nlJkoycUCCpkleSb/EAIyfbTPel5DLTj2wokDZPd1lyHewEeYKcSy7UhNwEckqBPEXO+FtZZCexuJJpBZKex3fJrY5arTUgp1s0E1TlbWRYei+mSmZ/I7nTySEpiY8mt3tSJem6ypUblfhoajfd68gbMqJru5UIiuupfjAG/lvgjwADAIxeoCf21bQEAAAAAElFTkSuQmCC);
    transition: background-color ease-out 0.25s;
    z-index: 15;
    height: 40px;
}

.return-url:hover {
    background-color: #eb446e;
}

.page_droite .return-url:hover {
    background-color: #078098;
}

/* Titre */
.catalogue_titre {
    background-color: #d21242;
    margin: 0 1%;
}

.page_droite .catalogue_titre {
    background-color: #3daabf;
}

.catalogue_titre_text {
    color: #fff;
    height: 40px;
    line-height: 40px;
    text-indent: 15px;
    font-size: 13.2px;
    font-weight: bold;
    background-color: #464c58;
    text-transform: uppercase;
}

/* Alphabet */
table.alphabet {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    border: 0px solid #b3b3b3;
    padding: 0;
    width: 100%;
    margin-bottom: 8px;
}

table.alphabet td.lettre {
    color: #000000;
    border: 1px solid #b3b3b3;
    height: 20px;
    line-height: 20px;
}

table.alphabet td.lettre strong {
    font-size: 13.2px;
}

table.alphabet .lettre.remplie {
    background-color: #f0f0f0;
}

body.reporting table.alphabet .lettre.remplie {
    background-color: #ccdfe6;
}

table.alphabet a {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

table.alphabet td.selected {
    border: 1px solid #d21242 !important;
    background-color: #d21242 !important;
}

body.reporting table.alphabet td.selected,
.page_reporting table.alphabet td.selected {
    border: 1px solid #3daabf !important;
    background-color: #3daabf !important;
}

table.alphabet td.selected a,
body.reporting table.alphabet td.selected a {
    color: #fff !important;
}

/* Augmentation de largeur du menu */
#haut_menu_utilisateur,
#gauche,
#droite,
#gauche_content,
#droite_content,
#droite_content .rootplaceholder,
#haut_menu_boutons {
    width: 200px;
    min-width: 200px;
}

#haut_menu_pf {
    margin-right: 0;
}

#haut_nom_utilisateur {
    width: 114px;
}

/* #ligne_compte_ppal A, #haut_menu_comptes .col_compte, .table_select A.compte_en_cours div {
	width: 225px;
	transition: 0.3s;
} */

#ligne_entite .col_compte,
#ligne_structure .col_compte {
    width: 225px;
    transition: 0.3s;
}

#ligne_entite a.nom_compte,
#ligne_structure div.nom_compte,
#texte_select_compte {
    width: 221px;
    transition: 0.3s;
}

div.highlight-on-hover {
    clear: both;
}

div.highlight-on-hover:hover {
    background-color: #f0f0f0;
}

.dashboard-mockup {
  /* Déclaration des variables */
  --bg:            #eef0f5;
  --card:          #ffffff;
  --text:          #1f2937;
  --text-strong:   #111827;
  --muted:         #6b7280;
  --muted-2:       #9ca3af;
  --border:        #eceef3;
  --divider:       #f0f1f5;

  /* Couleurs des univers */
  --blue:   #2563eb;  --blue-soft:   #e7efff;
  --green:  #22b473;  --green-soft:  #e3f6ec;
  --teal:   #17b3c4;  --teal-soft:   #e0f5f8;
  --purple: #8b5cf6;  --purple-soft: #efe9fe;
  --orange: #f5a623;  --orange-soft: #fdf0da;

  /* États / deltas */
  --positive:      #16a34a;
  --status-strong: #16a34a;
  --status-mid:    #2563eb;
  --status-off:    #dc2626;

  --radius:    16px;
  --radius-sm: 12px;
  --shadow:    0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);

  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.dashboard-mockup * { box-sizing: border-box; }

.dashboard-mockup .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    user-select: none;
    color: var(--muted-2);
}

/* ---------- En-tête ---------- */
.dashboard-mockup .dm-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.dashboard-mockup .dm-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
}
.dashboard-mockup .dm-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-2);
  background: #f1f2f6;
  padding: 5px 12px;
  border-radius: 999px;
}
.dashboard-mockup .dm-badge--alert {
  color: var(--status-mid);
  background: var(--blue-soft);
  cursor: pointer;
}
.dashboard-mockup .dm-alert-wrap { position: relative; }
.dashboard-mockup .dm-alert-list {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 10;
  min-width: 280px; max-width: 360px; max-height: 320px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.dashboard-mockup .dm-alert-list.visible { display: block; }
.dashboard-mockup .dm-alert-list li + li { border-top: 1px solid var(--divider); }
.dashboard-mockup .dm-alert-list a {
  display: block; padding: 10px 12px; text-decoration: none; border-radius: 8px;
}
.dashboard-mockup .dm-alert-list a:hover { background: #f7f8fa; }
.dashboard-mockup .dm-alert-list__theme {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-strong);
}
.dashboard-mockup .dm-alert-list__msg {
  display: block; font-size: 12px; color: var(--muted-2); margin-top: 2px;
}

/* ==========================================================================
   KPI
   ========================================================================== */
.dashboard-mockup .kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 22px;
}
.dashboard-mockup .kpi {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    border: 1px solid #eaeaf2;
}
.dashboard-mockup .kpi__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.dashboard-mockup .kpi__icon {
  flex: 0 0 auto;
  width: 60px; height: 60px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.dashboard-mockup .kpi__icon .material-symbols-outlined { color: #fff; font-size: 36px; }
.dashboard-mockup .kpi__value { font-size: 37px; font-weight: 700; line-height: 1; color: var(--text-strong); }
.dashboard-mockup .kpi__label { margin-top: 6px; font-size: 18px; font-weight: 700; }
.dashboard-mockup .kpi__foot { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dashboard-mockup .kpi__delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; font-size: 21px; color: var(--positive);
  min-width: 0; flex-wrap: wrap;
}
.dashboard-mockup .kpi__delta .material-symbols-outlined { font-size: 30px; color: inherit; }
.dashboard-mockup .kpi__delta--down { color: var(--status-off); }
.dashboard-mockup .kpi__delta .js-delta-value { min-width: 0; }
.dashboard-mockup .kpi__hint { font-size: 12px; color: var(--muted-2); }

.dashboard-mockup .kpi--blue   .kpi__icon { background: var(--blue); }
.dashboard-mockup .kpi--blue   .kpi__value { color: var(--blue); }
.dashboard-mockup .kpi--green  .kpi__icon { background: var(--green); }
.dashboard-mockup .kpi--green  .kpi__value { color: var(--green); }
.dashboard-mockup .kpi--teal   .kpi__icon { background: var(--teal); }
.dashboard-mockup .kpi--teal   .kpi__value { color: var(--teal); }
.dashboard-mockup .kpi--purple .kpi__icon { background: var(--green); }
.dashboard-mockup .kpi--purple .kpi__value { color: var(--green); }
.dashboard-mockup .kpi--orange .kpi__icon { background: var(--purple); }
.dashboard-mockup .kpi--orange .kpi__value { color: var(--purple); }

/* ==========================================================================
   Panneaux
   ========================================================================== */
.dashboard-mockup .dash-panel {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
    border: 1px solid #eaeaf2;

}
.dashboard-mockup .dash-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.dashboard-mockup .dash-panel__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 700; color: var(--text-strong); margin: 0;
}
.dashboard-mockup .dash-panel__title .info { font-size: 18px; color: var(--muted-2); }
.dashboard-mockup .dash-panel__title .dash-lock {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--green-soft); color: var(--green);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.dashboard-mockup .dash-panel__subtitle { font-size: 12px; color: var(--muted-2); margin: -10px 0 16px; }
.dashboard-mockup .dash-panel__more { color: var(--muted-2); cursor: pointer; font-size: 22px; }

.dashboard-mockup .period-select {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px 8px 14px;
  font-size: 13px; color: var(--text);
  background: #fff;
  display: inline-flex; align-items: center; gap: 20px;
  cursor: pointer;
}
.dashboard-mockup .period-select .material-symbols-outlined { font-size: 18px; color: var(--muted); }

.dashboard-mockup .period-select--interactive { position: relative; padding: 0; }
.dashboard-mockup .period-select--interactive .material-symbols-outlined {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  pointer-events: none;
}
.dashboard-mockup .period-select__control {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: none; background: transparent; font: inherit; color: inherit;
  cursor: pointer; margin: 0;
  width: 100%;
  padding: 8px 34px 8px 14px;
}
.dashboard-mockup .period-select__control:focus { outline: none; }

/* ---------- Rangée graphiques ---------- */
.dashboard-mockup .charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 22px;
}
.dashboard-mockup .chart-box { position: relative; height: 300px; }

.dashboard-mockup .time-summary { display: flex; align-items: center; gap: 16px; margin-top: 18px; margin-left: 44px; }
.dashboard-mockup .time-summary__item { flex: 1; text-align: center; border-radius: 12px; padding: 12px 8px; }
.dashboard-mockup .time-summary__item--prevu   { background: var(--blue-soft); }
.dashboard-mockup .time-summary__item--realise { background: var(--green-soft); }
.dashboard-mockup .time-summary__label { font-size: 13px; color: var(--muted); }
.dashboard-mockup .time-summary__value { font-size: 22px; font-weight: 700; margin-top: 2px; }
.dashboard-mockup .time-summary__item--prevu   .time-summary__value { color: var(--blue); }
.dashboard-mockup .time-summary__item--realise .time-summary__value { color: var(--green); }

.dashboard-mockup .gauge {
  --value: 0; --size: 74px;
  position: relative;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--green) calc(var(--value) * 1%), #e8eaf0 0);
  flex: 0 0 auto;
}
.dashboard-mockup .gauge::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--size) - 14px); height: calc(var(--size) - 14px);
  border-radius: 50%; background: var(--card);
}
.dashboard-mockup .gauge__label { position: relative; z-index: 1; font-weight: 700; font-size: 15px; color: var(--text-strong); }

.dashboard-mockup .time-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.dashboard-mockup .time-footer a { color: var(--blue); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; }

.dashboard-mockup .bottom-grid { display: grid; grid-template-columns: 1fr minmax(0, 750px) 1fr; gap: 20px; }

.dashboard-mockup .dash-panel__scroll { max-height: 260px; overflow-y: auto; }
.dashboard-mockup #js-structures { max-height: 400px; }
.dashboard-mockup #js-top5-modules,
.dashboard-mockup #js-top5-usagers,
.dashboard-mockup #js-heatmap { max-height: none; overflow: visible; }
.dashboard-mockup #js-heatmap { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ---------- Top 5 modules ---------- */
.dashboard-mockup .modules { width: 100%; border-collapse: separate; border-spacing: 0; }
.dashboard-mockup .modules thead th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--muted-2);
  padding: 8px 0 12px; border-bottom: 1px solid var(--divider);
  background-color: #f8f8f8;
  position: sticky; top: 0; z-index: 1;
}
.dashboard-mockup .modules thead th:last-child { text-align: right; }
.dashboard-mockup .modules thead th:first-child { border-radius: 10px 0 0 0; padding-left: 12px; padding-top: 12px; border-left: 1px solid var(--divider); }
.dashboard-mockup .modules thead th:last-child { border-radius: 0 10px 0 0; padding-right: 12px; padding-top: 12px; border-right: 1px solid var(--divider); }
.dashboard-mockup .modules tbody td { padding: 8px 0; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.dashboard-mockup .modules tbody td:first-child { padding-left: 12px; border-left: 1px solid var(--divider); }
.dashboard-mockup .modules tbody td:last-child { padding-right: 12px; border-right: 1px solid var(--divider); }
.dashboard-mockup .modules tbody tr:last-child td:first-child { border-radius: 0 0 0 10px; }
.dashboard-mockup .modules tbody tr:last-child td:last-child { border-radius: 0 0 10px 0; }
.dashboard-mockup .module-cell { display: flex; align-items: center; gap: 12px; }
.dashboard-mockup .module-cell__thumb {
  width: 70px; height: 47px; border-radius: 8px; object-fit: cover;
  background: #f1f2f6; flex: 0 0 auto;
}
.dashboard-mockup .module-cell__thumb--letter {
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-soft); color: var(--blue);
  font-weight: 700; font-size: 16px;
}
.dashboard-mockup .module-cell__title { font-weight: 600; color: var(--text-strong); }
.dashboard-mockup .module-cell__sub { font-size: 11px; color: var(--muted-2); margin-top: 2px; }
.dashboard-mockup .connections { text-align: center; font-weight: 600; color: var(--text-strong); white-space: nowrap; }

/* ---------- Top 5 usagers ---------- */
.dashboard-mockup .usager-cell { display: flex; align-items: center; gap: 12px; }
.dashboard-mockup .usager-cell__avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: #f1f2f6; flex: 0 0 auto;
}
.dashboard-mockup .usager-cell__name { font-weight: 600; color: var(--text-strong); }
.dashboard-mockup .temps-formation { text-align: right; font-weight: 600; color: var(--text-strong); white-space: nowrap; }

.dashboard-mockup .heatmap { display: grid; gap: 6px; height: 100%; align-content: start; }
.dashboard-mockup .heatmap__corner { }
.dashboard-mockup .heatmap__hour-label {
  font-size: 12px; color: var(--muted); font-weight: 500; text-align: center;
}
.dashboard-mockup .heatmap__day-label {
  display: flex; align-items: center;
  font-size: 13px; color: var(--muted-2); padding-right: 8px;
}
/* Carré dérivé de la largeur de colonne (fixée par la grille), plutôt qu'une
   min-height devinée à l'aveugle : reste carré quelle que soit la résolution. */
.dashboard-mockup .heatmap__cell { aspect-ratio: 1 / 1; border-radius: 6px; background: var(--teal); }
.dashboard-mockup .heatmap__cell.lvl-0 { background: #f3f5f9; }
.dashboard-mockup .heatmap__cell.lvl-1 { background: #d4e7ee; }
.dashboard-mockup .heatmap__cell.lvl-2 { background: #a9d4e0; }
.dashboard-mockup .heatmap__cell.lvl-3 { background: #5cc0d1; }
.dashboard-mockup .heatmap__cell.lvl-4 { background: var(--teal); }

/* ---------- Structures ---------- */
.dashboard-mockup .structures-bar-sticky { position: sticky; top: 0; z-index: 2; background: var(--card); padding-bottom: 14px; }
.dashboard-mockup .structures-bar { height: 5px; border-radius: 999px; display: flex; overflow: hidden; }
.dashboard-mockup .structures-bar span { height: 100%; }
.dashboard-mockup .structures-bar .seg-off    { background: var(--status-off); }
.dashboard-mockup .structures-bar .seg-mid    { background: var(--status-mid); }
.dashboard-mockup .structures-bar .seg-strong { background: var(--status-strong); }
.dashboard-mockup .structures { width: 100%; border-collapse: separate; border-spacing: 0; }
.dashboard-mockup .structures thead th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted-2); padding: 8px 0 12px; background-color: #f8f8f8; position: sticky; top: 19px; z-index: 1; }
.dashboard-mockup .structures thead th:last-child { text-align: right; }
.dashboard-mockup .structures thead th:first-child { border-radius: 10px 0 0 0; padding-left: 12px; border-left: 1px solid var(--divider); }
.dashboard-mockup .structures thead th:last-child { border-radius: 0 10px 0 0; padding-right: 12px; border-right: 1px solid var(--divider); }
.dashboard-mockup .structures tbody td { padding: 13px 0; border-bottom: 1px solid var(--divider); }
.dashboard-mockup .structures tbody td:first-child { padding-left: 12px; border-left: 1px solid var(--divider); }
.dashboard-mockup .structures tbody td:last-child { padding-right: 12px; border-right: 1px solid var(--divider); }
.dashboard-mockup .structures tbody tr:last-child td:first-child { border-radius: 0 0 0 10px; }
.dashboard-mockup .structures tbody tr:last-child td:last-child { border-radius: 0 0 10px 0; }
.dashboard-mockup .structure-name { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.dashboard-mockup .structure-name .material-symbols-outlined { font-size: 18px; color: var(--muted-2); }
.dashboard-mockup .status { text-align: right; font-weight: 600; }
.dashboard-mockup .status--strong { color: var(--status-strong); }
.dashboard-mockup .status--mid    { color: var(--status-mid); }
.dashboard-mockup .status--off    { color: var(--status-off); }
.dashboard-mockup .add-structure {
  margin-top: 16px; border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--muted); cursor: pointer;
}
.dashboard-mockup .add-structure .material-symbols-outlined { font-size: 18px; }

/* ---------- Spinner de chargement ---------- */
.dashboard-mockup .is-loading { position: relative; min-height: 140px; }
.dashboard-mockup .dm-spinner {
  position: absolute; top: 50%; left: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 3px solid var(--divider); border-top-color: var(--teal);
  border-radius: 50%; animation: dm-spin .8s linear infinite;
}
@keyframes dm-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .dashboard-mockup .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-mockup .charts-grid { grid-template-columns: 1fr; }
  .dashboard-mockup .bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .dashboard-mockup .time-summary { flex-wrap: wrap; }
}