/*===============STYLE DEFAULT==========*/
:root {
  --background-color: #070b10;
  --page-bg: #080d14;
  --section-bg: #0d141d;
  --panel-bg: #111e2c;
  --card-bg: #0f1a27;
  --input-bg: #08111b;
  --text-color: #f1eadb;
  --muted-color: #9da8b6;
  --title-color: #f5cf73;
  --primary-color: #d7aa56;
  --primary-dark: #8f6327;
  --primary-soft: rgba(215, 170, 86, .18);
  --border-color: rgba(215, 170, 86, .34);
  --danger-color: #ff6f61;
  --success-color: #7ed99a;
  --warning-color: #f7cf74;
  --shadow-color: rgba(0, 0, 0, .58);
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --topbar-height: 20px;

  --dms-bg: var(--background-color);
  --dms-card: var(--section-bg);
  --dms-panel: var(--panel-bg);
  --dms-text: var(--text-color);
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--background-color);
  color: var(--text-color);
  font-family: "Segoe UI", Arial, Tahoma, sans-serif;
  font-size: 14px;
}

body {
  padding-top: var(--topbar-height);
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

img { max-width: 100%; }

h1,
h2,
h3,
h4 {
  color: var(--title-color);
  margin-top: 0;
  line-height: 1.2;
}

h1 { font-size: 1.9rem; margin-bottom: 18px; }
h2 { font-size: 1.35rem; margin-bottom: 14px; }
h3 { font-size: 1.1rem; margin-bottom: 10px; }

p { line-height: 1.5; }

hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin: 12px 0;
}

/* ==========================================================
   Layout global
   ========================================================== */

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topbar-height));
}

main {
  flex: 1;
  min-height: 0;
}

.container,
.profile-container,
.settings-wrapper,
.market-wrapper {
  width: min(1300px, calc(100% - 28px));
  margin: 24px auto;
  padding: 10px;
}

.section,
.card,
.login-card,
.login-box,
.profile-edit,
.profile-scope,
.members-scope .section,
.modules-scope .section {
  background: var(--section-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px var(--shadow-color);
  padding: 18px;
  margin-bottom: 18px;
}

.section-col,
.left-settings,
.content,
.inner {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 14px;
}

.grid,
.admin-grid,
.grid2,
.grid3,
.accordion-grid,
.sections-modules,
.topo-grid {
  display: grid;
  gap: 16px;
}

.grid2,
.admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.full { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .grid2,
  .grid3,
  .admin-grid,
  .grid-columns { grid-template-columns: 1fr !important; }
}

.muted,
.small,
.meta,
.footnote,
.subtitle,
.mod-meta,
.proc-meta,
.news-meta {
  color: var(--muted-color);
}

.small { font-size: .85rem; }

.spacer { flex: 1 1 auto; }
.divider { height: 1px; background: var(--border-color); margin: 14px 0; }

/* ==========================================================
   Header / top bar / menu droit
   ========================================================== */

#top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--topbar-height);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: rgba(11, 15, 23, .82);
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  user-select: none;
  font-size: 10px;
}

#top-bar .left,
#top-bar .right {
  display: flex;
  align-items: center;
  gap: 12px;
}

#top-bar .center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted-color);
  font-weight: 700;
  white-space: nowrap;
}

#date,
#time,
#role {
  margin-left: 8px;
  min-width: 70px;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.icon-link,
#top-bar .icon-link {
  color: var(--text-color);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}

.icon-link:hover,
#top-bar .icon-link:hover {
  background: var(--primary-soft);
  text-decoration: none;
  transform: translateY(-1px);
}

.icon-admin { color: var(--warning-color); }

.menu-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  z-index: 1101;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  color: var(--text-color);
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  box-shadow: 0 8px 20px var(--shadow-color);
  cursor: pointer;
}

.menu-toggle:hover { background: var(--primary-dark); }

.right-menu-wrapper {
  position: fixed;
  top: 64px;
  right: 0;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform .25s ease-in-out;
}

.right-menu {
  width: 240px;
  max-width: calc(100vw - 20px);
  height: calc(100vh - 84px);
  overflow-y: auto;
  margin: 0 12px 12px;
  padding: 8px 0;
  background: var(--section-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px var(--shadow-color);
}

.right-menu ul,
.menu-list,
.submenu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.right-menu li { margin: 0; }

.right-menu a,
.menu-list a,
.submenu-list a {
  display: block;
  padding: 10px 14px;
  color: var(--text-color);
  text-decoration: none;
  border-radius: 8px;
}

.right-menu a:hover,
.menu-list a:hover,
.submenu-list a:hover {
  background: var(--primary-soft);
  text-decoration: none;
}

.has-submenu > a {
  position: relative;
  cursor: pointer;
}

.has-submenu > a::after {
  content: "▸";
  position: absolute;
  right: 14px;
}

.has-submenu > ul {
  display: none;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 2px solid var(--primary-color);
}

.has-submenu:hover > ul { display: block; }

.flash.notice {
  margin: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--primary-soft);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

/* ==========================================================
   Formulaires / boutons
   ========================================================== */

label {
  display: block;
  margin: 8px 0 5px;
  color: var(--muted-color);
  font-weight: 700;
}

input,
select,
textarea {
  max-width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text-color);
  outline: none;
}

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

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

button,
.btn,
.mbtn,
.btn-add,
.btn-danger,
.btn-del,
.btn-sm,
.btn-pill,
.btn-nolink,
.proc-cta,
.pdf-actions a,
.actions a,
.back-link,
.back-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 8px 13px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--panel-bg);
  color: var(--text-color);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

button:hover,
.btn:hover,
.mbtn:hover,
.btn-add:hover,
.btn-sm:hover,
.btn-pill:hover,
.proc-cta:hover,
.pdf-actions a:hover,
.actions a:hover,
.back-link:hover,
.back-links a:hover {
  background: var(--primary-dark);
  border-color: var(--primary-color);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-danger,
.btn-del,
button.delete,
button.del,
.danger {
  border-color: rgba(255, 107, 107, .45);
  color: #ffd5d5;
  background: rgba(255, 107, 107, .13);
}

.btn-danger:hover,
.btn-del:hover,
button.delete:hover,
button.del:hover {
  background: rgba(255, 107, 107, .28);
}

.btn-sm { min-height: 28px; padding: 5px 9px; font-size: .85rem; }
.btn-pill,
.pill,
.chip,
.tag,
.status {
  border-radius: 999px;
}

.field,
.field-inline,
.user-form,
.upload-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.field-inline label { margin: 0; }

/* ==========================================================
   Messages / états
   ========================================================== */

.message,
.msg,
.notice,
.info,
.error,
.msg-err {
  padding: 10px 12px;
  margin: 10px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
}

.message.success,
.green,
.success {
  color: var(--success-color);
  border-color: rgba(94, 224, 138, .35);
  background: rgba(94, 224, 138, .1);
}

.message.error,
.error,
.msg-err,
.red {
  color: var(--danger-color);
  border-color: rgba(255, 107, 107, .35);
  background: rgba(255, 107, 107, .1);
}

.warning { color: var(--warning-color); }

.dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  background: var(--muted-color);
}

.dot.green { background: var(--success-color); box-shadow: 0 0 0 3px rgba(94, 224, 138, .12); }
.dot.red { background: var(--danger-color); box-shadow: 0 0 0 3px rgba(255, 107, 107, .12); }

/* ==========================================================
   Dashboard
   ========================================================== */

#controls {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: var(--section-bg);
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
}

#controls select,
#controls button {
  width: auto;
  min-width: 30px;
  max-width: 160px;
  height: 24px;
  min-height: 24px;
  margin: 0 2px;
  padding: 0 7px;
  font-size: 10px;
  line-height: 1;
  border-radius: 4px;
  box-shadow: none;
}

#dashboard {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 620px;
  height: 100%;
  overflow: auto;
  padding: 0;
  background: var(--page-bg);
  border-top: 1px solid rgba(255,255,255,.02);
  scrollbar-gutter: stable;
}

#dashboard.empty { overflow: hidden; }

body.noscroll { overflow: hidden; }

.module {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 120px;
  min-height: 90px;
  padding: 10px;
  background: var(--card-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 22px var(--shadow-color);
  overflow: hidden;
}

.module.square { border-radius: 0; }
.module.rounded { border-radius: 10px; }
.module.circle {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  color: var(--title-color);
  font-weight: 800;
  cursor: move;
  user-select: none;
}

.module-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.module-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  color: var(--text-color);
}

.module-close {
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  margin: 0 0 0 6px;
  background: transparent;
  border: 0;
  color: var(--danger-color);
  font-size: 14px;
  cursor: pointer;
}

.module-close:hover { background: rgba(255, 107, 107, .14); transform: none; }

.shape-select {
  width: auto;
  padding: 3px 6px;
  margin-top: 2px;
  font-size: .78rem;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--muted-color);
  border-radius: 4px;
}

.resize-handle {
  width: 12px;
  height: 12px;
  position: absolute;
  right: 2px;
  bottom: 2px;
  background: var(--primary-color);
  border-radius: 3px;
  cursor: se-resize;
}

.mod-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

#dashboard .mod-icon {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 64px;
  height: 64px;
  z-index: 2;
}

.popup,
.pop,
.modal,
.th-popup-body {
  background: var(--panel-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px var(--shadow-color);
  padding: 12px;
}

#confirmPopup {
  position: absolute;
  z-index: 1000;
  display: none;
}

.popup button { margin: 4px; }

/* ==========================================================
   Tableaux / listes
   ========================================================== */

table,
.modules-table,
.roles-table,
.th-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-color);
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--section-bg);
}

th,
td,
.modules-table th,
.modules-table td,
.roles-table th,
.roles-table td,
.th-table th,
.th-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  vertical-align: middle;
}

th,
.modules-table th,
.roles-table th,
.th-table th {
  background: var(--panel-bg);
  color: var(--title-color);
  font-weight: 800;
}

tr:nth-child(even) td { background: rgba(255,255,255,.018); }
tr:hover td { background: var(--primary-soft); }

.th-action,
.th-btn { width: 1%; white-space: nowrap; }
.th-hint { color: var(--muted-color); font-size: .85rem; }

.pagination,
.mods-pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.pagination a,
.mods-pager a,
.mods-pager strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--panel-bg);
  color: var(--text-color);
  text-decoration: none;
}

.pagination a:hover,
.pagination a[aria-current="page"],
.mods-pager a:hover,
.mods-pager strong {
  background: var(--primary-dark);
  color: #fff;
}

/* ==========================================================
   Modules page / Market
   ========================================================== */

.modules-scope,
.market-wrapper,
.market-body {
  color: var(--text-color);
}

.modules-scope .section { max-width: 1150px; margin: 24px auto; }

.modules-scope .status,
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
  font-weight: 800;
}

.status.on,
.enabled {
  color: var(--success-color);
  border-color: rgba(94, 224, 138, .35);
  background: rgba(94, 224, 138, .1);
}

.status.off,
.disabled {
  color: var(--muted-color);
  border-color: var(--border-color);
  background: rgba(255,255,255,.04);
}

.grid-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.upload-section {
  margin-top: 18px;
  padding: 16px;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius);
  background: rgba(255,255,255,.025);
}

.market-wrapper h3,
.cfg-break-title {
  margin-top: 20px;
  padding-left: 10px;
  border-left: 4px solid var(--primary-color);
  color: var(--title-color);
}

.market-overlay,
.overlay,
.th-popup-overlay,
.viewer-frame-wrap,
#viewerOverlay,
#ytOverlay,
#listOverlay,
#themesPopup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(4px);
}

