/* =============================================================================
   Tellibox — restyle « à l'identique » du front d'origine « Gestion terminaux »
   (Vue 3 + Element Plus, DCDZsoft / La Poste).

   S'ajoute à vendor/element-plus/element-plus.css (règles non scopées d'origine) :
   - styles scopés des composants d'origine réécrits (LogoShow, AsideMenu, SubHeader, Breadcrumb,
     TabsNav, DateTimeShow, LanguageSelect, FullScreen, UserOperate, Login, Index, SearchBox,
     SearchItem, TotalOperateBar, ColorButton, ColorTag, PaginationBox, EditBox, RegionTree) ;
   - adaptation des classes communes des templates des apps (card, btn, alert, badge…) ;
   - accessibilité : contrastes AA (variantes foncées des couleurs d'origine pour le texte), focus
     visible, prefers-reduced-motion, contraste forcé.
   Aucune ressource externe (CSP : style-src 'self') ; images en data: URI ou fichiers locaux.

   Sommaire : 1. Jetons  2. Base  3. Mise en page  4. En-tête  5. Menu latéral  6. Sous-en-tête
              7. Messages  8. Boutons  9. Étiquettes  10. Contenu générique  11. Listes
              12. Formulaires  13. Boîtes de dialogue  14. Connexion et erreurs  15. États
              16. Adaptation aux écrans  17. Impression
   ========================================================================== */

/* 1. Jetons ---------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Couleurs d'origine (ColorButton, ColorTag, Layout) */
  --tl-blue: #2878ff;
  --tl-blue-hover: #69a1ff;          /* couleur mêlée à 30 % de blanc (survol) */
  --tl-blue-disabled: #94bcff;       /* 50 % (désactivé) */
  --tl-navy: #2f2e3f;
  --tl-navy-hover: #6d6c79;
  --tl-navy-disabled: #97969f;
  --tl-orange: #ff9500;
  --tl-orange-hover: #ffb54d;
  --tl-orange-disabled: #ffca80;
  --tl-green: #15bc83;
  --tl-green-hover: #5bd0a8;
  --tl-green-disabled: #8adec1;
  --tl-red: #ff5c5c;
  --tl-red-hover: #ff8d8d;
  --tl-red-disabled: #ffaeae;
  --tl-lime: #28cd41;
  --tl-lime-hover: #69dc7a;
  --tl-lime-disabled: #94e6a0;
  --tl-purple: #8744fa;
  --tl-gray: #97969f;

  /* Variantes foncées pour le texte (contraste ≥ 4,5:1, WCAG AA, sur blanc comme sur les fonds
     des cartes, des en-têtes de tableau #EAF2FF et de la page #F0F2F5) */
  --tl-blue-text: #1a66e0;
  --tl-orange-text: #a95700;
  --tl-green-text: #0a7d55;
  --tl-red-text: #d42f2f;
  --tl-lime-text: #157a26;
  --tl-purple-text: #8744fa;  /* le violet d'origine atteint déjà 4,8:1 */
  --tl-gray-text: #6d6c78;

  --tl-text: #2f2e3f;
  --tl-text-secondary: #6d6c78;
  --tl-page-bg: #f0f2f5;
  --tl-panel-bg: rgba(255, 255, 255, 0.8);
  --tl-border: #e8e8e8;
  --tl-aside-bg: #2e3d65;
  --tl-aside-active: #253151;
  --tl-aside-text: #c0c0c5;
  --tl-focus: #1a66e0;
  --tl-font: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5fae\8f6f\96c5\9ed1", Arial, sans-serif;
  --tl-control-font: Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* Dimensions de la mise en page d'origine */
  --tl-header-h: 69px;
  --tl-subheader-h: 77px;
  --tl-main-top: calc(var(--tl-header-h) + var(--tl-subheader-h));
  --tl-aside-w: 262px;
  --tl-aside-collapsed-w: 68px;

  /* Jetons de compatibilité (feuilles des apps, ex. devices/devices.css) */
  --color-text: var(--tl-text);
  --color-text-muted: var(--tl-text-secondary);
  --color-heading: var(--tl-text);
  --color-surface: #ffffff;
  --color-surface-muted: #f5f6f8;
  --color-border: #e6e7eb;
  --color-border-strong: #c0c0c5;
  --color-link: var(--tl-blue-text);
  --color-primary: var(--tl-blue-text);
  --color-danger: var(--tl-red-text);
  --tone-neutral-fg: var(--tl-gray-text); --tone-neutral-bg: #f4f4f5; --tone-neutral-border: var(--tl-gray);
  --tone-info-fg: var(--tl-blue-text);    --tone-info-bg: #eaf2ff;    --tone-info-border: var(--tl-blue);
  --tone-success-fg: var(--tl-green-text); --tone-success-bg: #e8f8f2; --tone-success-border: var(--tl-green);
  --tone-warning-fg: var(--tl-orange-text); --tone-warning-bg: #fff4e5; --tone-warning-border: var(--tl-orange);
  --tone-danger-fg: var(--tl-red-text);   --tone-danger-bg: #ffefef;  --tone-danger-border: var(--tl-red);
  --font-sans: var(--tl-font);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 4px;
  --radius-pill: 13px;
  --target: 30px;
}

html.is-menu-collapsed { --tl-aside-w: var(--tl-aside-collapsed-w); }

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: #ffffff;
  color: var(--tl-text);
  font-family: var(--tl-font);
  font-size: 14px;
  line-height: 1.5;
}

#app { color: var(--tl-text); }

h1, h2, h3, h4 { margin: 0 0 12px; color: var(--tl-text); line-height: 1.4; }
h1 { font-size: 20px; font-weight: 700; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a { color: var(--tl-blue-text); text-underline-offset: 0.18em; }
a:hover { color: var(--tl-blue); }

code, pre { font-family: var(--font-mono); font-size: 0.92em; }
code { overflow-wrap: anywhere; }

img, svg { max-width: 100%; }
button { font: inherit; font-family: var(--tl-control-font); }

/* Focus visible partout : anneau bleu (blanc sur le menu latéral). */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 2px; }
main:focus-visible, [tabindex="-1"]:focus-visible { outline-offset: -2px; }

