/* =========================================================
   EXDEV Display Adapter v1.2.1
   1366p · 1920p · 2K · 3K · 4K · 5K · 21:9 · 32:9
   L'adaptation repose sur le viewport CSS, le ratio et le DPR.
   ========================================================= */

:root {
  --exdev-sidebar-responsive: 304px;
  --exdev-content-responsive: 1640px;
  --exdev-landing-responsive: 1280px;
  --exdev-page-gutter-responsive: clamp(18px, 2.1vw, 42px);
  --exdev-grid-card-min: 270px;
  --exdev-readable-line: 78ch;
}

html.exdev-display-large {
  --exdev-sidebar-responsive: 318px;
  --exdev-content-responsive: 1880px;
  --exdev-landing-responsive: 1460px;
  --exdev-grid-card-min: 285px;
}

html.exdev-display-2k {
  --exdev-sidebar-responsive: 330px;
  --exdev-content-responsive: 2220px;
  --exdev-landing-responsive: 1640px;
  --exdev-page-gutter-responsive: clamp(28px, 2vw, 54px);
  --exdev-grid-card-min: 300px;
}

html.exdev-display-4k {
  --exdev-sidebar-responsive: 346px;
  --exdev-content-responsive: 2820px;
  --exdev-landing-responsive: 1940px;
  --exdev-page-gutter-responsive: clamp(36px, 2vw, 72px);
  --exdev-grid-card-min: 320px;
  font-size: 16.5px;
}

html.exdev-display-5k {
  --exdev-sidebar-responsive: 360px;
  --exdev-content-responsive: 3420px;
  --exdev-landing-responsive: 2280px;
  --exdev-page-gutter-responsive: clamp(42px, 2vw, 86px);
  --exdev-grid-card-min: 340px;
  font-size: 17px;
}

html.exdev-aspect-ultrawide {
  --exdev-content-responsive: min(3100px, 78vw);
  --exdev-landing-responsive: min(1900px, 72vw);
}

html.exdev-aspect-super-ultrawide {
  --exdev-content-responsive: min(3800px, 76vw);
  --exdev-landing-responsive: min(2200px, 68vw);
}

/* ---------- Dashboard client et administration ---------- */
@media (min-width: 861px) {
  .client-dashboard .workspace-sidebar,
  .admin-dashboard .workspace-sidebar {
    width: var(--exdev-sidebar-responsive) !important;
    max-width: var(--exdev-sidebar-responsive) !important;
  }

  .client-dashboard .workspace-main,
  .admin-dashboard .workspace-main {
    margin-left: var(--exdev-sidebar-responsive) !important;
    width: calc(100% - var(--exdev-sidebar-responsive)) !important;
    max-width: none !important;
  }

  .workspace-view,
  .admin-workspace-view {
    width: min(var(--exdev-content-responsive), calc(100% - (var(--exdev-page-gutter-responsive) * 2))) !important;
    max-width: none !important;
    padding: var(--exdev-page-gutter-responsive) 0 !important;
    margin-inline: auto !important;
  }

  .workspace-topbar {
    padding-inline: max(34px, calc((100% - var(--exdev-content-responsive)) / 2 + var(--exdev-page-gutter-responsive))) !important;
  }
}

/* Le contenu profite des grands écrans sans étirer les paragraphes. */
.workspace-view p,
.admin-workspace-view p,
.landing-shell p,
.landing-shell-pro p {
  text-wrap: pretty;
}

.dashboard-hero p,
.ops-hero p,
.home-hero p,
.module-cover p,
.plugins-title p,
.v12-checklist-head p {
  max-width: var(--exdev-readable-line);
}

html.exdev-display-large .quick-stats,
html.exdev-display-large .ops-metrics-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html.exdev-display-2k .quick-stats,
html.exdev-display-2k .ops-metrics-grid,
html.exdev-display-4k .quick-stats,
html.exdev-display-4k .ops-metrics-grid,
html.exdev-display-5k .quick-stats,
html.exdev-display-5k .ops-metrics-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