.market-modal,
.viewer-frame,
.modal {
  width: min(1100px, 96vw);
  max-height: 86vh;
  overflow: auto;
  background: var(--section-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
}

.market-head,
.modal-header,
.th-popup-header,
.viewer-toolbar,
.popupHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
}

.modal-title,
.market-head strong,
.th-popup-header strong { color: var(--title-color); }

.modal-actions,
.actions,
.access-actions,
.mod-actions,
.proc-actions,
.pdf-actions,
.zoom-group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ==========================================================
   Login / register
   ========================================================== */

.auth-page {
  min-height: 100vh;
  overflow-x: hidden;
}

.auth-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 8%, color-mix(in srgb, var(--primary-color) 18%, transparent), transparent 34vw),
    radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--primary-dark) 20%, transparent), transparent 32vw),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--primary-color) 10%, transparent), transparent 36vw),
    var(--background-color);
}

.float-cloud {
  position: absolute;
  inset: 0;
  transform: translate(var(--cloud-x, 0), var(--cloud-y, 0));
  transition: transform .2s ease-out;
  opacity: .95;
  mask-image: radial-gradient(circle at center, #000 58%, transparent 100%);
}

.float-word {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(var(--x-start), var(--y));
  color: color-mix(in srgb, var(--primary-color) 42%, var(--text-color) 58%);
  font-size: var(--size);
  font-weight: 800;
  white-space: nowrap;
  opacity: .10;
  user-select: none;
  animation: auth-word-drift var(--dur) linear infinite;
  animation-delay: var(--delay);
  text-shadow: 0 0 18px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.float-word::before {
  content: "• ";
  opacity: .5;
}

@keyframes auth-word-drift {
  from {
    transform: translate(var(--x-start), var(--y));
  }

  to {
    transform: translate(var(--x-end), var(--y));
  }
}

.auth-corner-badge {
  position: fixed;
  top: calc(var(--topbar-height) + 16px);
  right: 18px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(260px, calc(100vw - 36px));
  padding: 9px 12px;
  background: color-mix(in srgb, var(--section-bg) 84%, transparent);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px var(--shadow-color);
  text-decoration: none;
  backdrop-filter: blur(10px);
}

.auth-corner-badge:hover {
  text-decoration: none;
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 12%, var(--section-bg));
}

.auth-corner-badge img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 34px;
}

.auth-corner-badge span {
  font-weight: 900;
  font-size: .9rem;
  line-height: 1.1;
}

.login-wrapper {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - var(--topbar-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px 18px 34px;
}

.login-box,
.login-card {
  width: min(460px, 100%);
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    color-mix(in srgb, var(--section-bg) 94%, transparent);
  color: var(--text-color);
  border: 1px solid color-mix(in srgb, var(--primary-color) 34%, transparent);
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 80px rgba(0,0,0,.38),
    0 0 42px color-mix(in srgb, var(--primary-color) 14%, transparent);
  padding: 24px;
  backdrop-filter: blur(14px);
}

.register-card {
  width: min(560px, 100%);
}

.login-box h1,
.login-card h1 {
  text-align: center;
  margin: 0;
  color: var(--title-color);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  letter-spacing: -.03em;
}

.login-card .brand,
.login-box .brand {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.login-card .brand a,
.login-box .brand a {
  color: inherit;
  text-decoration: none;
}

.auth-logo,
.login-card .brand img,
.login-box .brand img {
  width: var(--auth-logo-width, 180px);
  height: var(--auth-logo-height, 95px);
  max-width: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-sm);
}

.login-card .subtitle,
.login-box .subtitle {
  margin: 0 0 16px;
  text-align: center;
  color: var(--muted-color);
  font-size: .94rem;
  line-height: 1.5;
}

.login-card form,
.login-box form {
  display: grid;
  gap: 12px;
}

.auth-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.auth-field {
  display: grid;
  gap: 6px;
}

.auth-field-full {
  grid-column: 1 / -1;
}

.login-card label,
.login-box label {
  margin: 0;
  color: var(--muted-color);
  font-weight: 800;
  font-size: .88rem;
}

.login-box input,
.login-card input,
.login-box select,
.login-card select {
  width: 100%;
  min-height: 42px;
  padding: 10px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-color);
  outline: none;
}

.login-box input:focus,
.login-card input:focus,
.login-box select:focus,
.login-card select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.auth-password-line {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-password-line input {
  padding-right: 48px;
}

.auth-toggle-password {
  position: absolute;
  right: 7px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
  color: var(--text-color);
  cursor: pointer;
}

.auth-toggle-password:hover {
  background: var(--primary-soft);
  border-color: var(--primary-color);
}

.login-box button,
.login-card button,
.auth-submit {
  width: 100%;
}

.login-card .btn,
.login-box .btn,
.auth-submit {
  min-height: 42px;
  margin-top: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--primary-color) 50%, transparent);
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.login-card .btn:hover,
.login-box .btn:hover,
.auth-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.error-message {
  color: var(--danger-color);
  font-weight: 800;
  text-align: center;
  margin-bottom: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 107, 107, .35);
  border-radius: var(--radius-sm);
  background: rgba(255, 107, 107, .1);
}

.register-link {
  display: block;
  margin-top: 8px;
  text-align: center;
  color: var(--muted-color);
  font-weight: 800;
}

.register-link:hover {
  color: var(--primary-color);
}

.login-card .footnote,
.login-box .footnote {
  margin: 10px 0 0;
  text-align: center;
  color: var(--muted-color);
  font-size: .82rem;
}

/* ==========================================================
   Login / register FINAL
   ========================================================== */

body.auth-page {
  min-height: 100vh;
  margin: 0;
  padding-top: 0;
  overflow-x: hidden;
  background: var(--background-color);
  color: var(--text-color);
}

body.auth-page .auth-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--primary-color) 22%, transparent), transparent 34vw),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--primary-dark) 24%, transparent), transparent 34vw),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--primary-color) 12%, transparent), transparent 38vw),
    var(--background-color);
}

body.auth-page .auth-float-cloud {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translate(var(--cloud-x, 0), var(--cloud-y, 0));
  transition: transform .2s ease-out;
  mask-image: radial-gradient(circle at center, #000 62%, transparent 100%);
}

body.auth-page .auth-float-word {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(var(--x-start), var(--y));
  color: color-mix(in srgb, var(--primary-color) 50%, var(--text-color) 50%);
  font-size: var(--size);
  font-weight: 900;
  white-space: nowrap;
  opacity: .10;
  user-select: none;
  animation: auth-word-drift var(--dur) linear infinite;
  animation-delay: var(--delay);
  text-shadow: 0 0 18px color-mix(in srgb, var(--primary-color) 42%, transparent);
}

body.auth-page .auth-float-word::before {
  content: "• ";
  opacity: .55;
}

@keyframes auth-word-drift {
  from { transform: translate(var(--x-start), var(--y)); }
  to { transform: translate(var(--x-end), var(--y)); }
}

body.auth-page .auth-wrapper {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 18px;
}

body.auth-page .auth-card {
  width: min(460px, 100%);
  color: var(--text-color);
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    color-mix(in srgb, var(--section-bg) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 38%, transparent);
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 80px rgba(0,0,0,.42),
    0 0 44px color-mix(in srgb, var(--primary-color) 15%, transparent);
  padding: 24px;
  backdrop-filter: blur(14px);
}

body.auth-page .auth-card-register {
  width: min(560px, 100%);
}

body.auth-page .auth-brand {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: 12px;
  text-align: center;
}

body.auth-page .auth-logo,
body.auth-page .auth-brand img {
  width: 190px;
  height: 120px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

body.auth-page .auth-brand h1 {
  margin: 0;
  color: var(--title-color);
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  line-height: 1.1;
}

body.auth-page .auth-subtitle {
  margin: 0 0 16px;
  text-align: center;
  color: var(--muted-color);
  font-size: .94rem;
}

body.auth-page .auth-message {
  margin-bottom: 14px;
  padding: 10px 12px;
  color: var(--danger-color);
  background: rgba(255, 107, 107, .10);
  border: 1px solid rgba(255, 107, 107, .35);
  border-radius: var(--radius-sm);
  font-weight: 900;
  text-align: center;
}

body.auth-page .auth-form {
  display: grid;
  gap: 12px;
}

body.auth-page .auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.auth-page .auth-field {
  display: grid;
  gap: 6px;
}

body.auth-page .auth-full {
  grid-column: 1 / -1;
}

body.auth-page .auth-field label {
  margin: 0;
  color: var(--muted-color);
  font-weight: 900;
  font-size: .88rem;
}

body.auth-page .auth-field input,
body.auth-page .auth-field select {
  width: 100%;
  min-height: 42px;
  padding: 10px 11px;
  color: var(--text-color);
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  outline: none;
}

body.auth-page .auth-field input:focus,
body.auth-page .auth-field select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

body.auth-page .auth-password {
  position: relative;
  display: flex;
  align-items: center;
}

body.auth-page .auth-password input {
  padding-right: 50px;
}

body.auth-page .auth-toggle {
  position: absolute;
  right: 7px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
  color: var(--text-color);
  cursor: pointer;
}

body.auth-page .auth-submit {
  width: 100%;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--primary-color) 55%, transparent);
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

body.auth-page .auth-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

body.auth-page .auth-link {
  display: block;
  text-align: center;
  color: var(--muted-color);
  font-weight: 900;
  text-decoration: none;
}

body.auth-page .auth-link:hover {
  color: var(--primary-color);
}

body.auth-page .auth-footnote {
  margin: 4px 0 0;
  text-align: center;
  color: var(--muted-color);
  font-size: .82rem;
}

@media (max-width: 700px) {
  body.auth-page .auth-wrapper {
    align-items: flex-start;
    padding-top: 24px;
  }

  body.auth-page .auth-card,
  body.auth-page .auth-card-register {
    width: 100%;
    padding: 18px;
  }

  body.auth-page .auth-grid {
    grid-template-columns: 1fr;
  }

  body.auth-page .auth-logo,
  body.auth-page .auth-brand img {
    width: 150px;
    height: 95px;
  }
}

/* ==========================================================
   Profil / utilisateurs / membres
   ========================================================== */

.avatar,
.avatar-container img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
}

.avatar-container { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.user-form-wrap,
.access-wrap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.access-left { flex: 1 1 260px; }

.members-scope,
.profile-scope {
  width: min(1100px, calc(100% - 28px));
  margin: 24px auto;
}

.no-members,
.fallback {
  color: var(--muted-color);
  padding: 12px;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius);
}

/* ==========================================================
   Cartes / modules admin
   ========================================================== */

.mods-toolbar,
.mod-host-bar,
.head,
.market-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mods-grid,
.mod-grid,
.infra-grid,
.proc-list,
.pdf-list,
.pages-matrix {
  display: grid;
  gap: 12px;
}

.mods-grid,
.mod-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.infra-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.mod-card,
.mod-host,
.infra-card,
.proc-item,
.pdf-left,
.page-cell,
.vignette,
.node {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--text-color);
}

.mod-card-title,
.mod-host-title,
.infra-title,
.proc-desc,
.pdf-name,
.page-name,
.news-title {
  color: var(--title-color);
  font-weight: 800;
}

.mod-thumb,
.theme-preview-box,
.logo-preview {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  overflow: hidden;
}

.corner-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary-dark);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
}

/* ==========================================================
   News
   ========================================================== */

.news-item {
  padding: 14px 0;
  border-top: 1px solid var(--border-color);
}

