/* =======================================================
   CHARTE RESPONSIVE COMMUNE
   Socle partage entre ERP admin, espace vendeuse et vitrine.
   ======================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 0;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

img,
picture,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

img,
picture,
video,
canvas {
  display: block;
}

input,
select,
textarea,
button {
  min-width: 0;
  max-width: 100%;
  font: inherit;
}

table {
  width: 100%;
}

.responsive-page,
.responsive-dashboard,
.responsive-main,
#app-admin .page,
#app-vendeuse .page,
#app-admin .main,
#app-vendeuse .main {
  width: 100%;
  margin-inline: auto;
}

#app-admin,
#app-vendeuse,
#app-admin .main,
#app-vendeuse .main,
#app-admin .page,
#app-vendeuse .page,
#app-admin .card,
#app-vendeuse .card,
#app-admin .panel,
#app-vendeuse .panel {
  min-width: 0;
  max-width: 100%;
}

.responsive-page,
#app-admin .page,
#app-vendeuse .page {
  max-width: var(--page-max, 1600px);
}

.responsive-dashboard,
#app-admin .dashboard,
#app-vendeuse .dashboard {
  max-width: var(--dashboard-max, 1800px);
}

.table-responsive,
.tbl-wrap,
.table-wrap,
.table-scroll,
.card:has(table) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.responsive-grid,
.cards-grid,
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr));
  gap: var(--space-sm, 1rem);
}

.responsive-form,
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-sm, 1rem);
}

.responsive-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 1rem);
}

.fluid-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
}

/* XXL */
@media (max-width: 1600px) {
  .responsive-page,
  .responsive-dashboard,
  #app-admin .page,
  #app-vendeuse .page,
  #app-admin .dashboard,
  #app-vendeuse .dashboard,
  #app-admin .main,
  #app-vendeuse .main {
    max-width: 100%;
  }
}

/* Desktop */
@media (max-width: 1200px) {
  .responsive-grid,
  .cards-grid,
  .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }
}

/* Tablette */
@media (max-width: 992px) {
  .responsive-form,
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 768px) {
  .responsive-page,
  #app-admin .page,
  #app-vendeuse .page,
  #app-admin .main,
  #app-vendeuse .main {
    padding-inline: var(--space-sm, 1rem);
  }

  .responsive-form,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .responsive-button,
  #app-admin button,
  #app-admin .btn,
  #app-vendeuse button,
  #app-vendeuse .btn {
    min-height: var(--touch-target, 48px);
  }
}

/* Petit mobile */
@media (max-width: 480px) {
  .responsive-page,
  #app-admin .page,
  #app-vendeuse .page,
  #app-admin .main,
  #app-vendeuse .main {
    padding-inline: var(--space-xs, .5rem);
  }
}