/* Montserrat et Rubik sont chargees par des <link> Google Fonts dans
   admin/views/head.php. Rubik ne sert que de repli : Montserrat ne dessine
   aucun glyphe arabe, et le navigateur descend d'un cran pour ces
   caracteres-la. Une seule pile pour les deux langues. */
/* Surtout PAS `*::before, *::after` ici : les polices d'icones — FontAwesome,
   Tabler — dessinent leurs glyphes dans un pseudo-element et declarent leur
   propre `font-family` dessus. L'y remplacer par Montserrat fait disparaitre
   toutes les icones de la page Analytics. */
/* Une seule pile, definie ici et nulle part ailleurs.
   LUSAIL en tete : c'est la fonte du logo. Elle n'est pas redistribuable, donc
   pas chargee ; si elle est installee sur le poste, ou si les fichiers sont
   deposes et le @font-face ci-dessous decommente, elle prend la main sans
   qu'aucune autre regle ne bouge. */
:root {
  --police-latine: 'Lusail', 'Montserrat', 'Readex Pro', sans-serif;
  --police-arabe:  'Lusail', 'Readex Pro', 'Montserrat', sans-serif;
}

/* Pour activer la vraie Lusail, deposer les fichiers puis decommenter :
@font-face {
  font-family: 'Lusail';
  src: url('../fonts/lusail/Lusail-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Lusail';
  src: url('../fonts/lusail/Lusail-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
*/

/* Le selecteur est bien universel, mais SOUS `body` — jamais sur `<head>`.
   Unison (unison-js, dont depend tout le menu lateral de Vuexy) ne lit pas la
   largeur de la fenetre : il lit la `font-family` posee sur `head` par des
   media queries — « xl 1200px », « md 768px »... Ecraser cette valeur revient
   a lui annoncer un palier inexistant, et `$.app.menu.toggle()`, qui aiguille
   sur ce nom, ne rencontre plus aucun cas : le bouton d'epinglage du menu ne
   fait plus rien. C'est ce qui arrivait en arabe, ou la regle RTL ci-dessous
   (0,1,1) l'emportait sur `head` (0,0,1) — en anglais `*` (0,0,0) perdait, et
   le bouton marchait, d'ou un bug qui n'existait que dans une langue.
   Bootstrap pose par ailleurs `Quicksand` sur `body` via
   --bs-body-font-family : `body` doit donc figurer explicitement. */
body,
body * {
  font-family: var(--police-latine);
}

/* En arabe, c'est la fonte arabe qui mene : le navigateur choisit la police
   caractere par caractere, et laisser Montserrat en tete lui faisait chercher
   des glyphes arabes qu'elle n'a pas avant de descendre d'un cran. */
html[data-textdirection="-rtl"] body,
html[data-textdirection="-rtl"] body *,
html[lang="ar"] body,
html[lang="ar"] body * {
  font-family: var(--police-arabe);
}

/* Fond du back-office : degrade repris de l'image d'inspiration, couleurs
   echantillonnees dessus (taupe #c2b7af en haut a gauche -> creme #f0e4da en bas
   a droite). Remplace le gris #f8f8f8 de Vuexy (--bs-body-bg).
   Le selecteur exclut le mode sombre, qui conserve son fond #1d1d1d defini par
   .dark-layout body dans app-assets/css/themes/dark-layout.css.
   background-attachment: fixed -> le degrade est calibre sur la fenetre et ne se
   re-etire pas sur les pages longues. */
/* Deux calques : la rosace en filigrane, posee sur le degrade.
   URL absolue depuis la racine du site : custom.css est servi depuis /admin/assets/css/
   alors que l'image est a /assets/img/ (idem en production, ou l'admin est sous /admin).
   Le decalage horizontal recentre la rosace dans la zone de contenu, la barre laterale
   faisant 260 px ; sous 1200 px elle disparait et le centrage redevient simple. */
html:not(.dark-layout) body {
  /* Le fond definitif (eclaircie blanche + lest noir + degrade gris neutre)
     est defini dans la PASSE DE STYLE, section 14. La rosace n'est plus un
     calque de fond : c'est un element du tableau de bord (.dash-emblem). */
  min-height: 100vh;
  background-color: #eaeaea;
}

/* (une media query reglait ici le fond sur DEUX calques, du temps ou la rosace
   en etait un ; le fond en compte trois desormais et elle le cassait sous
   1200px : supprimee.)
*/

.view-record, .edit-record, .delete-record {
    margin: 0 5px;
}
table.dataTable td {
    direction: ltr;
    text-align: left;
}
.avatar-upload {
    position: relative;
    max-width: 192px;
    margin: auto;
}
.avatar-upload .avatar-edit {
    position: absolute;
    right: calc(50% - 19px);
    z-index: 1;
    bottom: -15px;
}
.avatar-upload .avatar-edit input {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}
.avatar-upload .avatar-edit label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #FFFFFF;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2s ease-in-out;
    position: relative;
}
.avatar-upload .avatar-edit label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
}
.avatar-upload .avatar-edit label svg{
    width: 20px;
    height: 20px;
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
}
.avatar-upload .avatar-preview {
    width: 192px;
    height: 192px;
    position: relative;
    border-radius: 100%;
    border: 6px solid #F8F8F8;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.avatar-upload .avatar-preview > div {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-image: url('../../assets/images/default_image.png');
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
}
.avatar-upload .avatar-preview .drop-zoon__preview-image {
  border-radius: 50%;
  z-index: 0;
}
.upload-area__drop-zoon {
  position: relative;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 2px dashed #000;
  border-radius: 15px;
  cursor: pointer;
  transition: border-color 300ms ease-in-out;
  background-color: #fff;
  padding: 20px;
}
.drop-zoon__paragraph {
  font-size: 14px;
  color: #444;
  margin: 10px 0;
  transition: opacity 300ms ease-in-out;
}
.drop-zoon:hover .drop-zoon__icon, .drop-zoon:hover .drop-zoon__paragraph {
  opacity: 0.7;
}
.drop-zoon__icon svg {
  fill: none;
  width: 60px;
  height: 60px;
}
.drop-zoon__icon svg path {
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
}
.drop-zoon__loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  color: #000;
  z-index: 10;
}
.drop-zoon__preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.3125rem;
  border-radius: 10px;
  display: none;
  z-index: 1000;
  transition: opacity 300ms ease-in-out;
  background-color: #fff;
}
.drop-zoon:hover .drop-zoon__preview-image {
  opacity: 0.8;
}
.drop-zoon__file-input {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1001;
}
.upload-area .error {
  display: flex;
  justify-content: center;
  margin: 5px auto;
}
.drop-zoon--over {
  border-color: rgb(127, 127, 127);
}
.drop-zoon--over .drop-zoon__icon, .drop-zoon--over .drop-zoon__paragraph {
  opacity: 0.7;
}
.drop-zoon--Uploaded .drop-zoon__icon, .drop-zoon--Uploaded .drop-zoon__paragraph {
  display: none;
}
.upload-area__file-details {
  height: 0;
  visibility: hidden;
  opacity: 0;
  text-align: left;
  transition: none 500ms ease-in-out;
  transition-property: opacity, visibility;
  transition-delay: 500ms;
}
.file-details--open {
  height: auto;
  visibility: visible;
  opacity: 1;
}
.uploaded-file {
  display: flex;
  align-items: center;
  padding: 0.625rem 0;
  visibility: hidden;
  opacity: 0;
  transition: none 500ms ease-in-out;
  transition-property: visibility, opacity;
}
.uploaded-file--open {
  visibility: visible;
  opacity: 1;
}
.uploaded-file__icon-container {
  position: relative;
  margin-right: 0.3125rem;
}
.uploaded-file__icon {
  font-size: 3.4375rem;
  color: rgb(127, 127, 127);
}
.uploaded-file__info {
  position: relative;
  top: -0.3125rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.uploaded-file__name {
  width: 100%;
  max-width: 180px;
  display: inline-block;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  direction: ltr;
}
.modal .modal-content{
  padding: 10px;
}
.disabled .form-control, .disabled .select2{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;     
  pointer-events: none;
}

.card .card-header {
  background-color: #1e1e1e;
  border-radius: 0.25rem;
  padding: 20px;
  margin-bottom: 20px;
  color: rgb(20, 20, 20);
}

.dashboard .col-lg-2 img {
  width: 65% !important;
}
.card .card-header{
  background-color: transparent;
  color: rgb(15, 14, 14);
}
.card .card-header .card-title{
  color: #444;
}

#chart {
  max-width: 100%;
  opacity: 0.9;
  padding-bottom: 25px;
}
#chart1 {
  max-width: 100%;
  height: 398px;
  margin: 35px auto;
  opacity: 0.9;
}

#chart3 {
  max-width: 100ù;
  margin: 35px auto;
}

#chart3, .chart-box {
  padding-bottom: 25px;
  padding-top: 20px;
  padding-left: 10px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 22px 35px -16px rgb(0 0 0 / 10%);
}
.seller_rating span {
  color: #fabf35;
  font-size: 21px;
  font-weight: 500;
}
.seller_rating svg {
  width: 25px;
  height: 23px;
}
#div-bill{
  padding: 10px;
}
.title-pdf{
  text-align: center;
}
.title-pdf h2{
   padding-top: 40px;
}
.container-fluid{
  background-color: white !important;
}
.avatar-square label {
  font-size: 16px;
  margin-bottom: 12px;
  color: #1e1e1e;
}
.avatar-square .avatar-upload {
  max-width: 100%;
}
.avatar-square .avatar-upload .avatar-preview {
  width: 100%;
  min-height: 250px;
  border-radius: 12px;
}
.avatar-square .avatar-upload .avatar-preview {
  width: 100%;
  min-height: 245px;
  border-radius: 12px;
}
.avatar-square .avatar-upload .avatar-preview > div, .avatar-square .avatar-upload .avatar-preview .drop-zoon__preview-image{
  border-radius: 0;
  object-fit: cover;
}
/**************************[Begin Custom AZ-Fulfilment]*********************************************/
.main-menu.menu-light .navigation > li ul {
    background-color: #f3f3f3 !important;
    margin: 0px 15px 0px 15px !important;
}
/**************************[End Custom AZ-Fulfilment]*********************************************/

.codexMultiPreviewImage {
  position: relative;
  margin: 25px auto;
}
.codexMultiPreviewImage div {
  position: relative;
}
.codexMultiPreviewImage img {
  width: 100%;
  box-shadow: 0 0 10px #ccc;
  height: 100%;
  max-height: 140px;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  padding: 8px 12px;
}
.removePic {
  position: absolute;
  right: -8px;
  top: -8px;
  font-size: 13px;
  font-weight: 600;
  background-color: #fff;
  width: 30px;
  height: 30px;
  text-align: center;
  box-shadow: 0px 1px 20px #ccc;
  border-radius: 50%;
  line-height: 30px;
  cursor: pointer;
  transition: linear .3s all;
  font-family: cursive;
}
.removePic:hover {
  transform: scale(1.15);
}
.codexMultiPreviewImage p {
  font-size: 15px;
  color: var(--lighter-text);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 8px;
}
.custom-option {
    padding-left: 0;
    border: 1px solid #dbdbdb;
    border-radius: .375rem
}
.custom-option:hover {
    border: 1px solid #c9c9c9
}
.custom-option.custom-option-image {
    border-width: 1px !important
}
.custom-option.custom-option-image .custom-option-body img {
    border-radius: .375rem
}
.custom-option .custom-option-content {
    cursor: pointer;
    width: 100%
}
.custom-option-basic .custom-option-content {
    padding: 2px 8px;
}
.custom-option-basic .custom-option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: .25rem
}
.custom-option-icon.checked i,.custom-option-icon.checked svg {
    color: #1e1e1e
}
.custom-option-icon .custom-option-content {
    text-align: center;
    padding: 1.07em
}
.custom-option-icon .custom-option-body {
    display: block;
    margin-bottom: .5rem
}
.custom-option-icon .custom-option-body i {
    font-size: 1.75rem;
    margin-bottom: .5rem;
    display: block
}
.custom-option-icon .custom-option-body svg {
    height: 38px;
    width: 38px;
    margin-bottom: .25rem
}
.custom-option-icon .custom-option-body .custom-option-title {
    display: block;
    font-size: .9375rem;
    font-weight: 500;
    color: #5c5c5c
}
.custom-option-icon .form-check-input {
    float: none !important;
    margin: 0 !important
}
.custom-option-image {
    border-width: 1px
}
.custom-option-image .custom-option-content {
    padding: 0
}
.custom-option-image .custom-option-body img {
    height: 100%;
    width: 100%
}
.custom-option-image.custom-option-image-radio .form-check-input {
    display: none
}
.custom-option-image.custom-option-image-check {
    position: relative
}
.custom-option-image.custom-option-image-check .form-check-input {
    position: absolute;
    top: 16px;
    right: 16px;
    margin: 0;
    border: 0;
    opacity: 0
}
.custom-option-image.custom-option-image-check .form-check-input:checked {
    opacity: 1
}
.custom-option-image.custom-option-image-check:hover .form-check-input {
    border: inherit;
    border-width: 2px;
    opacity: 1
}
.custom-option-image.custom-option-image-check:not(.checked):hover .form-check-input {
    background-color: rgba(0,0,0,0)
}
.custom-option.checked {
    border: 1px solid #1e1e1e;
}
[dir=rtl] .custom-option {
    padding-right: 0
}
[dir=rtl] .custom-option-basic .custom-option-content {
    padding-right: 2.77em;
    padding-left: 1.07em
}
[dir=rtl] .custom-option-image.custom-option-image-check .form-check-input {
    right: auto;
    left: 10px
}
.custom-option-basic.custom-option {
    border-radius: 30px;
}
/*.custom-option-basic.custom-option:first-child {*/
/*    border-top-left-radius: 8px;*/
/*    border-bottom-left-radius: 8px;*/
/*}*/
/*.custom-option-basic.custom-option:last-child {*/
/*    border-top-right-radius: 8px;*/
/*    border-bottom-right-radius: 8px;*/
/*}*/
.custom-option-basic.checked {
    background-color: #1e1e1e;
    color: #fff;
}
.list-group .list-group-item img {
    border-radius: 14px;
}
/********* quantity box *********/