.news-item:first-child { border-top: 0; }
.news-subtitle { font-style: italic; color: var(--muted-color); }
.news-description { color: var(--text-color); line-height: 1.5; }

/* ==========================================================
   Modules exemple : animals
   ========================================================== */

.popupContent {
  padding: 12px;
  overflow: auto;
  flex: 1;
  background: var(--section-bg);
  color: var(--text-color);
}

.pop-close,
.popupHeader button,
#mod-close,
#closeViewerBtn,
#closeYtBtn,
#closeListBtn,
#closeThemesPopup,
#close-market {
  min-width: 30px;
  min-height: 30px;
  padding: 4px 8px;
}

.viewAnimal { cursor: pointer; }

.chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: .85rem;
}

/* ==========================================================
   Module exemple : infra
   ========================================================== */

.infra-scope { color: var(--text-color); }

.infra-scope .card,
.infra-scope .infra-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 14px;
}

.infra-scope .btn,
.infra-head .btn {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

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

.legend,
.legendWrap,
.vlan-list,
.wanchips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.vlan-b,
.vlan-list span,
.wanchips span {
  display: inline-flex;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--panel-bg);
}

/* ==========================================================
   Aperçus / viewer / PDF
   ========================================================== */

.viewer-frame iframe,
#pdfFrame,
#ytFrame,
#mod-iframe {
  width: 100%;
  min-height: 70vh;
  border: 0;
  background: var(--input-bg);
}

.viewer-toolbar,
.viewerMeta,
.zoom-indicator,
#zoomIndicator {
  color: var(--muted-color);
}

.th-preview-float,
#previewFloat {
  position: fixed;
  z-index: 9998;
  display: none;
  padding: 8px;
  background: var(--section-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px var(--shadow-color);
}

.no-pdf,
.no-proc-remote {
  padding: 14px;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius);
  color: var(--muted-color);
}

/* ==========================================================
   Animations / bulles
   ========================================================== */

.float-cloud,
.floating-bubble {
  position: absolute;
  z-index: 10;
  background: var(--section-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: 0 10px 24px var(--shadow-color);
}

.floating-bubble {
  opacity: 0;
  animation: fadeInOut 6s ease-in-out forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(20px); }
  10% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* ==========================================================
   Compatibilité anciens noms / utilitaires
   ========================================================== */

.wrap { width: min(1200px, calc(100% - 28px)); margin: 24px auto; }
.brand { font-weight: 900; color: var(--title-color); }
.logo-preview img { display: block; max-height: 90px; object-fit: contain; }
.select,
.sel,
.inp,
.txt { width: 100%; }

.accordion {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--section-bg);
  overflow: hidden;
}

.accordion summary {
  cursor: pointer;
  padding: 12px 14px;
  background: var(--panel-bg);
  color: var(--title-color);
  font-weight: 800;
}

.accordion > div { padding: 14px; }

.red { color: var(--danger-color) !important; }
.green { color: var(--success-color) !important; }
.danger { color: var(--danger-color); }
.secondary { color: var(--muted-color); }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 700px) {
  body { font-size: 13px; }
  .container,
  .profile-container,
  .settings-wrapper,
  .market-wrapper,
  .members-scope,
  .profile-scope {
    width: calc(100% - 16px);
    margin: 12px auto;
    padding: 6px;
  }
  .section,
  .card { padding: 14px; }
  #top-bar .center { display: none; }
  #date,
  #time,
  #role { min-width: auto; }
  #controls { overflow-x: auto; }
  #controls select,
  #controls button { flex: 0 0 auto; }
  .right-menu { width: min(260px, calc(100vw - 24px)); }
  th,
  td { padding: 8px; }
}


/* ==========================================================
   DoMyDesk - Admin vignettes ouvrables
   ========================================================== */

.admin-page {
  width: min(1500px, calc(100% - 32px));
  margin: 24px auto;
}

.admin-intro {
  background: var(--section-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px var(--shadow-color);
  padding: 22px;
  margin-bottom: 20px;
}

.admin-id-box {
  margin-top: 14px;
  padding: 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.admin-id-box code {
  color: var(--title-color);
  font-weight: 900;
  word-break: break-all;
}

.admin-vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
  gap: 20px;
  align-items: start;
}

.admin-vignette {
  background: var(--section-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 30px var(--shadow-color);
  overflow: hidden;
}

.admin-vignette summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
}

.admin-vignette summary::-webkit-details-marker {
  display: none;
}

.admin-vignette summary:hover {
  background: var(--panel-bg);
}

.admin-vignette-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-vignette-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--title-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: .85rem;
}

.admin-vignette-title h2 {
  margin: 0;
  color: var(--title-color);
}

.admin-vignette-title p {
  margin: 4px 0 0;
  color: var(--muted-color);
}

.admin-vignette-body {
  padding: 18px 20px;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-form-grid .full {
  grid-column: 1 / -1;
}

.admin-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-box {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
}

.admin-logo-preview {
  max-width: 260px;
  max-height: 180px;
  object-fit: contain;
  padding: 8px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.admin-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.admin-access-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 54px;
  padding: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.admin-access-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.admin-access-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--title-color);
  font-weight: 800;
}

.admin-module-cfg {
  margin-top: 18px;
}

@media (max-width: 900px) {
  .admin-page {
    width: calc(100% - 16px);
    margin: 12px auto;
  }

  .admin-vignettes,
  .admin-form-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   DoMyDesk Modules - Base générique tous modules
   Préfixe officiel : dmdm-
   Objectif :
   - Les modules utilisent ces classes communes.
   - Le thème décide du rendu.
   - Les fichiers PHP des modules évitent les styles internes.
   ========================================================== */

/* ---------- Variables module génériques ---------- */

:root {
  --dmdm-front-bg: var(--card-bg);
  --dmdm-background-bg: var(--panel-bg);
  --dmdm-surface-bg: var(--section-bg);
  --dmdm-input-bg: var(--input-bg);
  --dmdm-text-color: var(--text-color);
  --dmdm-muted-color: var(--muted-color);
  --dmdm-title-color: var(--title-color);
  --dmdm-primary-color: var(--primary-color);
  --dmdm-primary-dark: var(--primary-dark);
  --dmdm-primary-soft: var(--primary-soft);
  --dmdm-border-color: var(--border-color);
  --dmdm-danger-color: var(--danger-color);
  --dmdm-success-color: var(--success-color);
  --dmdm-warning-color: var(--warning-color);
  --dmdm-shadow-color: var(--shadow-color);
  --dmdm-radius-sm: var(--radius-sm);
  --dmdm-radius: var(--radius);
  --dmdm-radius-lg: var(--radius-lg);
  --dmdm-gap: 10px;
  --dmdm-gap-sm: 6px;
  --dmdm-gap-lg: 16px;
}

/* ---------- Surfaces principales ---------- */

.dmdm-front,
.dmdm-background,
.dmdm-container,
.dmdm-section,
.dmdm-zone,
.dmdm-card,
.dmdm-panel,
.dmdm-box,
.dmdm-tile,
.dmdm-item {
  box-sizing: border-box;
  color: var(--dmdm-text-color);
}

.dmdm-front {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  color: var(--dmdm-text-color);
  font-size: .95rem;
}

.dmdm-background,
.dmdm-container,
.dmdm-section,
.dmdm-zone {
  background: var(--dmdm-background-bg);
  border: 1px solid var(--dmdm-border-color);
  border-radius: var(--dmdm-radius);
  padding: 12px;
}

.dmdm-card,
.dmdm-panel,
.dmdm-box,
.dmdm-tile,
.dmdm-item {
  background: var(--dmdm-front-bg);
  border: 1px solid var(--dmdm-border-color);
  border-radius: var(--dmdm-radius);
  padding: 10px;
}

.dmdm-panel {
  background: var(--dmdm-background-bg);
  padding: 12px;
}

.dmdm-box {
  padding: 8px;
  border-radius: var(--dmdm-radius-sm);
}

.dmdm-tile {
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.dmdm-tile:hover {
  background: var(--dmdm-primary-soft);
  border-color: var(--dmdm-primary-color);
  transform: translateY(-1px);
}

/* ---------- Titres / textes ---------- */

.dmdm-title,
.dmdm-subtitle,
.dmdm-text,
.dmdm-muted,
.dmdm-label,
.dmdm-small,
.dmdm-code {
  margin-top: 0;
}

.dmdm-title {
  color: var(--dmdm-title-color);
  font-weight: 900;
  line-height: 1.2;
}

h1.dmdm-title { font-size: 1.5rem; }
h2.dmdm-title { font-size: 1.2rem; }
h3.dmdm-title { font-size: 1rem; }

.dmdm-subtitle,
.dmdm-muted {
  color: var(--dmdm-muted-color);
}

.dmdm-text {
  color: var(--dmdm-text-color);
  line-height: 1.45;
}

.dmdm-small {
  font-size: .85rem;
}

.dmdm-label {
  color: var(--dmdm-muted-color);
  font-weight: 800;
}

.dmdm-code,
.dmdm-codeblock {
  font-family: Consolas, "Courier New", monospace;
  color: var(--dmdm-text-color);
  background: var(--dmdm-input-bg);
  border: 1px solid var(--dmdm-border-color);
  border-radius: var(--dmdm-radius-sm);
}

.dmdm-code {
  display: inline-block;
  padding: 2px 6px;
}

.dmdm-codeblock {
  display: block;
  width: 100%;
  padding: 10px;
  overflow: auto;
  white-space: pre-wrap;
}

/* ---------- Barres / actions ---------- */

.dmdm-toolbar,
.dmdm-header,
.dmdm-footer,
.dmdm-actions,
.dmdm-row {
  display: flex;
  align-items: center;
  gap: var(--dmdm-gap);
  flex-wrap: wrap;
}

.dmdm-toolbar,
.dmdm-header {
  justify-content: space-between;
  margin-bottom: var(--dmdm-gap);
}

.dmdm-footer {
  justify-content: flex-end;
  margin-top: var(--dmdm-gap);
}

.dmdm-actions {
  justify-content: flex-start;
}

/* ---------- Boutons ---------- */

.dmdm-button,
.dmdm-button-small,
.dmdm-button-main,
.dmdm-button-danger,
.dmdm-button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid var(--dmdm-border-color);
  border-radius: var(--dmdm-radius-sm);
  background: var(--dmdm-background-bg);
  color: var(--dmdm-text-color);
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
}

.dmdm-button:hover,
.dmdm-button-small:hover,
.dmdm-button-main:hover,
.dmdm-button-ghost:hover {
  background: var(--dmdm-primary-dark);
  border-color: var(--dmdm-primary-color);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.dmdm-button-small {
  min-height: 26px;
  padding: 4px 8px;
  font-size: .85rem;
}

.dmdm-button-main {
  border-color: var(--dmdm-primary-color);
  background: var(--dmdm-primary-soft);
}

.dmdm-button-danger {
  color: #ffd5d5;
  border-color: rgba(255, 107, 107, .45);
  background: rgba(255, 107, 107, .13);
}

.dmdm-button-danger:hover {
  background: rgba(255, 107, 107, .28);
  border-color: var(--dmdm-danger-color);
}

.dmdm-button-ghost {
  background: transparent;
}

/* ---------- Formulaires ---------- */

.dmdm-form {
  display: grid;
  gap: var(--dmdm-gap);
}

.dmdm-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--dmdm-muted-color);
  font-weight: 800;
}