html.exdev-display-large .plugins-grid,
html.exdev-display-large .module-showcase-grid,
html.exdev-display-large .grid-cards {
  grid-template-columns: repeat(auto-fit, minmax(var(--exdev-grid-card-min), 1fr)) !important;
}

html.exdev-display-2k .plugins-grid,
html.exdev-display-2k .plugins-grid.small-grid,
html.exdev-display-2k .module-showcase-grid,
html.exdev-display-2k .grid-cards,
html.exdev-display-4k .plugins-grid,
html.exdev-display-4k .plugins-grid.small-grid,
html.exdev-display-4k .module-showcase-grid,
html.exdev-display-4k .grid-cards,
html.exdev-display-5k .plugins-grid,
html.exdev-display-5k .plugins-grid.small-grid,
html.exdev-display-5k .module-showcase-grid,
html.exdev-display-5k .grid-cards {
  grid-template-columns: repeat(auto-fit, minmax(var(--exdev-grid-card-min), 1fr)) !important;
}

html.exdev-display-2k .v12-checklist-grid,
html.exdev-display-4k .v12-checklist-grid,
html.exdev-display-5k .v12-checklist-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html.exdev-display-4k .v12-admin-stats,
html.exdev-display-5k .v12-admin-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html.exdev-display-4k .v12-detail-grid,
html.exdev-display-5k .v12-detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html.exdev-display-2k .dashboard-hero,
html.exdev-display-4k .dashboard-hero,
html.exdev-display-5k .dashboard-hero,
html.exdev-aspect-ultrawide .dashboard-hero,
html.exdev-aspect-super-ultrawide .dashboard-hero {
  grid-template-columns: minmax(580px, 1.35fr) minmax(430px, .65fr) !important;
}

html.exdev-display-4k .dashboard-hero,
html.exdev-display-5k .dashboard-hero {
  min-height: 520px;
}

html.exdev-display-4k .dashboard-hero h1,
html.exdev-display-5k .dashboard-hero h1,
html.exdev-display-4k .ops-hero h1,
html.exdev-display-5k .ops-hero h1 {
  max-width: 900px;
  font-size: clamp(64px, 4vw, 104px);
}

html.exdev-display-2k .module-panel .form-grid,
html.exdev-display-4k .module-panel .form-grid,
html.exdev-display-5k .module-panel .form-grid,
html.exdev-display-2k .config-block .form-grid,
html.exdev-display-4k .config-block .form-grid,
html.exdev-display-5k .config-block .form-grid {
  column-gap: clamp(22px, 1.5vw, 42px) !important;
}

html.exdev-aspect-super-ultrawide .dashboard-hero {
  min-height: 430px;
}

html.exdev-aspect-super-ultrawide .workspace-view,
html.exdev-aspect-super-ultrawide .admin-workspace-view {
  align-content: start;
}

/* ---------- Page d'accueil ---------- */
@media (min-width: 1181px) {
  .landing-nav,
  .landing-nav-pro,
  .landing-shell,
  .landing-shell-pro {
    width: min(var(--exdev-landing-responsive), calc(100% - (var(--exdev-page-gutter-responsive) * 2))) !important;
    max-width: none !important;
  }

  html.exdev-display-2k .home-hero,
  html.exdev-display-4k .home-hero,
  html.exdev-display-5k .home-hero,
  html.exdev-aspect-ultrawide .home-hero,
  html.exdev-aspect-super-ultrawide .home-hero {
    grid-template-columns: minmax(620px, 1.2fr) minmax(500px, .8fr) !important;
    min-height: 650px;
  }

  html.exdev-display-4k .home-hero h1,
  html.exdev-display-5k .home-hero h1 {
    max-width: 960px;
    font-size: clamp(74px, 4.2vw, 118px);
  }
}

/* ---------- Écrans verticaux 3000x5000 / affichage portrait ---------- */
html.exdev-aspect-portrait {
  --exdev-content-responsive: min(2050px, 92vw);
  --exdev-landing-responsive: min(1760px, 92vw);
}

html.exdev-aspect-portrait .dashboard-hero,
html.exdev-aspect-portrait .home-hero,
html.exdev-aspect-portrait .ops-hero {
  grid-template-columns: 1fr !important;
}

