/*===============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;
  --font-family: "Segoe UI", Arial, Tahoma, sans-serif;

  --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: var(--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); }

/* ==========================================================
   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;
}

/* ==========================================================
   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 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; } }