.dmdm-field-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dmdm-input,
.dmdm-select,
.dmdm-textarea,
.dmdm-range {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.dmdm-input,
.dmdm-select,
.dmdm-textarea {
  padding: 8px 10px;
  border: 1px solid var(--dmdm-border-color);
  border-radius: var(--dmdm-radius-sm);
  background: var(--dmdm-input-bg);
  color: var(--dmdm-text-color);
  outline: none;
}

.dmdm-textarea {
  min-height: 72px;
  resize: vertical;
  font-family: Consolas, "Courier New", monospace;
}

.dmdm-input:focus,
.dmdm-select:focus,
.dmdm-textarea:focus {
  border-color: var(--dmdm-primary-color);
  box-shadow: 0 0 0 3px var(--dmdm-primary-soft);
}

.dmdm-range {
  accent-color: var(--dmdm-primary-color);
}

.dmdm-check,
.dmdm-radio {
  accent-color: var(--dmdm-primary-color);
}

/* ---------- Menus / sous-menus / tabs ---------- */

.dmdm-menu,
.dmdm-submenu,
.dmdm-tabs {
  display: flex;
  gap: var(--dmdm-gap-sm);
  align-items: center;
  flex-wrap: wrap;
}

.dmdm-submenu {
  padding: 6px;
  border: 1px solid var(--dmdm-border-color);
  border-radius: var(--dmdm-radius);
  background: var(--dmdm-background-bg);
}

.dmdm-menu-item,
.dmdm-submenu-item,
.dmdm-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--dmdm-border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--dmdm-text-color);
  cursor: pointer;
  text-decoration: none;
  font-weight: 800;
}

.dmdm-menu-item:hover,
.dmdm-submenu-item:hover,
.dmdm-tab:hover,
.dmdm-tab-active {
  background: var(--dmdm-primary-soft);
  border-color: var(--dmdm-primary-color);
  text-decoration: none;
}

/* ---------- Listes ---------- */

.dmdm-list {
  display: grid;
  gap: var(--dmdm-gap-sm);
}

.dmdm-list-scroll {
  overflow: auto;
  max-height: 260px;
  padding-right: 2px;
}

.dmdm-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dmdm-gap);
  padding: 8px;
  border: 1px solid var(--dmdm-border-color);
  border-radius: var(--dmdm-radius-sm);
  background: var(--dmdm-front-bg);
}

.dmdm-empty,
.dmdm-loading {
  color: var(--dmdm-muted-color);
  padding: 10px;
  border: 1px dashed var(--dmdm-border-color);
  border-radius: var(--dmdm-radius-sm);
}

/* ---------- États / messages ---------- */

.dmdm-status,
.dmdm-alert,
.dmdm-success,
.dmdm-warning,
.dmdm-error {
  padding: 8px 10px;
  border: 1px solid var(--dmdm-border-color);
  border-radius: var(--dmdm-radius-sm);
  background: var(--dmdm-background-bg);
  color: var(--dmdm-text-color);
}

.dmdm-status:empty {
  display: none;
}

.dmdm-alert {
  background: var(--dmdm-primary-soft);
}

.dmdm-success {
  color: var(--dmdm-success-color);
  border-color: rgba(94, 224, 138, .35);
  background: rgba(94, 224, 138, .10);
}

.dmdm-warning {
  color: var(--dmdm-warning-color);
  border-color: rgba(255, 204, 102, .35);
  background: rgba(255, 204, 102, .10);
}

.dmdm-error {
  color: var(--dmdm-danger-color);
  border-color: rgba(255, 107, 107, .35);
  background: rgba(255, 107, 107, .10);
}

/* ---------- Badges / pastilles ---------- */

.dmdm-badge,
.dmdm-chip,
.dmdm-tag,
.dmdm-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--dmdm-border-color);
  border-radius: 999px;
  background: var(--dmdm-background-bg);
  color: var(--dmdm-text-color);
  font-size: .85rem;
  font-weight: 800;
}

.dmdm-dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  background: var(--dmdm-muted-color);
}

.dmdm-dot-ok,
.dmdm-dot-success { background: var(--dmdm-success-color); }

.dmdm-dot-ko,
.dmdm-dot-danger { background: var(--dmdm-danger-color); }

.dmdm-dot-warning { background: var(--dmdm-warning-color); }

/* ---------- Grilles / layout ---------- */

.dmdm-grid,
.dmdm-grid-2,
.dmdm-grid-3,
.dmdm-grid-auto,
.dmdm-split {
  display: grid;
  gap: var(--dmdm-gap);
  min-width: 0;
}

.dmdm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dmdm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dmdm-grid-auto { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.dmdm-split { grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.1fr); }

.dmdm-column {
  display: flex;
  flex-direction: column;
  gap: var(--dmdm-gap);
  min-width: 0;
}

.dmdm-full { grid-column: 1 / -1; }

/* ---------- Popup / fenêtre générique module ---------- */

.dmdm-popup {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  display: none;
  overflow: visible;
  pointer-events: none;
  z-index: 999999;
}

.dmdm-popup.dmdm-open,
.dmdm-popup.open {
  display: block;
}

.dmdm-window {
  position: absolute;
  left: 40px;
  top: 40px;
  width: min(760px, calc(100vw - 40px));
  min-width: 320px;
  max-width: none;
  max-height: none;
  overflow: auto;
  pointer-events: auto;
  color: var(--dmdm-popup-color, var(--dmdm-text-color));
  background: var(--dmdm-popup-bg, var(--dmdm-front-bg));
  border: 1px solid var(--dmdm-popup-border, var(--dmdm-border-color));
  border-radius: var(--dmdm-radius);
  box-shadow: none;
}

.dmdm-window-header,
.dmdm-window-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dmdm-gap);
  min-height: 34px;
  padding: 8px 10px;
  color: var(--dmdm-popup-color, var(--dmdm-text-color));
  background: var(--dmdm-popup-bg, var(--dmdm-front-bg));
  border-bottom: 1px solid var(--dmdm-popup-border, var(--dmdm-border-color));
  cursor: move;
  user-select: none;
}

.dmdm-window-body {
  padding: 10px;
}

.dmdm-window-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--dmdm-gap-sm);
  flex-wrap: wrap;
  padding: 10px;
  border-top: 1px solid var(--dmdm-popup-border, var(--dmdm-border-color));
}

