/* ==========================================================================
   CALIGEST V3 : Liste des instruments
   Feuille de style principale (Bootstrap 5.3.8 en surcouche)
   ========================================================================== */

:root{
  --cg-font:"Barlow","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --cg-font-cond:"Barlow Condensed","Barlow","Segoe UI",sans-serif;

  --cg-primary:#1668e0;
  --cg-primary-600:#125cc9;
  --cg-primary-soft:#eaf1fd;
  --cg-primary-soft-bd:#a9c7f4;
  --cg-link:#1259c8;

  --cg-app-bg:#eef2f7;
  --cg-surface:#ffffff;

  --cg-navy:#0a2450;
  --cg-navy-2:#0d2d63;
  --cg-navy-3:#123c80;

  --cg-ink:#16233a;
  --cg-text:#344052;
  --cg-muted:#5f6b78;
  --cg-muted-2:#6a7686;

  --cg-line:#d8dfe8;
  --cg-line-2:#e6ebf2;
  --cg-field:#ccd4e0;

  --cg-green-bg:#d8f4e3;   --cg-green-tx:#12703f;
  --cg-orange-bg:#fce9cb;  --cg-orange-tx:#96580a;
  --cg-red-bg:#fbdcdc;     --cg-red-tx:#b92222;
  --cg-blue-bg:#d7e5fd;    --cg-blue-tx:#1746be;
  --cg-grey-bg:#dfe5ed;    --cg-grey-tx:#404b5c;

  --cg-date-warn:#a95c08;
  --cg-date-danger:#d21c1c;
  --cg-row-alert:#fcefef;

  --cg-bar-h:68px;      /* barre de navigation, qui héberge aussi la recherche */
  --cg-header-h:68px;   /* sert aux calages du volet et du contenu */
  --cg-sidebar-w:288px;

  /* volet de navigation : aplat de couleur, dans l’esprit du bandeau */
  --cg-side-bg:#1f2b47;
  --cg-side-bg-2:#182238;
  --cg-side-line:rgba(255,255,255,.16);
  --cg-side-text:#f2f5fb;
  --cg-side-muted:#b9c6de;
  --cg-side-active:#111a2e;
  --cg-side-accent:#7fb2f7;
  --cg-radius:8px;
}

*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

body{
  font-family:var(--cg-font);
  font-size:13px;
  font-weight:400;
  color:var(--cg-text);
  background:var(--cg-app-bg);
  overflow-x:hidden;
}

a{ text-decoration:none; }

/* Composants Bootstrap : alignés sur la graisse de base */
.form-control,.form-select,.dropdown-item{ font-weight:400; }
.btn{ --bs-btn-font-weight:500; }
::placeholder{ font-weight:400; }

/* ==========================================================================
   1. EN-TÊTE
   ========================================================================== */
.app-header{
  position:sticky; top:0; z-index:1030;
  height:var(--cg-header-h);
  background:linear-gradient(90deg,var(--cg-navy) 0%,var(--cg-navy-2) 58%,var(--cg-navy-3) 100%);
}
.app-header::after{        /* trame de points décorative à droite */
  content:"";
  position:absolute; inset:0 0 0 auto;
  width:34%;
  background-image:radial-gradient(rgba(255,255,255,.20) 1.2px,transparent 1.3px);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 45%);
  mask-image:linear-gradient(90deg,transparent 0,#000 45%);
  pointer-events:none;
}
.app-header__inner{
  position:relative; z-index:1;
  height:var(--cg-bar-h);
  display:flex; align-items:center; gap:18px;
  padding:0 22px;
}

.btn-burger{
  border:0; background:transparent; color:#fff;
  font-size:22px; line-height:1; padding:4px 6px; border-radius:6px;
}
.btn-burger:hover{ background:rgba(255,255,255,.12); }