.quantity {
    display: block; 
    margin-bottom: 5px;
}
.quantity .input-text.qty{
    width: 30px;
    height: 35px;
    padding: 0 5px;
    text-align: center;
    background-color: transparent;
    border: 1px solid #ccc;
    font-size: 14px;
    color: var(--third-color);
    -moz-appearance: textfield;
}
.quantity.buttons_added {
    text-align: left;
    position: relative;
    white-space: nowrap;
    vertical-align: top; 
}
.quantity.buttons_added input {
    display: inline-block;
    margin: 0;
    vertical-align: top;
    box-shadow: none;
} 
.quantity.buttons_added .minus,.quantity.buttons_added .plus {
    padding: 5px 7px 5px;
    height: 35px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    cursor:pointer;
    color: var(--third-color);
    transition: .3s;
}
.quantity.buttons_added .minus {
    border-right: 0; 
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.quantity.buttons_added .plus {
    border-left: 0; 
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}
.quantity.buttons_added .minus:hover,.quantity.buttons_added .plus:hover {
    background: #1e1e1e; 
    color: #fff;
    border-color: #1e1e1e;
}
.quantity input[type=number]::-webkit-outer-spin-button, .quantity input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0; 
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity.buttons_added .minus:focus, .quantity.buttons_added .plus:focus {
    outline: none; 
}
/************* quantity box  ***************/
.product_price{
    color: var(--bs-primary);
}
.img_payment {
  width: 50%;
  height: 50%;
}
.vertical-layout.vertical-menu-modern .main-menu li > a svg.icon-tabler{
  height: 22px;
  width: 22px;
  stroke-width: 1.5px;
  margin-bottom: 4px;
  margin-right: 1.1rem;
  fill: none;
  stroke: currentColor;
}
.vertical-layout.vertical-menu-modern .main-menu .menu-content > li > a svg{
  height: 12px !important;
  width: 12px !important;
  margin-bottom: 0;
  margin-right: 10px !important;
}
.main-menu.menu-light li.active > a svg{
  color: #fff;
}
.col-12.col-lg-4.card_payment {
  flex: 0 0 auto;
  width: calc(50% - 10px); 
  margin: 0 5px;
  color: #979797;
  cursor: not-allowed;
  background-color: rgba(0, 0, 0, 0.12);
  border-color: #ebebeb;
  padding-top: 15px;
}
@media (max-width: 991.98px) {
  .col-12.col-lg-4.card_payment {
    width: 100%; 
    margin: 0; 
    margin-bottom: 5px; 
  }
}

/* ── Unified dashboard scale ── */
:root {
  --dash-radius: 14px;
  --dash-radius-sm: 10px;
  --dash-radius-xs: 8px;
  --dash-space: 20px;
  --dash-gap: 16px;
  --dash-pad: 18px;
  --dash-text: 0.875rem;
  --dash-text-sm: 0.78rem;
  --dash-title: 1rem;
  --dash-heading: 1.25rem;
  --dash-kpi: 1.5rem;
  --dash-shadow: 0 8px 24px rgba(23, 23, 23, .05);
  --dash-border: #f0f0f0;
}

.app-content.content {
  font-size: var(--dash-text);
}

.app-content .content-wrapper:not(:has(.editor-section)):not(:has(#konva-container)) {
  padding: var(--dash-space) 24px 32px !important;
}

.app-content .content-header-title,
.app-content h2.content-header-title {
  font-size: var(--dash-heading) !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

.app-content .breadcrumb {
  margin-bottom: 0;
  font-size: var(--dash-text-sm);
}

.app-content .card {
  border-radius: var(--dash-radius) !important;
  border: 1px solid var(--dash-border);
  box-shadow: var(--dash-shadow);
  margin-bottom: var(--dash-gap);
}

.app-content .card .card-header {
  border-radius: var(--dash-radius) var(--dash-radius) 0 0 !important;
  padding: var(--dash-pad) var(--dash-space) 0 !important;
  margin-bottom: 0 !important;
  background: transparent;
}

.app-content .card .card-title,
.app-content .card-title {
  font-size: var(--dash-title) !important;
  font-weight: 700 !important;
  color: #1b1b1b !important;
  margin: 0;
}

.app-content .card .card-body {
  padding: var(--dash-pad) var(--dash-space) var(--dash-space);
}

.app-content .card .card-text,
.app-content .card-text,
.app-content label,
.app-content .form-label {
  font-size: var(--dash-text-sm);
}

.app-content h1 { font-size: 1.4rem; }
.app-content h2 { font-size: var(--dash-heading); }
.app-content h3 { font-size: 1.15rem; }
.app-content h4 { font-size: var(--dash-title); }
.app-content h5, .app-content h6 { font-size: var(--dash-text); }

.app-content .btn,
.app-content button.btn {
  border-radius: var(--dash-radius-sm) !important;
  font-size: var(--dash-text) !important;
  padding: 8px 16px;
}

.app-content .btn-sm {
  border-radius: var(--dash-radius-xs) !important;
  font-size: var(--dash-text-sm) !important;
  padding: 5px 12px;
}

.app-content .form-control,
.app-content .form-select,
.app-content .select2-container--default .select2-selection--single,
.app-content .flatpickr-input {
  border-radius: var(--dash-radius-sm) !important;
  font-size: var(--dash-text) !important;
  min-height: 38px;
}

.app-content .badge,
.app-content .rounded-pill {
  border-radius: 999px !important;
  font-size: 0.72rem;
}

.app-content .modal-content {
  border-radius: var(--dash-radius) !important;
}

.app-content .modal-header,
.app-content .modal-footer {
  padding: 14px var(--dash-space);
}

.app-content .modal-body {
  padding: var(--dash-pad) var(--dash-space);
}

.app-content table.dataTable,
.app-content .table {
  font-size: var(--dash-text);
}

.app-content table.dataTable thead th,
.app-content .table thead th {
  font-size: var(--dash-text-sm);
  font-weight: 650;
}

.app-content .dataTables_wrapper .dataTables_length,
.app-content .dataTables_wrapper .dataTables_filter,
.app-content .dataTables_wrapper .dataTables_info,
.app-content .dataTables_wrapper .dataTables_paginate {
  font-size: var(--dash-text-sm);
}

.app-content .row > [class*="col-"] {
  margin-bottom: var(--dash-gap);
}

/* Dashboard + analytics surfaces */
.dash-hero,
.dash-panel,
.dash-role,
.dash-chart,
.analytics-header,
.filter-card,
.kpi-card,
.chart-card {
  border-radius: var(--dash-radius) !important;
}

.dash-stat,
.dash-ico,
.kpi-icon {
  border-radius: var(--dash-radius-sm) !important;
}

.dash-hero-cta,
.dash-filter-btn,
.btn-print,
.btn-apply,
.btn-clear,
.filter-input,
.quick-btns button {
  border-radius: var(--dash-radius-sm) !important;
  font-size: var(--dash-text) !important;
}

.dash-kicker,
.dash-stat p,
.dash-role span,
.chart-subtitle,
.kpi-body p {
  font-size: var(--dash-text-sm) !important;
}

.dash-panel-head h4,
.chart-title,
.filter-row label {
  font-size: var(--dash-title) !important;
}

.dash-hero h2 { font-size: var(--dash-heading) !important; }
.dash-stat h4,
.dash-role h3,
.kpi-body h3 { font-size: var(--dash-kpi) !important; }

.dash-hero p { font-size: var(--dash-text) !important; }

@media (max-width: 991px) {
  .app-content .content-wrapper:not(:has(.editor-section)):not(:has(#konva-container)) {
    padding: 16px 14px 24px !important;
  }
}

/* ===========================================================================
   PASSE DE STYLE v2 - d'apres Inspiration/6642ea1688ebd28d3e54fad65a41bdc0.jpg
   Traits repris du modele : bandeau haut ou l'objet de verre emerge derriere
   les cartes, panneaux flottants translucides a grand rayon, ombres tres
   diffuses, chiffres cles larges en graisse legere surmontes de micro-libelles
   en capitales, formes en pilule, generosite des marges.
   Aucune couleur nouvelle : gris / noir / beige inchanges.
   =========================================================================== */

:root {
  --dash-radius:    8px;
  --dash-radius-sm: 6px;
  --dash-radius-xs: 5px;
  --ctrl-radius:    8px;
  --dash-space:     26px;
  --dash-gap:       18px;
  --dash-pad:       24px;
  --dash-kpi:       2.3rem;   /* echelle unique : metriques, cartes de roles, bloc noir */
  --dash-shadow:    0 1px 2px rgba(23,23,23,.03), 0 14px 38px rgba(23,23,23,.06);
  --dash-shadow-lg: 0 2px 6px rgba(23,23,23,.04), 0 30px 70px rgba(23,23,23,.11);
  --pill:           999px;
}

/* 1. (le fond est defini plus bas, section 14 : la rosace n'est plus un
      calque de fond mais un element du tableau de bord) */

/* 2. Menu lateral flottant : detache des bords, arrondi, translucide.
      Dans le modele aucun panneau ne touche le bord de la fenetre. */
/* La matiere de la barre vaut a toutes les largeurs. */
.main-menu.menu-fixed {
  border: none !important;
  overflow: hidden;
  background-color: rgba(255,255,255,.60) !important;
  backdrop-filter: blur(22px) saturate(105%);
  -webkit-backdrop-filter: blur(18px) saturate(105%);
  box-shadow: var(--dash-shadow) !important;
}
/* Sa position detachee, elle, n'a de sens qu'au-dessus du palier ou le theme
   affiche un menu fixe. En dessous il le fait glisser hors ecran en jouant sur
   `left` : un `left: 14px !important` le clouerait a l'ecran et le bouton
   hamburger n'aurait plus aucun effet. */
@media (min-width: 1200px) {
  .main-menu.menu-fixed {
    top: 14px !important;
    bottom: 14px !important;
    height: auto !important;
    left: 14px !important;
    border-radius: var(--dash-radius) !important;
  }
}
.main-menu .navigation { background: transparent !important; }
/* Marges/rembourrages seulement quand le menu est deploye : en mode reduit
   c'est Vuexy qui centre les icones, il ne faut pas le contrarier. */
body:not(.menu-collapsed) .main-menu .navigation > li > a,
.menu-collapsed .main-menu.expanded .navigation > li > a {
  margin: 3px 12px !important;
  padding: .7rem 1rem !important;
}
.main-menu .navigation > li > a { border-radius: var(--ctrl-radius) !important; }
.main-menu .navigation li.active > a { box-shadow: 0 8px 22px rgba(23,23,23,.18) !important; }

/* 3. Barre superieure : pilule flottante translucide */
.header-navbar.floating-nav {
  border-radius: var(--dash-radius) !important;
  box-shadow: var(--dash-shadow) !important;
  /* alignee sur l opacite des cartes (.74) : a .60 la barre paraissait plus
     delavee que le reste une fois la page defilee. */
  background-color: rgba(255,255,255,.76) !important;
  backdrop-filter: blur(24px) saturate(105%);
  -webkit-backdrop-filter: blur(20px) saturate(105%);
  padding: .3rem .5rem !important;
}

/* 4. Panneaux : grand rayon, ombre diffuse, materiau translucide */
.card,
.dash-panel,
.dash-stat,
.dash-role,
.dash-chart {
  border-radius: var(--dash-radius) !important;
  border: none !important;
  box-shadow: var(--dash-shadow) !important;
  background-color: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(20px) saturate(105%);
  -webkit-backdrop-filter: blur(16px) saturate(105%);
  transition: box-shadow .3s ease, transform .3s ease;
}
.card:hover, .dash-panel:hover, .dash-stat:hover, .dash-role:hover {
  box-shadow: var(--dash-shadow-lg) !important;
  transform: translateY(-3px);
}
.card .card-body { padding: var(--dash-pad) !important; }
.card .card-header {
  padding: var(--dash-pad) var(--dash-pad) 0 !important;
  border: none !important;
  background: transparent !important;
}
.dash-stat, .dash-role { padding: var(--dash-pad) !important; }

/* 5. Chiffres cles larges en graisse legere + micro-libelles en capitales.
      C'est la signature typographique du modele (les grands 72,52 %). */
.dash-stat h4,
.dash-role h3,
.kpi-body h3,
.dash-hero-metric strong,
.dash-panel .dash-stat h4 {
  font-size: var(--dash-kpi) !important;
  font-weight: 400 !important;
  letter-spacing: -.028em !important;
  line-height: 1.05 !important;
}
.dash-stat small,
.dash-role small,
.dash-stat span,
.dash-role span,
.dash-stat p,
.dash-role p,
.dash-kicker,
.dash-panel-head small {
  text-transform: uppercase !important;
  letter-spacing: .13em !important;
  font-size: .65rem !important;
  font-weight: 600 !important;
  opacity: .62;
}
.dash-panel-head h4 { font-size: .95rem !important; font-weight: 600 !important; }

/* 6. Hero sombre : meme rayon que les panneaux, ombre profonde, plus de souffle */
.dash-hero {
  border-radius: var(--dash-radius) !important;
  box-shadow: 0 24px 60px rgba(23,23,23,.24) !important;
  padding: 32px var(--dash-space) !important;
}
.dash-hero h2 { font-weight: 600 !important; letter-spacing: -.015em; }
.dash-hero-metric strong { font-weight: 300 !important; }
.dash-hero-cta { border-radius: var(--ctrl-radius) !important; padding: .65rem 1.4rem !important; }

/* 7. Pastilles d'icone rondes, comme les boutons circulaires du modele */
.dash-ico, .avatar, .btn-icon {
  border-radius: 50% !important;
  padding-inline: 0 !important;
}
.dash-ico { width: 44px !important; height: 44px !important; }

/* 8. Formes en pilule : boutons, puces, champs, onglets */
.btn, .form-control, .form-select, .input-group, .input-group-text,
.dataTables_filter input, .dataTables_length select,
.select2-container .select2-selection {
  border-radius: var(--ctrl-radius) !important;
}
.btn { padding-inline: 1.35rem; font-weight: 500; }
.badge { border-radius: var(--pill) !important; font-weight: 500; padding: .4em .9em; }
.nav-pills .nav-link { border-radius: var(--ctrl-radius) !important; }
.form-control, .form-select {
  border-width: 1px !important;
  padding: .68rem 1.15rem !important;
  background-color: rgba(255,255,255,.50) !important;
}
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 4px rgba(23,23,23,.06) !important; }

/* 9. Surfaces flottantes */
.dropdown-menu {
  border-radius: var(--dash-radius-sm) !important;
  border: none !important;
  box-shadow: var(--dash-shadow-lg) !important;
  padding: 8px !important;
}
.dropdown-item { border-radius: var(--dash-radius-xs) !important; padding: .58rem .95rem !important; }
.modal .modal-content {
  border-radius: var(--dash-radius) !important;
  border: none !important;
  box-shadow: var(--dash-shadow-lg) !important;
}
.tooltip-inner { border-radius: var(--dash-radius-xs) !important; padding: .5rem .8rem; }

/* 10. Tableaux : de l'air, des entetes en micro-capitales */
.table > :not(caption) > * > * { padding: .95rem 1rem !important; }
.table thead th {
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  font-size: .67rem !important;
  font-weight: 600 !important;
  border-bottom-width: 1px !important;
}
.card-datatable, .dataTables_wrapper { border-radius: var(--dash-radius) !important; }

/* 11. Mode sombre : fonds opaques (la translucidite y ecrase le texte),
       on n'y reprend que les rayons et les ombres. */
.dark-layout .card, .dark-layout .dash-panel, .dark-layout .dash-stat,
.dark-layout .dash-role, .dark-layout .dash-chart,
.dark-layout .header-navbar.floating-nav, .dark-layout .main-menu.menu-fixed {
  background-color: #303030 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 12. Repli sans backdrop-filter : surfaces opaques, jamais de texte illisible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .dash-panel, .dash-stat, .dash-role, .dash-chart,
  .header-navbar.floating-nav, .main-menu.menu-fixed {
    background-color: #ffffff !important;
  }
}

/* 13. Menu reduit aux icones, deploye au survol.
       Le balisage du projet imbrique un second <ul class="navigation"> dans une
       <div class="main-menu-content">, elle-meme dans le <ul> exterieur : les
       selecteurs de repli du theme ne matchent pas cette structure. On decrit
       donc l'etat reduit explicitement. */
@media (min-width: 1200px) {
.menu-collapsed .main-menu:not(.expanded) { width: 76px !important; }
.menu-collapsed .main-menu.expanded       { width: 260px !important; }

.menu-collapsed .main-menu:not(.expanded) .menu-title,
.menu-collapsed .main-menu:not(.expanded) .badge,
.menu-collapsed .main-menu:not(.expanded) .brand-text,
.menu-collapsed .main-menu:not(.expanded) .navbar-brand h1,
.menu-collapsed .main-menu:not(.expanded) .navbar-brand h2,
.menu-collapsed .main-menu:not(.expanded) .navigation > li > a > svg.feather-chevron-right,
.menu-collapsed .main-menu:not(.expanded) .navigation-header {
  display: none !important;
}

.menu-collapsed .main-menu:not(.expanded) .navigation > li > a {
  justify-content: center !important;
  padding: .72rem 0 !important;
  margin: 3px 10px !important;
}
/* Logo centre quand le menu est reduit */
.menu-collapsed .main-menu:not(.expanded) .navbar-brand {
  justify-content: center !important;
  margin-right: 0 !important;
}
.menu-collapsed .main-menu:not(.expanded) .brand-logo { margin-right: 0 !important; }

.menu-collapsed .main-menu:not(.expanded) .navigation > li > a > svg,
.menu-collapsed .main-menu:not(.expanded) .navigation > li > a > i { margin: 0 !important; }

/* La barre flottante est decalee de 14px du bord : on decale d'autant le contenu. */
.menu-collapsed .app-content    { margin-left: 104px !important; }
.menu-collapsed .header-navbar  { left: 104px !important; width: calc(100% - 130px) !important; }
.menu-collapsed .main-menu.expanded { box-shadow: var(--dash-shadow-lg) !important; z-index: 1100; }
}

@media (max-width: 1199px) {
  .menu-collapsed .app-content   { margin-left: 0 !important; }
  .menu-collapsed .header-navbar { left: 0 !important; width: 100% !important; }
}

/* 14. Fond du site : GRIS NEUTRE.
       La nappe beige est retiree — elle est remplacee par une eclaircie blanche
       en haut a droite, qui remplit le meme role (donner du relief au verre de
       la rosace) sans introduire de teinte. Le lest noir en bas a gauche est
       conserve. Le degrade de base est strictement neutre : R = V = B. */
html:not(.dark-layout) body {
  background-color: #e4e4e4;
  background-image:
    radial-gradient(760px 500px at 82% -4%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(920px 660px at 0% 104%, rgba(23,23,23,.19)    0%, rgba(23,23,23,0)    64%),
    linear-gradient(113deg, #cdcdcd 0%, #e4e4e4 50%, #fafafa 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 0, 0 0;
  background-size: auto, auto, auto;
  background-attachment: fixed, fixed, fixed;
}

/* 15. Bandeau de tete.
       Une seule echelle de chiffres pour toute la page (--dash-kpi) : les
       metriques du bandeau, les cartes de roles et le bloc noir partagent la
       meme taille. C'est ce qui donne la coherence d'ensemble. */
.dash-head {
  display: flex;
  /* flex-start et non stretch : etire sur la hauteur de la colonne de gauche
     (haute a cause de la rosace), le panneau se creusait au milieu. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  /* 3px et non 22 : les gouttieres Bootstrap ajoutent deja ~18px sous le
     bandeau. Reglee pour que l'ecart au-dessus de la bande egale celui d'en
     dessous (21px), mesure avec _local/measure.js. */
  margin-bottom: 3px;
}
.dash-head__left {
  position: relative;
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 0;
}

/* Titre sur deux lignes : la salutation, puis le nom. Meme corps pour les deux,
   la salutation simplement attenuee — la hierarchie se fait par le ton, pas par
   la taille. .app-content h1 du theme vaut 1.4rem et gagne par specificite
   (0,1,1), d'ou la remontee de specificite et le !important. */
.app-content .dash-head .dash-title,
.dash-title {
  margin: 0;
  /* La racine du theme est a 14px : 3rem plafonnait le titre a 42px des
     1448px de large. 4rem le laisse suivre la largeur jusqu'a ~1930px. */
  font-size: clamp(1.55rem, 2.9vw, 4rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.024em;
  line-height: 1.18;
}
.dash-title__lead,
.dash-title__name { display: block; }
.dash-title__lead { opacity: .62; font-weight: 500; }

.app-content .dash-head .dash-sub,
.dash-sub {
  margin: 12px 0 0;
  max-width: 46ch;
  font-size: .9rem !important;
  opacity: .68;
}

/* Panneau de droite : fond discret, en-tete separee par un filet, puis une
   grille de quatre colonnes EGALES. Avant, les colonnes se dimensionnaient sur
   la longueur des libelles et le bloc paraissait bancal. */
.dash-head__right {
  /* largeur bornee : sans cela les colonnes en 1fr reclament toute la place
     disponible et le panneau se replie sous le titre. */
  /* Elargi jusqu'au milieu de la zone de contenu. */
  flex: 0 1 630px;
  min-width: 520px;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
  padding: 18px 26px 22px;
  border-radius: var(--dash-radius);
  background-color: rgba(255,255,255,.62);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), var(--dash-shadow);
}
.dash-head__kicker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(23,23,23,.10);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .62rem;
  font-weight: 700;
}
.dash-head__kicker-title { opacity: 1; color: #1e1e1e; }
.dash-head__kicker-note  { opacity: .6; font-weight: 600; }

.dash-metrics {
  display: grid;
  /* 2 par 2 sur deux lignes. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 26px;
  align-items: end;
  align-content: start;
  flex: 1;
}
.dash-metric {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 24px;
  text-decoration: none;
  color: inherit;
  border-left: 1px solid rgba(23,23,23,.11);
  transition: opacity .2s ease;
}
/* Filets : pas de trait a gauche en debut de ligne, un trait horizontal
   au-dessus de la seconde ligne. */
.dash-metrics .dash-metric:nth-child(odd)  { border-left: 0; padding-left: 0; }
.dash-metrics .dash-metric:nth-child(n+3)  { border-top: 1px solid rgba(23,23,23,.11); padding-top: 18px; }
/* Arrangement : le libelle et la fleche partagent la ligne du haut, la valeur
   occupe la ligne du bas — le chiffre reste ainsi le point d'accroche, sans
   rien a cote de lui. Le selecteur vise le libelle par sa CLASSE et non `span` :
   la fleche est elle aussi un <span> et heritait des capitales. */
.dash-metric__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  /* deux lignes minimum : les valeurs restent alignees entre colonnes meme
     quand un libelle passe sur deux lignes et pas les autres. */
  min-height: 2.6em;
  margin-bottom: 14px;
}
.dash-metric__label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: #1e1e1e;
  opacity: .68;
  line-height: 1.25;
}
/* Hierarchie assumee : ces quatre chiffres sont l'information principale de la
   page, ils sont donc plus grands et plus denses que les cartes de roles.
   Avant, ils heritaient du gris du texte courant (#6e6e6e) en graisse 300 :
   c'est ce manque de contraste qui les rendait invisibles, pas leur taille. */
.dash-metric strong {
  display: block;
  font-size: clamp(2.4rem, 3.1vw, 3.15rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  color: #1e1e1e;
}

/* Bouton rond en verre fume : translucide et floute, pas un aplat noir.
   Le liseré clair simule l'epaisseur du verre, l'ombre interieure lui donne
   du volume. */
.dash-metric__go {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(23, 23, 23, .40);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34),
              inset 0 0 0 1px rgba(255,255,255,.16),
              0 3px 10px rgba(23,23,23,.14);
  transition: background .2s ease, transform .18s ease, box-shadow .18s ease;
}
.dash-metric__go svg { width: 14px; height: 14px; }
.dash-metric:hover { color: inherit; }
.dash-metric:hover .dash-metric__go {
  background: rgba(23, 23, 23, .52);
  transform: translate(2px, -2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.40),
              inset 0 0 0 1px rgba(255,255,255,.20),
              0 6px 16px rgba(23,23,23,.22);
}

/* 16. La rosace : sous le titre, mais HORS FLUX.
       Dans le flux, sa hauteur allongeait la colonne de gauche et repoussait la
       bande de 200px vers le bas — l'ecart au-dessus de la bande n'avait alors
       plus rien a voir avec celui d'en dessous. En absolu elle peut aussi etre
       agrandie librement. Le fondu la dissout avant qu'elle n'atteigne la bande,
       qui repasse de toute facon au-dessus (z-index).*/
.dash-emblem {
  position: absolute;
  /* Ancrage inchange (top/left) : la rosace reste exactement ou elle est,
     seule sa taille augmente. Elle grandit donc vers le bas et la droite, ce
     qui agrandit les petales visibles dans la bande libre. */
  top: calc(100% - 78px);
  left: -46px;
  width: 620px;
  height: 620px;
  max-width: 62vw;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 36%, rgba(0,0,0,.26) 45%, transparent 55%);
  mask-image: linear-gradient(to bottom, #000 36%, rgba(0,0,0,.26) 45%, transparent 55%);
}

/* 16a. La rosace tourne lentement sur elle-meme.
       Le dessin passe sur un ::before pour que SEUL lui tourne : le fondu
       (mask-image) reste sur le parent, donc la dissolution vers le bas ne
       tourne pas avec les petales. Le carre (aspect-ratio) garde le centre de
       rotation sur le centre de la rosace meme quand max-width: 62vw retrecit
       la boite. Un tour tres lent : un ornement, pas une animation de chargement. */
.dash-emblem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: url("/assets/img/rosace.svg") no-repeat left top / contain;
  transform-origin: 50% 50%;
  animation: dashEmblemSpin 120s linear infinite;
  will-change: transform;
}

@keyframes dashEmblemSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 16b. La bande : le bloc noir et les quatre cartes de roles sur une rangee.
        Le bloc noir prend un peu plus de large, il porte un bouton. */
.dash-strip {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--dash-gap);
  align-items: stretch;
}
.dash-strip .dash-hero { padding: 20px 22px !important; display: flex; align-items: center; }
.dash-strip .dash-hero .dash-hero-metric { width: 100%; }
.dash-strip .dash-role { height: 100%; }

@media (max-width: 1399px) {
  .dash-strip { grid-template-columns: repeat(3, 1fr); }
  .dash-strip .dash-hero { grid-column: span 3; }
}
@media (max-width: 767px) {
  .dash-strip { grid-template-columns: repeat(2, 1fr); }
  .dash-strip .dash-hero { grid-column: span 2; }
}

/* Le bloc noir ne porte plus le titre : il se resserre sur le chiffre et le bouton. */
.dash-hero { min-height: 0 !important; }
.dash-hero .dash-hero-metric { margin-top: 0 !important; }

@media (max-width: 991px) {
  .dash-head { gap: 18px; }
  .dash-head__right { width: 100%; padding: 14px 16px 16px; }
  .dash-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .dash-metrics .dash-metric:nth-child(odd) { border-left: 0; padding-left: 0; }
  .dash-metric { padding: 0 16px; }
  .dash-emblem { width: 420px; height: 420px; left: -22px; }
}

/* 17. Cartes de roles — reprises des cartes BLANCHES de Inspiration/dd.jpg
       (la carte noire du modele n'est pas retenue).
       Libelle discret en haut, valeur en gros et en gras dessous, surface
       blanche franche, sans icone : c'est la disposition du modele.
       Le balisage place la valeur avant le libelle ; plutot que de le
       reecrire, column-reverse inverse l'ordre visuel. */
.dash-role {
  display: block !important;
  padding: 18px 20px 20px !important;
  /* meme materiau que .card / .dash-chart (section 4) : translucide + flou. */
  background-color: rgba(255,255,255,.74) !important;
  backdrop-filter: blur(16px) saturate(105%);
  -webkit-backdrop-filter: blur(16px) saturate(105%);
  border: none !important;
  border-radius: var(--dash-radius) !important;
  box-shadow: var(--dash-shadow) !important;
}
.dash-role > div:first-child {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 9px;
}
/* Annule les micro-capitales de la section 5 : le modele garde une casse normale. */
.dash-role span {
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: .84rem !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  color: #5a5a5a !important;
}
.dash-role h3 {
  margin: 0 !important;
  font-size: 1.95rem !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  line-height: 1 !important;
  color: #1e1e1e !important;
}
/* Le modele ne comporte pas d'icone. */
.dash-role .dash-ico { display: none !important; }

/* 18. Ligne de tendance des cartes de roles (modele : "^ 4.2% from last month").
       Selecteurs prefixes par .dash-role et forces : la regle `.dash-role span`
       de la section 17 porte des !important (taille, graisse, couleur) et
       s'applique aussi a ces spans. Sans cela le texte repassait a .84rem,
       debordait sur deux lignes, et les couleurs semantiques etaient ecrasees.
       Le vert et le rouge du theme sont conserves : ce sont les seules teintes
       admises hors gris-noir-beige, parce qu'elles portent du sens. */
.dash-role .dash-trend {
  display: flex !important;
  align-items: center;
  gap: 5px;
  margin-top: 12px !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap;
  opacity: 1 !important;
}
.dash-role .dash-trend svg { width: 12px; height: 12px; flex: none; }
.dash-role .dash-trend b { font-weight: 700; }
.dash-role .dash-trend__note {
  font-size: .72rem !important;
  font-weight: 500 !important;
  color: #8a8a8a !important;
  margin: 0 !important;
}
.dash-role .dash-trend--up   { color: #28c76f !important; }
.dash-role .dash-trend--down { color: #ea5455 !important; }
.dash-role .dash-trend--flat { color: #9a9a9a !important; }

/* ===========================================================================
   19. Animations et pastilles de tendance
   =========================================================================== */

/* --- Entree de page : les blocs montent en fondu, en cascade. --------------
   `both` retient l'etat initial avant le demarrage, sinon un eclair de contenu
   deja en place apparait. Les delais restent courts pour ne pas donner
   l'impression que la page rame. */
@keyframes dashEnter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dashEnterEmblem {
  from { opacity: 0; transform: translateY(26px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.dash-head__left,
.dash-head__right,
.dash-strip > *,
.dash-page .dash-chart {
  animation: dashEnter .6s cubic-bezier(.22, .61, .36, 1) both;
}
.dash-head__left            { animation-delay: .02s; }
.dash-head__right           { animation-delay: .10s; }
.dash-strip > *:nth-child(1){ animation-delay: .16s; }
.dash-strip > *:nth-child(2){ animation-delay: .21s; }
.dash-strip > *:nth-child(3){ animation-delay: .26s; }
.dash-strip > *:nth-child(4){ animation-delay: .31s; }
.dash-strip > *:nth-child(5){ animation-delay: .36s; }
.dash-page .dash-chart      { animation-delay: .42s; }

.dash-emblem {
  animation: dashEnterEmblem .9s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: .12s;
}

/* --- Survol : plus vif, avec un leger agrandissement et une ombre franche.
   `will-change` evite le scintillement au premier survol. */
.card,
.dash-panel,
.dash-role,
.dash-chart,
.dash-strip .dash-hero {
  will-change: transform;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1),
              box-shadow .28s cubic-bezier(.22, .61, .36, 1),
              background-color .28s ease;
}
.card:hover,
.dash-panel:hover,
.dash-role:hover,
.dash-chart:hover {
  transform: translateY(-5px) scale(1.012);
  box-shadow: var(--dash-shadow-lg) !important;
  background-color: rgba(255,255,255,.88) !important;
}
.dash-strip .dash-hero:hover {
  transform: translateY(-5px) scale(1.012);
  box-shadow: 0 28px 60px rgba(23,23,23,.34) !important;
}
.dash-role:hover .dash-trend__pill { transform: translateY(-1px); }

/* Les glances : la fleche se detache un peu plus au survol de sa colonne. */
.dash-metric:hover .dash-metric__go {
  background: rgba(23,23,23,.62);
  transform: translate(3px, -3px) scale(1.06);
}

/* --- Pastille de tendance : le "+N" / "-X%" passe dans une puce teintee,
   au lieu d'un simple texte colore. Beaucoup plus lisible d'un coup d'oeil. */
.dash-role .dash-trend { gap: 8px; }
.dash-role .dash-trend__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  transition: transform .2s ease;
}
.dash-role .dash-trend__pill svg { width: 12px; height: 12px; }
.dash-role .dash-trend--up   .dash-trend__pill { background: rgba(24,150,84,.16);  color: #178a4d !important; }
.dash-role .dash-trend--down .dash-trend__pill { background: rgba(206,48,49,.16);  color: #c0322f !important; }
.dash-role .dash-trend--flat .dash-trend__pill { background: rgba(23,23,23,.09);   color: #6a6a6a !important; }
.dash-role .dash-trend__note { color: #7a7a7a !important; }

/* --- Respect du reglage systeme : pas d'animation si l'utilisateur la refuse. */
@media (prefers-reduced-motion: reduce) {
  .dash-head__left, .dash-head__right, .dash-strip > *,
  .dash-page .dash-chart, .dash-emblem, .dash-emblem::before {
    animation: none !important;
  }
  .card, .dash-panel, .dash-role, .dash-chart, .dash-strip .dash-hero {
    transition: none !important;
  }
  .card:hover, .dash-panel:hover, .dash-role:hover, .dash-chart:hover,
  .dash-strip .dash-hero:hover { transform: none !important; }
}

/* ===========================================================================
   20. Cartes de roles enrichies + accent GRIS FONCE
       (remplace la touche corail, jugee trop presente)
       L'accent n'apparait qu'au survol et dans l'ombrage. Il reste neutre :
       la page demeure strictement grise et noire.
   =========================================================================== */

:root {
  --accent:        #3f3f3f;               /* gris fonce */
  --accent-voile:  rgba(40, 40, 40, .10);
  --accent-ombre:  rgba(23, 23, 23, .26);
}

/* Ombrage general : neutre, sans aucune teinte. */
:root {
  --dash-shadow:    0 1px 2px rgba(23,23,23,.06), 0 16px 40px rgba(23,23,23,.13);
  --dash-shadow-lg: 0 3px 8px rgba(23,23,23,.08), 0 34px 76px rgba(23,23,23,.22);
}

/* --- Cartes de roles : plus de matiere -----------------------------------
   Liseré interieur clair pour donner une epaisseur au verre, reflet d'angle,
   filet gris fonce qui se deploie au survol. */
.dash-role {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.60), var(--dash-shadow) !important;
}

.dash-role > div:first-child { position: relative; z-index: 2; }
.dash-role .dash-trend       { position: relative; z-index: 2; }

/* Reflet d'angle permanent, tres pale : casse l'aplat uniforme.
   Au survol un voile gris tres leger vient s'y ajouter. */
.dash-role::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 100% at 100% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 46%),
    radial-gradient(120% 90%  at 100% 0%, var(--accent-voile) 0%, rgba(40,40,40,0) 58%);
  opacity: .45;
  transition: opacity .38s ease;
  pointer-events: none;
  z-index: 1;
}
.dash-role:hover::before { opacity: 1; }

/* Filet gris fonce en haut, deploye de gauche a droite au survol. */
.dash-role::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(63,63,63,.12) 100%);
  transition: width .5s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
  z-index: 3;
}
.dash-role:hover::after { width: 100%; }

.dash-role:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7),
              0 3px 8px rgba(23,23,23,.08),
              0 30px 66px var(--accent-ombre) !important;
}
/* Le libelle se fonce legerement, la valeur reste noire. */
.dash-role > div:first-child > span { transition: color .3s ease; }
.dash-role:hover > div:first-child > span { color: #3f3f3f !important; }

/* --- Les autres conteneurs : meme ombre, en plus discret ----------------- */
.card:hover,
.dash-panel:hover,
.dash-chart:hover,
.dash-head__right:hover {
  box-shadow: 0 3px 8px rgba(23,23,23,.08),
              0 30px 70px var(--accent-ombre) !important;
}

/* Bloc noir : ombre plus profonde, toujours neutre. */
.dash-strip .dash-hero:hover {
  box-shadow: 0 28px 62px rgba(23, 23, 23, .44) !important;
}

/* --- Glances : la fleche se fonce au survol de sa colonne --------------- */
.dash-metric__go { transition: background .25s ease, transform .2s ease, box-shadow .25s ease; }
.dash-metric:hover .dash-metric__go {
  background: rgba(23, 23, 23, .80);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.40),
              0 6px 16px rgba(23, 23, 23, .30);
}

/* --- Pastille de tendance : leger relief -------------------------------- */
.dash-role .dash-trend__pill {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

@media (prefers-reduced-motion: reduce) {
  .dash-role::after  { transition: none !important; }
  .dash-role::before { transition: none !important; }
}

/* ===========================================================================
   21. Barre du haut : eclatee au repos, reunie au defilement
       Sans defilement la barre elle-meme disparait et chaque element flotte
       dans son propre conteneur. Des que la page defile (classe `is-scrolled`
       posee par le script de header.php), ils se reunissent dans la barre.
   =========================================================================== */

.header-navbar.floating-nav {
  transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}

/* Les elements debordaient de 18px de chaque cote par rapport a la grille de
   contenu. Ce rembourrage les realigne exactement (verifie a 0px d'ecart). */
.header-navbar.floating-nav:not(.is-scrolled) .navbar-container {
  padding-inline: 32px;
}

.header-navbar.floating-nav:not(.is-scrolled) {
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* --- Le materiau verre --------------------------------------------------
   IMPORTANT : il est pose sur le <li> pour les elements SANS menu deroulant,
   mais sur le <a> pour ceux qui en ont un. Un ancetre portant backdrop-filter
   cree un "backdrop root" : le menu qu'il contient ne peut alors plus flouter
   la page, il ne voit que son parent. En descendant le verre d'un cran, le
   menu redevient libre de flouter le contenu derriere lui. */
.header-navbar.floating-nav:not(.is-scrolled) .navbar-nav > .nav-item:not(.dropdown),
.header-navbar.floating-nav:not(.is-scrolled) .navbar-nav > .nav-item.dropdown > .nav-link {
  padding: 11px;
  border-radius: 999px;
  background-color: rgba(255,255,255,.40);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
              inset 0 0 0 1px rgba(255,255,255,.45),
              0 2px 6px rgba(23,23,23,.05),
              0 14px 34px rgba(23,23,23,.10);
  transition: background-color .35s ease, box-shadow .35s ease,
              transform .25s cubic-bezier(.22,.61,.36,1);
}
.header-navbar.floating-nav:not(.is-scrolled) .navbar-nav > .nav-item { margin-inline: 7px; }

.header-navbar.floating-nav:not(.is-scrolled) .navbar-nav > .nav-item:not(.dropdown):hover,
.header-navbar.floating-nav:not(.is-scrolled) .navbar-nav > .nav-item.dropdown > .nav-link:hover {
  transform: translateY(-2px);
  background-color: rgba(255,255,255,.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              inset 0 0 0 1px rgba(255,255,255,.55),
              0 4px 10px rgba(23,23,23,.07),
              0 22px 46px rgba(23,23,23,.16);
}

/* Icones normalisees pour que leur conteneur soit parfaitement rond. */
.header-navbar.floating-nav:not(.is-scrolled) .nav-link-style,
.header-navbar.floating-nav:not(.is-scrolled) .menu-toggle {
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-navbar.floating-nav:not(.is-scrolled) .nav-link-style .ficon,
.header-navbar.floating-nav:not(.is-scrolled) .nav-link-style svg { width: 22px; height: 22px; }

/* Le menu utilisateur : meme rayon que le panneau des glances (--dash-radius).
   Le selecteur reprend `.nav-item.dropdown` pour atteindre 7 classes, comme la
   regle generale ci-dessus : sans cela elle l'emportait avec son rayon de 999px. */
.header-navbar.floating-nav:not(.is-scrolled) .navbar-nav > .nav-item.dropdown.dropdown-user > .nav-link {
  border-radius: var(--dash-radius);
  padding: 8px 14px 8px 18px;
}

/* --- Etat defile : la barre s'aligne sur la grille de contenu -----------
   Elle est en position:fixed avec left:104px et margin:13px, ce qui la faisait
   deborder de 39px de chaque cote. Ecart mesure constant a 1280, 1600 et 1920px,
   d'ou une correction en valeurs fixes : +39 a gauche, -78 sur la largeur. */
@media (min-width: 1200px) {
  .header-navbar.floating-nav.is-scrolled {
    margin-left: 52px !important;
    margin-right: 52px !important;
    width: calc(100% - 208px) !important;
  }
}

/* --- Etat defile : les conteneurs individuels s'effacent ---------------- */
.header-navbar.floating-nav.is-scrolled .navbar-nav > .nav-item,
.header-navbar.floating-nav.is-scrolled .navbar-nav > .nav-item.dropdown > .nav-link {
  background-color: transparent;
  box-shadow: none;
  margin-inline: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ===========================================================================
   22. Notifications — meme langage que le reste du site : verre, conteneurs
       separes, icone dans une pastille beige-gris.
   =========================================================================== */

.dropdown-notification > .nav-link {
  position: relative;
  color: #3f3f3f;
}
.notif-bell { width: 30px; height: 30px; padding: 3px; transition: transform .3s ease; }
.dropdown-notification:hover .notif-bell { transform: rotate(-12deg); }

.notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #1e1e1e;
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9);
}

/* --- Le panneau : verre, comme les cartes du tableau de bord ------------- */
.notif-menu {
  width: 372px;
  padding: 9px !important;
  border-radius: 20px !important;
  background-color: rgba(255,255,255,.40) !important;
  backdrop-filter: blur(44px) saturate(210%);
  -webkit-backdrop-filter: blur(44px) saturate(210%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55),
              0 2px 6px rgba(23,23,23,.06),
              0 30px 66px rgba(23,23,23,.22) !important;
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 11px 12px;
}
.notif-head__title { font-size: .95rem; font-weight: 700; letter-spacing: -.015em; }
.notif-head__count {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
  color: #5a5a5a;
  background: rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.5);
  border-radius: 999px;
  padding: 5px 11px;
}

.notif-list { max-height: 344px; overflow-y: auto; padding-right: 2px; }
.notif-list::-webkit-scrollbar { width: 5px; }
.notif-list::-webkit-scrollbar-thumb { background: rgba(23,23,23,.16); border-radius: 999px; }

/* --- Chaque notification est son propre conteneur ----------------------- */
.notif-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  margin-bottom: 7px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  /* Pas de backdrop-filter ici : le panneau parent en porte deja un, et un
     descendant ne peut pas flouter au-dela de ce "backdrop root". La sensation
     de verre vient donc de la translucidite, du degrade de surface et des
     liseres — le flou, lui, est deja fourni par le panneau. */
  background-image: linear-gradient(150deg, rgba(255,255,255,.62) 0%,
                                            rgba(255,255,255,.34) 46%,
                                            rgba(255,255,255,.46) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              inset 0 0 0 1px rgba(255,255,255,.45),
              0 2px 10px rgba(23,23,23,.05);
  transition: background-image .22s ease, transform .22s ease, box-shadow .22s ease;
}
.notif-item:last-child { margin-bottom: 0; }
.notif-item:hover {
  background-image: linear-gradient(150deg, rgba(255,255,255,.85) 0%,
                                            rgba(255,255,255,.58) 46%,
                                            rgba(255,255,255,.70) 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1),
              inset 0 0 0 1px rgba(255,255,255,.6),
              0 8px 22px rgba(23,23,23,.13);
  color: inherit;
}

/* Pastille beige-gris, le meme ton neutre chaud que le reste de l'interface. */
.notif-ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(196, 188, 178, .28);
  color: #5c554e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.notif-ico svg { width: 20px; height: 20px; }
.notif-ico.is-out { background: rgba(23,23,23,.07); color: #8a8a8a; }

.notif-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.notif-text {
  font-size: .82rem;
  line-height: 1.3;
  color: #4a4a4a;
}
.notif-text b { font-weight: 700; color: #1e1e1e; }

.notif-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.notif-tag {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(23,23,23,.07);
  color: #4a4a4a;
}
.notif-who  { font-size: .7rem; color: #6e6e6e; }
.notif-time { font-size: .7rem; color: #8f8f8f; }
.notif-who::after { content: "\00b7"; margin-left: 7px; color: #c4c4c4; }

.notif-empty {
  padding: 30px 20px;
  text-align: center;
  font-size: .8rem;
  color: #9a9a9a;
}

.notif-foot { padding: 10px 11px 6px; }
.notif-foot a {
  display: block;
  padding: 10px;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  color: #1e1e1e;
  text-decoration: none;
  border-radius: 12px;
  background-image: linear-gradient(150deg, rgba(255,255,255,.58), rgba(255,255,255,.34));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.45);
  transition: background-color .2s ease;
}
.notif-foot a:hover { background-image: linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,.65)); color: #000; }

.dark-layout .notif-menu { background-color: rgba(48,48,48,.72) !important; color: #d0d0d0; }
.dark-layout .notif-item { background: rgba(255,255,255,.06); }
.dark-layout .notif-item:hover { background: rgba(255,255,255,.12); }
.dark-layout .notif-text b, .dark-layout .notif-foot a { color: #f0f0f0; }

/* ===========================================================================
   23. Tableaux — d'apres Inspiration/d65bd771009693e6196287dabe496f4d.jpg
       Traits repris du modele :
         - le tableau vit dans un panneau qui porte une barre de titre
           (nom + compteur a gauche, commandes a droite) fermee par un filet ;
         - entete en bande gris tres pale, libelles courts en casse normale,
           aucun filet vertical ;
         - lignes separees par un simple filet, hauteur genereuse ;
         - pastilles en forme de gelule, tres peu contrastees ;
         - actions en boutons fantomes ronds.
       Aucune couleur nouvelle : gris / noir / beige inchanges.
   =========================================================================== */

:root {
  --tb-filet:     rgba(23,23,23,.085);   /* separateurs de lignes */
  --tb-filet-fort:rgba(23,23,23,.12);    /* encadrement de l'entete */
  --tb-entete:    rgba(23,23,23,.045);   /* bande de l'entete */
  --tb-texte:     #3d3d3d;
  --tb-libelle:   #6a6a6a;
  --tb-survol:    rgba(255,255,255,.55);
}

/* --- 23.1 Le panneau porteur -------------------------------------------
   `card--table` est posee par load.js sur la carte qui contient une table.
   Le rembourrage passe de la carte a chaque zone, pour que la barre de titre
   et la bande d'entete puissent aller d'un bord a l'autre. */
.card.card--table { padding: 0 !important; overflow: hidden; }

/* --- 23.2 Barre de titre ------------------------------------------------ */
.dt-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--tb-filet);
}
.dt-topbar__lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dt-topbar__titre {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.012em;
  color: #1e1e1e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Le compteur du modele : une petite gelule discrete accolee au titre. */
.dt-topbar__compte {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--pill);
  font-size: .68rem;
  font-weight: 700;
  color: var(--tb-libelle);
  background: rgba(23,23,23,.055);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.dt-topbar__compte svg { width: 12px; height: 12px; opacity: .55; }

.dt-topbar__ctrl {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* --- 23.3 Commandes : longueur, recherche, boutons ---------------------- */
.dt-topbar .dataTables_length,
.dt-topbar .dataTables_filter { margin: 0; }
.dt-topbar .dataTables_length label,
.dt-topbar .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .74rem;
  font-weight: 600;
  color: var(--tb-libelle);
}
.dt-topbar .dataTables_length select {
  height: 34px;
  padding: 0 26px 0 11px !important;
  border-radius: var(--ctrl-radius) !important;
  border: 1px solid var(--tb-filet-fort) !important;
  background-color: rgba(255,255,255,.55) !important;
  font-size: .78rem;
  font-weight: 600;
  color: var(--tb-texte);
}
.dt-topbar .dataTables_filter input {
  height: 34px;
  width: 210px;
  padding: 0 13px !important;
  border-radius: var(--ctrl-radius) !important;
  border: 1px solid var(--tb-filet-fort) !important;
  background-color: rgba(255,255,255,.55) !important;
  font-size: .8rem;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.dt-topbar .dataTables_filter input:focus {
  border-color: rgba(23,23,23,.32) !important;
  background-color: rgba(255,255,255,.85) !important;
  box-shadow: 0 0 0 3px rgba(23,23,23,.06) !important;
}
.dt-topbar .dt-buttons { display: flex; align-items: center; gap: 8px; margin: 0; }
.dt-topbar .dt-buttons .btn {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px !important;
  border-radius: var(--ctrl-radius) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(23,23,23,.06), 0 6px 16px rgba(23,23,23,.10) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dt-topbar .dt-buttons .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(23,23,23,.08), 0 12px 26px rgba(23,23,23,.18) !important;
}

/* --- 23.4 L'entete du tableau : une bande, pas une grille --------------- */
.card--table .card-datatable { padding: 0 6px; }

/* La structure vaut pour les deux modes ; seules les couleurs sont scindees,
   sans quoi le mode sombre gardait les micro-capitales et l'interlignage de la
   passe precedente, et les deux themes ne montraient plus le meme tableau. */
.dataTables_wrapper table.dataTable thead th {
  padding: 12px 14px !important;
  /* Le modele ecrit les intitules en casse normale, pas en micro-capitales :
     c'est ce qui donne a l'entete son air de simple ligne de reperage. */
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: .765rem !important;
  font-weight: 600 !important;
  border: none !important;
  vertical-align: middle;
}
html:not(.dark-layout) .dataTables_wrapper table.dataTable thead th {
  color: var(--tb-libelle) !important;
  background-color: var(--tb-entete) !important;
  border-top: 1px solid var(--tb-filet) !important;
  border-bottom: 1px solid var(--tb-filet) !important;
}
/* Pas de `nowrap` : l'historique compte quatorze colonnes. Un intitule tenu
   sur une seule ligne elargissait assez le tableau pour que DataTables
   Responsive replie les dernieres colonnes derriere un bouton « + ». */
.dataTables_wrapper table.dataTable thead th:first-child,
.dataTables_wrapper table.dataTable tbody td:first-child { padding-left: 20px !important; }
.dataTables_wrapper table.dataTable thead th:last-child,
.dataTables_wrapper table.dataTable tbody td:last-child { padding-right: 20px !important; }

/* Les extremites de la bande sont arrondies, comme dans le modele. */
.dataTables_wrapper table.dataTable thead th:first-child {
  border-radius: var(--dash-radius-sm) 0 0 var(--dash-radius-sm);
}
.dataTables_wrapper table.dataTable thead th:last-child {
  border-radius: 0 var(--dash-radius-sm) var(--dash-radius-sm) 0;
}
html:not(.dark-layout) .dataTables_wrapper table.dataTable thead th:first-child {
  border-left: 1px solid var(--tb-filet) !important;
}
html:not(.dark-layout) .dataTables_wrapper table.dataTable thead th:last-child {
  border-right: 1px solid var(--tb-filet) !important;
}

/* Les fleches de tri collaient au bord droit de la colonne, loin de leur
   libelle. On les ramene contre le texte et on ne les revele qu'au survol
   ou quand le tri est actif — le modele ne montre aucun ornement au repos. */
.dataTables_wrapper table.dataTable thead th.sorting,
.dataTables_wrapper table.dataTable thead th.sorting_asc,
.dataTables_wrapper table.dataTable thead th.sorting_desc { padding-right: 30px !important; }
.dataTables_wrapper table.dataTable thead th::before,
.dataTables_wrapper table.dataTable thead th::after {
  right: 12px !important;
  opacity: 0;
  transition: opacity .2s ease;
}
.dataTables_wrapper table.dataTable thead th:hover::before,
.dataTables_wrapper table.dataTable thead th:hover::after { opacity: .28 !important; }
.dataTables_wrapper table.dataTable thead th.sorting_asc::before,
.dataTables_wrapper table.dataTable thead th.sorting_desc::after { opacity: .85 !important; }
.dark-layout .dataTables_wrapper table.dataTable thead th::before,
.dark-layout .dataTables_wrapper table.dataTable thead th::after { opacity: 0 !important; }
.dark-layout .dataTables_wrapper table.dataTable thead th:hover::before,
.dark-layout .dataTables_wrapper table.dataTable thead th:hover::after { opacity: .3 !important; }
.dark-layout .dataTables_wrapper table.dataTable thead th.sorting_asc::before,
.dark-layout .dataTables_wrapper table.dataTable thead th.sorting_desc::after { opacity: .85 !important; }

/* --- 23.5 Les lignes ---------------------------------------------------- */
.dataTables_wrapper table.dataTable tbody td {
  padding: 15px 14px !important;
  font-size: .82rem;
  border: none !important;
  vertical-align: middle;
}
.dataTables_wrapper table.dataTable tbody tr:last-child td { border-bottom: none !important; }
html:not(.dark-layout) .dataTables_wrapper table.dataTable tbody td {
  color: var(--tb-texte);
  border-bottom: 1px solid var(--tb-filet) !important;
}
/* Bootstrap peint ses lignes avec une ombre interne de 9999px : c'est elle
   qu'il faut neutraliser pour que le verre de la carte reste visible. */
html:not(.dark-layout) .dataTables_wrapper table.dataTable tbody tr {
  background-color: transparent !important;
  transition: background-color .18s ease;
}
html:not(.dark-layout) .dataTables_wrapper table.dataTable tbody tr > * {
  box-shadow: none !important;
  background-color: transparent !important;
}
html:not(.dark-layout) .dataTables_wrapper table.dataTable tbody tr:hover {
  background-color: var(--tb-survol) !important;
}
/* Le surlignage de la colonne triee ajoutait une bande grise verticale :
   le modele n'a aucun filet ni fond vertical. */
.dataTables_wrapper table.dataTable tbody td.sorting_1,
.dataTables_wrapper table.dataTable tbody td.sorting_2,
.dataTables_wrapper table.dataTable tbody td.sorting_3 { background-color: transparent !important; }

/* --- 23.6 Pastilles d'etat : gelules douces ----------------------------- */
.dataTables_wrapper table.dataTable .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px !important;
  border-radius: var(--pill) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  text-transform: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

/* --- 23.7 Actions : boutons fantomes ronds ------------------------------
   Au repos tout est neutre, comme dans le modele ; la couleur d'origine de
   chaque icone (vert pour l'edition, rouge pour la suppression) ne reparait
   qu'au survol, la ou elle sert d'avertissement. */
.dataTables_wrapper table.dataTable tbody td a[class*="-record"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 1px;
  border-radius: 50%;
  color: #6e6e6e;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.dataTables_wrapper table.dataTable tbody td a[class*="-record"] svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  color: inherit;
}
.dataTables_wrapper table.dataTable tbody td a[class*="-record"]:hover {
  background-color: rgba(23,23,23,.075);
  color: #1e1e1e;
  transform: translateY(-1px);
}
.dataTables_wrapper table.dataTable tbody td a.delete-record:hover { color: #b23b3b; }

/* --- 23.8 Pied : compte et pagination ----------------------------------- */
.dt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--tb-filet);
}
.dt-foot .dataTables_info {
  padding: 0 !important;
  font-size: .74rem;
  font-weight: 600;
  color: var(--tb-libelle);
}
.dt-foot .dataTables_paginate { margin: 0 !important; padding: 0 !important; }

/* --- 23.9 Zone de filtres propre aux vues (voituriers, historique) ------
   Ces formulaires sont ecrits dans les vues, au-dessus du tableau. On les
   rattache visuellement a la barre de titre plutot que de les laisser
   flotter dans le vide. */
.card--table > form {
  padding: 13px 20px;
  margin: 0;
  border-bottom: 1px solid var(--tb-filet);
}
.card--table > form .row { margin: 0; }
.card--table > form .row > [class^="col"] { padding: 0; margin: 0 !important; }
.card--table > form label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tb-libelle);
  margin-bottom: 5px;
}

/* Le titre ecrit en dur dans la vue est replie dans la barre : load.js en
   recopie le texte, ce doublon n'a plus lieu d'etre. */
.card--table > .card-header.is-folded { display: none !important; }

/* --- 23.10 Le meme verre que le tableau de bord, sur toutes les pages ----
   Les cartes portaient un fond plat a 55 % sans lisere : sans arete claire,
   le flou ne se voyait pas et les pages autres que le tableau de bord
   paraissaient mates. On reprend exactement la matiere du panneau
   « Today at a glance » : meme opacite, meme flou, meme lisere interieur. */
html:not(.dark-layout) .card,
html:not(.dark-layout) .card.card--table {
  background-color: rgba(255,255,255,.62) !important;
  background-image: linear-gradient(150deg,
                     rgba(255,255,255,.34) 0%,
                     rgba(255,255,255,0)   52%,
                     rgba(255,255,255,.14) 100%) !important;
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), var(--dash-shadow) !important;
}
html:not(.dark-layout) .card:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), var(--dash-shadow-lg) !important;
}
/* Une carte qui contient un tableau ne doit pas se soulever au survol :
   le pointeur y circule en permanence d'une ligne a l'autre. */
html:not(.dark-layout) .card.card--table:hover { transform: none; }

/* Les en-tetes ecrits dans les vues (voituriers, presences) reprennent le
   meme filet que la barre de titre. */
html:not(.dark-layout) .card > .card-header.border-bottom {
  border-bottom: 1px solid var(--tb-filet) !important;
}

/* --- 23.11 Tableau des presences : meme chrome, couleurs conservees -----
   C'est une grille calendaire, pas une liste : le codage couleur des cellules
   porte l'information et reste intact. On n'aligne que l'entete et les filets. */
.attendance-table thead th,
.print-table thead th {
  /* Meme typographie d'entete que les tableaux de donnees : casse normale,
     petit corps, gris moyen. Le codage couleur des cellules, lui, est laisse
     intact : c'est lui qui porte l'information de presence. */
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: .765rem !important;
  font-weight: 600 !important;
}
html:not(.dark-layout) .attendance-table thead th,
html:not(.dark-layout) .print-table thead th {
  color: var(--tb-libelle) !important;
  background-color: var(--tb-entete) !important;
}
.attendance-table td { font-size: .82rem; }
html:not(.dark-layout) .attendance-table td { color: var(--tb-texte); }

/* --- 23.12 Mode sombre : on ne reprend que la structure ----------------- */
.dark-layout .dt-topbar,
.dark-layout .dt-foot { border-color: rgba(255,255,255,.09); }
.dark-layout .dt-topbar__titre { color: #f0f0f0; }
.dark-layout .dataTables_wrapper table.dataTable thead th {
  background-color: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.dark-layout .dataTables_wrapper table.dataTable tbody td {
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.dark-layout .dataTables_wrapper table.dataTable tbody tr:hover {
  background-color: rgba(255,255,255,.05) !important;
}

/* --- 23.13 Repli sans backdrop-filter ----------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:not(.dark-layout) .card,
  html:not(.dark-layout) .card.card--table { background-color: #ffffff !important; }
}

/* ===========================================================================
   24. Menu actif, miroir arabe (RTL), contrastes du mode sombre, adaptation
       aux formats. Ces quatre chantiers partagent une meme regle : le dessin
       ne change pas d'une langue, d'un theme ou d'une largeur a l'autre —
       seule la disposition suit.
   =========================================================================== */

/* --- 24.1 Page courante du menu : pastille noire -----------------------
   Le theme peignait l'entree active en gris tres clair (#f5f5f5) en LTR et en
   degrade VERT dans la version RTL — deux traitements differents pour le meme
   etat, et un vert etranger a la palette. L'icone et le libelle etaient deja
   prevus en blanc : il ne manquait que le fond. */
.main-menu.menu-light .navigation > li.active > a,
.main-menu.menu-dark  .navigation > li.active > a,
.main-menu .navigation > li.active > a {
  background: #1e1e1e !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(23,23,23,.18) !important;
}
.main-menu .navigation > li.active > a svg,
.main-menu .navigation > li.active > a i,
.main-menu .navigation > li.active > a .menu-title {
  color: #ffffff !important;
  stroke: currentColor;
}
/* Sous-menus : l'entree active y reste discrete, sinon deux pastilles noires
   se disputent le regard. */
.main-menu .navigation .menu-content > li.active > a {
  background: rgba(23,23,23,.07) !important;
  color: #1e1e1e !important;
  box-shadow: none !important;
}
.dark-layout .main-menu .navigation > li.active > a {
  background: #f0f0f0 !important;
  color: #1e1e1e !important;
}
.dark-layout .main-menu .navigation > li.active > a svg,
.dark-layout .main-menu .navigation > li.active > a i,
.dark-layout .main-menu .navigation > li.active > a .menu-title { color: #1e1e1e !important; }
.dark-layout .main-menu .navigation .menu-content > li.active > a {
  background: rgba(255,255,255,.10) !important;
  color: #f0f0f0 !important;
}

/* --- 24.2 Miroir arabe -------------------------------------------------
   En arabe, `$rtl` vaut "-rtl" : le theme charge un autre jeu de feuilles et
   `<html>` porte data-textdirection="-rtl". Toutes les regles de position que
   nous avons ecrites etaient ancrees a gauche ; elles sont ici reflechies.
   Le dessin, lui, est le meme — c'est le sens de lecture qui change. */
/* Meme reserve que du cote latin : sous 1200px le theme fait glisser le menu
   hors ecran en jouant sur `left`, un ancrage a droite l'y clouerait et le
   bouton hamburger n'aurait plus d'effet. */
@media (min-width: 1200px) {
  html[data-textdirection="-rtl"] .main-menu.menu-fixed {
    left: auto !important;
    right: 14px !important;
  }
}
html[data-textdirection="-rtl"] .menu-collapsed .app-content {
  margin-left: 0 !important;
  margin-right: 104px !important;
}
html[data-textdirection="-rtl"] .menu-collapsed .header-navbar {
  left: 0 !important;
  right: 104px !important;
  width: calc(100% - 130px) !important;
}
html[data-textdirection="-rtl"] body:not(.menu-collapsed) .app-content {
  margin-left: 0 !important;
  margin-right: 288px !important;
}
html[data-textdirection="-rtl"] body:not(.menu-collapsed) .header-navbar {
  left: 0 !important;
  right: 288px !important;
  width: calc(100% - 314px) !important;
}
@media (max-width: 1199.98px) {
  html[data-textdirection="-rtl"] .menu-collapsed .app-content,
  html[data-textdirection="-rtl"] body:not(.menu-collapsed) .app-content { margin-right: 0 !important; }
  html[data-textdirection="-rtl"] .menu-collapsed .header-navbar,
  html[data-textdirection="-rtl"] body:not(.menu-collapsed) .header-navbar {
    right: 0 !important;
    width: 100% !important;
  }
}

/* La rosace deborde du cote du texte : a droite en arabe. */
html[data-textdirection="-rtl"] .dash-emblem { left: auto; right: -46px; }
@media (max-width: 1199.98px) {
  html[data-textdirection="-rtl"] .dash-emblem { right: -22px; }
}

/* Filets de separation des metriques : ils suivent le sens de lecture. */
html[data-textdirection="-rtl"] .dash-metrics .dash-metric {
  border-left: 0;
  border-right: 1px solid rgba(23,23,23,.11);
}
html[data-textdirection="-rtl"] .dash-metrics .dash-metric:nth-child(odd) {
  border-right: 0;
  padding-right: 0;
  padding-left: 18px;
}

/* Tableaux : le premier et le dernier bord echangent leur respiration, et la
   fleche de tri passe du cote oppose au libelle. */
html[data-textdirection="-rtl"] .dataTables_wrapper table.dataTable thead th:first-child,
html[data-textdirection="-rtl"] .dataTables_wrapper table.dataTable tbody td:first-child {
  padding-left: 14px !important;
  padding-right: 20px !important;
}
html[data-textdirection="-rtl"] .dataTables_wrapper table.dataTable thead th:last-child,
html[data-textdirection="-rtl"] .dataTables_wrapper table.dataTable tbody td:last-child {
  padding-right: 14px !important;
  padding-left: 20px !important;
}
html[data-textdirection="-rtl"] .dataTables_wrapper table.dataTable thead th::before,
html[data-textdirection="-rtl"] .dataTables_wrapper table.dataTable thead th::after {
  right: auto !important;
  left: 12px !important;
}
html[data-textdirection="-rtl"] .dataTables_wrapper table.dataTable thead th.sorting,
html[data-textdirection="-rtl"] .dataTables_wrapper table.dataTable thead th.sorting_asc,
html[data-textdirection="-rtl"] .dataTables_wrapper table.dataTable thead th.sorting_desc {
  padding-right: 14px !important;
  padding-left: 30px !important;
}
html[data-textdirection="-rtl"] .dt-topbar__ctrl { margin-left: 0; margin-right: auto; }

/* Notifications et pastille du compteur. */
html[data-textdirection="-rtl"] .notif-badge { right: auto; left: 4px; }
html[data-textdirection="-rtl"] .notif-who::after { margin-left: 0; margin-right: 7px; }
html[data-textdirection="-rtl"] .notif-list { padding-right: 0; padding-left: 2px; }

/* Le menu reduit : logo et icones restent centres, quel que soit le sens. */
html[data-textdirection="-rtl"] .menu-collapsed .main-menu:not(.expanded) .navbar-brand { margin-left: 0 !important; }
html[data-textdirection="-rtl"] .menu-collapsed .main-menu:not(.expanded) .brand-logo { margin-left: 0 !important; }
html[data-textdirection="-rtl"] .main-menu .navigation > li > a > svg,
html[data-textdirection="-rtl"] .main-menu .navigation > li > a > i { margin-right: 0; margin-left: 1.1rem; }
html[data-textdirection="-rtl"] .menu-collapsed .main-menu:not(.expanded) .navigation > li > a > svg,
html[data-textdirection="-rtl"] .menu-collapsed .main-menu:not(.expanded) .navigation > li > a > i { margin: 0 !important; }

/* Menu deploye en arabe : le contenu se range a DROITE.
   Le document reste en `dir` latin — c'est la feuille `-rtl` du theme qui
   inverse, et elle ne couvre pas les entrees de menu. On pose donc le sens
   sur les liens eux-memes : l'icone passe a droite du libelle, et le tout
   s'aligne sur le bord droit. Sans `!important`, pour que la regle du mode
   reduit, qui centre les icones, continue de primer. */
html[data-textdirection="-rtl"] .main-menu .navigation > li > a,
html[data-textdirection="-rtl"] .main-menu .navigation ul.menu-content > li > a {
  direction: rtl;
  text-align: right;
  justify-content: flex-start;
}
html[data-textdirection="-rtl"] .main-menu .navigation > li > a .menu-title,
html[data-textdirection="-rtl"] .main-menu .navigation-header {
  text-align: right;
}
/* Le chevron des sous-menus n'est pas une balise mais un `::after` porteur
   d'une image de fond — chercher un `svg.feather-chevron-right` ne visait
   rien. La feuille `-rtl` du theme le deplace bien au bord gauche, mais garde
   un chevron tourne vers la DROITE, donc vers le bord : il faut le retourner
   pour qu'il pointe vers le libelle, comme en latin. Et ouvert, il doit
   descendre (+90deg) et non monter, comme le fait la feuille du theme. */
html[data-textdirection="-rtl"] .main-menu .navigation li.has-sub > a::after {
  transform: rotate(180deg) !important;
}
html[data-textdirection="-rtl"] .main-menu .navigation li.has-sub.open:not(.menu-item-closing) > a::after {
  transform: rotate(90deg) !important;
}
/* Les pastilles de comptage suivent le meme bord. */
html[data-textdirection="-rtl"] .main-menu .navigation > li > a > .badge {
  margin-left: 0 !important;
  margin-right: auto !important;
}
/* Les entrees de sous-menu : leur retrait est pose a gauche par le theme ;
   en arabe il doit venir de la droite, sinon les libelles se decalent du
   mauvais cote sous leur parent. La puce qui les precede est une balise, pas
   un `::before` : ses deux marges — le retrait cote bord, l'espace cote
   libelle — doivent etre echangees, faute de quoi la puce flotte loin du bord
   et colle a peine au texte. */
html[data-textdirection="-rtl"] .main-menu .navigation ul.menu-content > li > a {
  padding-left: 20px !important;
  padding-right: 22px !important;
}
html[data-textdirection="-rtl"] .main-menu .navigation ul.menu-content > li > a > svg,
html[data-textdirection="-rtl"] .main-menu .navigation ul.menu-content > li > a > i {
  margin-left: 10px !important;
  margin-right: 0 !important;
}

/* --- 24.3 Mode sombre : memes rapports de contraste qu'en clair ---------
   Le theme sombre n'assombrissait que les fonds : les textes gardaient leurs
   gris de mode clair et passaient sous le seuil de lisibilite. Mesure avant
   correction (contraste texte/fond, clair -> sombre) :
     chiffre d'une carte de role   15,7 -> 1,3
     libelle d'une carte de role    6,5 -> 1,9
     bouton « View history »       16,7 -> 1,0   (blanc sur blanc)
     champ de formulaire            4,8 -> 1,5
     legende des graphiques        10,1 -> 1,2
   Chaque regle ci-dessous retablit le rapport du mode clair. */

.dark-layout .dash-role h3,
.dark-layout .dash-stat h4,
.dark-layout .kpi-body h3,
.dark-layout .dash-metric__value,
.dark-layout .dash-panel-head h4,
.dark-layout .dash-chart h4 { color: #f0f0f0 !important; }

.dark-layout .dash-role span,
.dark-layout .dash-role small,
.dark-layout .dash-role p,
.dark-layout .dash-stat span,
.dark-layout .dash-stat small,
.dark-layout .dash-stat p,
.dark-layout .dash-kicker,
.dark-layout .dash-metric__label,
.dark-layout .dash-panel-head small,
.dark-layout .dash-head__kicker-title { color: #cfcfcf !important; opacity: 1; }

.dark-layout .dash-trend__note,
.dark-layout .dash-sub { color: #a8a8a8 !important; opacity: 1; }

/* Le bouton clair du bloc noir : en mode sombre son texte restait blanc,
   sur une pastille blanche. */
.dark-layout .dash-hero-cta {
  background: #f0f0f0 !important;
  color: #1e1e1e !important;
}
.dark-layout .dash-hero-cta:hover { background: #ffffff !important; color: #000 !important; }

/* Champs de saisie : le theme laissait un fond clair et un texte clair. */
.dark-layout .form-control,
.dark-layout .form-select,
.dark-layout .filter-input {
  background-color: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #e0e0e0 !important;
}
.dark-layout .form-control::placeholder,
.dark-layout .form-select::placeholder,
.dark-layout .filter-input::placeholder { color: #8a8a8a !important; }
.dark-layout .form-control:focus,
.dark-layout .form-select:focus {
  background-color: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.30) !important;
}

/* Graphiques : libelles et legendes. */
.dark-layout .apexcharts-legend-text,
.dark-layout .apexcharts-text tspan,
.dark-layout .apexcharts-xaxis text,
.dark-layout .apexcharts-yaxis text { fill: #c8c8c8 !important; color: #c8c8c8 !important; }
.dark-layout .apexcharts-gridline { stroke: rgba(255,255,255,.09) !important; }

/* Le micro-libelle du panneau des glances etait a peine visible dans les deux
   themes (contraste 2,3 en clair) : il remonte des deux cotes. */
.dash-head__kicker-note { opacity: 1; color: #8a8a8a; }
.dark-layout .dash-head__kicker-note { color: #a0a0a0 !important; }

/* Pastilles, filets et separateurs du mode sombre. */
.dark-layout .dash-metrics .dash-metric { border-color: rgba(255,255,255,.10) !important; }
.dark-layout .dash-head__kicker { border-bottom-color: rgba(255,255,255,.10) !important; }
.dark-layout .dash-metric__go { background: rgba(255,255,255,.16) !important; color: #f0f0f0 !important; }
.dark-layout .dash-metric:hover .dash-metric__go { background: rgba(255,255,255,.30) !important; }

/* --- 24.4 Tendances : plus de vert ni de rouge -------------------------
   Ces pastilles restaient les dernieres taches de couleur du tableau de bord.
   La fleche et le signe portent deja le sens ; la teinte ne fait que l'appuyer,
   et elle le fait desormais avec le noir et le beige de la palette. */
.dash-role .dash-trend--up   { color: #4a4a4a !important; }
.dash-role .dash-trend--down { color: #8a8279 !important; }
.dash-role .dash-trend--flat { color: #9a9a9a !important; }
.dash-role .dash-trend--up   .dash-trend__pill { background: rgba(23,23,23,.10);  color: #1e1e1e !important; }
.dash-role .dash-trend--down .dash-trend__pill { background: rgba(196,188,178,.34); color: #5c554e !important; }
.dash-role .dash-trend--flat .dash-trend__pill { background: rgba(23,23,23,.07);  color: #6a6a6a !important; }
.dark-layout .dash-role .dash-trend--up   .dash-trend__pill { background: rgba(255,255,255,.14); color: #f0f0f0 !important; }
.dark-layout .dash-role .dash-trend--down .dash-trend__pill { background: rgba(196,188,178,.20); color: #cfc6bb !important; }
.dark-layout .dash-role .dash-trend--flat .dash-trend__pill { background: rgba(255,255,255,.09); color: #b0b0b0 !important; }

/* Surfaces oubliees par le mode sombre. La section 11 assombrissait `.card`,
   `.dash-panel`, `.dash-role`... mais pas le panneau des glances ni les cartes
   de la page Presences : ils restaient blancs, et le texte clair qu'on vient
   d'y poser devenait invisible. Mesure : 7,1 puis 1,5 de contraste — la
   correction du texte seule avait aggrave le probleme. */
.dark-layout .dash-head__right,
.dark-layout .att-kpi:not(.att-kpi--vedette) {
  background-color: #303030 !important;
  background-image: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.30), 0 14px 38px rgba(0,0,0,.34) !important;
}
.dark-layout .att-kpi:not(.att-kpi--vedette):hover { background-color: #383838 !important; }
.dark-layout .att-kpi p { color: #cfcfcf; opacity: 1; }
.dark-layout .att-kpi h4 { color: #f0f0f0 !important; }
.dark-layout .att-kpi__ico { background: rgba(196,188,178,.18); color: #cfc6bb; box-shadow: none; }
.dark-layout .att-kpi:hover .att-kpi__ico { background: #f0f0f0; color: #1e1e1e; }
.dark-layout .att-kpi::after { background: #f0f0f0; }
/* La carte pleine est l'inverse de la surface, comme sur Analytics. */
.dark-layout .att-kpi--vedette {
  background-color: #ececec !important;
  background-image: linear-gradient(140deg, #f4f4f4 0%, #e6e6e6 100%) !important;
}
.dark-layout .att-kpi--vedette p { color: #5f5f5f; }
.dark-layout .att-kpi--vedette h4 { color: #1e1e1e !important; }
.dark-layout .att-kpi--vedette .att-kpi__ico { background: rgba(23,23,23,.10); color: #1e1e1e; }
.dark-layout .att-kpi--vedette:hover .att-kpi__ico { background: #1e1e1e; color: #fff; }
.dark-layout .att-kpi--vedette::after { background: #1e1e1e; }

/* Le theme sombre renomme la barre laterale `menu-dark` et repeint l'entree
   active avec une regle plus specifique que la notre : mesure, fond #1d1d1d et
   texte #1e1e1e, soit noir sur noir. On vise donc les deux variantes. */
.dark-layout .main-menu.menu-dark  .navigation > li.active > a,
.dark-layout .main-menu.menu-light .navigation > li.active > a,
.dark-layout .main-menu .navigation > li.active > a {
  background: #f0f0f0 !important;
  background-image: none !important;
  color: #1e1e1e !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.34) !important;
}
.dark-layout .main-menu.menu-dark .navigation > li.active > a svg,
.dark-layout .main-menu.menu-dark .navigation > li.active > a i,
.dark-layout .main-menu.menu-dark .navigation > li.active > a .menu-title { color: #1e1e1e !important; }

/* Le chiffre des glances est un <strong> sans classe : il gardait l'encre du
   mode clair sur le panneau desormais sombre. */
.dark-layout .dash-metric strong { color: #f0f0f0 !important; }

/* Menu reduit : le theme cible l'entree active avec un selecteur a sept classes
   et un !important. Les deux variantes ci-dessous reprennent la meme chaine,
   prefixee du theme : elles le depassent d'un cran et s'excluent l'une l'autre.
   Premier essai sans le prefixe : la regle du mode clair, plus specifique,
   l'emportait aussi en mode sombre — pastille noire sur menu noir. */
html:not(.dark-layout) .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation-main li.active > a,
html:not(.dark-layout) .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navigation-main li.active > a {
  background: #1e1e1e !important;
  background-image: none !important;
  color: #ffffff !important;
}
html:not(.dark-layout) .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation-main li.active > a svg,
html:not(.dark-layout) .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation-main li.active > a .menu-title {
  color: #ffffff !important;
}

.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation-main li.active > a,
.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navigation-main li.active > a {
  background: #f0f0f0 !important;
  background-image: none !important;
  color: #1e1e1e !important;
}
.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation-main li.active > a svg,
.dark-layout .vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation-main li.active > a .menu-title {
  color: #1e1e1e !important;
}

/* --- 24.5 Adaptation aux formats ---------------------------------------
   Releve des debordements horizontaux, six pages a cinq largeurs (1440, 1280,
   1024, 768, 414) : un seul cas, le panneau des glances, dont le `min-width`
   de 520px poussait la page de 137px sur un telephone. Le reste tenait deja.
   Les regles ci-dessous corrigent ce cas et resserrent ce qui se chevauchait. */

@media (max-width: 991.98px) {
  /* Le panneau des glances passe pleine largeur : sa largeur plancher n'a plus
     lieu d'etre, c'est elle qui faisait deborder la page. */
  .dash-head__right { min-width: 0 !important; flex: 1 1 100% !important; }
  .dash-head { flex-wrap: wrap; }
}

@media (max-width: 767.98px) {
  .dash-metrics { grid-template-columns: minmax(0, 1fr) !important; }
  .dash-metrics .dash-metric { border-left: 0 !important; border-right: 0 !important; padding-left: 0 !important; }
  html[data-textdirection="-rtl"] .dash-metrics .dash-metric { padding-right: 0 !important; }

  /* La barre du haut se replie sur deux lignes ; sans cet ecart ses pastilles
     recouvraient le titre de la page. */
  .header-navbar .navbar-container { flex-wrap: wrap; row-gap: 8px; }
  .header-navbar.floating-nav:not(.is-scrolled) .navbar-nav > .nav-item { margin-inline: 4px; }
  .app-content { padding-top: 118px !important; }

  /* La rosace vient chevaucher le texte des que la colonne se resserre. */
  .dash-emblem { display: none !important; }

  .dash-strip { grid-template-columns: minmax(0, 1fr) !important; }
  .dash-title { font-size: clamp(1.5rem, 7vw, 2.1rem) !important; }
}

@media (max-width: 575.98px) {
  .dash-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .dt-topbar { flex-direction: column; align-items: stretch; }
  .dt-topbar__ctrl { margin-left: 0; margin-right: 0; flex-wrap: wrap; }
  .dt-topbar .dataTables_filter input { width: 100%; }
  .dt-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .analytics-header { padding: 18px 16px; }
  .analytics-header__periode { text-align: left !important; }
  .filter-card { padding: 16px 14px; }
  .att-kpi { padding: 18px 16px; min-height: 0; }
}

/* --- 24.6 Mode sombre : verre de la barre, survol, plan de parking ------ */

/* Le verre de la barre du haut etait celui du mode clair — blanc a 40 % avec
   un lisere blanc a 85 %. Sur une page sombre, chaque pastille devenait une
   tache lumineuse. Meme matiere, mais tiree du fond au lieu d'y etre posee. */
.dark-layout .header-navbar.floating-nav:not(.is-scrolled) .navbar-nav > .nav-item:not(.dropdown),
.dark-layout .header-navbar.floating-nav:not(.is-scrolled) .navbar-nav > .nav-item.dropdown > .nav-link {
  background-color: rgba(255,255,255,.07) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09),
              0 2px 6px rgba(0,0,0,.28),
              0 14px 34px rgba(0,0,0,.34);
}
.dark-layout .header-navbar.floating-nav:not(.is-scrolled) .navbar-nav > .nav-item:not(.dropdown):hover,
.dark-layout .header-navbar.floating-nav:not(.is-scrolled) .navbar-nav > .nav-item.dropdown > .nav-link:hover {
  background-color: rgba(255,255,255,.13) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16),
              0 4px 10px rgba(0,0,0,.34),
              0 22px 46px rgba(0,0,0,.44);
}
.dark-layout .header-navbar.floating-nav.is-scrolled {
  background-color: rgba(38,38,38,.86) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 18px 44px rgba(0,0,0,.44) !important;
}
.dark-layout .notif-menu {
  background-color: rgba(40,40,40,.92) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 66px rgba(0,0,0,.5) !important;
}
.dark-layout .notif-head__count { background: rgba(255,255,255,.08); box-shadow: none; color: #b0b0b0; }
.dark-layout .notif-ico { background: rgba(196,188,178,.16); color: #cfc6bb; box-shadow: none; }
.dark-layout .notif-item {
  background-image: none;
  background-color: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.dark-layout .notif-item:hover { background-color: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.dark-layout .notif-tag { background: rgba(255,255,255,.09); color: #c0c0c0; }
.dark-layout .notif-foot a { background-image: none; background-color: rgba(255,255,255,.07); box-shadow: none; }

/* Survol des panneaux : la regle du mode clair les eclaircissait a 88 % de
   blanc — sur fond sombre la carte survolee devenait presque blanche. */
.dark-layout .card:hover,
.dark-layout .dash-panel:hover,
.dark-layout .dash-role:hover,
.dark-layout .dash-chart:hover,
.dark-layout .dash-head__right:hover {
  background-color: #3a3a3a !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.34), 0 30px 70px rgba(0,0,0,.42) !important;
}

/* --- Plan de parking : ses pages portent leurs propres fonds blancs, ecrits
   en dur dans leurs feuilles. Ils rejoignent la surface commune du mode
   sombre (#303030), releves un a un a l'ecran. */
.dark-layout .dashboard-header,
.dark-layout .floor-card,
.dark-layout .modal-content,
.dark-layout .empty-state,
.dark-layout .car-modal-content,
.dark-layout .car-timeline,
.dark-layout .properties-panel,
.dark-layout #propertiesPanel,
.dark-layout #occupancyBanner {
  background: #303030 !important;
  color: #e0e0e0 !important;
}
.dark-layout .view-toolbar,
.dark-layout #toolbar,
.dark-layout .status-legend {
  background: rgba(48,48,48,.94) !important;
  color: #e0e0e0 !important;
}
.dark-layout .view-section,
.dark-layout .editor-section {
  background: #262626 !important;
}
.dark-layout .stat-item,
.dark-layout .car-info-item,
.dark-layout .modal-footer,
.dark-layout .action-btn.btn-light,
.dark-layout .action-btn.btn-delete,
.dark-layout .drop-zoon,
.dark-layout #codexDropZoon {
  background: rgba(255,255,255,.06) !important;
  color: #d0d0d0 !important;
}
.dark-layout .loading-overlay { background: rgba(30,30,30,.88) !important; }
.dark-layout .floor-card .stat-label,
.dark-layout .status-legend span,
.dark-layout .view-section .legend-item { color: #b0b0b0 !important; }
.dark-layout #searchFloors,
.dark-layout .search-box input {
  background: rgba(255,255,255,.06) !important;
  color: #e0e0e0 !important;
  border-color: rgba(255,255,255,.12) !important;
}
.dark-layout #searchFloors::placeholder { color: #8a8a8a !important; }

/* Derniers elements clairs du plan de parking en mode sombre, releves un a un :
   titres, chiffres, vignette de plan et boutons noirs devenus invisibles. */
.dark-layout .dashboard-header h1,
.dark-layout .floor-title,
.dark-layout .stat-value { color: #f0f0f0 !important; }
.dark-layout .dashboard-header p,
.dark-layout .stat-label { color: #a0a0a0 !important; }
.dark-layout .floor-image,
.dark-layout .floor-image-placeholder,
.dark-layout .no-image {
  background: rgba(255,255,255,.05) !important;
  color: #7a7a7a !important;
}
/* Le noir d'une action principale ne se detache plus sur une page sombre :
   il s'inverse, comme la carte vedette d'Analytics. */
.dark-layout .btn-primary,
.dark-layout .btn-edit,
.dark-layout .btn-apply,
.dark-layout #toolbar button#save,
.dark-layout .view-toolbar button#editBtn {
  background: #f0f0f0 !important;
  background-image: none !important;
  color: #1e1e1e !important;
}
.dark-layout .btn-primary:hover,
.dark-layout .btn-edit:hover,
.dark-layout .btn-apply:hover { background: #ffffff !important; color: #000 !important; }
.dark-layout .floor-badge { background: #f0f0f0 !important; color: #1e1e1e !important; }

/* --- 24.7 Derniers ajustements arabes ---------------------------------- */

/* Le filet qui separe la periode du calendrier se place entre les deux
   colonnes : a gauche en lecture latine, a droite en lecture arabe. */
html[data-textdirection="-rtl"] .range.is-grille .range__bornes {
  border-left: none;
  border-right: 1px solid var(--an-filet);
  padding-left: 0;
  padding-right: 26px;
}
html[data-textdirection="-rtl"] .range.is-grille .range__borne { grid-template-columns: 42px 1fr; }
html[data-textdirection="-rtl"] .cal-zone__aide,
html[data-textdirection="-rtl"] .range__note { text-align: right; }

/* Une date en chiffres latins placee dans un paragraphe arabe est reordonnee
   par l'algorithme bidirectionnel : « 05 Aug 2026 – 03 Sept 2026 » devenait
   « Aug 2026 – 03 Sept 2026 05 ». On isole ces suites, qui se lisent de gauche
   a droite quelle que soit la langue de la page. */
#header-range-display,
.analytics-header__periode .valeur,
.range__duree,
.dash-kicker,
.cal-nav__titre,
.cal-grille__nom,
.dt-topbar__compte,
td .date-cell {
  direction: ltr;
  unicode-bidi: isolate;
}
html[data-textdirection="-rtl"] .analytics-header__periode .valeur { display: inline-block; }

/* --- 24.8 Embleme de la barre laterale ---------------------------------
   Elle affichait le favicon — l'icone d'onglet — a defaut de logo. */
.main-menu .brand-logo { display: inline-flex; align-items: center; }
.main-menu .brand-embleme {
  height: 54px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
/* Un peu d'air au-dessus : l'embleme etait colle au bord haut de la barre. */
.main-menu .navbar-header { padding-top: 12px; }
/* Menu reduit : l'embleme occupe toute la colonne d'icones, centre. */
.menu-collapsed .main-menu:not(.expanded) .brand-embleme { height: 48px; }
.menu-collapsed .main-menu:not(.expanded) .brand-logo { margin: 0 auto !important; }
/* L'embleme est gris-bleu : sur la barre sombre il s'eteint, on l'eclaircit
   sans le denaturer. */
.dark-layout .main-menu img.brand-embleme { filter: brightness(1.55) saturate(.4); }

/* Le mot-symbole, a cote de l'embleme. C'est une silhouette en alpha peinte
   par le CSS (mask + currentColor) et non une image coloree : elle prend donc
   la couleur du texte de la barre, en theme clair comme en sombre, sans
   deuxieme fichier ni filtre a regler. Le chemin est relatif a cette feuille,
   pour rester juste ou que l'application soit montee.
   Il vit dans le <h1> de .navbar-brand, que la regle de repli (section plus
   haut) masque deja : le mot n'apparait donc que barre ouverte. */
.main-menu .brand-embleme--encre {
  background-color: currentColor;
  -webkit-mask: var(--brand-embleme, url("../images/logo-lakhwiya.png")) no-repeat center / contain;
  mask: var(--brand-embleme, url("../images/logo-lakhwiya.png")) no-repeat center / contain;
  aspect-ratio: var(--brand-embleme-ratio, 1);
  width: auto;
}

/* L'encre de la marque : un gris un peu plus doux que le noir du texte en
   theme clair, pour que l'embleme et le mot ne pesent pas plus que le menu.
   En theme sombre ils restent blancs, sur le fond sombre de la barre.
   L'embleme et le mot lisent tous deux cette couleur par currentColor. */
.main-menu .navbar-brand            { color: #4d4d4d; }
.dark-layout .main-menu .navbar-brand { color: #ffffff; }

/* Le <h1> portait sa propre couleur (#777) heritee du theme : le mot ressortait
   plus pale que l'embleme, alors que sur le logo officiel les deux sont du meme
   ton. Il suit maintenant la couleur du lien de marque, comme l'embleme. */
.main-menu .navbar-brand h1 { color: inherit; }

.main-menu .brand-mot {
  display: block;
  /* Height is per site (sites.php 'wordmark_height', 28px by default). */
  height: var(--brand-mot-height, 28px);
  /* Width follows the file's own proportions: a wide lockup is not squeezed
     into the square-ish box the Lekhwiya wordmark happens to need. */
  width: calc(var(--brand-mot-height, 28px) * var(--brand-mot-ratio, 2.16));
  max-width: 100%;
  background-color: currentColor;
  -webkit-mask: var(--brand-mot, url("../images/mot-lakhwiya.png")) no-repeat left center / contain;
  mask: var(--brand-mot, url("../images/mot-lakhwiya.png")) no-repeat left center / contain;
}
/* Sites without a wordmark file show the company name as text instead. */
.main-menu .brand-nom {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 28px;
  white-space: nowrap;
}
html[data-textdirection="-rtl"] .main-menu .brand-mot {
  -webkit-mask-position: right center;
  mask-position: right center;
}

/* --- 24.9 Barre du haut en arabe : meme alignement qu'en latin ---------
   Au repos, le rembourrage de 32px herite du mode latin donnait deja le bon
   resultat : elements de 52 a 1284, exactement les bornes de `.dash-head` et
   `.dash-strip`. (Un premier reglage a 18px avait ete deduit d'une mauvaise
   reference — une colonne de grille, plus large que les blocs de contenu.)

   L'etat defile, lui, etait bien decale : elements de -5 a 1263. La regle
   latine (`margin: 52px`, largeur `calc(100% - 208px)`) est ecrite pour un
   ancrage a gauche, et la largeur de l'etat replie — posee en !important plus
   haut — l'emportait. Les valeurs ci-dessous sont deduites de la geometrie :
   bord droit = 1440 - 83 - 52 = 1305, largeur = 100% - 166px, ce qui place les
   elements a 52 et 1284 apres les 14px de rembourrage et les 7px de marge. */
@media (min-width: 1200px) {
  html[data-textdirection="-rtl"] .menu-collapsed .header-navbar.floating-nav.is-scrolled,
  html[data-textdirection="-rtl"] .header-navbar.floating-nav.is-scrolled {
    left: auto !important;
    right: 83px !important;
    width: calc(100% - 166px) !important;
    margin-left: 52px !important;
    margin-right: 52px !important;
  }
}

/* Barre defilee en latin. La correction posee en section 21 (`margin: 52px`,
   largeur `calc(100% - 208px)`) avait ete verifiee contre une reference trop
   large : mesure refaite contre `.dash-strip`, les elements etaient rentres de
   21px de chaque cote. Les memes valeurs que du cote arabe les y ramenent. */
@media (min-width: 1200px) {
  html:not([data-textdirection="-rtl"]) .header-navbar.floating-nav.is-scrolled {
    margin-left: 31px !important;
    margin-right: 31px !important;
    width: calc(100% - 166px) !important;
  }
}

/* --- 24.10 Barre du haut quand la barre laterale est deployee -----------
   Les regles precedentes ne decrivaient que l'etat replie. Deployee, la barre
   laterale occupe 260px et la barre du haut debordait le contenu : mesure a
   1440px, sa boite allait de 288 a 1412 pour un contenu s'arretant a 1388.
   Les quatre valeurs ci-dessous ont ete reglees a la mesure, etat par etat,
   jusqu'a 0 d'ecart de chaque cote — la deduction seule ne suffisait pas, les
   marges du theme ne s'appliquant pas de la meme facon selon l'etat. */
@media (min-width: 1200px) {
  html:not([data-textdirection="-rtl"]) body:not(.menu-collapsed) .header-navbar {
    left: 273px !important;
    right: auto !important;
    width: calc(100% - 286px) !important;
  }
  html[data-textdirection="-rtl"] body:not(.menu-collapsed) .header-navbar {
    /* 301 et non 288 : a 288 la barre etait decalee de 13px vers le menu. */
    right: 301px !important;
    left: auto !important;
    width: calc(100% - 314px) !important;
  }
  /* Etat defile : la barre se detache des bords, comme lorsque le menu est
     replie, mais en partant du bord du menu deploye. */
  html:not([data-textdirection="-rtl"]) body:not(.menu-collapsed) .header-navbar.floating-nav.is-scrolled {
    left: 260px !important;
    margin-left: 31px !important;
    margin-right: 31px !important;
    width: calc(100% - 322px) !important;
  }
  html[data-textdirection="-rtl"] body:not(.menu-collapsed) .header-navbar.floating-nav.is-scrolled {
    right: 288px !important;
    left: auto !important;
    margin-left: 31px !important;
    margin-right: 31px !important;
    width: calc(100% - 350px) !important;
  }
}

/* ===========================================================================
   25. Barres : alignement du logo, arrondis, et verre a la demande
   =========================================================================== */

@media (min-width: 1200px) {

  /* --- 25.1 Le logo se cale sur la colonne d'icones --------------------
     L'entete du menu gardait la largeur du menu DEPLOYE (260px) alors que la
     barre n'en fait que 76 : le logo se centrait donc sur 260 et retombait
     9px a droite des icones. On le centre sur la largeur reelle. */
  .menu-collapsed .main-menu:not(.expanded) .navbar-header {
    width: 100% !important;
    padding-inline: 0 !important;
  }
  /* `me-auto` sur le premier element poussait le bouton de repli au bord et
     plaquait le logo tout a gauche. Neutralise, la rangee se centre. */
  .menu-collapsed .main-menu:not(.expanded) .navbar-header .navbar-nav {
    justify-content: center !important;
  }
  .menu-collapsed .main-menu:not(.expanded) .navbar-header .nav-item.me-auto {
    margin-right: 0 !important;
  }

  /* --- 25.2 Menu reduit : arrondi au maximum ---------------------------
     La barre fait 76px de large ; un rayon de 38 en fait une pilule pleine.
     Deploye, elle reprend le rayon des panneaux — d'ou la transition, qui
     evite que le coin saute au survol. */
  .main-menu.menu-fixed {
    transition: border-radius .28s cubic-bezier(.22,.61,.36,1),
                width .28s cubic-bezier(.22,.61,.36,1);
  }
  .menu-collapsed .main-menu:not(.expanded) {
    border-radius: 38px !important;
  }
}

/* --- 25.3 Barre du haut au defilement : pilule de verre ------------------
   Au repos, du VERRE et non une vitre : le fond reste leger mais le flou
   suffit a dissoudre ce qui passe dessous, sinon les libelles de la barre se
   melangeaient au contenu de la page. Au survol, le verre s'epaissit — fond
   plus dense, flou plus large — quand on vient s'en servir.
   Le liset clair en haut est ce qui fait lire une epaisseur plutot qu'un
   simple voile. */
.header-navbar.floating-nav.is-scrolled {
  border-radius: 999px !important;

  /* Ce qui fait le verre n'est pas le flou, c'est ce qui l'accompagne.
     Un degre de flou modere suffit a dissoudre le fond ; le reste vient de
     trois choses :
       - un degrade au lieu d'un aplat, plus clair aux bords qu'au centre —
         c'est le reflet du ciel sur une surface bombee ;
       - la saturation poussee et un soupcon de luminosite dans le filtre :
         une vitre teinte et eclaircit ce qu'elle laisse passer ;
       - un cerne clair d'un pixel a l'interieur, qui donne l'epaisseur.
     Le cerne est pose en ombre interne et non en bordure, pour ne pas
     ajouter deux pixels a la hauteur de la barre. */
  background-color: rgba(255,255,255,.26) !important;
  background-image: linear-gradient(157deg,
                      rgba(255,255,255,.42) 0%,
                      rgba(255,255,255,.10) 48%,
                      rgba(255,255,255,.28) 100%) !important;
  backdrop-filter: blur(12px) saturate(165%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(11px) saturate(165%) brightness(1.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55),
              inset 0 1px 0 rgba(255,255,255,.9),
              inset 0 -1px 0 rgba(255,255,255,.22),
              0 8px 26px rgba(23,23,23,.10) !important;
  transition: background-color .3s ease, background-image .3s ease,
              box-shadow .3s ease,
              backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
}

.header-navbar.floating-nav.is-scrolled:hover,
.header-navbar.floating-nav.is-scrolled:focus-within {
  background-color: rgba(255,255,255,.52) !important;
  background-image: linear-gradient(157deg,
                      rgba(255,255,255,.50) 0%,
                      rgba(255,255,255,.20) 48%,
                      rgba(255,255,255,.36) 100%) !important;
  backdrop-filter: blur(20px) saturate(175%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(175%) brightness(1.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7),
              inset 0 1px 0 rgba(255,255,255,1),
              inset 0 -1px 0 rgba(255,255,255,.3),
              var(--dash-shadow) !important;
}

.dark-layout .header-navbar.floating-nav.is-scrolled {
  background-color: rgba(38,38,38,.30) !important;
  background-image: linear-gradient(157deg,
                      rgba(255,255,255,.10) 0%,
                      rgba(255,255,255,.02) 48%,
                      rgba(255,255,255,.06) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10),
              inset 0 1px 0 rgba(255,255,255,.16),
              0 8px 26px rgba(0,0,0,.30) !important;
}
.dark-layout .header-navbar.floating-nav.is-scrolled:hover,
.dark-layout .header-navbar.floating-nav.is-scrolled:focus-within {
  background-color: rgba(38,38,38,.62) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14),
              inset 0 1px 0 rgba(255,255,255,.2),
              0 12px 32px rgba(0,0,0,.38) !important;
}

/* --- 26. Mention de copyright : une signature, pas une phrase -------------
   Le theme la sert au corps du texte courant (1rem), ce qui la met au meme
   rang que le contenu alors qu'elle n'a jamais a etre lue. Elle passe donc a
   l'echelle des micro-mentions deja employees ailleurs dans l'interface —
   pastilles d'etat, legendes de graphiques — et s'eclaircit d'autant. */
.footer.footer-static p,
.footer.footer-static p span {
  font-size: .68rem;
  line-height: 1.5;
  letter-spacing: .02em;
  color: rgba(23, 23, 23, .42);
}
.dark-layout .footer.footer-static p,
.dark-layout .footer.footer-static p span {
  color: rgba(255, 255, 255, .34);
}

/* L'ecran de connexion porte la meme mention sur le panneau sombre : elle y
   etait deja en micro-capitales, on l'aligne d'un cran plus bas encore pour
   que les deux se ressemblent. */
.cx-marque__pied {
  font-size: .54rem;
}



/* En arabe, les icones gardent leur propre police.
   La regle de police plus haut vise `html[data-textdirection="-rtl"] body *`,
   plus lourde que le `.fas` de FontAwesome : en arabe la fonte arabe passait
   devant la fonte d'icones et les glyphes tombaient en rectangles vides. En
   anglais `body *` perdait contre `.fas`, d'ou un bug qui n'existait que dans
   une langue. On rend leur famille aux icones, avec un selecteur au moins
   aussi lourd. */
html[data-textdirection="-rtl"] body [class*="fa-"],
html[lang="ar"] body [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
}
html[data-textdirection="-rtl"] body .fab,
html[lang="ar"] body .fab {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands";
}

/* Menu lateral : une seule boite pour deux jeux d'icones.
   Le menu melange Tabler (24 px, une marge de chaque cote) et Feather (20 px,
   marge du seul cote texte) : la colonne d'icones se decalait d'une entree a
   l'autre, ce qui saute aux yeux en arabe ou elle borde le texte. Meme boite
   et meme marge logique, donc alignees dans les deux sens de lecture. */
html body .main-menu .navigation > li > a > svg,
html body .main-menu .navigation > li > a > i {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    flex: 0 0 20px;
    margin-inline-start: 0 !important;
    margin-inline-end: 1.1rem !important;
}

/* Rail replie : le logo se centre comme les icones.
   Le `li` du logo porte `.me-auto` (marge de fin automatique) : en anglais
   elle pousse vers la droite, en arabe vers la gauche, et le logo finissait
   colle au bord du rail au lieu de coiffer la colonne d'icones. Quand le menu
   est reduit — et pas pendant l'ouverture au survol — on annule ces marges. */
body.menu-collapsed .main-menu:not(.expanded) .navbar-header ul {
    justify-content: center !important;
}
body.menu-collapsed .main-menu:not(.expanded) .navbar-header ul > li.nav-item,
body.menu-collapsed .main-menu:not(.expanded) .navbar-header .navbar-brand {
    margin: 0 !important;
}

/* Mode sombre : les details que le theme a oublies.
   Quatre choses restaient claires ou trop pales sur fond sombre — la barre
   d'outils des tableaux, le champ de recherche (fond blanc a 55 %, texte
   gris : illisible), le titre de la legende de la carte, et les barres de
   defilement natives. */
html.dark-layout .dataTables_wrapper label,
html.dark-layout .dataTables_wrapper .dataTables_length,
html.dark-layout .dataTables_wrapper .dataTables_info {
    color: #b3b9c1;
}
html.dark-layout .dataTables_wrapper .dataTables_filter input,
html.dark-layout .dataTables_wrapper .dataTables_length select {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #e9ecf0;
}
html.dark-layout .dataTables_wrapper .dataTables_filter input:focus,
html.dark-layout .dataTables_wrapper .dataTables_length select:focus {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .3);
}
html.dark-layout .dataTables_wrapper .paginate_button,
html.dark-layout .dataTables_wrapper .paginate_button a {
    color: #c3c9d1 !important;
}
html.dark-layout .dataTables_wrapper .paginate_button.disabled,
html.dark-layout .dataTables_wrapper .paginate_button.disabled a {
    color: #767c85 !important;
}
html.dark-layout ::placeholder { color: #8b929b; opacity: 1; }

/* La legende de la carte vivante gardait un titre gris fonce sur son propre
   panneau sombre : il disparaissait completement. */
html.dark-layout .status-legend h4,
html.dark-layout .status-legend .legend-title {
    color: #e9ecf0;
}

/* Barres de defilement : celle du tableau de presence tranchait en blanc. */
html.dark-layout * { scrollbar-color: rgba(255, 255, 255, .22) rgba(255, 255, 255, .04); }
html.dark-layout ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark-layout ::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); }
html.dark-layout ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
html.dark-layout ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); background-clip: content-box; }