.dmdm-window-close {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--dmdm-border-color);
  border-radius: var(--dmdm-radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.dmdm-window-resize {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 14px;
  height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  cursor: nwse-resize;
}

/* Empêche les popups de déclencher les déplacements/redimensionnements dashboard */
.dmdm-popup,
.dmdm-popup *,
.dmdm-window,
.dmdm-window *,
.dmdm-window-resize,
.dmdm-window-header,
.dmdm-window-head {
  touch-action: none;
}

.dmdm-window input,
.dmdm-window select,
.dmdm-window textarea,
.dmdm-window button,
.dmdm-window a {
  touch-action: manipulation;
}

.dmdm-window {
  user-select: none;
}

.dmdm-window input,
.dmdm-window textarea {
  user-select: text;
}

/* ---------- Utilitaires module ---------- */

.dmdm-hidden { display: none !important; }
.dmdm-visible { display: block !important; }
.dmdm-scroll { overflow: auto; }
.dmdm-no-scroll { overflow: hidden; }
.dmdm-center { text-align: center; }
.dmdm-left { text-align: left; }
.dmdm-right { text-align: right; }
.dmdm-nowrap { white-space: nowrap; }
.dmdm-break { word-break: break-word; }
.dmdm-muted-line { border-top: 1px solid var(--dmdm-border-color); margin: 10px 0; }

/* ---------- Responsive module générique ---------- */

@media (max-width: 900px) {
  .dmdm-grid-2,
  .dmdm-grid-3,
  .dmdm-split {
    grid-template-columns: 1fr;
  }

  .dmdm-window {
    width: calc(100vw - 16px);
    left: 8px;
    top: 60px;
  }
}

@media (max-width: 560px) {
  .dmdm-front {
    font-size: .9rem;
  }

  .dmdm-toolbar,
  .dmdm-header,
  .dmdm-actions,
  .dmdm-footer,
  .dmdm-field-inline {
    align-items: stretch;
    flex-direction: column;
  }

  .dmdm-button,
  .dmdm-button-main,
  .dmdm-button-danger,
  .dmdm-button-ghost {
    width: 100%;
  }

  .dmdm-window {
    width: calc(100vw - 8px);
    min-width: 0;
    left: 4px;
    top: 50px;
  }
  

/* ==========================================================
   DoMyDesk Modules - Alias court optionnel
   Pour écrire plus vite dans les modules simples
   ========================================================== */

.dmdm-bg { background: var(--dmdm-background-bg); }
.dmdm-front-bg { background: var(--dmdm-front-bg); }
.dmdm-text-color { color: var(--dmdm-text-color); }
.dmdm-title-color { color: var(--dmdm-title-color); }
.dmdm-border { border: 1px solid var(--dmdm-border-color); }
.dmdm-radius { border-radius: var(--dmdm-radius); }
.dmdm-padding { padding: 10px; }
.dmdm-gap { gap: var(--dmdm-gap); }
}

/* ==========================================================
   Variables de compatibilité pour anciens styles déplacés
   ========================================================== */
:root {
  --radius-md: var(--radius);
  --shadow-sm: 0 10px 24px var(--shadow-color);
  --shadow-lg: 0 24px 80px var(--shadow-color);
  --button-bg: var(--panel-bg);
  --button-text-color: #ffffff;
  --bg-deep: var(--background-color);
  --text: var(--text-color);
  --muted: var(--muted-color);
}



/* ==========================================================
site_settings .
   ========================================================== */
.pe-page {
    width: min(1230px, calc(100vw - 28px));
    margin: 72px auto 32px;
    background: var(--section-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 18px);
    box-shadow: 0 18px 42px var(--shadow-color, rgba(0,0,0,.35));
    padding: 14px;
    color: var(--text-color);
}
.pe-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--border-color);
    padding: 4px 4px 14px;
    margin-bottom: 14px;
}
.pe-title { margin: 0; color: var(--title-color); font-size: 1.55rem; }
.pe-subtitle { margin: 4px 0 0; color: var(--muted-color); }
.pe-user-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 11px; border: 1px solid var(--border-color);
    border-radius: 999px; background: var(--panel-bg); color: var(--text-color); font-weight: 800;
}
.pe-section-title { margin: 18px 0 12px; padding-left: 10px; border-left: 4px solid var(--primary-color); color: var(--title-color); }
.pe-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.pe-card {
    min-height: 76px; width: 100%; padding: 12px 14px; text-align: left;
    border: 1px solid var(--border-color); border-radius: var(--radius, 14px);
    background: var(--card-bg); color: var(--text-color); box-shadow: 0 10px 28px var(--shadow-color, rgba(0,0,0,.28));
    cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pe-card:hover { border-color: var(--primary-color); background: var(--primary-soft, var(--panel-bg)); }
.pe-card-main { display: grid; gap: 4px; min-width: 0; }
.pe-card-title { color: var(--title-color); font-weight: 900; font-size: 1rem; }
.pe-card-desc { color: var(--muted-color); font-size: .88rem; font-weight: 700; }
.pe-card-icon {
    width: 30px; height: 30px; min-width: 30px; border: 1px solid var(--border-color); border-radius: 999px;
    background: var(--panel-bg); color: var(--text-color); display: inline-flex; align-items: center; justify-content: center; font-weight: 900;
}
.pe-popup {
    position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center;
    padding: 22px; background: rgba(0,0,0,.72); backdrop-filter: blur(4px);
}
.pe-popup.is-open { display: flex; }
.pe-popup-window {
    width: min(960px, 96vw); max-height: 88vh; overflow: auto; background: var(--section-bg); color: var(--text-color);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg, 18px); box-shadow: 0 18px 48px var(--shadow-color, rgba(0,0,0,.45));
}
.pe-popup-window.pe-popup-wide { width: min(1180px, 96vw); }
.pe-popup-head {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; background: var(--panel-bg); border-bottom: 1px solid var(--border-color);
}
.pe-popup-head h2 { margin: 0; color: var(--title-color); }
.pe-popup-body { padding: 14px; background: var(--section-bg); }
.pe-form { display: grid; gap: 10px; }
.pe-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pe-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pe-note { margin: 0 0 10px; color: var(--muted-color); }
.pe-msg { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius, 14px); background: var(--panel-bg); color: var(--text-color); }
.pe-msg-ok { border-color: var(--primary-color); }
.pe-msg-error { border-color: var(--danger-color, var(--primary-color)); }
input[type="text"], input[type="email"], input[type="password"], select, textarea, input[type="file"] {
    width: 100%; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 8px);
    background: var(--input-bg); color: var(--text-color); padding: 9px 10px;
}
label { color: var(--text-color); font-weight: 800; }
button, .btn, .btn-pill {
    border: 1px solid var(--border-color); border-radius: var(--radius-sm, 8px); background: var(--button-bg, var(--panel-bg));
    color: var(--text-color); padding: 8px 12px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
button:hover, .btn:hover, .btn-pill:hover { border-color: var(--primary-color); background: var(--primary-soft, var(--panel-bg)); }
.logo-preview { max-height: 74px; max-width: 180px; object-fit: contain; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 8px); background: var(--panel-bg); padding: 6px; }
.mods-toolbar { display:flex; justify-content:flex-end; margin: 0 0 12px; }
.mods-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.mod-card { background:var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius,14px); padding:10px; display:flex; gap:10px; align-items:center; }
.mod-thumb { width:42px; height:42px; border-radius:var(--radius-sm,8px); object-fit:cover; border:1px solid var(--border-color); background:var(--panel-bg); }
.mod-meta { flex:1; min-width:0; }
.mod-name { color:var(--title-color); font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mod-id { color:var(--muted-color); font-size:.82rem; }
.btn-del { color: var(--danger-color, var(--text-color)); }
.mods-pager { margin-top:12px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.table-wrap { width:100%; overflow:auto; border:1px solid var(--border-color); border-radius:var(--radius,14px); }
table { width:100%; border-collapse:collapse; }
th, td { padding:8px 10px; border-bottom:1px solid var(--border-color); color:var(--text-color); vertical-align:middle; }
th { color:var(--title-color); text-align:left; background:var(--panel-bg); }
.roles-table form { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.roles-table select { min-width:150px; }
.access-wrap { display:grid; grid-template-columns: minmax(220px, 340px) 1fr; gap:14px; align-items:start; }
.page-cell { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.page-info { display:flex; align-items:center; gap:8px; min-width:0; }
.page-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; background:var(--danger-color, #e74c3c); }
.dot.green { background:var(--success-color, #2ecc71); }
.market-overlay { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.72); z-index:10000; padding:20px; }
.market-modal { width:min(1100px,96vw); height:min(80vh,800px); background:var(--section-bg); border:1px solid var(--border-color); border-radius:var(--radius-lg,18px); overflow:hidden; display:flex; flex-direction:column; }
.market-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:var(--panel-bg); border-bottom:1px solid var(--border-color); }
.market-body { flex:1; }
.market-body iframe { width:100%; height:100%; border:0; display:block; background:var(--section-bg); }
@media (max-width: 1100px) { .pe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pe-grid, .pe-form-row, .access-wrap { grid-template-columns: 1fr; } .pe-page { margin-top: 52px; } }
/* ==========================================================
   Intégration styles déplacés : dashboard.php
   ========================================================== */
:root{
    --topbar-left: 0px;
    --topbar-width: 100vw;
  }

 #top-bar{
    left: var(--topbar-left) !important;
    width: var(--topbar-width) !important;
    will-change: left, width;
    transform: translateZ(0);
  }
body {
  margin: 0;                 
  font-family: Arial, sans-serif;
  color: var(--text-color);
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;            
}
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;             
}
#dashboard {
  flex: 1 1 auto;
  position: relative;
  overflow: auto;
    padding: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;  
  min-height: 0;  
}
#dashboard { scrollbar-gutter: stable; }
#dashboard.empty {
  overflow: hidden;
  padding: 0;
}
.module {
  position: absolute;
  border-radius: 8px;
  padding: 10px;            
  box-sizing: border-box;
}
.module.square  { border-radius: 0; }
.module.rounded { border-radius: 10px; }
.module.circle  {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.module-header {
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
}
.module.circle .module-header {
  flex-direction: column;
  align-items: flex-end;
}
.module-content {
  overflow-y: auto;
  height: 100%;
}
.module-close {
  font-size: 14px;
  color: var(--danger-color);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
}
.shape-select {
  font-size: .8em;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--muted-color);
  border-radius: 4px;
  margin-top: 2px;
}
.resize-handle {
  width: 12px;
  height: 12px;
  background: var(--primary-color);
  position: absolute;
  right: 2px;
  bottom: 2px;
  cursor: se-resize;
}
.mod-icon {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 68px;
  height: 68px;
  z-index: 2;
}
.popup {
  position: absolute;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  display: none;
  z-index: 1000;
}
.popup button {
  margin: 5px;
}
#controls {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 5px;
  background-color: var(--section-bg);
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  height: 32px;
  box-sizing: border-box;
}
#controls select,
#controls button {
  height: 24px !important;
  font-size: 10px !important;
  padding: 0 6px !important;
  min-width: 30px !important;
  max-width: 140px !important;
  background: var(--input-bg) !important;
  color: var(--muted-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 2px !important;
}
body.noscroll {
  overflow: hidden;
}

/* ==========================================================
   Intégration styles déplacés : index.php / accueil — isolé par body:has(.dmd-home)
   ========================================================== */