.icon {
  width: 16px;
  height: 16px;
  flex: none;
  vertical-align: middle;
  fill: currentColor;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 3000;
  padding: 8px 16px;
  background: #ffffff;
  color: var(--tl-blue-text);
  font-weight: 600;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(40, 120, 255, 0.3);
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
[hidden] { display: none !important; }

/* 3. Mise en page (Layout.vue) -------------------------------------------- */
.layoutBox {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  font-family: var(--tl-font);
  -webkit-font-smoothing: antialiased;
}
.topHeader { flex: none; height: var(--tl-header-h); background: #ffffff; position: relative; z-index: 30; }
.underHeader { display: flex; flex: 1 1 auto; min-height: 0; }
.aside {
  position: relative;
  z-index: 25;
  flex: none;
  width: var(--tl-aside-w);
  height: 100%;
  background-color: var(--tl-aside-bg);
  overflow: hidden;
}
.container { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; }
.main {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0;
  background-color: var(--tl-page-bg);
}
.viewPageBox { position: relative; }
.viewPageBox--flow { padding: 12px 12px 1px; }
.viewPageBox--flow > * + * { margin-top: 0; }

/* 4. En-tête (Header, LogoShow, DateTimeShow, LanguageSelect, FullScreen, UserOperate) */
.headerBox { display: flex; height: var(--tl-header-h); width: 100%; }
.headerBox .leftBox { display: flex; align-items: center; overflow: hidden; min-width: 0; flex-grow: 1; }
.headerBox .rightBox { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; }
.headerBox .rightBox > *, .headerGroup > * { padding: 0 28px; height: 38px; }
.headerGroup { display: flex; align-items: center; padding: 0 !important; }
.headerBox .dividerBox {
  width: 0;
  height: 21px;
  padding: 0 !important;
  margin: 0;
  opacity: 0.1;
  border-left: 1px solid #2f2e3f;
}
@media only screen and (max-width: 1570px) {
  .headerBox .rightBox > *, .headerGroup > * { padding: 0 16px; }
}

.logoBox {
  display: block;
  width: 262px;
  height: var(--tl-header-h);
  flex-shrink: 0;
  text-align: center;
  line-height: var(--tl-header-h);
}
.logoBox > img { height: var(--tl-header-h); width: auto; vertical-align: middle; }

.dateBox {
  width: 140px;
  font-size: 14px;
  color: #2f2e3f;
  line-height: 19px;
  text-align: center;
  white-space: nowrap;
}

.iconBox { display: flex; align-items: center; position: relative; }
.iconButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2f2e3f;
  cursor: pointer;
  border-radius: 4px;
}
.iconButton .btnSvg { width: 24px; height: 24px; color: #2f2e3f; }
.iconButton:hover .btnSvg { color: var(--tl-blue-text); }
.fullscreenIcon--exit, .iconButton[aria-pressed="true"] .fullscreenIcon--enter { display: none; }
.iconButton[aria-pressed="true"] .fullscreenIcon--exit { display: inline; }

.userBox { position: relative; display: flex; align-items: center; margin: 0 28px; padding: 0 !important; }
@media only screen and (max-width: 1570px) { .userBox { margin: 0 16px; } }
.userButton {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 18px;
}
.userAvatar.el-avatar {
  --el-avatar-text-color: #97969f;
  --el-avatar-bg-color: #ffffff;
  --el-avatar-size: 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(47, 46, 63, 0.08);
}
.userBox .onlinePoint {
  position: absolute;
  bottom: 2px;
  left: 28px;
  width: 10px;
  height: 10px;
  background: #28cd41;
  border: 1px solid #ffffff;
  border-radius: 50%;
}
.userBox .userNicknameBox {
  max-width: 160px;
  height: 17px;
  margin: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--tl-font);
  font-size: 14px;
  color: #2f2e3f;
  line-height: 17px;
}
.userBox .arrowSvg { width: 12px; height: 12px; color: #2f2e3f; }
.userButton[aria-expanded="true"] .arrowSvg { transform: rotate(180deg); }

/* Menus déroulants de l'en-tête (operatePopper d'origine) */
.headerDropdown__panel {
  display: none;
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  z-index: 2000;
  min-width: 150px;
}
.headerDropdown.is-open .headerDropdown__panel,
.no-js .headerDropdown:focus-within .headerDropdown__panel,
.no-js .headerDropdown:hover .headerDropdown__panel { display: block; }
.iconBox.headerDropdown .headerDropdown__panel { right: auto; left: 50%; transform: translateX(-50%); }
.operatePopper.el-popover.el-popper {
  border: 0;
  width: auto;
  height: auto;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 12px rgba(40, 120, 255, 0.12);
  backdrop-filter: blur(6px);
  padding: 9px 28px;
  text-align: left;
  white-space: nowrap;
}
.operateList { margin: 0; }
.operateItem {
  display: flex;
  align-items: center;
  width: 100%;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2f2e3f;
  font-family: var(--tl-font);
  font-size: 16px;
  line-height: 22px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.operateItem:hover, .operateItem:focus-visible, .operateItem[aria-current="true"] { color: var(--tl-blue-text); }
.operateItem[aria-current="true"] { font-weight: 600; }
.operateItem .operateSvg { width: 24px; height: 24px; margin-right: 8px; color: currentColor; }

.navToggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2f2e3f;
  cursor: pointer;
}
.navToggle__icon { width: 24px; height: 24px; }

/* 5. Menu latéral (AsideMenu, AsideMenuItem, menuPopper) ------------------- */
.asideMenuBox {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 24px;
  overflow: hidden;
}
.asideMenuBox .el-menu {
  --el-menu-text-color: #c0c0c5;
  --el-menu-hover-text-color: #ffffff;
  --el-menu-item-font-size: 16px;
  --el-menu-active-color: #ffffff;
  --el-menu-hover-bg-color: #253151;
  --el-menu-active-bg-color: #253151;
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: none !important;
  background-color: var(--tl-aside-bg);
}
.asideMenuBox > [data-menu] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
}
.asideMenuBox > [data-menu]::-webkit-scrollbar { width: 0; height: 0; }
.menuEntry { list-style: none; }

.asideMenuBox .el-menu-item {
  display: flex;
  align-items: center;
  height: 38px;
  line-height: 38px;
  margin-top: 8px;
  padding: 0 0 0 44px !important;
  border-radius: 4px;
  color: var(--el-menu-text-color);
  font-family: var(--tl-font);
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asideMenuBox .el-menu-item:hover { color: var(--el-menu-hover-text-color); background-color: transparent; }
.asideMenuBox .el-menu-item.is-active { color: #ffffff; background-color: var(--el-menu-active-bg-color); }

.asideMenuBox .indexMenu.el-menu-item {
  margin: 0 8px 12px;
  padding: 0 16px !important;
  color: #ffffff;
  border-radius: 4px;
}
.asideMenuBox .indexMenu.el-menu-item.is-active,
.asideMenuBox .indexMenu.el-menu-item:hover { background-color: #ffffff; color: var(--tl-blue-text); }
.asideMenuBox .menuSvg { width: 20px; height: 20px; margin-right: 8px; color: inherit; flex-shrink: 0; }

.asideMenuBox .el-sub-menu { position: relative; margin: 0 8px 12px; border-radius: 4px; list-style: none; }
.asideMenuBox .el-sub-menu__title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 38px;
  line-height: 38px;
  padding: 0 16px !important;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #ffffff;
  font-family: var(--tl-font);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.asideMenuBox .el-sub-menu.is-active > .el-sub-menu__title,
.asideMenuBox .el-sub-menu__title:hover { background-color: #ffffff; color: var(--tl-blue-text); }
.asideMenuBox .subMenuText { flex-grow: 1; max-width: 170px; overflow: hidden; white-space: nowrap; }
.asideMenuBox .subMenuDownArrow { width: 12px; height: 12px; color: inherit; flex-shrink: 0; transition: transform 0.2s; }
.js .asideMenuBox .el-sub-menu:not(.is-opened) .subMenuDownArrow { transform: rotate(270deg); }
.js .asideMenuBox .el-sub-menu:not(.is-opened) > .el-menu--inline { display: none; }
.asideMenuBox .el-menu--inline { background: transparent; }

.asideMenuBox :focus-visible { outline-color: #ffffff; }
.asideMenuBox .indexMenu:focus-visible, .asideMenuBox .el-sub-menu__title:focus-visible { outline-offset: 1px; }

.menuCollapseIconBox { flex: none; width: 100%; height: 68px; padding: 24px 0 0 24px; }
.menuCollapseButton {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c0c0c5;
  cursor: pointer;
}
.menuCollapseButton:hover { color: #ffffff; }
.menuCollapseIcon { width: 20px; height: 20px; }

/* Menu replié : icônes seules, sous-menu en fenêtre flottante au survol et au focus. */
html.is-menu-collapsed .asideMenuBox .menuText,
html.is-menu-collapsed .asideMenuBox .subMenuText {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html.is-menu-collapsed .asideMenuBox .subMenuDownArrow { display: none; }
html.is-menu-collapsed .asideMenuBox .indexMenu.el-menu-item { margin: 0 15px 12px; padding: 0 9px !important; }
html.is-menu-collapsed .asideMenuBox .el-sub-menu { margin: 0 15px 12px; }
html.is-menu-collapsed .asideMenuBox .el-sub-menu__title { padding: 0 9px !important; }
html.is-menu-collapsed .asideMenuBox .menuSvg { margin-right: 0; }
html.is-menu-collapsed .aside,
html.is-menu-collapsed .asideMenuBox,
html.is-menu-collapsed .asideMenuBox > [data-menu] { overflow: visible; }
html.is-menu-collapsed .menuCollapseIconBox { padding-left: 24px; }
html.is-menu-collapsed .asideMenuBox .el-sub-menu > .el-menu--inline {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100% + 23px);
  z-index: 2000;
  min-width: 164px;
  padding: 8px;
  border-radius: 4px;
  background-color: var(--tl-aside-bg);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.18);
}
html.is-menu-collapsed .asideMenuBox .el-sub-menu::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 24px;
  height: 100%;
}
html.is-menu-collapsed .asideMenuBox .el-sub-menu:hover > .el-menu--inline,
html.is-menu-collapsed .asideMenuBox .el-sub-menu:focus-within > .el-menu--inline { display: block; }
html.is-menu-collapsed .asideMenuBox .el-menu--inline .el-menu-item {
  margin: 0 0 4px;
  padding: 0 24px !important;
}
html.is-menu-collapsed .asideMenuBox .el-menu--inline .menuEntry:last-child .el-menu-item { margin-bottom: 0; }

/* 6. Sous-en-tête (SubHeader, Breadcrumb, TabsNav) ------------------------- */
.subHeaderBox {
  flex: none;
  height: var(--tl-subheader-h);
  padding: 9px 0 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: inset 0 4px 6px rgba(40, 120, 255, 0.12);
}
.subHeaderBox .firstRow { display: flex; overflow: hidden; padding-left: 12px; margin-bottom: 12px; }
.subHeaderBox .secondRow { display: flex; justify-content: space-between; min-width: 200px; }
.subHeaderBox .tabsBox { width: calc(100% - 90px); min-width: 0; }
.subHeaderBox .btnBox { display: flex; margin-right: 23px; }
.pageBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 2px 2px rgba(47, 46, 63, 0.5), inset 0 0 1px rgba(47, 46, 63, 0.5);
  color: #2f2e3f;
  cursor: pointer;
}
.pageBtn + .pageBtn { margin-left: 8px; }
.pageBtn .pageBtnSvg { width: 18px; height: 18px; opacity: 0.7; }
.pageBtn:hover .pageBtnSvg { opacity: 1; color: var(--tl-blue-text); }

.breadcrumb.el-breadcrumb { height: 16px; overflow: hidden; font-size: 12px; line-height: 16px; color: #2f2e3f; }
.breadcrumbs { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.el-breadcrumb__item { display: inline-flex; align-items: center; }
.el-breadcrumb__inner, .el-breadcrumb__inner.is-link { color: #2f2e3f; font-weight: 400; text-decoration: none; }
.el-breadcrumb__inner.is-link:hover { color: var(--tl-blue-text); text-decoration: underline; }
.el-breadcrumb__inner.is-current { color: var(--tl-blue-text); }
.breadcrumb .el-breadcrumb__separator { margin: 0 9px; font-weight: 700; color: #c0c0c5; }

.tabsNav.el-tabs { height: 28px; margin: 0 12px; }
.tabsNav .el-tabs__header { height: 28px; margin: 0; padding: 0; border: none; border-bottom: none !important; }
.tabsNav .el-tabs__nav-wrap { position: relative; height: 28px; margin: 0; overflow: hidden; }
.tabsNav .el-tabs__nav-wrap::after { content: none; }
.tabsNav .el-tabs__nav-wrap.is-scrollable { padding: 0 34px; }
.tabsNav .el-tabs__nav-scroll { height: 28px; overflow: hidden; scroll-behavior: smooth; }
.tabsNav .el-tabs__nav {
  display: flex;
  height: 28px;
  margin: 0;
  padding: 0 0 1px;
  list-style: none;
  border: none !important;
  white-space: nowrap;
}
.tabsNav .el-tabs__item {
  display: flex;
  flex: none;
  align-items: center;
  height: 27px;
  padding: 0 6px 0 10px !important;
  border: none;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(47, 46, 63, 0.5), inset 0 0 1px rgba(47, 46, 63, 0.5);
  color: #2f2e3f;
  font-size: 14px;
  font-weight: 500;
  line-height: 27px;
  overflow: hidden;
}
.tabsNav .el-tabs__item:first-child { padding: 0 20px !important; }
.tabsNav .el-tabs__item:not(:first-child) { margin-left: 4px; }
.tabsNav .el-tabs__item:hover { color: var(--tl-blue-text); box-shadow: inset 0 0 0 1px var(--tl-blue), 0 1px 2px rgba(47, 46, 63, 0.5); }
.tabsNav .el-tabs__item.is-active {
  color: #ffffff;
  background: var(--tl-blue-text);
  box-shadow: 0 1px 2px rgba(47, 46, 63, 0.5);
}
.tabsNav .el-tabs__link { color: inherit; text-decoration: none; white-space: nowrap; }
.tabsNav .el-tabs__item:focus-within { outline: 2px solid var(--tl-focus); outline-offset: 1px; }
.tabsNav .el-tabs__link:focus-visible { outline: none; }
.tabsNav .is-icon-close {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px !important;
  height: 12px !important;
  margin-left: 10px;
  overflow: visible;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.tabsNav .is-icon-close .icon { width: 8px; height: 8px; }
.tabsNav .is-icon-close:hover { border-color: #c0c0c5; background-color: #c0c0c5; color: #ffffff; }
.tabsNav .is-icon-close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.tabsNav .el-tabs__nav-prev, .tabsNav .el-tabs__nav-next {
  position: absolute;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(47, 46, 63, 0.5), inset 0 0 1px rgba(47, 46, 63, 0.5);
  color: #2f2e3f;
  cursor: pointer;
}
.tabsNav .el-tabs__nav-prev { left: 0; }
.tabsNav .el-tabs__nav-next { right: 0; }
.tabsNav .el-tabs__nav-prev:disabled, .tabsNav .el-tabs__nav-next:disabled { opacity: 0.5; cursor: default; }
.tabsArrow { width: 18px; height: 18px; opacity: 0.5; }
.tabsArrow--next { transform: rotate(180deg); }

/* 7. Messages (el-message d'origine) --------------------------------------- */
.messageStack { display: grid; gap: 8px; padding: 12px 12px 0; }
.messageStack:not(:has(.el-message)) { display: none; }
.js .layoutBox .messageStack {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 2500;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 0;
  transform: translateX(-50%);
  pointer-events: none;
}
.messageStack .el-message {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  display: flex;
  align-items: center;
  min-width: min(380px, calc(100vw - 32px));
  max-width: 100%;
  margin: 0;
  padding: 15px 44px 15px 20px;
  border: 1px solid var(--el-message-border-color);
  border-radius: 4px;
  background-color: var(--el-message-bg-color);
  pointer-events: auto;
  transition: opacity 0.3s, transform 0.3s;
}
.messageStack .el-message.is-leaving { opacity: 0; transform: translateY(-100%); }
.el-message__icon { width: 16px; height: 16px; flex: none; margin-right: 10px; }
.messageStack .el-message__content { margin: 0; font-size: 14px; line-height: 1.4; }
.el-message--success .el-message__content { color: #157a26; }
.el-message--warning .el-message__content { color: var(--tl-orange-text); }
.el-message--info .el-message__content { color: var(--tl-gray-text); }
.el-message--error .el-message__content { color: var(--tl-red-text); }
.messageStack .el-message__closeBtn {
  position: absolute;
  top: 50%;
  right: 12px;
  display: inline-flex;
  padding: 4px;
  border: 0;
  background: transparent;
  color: #c0c0c5;
  transform: translateY(-50%);
  cursor: pointer;
}
.messageStack .el-message__closeBtn:hover { color: #6d6c78; }
.el-message__closeIcon { width: 14px; height: 14px; }
.messageStack--inline { padding: 0; margin-bottom: 20px; }
.messageStack--inline.messageStack { position: static; transform: none; width: auto; max-width: none; }
.messageStack--inline .el-message { min-width: 0; width: 100%; }

/* 8. Boutons (ColorButton d'origine, et classes .btn des templates des apps) */
.colorBtn, .btn {
  --cb-color: var(--tl-blue);
  --cb-text: var(--tl-blue-text);
  --cb-hover: var(--tl-blue-hover);
  --cb-disabled: var(--tl-blue-disabled);
  --cb-fill: var(--tl-blue-text);
  --cb-fill-hover: #3a82f5;
  --cb-padding: 0 12px;
  --cb-height: 30px;
  --cb-font-size: 12px;
  --cb-gap: 4px;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--cb-gap);
  height: var(--cb-height);
  min-height: 19px;
  padding: var(--cb-padding);
  border: 1px solid var(--cb-color);
  border-radius: 4px;
  background-color: #ffffff;
  color: var(--cb-text);
  font-family: var(--tl-control-font);
  font-size: var(--cb-font-size);
  font-weight: 400;
  line-height: 16px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: middle;
}
.colorBtn .btnSvg, .colorBtn .icon, .btn .icon, .btn .btnSvg {
  width: 16px;
  height: 16px;
  color: var(--cb-color);
  flex: none;
}
.colorBtn:hover, .btn:hover { border-color: var(--cb-hover); color: var(--cb-text); }
.colorBtn:hover .btnSvg, .colorBtn:hover .icon, .btn:hover .icon { color: var(--cb-hover); }
.colorBtn:active:not(:disabled), .btn:active:not(:disabled) { transform: scale(0.98); }
.colorBtn:disabled, .colorBtn[aria-disabled="true"], .btn:disabled, .btn.is-disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed;
  border-color: var(--cb-disabled);
  color: var(--cb-disabled);
}
.colorBtn:disabled .btnSvg, .btn:disabled .icon { color: var(--cb-disabled); }
.colorBtn + .colorBtn, .btn + .btn, .inline-form + .inline-form, .btn + .inline-form, .inline-form + .btn { margin-left: 8px; }

/* Bouton plein (« dark ») : fond coloré, texte blanc. */
.colorBtn.is-dark, .btn--primary, .btn--danger {
  background-color: var(--cb-fill);
  border-color: var(--cb-fill);
  color: #ffffff;
}
.colorBtn.is-dark .btnSvg, .colorBtn.is-dark .icon, .btn--primary .icon, .btn--danger .icon { color: #ffffff; }
.colorBtn.is-dark:hover, .btn--primary:hover, .btn--danger:hover {
  background-color: var(--cb-fill-hover);
  border-color: var(--cb-fill-hover);
  color: #ffffff;
}
.colorBtn.is-dark:hover .btnSvg, .btn--primary:hover .icon, .btn--danger:hover .icon { color: #ffffff; }
.colorBtn.is-dark:disabled, .btn--primary:disabled, .btn--danger:disabled {
  background-color: var(--cb-disabled);
  border-color: var(--cb-disabled);
  color: #ffffff;
}

/* Couleurs par action (ColorButton) */
.colorBtn--dark, .btn--dark {
  --cb-color: var(--tl-navy); --cb-text: var(--tl-navy); --cb-hover: var(--tl-navy-hover);
  --cb-disabled: var(--tl-navy-disabled); --cb-fill: var(--tl-navy); --cb-fill-hover: #4a495c;
}
.colorBtn--warning {
  --cb-color: var(--tl-orange); --cb-text: var(--tl-orange-text); --cb-hover: var(--tl-orange-hover);
  --cb-disabled: var(--tl-orange-disabled); --cb-fill: var(--tl-orange-text); --cb-fill-hover: #c26700;
}
.colorBtn--success {
  --cb-color: var(--tl-green); --cb-text: var(--tl-green-text); --cb-hover: var(--tl-green-hover);
  --cb-disabled: var(--tl-green-disabled); --cb-fill: var(--tl-green-text); --cb-fill-hover: #0c9265;
}
.colorBtn--danger, .btn--danger, .btn--link-danger {
  --cb-color: var(--tl-red); --cb-text: var(--tl-red-text); --cb-hover: var(--tl-red-hover);
  --cb-disabled: var(--tl-red-disabled); --cb-fill: var(--tl-red-text); --cb-fill-hover: #e04646;
}
/* Vert clair #28CD41 d'origine (« Configuration notifications ») : texte et fond plein foncés (AA). */
.colorBtn--lime {
  --cb-color: var(--tl-lime); --cb-text: var(--tl-lime-text); --cb-hover: var(--tl-lime-hover);
  --cb-disabled: var(--tl-lime-disabled); --cb-fill: var(--tl-lime-text); --cb-fill-hover: #1f9b33;
}

/* Tailles (padding / hauteur) : large 14/40 (police 14), normal 12/30, small 9/27, mini 3/24 */
.colorBtn--large { --cb-padding: 0 14px; --cb-height: 40px; --cb-font-size: 14px; --cb-gap: 10px; }
.colorBtn--small, .btn { --cb-padding: 0 9px; --cb-height: 27px; }
.colorBtn--mini { --cb-padding: 0 3px; --cb-height: 24px; }

/* Variantes « lien » et « transparent » des templates des apps */
.btn--link, .btn--link-danger, .btn--ghost {
  border-color: transparent;
  background: transparent;
  --cb-padding: 0 4px;
}
.btn--link:hover, .btn--link-danger:hover { border-color: transparent; text-decoration: underline; }
.btn--ghost:hover { border-color: transparent; background: rgba(40, 120, 255, 0.08); }
.btn--block { width: 100%; }
.inline-form { display: inline-flex; margin: 0; vertical-align: middle; }

/* Bouton Element Plus (boîte de confirmation, connexion) */
.el-button {
  font-family: var(--tl-control-font);
  min-width: 80px;
  padding: 8px 15px;
  border-radius: 4px;
}
.el-button--primary {
  --el-button-bg-color: var(--tl-blue-text);
  --el-button-border-color: var(--tl-blue-text);
  --el-button-hover-bg-color: #3a82f5;
  --el-button-hover-border-color: #3a82f5;
}
.el-button--default:hover { color: var(--tl-blue-text); }
.el-button + .el-button { margin-left: 12px; }

/* 9. Étiquettes (ColorTag d'origine) --------------------------------------- */
.badge, .colorTag {
  --tag-color: var(--tl-gray);
  --tag-text: var(--tl-gray-text);
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 8px;
  border: 1px solid var(--tag-color);
  border-radius: 13px;
  background: #ffffff;
  color: var(--tag-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
  vertical-align: middle;
}
.badge--info { --tag-color: var(--tl-blue); --tag-text: var(--tl-blue-text); }
.badge--success { --tag-color: var(--tl-green); --tag-text: var(--tl-green-text); }
.badge--warning { --tag-color: var(--tl-orange); --tag-text: var(--tl-orange-text); }
.badge--danger { --tag-color: var(--tl-red); --tag-text: var(--tl-red-text); }
.badge--navy { --tag-color: var(--tl-navy); --tag-text: var(--tl-navy); }
.badge--purple { --tag-color: var(--tl-purple); --tag-text: var(--tl-purple-text); }
/* Étiquette pleine (option `dark` de ColorTag) : fond de la variante foncée, texte blanc ≥ 4,5:1. */
.badge--solid {
  border-color: var(--tag-text);
  background-color: var(--tag-text);
  color: #ffffff;
}

/* 10. Contenu générique (cartes, listes de détails, alertes…) ------------- */
.pageHeaderBox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 16px 24px;
  border-radius: 4px;
  background-color: var(--tl-panel-bg);
}
.pageHeaderBox__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 26px; }
.pageHeaderBox__subtitle { margin: 2px 0 0; color: var(--tl-text-secondary); font-size: 13px; }
.operateBar { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; gap: 8px; }
.operateBar .colorBtn + .colorBtn { margin-left: 0; }

.card {
  margin-bottom: 12px;
  padding: 20px 24px;
  border: 0;
  border-radius: 4px;
  background-color: var(--tl-panel-bg);
  font-size: 14px;
}
.card--flush { padding: 0; overflow: hidden; }
.card--filters { padding: 11px; }
.card--form { max-width: 660px; }
.card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -20px -24px 16px;
  padding: 16px 24px 11px;
  border-bottom: 1px solid var(--tl-border);
  color: #2f2e3f;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.card__title .icon { width: 18px; height: 18px; color: var(--tl-blue); }
.card--flush > .card__title, .card__title--padded { margin: 0 0 12px; }
.card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 20px -24px -20px;
  padding: 16px 24px;
  border-top: 1px solid var(--tl-border);
}
.card__footer .btn + .btn, .card__footer .inline-form + .inline-form { margin-left: 0; }
.card--flush > .card__footer { margin: 0; }
.section-title { margin: 16px 0 8px; font-size: 14px; font-weight: 600; }

.grid { display: grid; gap: 12px; }
.grid > .card, .grid > section > .card { margin-bottom: 0; }
.grid + .grid, .grid + .card, .card + .grid { margin-top: 12px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; margin-bottom: 12px; }
.grid--stats { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin-bottom: 12px; }

.detail-list { display: grid; margin: 0; }
.detail-list__item {
  display: grid;
  grid-template-columns: minmax(120px, 35%) 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #ebebec;
  font-size: 14px;
  line-height: 20px;
}
.detail-list__item:last-child { border-bottom: 0; }
.detail-list dt { color: var(--tl-text-secondary); font-weight: 400; }
.detail-list dd { margin: 0; color: #2f2e3f; font-weight: 500; overflow-wrap: anywhere; }
.detail-list--inline { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.detail-list--inline .detail-list__item { grid-template-columns: 1fr; gap: 2px; padding: 0; border: 0; }

/* Boîte « Détails » en lecture seule (EditBox désactivée d'origine : messages, paiements) :
   libellé au-dessus de la valeur, deux colonnes (une sur téléphone) ; texte long dans un cadre
   gris (`detailText`, textarea désactivée d'origine), focalisable s'il défile. */
.detailBox { padding: 0 60px; overflow-wrap: anywhere; }
.detailBox > .el-alert { margin-bottom: 20px; }
.detailBox .detailForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.detailBox .detailForm__item { min-width: 0; margin: 0 0 20px; }
.detailBox .detailForm__item--wide { grid-column: 1 / -1; }
.detailBox .detailForm dt { padding: 0 0 6px; color: var(--tl-text-secondary); font-size: 14px; line-height: 19px; }
.detailBox .detailForm dd { margin: 0; color: var(--tl-text); font-size: 14px; font-weight: 500; line-height: 22px; }
.detailBox .detailForm dd a { color: var(--tl-blue-text); text-decoration: none; }
.detailBox .detailForm dd a:hover { text-decoration: underline; }
.detailForm__note { margin: 6px 0 0; color: var(--tl-text-secondary); font-size: 12px; font-weight: 400; line-height: 18px; }
.detailText {
  min-height: 40px;
  padding: 10px 15px;
  border-radius: 4px;
  background-color: #f5f7fa;
  box-shadow: 0 0 0 1px #e4e7ed inset;
  color: var(--tl-text);
  font-family: var(--tl-control-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.detailText--code { max-height: 240px; overflow: auto; font-family: var(--font-mono); font-size: 12px; line-height: 18px; }
.detailText:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 1px; }

.timeline { margin: 0; padding: 0; list-style: none; }
.timeline__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 9px 0;
  border-bottom: 1px solid #ebebec;
  font-size: 14px;
}
.timeline__item:last-child { border-bottom: 0; }
.card--flush .timeline { padding: 0 24px 12px; }

.permission-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.permission-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.permission-list .icon { color: var(--tl-green); }

.code-block {
  margin: 0;
  padding: 12px 16px;
  overflow-x: auto;
  border: 1px solid #e6e7eb;
  border-radius: 4px;
  background: #fbfcff;
  white-space: pre-wrap;
  font-size: 13px;
}

.text-muted { color: var(--tl-text-secondary); }
.text-danger { color: var(--tl-red-text); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.cell-secondary { display: block; color: var(--tl-text-secondary); font-size: 12px; font-weight: 400; line-height: 18px; }
.cell-truncate { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* Alertes (el-alert claires d'Element Plus) */
.alert, .el-alert {
  --alert-color: var(--tl-gray);
  --alert-text: var(--tl-gray-text);
  --alert-bg: #f4f4f5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 16px;
  border-radius: 4px;
  background-color: var(--alert-bg);
  color: var(--tl-text);
  font-size: 14px;
  line-height: 20px;
}
.alert > .icon, .el-alert__icon { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--alert-color); }
.alert__text, .el-alert__description { margin: 0; color: var(--alert-text); }
.el-alert__content { min-width: 0; }
.el-alert__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--alert-text); line-height: 20px; }
.alert--info, .el-alert--info { --alert-color: var(--tl-gray); --alert-text: var(--tl-gray-text); --alert-bg: #f4f4f5; }
.alert--success, .el-alert--success { --alert-color: #28cd41; --alert-text: #157a26; --alert-bg: #eafaec; }
.alert--warning, .el-alert--warning { --alert-color: var(--tl-orange); --alert-text: var(--tl-orange-text); --alert-bg: #fff4e5; }
.alert--danger, .el-alert--error { --alert-color: var(--tl-red); --alert-text: var(--tl-red-text); --alert-bg: #ffefef; }

/* État vide (texte gris centré, comme el-table__empty-text) */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px 16px;
  color: var(--tl-gray-text);
  text-align: center;
}
.empty-state__icon { display: none; }
.empty-state__message { margin: 0; max-width: 32rem; font-size: 14px; line-height: 20px; color: var(--tl-gray-text); }

/* Indicateurs (statisticalCard d'origine, style des cartes de l'accueil) */
.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 24px;
  border-radius: 4px;
  background-color: var(--tl-panel-bg);
}
.stat-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eaf2ff;
  color: var(--tl-blue);
}
.stat-card__icon .icon { width: 20px; height: 20px; }
.stat-card--success .stat-card__icon { background: #e8f8f2; color: var(--tl-green); }
.stat-card--warning .stat-card__icon { background: #fff4e5; color: var(--tl-orange); }
.stat-card--danger .stat-card__icon { background: #ffefef; color: var(--tl-red); }
.stat-card--neutral .stat-card__icon { background: #f4f4f5; color: var(--tl-gray); }
.stat-card__label { margin: 0; color: #2f2e3f; font-size: 14px; font-weight: 600; line-height: 20px; }
.stat-card__value { margin: 4px 0 0; color: #2f2e3f; font-size: 28px; font-weight: 400; line-height: 36px; font-variant-numeric: tabular-nums; }
.stat-card__hint { margin: 0; color: var(--tl-text-secondary); font-size: 12px; }
.stat-card__link { display: inline-flex; align-items: center; min-height: 24px; font-size: 12px; }

.confirm__title { display: flex; align-items: center; gap: 8px; }

/* Arbre des régions (gestion des régions) : indentation par niveau */
.tree-label { display: inline-flex; align-items: center; gap: 8px; }
.tree-label__branch { color: #c0c0c5; }
.tree-level-1 { padding-left: 20px; }
.tree-level-2 { padding-left: 40px; }
.tree-level-3 { padding-left: 60px; }
.tree-level-4 { padding-left: 80px; }
.tree-level-5, .tree-level-6, .tree-level-7, .tree-level-8 { padding-left: 100px; }

.remote-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.remote-actions .inline-form + .inline-form, .remote-actions .btn + .btn { margin-left: 0; }

/* Tableaux autonomes des templates des apps (même rendu que el-table) */
.table-wrap { position: relative; overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; color: #2f2e3f; }
.table > caption { caption-side: top; }
.table th, .table td {
  height: 45px;
  padding: 2px 10px;
  border-bottom: 1px solid #e6e7eb;
  text-align: left;
  vertical-align: middle;
  line-height: 20px;
}
.table thead th { height: 41px; background-color: #eaf2ff; border-bottom: 0; font-weight: 500; white-space: nowrap; }
.table tbody th { font-weight: 500; }
.table .actions { white-space: nowrap; }

/* 11. Listes (viewPageBox, RegionTree, SearchBox, TotalOperateBar, tableBox, PaginationBox) */
.viewPageBox--list {
  display: flex;
  min-width: 686px;
  height: 100%;
  padding: 12px 0 0 12px;
}
.contentBox {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
}
.listBox { display: flex; flex-direction: column; flex: 1 0 auto; }

/* RegionTree */
.regionTreeBox {
  position: relative;
  flex: none;
  width: 220px;
  min-width: 220px;
  height: 100%;
  margin-right: 12px;
  overflow: auto;
  border-radius: 5px;
  background-color: var(--tl-panel-bg);
  backdrop-filter: blur(10px);
}
.regionTreeBox.notShow { width: 12px; min-width: 12px; overflow: visible; }
.regionTreeBox.notShow .regionTreeTitle, .regionTreeBox.notShow .regionArea { display: none; }
.regionTreeTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px;
  border-bottom: 1px solid #ebebec;
  color: #2f2e3f;
  font-size: 14px;
  line-height: 22px;
}
.regionTreeTitle .textArea { margin: 0; font-size: 14px; font-weight: 400; line-height: 22px; }
.regionTreeTitle .iconArea { display: flex; align-items: center; gap: 4px; }
.regionTreeTitle .iconLink {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2f2e3f;
  cursor: pointer;
}
.regionTreeTitle .iconLink:hover { color: var(--tl-blue-text); }
.regionTreeTitle .iconSvg { width: 14px; height: 14px; vertical-align: middle; }
.regionTreeTitle .regionExpandIcon { transform: rotate(180deg); }
.regionTreeTitle [aria-pressed="false"] .regionExpandIcon { transform: none; }
.regionTreeBox .closeTab {
  position: absolute;
  top: calc(50% - 18px);
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  width: 12px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 2px 0 0 2px;
  background: rgba(40, 120, 255, 0.1);
  cursor: pointer;
}
.closeTab .tabSvg { width: 12px; height: 12px; color: var(--tl-blue); transform: rotate(90deg); }
.closeTab[aria-expanded="false"] .tabSvg { transform: rotate(-90deg); }
.regionTreeBox .regionArea { width: 208px; height: calc(100% - 45px); overflow: auto; padding: 4px 0 12px; }
.regionTree { margin: 0; padding: 0; list-style: none; background: transparent; font-size: 14px; }
.regionTree .el-tree-node { position: relative; padding-left: 0; }
.regionTree .el-tree-node__content {
  display: flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px 2px 36px;
  color: #2f2e3f;
  text-decoration: none;
  line-height: 20px;
}
.regionTree .el-tree-node__content:hover { font-weight: 700; }
.regionTree .is-current > .el-tree-node__content { background-color: transparent; color: var(--tl-blue-text); font-weight: 700; }
.regionTree .el-tree-node__label { overflow-wrap: anywhere; }
.regionTree .tree-level-1 > .el-tree-node__content { padding-left: 54px; }
.regionTree .tree-level-2 > .el-tree-node__content { padding-left: 72px; }
.regionTree .tree-level-3 > .el-tree-node__content { padding-left: 90px; }
.regionTree .tree-level-4 > .el-tree-node__content,
.regionTree .tree-level-5 > .el-tree-node__content,
.regionTree .tree-level-6 > .el-tree-node__content,
.regionTree .tree-level-7 > .el-tree-node__content,
.regionTree .tree-level-8 > .el-tree-node__content { padding-left: 108px; }
.regionTree .el-tree-node[class*="tree-level-"] { padding-left: 0; }
.regionTree.is-collapsed .el-tree-node:not(.tree-level-0) { display: none; }
.regionTree__clear {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 12px 6px;
  color: var(--tl-blue-text);
  font-size: 12px;
  text-decoration: none;
}
.regionTree__clear:hover { text-decoration: underline; }
.regionTree__clearIcon { width: 10px; height: 10px; }
.regionTreeBox .el-tree__empty-block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60%;
  padding: 0 24px;
  text-align: center;
}
.regionTreeBox .el-tree__empty-text { position: static; transform: none; color: var(--tl-gray-text); font-size: 14px; }

/* SearchBox / SearchItem */
.searchBox {
  display: flex;
  flex: none;
  width: 100%;
  margin-bottom: 12px;
  padding: 11px;
  border-radius: 4px;
  background: var(--tl-panel-bg);
}
.searchFormBox {
  --el-font-size-base: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}
.searchFormBox .el-form-item { display: flex; align-items: center; margin: 5px; }
.searchFormBox .el-form-item__label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 130px;
  height: 30px;
  padding: 0;
  color: var(--el-text-color-primary);
  font-size: 12px;
  line-height: 16px;
  text-align: right;
}
.searchFormBox .el-form-item__label::after { content: "\ff1a"; }
.searchFormBox .el-form-item__content { display: flex; align-items: center; width: auto; flex: none; line-height: 30px; }
.searchFormBox .el-input, .searchFormBox .el-select { width: 200px; }
.searchFormBox .el-input .el-input__wrapper { box-shadow: 0 0 0 1px var(--el-text-color-regular) inset !important; }
.searchFormBox .el-input__inner { height: 30px; line-height: 30px; font-size: 12px; opacity: 0.85; }
.searchFormBox .el-input__inner[type="date"] { opacity: 1; }
.searchFormBox .searchItem--checkbox .el-form-item__content { padding-left: 130px; }
.searchFormBox .searchItem--checkbox .el-checkbox__label { font-size: 12px; color: var(--el-text-color-primary); }
.searchFormBox .btnBox { display: flex; margin: 5px; }
.searchFormBox .btnBox .colorBtn { --cb-padding: 0 12px; --cb-height: 30px; }
.searchFormBox .btnBox > .colorBtn:first-child { margin-left: 0; }
.searchFormBox__errors { flex-basis: 100%; margin: 5px; }
.searchFormBox .el-form-item.is-error { flex-wrap: wrap; }
.searchFormBox .el-form-item__error { flex-basis: 100%; padding-left: 130px; }

/* TotalOperateBar */
.totalOperateBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 39px;
  padding: 12px 24px 0;
  border-radius: 4px 4px 0 0;
  background: var(--tl-panel-bg);
  line-height: 27px;
}
.totalOperateBar > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.totalOperateBar .colorBtn + .colorBtn { margin-left: 8px; }

/* infoBox + tableBox (el-table) */
.infoBox { flex-grow: 1; background-color: var(--tl-panel-bg); }
.tableBox { padding: 12px 12px 0; }
.appTable.el-table {
  --el-table-bg-color: transparent;
  --el-table-row-hover-bg-color: transparent;
  --el-table-header-bg-color: #eaf2ff;
  overflow: visible;
  background: transparent;
}
/* position: relative : les textes réservés aux lecteurs d'écran (position absolue) restent dans
   la zone qui défile, sans élargir la page. */
.appTable__scroll { position: relative; overflow-x: auto; }
.appTable__scroll:focus-visible { outline-offset: 2px; }
.tableBox .appTable .el-table__body {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}
.tableBox .appTable th,
.tableBox .appTable td {
  height: 60px;
  padding: 2px 5px;
  border-bottom: 1px solid var(--el-border-color-lighter, #e6e7eb);
  background: transparent;
  color: #2f2e3f;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  vertical-align: middle;
}
.tableBox .appTable th:first-child, .tableBox .appTable td:first-child { padding-left: 12px; }
.tableBox .appTable thead th {
  height: 41px;
  border-bottom: 0;
  background-color: #eaf2ff;
  font-weight: 500;
  white-space: nowrap;
}
.tableBox .appTable thead th .cell { padding: 0; line-height: 20px; font-size: 14px; color: #2f2e3f; }
/* Element Plus coupe le texte des cellules n'importe où (`.el-table .cell { word-break: break-all }`,
   « Numé ro ») : coupure entre les mots seulement ; le tableau défile s'il manque de place.
   `overflow-wrap: normal` : un mot ne réduit jamais la largeur minimale d'une colonne. */
.el-table .cell,
.tableBox .appTable th,
.tableBox .appTable td { word-break: normal; overflow-wrap: normal; }
.tableBox .appTable thead th.actions .cell { white-space: nowrap; }
.tableBox .appTable thead th:first-child { border-radius: 2px 0 0 2px; }
.tableBox .appTable thead th:last-child { border-radius: 0 2px 2px 0; }
.tableBox .appTable tbody th { font-weight: 500; }
.tableBox .appTable tbody th a, .tableBox .appTable tbody td a:not(.btn):not(.colorBtn) { color: var(--tl-blue-text); text-decoration: none; }
.tableBox .appTable tbody th a:hover, .tableBox .appTable tbody td a:not(.btn):not(.colorBtn):hover { text-decoration: underline; }
.tableBox .appTable .numeric { text-align: right; }
.tableBox .appTable .actions { white-space: nowrap; }
.tableBox .appTable td.actions { width: 1%; }
/* OperateBar d'une ligne : boutons icône seule (ColorButton mini, 24 px) côte à côte, à 8 px,
   formulaires de confirmation compris. */
.tableBox .appTable .actions .operateBar { flex-wrap: nowrap; }
.operateBar > .inline-form + .inline-form,
.operateBar > .colorBtn + .inline-form,
.operateBar > .inline-form + .colorBtn { margin-left: 0; }
.colorBtn.colorBtn--mini { min-width: 24px; }
.tableBox .appTable .cell-break { min-width: 120px; overflow-wrap: anywhere; }
.tableBox .appTable .cell-nowrap { white-space: nowrap; }
.tableBox .appTable tbody tr:hover > * { background-color: rgba(234, 242, 255, 0.45); }
.tableBox .appTable .appTable__empty {
  height: 60px;
  padding: 12px;
  text-align: center;
  color: var(--tl-gray-text);
  font-weight: 400;
}
.tableBox .appTable .el-table__empty-text { color: var(--tl-gray-text); font-size: 14px; line-height: 20px; }
.tableBox .appTable tbody tr.el-table__empty-row:hover > * { background: transparent; }
/* Liens d'action des lignes : ColorButton mini (« Modifier » en bleu nuit). */
.tableBox .appTable .actions .btn { --cb-padding: 0 6px; --cb-height: 24px; }
.tableBox .appTable .actions .btn--link { border-color: var(--cb-color); }
.tableBox .appTable .actions .btn:has(use[href$="#edit"]) {
  --cb-color: var(--tl-navy); --cb-text: var(--tl-navy); --cb-hover: var(--tl-navy-hover);
}
.tableBox .appTable .actions .btn--link:hover { text-decoration: none; }

/* PaginationBox (el-pagination) */
.paginationBox { position: relative; flex-shrink: 0; margin-bottom: 12px; padding: 20px 48px 20px 24px; overflow-x: auto; }
.paginationBox .el-pagination {
  --el-pagination-button-width: 40px;
  --el-pagination-button-height: 40px;
  --el-pagination-bg-color: rgba(255, 255, 255, 0.8);
  --el-pagination-button-disabled-bg-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  padding: 0;
  white-space: nowrap;
  font-size: 14px;
  color: #2f2e3f;
}
.paginationBox .el-pagination__total { flex-shrink: 0; margin-right: 16px; color: #6d6c78; font-size: 14px; line-height: 40px; }
.paginationBox .el-pagination__rightwrapper { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; }
.paginationBox .el-pagination__sizes { display: flex; align-items: center; margin: 0 16px 0 0; }
.paginationBox .el-select { width: 100px; line-height: 40px; }
.paginationBox .el-select .el-input__wrapper { padding: 0 28px 0 11px; box-shadow: 0 0 0 1px #c0c0c5 inset; background-color: rgba(255, 255, 255, 0.8); }
.paginationBox .el-select .el-input__inner { height: 40px; line-height: 40px; font-size: 14px; color: #6d6c78; cursor: pointer; }
.paginationBox .btn-prev, .paginationBox .btn-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  border: 1px solid #c0c0c5;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.8);
  color: #2f2e3f;
}
.paginationBox .btn-prev:hover, .paginationBox .btn-next:hover { color: var(--tl-blue-text); }
.paginationBox .btn-prev.is-disabled, .paginationBox .btn-next.is-disabled {
  border-color: var(--el-disabled-border-color, #e4e7ed);
  color: #c0c0c5;
  cursor: not-allowed;
}
.paginationBox .el-icon { width: 18px; height: 18px; }
.paginationBox .el-pager { display: flex; align-items: center; margin: 0 4px; padding: 0; list-style: none; }
.paginationBox .el-pager li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  margin: 0 4px;
  padding: 0;
  border: 1px solid #c0c0c5;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.8);
  color: #2f2e3f;
  font-size: 14px;
  line-height: 40px;
}
.paginationBox .el-pager li > a, .paginationBox .el-pager li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 4px;
  color: inherit;
  text-decoration: none;
}
.paginationBox .el-pager li:hover:not(.is-active):not(.more) { color: var(--tl-blue-text); }
.paginationBox .el-pager li.is-active { border: none; background-color: var(--tl-blue-text); color: #ffffff; }
.paginationBox .el-pager li.more { border: none; background-color: transparent; min-width: 24px; }
.paginationBox .el-pagination__jump { display: flex; align-items: center; margin-left: 16px; color: #6d6c78; font-size: 14px; line-height: 40px; }
.paginationBox .el-pagination__editor { width: 50px; min-width: 40px; margin: 0 8px; }
.paginationBox .el-pagination__editor .el-input__wrapper { padding: 0 7px; box-shadow: 0 0 0 1px #c0c0c5 inset; background-color: rgba(255, 255, 255, 0.8); }
.paginationBox .el-pagination__editor .el-input__inner {
  height: 40px;
  line-height: 40px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.paginationBox .el-pagination__editor .el-input__inner::-webkit-inner-spin-button,
.paginationBox .el-pagination__editor .el-input__inner::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.el-pagination__apply {
  height: 30px;
  margin-left: 4px;
  padding: 0 8px;
  border: 1px solid var(--tl-blue);
  border-radius: 4px;
  background: #ffffff;
  color: var(--tl-blue-text);
  font-size: 12px;
  cursor: pointer;
}
.js .el-pagination__sizes .el-pagination__apply, .js .el-pagination__jump .el-pagination__apply { display: none; }

/* Résultats en cours de chargement (HTMX) */
.results.htmx-request, .results[aria-busy="true"] { opacity: 0.6; transition: opacity 0.15s; cursor: progress; }

/* 12. Formulaires (EditBox, el-form-item, el-input, el-select…) ------------ */
.el-form-item.is-required > .el-form-item__label::before { content: none; display: none; }
.el-form-item__label { font-family: var(--tl-font); }
.el-form-item__optional { color: var(--tl-gray-text); font-weight: 400; }
.el-input { display: inline-flex; width: 100%; position: relative; font-size: 14px; }
.el-input__wrapper { position: relative; width: 100%; }
.el-input__inner { font-family: var(--tl-control-font); }
.el-input__wrapper:hover { box-shadow: 0 0 0 1px var(--el-input-hover-border-color, #c0c4cc) inset; }
.el-input__wrapper:focus-within { box-shadow: 0 0 0 1px var(--tl-blue) inset !important; }
.el-input__inner:focus-visible, .el-textarea__inner:focus-visible, .el-select__native:focus-visible { outline: none; }
.el-input__wrapper:has(:focus-visible) { outline: 2px solid var(--tl-focus); outline-offset: 1px; }
.el-input__inner::placeholder, .el-textarea__inner::placeholder { color: #8b8a95; opacity: 1; }
.el-input__inner:disabled { cursor: not-allowed; color: var(--tl-gray-text); }
/* Champ désactivé (el-input / el-select / el-textarea `is-disabled`, posé par form_field.html). */
.el-input.is-disabled .el-input__wrapper,
.editForm .el-input.is-disabled .el-input__wrapper,
.el-textarea.is-disabled .el-textarea__inner {
  background-color: #f5f7fa;
  box-shadow: 0 0 0 1px #e4e7ed inset;
  cursor: not-allowed;
}

/* Plage de dates « Début - Fin » (el-date-picker `daterange` d'origine, DateRangeField) : icône
   calendrier, deux champs sans cadre séparées par « - », dans le cadre du champ de 200 px de la
   SearchBox d'origine. Champs texte à texte indicatif « Début » / « Fin » ; avec JavaScript, ils
   deviennent des dates natives au focus (app.js), dont l'icône native est masquée et le calendrier
   s'ouvre au clic ; la saisie au clavier reste celle du champ natif. */
.el-input--daterange .el-input__wrapper { padding: 0 8px; }
.searchFormBox .el-input.el-input--daterange { width: 200px; max-width: 100%; }
/* Sélecteurs `.dateRange …` : mêmes priorités que les règles `.el-date-editor …` d'Element Plus. */
.dateRange { display: flex; align-items: center; width: 100%; min-width: 0; }
.dateRange .dateRange__icon { flex: none; float: none; width: 14px; height: 14px; margin-right: 4px; color: #a8abb2; }
.dateRange .el-range-input {
  flex: 1 1 0;
  min-width: 0;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tl-text);
  font-family: var(--tl-control-font);
  font-size: 12px;
  text-align: center;
}
.editForm .dateRange .el-range-input { height: 38px; font-size: 14px; }
.dateRange .el-range-input::placeholder { color: #8b8a95; opacity: 1; }
.dateRange .el-range-input::-webkit-datetime-edit { padding: 0; }
.dateRange .el-range-input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.dateRange .el-range-input:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--tl-blue-text); }
.dateRange .el-range-input::-webkit-calendar-picker-indicator { margin: 0 0 0 2px; padding: 0; }
.js .dateRange .el-range-input::-webkit-calendar-picker-indicator { display: none; }
.js .dateRange .el-range-input { cursor: pointer; }
.dateRange .dateRange__separator { flex: none; height: auto; padding: 0 4px; color: var(--tl-text); font-size: 12px; }

/* Interrupteur « Statut » (el-switch d'origine, components/status_switch.html) : bouton sans
   habillage, cible de 40 × 24 px. */
.statusSwitch {
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.statusSwitch.is-disabled { cursor: not-allowed; }
.statusSwitch:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 2px; border-radius: 12px; }

/* Champs côte à côte d'une EditBox (`Form.field_rows`, ex. Prénom et Nom). */
.form__row { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; column-gap: 12px; }

/* Liste déroulante native habillée en el-select (flèche lp-button-arrow-down) */
.el-select { position: relative; display: inline-block; width: 100%; }
.el-select .el-input__wrapper { padding-right: 32px; cursor: pointer; }
.el-select__native {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.el-select .el-input__suffix {
  position: absolute;
  top: 0;
  right: 11px;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: #a8abb2;
}
/* Flèche ArrowUp tournée de 180° par la règle Element Plus (.el-select .el-input .el-select__caret). */
.el-select__caret { width: 14px; height: 14px; color: inherit; transition: transform 0.2s; }
.el-select:focus-within .el-select__caret { color: var(--tl-blue); }
.el-select--multiple .el-select__native--multiple {
  width: 100%;
  min-height: 96px;
  padding: 6px 10px;
  border: 0;
  border-radius: 4px;
  background: var(--el-input-bg-color, #ffffff);
  box-shadow: 0 0 0 1px var(--el-border-color, #dcdfe6) inset;
  color: #2f2e3f;
  font-family: var(--tl-control-font);
  font-size: 14px;
}
.el-select--multiple .el-select__native--multiple:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 1px; }

.el-textarea { width: 100%; }
.el-textarea__inner {
  min-height: 80px;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--el-border-color, #dcdfe6) inset;
  font-family: var(--tl-control-font);
}
.el-textarea__inner:focus { box-shadow: 0 0 0 1px var(--tl-blue) inset; }
.el-textarea__inner:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 1px; }

/* Cases à cocher et boutons radio (el-checkbox / el-radio), sans JavaScript (:checked) */
.el-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: auto;
  min-height: 24px;
  margin-right: 0;
  white-space: normal;
  cursor: pointer;
  color: #2f2e3f;
}
.el-checkbox__label { padding-left: 0 !important; color: #2f2e3f; font-size: 14px; line-height: 20px; }
.el-checkbox__original-input,
.choice-list input[type="checkbox"],
.choice-list input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid #8b8a95;
  border-radius: 4px;
  background: #ffffff no-repeat center / 12px 12px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.choice-list input[type="radio"] { border-radius: 50%; }
.el-checkbox__original-input:hover,
.choice-list input[type="checkbox"]:hover,
.choice-list input[type="radio"]:hover { border-color: var(--tl-blue); }
.el-checkbox__original-input:checked,
.choice-list input[type="checkbox"]:checked {
  border-color: var(--tl-blue-text);
  background-color: var(--tl-blue-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.choice-list input[type="radio"]:checked {
  border-color: var(--tl-blue-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='3.2' fill='%231a66e0'/%3E%3C/svg%3E");
}
.el-checkbox__original-input:focus-visible,
.choice-list input:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 2px; }
.el-checkbox__original-input:disabled,
.choice-list input:disabled { cursor: not-allowed; opacity: 0.5; }
.choice-list > div { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.choice-list label { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; color: #2f2e3f; font-size: 14px; line-height: 20px; cursor: pointer; }
.choice-list > div > div { display: inline-flex; }

/* Fichier (el-upload) : element-plus.css masque `.el-upload__input` (le composant d'origine a son
   propre bouton) ; ici le champ natif reste visible et focalisable, son bouton habillé en ColorButton. */
.el-upload { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; font-size: 13px; }
.el-upload .el-upload__input { display: block; max-width: 100%; font-family: var(--tl-control-font); font-size: 13px; color: #2f2e3f; }
.el-upload__input::file-selector-button {
  height: 30px;
  margin-right: 10px;
  padding: 0 12px;
  border: 1px solid var(--tl-blue);
  border-radius: 4px;
  background: #ffffff;
  color: var(--tl-blue-text);
  font-family: var(--tl-control-font);
  font-size: 12px;
  cursor: pointer;
}
.el-upload__input:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 2px; }

/* Aide et erreurs sous le champ */
.el-form-item__help { width: 100%; margin-top: 4px; color: var(--tl-text-secondary); font-size: 12px; line-height: 18px; }
.el-form-item__help ul { margin: 0; padding-left: 18px; }
.el-form-item__error {
  position: static;
  width: 100%;
  padding-top: 4px;
  color: var(--tl-red-text);
  font-size: 12px;
  line-height: 16px;
}
.el-form-item__error p { margin: 0; }
.el-form-item.is-error .el-input__wrapper,
.el-form-item.is-error .el-textarea__inner,
.el-form-item.is-error .el-select__native--multiple { box-shadow: 0 0 0 1px var(--tl-red) inset; }

/* Résumé des erreurs (el-alert d'erreur), focalisé par app.js */
.error-summary { margin: 0 0 20px; }
.error-summary__title { margin: 0 0 2px; }
.error-summary__list { margin: 0; padding-left: 18px; }
.error-summary a { color: var(--tl-red-text); }

/* EditBox : formulaire en colonne (libellé au-dessus, champs 40 px fond #FBFCFF) */
.editForm { margin: 0; }
/* Le formulaire porte lui-même ses marges (corps et pied gris) : pas de marge d'EditBox en plus. */
.editDialog .el-dialog__body > .el-form.editForm { padding: 0; height: auto; overflow: visible; }
.editForm__body { padding: 0 60px; }
.editForm .el-form-item { display: block; margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.editForm .el-form-item__label {
  display: block;
  float: none;
  width: auto;
  padding: 0 0 6px;
  color: #2f2e3f;
  font-size: 14px;
  line-height: 19px;
  text-align: left;
}
.editForm fieldset.el-form-item > legend { float: left; width: 100%; padding: 0 0 6px; }
.editForm fieldset.el-form-item > legend + * { clear: both; }
.editForm .el-form-item__content { display: flex; flex-wrap: wrap; align-items: center; min-height: 40px; line-height: 40px; }
.editForm .el-input, .editForm .el-textarea { --el-input-bg-color: #fbfcff; --el-input-text-color: #2f2e3f; }
.editForm .el-input__wrapper { background-color: #fbfcff; padding: 0 15px; }
.editForm .el-input__inner { height: 40px; line-height: 40px; color: #2f2e3f; font-size: 14px; }
.editForm .el-textarea__inner { min-height: 80px; padding: 10px 15px; background-color: #fbfcff; color: #2f2e3f; font-size: 14px; }
.editForm .el-select .el-input__inner { min-height: 40px; }
.editForm .field--checkbox .el-form-item__content, .editForm .choice-list { line-height: 20px; min-height: 0; }
.editForm .field--checkbox { margin-bottom: 16px; }
.editForm .form__fields { display: block; }
.editForm .form__row { display: grid; }
.dialog__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding: 30px 40px 30px 0;
  border-radius: 0 0 10px 10px;
  background-color: #ebecf0;
}
.dialog__bottom .colorBtn + .colorBtn { margin-left: 0; }
.editBox__extra { padding: 0 60px; }
.editBox__extra:empty { display: none; }
.editBox__extra > :last-child { margin-bottom: 20px; }

/* Formulaire en page complète (URL directe ou sans JavaScript) : la même boîte, centrée. */
.editPage { display: flex; justify-content: center; padding: 0 0 12px; }
.editPage__box.el-dialog.editDialog {
  position: relative;
  width: 660px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 0 12px rgba(40, 120, 255, 0.08);
}
.editPage__header.el-dialog__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 32px 60px 36px;
}
.el-dialog__title { margin: 0; color: #2f2e3f; font-size: 20px; font-weight: 700; line-height: 28px; }
.editPage__subtitle { margin: 4px 0 0; color: var(--tl-text-secondary); font-size: 13px; font-weight: 400; }
.editPage .el-dialog__body { padding: 0; }

/* Carte de configuration (configCard / configForm d'origine : « Config notifications »,
   « Config messages ») : règles globales d'origine dans element-plus.css ; ici, la largeur des
   libellés (`label-width="305px"` posé en ligne par Vue), les champs désactivés de la consultation
   seule, l'aide sous le champ et l'adaptation aux petits écrans. `configForm--large` : titres de
   28 px et lignes espacées de « Config messages » (styles scopés d'origine). */
.configCard { min-height: calc(100vh - var(--tl-main-top) - 24px); }
.configForm { padding-bottom: 1px; }
.configForm .configNotice { margin: 20px 160px 0 60px; }
.configForm .configTitle { display: block; }
.configForm .el-form-item { display: flex; align-items: flex-start; }
.configForm .el-form-item .el-form-item__label {
  flex: 0 0 305px;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 305px;
  height: auto;
  min-height: 40px;
  font-size: 14px;
  text-align: right;
}
.configForm .el-form-item .el-form-item__content { flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 0 8px; min-width: 0; }
.configForm .el-form-item .el-input { flex: 1 1 0; min-width: 0; }
.configForm .el-input__wrapper { padding: 0 15px; background-color: #fbfcff; }
.configForm .el-input.is-disabled .el-input__wrapper { background-color: #f5f7fa; }
.configForm .el-input__inner { width: 100%; color: #2f2e3f; text-overflow: ellipsis; }
.configForm .el-input__inner:disabled { color: var(--tl-gray-text); -webkit-text-fill-color: var(--tl-gray-text); }
.configForm .configChecks { display: flex; flex-wrap: wrap; gap: 0 32px; }
.configForm .configChecks .el-checkbox { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0; }
.configForm .configHint { flex: 1 0 100%; margin: 4px 0 0; color: var(--tl-text-secondary); font-size: 12px; line-height: 18px; }
.configForm .configHint--warning { color: var(--tl-orange-text); }
.configCard .configCardBottom { flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 40px 160px 36px 60px; }
.configCardBottom__text { flex: 1 1 320px; margin: 0; color: var(--tl-text-secondary); font-size: 13px; line-height: 20px; }
.configForm--large .configTitle { margin: 12px 0 16px 60px; font-size: 28px; }
.configForm--large .el-form-item { margin: 0 0 20px; padding: 20px 160px 0 0; }

/* 13. Boîtes de dialogue (EditBox, newMessageBox) ------------------------- */
.appDialog.el-dialog.editDialog {
  position: fixed;
  inset: var(--tl-main-top) 0 0 var(--tl-aside-w);
  width: min(660px, calc(100vw - var(--tl-aside-w) - 24px));
  max-width: none;
  height: fit-content;
  max-height: calc(100vh - var(--tl-main-top) - 24px);
  max-height: calc(100dvh - var(--tl-main-top) - 24px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #ffffff;
  color: #2f2e3f;
  box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.appDialog[open] { display: flex; flex-direction: column; }
.appDialog::backdrop { background: transparent; }
html.has-dialog #app::after {
  content: "";
  position: fixed;
  inset: var(--tl-main-top) 0 0 var(--tl-aside-w);
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
}
.appDialog .el-dialog__headerbtn {
  position: absolute;
  top: 6px;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #97969f;
  cursor: pointer;
}
.appDialog .el-dialog__headerbtn:hover { color: var(--tl-blue-text); }
.appDialog .el-dialog__close { width: 16px; height: 16px; }
.appDialog__body.el-dialog__body, .appDialog__body { flex: 1 1 auto; min-height: 0; padding: 0; overflow: auto; }
/* Element Plus coupe les mots n'importe où dans les boîtes et les menus (`word-break: break-all`) :
   coupure aux espaces, un mot trop long (adresse, clé) seulement s'il déborde. */
.el-dialog__header, .el-dialog__body, .el-popover.el-popper { word-break: normal; overflow-wrap: anywhere; }
.appDialog__body.is-loading { min-height: 160px; }
.appDialog .el-dialog__header { margin: 0; padding: 32px 60px 36px; }
.appDialog__messages { padding: 0 60px; }
.appDialog.editDialog .el-dialog__body .dialog__bottom { position: sticky; bottom: 0; z-index: 2; }

.appMessageBox {
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  max-width: calc(100vw - 32px);
}
.appMessageBox::backdrop { background: rgba(0, 0, 0, 0.5); }
.newMessageBox.el-message-box {
  width: min(420px, calc(100vw - 32px));
  padding-bottom: 10px;
  border: 1px solid var(--el-border-color-lighter, #e6e7eb);
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
  text-align: left;
}
.newMessageBox .el-message-box__header { position: relative; padding: 15px 15px 10px; }
.newMessageBox .el-message-box__title { margin: 0; padding-right: 24px; color: #2f2e3f; font-size: 18px; font-weight: 400; line-height: 24px; }
.newMessageBox .el-message-box__title.confirm__title { font-size: 18px; }
.newMessageBox .el-message-box__headerbtn {
  position: absolute;
  top: 15px;
  right: 15px;
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  color: #97969f;
  cursor: pointer;
}
.newMessageBox .el-message-box__headerbtn:hover { color: var(--tl-blue-text); }
.newMessageBox .el-message-box__close { width: 16px; height: 16px; }
.newMessageBox .el-message-box__content { padding: 10px 15px; color: #6d6c78; font-size: 14px; }
.newMessageBox .el-message-box__container { display: flex; align-items: flex-start; gap: 12px; }
.newMessageBox .el-message-box__status { position: static; flex: none; width: 24px; height: 24px; transform: none; }
.el-message-box-icon--warning { color: var(--tl-orange); }
.newMessageBox .el-message-box__message { padding: 2px 0 0; }
.newMessageBox .el-message-box__message p { margin: 0; color: #2f2e3f; line-height: 22px; }
.newMessageBox .el-message-box__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin: 0;
  padding: 5px 15px 0;
}
.newMessageBox .el-message-box__btns > button, .newMessageBox .el-message-box__btns > a { min-width: 80px; }
.newMessageBox .el-message-box__btns .el-button + .el-button,
.newMessageBox .el-message-box__btns .btn + .btn { margin-left: 0; }
.newMessageBox .el-message-box__btns .btn { --cb-padding: 0 15px; --cb-height: 32px; --cb-font-size: 14px; }

/* Images des règles d'origine (url(/images/…)) absentes ici : neutralisées (aucune requête). */
.editDialog .el-dialog__body .treeExpandBtn::before { -webkit-mask: none; mask: none; }
.editDialog .el-dialog__body .el-tree .el-icon.el-tree-node__expand-icon::before { background-image: none; }

/* Page de confirmation sans JavaScript : la boîte de confirmation, centrée. */
.confirmPage { display: flex; justify-content: center; padding: 48px 0 12px; }

/* 14. Connexion et pages d'erreur (Login.vue) ------------------------------ */
.authBody { background-color: #dbe7ee; }
.loginBackground {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  overflow: auto;
  background-color: #dbe7ee;
  background-image: url("../img/legacy/background-login.b62f674fad60.png");
  background-size: cover;
  font-family: var(--tl-font);
}
.loginContainer {
  position: relative;
  display: flex;
  flex-shrink: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 8px;
}
.formContent {
  width: 696px;
  min-height: 700px;
  padding: 154px 190px 40px;
  background: #ffffff;
}
.formContent .formTitle {
  margin: 0 0 42px;
  color: #2f2e3f;
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
  text-align: center;
}
.showContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 432px;
  min-height: 700px;
  overflow: hidden;
  background: linear-gradient(129deg, #364a7f 0%, #6991c7 100%);
  color: #ffffff;
}
.showContent > .logo { width: 160px; height: 76px; margin-top: 62px; }
.showContent > span:first-of-type { margin: 20px 0; padding: 0 40px; font-size: 30px; font-weight: 600; line-height: 42px; text-align: center; }
.showContent > span:last-of-type { width: 250px; font-size: 14px; line-height: 20px; text-align: center; }
.infoForm > * { margin-bottom: 20px; }
.infoForm .el-form-item { display: block; margin: 0 0 20px; }
.infoForm .el-input__wrapper { border-radius: 6px; padding: 0 15px; }
.infoForm .el-input__inner { height: 42px; line-height: 42px; font-size: 14px; color: var(--el-text-color-primary); }
.infoForm .rememberOptionFormItem { height: 20px; line-height: 20px; }
.infoForm .rememberOptionFormItem .el-checkbox__label { color: var(--tl-gray-text); font-weight: 400; }
.loginButton.el-button {
  width: 100%;
  height: 42px;
  border-radius: 6px;
  background: var(--tl-blue-text);
  border-color: var(--tl-blue-text);
  color: #ffffff;
  font-size: 14px;
}
.loginButton.el-button:hover { background: #3a82f5; border-color: #3a82f5; color: #ffffff; }
.loginLinks { margin: -4px 0 0; text-align: center; font-size: 14px; }
.formContent__body { color: #2f2e3f; font-size: 14px; }
.formContent__body > p { margin-bottom: 16px; }
.formContent .editForm__body, .formContent .editBox__extra { padding: 0; }
.formContent .dialog__bottom { margin-top: 0; padding: 0 0 20px; background: none; justify-content: stretch; }
.formContent .dialog__bottom .colorBtn { flex: 1 1 auto; height: 42px; border-radius: 6px; }
.formContent .editForm .el-input__wrapper { border-radius: 6px; }
.formContent .editForm .el-input__inner { height: 42px; }
.formContent .btn { --cb-height: 42px; --cb-padding: 0 16px; --cb-font-size: 14px; border-radius: 6px; }
.formContent .btn--primary { width: 100%; }

.errorPage .formContent { min-height: 0; padding: 80px 120px 64px; text-align: center; }
.error-page__code { margin: 0 0 12px; color: var(--tl-blue-text); font-size: 56px; font-weight: 700; line-height: 1; }
.error-page__reference { color: var(--tl-text-secondary); font-size: 13px; }
.error-page .form__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.error-page .form__actions .btn { width: auto; }

/* 15. États (chargement, mouvement réduit, contraste forcé) --------------- */
[aria-busy="true"] { cursor: progress; }
.colorBtn.is-loading, .btn.is-loading, .el-button.is-loading { position: relative; cursor: progress; opacity: 0.85; }
.colorBtn.is-loading::after, .btn.is-loading::after, .el-button.is-loading::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-left: 6px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tl-spin 0.7s linear infinite;
}
.htmx-request .colorBtn[type="submit"] { opacity: 0.85; cursor: progress; }
@keyframes tl-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .colorBtn, .btn, .badge, .card, .alert, .el-alert, .tabsNav .el-tabs__item, .pageBtn { border: 1px solid CanvasText; }
  .asideMenuBox .el-menu-item.is-active, .tabsNav .el-tabs__item.is-active, .el-pager li.is-active { outline: 2px solid Highlight; }
  .el-checkbox__original-input:checked, .choice-list input:checked { background-color: Highlight; }
  .badge--solid { border-color: CanvasText; }
  .detailText { border: 1px solid CanvasText; }
}

/* 16. Adaptation aux écrans (l'original est une application de bureau) --- */
@media (max-width: 1150px) {
  .showContent { display: none; }
  .loginContainer { width: 100%; max-width: 696px; }
  .formContent { width: 100%; min-height: 0; padding: 64px clamp(24px, 8vw, 120px) 48px; }
}

@media (max-width: 1023.98px) {
  :root { --tl-aside-w: 0px; }
  html.is-menu-collapsed { --tl-aside-w: 0px; }
  .navToggle { display: inline-flex; }
  .logoBox { width: auto; max-width: 200px; }
  .logoBox > img { height: 56px; }
  .dateBox { display: none; }
  .dateBox + .dividerBox { display: none; }

  /* Sans JavaScript : le menu reste visible, au-dessus du contenu. */
  .no-js .underHeader { flex-direction: column; }
  .no-js .aside { width: 100%; height: auto; }
  .no-js .asideMenuBox { height: auto; }
  .no-js .layoutBox { height: auto; min-height: 100vh; }
  .no-js .main { overflow: visible; }

  /* Avec JavaScript : menu escamotable (bouton de l'en-tête). */
  .js .aside {
    position: fixed;
    top: var(--tl-header-h);
    bottom: 0;
    left: 0;
    z-index: 1500;
    width: 262px;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s, visibility 0.2s;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
  }
  .js .aside.is-open { transform: none; visibility: visible; }
  html.is-menu-collapsed .aside { width: 262px; }
  html.is-menu-collapsed .asideMenuBox .menuText,
  html.is-menu-collapsed .asideMenuBox .subMenuText { position: static; width: auto; height: auto; clip-path: none; }
  html.is-menu-collapsed .asideMenuBox .el-sub-menu > .el-menu--inline { position: static; display: block; box-shadow: none; padding: 0; min-width: 0; }
  .menuCollapseIconBox { display: none; }

  .viewPageBox--list { min-width: 0; height: auto; padding-right: 12px; flex-direction: column; }
  .regionTreeBox { width: 100%; min-width: 0; height: auto; max-height: 260px; margin: 0 0 12px; }
  .regionTreeBox .regionArea { width: 100%; height: auto; }
  .regionTreeBox .closeTab { display: none; }
  .contentBox { overflow: visible; }
  .subHeaderBox .tabsBox { width: calc(100% - 80px); }
  .configForm .el-form-item, .configForm--large .el-form-item { margin-right: 24px; padding-right: 0; }
  .configForm .el-form-item .el-form-item__label { flex-basis: 200px; width: 200px; padding-right: 20px; }
  .configForm .configNotice, .configCard .configCardBottom { margin-right: 24px; margin-left: 24px; }
  .configForm .configTitle, .configForm--large .configTitle { margin-left: 24px; }
}

@media (max-width: 845px) {
  .headerBox .rightBox > *, .headerGroup > * { padding: 0 10px; }
  .userBox { margin: 0 10px; }
}

@media (max-width: 640px) {
  .userBox .userNicknameBox, .userBox .arrowSvg { display: none; }
  .headerGroup { display: none !important; }
  .logoBox > img { height: 44px; }
  .searchFormBox .el-form-item { flex-wrap: wrap; width: 100%; }
  .searchFormBox .el-form-item__label { justify-content: flex-start; width: 100%; height: auto; padding-bottom: 4px; text-align: left; }
  .searchFormBox .el-input, .searchFormBox .el-select, .searchFormBox .el-input.el-input--daterange { width: 100%; }
  .form__row, .editForm .form__row { grid-auto-flow: row; }
  .searchFormBox .el-form-item__content { width: 100%; }
  .searchFormBox .searchItem--checkbox .el-form-item__content { padding-left: 0; }
  .totalOperateBar { flex-wrap: wrap; padding: 12px 12px 0; }
  .paginationBox { padding: 16px 12px; }
  .paginationBox .el-pagination { flex-wrap: wrap; gap: 8px; }
  .paginationBox .el-pagination__rightwrapper { flex-wrap: wrap; justify-content: flex-start; gap: 8px 0; }
  .editForm__body, .editBox__extra, .appDialog__messages { padding: 0 20px; }
  .appDialog .el-dialog__header, .editPage__header.el-dialog__header { padding: 24px 56px 20px 20px; }
  .dialog__bottom { padding: 20px; justify-content: stretch; }
  .dialog__bottom .colorBtn { flex: 1 1 auto; }
  .detail-list__item { grid-template-columns: 1fr; gap: 0; }
  .detailBox { padding: 0 20px; }
  .detailBox .detailForm { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .card__title { margin: -16px -16px 12px; padding: 12px 16px 10px; }
  .card__footer { margin: 16px -16px -16px; padding: 12px 16px; }
  .pageHeaderBox { padding: 12px 16px; }
  .errorPage .formContent { padding: 48px 24px; }
  .loginBackground { padding: 12px; }
  .configForm .el-form-item, .configForm--large .el-form-item { flex-direction: column; margin: 0 16px 16px; padding: 0; }
  .configForm .el-form-item .el-form-item__label { flex-basis: auto; justify-content: flex-start; width: 100%; min-height: 0; padding: 0 0 4px; text-align: left; }
  .configForm .el-form-item .el-form-item__content { width: 100%; }
  .configForm .configNotice, .configCard .configCardBottom { margin-right: 16px; margin-left: 16px; }
  .configForm .configTitle, .configForm--large .configTitle { margin-left: 16px; font-size: 16px; }
}

/* 17. Impression ----------------------------------------------------------- */
@media print {
  .topHeader, .aside, .subHeaderBox, .skip-link, .searchBox, .totalOperateBar, .paginationBox,
  .regionTreeBox, .operateBar, .messageStack, dialog { display: none !important; }
  .layoutBox, .underHeader, .container, .main { display: block; height: auto; overflow: visible; }
  .main, .infoBox, .card, .pageHeaderBox { background: #ffffff; }
  .viewPageBox--list { display: block; min-width: 0; height: auto; padding: 0; }
}