html.exdev-aspect-portrait .quick-stats,
html.exdev-aspect-portrait .ops-metrics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html.exdev-aspect-portrait .plugins-grid,
html.exdev-aspect-portrait .module-showcase-grid,
html.exdev-aspect-portrait .grid-cards {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

/* ---------- Haute densité ---------- */
html.exdev-density-retina img,
html.exdev-density-retina-3x img {
  image-rendering: auto;
}

html.exdev-density-retina .exdev-svg,
html.exdev-density-retina-3x .exdev-svg {
  shape-rendering: geometricPrecision;
}

/* ---------- Tactile / tablettes ---------- */
html.exdev-input-touch button,
html.exdev-input-touch .btn,
html.exdev-input-touch .side-item,
html.exdev-input-touch .nav,
html.exdev-input-touch select,
html.exdev-input-touch input {
  min-height: 44px;
}

html.exdev-input-touch .account-button,
html.exdev-input-touch .icon-btn {
  min-width: 44px;
}

/* ---------- Garde-fous intermédiaires ---------- */
@media (max-width: 1450px) {
  html.exdev-aspect-portrait .quick-stats,
  html.exdev-aspect-portrait .ops-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1260px) {
  :root {
    --exdev-sidebar-responsive: 278px;
    --exdev-content-responsive: 100%;
  }

  html.exdev-display-tablet-wide .quick-stats,
  html.exdev-display-tablet-wide .ops-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  :root {
    --exdev-content-responsive: 100%;
    --exdev-page-gutter-responsive: 14px;
  }

  .workspace-view,
  .admin-workspace-view {
    width: 100% !important;
    padding: 14px !important;
  }

  .workspace-topbar {
    padding-inline: 14px !important;
  }

  html.exdev-aspect-portrait .quick-stats,
  html.exdev-aspect-portrait .ops-metrics-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Diagnostic volontaire : ajouter ?displayDebug=1 ---------- */
.exdev-display-debug {
  position: fixed;
  z-index: 2147483000;
  right: 14px;
  bottom: 14px;
  display: grid;
  gap: 3px;
  min-width: 230px;
  padding: 12px 14px;
  border: 1px solid rgba(51, 214, 255, .35);
  border-radius: 14px;
  background: rgba(4, 11, 22, .94);
  box-shadow: 0 18px 70px rgba(0, 0, 0, .42);
  color: #dffaff;
  font: 12px/1.35 system-ui, sans-serif;
  pointer-events: none;
}

.exdev-display-debug strong {
  color: #55e6ff;
  font-size: 13px;
}

.exdev-display-debug span {
  color: #9eb3cf;
}

/* =========================================================
   EXDEV AutoGestion v1.4.2 — Responsive audit fixes
   Targets: 360/390/430, tablet, 1366x768, 2K/4K/5K/32:9
   ========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.workspace-main,
.workspace-view,
.admin-workspace-view,
#clientView,
#view,
.module-panel,
.module-cover,
.config-block,
.form-grid,
.grid,
.row,
.split-head {
  min-width: 0 !important;
  max-width: 100% !important;
}

:where(input, textarea, select) {
  width: 100%;
  min-width: 0;
}

:where(img, video, canvas, svg) {
  max-width: 100%;
}

.account-dropdown {
  max-width: min(340px, calc(100vw - 24px)) !important;
  max-height: min(70dvh, 520px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

@media (min-width: 861px) and (max-width: 1500px) {
  :root {
    --exdev-grid-card-min: 245px;
  }

  .dashboard-hero,
  .ops-hero,
  .home-hero {
    gap: clamp(22px, 2vw, 38px) !important;
  }

  .quick-stats,
  .ops-metrics-grid,
  .admin-metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }

  .plugins-grid,
  .module-showcase-grid,
  .grid-cards {
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
  }
}

/* Short desktop/laptop screens: preserve footer and usable navigation. */
@media (min-width: 861px) and (max-height: 820px) {
  .client-dashboard .workspace-sidebar,
  .admin-dashboard .workspace-sidebar {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .sidebar-brand,
  .server-switcher,
  .admin-scope-card {
    margin-bottom: 10px !important;
  }

  .side-item,
  .client-nav .side-item,
  .admin-nav .side-item {
    min-height: 38px !important;
    padding-block: 7px !important;
  }

  .side-section-title {
    margin-top: 10px !important;
    margin-bottom: 5px !important;
  }
}

@media (max-width: 1180px) {
  .dashboard-hero,
  .ops-hero,
  .home-hero,
  .module-cover.has-preview,
  .editor-grid,
  .account-grid,
  .v12-account-grid {
    grid-template-columns: 1fr !important;
  }

  .form-grid,
  .config-grid,
  .details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  body.sidebar-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .client-dashboard .workspace-sidebar,
  .admin-dashboard .workspace-sidebar {
    width: min(342px, 88vw) !important;
    max-width: min(342px, 88vw) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  body.sidebar-open .client-dashboard .workspace-sidebar,
  body.sidebar-open .admin-dashboard .workspace-sidebar {
    visibility: visible !important;
  }

  .workspace-main {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .workspace-topbar {
    position: sticky !important;
    top: 0;
    z-index: 60;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    width: 100% !important;
  }

  .workspace-title p {
    white-space: normal !important;
  }

  .workspace-view,
  .admin-workspace-view {
    width: 100% !important;
    padding: 14px !important;
  }

  .module-cover,
  .module-panel,
  .ops-hero,
  .version-panel,
  .plugins-section,
  .exdev-admin-card,
  .server-manage-card,
  .admin-hero-panel {
    padding: clamp(16px, 4.5vw, 22px) !important;
  }

  .form-grid,
  .config-grid,
  .details-grid,
  .quick-stats,
  .ops-metrics-grid,
  .admin-metrics-grid,
  .v12-admin-stats,
  .v12-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .row-actions,
  .topbar-actions,
  .split-head,
  .section-title {
    min-width: 0 !important;
  }

  .row-actions > *,
  .module-cover .row-actions > *,
  .split-head .row-actions > * {
    min-width: 0 !important;
  }

  .modal,
  .dialog,
  .exdev-dialog,
  [role="dialog"] {
    width: min(100%, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .plugin-tabs,
  .module-tabs,
  .tabs,
  [role="tablist"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  .plugin-tabs > *,
  .module-tabs > *,
  .tabs > *,
  [role="tablist"] > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }
}

@media (max-width: 560px) {
  .workspace-topbar {
    gap: 10px !important;
    padding: 11px 12px !important;
  }

  .workspace-title {
    min-width: 0;
  }

  .workspace-title h2 {
    font-size: clamp(21px, 6.5vw, 28px) !important;
  }

  .workspace-title p {
    font-size: 12px !important;
  }

  .status-pill {
    display: none !important;
  }

  .account-button {
    min-width: 0 !important;
    padding-inline: 9px !important;
  }

  .account-button > :not(.account-avatar):not(.chevron) {
    max-width: 88px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-view,
  .admin-workspace-view {
    padding: 10px !important;
  }

  .module-cover,
  .module-panel,
  .ops-hero,
  .version-panel,
  .plugins-section,
  .exdev-admin-card,
  .server-manage-card,
  .admin-hero-panel,
  .card {
    border-radius: 18px !important;
  }

  .row-actions,
  .module-cover .row-actions,
  .split-head .row-actions,
  .exdev-dialog-actions {
    width: 100% !important;
    flex-direction: column !important;
  }

  .row-actions > *,
  .module-cover .row-actions > *,
  .split-head .row-actions > *,
  .exdev-dialog-actions > * {
    width: 100% !important;
  }
}

/* Very narrow mobile screens. */
@media (max-width: 390px) {
  .client-dashboard .workspace-sidebar,
  .admin-dashboard .workspace-sidebar {
    width: min(326px, 91vw) !important;
    max-width: min(326px, 91vw) !important;
  }

  .workspace-view,
  .admin-workspace-view {
    padding-inline: 8px !important;
  }

  .module-cover,
  .module-panel,
  .ops-hero,
  .version-panel,
  .plugins-section,
  .exdev-admin-card,
  .server-manage-card,
  .admin-hero-panel,
  .card {
    padding-inline: 14px !important;
  }
}