:root{
      --hm-bg:var(--background-color,var(--page-bg,#0b0f17));
      --hm-panel:var(--panel-bg,var(--section-bg,#101827));
      --hm-card:var(--card-bg,#131f33);
      --hm-text:var(--text-color,#e6eefc);
      --hm-muted:var(--muted-color,#9fb0c8);
      --hm-title:var(--title-color,var(--primary-color,#9fc2ff));
      --hm-primary:var(--primary-color,#7aa2ff);
      --hm-dark:var(--primary-dark,#456bd6);
      --hm-border:color-mix(in srgb,var(--hm-primary) 38%,transparent);
    }
    body:has(.dmd-home) * {box-sizing:border-box}
    body:has(.dmd-home) {min-height:100vh;color:var(--hm-text);background:radial-gradient(circle at 8% 0,color-mix(in srgb,var(--hm-primary) 22%,transparent),transparent 34vw),radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--hm-dark) 20%,transparent),transparent 30vw),var(--hm-bg);overflow-x:hidden}
    body:has(.dmd-home) .dmd-home {width:min(1180px,calc(100% - 32px));margin:18px auto 46px}
    body:has(.dmd-home) .hero, body:has(.dmd-home) .panel, body:has(.dmd-home) .stat {border:1px solid var(--hm-border);background:linear-gradient(135deg,rgba(255,255,255,.105),rgba(255,255,255,.035)),color-mix(in srgb,var(--hm-panel) 90%,transparent);box-shadow:0 24px 80px rgba(0,0,0,.28),0 0 38px color-mix(in srgb,var(--hm-primary) 18%,transparent)}
    body:has(.dmd-home) .hero {position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:22px;padding:24px;border-radius:32px;overflow:hidden}
    body:has(.dmd-home) .hero:after {content:"";position:absolute;right:-120px;bottom:-150px;width:420px;height:420px;border-radius:999px;background:radial-gradient(circle,color-mix(in srgb,var(--hm-primary) 28%,transparent),transparent 67%);pointer-events:none}
    body:has(.dmd-home) .hero>* {position:relative;z-index:1}
    body:has(.dmd-home) .eyebrow {display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:8px 12px;border:1px solid var(--hm-border);border-radius:999px;color:var(--hm-title);background:color-mix(in srgb,var(--hm-primary) 11%,transparent);font-size:.88rem;font-weight:900}
    body:has(.dmd-home) .eyebrow:before {content:"";width:8px;height:8px;border-radius:999px;background:var(--hm-primary);box-shadow:0 0 18px var(--hm-primary)}
    body:has(.dmd-home) .hero h1 {margin:0;font-size:clamp(2.2rem,5vw,5rem);line-height:.94;letter-spacing:-.075em}body:has(.dmd-home) .hero h1 span {color:var(--hm-title);text-shadow:0 0 34px color-mix(in srgb,var(--hm-primary) 28%,transparent)}
    body:has(.dmd-home) .hero-lead {max-width:720px;margin:18px 0 0;color:var(--hm-muted);font-size:clamp(1rem,1.8vw,1.17rem);line-height:1.7}
    body:has(.dmd-home) .hero-actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}body:has(.dmd-home) .home-btn {display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--hm-border);color:var(--hm-text);text-decoration:none;font-weight:900;background:rgba(255,255,255,.055);transition:.22s ease}body:has(.dmd-home) .home-btn:hover {transform:translateY(-2px);background:rgba(255,255,255,.085)}body:has(.dmd-home) .home-btn.primary {background:linear-gradient(135deg,var(--hm-primary),var(--hm-dark));color:var(--button-text-color,#fff);border-color:transparent}
    body:has(.dmd-home) .hero-visual {min-height:350px;border:1px solid rgba(255,255,255,.10);border-radius:24px;background:radial-gradient(circle at 25% 20%,color-mix(in srgb,var(--hm-primary) 20%,transparent),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
    body:has(.dmd-home) .mock-window {position:absolute;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:color-mix(in srgb,var(--hm-card) 84%,transparent);box-shadow:0 20px 46px rgba(0,0,0,.26);overflow:hidden;animation:floaty 7s ease-in-out infinite}
    body:has(.dmd-home) .mock-window:nth-child(1) {left:24px;top:28px;width:72%;height:145px}body:has(.dmd-home) .mock-window:nth-child(2) {right:26px;top:136px;width:58%;height:128px;animation-delay:-2.2s}body:has(.dmd-home) .mock-window:nth-child(3) {left:42px;bottom:30px;width:64%;height:108px;animation-delay:-4.1s}
    @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
    body:has(.dmd-home) .mock-top {display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)}body:has(.dmd-home) .dot {width:8px;height:8px;border-radius:999px;background:var(--hm-primary);opacity:.95}body:has(.dmd-home) .dot:nth-child(2) {opacity:.55}body:has(.dmd-home) .dot:nth-child(3) {opacity:.28}
    body:has(.dmd-home) .mock-body {padding:14px}body:has(.dmd-home) .mock-line {height:10px;border-radius:999px;background:rgba(255,255,255,.13);margin-bottom:10px}body:has(.dmd-home) .mock-line.big {width:74%;height:14px;background:color-mix(in srgb,var(--hm-primary) 42%,rgba(255,255,255,.12))}body:has(.dmd-home) .mock-line.mid {width:58%}body:has(.dmd-home) .mock-line.small {width:38%}
    body:has(.dmd-home) .stats {display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}body:has(.dmd-home) .stat {position:relative;overflow:hidden;padding:18px;min-height:112px;border-radius:22px}body:has(.dmd-home) .stat:before {content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--hm-primary)}body:has(.dmd-home) .stat strong {display:block;color:var(--hm-title);font-size:1.65rem}body:has(.dmd-home) .stat span {display:block;margin-top:5px;color:var(--hm-muted);line-height:1.45;font-size:.94rem}
    body:has(.dmd-home) .home-grid {display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;margin-top:18px;align-items:start}body:has(.dmd-home) .panel {border-radius:28px;overflow:hidden}body:has(.dmd-home) .panel-head {padding:20px;border-bottom:1px solid rgba(255,255,255,.08)}body:has(.dmd-home) .panel-kicker {margin:0 0 8px;color:var(--hm-primary);font-weight:950;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}body:has(.dmd-home) .panel-title {margin:0;font-size:clamp(1.35rem,2vw,2rem);letter-spacing:-.04em}body:has(.dmd-home) .panel-desc {margin:8px 0 0;color:var(--hm-muted);line-height:1.6}
    body:has(.dmd-home) .feature-list, body:has(.dmd-home) #news-container {display:grid;gap:12px;padding:16px}body:has(.dmd-home) .feature, body:has(.dmd-home) .news-card {border:1px solid rgba(255,255,255,.10);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));box-shadow:0 14px 40px rgba(0,0,0,.18);transition:.22s ease}body:has(.dmd-home) .feature:hover, body:has(.dmd-home) .news-card:hover {transform:translateY(-3px);border-color:color-mix(in srgb,var(--hm-primary) 48%,transparent);background:rgba(255,255,255,.075)}body:has(.dmd-home) .feature {display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px}body:has(.dmd-home) .ico {width:44px;height:44px;border-radius:16px;display:grid;place-items:center;color:var(--hm-title);font-size:1.2rem;background:color-mix(in srgb,var(--hm-primary) 14%,transparent);border:1px solid color-mix(in srgb,var(--hm-primary) 26%,transparent)}body:has(.dmd-home) .feature h3 {margin:0 0 4px}body:has(.dmd-home) .feature p {margin:0;color:var(--hm-muted);line-height:1.5;font-size:.94rem}
    body:has(.dmd-home) .news-toolbar {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 0}body:has(.dmd-home) .news-count, body:has(.dmd-home) .page-indicator {color:var(--hm-muted);font-size:.92rem}body:has(.dmd-home) #news-container {min-height:350px}body:has(.dmd-home) .news-card {position:relative;padding:16px 16px 16px 18px}body:has(.dmd-home) .news-card:before {content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:999px;background:var(--hm-primary)}body:has(.dmd-home) .news-title {margin:0;font-size:1.04rem;font-weight:950}body:has(.dmd-home) .news-subtitle {margin:5px 0 0;color:var(--hm-title);font-weight:750}body:has(.dmd-home) .news-meta {display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;color:var(--hm-muted);font-size:.86rem}body:has(.dmd-home) .news-pill {display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}body:has(.dmd-home) .news-description {margin:10px 0 0;color:var(--hm-muted);line-height:1.55}
    body:has(.dmd-home) .pagination {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px 16px}body:has(.dmd-home) .pagination-actions {display:flex;gap:10px}body:has(.dmd-home) .pagination button {min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--hm-border);color:var(--hm-text);background:rgba(255,255,255,.055);font-weight:900;cursor:pointer}body:has(.dmd-home) .pagination button:disabled {opacity:.42;cursor:not-allowed}body:has(.dmd-home) .empty-state, body:has(.dmd-home) .error-state, body:has(.dmd-home) .loading-state {display:grid;place-items:center;min-height:280px;text-align:center;color:var(--hm-muted);border:1px dashed rgba(255,255,255,.16);border-radius:20px;background:rgba(255,255,255,.035);padding:22px}body:has(.dmd-home) .error-state {color:#ff9a9a}body:has(.dmd-home) .mini-footer {margin-top:18px;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:22px;color:var(--hm-muted);background:rgba(255,255,255,.035);text-align:center}
    @media (max-width:980px) {
body:has(.dmd-home) .hero, body:has(.dmd-home) .home-grid {grid-template-columns:1fr}body:has(.dmd-home) .hero-visual {min-height:300px}body:has(.dmd-home) .stats {grid-template-columns:repeat(2,1fr)}
}@media (max-width:620px) {
body:has(.dmd-home) .dmd-home {width:min(100% - 20px,1180px)}body:has(.dmd-home) .hero {padding:16px;border-radius:22px}body:has(.dmd-home) .hero h1 {font-size:clamp(2rem,13vw,3.2rem)}body:has(.dmd-home) .hero-actions {display:grid}body:has(.dmd-home) .home-btn {width:100%}body:has(.dmd-home) .stats {grid-template-columns:1fr}body:has(.dmd-home) .feature {grid-template-columns:1fr}body:has(.dmd-home) .pagination {align-items:stretch;flex-direction:column}body:has(.dmd-home) .pagination-actions {display:grid;grid-template-columns:1fr 1fr}
}

/* ==========================================================
   Intégration styles déplacés : members.php
   ========================================================== */
.members-page {
            width: min(1180px, calc(100% - 32px));
            margin: 26px auto 42px;
        }

        .members-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 16px;
            margin-bottom: 18px;
        }

        .members-title-block h1 {
            margin: 0;
            font-size: clamp(1.45rem, 2vw, 2rem);
            line-height: 1.15;
        }

        .members-title-block p {
            margin: 6px 0 0;
            color: var(--muted-color, inherit);
            opacity: .88;
        }

        .members-count {
            flex: 0 0 auto;
            padding: 8px 12px;
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 34%, transparent);
            border-radius: var(--radius-md, 14px);
            background: color-mix(in srgb, var(--card-bg, transparent) 78%, transparent);
            font-weight: 700;
            font-size: .9rem;
        }

        .members-toolbar {
            display: grid;
            gap: 10px;
            margin-bottom: 14px;
            padding: 12px;
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 24%, transparent);
            border-radius: var(--radius-md, 16px);
            background: color-mix(in srgb, var(--card-bg, transparent) 72%, transparent);
        }

        .members-search {
            width: 100%;
            box-sizing: border-box;
            border-radius: var(--radius-md, 13px);
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 28%, transparent);
            background: var(--input-bg, transparent);
            color: inherit;
            padding: 10px 12px;
            outline: none;
        }

        .members-search:focus {
            border-color: color-mix(in srgb, var(--primary-color, currentColor) 62%, transparent);
        }

        .members-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }

        .members-filter {
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 28%, transparent);
            background: color-mix(in srgb, var(--input-bg, transparent) 76%, transparent);
            color: inherit;
            border-radius: 999px;
            padding: 7px 10px;
            cursor: pointer;
            font-size: .83rem;
            font-weight: 800;
        }

        .members-filter.active,
        .members-filter:hover {
            border-color: color-mix(in srgb, var(--primary-color, currentColor) 58%, transparent);
            background: color-mix(in srgb, var(--primary-color, currentColor) 18%, transparent);
        }

        .members-alert {
            margin-bottom: 14px;
            padding: 10px 12px;
            border-radius: var(--radius-md, 14px);
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 36%, transparent);
            background: color-mix(in srgb, var(--card-bg, transparent) 78%, transparent);
            font-weight: 700;
        }

        .members-alert.error {
            border-color: color-mix(in srgb, var(--danger-color, var(--primary-color, currentColor)) 54%, transparent);
        }

        .members-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
            gap: 12px;
        }

        .member-card {
            position: relative;
            display: grid;
            grid-template-columns: 54px 1fr auto;
            gap: 10px;
            align-items: center;
            min-height: 88px;
            padding: 12px;
            color: inherit;
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 28%, transparent);
            border-radius: var(--radius-md, 16px);
            background: color-mix(in srgb, var(--card-bg, transparent) 82%, transparent);
            box-shadow: var(--shadow-sm, none);
            transition: transform .14s ease, border-color .18s ease, background .18s ease;
            overflow: hidden;
        }

        .member-card.is-hidden {
            display: none;
        }

        .member-card:hover {
            transform: translateY(-2px);
            border-color: color-mix(in srgb, var(--primary-color, currentColor) 58%, transparent);
            background: color-mix(in srgb, var(--card-bg, transparent) 92%, var(--primary-color, currentColor) 8%);
        }

        .member-open {
            position: absolute;
            inset: 0;
            border: 0;
            background: transparent;
            cursor: pointer;
            z-index: 1;
        }

        .member-avatar,
        .member-avatar-fallback {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 46%, transparent);
            object-fit: cover;
            background: color-mix(in srgb, var(--input-bg, transparent) 84%, transparent);
            position: relative;
            z-index: 2;
        }

        .member-avatar-fallback {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: .95rem;
        }

        .member-info {
            min-width: 0;
            position: relative;
            z-index: 2;
            pointer-events: none;
        }

        .member-name-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .member-name {
            margin: 0;
            font-size: .98rem;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .member-role-system {
            flex: 0 0 auto;
            padding: 3px 7px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 34%, transparent);
            font-size: .72rem;
            font-weight: 800;
            opacity: .94;
        }

        .member-email {
            margin: 3px 0 0;
            font-size: .78rem;
            color: var(--muted-color, inherit);
            opacity: .84;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .member-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }

        .member-pill {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            padding: 4px 7px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--input-bg, transparent) 76%, transparent);
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 20%, transparent);
            font-size: .75rem;
            line-height: 1.1;
            color: inherit;
            opacity: .92;
        }

        .member-card-actions {
            position: relative;
            z-index: 3;
            display: flex;
            gap: 5px;
        }

        .member-action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 42%, transparent);
            background: color-mix(in srgb, var(--panel-bg, transparent) 92%, transparent);
            color: inherit;
            text-decoration: none;
            font-size: .8rem;
            font-weight: 800;
            cursor: pointer;
        }

        .member-action-btn:hover {
            background: color-mix(in srgb, var(--primary-color, currentColor) 18%, var(--panel-bg, transparent));
        }

        .members-empty,
        .members-no-result {
            padding: 18px;
            border: 1px dashed color-mix(in srgb, var(--primary-color, currentColor) 32%, transparent);
            border-radius: var(--radius-md, 16px);
            text-align: center;
            color: var(--muted-color, inherit);
        }

        .members-no-result {
            display: none;
            margin-top: 12px;
        }

        .members-no-result.active {
            display: block;
        }

        .member-modal-backdrop {
            position: fixed;
            inset: 0;
            z-index: 9990;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: rgba(0, 0, 0, .62);
            backdrop-filter: blur(8px);
        }

        .member-modal-backdrop.active {
            display: flex;
        }

        .member-modal {
            width: min(820px, 100%);
            max-height: min(86vh, 820px);
            overflow: auto;
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 44%, transparent);
            border-radius: var(--radius-lg, 22px);
            background: color-mix(in srgb, var(--section-bg, var(--card-bg, #111)) 96%, transparent);
            box-shadow: var(--shadow-lg, 0 24px 80px rgba(0,0,0,.45));
        }

        .member-modal-head {
            position: sticky;
            top: 0;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 16px;
            border-bottom: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 24%, transparent);
            background: color-mix(in srgb, var(--section-bg, var(--card-bg, #111)) 96%, transparent);
        }

        .member-modal-title {
            margin: 0;
            font-size: 1.08rem;
        }

        .member-modal-close {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 35%, transparent);
            background: color-mix(in srgb, var(--panel-bg, transparent) 80%, transparent);
            color: inherit;
            cursor: pointer;
            font-weight: 900;
        }

        .member-modal-body {
            padding: 16px;
        }

        .member-view-top {
            display: grid;
            grid-template-columns: 112px 1fr;
            gap: 16px;
            align-items: center;
            margin-bottom: 16px;
        }

        .member-view-avatar,
        .member-view-avatar-fallback {
            width: 112px;
            height: 112px;
            border-radius: 50%;
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 50%, transparent);
            object-fit: cover;
            background: color-mix(in srgb, var(--input-bg, transparent) 84%, transparent);
        }

        .member-view-avatar-fallback {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            font-weight: 900;
        }

        .member-view-name {
            margin: 0 0 6px;
            font-size: clamp(1.25rem, 2vw, 1.75rem);
        }

        .member-view-email {
            margin: 0;
            color: var(--muted-color, inherit);
            opacity: .86;
            word-break: break-all;
        }

        .member-detail-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin: 14px 0 16px;
        }

        .member-detail {
            padding: 10px;
            border-radius: var(--radius-md, 14px);
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 22%, transparent);
            background: color-mix(in srgb, var(--card-bg, transparent) 76%, transparent);
        }

        .member-detail span {
            display: block;
            margin-bottom: 4px;
            color: var(--muted-color, inherit);
            font-size: .78rem;
            opacity: .84;
        }

        .member-detail strong {
            display: block;
            font-size: .96rem;
        }

        .member-modules-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 8px;
            margin-top: 10px;
        }

        .member-module-item {
            padding: 8px 9px;
            border-radius: var(--radius-md, 12px);
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 22%, transparent);
            background: color-mix(in srgb, var(--input-bg, transparent) 72%, transparent);
            font-size: .85rem;
        }

        .member-modal-actions {
            display: flex;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 16px;
        }

        .member-modal-btn {
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 38%, transparent);
            background: color-mix(in srgb, var(--primary-color, currentColor) 13%, transparent);
            color: inherit;
            border-radius: var(--radius-md, 13px);
            padding: 9px 12px;
            cursor: pointer;
            font-weight: 800;
        }

        .member-modal-btn:hover {
            background: color-mix(in srgb, var(--primary-color, currentColor) 22%, transparent);
        }

        .member-form {
            display: grid;
            gap: 11px;
        }

        .member-form-row {
            display: grid;
            gap: 5px;
        }

        .member-form-row label {
            font-size: .85rem;
            color: var(--muted-color, inherit);
            font-weight: 700;
        }

        .member-form-row input,
        .member-form-row select {
            width: 100%;
            box-sizing: border-box;
            border-radius: var(--radius-md, 12px);
            border: 1px solid color-mix(in srgb, var(--primary-color, currentColor) 28%, transparent);
            background: var(--input-bg, transparent);
            color: inherit;
            padding: 10px 11px;
            outline: none;
        }

        .member-form-row input:focus,
        .member-form-row select:focus {
            border-color: color-mix(in srgb, var(--primary-color, currentColor) 62%, transparent);
        }

        .member-form-note {
            padding: 9px 10px;
            border-radius: var(--radius-md, 12px);
            background: color-mix(in srgb, var(--input-bg, transparent) 76%, transparent);
            color: var(--muted-color, inherit);
            font-size: .86rem;
        }

        .member-copy-status {
            min-height: 18px;
            color: var(--muted-color, inherit);
            font-size: .84rem;
            text-align: right;
        }

        .member-hidden {
            display: none !important;
        }

        @media (max-width: 720px) {
            .members-page {
                width: min(100% - 20px, 1180px);
                margin-top: 18px;
            }

            .members-head {
                align-items: flex-start;
                flex-direction: column;
            }

            .members-grid {
                grid-template-columns: 1fr;
            }

            .member-card {
                grid-template-columns: 54px 1fr;
            }

            .member-card-actions {
                grid-column: 1 / -1;
                justify-content: flex-end;
            }

            .member-view-top {
                grid-template-columns: 1fr;
                justify-items: center;
                text-align: center;
            }

            .member-detail-grid {
                grid-template-columns: 1fr;
            }
        }