/* --- Recherche multi-critères : dans la barre, s’élargit au focus --- */
.global-search{
  position:relative; z-index:2;
  flex:0 1 300px; min-width:170px;
  display:flex; align-items:center;
  height:36px; border-radius:8px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32);
  transition:flex-basis .22s ease,background-color .15s ease,border-color .15s ease;
}
.global-search:hover{ background:rgba(255,255,255,.2); }
.global-search:focus-within{
  flex-basis:540px;
  background:#fff; border-color:#fff;
  box-shadow:0 0 0 3px rgba(127,178,247,.45);
}
.global-search__ico{ flex:none; margin:0 0 0 11px; font-size:14px; color:#dbe6f8; }
.global-search:focus-within .global-search__ico{ color:#5a6472; }
.global-search__input{
  flex:1 1 auto; min-width:0; height:100%;
  border:0; outline:0; background:transparent;
  padding:0 10px; font:inherit; font-size:13px; color:#fff;
}
.global-search__input::placeholder{ color:#c8d6ec; }
.global-search:focus-within .global-search__input{ color:var(--cg-ink); }
.global-search:focus-within .global-search__input::placeholder{ color:#7b8695; }
.global-search__input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.global-search__clear{
  flex:none; width:22px; height:22px; margin-right:4px; padding:0;
  border:0; border-radius:50%; background:rgba(255,255,255,.28); color:#fff; font-size:9px;
  display:flex; align-items:center; justify-content:center;
}
.global-search:focus-within .global-search__clear{ background:#e7ecf3; color:#414c5b; }
.global-search__clear:hover{ background:#d6dfea; color:var(--cg-ink); }
.global-search__clear[hidden]{ display:none; }
.global-search__kbd{
  flex:none; margin-right:7px; padding:2px 6px;
  border:1px solid rgba(255,255,255,.35); border-radius:4px; background:rgba(255,255,255,.12);
  font:600 10.5px/1.2 var(--cg-font); color:#dbe6f8;
}
.global-search:focus-within .global-search__kbd{ display:none; }
/* le bouton n’apparaît qu’au focus : au repos, le champ reste compact */
.global-search__btn{
  display:none; flex:none; height:28px; margin:0 3px 0 0; padding:0 13px;
  border:0; border-radius:6px; background:var(--cg-primary); color:#fff;
  font:600 12.5px/1 var(--cg-font); white-space:nowrap;
}
.global-search:focus-within .global-search__btn{ display:inline-flex; align-items:center; }
.global-search__btn:hover{ background:var(--cg-primary-600); }
/* Pendant la saisie, le bloc COFRAC s’efface pour laisser le champ s’élargir
   sur les largeurs intermédiaires ; il revient dès que le focus est perdu. */
@media (min-width:992px){
  .app-header__inner:has(.global-search:focus-within) .cofrac{ display:none!important; }
}

/* --- Logo --- */
.brand{ display:block; line-height:1; flex:none; }
.brand__title{
  display:block;
  font-size:21px; font-weight:900; letter-spacing:.045em; color:#fff;
}
.brand__title em{ font-style:normal; color:#f5a623; font-weight:900; }
.brand__sub{
  display:flex; align-items:center; gap:6px;
  margin-top:5px;
  font-size:9px; font-weight:700; letter-spacing:.22em; color:#adc1de;
}
.brand__rule{ flex:1 1 auto; height:1px; background:rgba(147,170,205,.45); min-width:10px; }

.header-divider{ width:1px; height:38px; background:rgba(255,255,255,.18); flex:none; }

/* --- COFRAC --- */
.cofrac{ display:flex; align-items:center; gap:10px; flex:none; }
.cofrac__icon{ font-size:22px; color:#cfdcee; }
.cofrac__txt{ display:flex; flex-direction:column; line-height:1.35; }
.cofrac__t1{ font-size:12px; font-weight:800; color:#fff; }
.cofrac__t2{ font-size:10.5px; color:#b3c6e0; }
.cofrac--stacked{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); }

/* --- Navigation --- */
.app-nav{ margin:0 auto 0 26px; }
.app-nav__list{
  display:flex; align-items:center; gap:3px;
  list-style:none; margin:0; padding:0;
}
.app-nav__list > li > a{
  display:flex; align-items:center; gap:8px;
  height:38px; padding:0 12px; border-radius:9px;
  font-size:13px; font-weight:600; color:#fff;
  white-space:nowrap; transition:background-color .15s ease,color .15s ease;
}
.app-nav__list > li > a i{ font-size:15px; opacity:.95; }
.app-nav__list > li > a:hover{ background:rgba(255,255,255,.12); color:#fff; }
.app-nav__list > li > a.is-active{
  background:#fff; color:var(--cg-primary); font-weight:700;
  box-shadow:0 2px 6px rgba(4,20,50,.25);
}

/* --- Utilisateur --- */
.user-box{ flex:none; margin-left:14px; }
.user-box__link{ display:flex; align-items:center; gap:11px; }
.user-box__avatar{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  color:#fff; font-size:17px;
}
.user-box__txt{ display:flex; flex-direction:column; line-height:1.3; }
.user-box__name{ font-size:13px; font-weight:800; color:#fff; }
.user-box__org{ font-size:11px; color:#b3c6e0; letter-spacing:.02em; }

.header-caret{
  position:absolute; right:16px; bottom:4px;
  border:0; background:transparent; color:#c3d3ea; font-size:12px; line-height:1;
  padding:2px 4px;
}
.header-caret:hover{ color:#fff; }

/* Sous-menus de la navigation */
.app-nav__list .dropdown{ position:relative; }
.app-nav__list > li > a.show{ background:rgba(255,255,255,.12); color:#fff; }
.app-nav__list > li > a.is-active.show{ background:#fff; color:var(--cg-primary); }
.app-nav__menu{
  --bs-dropdown-min-width:238px;
  margin-top:7px;
}
.dropdown-item{ display:flex; align-items:center; gap:9px; }
.app-nav__menu .dropdown-item{ white-space:nowrap; }
.dropdown-item i{ font-size:13px; width:16px; flex:none; text-align:center; color:#5f6b78; }
.dropdown-item:hover i,.dropdown-item.active i,.dropdown-item:active i{ color:inherit; }

/* Offcanvas (mobile) de la navigation */
.app-nav.offcanvas-lg{ background:var(--cg-navy-2); color:#fff; }
.app-nav .offcanvas-header .offcanvas-title{ font-weight:900; letter-spacing:.04em; }
.app-nav .offcanvas-header .offcanvas-title em{ font-style:normal; color:#f5a623; }
@media (max-width:991.98px){
  .app-nav__list{ flex-direction:column; align-items:stretch; gap:4px; }
  .app-nav__list > li > a{ height:44px; border-radius:8px; }
}

/* ==========================================================================
   2. STRUCTURE
   ========================================================================== */
.app-body{
  position:relative;
  display:flex; align-items:flex-start;
  min-height:calc(100vh - var(--cg-header-h));
}

/* ==========================================================================
   3. BARRE LATÉRALE : aplat de couleur, filtre, onglets, arborescence
   ========================================================================== */
.app-sidebar{
  --bs-offcanvas-width:320px;
  flex:0 0 var(--cg-sidebar-w);
  width:var(--cg-sidebar-w);
  align-self:stretch;
  color:var(--cg-side-text);
  background:var(--cg-side-bg);
}
.app-sidebar .app-sidebar__body{
  display:flex; flex-direction:column;
  height:100%; min-height:0;
  padding:14px 12px 0;
  overflow:hidden;
}
@media (min-width:992px){
  /* Bootstrap impose background-color:transparent!important sur .offcanvas-lg
     au-delà de ce point : seul !important permet de garder l’aplat. */
  .app-sidebar.offcanvas-lg{ background-color:var(--cg-side-bg)!important; }
  .app-sidebar{ position:sticky; top:var(--cg-header-h); height:calc(100vh - var(--cg-header-h)); }
}
.app-sidebar .offcanvas-header{ color:#fff; }
.app-sidebar .offcanvas-header .offcanvas-title{ font-weight:700; }

/* Logo, en tête du volet sur grand écran */
/* sur une seule ligne : « CALIGEST V3 | LOGICIEL GMM », pour économiser la hauteur */
.side-brand{
  flex-direction:row; align-items:baseline; gap:10px;
  padding:2px 4px 10px; margin-bottom:2px;
  border-bottom:1px solid var(--cg-side-line);
  line-height:1; text-decoration:none;
}
.side-brand .brand__title{ font-size:20px; }
.side-brand .brand__sub{
  margin-top:0; gap:0; padding-left:10px;
  border-left:1px solid rgba(255,255,255,.35);
  font-size:9px; letter-spacing:.18em; white-space:nowrap;
}
.side-brand .brand__rule{ display:none; }
.side-brand + .side-all{ margin-top:8px; }

/* Entrée épinglée « Tout le parc » */
.side-all{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; margin-bottom:10px;
  border:1px solid rgba(255,255,255,.38); border-radius:10px;
  background:rgba(255,255,255,.14); color:#fff;
}
.side-all:hover{ background:rgba(255,255,255,.22); color:#fff; }
.side-all.is-active{ background:rgba(255,255,255,.26); border-color:rgba(255,255,255,.6); }
.side-all i{ font-size:16px; color:#cfe0fa; }
.side-all__label{ flex:1 1 auto; font-size:14px; font-weight:500; }
.side-all__count{
  font:600 13px/1 var(--cg-font-cond); letter-spacing:.03em;
  color:#cfe0fa; font-variant-numeric:tabular-nums;
}

/* Filtre */
.side-filter{
  display:flex; align-items:center; gap:8px;
  padding:0 10px; height:38px; margin-bottom:10px;
  border:1px solid rgba(255,255,255,.28); border-radius:9px;
  background:rgba(0,0,0,.18);
}
.side-filter:focus-within{ border-color:var(--cg-side-accent); box-shadow:0 0 0 3px rgba(127,178,247,.28); }
.side-filter > i{ font-size:13px; color:#b9c6de; flex:none; }
.side-filter__input{
  flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-size:13.5px; color:#fff;
}
.side-filter__input::placeholder{ color:#b9c6de; }
.side-filter__input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.side-filter__clear{
  flex:none; width:18px; height:18px; padding:0;
  border:0; border-radius:50%; background:rgba(255,255,255,.26); color:#fff; font-size:8px;
  display:flex; align-items:center; justify-content:center;
}
.side-filter__clear:hover{ background:rgba(255,255,255,.42); }
.side-filter__clear[hidden]{ display:none; }

/* Onglets Instruments / Secteurs (segment) */
.side-seg{
  display:flex; gap:4px; padding:3px; margin-bottom:12px;
  border-radius:10px; background:rgba(0,0,0,.18);
}
.side-seg__btn{
  flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 4px; border:0; border-radius:8px; background:transparent;
  font-size:13.5px; font-weight:500; color:#dbe6f8;
}
.side-seg__btn:hover{ background:rgba(255,255,255,.14); color:#fff; }
.side-seg__btn.is-active{ background:#fff; color:var(--cg-side-bg); font-weight:600; }
.side-seg__btn:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--cg-side-accent); }
.side-seg__badge{
  padding:2px 5px; border-radius:5px;
  font:600 11px/1 var(--cg-font-cond); letter-spacing:.02em;
  background:rgba(255,255,255,.2); color:#fff; font-variant-numeric:tabular-nums;
}
.side-seg__btn.is-active .side-seg__badge{ background:#e4eefd; color:var(--cg-side-bg); }

/* En-tête de liste + bascule parents/enfants */
.side-listhead{
  display:flex; align-items:center; gap:8px;
  padding:2px 8px 6px;
}
.side-listhead__label{
  font:600 11px/1 var(--cg-font-cond); letter-spacing:.16em; text-transform:uppercase;
  color:#cfe0fa;
}
.side-listhead__meta{
  margin-left:auto; font-size:11px; letter-spacing:.04em; color:#cfe0fa;
  font-variant-numeric:tabular-nums;
}
.side-listhead__toggle{
  width:22px; height:22px; padding:0; border:0; border-radius:6px;
  background:transparent; color:#cfe0fa; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.side-listhead__toggle:hover,.side-listhead__toggle[aria-pressed="true"]{ background:rgba(255,255,255,.16); color:#fff; }

/* Liste défilante */
.side-list{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  margin:0 -4px; padding:0 4px 18px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent;
}
.side-list::-webkit-scrollbar{ width:9px; }
.side-list::-webkit-scrollbar-track{ background:transparent; }
.side-list::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.34); border-radius:9px;
  border:3px solid transparent; background-clip:padding-box;
}

.side-row{
  display:flex; align-items:center; gap:9px;
  padding:7px 10px 7px 11px; border-radius:9px;
  border-bottom:1px solid var(--cg-side-line);
  color:#f2f7fe; cursor:pointer; text-decoration:none;
}
.side-row:hover{ background:rgba(255,255,255,.12); color:#fff; }
.side-row__chev{
  flex:none; width:16px; height:16px; padding:0; border:0; border-radius:4px;
  background:transparent; color:#cfe0fa; font-size:10px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease;
}
.side-row__chev:hover{ background:rgba(255,255,255,.18); color:#fff; }
.side-row--group.is-open .side-row__chev{ transform:rotate(90deg); color:#fff; }
.side-row__ico{ flex:none; font-size:15px; color:#cfe0fa; width:17px; text-align:center; }
.side-row__name{
  flex:1 1 auto; min-width:0;
  font-size:14px; font-weight:400; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.side-row__name mark{
  padding:0 1px; border-radius:2px;
  background:rgba(255,255,255,.32); color:#fff;
}
.side-row__count{
  flex:none; font:600 13px/1 var(--cg-font-cond); letter-spacing:.02em;
  color:#c3d5f2; font-variant-numeric:tabular-nums;
}
.side-row--group .side-row__name{ font-weight:500; color:#fff; }
.side-row--group.is-open{ background:rgba(255,255,255,.16); }
.side-row--group.is-open .side-row__name{ font-weight:600; }
.side-row--group.is-open .side-row__ico{ color:#fff; }

/* Sous-niveaux : retrait + rail vertical */
.side-row--sub{
  padding-left:30px;
  box-shadow:inset 20px 0 0 -19px rgba(255,255,255,.45);
}
.side-row--sub .side-row__ico{ font-size:13px; }
.side-row--sub .side-row__count{ font-size:12.5px; }
.side-row--note{
  padding:7px 10px 9px 30px; font-size:12.5px; color:#cfe0fa; cursor:default;
  box-shadow:inset 20px 0 0 -19px rgba(255,255,255,.45); border-bottom:0;
}

/* Élément actif */
.side-row.is-active{
  padding-left:8px;
  border-left:3px solid var(--cg-side-accent); border-bottom-color:transparent;
  background:var(--cg-side-active); color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.18);
}
.side-row.is-active .side-row__ico,.side-row.is-active .side-row__name{ color:#fff; }
.side-row.is-active .side-row__name{ font-weight:500; }
.side-row.is-active .side-row__count{ color:#e4eefd; }

/* Absence de résultat, renvoi vers l’autre onglet, effacement */
.side-empty{ padding:16px 12px; text-align:center; font-size:13px; line-height:1.5; color:#fff; }
.side-cross{
  display:block; margin:6px 2px 0; padding:9px 11px;
  border:1px solid rgba(255,255,255,.3); border-radius:9px;
  font-size:12.5px; font-weight:500; line-height:1.35; color:#fff; background:transparent;
  width:calc(100% - 4px); text-align:left;
}
.side-cross:hover{ background:rgba(255,255,255,.14); }
.side-clear{ padding:10px 2px; border-top:1px solid rgba(255,255,255,.22); }
.side-clear[hidden]{ display:none; }
.side-clear__btn{
  display:block; width:100%; padding:7px;
  border:1px solid rgba(255,255,255,.38); border-radius:9px; background:transparent;
  font-size:13px; font-weight:500; color:#fff;
}
.side-clear__btn:hover{ background:rgba(255,255,255,.16); }

/* Bouton de repli, ancré sur la bordure du volet */
.sidebar-toggle{
  position:absolute; z-index:5;
  top:54px; left:var(--cg-sidebar-w); transform:translateX(-50%);
  width:24px; height:24px; padding:0;
  align-items:center; justify-content:center;
  border:1px solid var(--cg-line); border-radius:50%;
  background:#fff; color:#414c5b; font-size:10px; line-height:1;
  box-shadow:0 1px 3px rgba(16,40,80,.14);
  transition:left .25s ease,transform .25s ease,background-color .15s ease,
             color .15s ease,border-color .15s ease;
}
.sidebar-toggle:hover{ background:var(--cg-primary); border-color:var(--cg-primary); color:#fff; }
.sidebar-toggle:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(22,104,224,.28); }

@media (min-width:992px){
  /* le bouton suit le volet, lui-même collé sous l’en-tête : il reste visible au défilement */
  .sidebar-toggle{ position:fixed; top:calc(var(--cg-header-h) + 54px); }
  .app-sidebar{
    transition:flex-basis .25s ease,width .25s ease,opacity .2s ease;
  }
  body.sidebar-collapsed .app-sidebar{
    flex-basis:0; width:0; min-width:0;
    opacity:0; overflow:hidden;
  }
  body.sidebar-collapsed .sidebar-toggle{ left:0; transform:translateX(9px); }
  body.sidebar-collapsed .app-main{ padding-left:44px; transition:padding-left .25s ease; }
  body.sidebar-no-anim .app-sidebar,
  body.sidebar-no-anim .sidebar-toggle{ transition:none; }
}

/* ==========================================================================
   4. CONTENU PRINCIPAL
   ========================================================================== */
.app-main{
  flex:1 1 auto; min-width:0;
  padding:0 20px 34px 28px;
  background:var(--cg-app-bg);
}

.logout-link{
  display:inline-flex; align-items:center; gap:7px;
  flex:none; margin-top:-8px;
  font-size:12.5px; font-weight:600; color:var(--cg-link);
  white-space:nowrap;
}
.logout-link:hover{ color:var(--cg-primary-600); text-decoration:underline; }

.page-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding-top:20px;
}
.page-head__main{ min-width:0; }
.btn-families{
  margin-bottom:12px; font-size:13px; border-radius:var(--cg-radius);
  border-color:var(--cg-field); color:var(--cg-text);
}
.page-title{
  margin:0; font-size:23px; font-weight:900; color:var(--cg-ink); letter-spacing:-.01em;
}
.btn-star{
  display:inline-block; vertical-align:middle;
  border:0; background:transparent; color:#6a7583; font-size:17px; line-height:1;
  padding:0; margin:-3px 0 0 10px;
}
.btn-star:hover{ color:#f5a623; }
.page-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-top:5px; }
.page-count{ margin:0; font-size:12px; color:var(--cg-muted); }

/* Bandeau de filtre actif, à côté du compteur (famille, secteur ou recherche) */
.active-filter{
  display:inline-flex; align-items:center; gap:8px;
  margin:0; padding:3px 4px 3px 10px;
  border:1px solid var(--cg-primary-soft-bd); border-radius:20px;
  background:var(--cg-primary-soft); color:var(--cg-link);
  font-size:12px; font-weight:600; line-height:1.3;
}
.active-filter[hidden]{ display:none; }
.active-filter button{
  width:17px; height:17px; padding:0; border:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(22,104,224,.16); color:var(--cg-link); font-size:8px; line-height:1;
}
.active-filter button:hover{ background:var(--cg-primary); color:#fff; }

/* --------------------------- Barre d’outils --------------------------- */
.toolbar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  margin:15px 0 23px;
}
.toolbar__left{ display:flex; align-items:center; flex-wrap:wrap; gap:13px; }
.toolbar__right{ display:flex; align-items:center; gap:11px; margin-left:auto; }
.toolbar__label{ font-size:12px; color:#5a6472; }

.btn-split .btn{
  height:38px; background:var(--cg-primary); border-color:var(--cg-primary);
  font-size:13px; font-weight:700; display:flex; align-items:center; gap:9px;
  padding:0 15px; box-shadow:0 1px 2px rgba(16,58,120,.18);
}
.btn-split .btn:hover,.btn-split .btn:active{ background:var(--cg-primary-600)!important; border-color:var(--cg-primary-600)!important; }
.btn-split .btn:first-child{ border-radius:var(--cg-radius) 0 0 var(--cg-radius); }
.btn-split .btn i{ font-size:14px; }
.btn-split__caret{
  padding:0 8px 0 7px!important;
  border-radius:0 var(--cg-radius) var(--cg-radius) 0;
  position:relative;
}
.btn-split__caret::before{
  content:""; position:absolute; left:0; top:9px; bottom:9px; width:1px; background:rgba(255,255,255,.28);
}

.multi-search{ position:relative; width:226px; }
.multi-search .form-control{
  height:38px; padding:0 34px 0 34px;
  border-radius:var(--cg-radius); border-color:var(--cg-field);
  font-size:13px; box-shadow:none;
}
.multi-search .form-control::placeholder{ color:#838d99; }
.multi-search .form-control:focus{ border-color:var(--cg-primary); box-shadow:0 0 0 3px rgba(22,104,224,.12); }
.multi-search__ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:13px; color:#7b8695; pointer-events:none;
}
.multi-search__btn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:#5a6472; font-size:14px; padding:4px;
}

.btn-tool{
  height:38px; display:inline-flex; align-items:center; gap:8px;
  padding:0 12px; border-radius:var(--cg-radius);
  background:#fff; border:1px solid var(--cg-field);
  font-size:12.8px; font-weight:600; color:#344052;
}
.btn-tool i{ font-size:14px; color:#4e5865; }
.btn-tool:hover{ background:#f5f8fc; border-color:#b3bdca; color:var(--cg-ink); }

.btn-view{
  height:38px; display:inline-flex; align-items:center; gap:8px;
  padding:0 12px; border-radius:var(--cg-radius);
  background:var(--cg-primary-soft); border:1px solid var(--cg-primary-soft-bd);
  color:var(--cg-link); font-size:12.8px; font-weight:700;
}
.btn-view:hover,.btn-view.show{ background:#dfeafd; border-color:#b6d0f7; color:var(--cg-primary-600); }
.btn-view i{ font-size:14px; }
.btn-view::after{ margin-left:4px; }

.btn-icon{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--cg-radius); background:#fff; border:1px solid var(--cg-field);
  color:#4e5865; font-size:16px;
}
.btn-icon:hover{ background:#f5f8fc; border-color:#b3bdca; color:var(--cg-ink); }

/* ==========================================================================
   5. TABLEAU
   ========================================================================== */
.table-card{
  background:var(--cg-surface);
  border:1px solid var(--cg-line);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(16,40,80,.06);
}
.table-card .table-responsive{ overflow-x:auto; }

.cg-table{ min-width:1330px; margin:0; color:var(--cg-text); }
.cg-table > :not(caption) > * > *{ box-shadow:none; background-color:transparent; }

/* En-têtes */
.cg-table__head th{
  background:#f7f9fc;
  padding:7px 5px;
  font-size:11px; font-weight:600; color:#344052; white-space:nowrap;
  border-bottom:0; vertical-align:middle;
}
.th-sort{ font-size:10px; color:#7b8695; margin-left:2px; vertical-align:-1px; }
.th-filter{ font-size:9.5px; color:#7b8695; margin-left:4px; vertical-align:0; }

/* Ligne de filtres */
.cg-table__filters th{ background:#f7f9fc; padding:0 5px 8px; border-bottom:1px solid #cdd6e1; }
.fbox{
  position:relative; display:block;
  height:28px; border:1px solid #ced7e2; border-radius:6px; background:#fff;
}
.fbox i{ position:absolute; top:50%; transform:translateY(-50%); color:#838d99; font-size:11px; }
.fbox i:first-child{ left:8px; }
.fbox__caret{ right:8px; font-size:10px!important; }
.fbox input{
  width:100%; height:100%; border:0; outline:0; background:transparent;
  padding:0 22px 0 25px; font-size:12px; color:var(--cg-text); border-radius:6px;
}
.fbox:focus-within{ border-color:var(--cg-primary); box-shadow:0 0 0 3px rgba(22,104,224,.10); }

/* Corps */
.cg-table tbody td{
  padding:6.5px 5px;
  font-size:12px; font-weight:400;
  overflow:hidden; text-overflow:ellipsis; color:#344052; vertical-align:middle;
  border-bottom:1px solid var(--cg-line-2);
  white-space:nowrap;
}
.cg-table tbody tr:last-child td{ border-bottom:0; }

/* alternance : repère de ligne indispensable sur écran peu contrasté */
.cg-table tbody tr:nth-child(even) td{ background:#f7f9fc; }
.cg-table tbody tr:hover td{ background:#eef4fc; }

.cg-table tbody tr.row-alert td,
.cg-table tbody tr.row-alert:nth-child(even) td{ background:var(--cg-row-alert); }
.cg-table tbody tr.row-alert:hover td{ background:#faeaea; }

/* Colonnes */
.col-check{ width:34px; padding-left:16px!important; padding-right:0!important; }
.col-ico{ width:38px; padding-left:4px!important; }
.col-code{ width:118px; }
.col-desi{ width:235px; }
.col-peri{ width:92px; }
.col-ce{ width:165px; }
.col-jug{ width:150px; }
.col-sect{ width:105px; }
.col-etal{ width:150px; }
.col-etat{ width:118px; }
.col-seuil{ width:129px; }

.form-check-input{
  width:15px; height:15px; margin:0; border-color:#b3bdca; border-radius:4px; cursor:pointer;
}
.form-check-input:checked{ background-color:var(--cg-primary); border-color:var(--cg-primary); }
.form-check-input:focus{ box-shadow:0 0 0 3px rgba(22,104,224,.15); border-color:var(--cg-primary); }

.ins-ico{
  width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#5c6878; font-size:15px;
}

.code{ font-weight:700; color:var(--cg-ink); letter-spacing:.01em; }

.cert{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--cg-link); font-size:12px;
}
.cert i{ font-size:12.5px; }
.cert:hover{ text-decoration:underline; color:var(--cg-primary-600); }
.no-cert{ color:#6a7686; }

/* prochain étalonnage : toujours en gras, la couleur signale l’urgence */
.col-etal{ font-weight:700; }
.date-warn{ color:var(--cg-date-warn); }
.date-danger{ color:var(--cg-date-danger); }

/* Badges */
.badge-cg{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 9px; border-radius:5px;
  font-size:11px; font-weight:600; line-height:1.2; white-space:nowrap;
}
.badge-cg--green{  background:var(--cg-green-bg);  color:var(--cg-green-tx); }
.badge-cg--orange{ background:var(--cg-orange-bg); color:var(--cg-orange-tx); }
.badge-cg--red{    background:var(--cg-red-bg);    color:var(--cg-red-tx); }
.badge-cg--blue{   background:var(--cg-blue-bg);   color:var(--cg-blue-tx); }
.badge-cg--grey{   background:var(--cg-grey-bg);   color:var(--cg-grey-tx); }

/* ==========================================================================
   6. PIED DE TABLEAU / PAGINATION
   ========================================================================== */
.table-foot{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  padding:11px 16px; border-top:1px solid var(--cg-line);
}
.table-foot__perpage{ justify-self:end; }
.table-foot__info{ margin:0; font-size:12.5px; color:#5a6472; }

.cg-pagination ul{
  display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0;
}
.pg{
  min-width:31px; height:31px; padding:0 8px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; font-size:12.8px; font-weight:600; color:#464f5f;
}
.pg:hover{ background:#f1f5fa; color:var(--cg-ink); }
.pg.is-active{ background:var(--cg-primary); color:#fff; font-weight:700; }
.pg.is-active:hover{ background:var(--cg-primary-600); color:#fff; }
.pg--nav{ color:#8592a6; font-size:14px; }
.pg--dots{ color:#6a7686; cursor:default; }
.pg--dots:hover{ background:transparent; }

.table-foot__perpage{ display:flex; align-items:center; gap:10px; justify-self:end; font-size:12.5px; color:#5a6472; }
.table-foot__perpage .form-select{
  width:72px; height:31px; padding:0 26px 0 10px;
  font-size:12.8px; color:var(--cg-text);
  border-color:var(--cg-field); border-radius:6px; box-shadow:none;
  background-position:right 8px center;
}
.table-foot__perpage .form-select:focus{ border-color:var(--cg-primary); box-shadow:0 0 0 3px rgba(22,104,224,.12); }

/* Menu contextuel (clic droit) du listing */
.ctx-menu{
  position:fixed; z-index:1080;
  min-width:216px; max-height:calc(100vh - 20px);
  padding:5px; overflow-y:auto;
  background:#fff; border:1px solid var(--cg-line); border-radius:var(--cg-radius);
  box-shadow:0 12px 34px rgba(16,40,80,.20);
}
.ctx-menu[hidden]{ display:none; }
.ctx-menu__head{
  margin:0 0 4px; padding:7px 10px;
  border-radius:6px; background:#f3f6fb;
  font-size:12px; font-weight:800; color:var(--cg-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ctx-menu__item{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:7px 10px; border:0; border-radius:6px; background:transparent;
  font-size:12.5px; font-weight:500; color:var(--cg-text); text-align:left;
  white-space:nowrap;
}
.ctx-menu__item i{ font-size:13px; color:#5f6b78; width:15px; flex:none; text-align:center; }
.ctx-menu__item:hover,.ctx-menu__item:focus-visible{
  outline:0; background:var(--cg-primary); color:#fff;
}
.ctx-menu__item:hover i,.ctx-menu__item:focus-visible i{ color:#fff; }
.ctx-menu__item--danger{ color:var(--cg-red-tx); }
.ctx-menu__item--danger i{ color:var(--cg-red-tx); }
.ctx-menu__item--danger:hover,.ctx-menu__item--danger:focus-visible{ background:var(--cg-date-danger); }
.ctx-menu__sep{ margin:4px 6px; border:0; border-top:1px solid var(--cg-line); opacity:1; }

/* Ligne visée par le menu contextuel */
.cg-table tbody tr.is-targeted td{ background:var(--cg-primary-soft)!important; }
.cg-table tbody tr.row-alert.is-targeted td{ background:#f4e8f0!important; }

/* État vide du listing après filtrage */
.cg-table__empty td{
  padding:34px 10px!important; text-align:center;
  color:var(--cg-muted); font-style:italic;
}

/* ==========================================================================
   7. MENUS DÉROULANTS
   ========================================================================== */
.dropdown-menu{
  border-color:var(--cg-line); border-radius:var(--cg-radius);
  box-shadow:0 10px 28px rgba(16,40,80,.12);
  font-size:13px; padding:6px;
}
.dropdown-item{ border-radius:6px; padding:8px 10px; color:var(--cg-text); }
.dropdown-item:hover{ background:#f3f6fb; color:var(--cg-ink); }
.dropdown-item.active,.dropdown-item:active{ background:var(--cg-primary); color:#fff; }

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */
@media (max-width:1399.98px){
  .app-nav__list > li > a{ padding:0 12px; font-size:13px; }
  .app-main{ padding:0 18px 30px; }
}
@media (max-width:1199.98px){
  .toolbar__right{ margin-left:0; }
  .multi-search{ width:190px; }
}
@media (max-width:991.98px){
  :root{ --cg-header-h:110px; }   /* barre 68 + champ 34 + marge 8 */
  .app-header{ height:auto; }
  .app-header__inner{
    gap:0 12px; padding:0 14px; height:auto;
    flex-wrap:wrap; align-content:flex-start;
  }
  .app-header__inner > .btn-burger,.app-header__inner > .user-box{ height:var(--cg-bar-h); display:flex; align-items:center; }
  .app-header__inner > .brand{ display:flex; flex-direction:column; justify-content:center; height:var(--cg-bar-h); }
  .global-search{
    order:20; flex:1 1 100%; min-width:0; height:34px; margin:0 0 8px;
    background:#fff; border-color:#fff;
  }
  .global-search .global-search__ico{ color:#5a6472; }
  .global-search .global-search__input{ color:var(--cg-ink); }
  .global-search .global-search__input::placeholder{ color:#7b8695; }
  .global-search__kbd{ display:none; }
  .global-search__btn{ display:inline-flex; align-items:center; }
  .global-search__clear{ background:#e7ecf3; color:#414c5b; }
  .user-box{ margin-left:auto; }
  .app-body{ display:block; }
  .app-sidebar{ border-right:0; }
  .app-sidebar.offcanvas-lg{ --bs-offcanvas-bg:var(--cg-side-bg); background:var(--cg-side-bg); }
  .app-main{ padding:0 16px 28px; }
  .header-caret{ display:none; }
}
@media (max-width:991.98px){
  .toolbar{ gap:10px; }
  .toolbar__left{ width:100%; }
  .btn-tool{ flex:1 1 auto; justify-content:center; }
  .multi-search{ flex:1 1 200px; width:auto; }
  .toolbar__right{ width:100%; }
}
@media (max-width:767.98px){
  :root{ --cg-bar-h:60px; --cg-header-h:102px; }
  .brand__title{ font-size:18px; }
  .brand__sub{ font-size:8px; letter-spacing:.16em; }
  .page-title{ font-size:21px; }
  .btn-split,.multi-search{ flex:1 1 100%; width:100%; }
  .btn-split .btn:first-child{ flex:1 1 auto; justify-content:center; }
  .btn-tool{ flex:1 1 calc(50% - 5px); padding:0 10px; }
  .toolbar__right .dropdown{ flex:1 1 auto; }
  .btn-view{ width:100%; justify-content:center; }
  .table-foot{ display:flex; flex-wrap:wrap; justify-content:center; padding:12px; }
  .table-foot__info,.table-foot__perpage{ width:100%; justify-content:center; text-align:center; }
  .cg-pagination ul{ flex-wrap:wrap; justify-content:center; }
}
@media (max-width:575.98px){
  .user-box__avatar{ width:32px; height:32px; font-size:15px; }
  .logout-link span{ display:none; }
}

/* ==========================================================================
   9. TABLEAU DE BORD (page d’accueil)
   ========================================================================== */

.dash-hello{ display:flex; align-items:flex-start; gap:14px; }
.dash-hello__ico{
  width:34px; height:34px; flex:none; margin-top:3px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--cg-primary-soft); color:var(--cg-primary); font-size:17px;
}
.dash-hello .page-count{ margin-top:4px; font-size:13px; color:#4d5869; }

.dash-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
  margin-top:20px;
}

.dash-card{
  display:flex; flex-direction:column;
  background:var(--cg-surface); border:1px solid var(--cg-line); border-radius:12px;
  box-shadow:0 1px 2px rgba(16,40,80,.06);
}
.dash-card--alert{ border-color:#f3d3d3; }
.dash-card--quick{ background:#fffdf6; border-color:#f2e2bd; }

.dash-card__title{
  margin:0; padding:17px 20px 0;
  font-size:12.5px; font-weight:800; letter-spacing:.045em; color:var(--cg-ink);
}
.dash-card__title--blue{ color:var(--cg-primary); }
.dash-card__title--red{ color:var(--cg-date-danger); }
.dash-card__title--green{ color:var(--cg-green-tx); }
.dash-card__title--amber{ color:#a3620b; }

.dash-card__body{
  flex:1 1 auto;
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:14px; align-items:center;
  padding:16px 20px 18px;
}
.dash-card__body--solo{ display:block; }

.dash-card__foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 20px; border-top:1px solid var(--cg-line-2);
  font-size:12.5px; font-weight:600; color:var(--cg-link);
}
.dash-card__foot i{ font-size:12px; }
.dash-card__foot:hover{ background:#f7fafd; color:var(--cg-primary-600); }

/* Chiffre-clé */
.dash-stat{ display:flex; align-items:center; gap:12px; }
.dash-stat__ico{
  width:48px; height:48px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; font-size:23px;
}
.dash-stat__ico--blue{ background:var(--cg-primary-soft); color:var(--cg-primary); }
.dash-stat__ico--red{ background:#fdeaea; color:var(--cg-date-danger); }
.dash-stat__ico--green{ background:#e2f7ec; color:var(--cg-green-tx); }
.dash-stat__ico--purple{ background:#eee9ff; color:#6d4aff; }
.dash-stat__txt{ min-width:0; }
.dash-stat__over{ margin:0 0 2px; font-size:11.5px; font-weight:600; color:#4d5869; }
.dash-stat__value{
  margin:0; font-size:31px; font-weight:900; line-height:1.05; letter-spacing:-.02em;
  color:var(--cg-ink);
}
.dash-stat__value--blue{ color:var(--cg-primary); }
.dash-stat__value--red{ color:var(--cg-date-danger); }
.dash-stat__value--green{ color:var(--cg-green-tx); }
.dash-stat__value--purple{ color:var(--cg-ink); }
.dash-stat__label{ margin:2px 0 0; font-size:12px; font-weight:600; color:#4d5869; }

/* Répartitions */
.dash-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.dash-list li{ display:flex; align-items:center; gap:8px; font-size:12.3px; }
.dash-list__label{ flex:1 1 auto; color:#3e4a5c; min-width:0; }
.dash-list__value{ flex:none; font-weight:700; color:var(--cg-ink); white-space:nowrap; }
.dash-list__pct{ margin-left:4px; font-size:11.5px; font-weight:600; color:var(--cg-muted); }

.dash-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.dash-dot--green{ background:#22a35f; }
.dash-dot--orange{ background:#e8940f; }
.dash-dot--red{ background:var(--cg-date-danger); }
.dash-dot--grey{ background:#838d99; }
.dash-dot--blue{ background:var(--cg-primary); }

/* Note « Dont … » */
.dash-note{ margin:16px 0 0; font-size:12.5px; color:#3e4a5c; }
.dash-note__link{ color:#a95c08; font-weight:700; }
.dash-note__link:hover{ text-decoration:underline; }

/* Jauge */
.dash-gauge{ padding:0 20px 16px; }
.dash-gauge__head{
  display:flex; align-items:center; justify-content:space-between;
  margin:0 0 6px; font-size:12px; color:#3e4a5c;
}
.dash-gauge__head strong{ font-weight:800; color:var(--cg-ink); }
.dash-gauge__track{ display:flex; align-items:center; gap:8px; }
.dash-gauge__bar{
  flex:1 1 auto;
  height:9px; border-radius:5px; background:#eef1f6; overflow:hidden;
}
.dash-gauge__fill{ display:block; height:100%; border-radius:5px; background:var(--cg-date-danger); }
.dash-gauge__scale{ font-size:11px; color:var(--cg-muted-2); flex:none; }

/* Actions rapides */
.dash-quick{ display:flex; flex-direction:column; gap:9px; padding:16px 20px 20px; }
.dash-quick__item{
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border:1px solid #f0e2c4; border-radius:var(--cg-radius);
  background:#fff; font-size:12.8px; font-weight:600; color:var(--cg-link);
}
.dash-quick__item > i:first-child{ font-size:14px; color:var(--cg-link); flex:none; }
.dash-quick__item span{ flex:1 1 auto; min-width:0; }
.dash-quick__go{ font-size:12px; color:#838d99; flex:none; }
.dash-quick__item:hover{ border-color:var(--cg-primary-soft-bd); background:var(--cg-primary-soft); }
.dash-quick__item:hover .dash-quick__go{ color:var(--cg-primary); }

/* Alertes récentes */
.dash-alerts{ margin-top:18px; }
.dash-alerts .dash-card__title{ font-size:11.5px; padding-top:13px; }
.dash-alerts__table{ margin-top:8px; }
.dash-alerts__table .cg-table__head th{ font-size:10.5px; padding:6px 5px; }
.dash-alerts__table tbody td{ padding:5px 5px; font-size:11.5px; }
.dash-alerts__table .badge-cg{ font-size:10.5px; padding:3px 8px; }
.dash-alerts__ico{ font-size:13px!important; }
.dash-alerts .dash-card__foot{ padding:9px 20px; font-size:12px; }
.dash-alerts__all{ font-size:12px; padding-top:13px; }
.dash-alerts__head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-right:20px;
}
.dash-alerts__all{ font-size:12.5px; font-weight:600; color:var(--cg-link); padding-top:17px; }
.dash-alerts__all:hover{ text-decoration:underline; }
.dash-alerts__all i{ font-size:11px; }

.dash-alerts__table{ min-width:940px; margin-top:12px; }
.dash-alerts__table tbody td{ white-space:normal; }
.dash-alerts__ico{ font-size:15px; }
.dash-alerts__ico--red{ color:var(--cg-date-danger); }
.dash-alerts__ico--orange{ color:var(--cg-date-warn); }
.dash-alerts__ico--blue{ color:var(--cg-primary); }
.dash-alerts__ico--green{ color:#22a35f; }

.dash-alerts__table .col-type{ width:52px; padding-left:16px!important; }
.dash-alerts__table .col-msg{ width:180px; font-weight:600; color:var(--cg-ink); }
.dash-alerts__table .col-detail{ width:auto; }
.dash-alerts__table .col-who{ width:140px; }
.dash-alerts__table .col-when{ width:100px; }
.dash-alerts__table .col-status{ width:120px; padding-right:16px!important; }
.dash-alerts .dash-card__foot{ justify-content:flex-start; gap:7px; margin-top:2px; }

@media (max-width:1559.98px){
  .dash-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767.98px){
  .dash-grid{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .dash-card__body{ grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
  .dash-stat__value{ font-size:27px; }
  .dash-hello__ico{ display:none; }
}

/* ==========================================================================
   10. EN-TÊTE DE PAGE AVEC PICTO, PÉRIODE, BARRE DE FILTRES
   ========================================================================== */
.page-head__id{ display:flex; align-items:flex-start; gap:14px; }
.page-head__ico{
  width:34px; height:34px; flex:none; margin-top:3px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--cg-primary-soft); color:var(--cg-link); font-size:17px;
}
.page-head__id .page-count{ margin-top:4px; font-size:13px; }

.btn-back{
  width:34px; height:34px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--cg-field); border-radius:var(--cg-radius);
  background:var(--cg-surface); color:var(--cg-text); font-size:15px;
}
.btn-back:hover{ background:#f5f8fc; border-color:#a7b3c3; color:var(--cg-ink); }

.period-row{ display:flex; justify-content:flex-end; margin-top:-30px; }
.period-box{
  display:flex; align-items:center; gap:9px;
  padding:5px 6px 5px 12px; border:1px solid var(--cg-field); border-radius:var(--cg-radius);
  background:var(--cg-surface);
}
.period-box i{ font-size:14px; color:#5a6472; }
.period-box__label{ font-size:12.5px; font-weight:600; color:var(--cg-text); white-space:nowrap; }
.period-box .form-select{
  width:auto; height:30px; padding:0 30px 0 10px;
  font-size:12.5px; border-color:var(--cg-field); border-radius:6px; box-shadow:none;
}

.filters-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin:16px 0 14px; }
.filters-bar__search{ position:relative; flex:0 1 250px; }
.filters-bar__search .form-control{
  height:38px; padding:0 34px 0 12px; border-radius:var(--cg-radius);
  border-color:var(--cg-field); font-size:12.8px; box-shadow:none;
}
.filters-bar__search i{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:13px; color:#7b8695; pointer-events:none;
}
.filters-bar__select{
  flex:0 1 205px; height:38px; padding:0 30px 0 12px;
  border-color:var(--cg-field); border-radius:var(--cg-radius);
  font-size:12.8px; color:var(--cg-text); box-shadow:none;
}
.filters-bar__adv{ margin-left:auto; }
.filters-bar__add{
  height:38px; display:inline-flex; align-items:center; gap:8px;
  padding:0 15px; border-radius:var(--cg-radius); font-size:13px; font-weight:700;
}

/* ==========================================================================
   11. TABLEAU DES UTILISATEURS
   ========================================================================== */
/* Même typographie et même rythme de cellule que les autres tableaux :
   seule la largeur diffère, absorbée par le défilement horizontal du cadre. */
.users-table{ min-width:1720px; }
.users-table .cg-table__head th{
  vertical-align:top;
  white-space:normal;   /* les intitulés longs se répartissent sur plusieurs lignes */
  line-height:1.3;
}
.th-sub{
  display:block; margin-top:3px;
  font-size:9.5px; font-weight:500; line-height:1.35; color:#5f6b78;
  text-transform:none; letter-spacing:0; white-space:normal;
}
.users-table tbody td{ white-space:nowrap; }

.uc-id{ width:132px; padding-left:16px!important; }
.uc-mail{ width:186px; }
.uc-sw{ width:62px; text-align:center; }
.uc-type{ width:132px; }
.uc-rec{ width:142px; }
.uc-day{ width:104px; }
.uc-chk{ width:56px; text-align:center; }
.uc-ip{ width:132px; white-space:normal!important; }
.uc-acc{ width:142px; }
.uc-ses{ width:136px; }
.uc-res{ width:92px; text-align:center; }

.user-cell{ display:flex; align-items:center; gap:8px; }
.user-cell__id{ font-weight:600; color:var(--cg-ink); }
.avatar{
  width:24px; height:24px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:800; letter-spacing:.02em; color:#fff;
}
/* teintes assez soutenues pour que les initiales blanches restent lisibles */
.av-blue{ background:#2a63b8; } .av-green{ background:#237a4c; }
.av-orange{ background:#a35f10; } .av-cyan{ background:#1f6d7c; }
.av-purple{ background:#5c40b0; } .av-teal{ background:#207065; }

.cg-switch{ display:inline-flex; margin:0; padding:0; min-height:0; justify-content:center; }
.cg-switch .form-check-input{
  width:32px; height:17px; margin:0; cursor:pointer;
  background-color:#c6cfdb; border-color:#c6cfdb;
}
.cg-switch .form-check-input:checked{ background-color:var(--cg-primary); border-color:var(--cg-primary); }

.cg-table .form-select-sm{
  height:28px; padding:0 24px 0 8px;
  font-size:11.6px; color:var(--cg-text);
  border-color:var(--cg-field); border-radius:6px; box-shadow:none;
  background-position:right 7px center; background-size:12px 9px;
}
.cg-table .form-select-sm:focus{ border-color:var(--cg-primary); box-shadow:0 0 0 3px rgba(22,104,224,.12); }
.link-state{ font-size:11.6px; font-weight:600; }
.link-state--on{ color:var(--cg-link); }
.link-state--off{ color:var(--cg-link); }
.link-state:hover{ text-decoration:underline; }

.users-foot{ display:flex; grid-template-columns:none; justify-content:space-between; }
.users-foot__left,.users-foot__right{ display:flex; align-items:center; gap:14px; }
.users-foot .btn-tool{ height:34px; font-size:12.5px; }
.users-foot .table-foot__perpage{ justify-self:auto; }

/* Barre d’actions de bas de page */
.page-actions{ display:flex; align-items:center; gap:11px; margin-top:18px; }
.page-actions--split{ justify-content:space-between; }
.page-actions--split > div{ display:flex; align-items:center; gap:11px; }
.page-actions .btn{
  height:40px; display:inline-flex; align-items:center; gap:8px;
  padding:0 20px; border-radius:var(--cg-radius); font-size:13px; font-weight:700;
}
.page-actions .btn-tool{ font-weight:600; }

/* ==========================================================================
   12. FORMULAIRE DE MODIFICATION D’UN INSTRUMENT
   ========================================================================== */
.breadcrumb-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:16px; }
.breadcrumb-cg{ display:flex; align-items:center; gap:9px; list-style:none; margin:0; padding:0; font-size:12.5px; }
.breadcrumb-cg li + li::before{ content:"\203A"; margin-right:9px; color:#7b8695; }
.breadcrumb-cg a{ color:var(--cg-link); font-weight:600; }
.breadcrumb-cg a:hover{ text-decoration:underline; }
.breadcrumb-cg li[aria-current]{ color:var(--cg-muted); }
.breadcrumb-row .logout-link{ margin-top:0; }

.form-grid-panels{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
  margin-top:16px;
}
.form-panel{
  background:var(--cg-surface); border:1px solid var(--cg-line); border-radius:12px;
  box-shadow:0 1px 2px rgba(16,40,80,.06);   /* pas d’overflow:hidden : le sélecteur de secteur déborde du panneau */
}
.form-panel--full{ grid-column:1 / -1; }
.form-panel__head{
  display:flex; align-items:center; gap:10px;
  margin:0; padding:13px 20px; border-radius:11px 11px 0 0;
  font-size:13.5px; font-weight:700; color:var(--cg-ink);
  border-bottom:1px solid var(--cg-line-2);
}
.form-panel__head i{ font-size:16px; }
.form-panel--blue   .form-panel__head{ background:#eef4fd; }
.form-panel--blue   .form-panel__head i{ color:var(--cg-link); }
.form-panel--green  .form-panel__head{ background:#eaf7f0; }
.form-panel--green  .form-panel__head i{ color:var(--cg-green-tx); }
.form-panel--purple .form-panel__head{ background:#f1eefc; }
.form-panel--purple .form-panel__head i{ color:#5c43b8; }
.form-panel--amber  .form-panel__head{ background:#fdf6e8; }
.form-panel--amber  .form-panel__head i{ color:#96580a; }

.form-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px 20px; padding:18px 20px 22px;
  align-items:start;   /* sinon un champ haut (étiquettes) recentre ses voisins */
}
.form-grid--4{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr); }
.field--wide{ grid-column:1 / -1; }

.field{ display:flex; align-items:center; gap:12px; min-width:0; min-height:36px; }
/* le champ à étiquettes a besoin de toute la largeur : libellé au-dessus.
   En colonne, flex-basis s’applique à la hauteur : le libellé doit repasser en auto. */
.field--tags{ flex-direction:column; align-items:stretch; gap:6px; }
.field--tags .field__label{ flex:none; }
.field__label{
  flex:0 0 118px; margin:0;
  font-size:12.3px; font-weight:600; color:var(--cg-text); line-height:1.3;
}
.field__label abbr{ margin-left:3px; color:var(--cg-date-danger); text-decoration:none; }
.field .form-control,.field .form-select{
  flex:1 1 auto; min-width:0; height:36px;
  border-color:var(--cg-field); border-radius:6px;
  font-size:12.5px; color:var(--cg-text); box-shadow:none;
}
.field .form-control:focus,.field .form-select:focus{
  border-color:var(--cg-primary); box-shadow:0 0 0 3px rgba(22,104,224,.12);
}
.field__date{ position:relative; flex:1 1 auto; min-width:0; display:block; }
.field__date .form-control{ width:100%; padding-right:32px; }
.field__date i{
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  font-size:13px; color:#5a6472; pointer-events:none;
}
.field__money{ display:flex; gap:8px; flex:1 1 auto; min-width:0; }
.field__money .form-select{ flex:0 0 82px; }
.field__static{ margin:0; display:flex; align-items:center; gap:7px; font-size:12.5px; }
.field__ok{ color:var(--cg-green-tx); font-weight:700; }
.field__static i{ color:#7b8695; font-size:13px; }
.field__check{ flex:1 1 auto; }
.field__state{
  font-weight:700; color:var(--cg-green-tx);
  background-color:var(--cg-green-bg); border-color:#b6e2c8;
}

/* Sélection multiple à étiquettes */
.tag-select{
  position:relative; flex:1 1 auto; min-width:0;
  display:flex; align-items:flex-start; gap:8px;
  padding:6px 30px 6px 8px;
  border:1px solid var(--cg-field); border-radius:6px; background:var(--cg-surface);
}
.tag-select__list{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  padding:2px 5px 2px 8px; border-radius:5px;
  background:#eef2f7; font-size:10.8px; font-weight:600; color:var(--cg-text);
}
.tag button{
  border:0; background:transparent; padding:0; line-height:1;
  color:#5f6b78; font-size:11px;
}
.tag button:hover{ color:var(--cg-date-danger); }
.tag-select__caret{
  position:absolute; right:11px; top:12px; font-size:11px; color:#5a6472; pointer-events:none;
}

@media (max-width:1199.98px){
  .form-grid-panels{ grid-template-columns:minmax(0,1fr); }
  .form-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:991.98px){
  .period-row{ margin-top:12px; justify-content:flex-start; }
  .filters-bar__adv{ margin-left:0; }
  .users-foot{ flex-wrap:wrap; }
}
@media (max-width:767.98px){
  .form-grid,.form-grid--4{ grid-template-columns:minmax(0,1fr); }
  .field{ flex-direction:column; align-items:stretch; gap:5px; }
  .field__label{ flex:none; }
  .filters-bar__search,.filters-bar__select{ flex:1 1 100%; }
  .page-actions{ flex-wrap:wrap; }
  .page-actions--split{ flex-direction:column; align-items:stretch; }
  .page-actions .btn{ justify-content:center; }
}

/* Sélecteur de secteur : arborescence parents → enfants, choix unique */
.sector-picker{ position:relative; flex:1 1 auto; min-width:0; }
.sector-picker__btn{
  width:100%; height:36px; display:flex; align-items:center; gap:8px;
  padding:0 32px 0 10px; border:1px solid var(--cg-field); border-radius:6px;
  background:var(--cg-surface); font-size:12.5px; color:var(--cg-text); text-align:left;
}
.sector-picker__btn:hover{ border-color:#a7b3c3; }
.sector-picker__btn:focus-visible,.sector-picker.is-open .sector-picker__btn{
  outline:0; border-color:var(--cg-primary); box-shadow:0 0 0 3px rgba(22,104,224,.12);
}
.sector-picker__btn i{ color:#5a6472; font-size:13px; flex:none; }
.sector-picker__path{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sector-picker__path .parent{ color:var(--cg-muted); }
.sector-picker__path .sep{ margin:0 5px; color:#9aa5b5; }
.sector-picker__path .leaf{ font-weight:600; color:var(--cg-ink); }
.sector-picker__caret{
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  font-size:11px; color:#5a6472; pointer-events:none;
}
.sector-picker__hint{ margin:5px 0 0; font-size:11px; color:var(--cg-muted); }
.sector-picker__hint strong{ font-weight:600; color:var(--cg-text); }
.field:has(.sector-picker){ align-items:flex-start; }
.field:has(.sector-picker) .field__label{ margin-top:10px; }

.sector-picker__panel{
  position:absolute; z-index:30; top:calc(100% + 4px); left:0; width:max(100%,340px);
  max-height:300px; overflow-y:auto; padding:6px;
  background:var(--cg-surface); border:1px solid var(--cg-line); border-radius:8px;
  box-shadow:0 10px 28px rgba(16,40,80,.16);
}
.sector-picker__panel[hidden]{ display:none; }
.sp-row{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:7px 8px; border:0; border-radius:6px; background:transparent;
  font-size:12.5px; color:var(--cg-text); text-align:left;
}
.sp-row:hover{ background:#f3f6fb; }
.sp-row.is-selected{ background:var(--cg-primary-soft); color:var(--cg-link); font-weight:600; }
.sp-row__chev{
  flex:none; width:18px; height:18px; padding:0; border:0; border-radius:4px;
  background:transparent; color:#5a6472; font-size:10px;
  display:flex; align-items:center; justify-content:center; transition:transform .15s ease;
}
.sp-row__chev:hover{ background:#e7ecf3; }
.sp-row__chev[aria-expanded="true"]{ transform:rotate(90deg); }
.sp-row__spacer{ flex:none; width:18px; }
.sp-row__ico{ flex:none; font-size:13px; color:#5a6472; width:16px; text-align:center; }
.sp-row__name{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-row__count{ flex:none; font-size:11.5px; color:var(--cg-muted); font-variant-numeric:tabular-nums; }
.sp-row__check{ flex:none; font-size:13px; color:var(--cg-link); visibility:hidden; }
.sp-row.is-selected .sp-row__check{ visibility:visible; }
.sp-row--child{ padding-left:34px; box-shadow:inset 22px 0 0 -21px #cdd6e1; }
.sp-children[hidden]{ display:none; }