/* ==========================================================
   Intégration styles déplacés : profile_edit.php
   ========================================================== */
.pe-page {
    width: min(980px, calc(100% - 28px));
    margin: 10px auto;
    color: var(--text-color);
}
.pe-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.pe-title { margin: 0; color: var(--title-color); }
.pe-subtitle { margin: 4px 0 0; color: var(--muted-color); }
.pe-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--panel-bg);
    color: var(--text-color);
    font-weight: 800;
}
.pe-head-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.pe-head-avatar,
.pe-head-avatar-empty {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--panel-bg);
    box-shadow: 0 10px 24px var(--shadow-color);
    flex: 0 0 64px;
}

.pe-head-avatar {
    object-fit: cover;
    display: block;
}

.pe-head-avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-color);
    font-weight: 900;
    font-size: 1.1rem;
}
.pe-section-title {
    margin: 18px 0 12px;
    padding-left: 10px;
    border-left: 4px solid var(--primary-color);
    color: var(--title-color);
}
.pe-grid,
.pe-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.pe-card {
    min-height: 58px;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: 0 10px 28px var(--shadow-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pe-card:hover { border-color: var(--primary-color); background: var(--primary-soft); }
.pe-card-main { display: grid; gap: 4px; min-width: 0; }
.pe-card-title { color: var(--title-color); font-weight: 900; font-size: 1rem; }
.pe-card-desc { color: var(--muted-color); font-size: .88rem; font-weight: 700; }
.pe-card-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--panel-bg);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}
.pe-modules-panel > summary {
    list-style: none;
}
.pe-modules-panel > summary::-webkit-details-marker {
    display: none;
}
.pe-modules-panel > summary::marker {
    content: "";
}
.pe-module-search { margin-bottom: 12px; }
.pe-message { margin: 0 0 16px; }
.pe-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(4px);
}
.pe-popup.is-open { display: flex; }
.pe-popup-window {
    width: min(960px, 96vw);
    max-height: 88vh;
    overflow: auto;
    background: var(--section-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 48px var(--shadow-color);
}
.pe-popup-window.pe-popup-wide { width: min(1180px, 96vw); }
.pe-popup-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
}
.pe-popup-head h2 { margin: 0; }
.pe-popup-body { padding: 14px; background: var(--section-bg); }
.pe-form { display: grid; gap: 10px; }
.pe-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.pe-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.pe-note { margin: 0 0 10px; color: var(--muted-color); }
.pe-check-line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-color);
    font-weight: 800;
}
.pe-check-line input { width: auto; }
.pe-avatar-line {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pe-avatar,
.pe-avatar-empty {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--input-bg);
}
.pe-avatar { object-fit: cover; }
.pe-avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-color);
    font-weight: 900;
}
.pe-theme-preview { margin-top: 10px; }
.pe-theme-preview-box {
    width: min(360px, 100%);
    aspect-ratio: 16 / 9;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    background: var(--input-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pe-theme-preview-box img { max-width: 100%; max-height: 100%; display: block; }
.pe-menu-list,
.pe-submenu-list { list-style: none; padding: 0; margin: 0; }
.pe-menu-list > li,
.pe-submenu-list > li {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(120px, 160px) minmax(160px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 9px;
    margin: 8px 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
}
.pe-submenu-list {
    grid-column: 1 / -1;
    padding-left: 18px;
    border-left: 2px solid var(--border-color);
}
.pe-submenu-list > li { grid-template-columns: minmax(140px, 1fr) minmax(120px, 160px) minmax(160px, 1fr) auto; }
#mod-iframe {
    width: 100%;
    min-height: 520px;
    border: 0;
    display: block;
    background: var(--input-bg);
}
.pe-preview-float {
    position: fixed;
    z-index: 10000;
    display: none;
    padding: 8px;
    background: var(--section-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 12px 28px var(--shadow-color);
    pointer-events: none;
}
.pe-preview-float img { width: 240px; display: block; }
@media (max-width: 900px) {
    .pe-grid,
    .pe-module-grid,
    .pe-form-row { grid-template-columns: 1fr; }
    .pe-menu-list > li,
    .pe-submenu-list > li { grid-template-columns: 1fr; }
    .pe-submenu-list { padding-left: 0; border-left: 0; }
}

/* ==========================================================
   Intégration styles déplacés : profile_view.php
   ========================================================== */
.profile-scope { --accent: currentColor; }
        .profile-scope h1 {
            text-align: center;
            margin: 24px 0 12px;
            font-size: 2rem;
        }
        .profile-scope .section {
            max-width: 880px;
            margin: 20px auto 30px;
        }
        .profile-container {
            display: flex;
            align-items: center;
            gap: 90px;
            margin-bottom: 16px;
        }
        .avatar-container { position: relative; }
        .avatar {
            width: 200px; height: 200px; border-radius: 50%;
            object-fit: cover; border: 2px solid var(--accent); display: block;
        }
        .avatar.fallback {
            display:flex; align-items:center; justify-content:center;
            background: transparent; color: inherit; font-weight: 700;
            width: 200px; height: 200px; border-radius: 50%; border: 2px solid var(--accent);
        }
        .edit-icon {
            position: absolute; top: 10px; right: 10px;
            border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
            background: color-mix(in srgb, var(--accent) 35%, transparent);
            border-radius: 10px; padding: 6px 10px; color: inherit; font-size: 12px; font-weight: 700;
            text-decoration: none; box-shadow: none; transition: opacity .2s, transform .12s, background .2s;
            opacity: 0; z-index: 2;
        }
        .avatar-container:hover .edit-icon { opacity: 1; }
        .edit-icon:hover { transform: translateY(-1px); }
        .info p { margin: 6px 0; font-size: 1.05rem; }
        .modules { margin-top: 16px; }
        .modules h2 { margin-bottom: 10px; font-size: 1.2rem; }
        .modules ul {
            list-style: none; padding: 0; margin: 0;
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 20px;
        }
        .modules li {
            padding: 6px 8px; border: 1px solid var(--accent); border-radius: 6px;
            text-align: center; background: color-mix(in srgb, var(--accent) 10%, transparent);
        }
        .back-links { display:flex; justify-content:center; gap:14px; margin: 0 0 24px; }
        .back-link {
            display:inline-block; font-weight:700; text-decoration:none; padding:8px 12px;
            border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);
            border-radius:10px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: inherit;
        }
        .back-link:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); }



/* ==========================================================
   Intégration styles déplacés : adm/site_settings.php — isolé pour éviter conflit avec profile_edit.php
   ========================================================== */
   
.pe-page:has(.roles-table), .pe-page:has(.market-overlay), .pe-page:has(.access-wrap) {width: min(1230px, calc(100vw - 28px));
    margin: 72px auto 32px;
    background: var(--section-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 18px);
    box-shadow: 0 18px 42px var(--shadow-color, rgba(0,0,0,.35));
    padding: 14px;
    color: var(--text-color);}
.pe-page:has(.roles-table) .pe-head {display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--border-color);
    padding: 4px 4px 14px;
    margin-bottom: 14px;}
.pe-page:has(.roles-table) .pe-title {margin: 0; color: var(--title-color); font-size: 1.55rem;}
.pe-page:has(.roles-table) .pe-subtitle {margin: 4px 0 0; color: var(--muted-color);}
.pe-page:has(.roles-table) .pe-user-pill {display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 11px; border: 1px solid var(--border-color);
    border-radius: 999px; background: var(--panel-bg); color: var(--text-color); font-weight: 800;}
.pe-page:has(.roles-table) .pe-section-title {margin: 18px 0 12px; padding-left: 10px; border-left: 4px solid var(--primary-color); color: var(--title-color);}
.pe-page:has(.roles-table) .pe-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch;}
.pe-page:has(.roles-table) .pe-card {min-height: 76px; width: 100%; padding: 12px 14px; text-align: left;
    border: 1px solid var(--border-color); border-radius: var(--radius, 14px);
    background: var(--card-bg); color: var(--text-color); box-shadow: 0 10px 28px var(--shadow-color, rgba(0,0,0,.28));
    cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.pe-page:has(.roles-table) .pe-card:hover {border-color: var(--primary-color); background: var(--primary-soft, var(--panel-bg));}
.pe-page:has(.roles-table) .pe-card-main {display: grid; gap: 4px; min-width: 0;}
.pe-page:has(.roles-table) .pe-card-title {color: var(--title-color); font-weight: 900; font-size: 1rem;}
.pe-page:has(.roles-table) .pe-card-desc {color: var(--muted-color); font-size: .88rem; font-weight: 700;}
.pe-page:has(.roles-table) .pe-card-icon {width: 30px; height: 30px; min-width: 30px; border: 1px solid var(--border-color); border-radius: 999px;
    background: var(--panel-bg); color: var(--text-color); display: inline-flex; align-items: center; justify-content: center; font-weight: 900;}
.pe-page:has(.roles-table) .pe-popup {position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center;
    padding: 22px; background: rgba(0,0,0,.72); backdrop-filter: blur(4px);}
.pe-page:has(.roles-table) .pe-popup.is-open {display: flex;}
.pe-page:has(.roles-table) .pe-popup-window {width: min(960px, 96vw); max-height: 88vh; overflow: auto; background: var(--section-bg); color: var(--text-color);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg, 18px); box-shadow: 0 18px 48px var(--shadow-color, rgba(0,0,0,.45));}
.pe-page:has(.roles-table) .pe-popup-window.pe-popup-wide {width: min(1180px, 96vw);}
.pe-page:has(.roles-table) .pe-popup-head {position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; background: var(--panel-bg); border-bottom: 1px solid var(--border-color);}
.pe-page:has(.roles-table) .pe-popup-head h2 {margin: 0; color: var(--title-color);}
.pe-page:has(.roles-table) .pe-popup-body {padding: 14px; background: var(--section-bg);}
.pe-page:has(.roles-table) .pe-form {display: grid; gap: 10px;}
.pe-page:has(.roles-table) .pe-form-row {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.pe-page:has(.roles-table) .pe-actions {display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 8px;}
.pe-page:has(.roles-table) .pe-note {margin: 0 0 10px; color: var(--muted-color);}
.pe-page:has(.roles-table) .pe-msg {margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius, 14px); background: var(--panel-bg); color: var(--text-color);}
.pe-page:has(.roles-table) .pe-msg-ok {border-color: var(--primary-color);}
.pe-page:has(.roles-table) .pe-msg-error {border-color: var(--danger-color, var(--primary-color));}
.pe-page:has(.roles-table) input[type="text"], .pe-page:has(.roles-table) input[type="email"], .pe-page:has(.roles-table) input[type="password"], .pe-page:has(.roles-table) select, .pe-page:has(.roles-table) textarea, .pe-page:has(.roles-table) input[type="file"] {width: 100%; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 8px);
    background: var(--input-bg); color: var(--text-color); padding: 9px 10px;}
.pe-page:has(.roles-table) label {color: var(--text-color); font-weight: 800;}
.pe-page:has(.roles-table) button, .pe-page:has(.roles-table) .btn, .pe-page:has(.roles-table) .btn-pill {border: 1px solid var(--border-color); border-radius: var(--radius-sm, 8px); background: var(--button-bg, var(--panel-bg));
    color: var(--text-color); padding: 8px 12px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;}
.pe-page:has(.roles-table) button:hover, .pe-page:has(.roles-table) .btn:hover, .pe-page:has(.roles-table) .btn-pill:hover {border-color: var(--primary-color); background: var(--primary-soft, var(--panel-bg));}
.pe-page:has(.roles-table) .logo-preview {max-height: 74px; max-width: 180px; object-fit: contain; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 8px); background: var(--panel-bg); padding: 6px;}
.pe-page:has(.roles-table) .mods-toolbar {display:flex; justify-content:flex-end; margin: 0 0 12px;}
.pe-page:has(.roles-table) .mods-grid {display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px;}
.pe-page:has(.roles-table) .mod-card {background:var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius,14px); padding:10px; display:flex; gap:10px; align-items:center;}
.pe-page:has(.roles-table) .mod-thumb {width:42px; height:42px; border-radius:var(--radius-sm,8px); object-fit:cover; border:1px solid var(--border-color); background:var(--panel-bg);}
.pe-page:has(.roles-table) .mod-meta {flex:1; min-width:0;}
.pe-page:has(.roles-table) .mod-name {color:var(--title-color); font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pe-page:has(.roles-table) .mod-id {color:var(--muted-color); font-size:.82rem;}
.pe-page:has(.roles-table) .btn-del {color: var(--danger-color, var(--text-color));}
.pe-page:has(.roles-table) .mods-pager {margin-top:12px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
.pe-page:has(.roles-table) .table-wrap {width:100%; overflow:auto; border:1px solid var(--border-color); border-radius:var(--radius,14px);}
.pe-page:has(.roles-table) table {width:100%; border-collapse:collapse;}
.pe-page:has(.roles-table) th, .pe-page:has(.roles-table) td {padding:8px 10px; border-bottom:1px solid var(--border-color); color:var(--text-color); vertical-align:middle;}
.pe-page:has(.roles-table) th {color:var(--title-color); text-align:left; background:var(--panel-bg);}
.pe-page:has(.roles-table) .roles-table form {display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.pe-page:has(.roles-table) .roles-table select {min-width:150px;}
.pe-page:has(.roles-table) .access-wrap {display:grid; grid-template-columns: minmax(220px, 340px) 1fr; gap:14px; align-items:start;}
.pe-page:has(.roles-table) .page-cell {display:flex; align-items:center; justify-content:space-between; gap:10px;}
.pe-page:has(.roles-table) .page-info {display:flex; align-items:center; gap:8px; min-width:0;}
.pe-page:has(.roles-table) .page-name {white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px;}
.pe-page:has(.roles-table) .dot {width:10px; height:10px; border-radius:50%; display:inline-block; background:var(--danger-color, #e74c3c);}
.pe-page:has(.roles-table) .dot.green {background:var(--success-color, #2ecc71);}
.pe-page:has(.roles-table) .market-overlay {position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.72); z-index:10000; padding:20px;}
.pe-page:has(.roles-table) .market-modal {width:min(1100px,96vw); height:min(80vh,800px); background:var(--section-bg); border:1px solid var(--border-color); border-radius:var(--radius-lg,18px); overflow:hidden; display:flex; flex-direction:column;}
.pe-page:has(.roles-table) .market-head {display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:var(--panel-bg); border-bottom:1px solid var(--border-color);}
.pe-page:has(.roles-table) .market-body {flex:1;}
.pe-page:has(.roles-table) .market-body iframe {width:100%; height:100%; border:0; display:block; background:var(--section-bg);}
@media (max-width: 1100px) {
 .pe-page:has(.roles-table) .pe-grid {grid-template-columns: repeat(2, minmax(0, 1fr));} 
}
@media (max-width: 700px) {
 .pe-page:has(.roles-table) .pe-grid, .pe-page:has(.roles-table) .pe-form-row, .pe-page:has(.roles-table) .access-wrap {grid-template-columns: 1fr;} .pe-page:has(.roles-table), .pe-page:has(.market-overlay), .pe-page:has(.access-wrap) {margin-top: 52px;} 
}


/* ===========================================
fix_all_rights
============================================ */

.rights-page {
  width: min(1280px, calc(100% - 28px));
  margin: 0 auto;
  padding: 34px 0;
  color: var(--text-color);
}

.rights-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  margin-bottom: 20px;
  background: var(--section-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px var(--shadow-color);
}

.rights-denied {
  border-color: var(--danger-color);
}

.rights-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 8px;
  color: var(--title-color);
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1.1;
}

.rights-title-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  border: 1px solid var(--border-color);
  box-shadow: 0 0 26px var(--shadow-color);
}

.rights-subtitle {
  margin: 0;
  color: var(--muted-color);
  line-height: 1.5;
}

.rights-subtitle strong {
  color: var(--text-color);
}

.rights-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.rights-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-color);
  font-weight: 900;
  text-decoration: none;
  border: 1px solid var(--border-color);
  background: var(--primary-color);
  box-shadow: 0 12px 30px var(--shadow-color);
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}

.rights-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  color: var(--text-color);
  text-decoration: none;
}

.rights-btn-secondary {
  background: var(--panel-bg);
  color: var(--text-color);
}

.rights-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.rights-stat-card {
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px var(--shadow-color);
}

.rights-stat-label {
  margin: 0 0 6px;
  color: var(--muted-color);
  font-size: .84rem;
  font-weight: 800;
}

.rights-stat-value {
  margin: 0;
  color: var(--text-color);
  font-size: 1.5rem;
  font-weight: 950;
}

.rights-stat-ok .rights-stat-value {
  color: var(--success-color);
}

.rights-stat-ko .rights-stat-value {
  color: var(--danger-color);
}

.rights-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  margin-bottom: 14px;
  background: var(--section-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.rights-search {
  width: min(520px, 100%);
  min-height: 42px;
  padding: 10px 12px;
  color: var(--text-color);
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  outline: none;
}

.rights-search::placeholder {
  color: var(--muted-color);
}

.rights-search:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.rights-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rights-filter-btn {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  color: var(--text-color);
  font-weight: 850;
  cursor: pointer;
}

.rights-filter-btn:hover {
  border-color: var(--primary-color);
  background: var(--primary-soft);
}

.rights-filter-btn.is-active {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: var(--text-color);
}

.rights-results-panel {
  overflow: hidden;
  background: var(--section-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px var(--shadow-color);
}

.rights-results-head {
  display: grid;
  grid-template-columns: 90px 90px 120px 1fr;
  gap: 10px;
  padding: 12px 16px;
  color: var(--muted-color);
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border-color);
  font-size: .8rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.rights-results-list {
  max-height: 62vh;
  overflow: auto;
}

.rights-result-row {
  display: grid;
  grid-template-columns: 90px 90px 120px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
}

.rights-result-row:hover {
  background: var(--primary-soft);
}

.rights-result-row:last-child {
  border-bottom: 0;
}

.rights-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: var(--radius-lg);
  font-size: .82rem;
  font-weight: 950;
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
  color: var(--text-color);
}

.rights-badge-ok {
  color: var(--success-color);
  border-color: var(--success-color);
  background: var(--card-bg);
}

.rights-badge-ko {
  color: var(--danger-color);
  border-color: var(--danger-color);
  background: var(--card-bg);
}

.rights-mode {
  font-family: Consolas, "Courier New", monospace;
  color: var(--warning-color);
  font-weight: 900;
}

.rights-path {
  min-width: 0;
  overflow: hidden;
  color: var(--text-color);
  font-family: Consolas, "Courier New", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rights-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted-color);
}

@media (max-width: 950px) {
  .rights-hero,
  .rights-tools {
    flex-direction: column;
    align-items: stretch;
  }

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

  .rights-results-head {
    display: none;
  }

  .rights-result-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 13px 16px;
  }

  .rights-path {
    white-space: normal;
    word-break: break-word;
  }
}

@media (max-width: 560px) {
  .rights-stats-grid {
    grid-template-columns: 1fr;
  }

  .rights-page {
    width: calc(100% - 18px);
    padding: 18px 0;
  }
}