/* =============================================================================
 * Hecteo - Mise en page : conteneurs, grille, coquille applicative
 * ========================================================================== */

/* =============================================================================
 * CONTENEURS ET GRILLE
 * ========================================================================== */
.h-container {
  width: 100%;
  max-width: var(--h-size-container);
  margin-inline: auto;
  padding-inline: var(--h-space-4);
}

@media (min-width: 768px) {
  .h-container {
    padding-inline: var(--h-space-6);
  }
}

.h-container--narrow {
  max-width: var(--h-size-content);
}

.h-container--wide {
  max-width: none;
}

.h-grid {
  display: grid;
  gap: var(--h-space-4);
  grid-template-columns: repeat(var(--h-grid-cols, 1), minmax(0, 1fr));
}

.h-grid--2 { --h-grid-cols: 2; }
.h-grid--3 { --h-grid-cols: 3; }
.h-grid--4 { --h-grid-cols: 4; }
.h-grid--6 { --h-grid-cols: 6; }
.h-grid--12 { --h-grid-cols: 12; }

/* Grille fluide : autant de colonnes que la largeur le permet */
.h-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(var(--h-grid-min, 16rem), 1fr));
}

@media (max-width: 1024px) {
  .h-grid--4 { --h-grid-cols: 2; }
  .h-grid--6 { --h-grid-cols: 3; }
}

@media (max-width: 768px) {
  .h-grid--2,
  .h-grid--3,
  .h-grid--4,
  .h-grid--6,
  .h-grid--12 { --h-grid-cols: 1; }
}

.h-stack {
  display: flex;
  flex-direction: column;
  gap: var(--h-stack-gap, var(--h-space-4));
}

.h-row {
  display: flex;
  align-items: center;
  gap: var(--h-row-gap, var(--h-space-3));
}

.h-row--wrap  { flex-wrap: wrap; }
.h-row--start { align-items: flex-start; }
.h-row--end   { justify-content: flex-end; }
.h-row--between { justify-content: space-between; }
.h-spacer { flex: 1 1 auto; }

/* =============================================================================
 * COQUILLE APPLICATIVE (espace client /manager et /admin)
 * ========================================================================== */
.h-app {
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 100dvh;
}

/* --- Barre laterale ---------------------------------------------------------- */
.h-sidebar {
  position: sticky;
  top: 0;
  z-index: var(--h-z-sidebar);
  display: flex;
  flex-direction: column;
  width: var(--h-size-sidebar);
  height: 100dvh;
  color: var(--h-c-sidebar-text);
  background-color: var(--h-c-sidebar-bg);
  border-inline-end: 1px solid var(--h-c-sidebar-border);
  transition: width var(--h-motion-duration-normal) var(--h-motion-ease-standard);
}

.h-app.is-collapsed .h-sidebar {
  width: var(--h-size-sidebar-collapsed);
}

.h-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--h-space-2);
  height: var(--h-size-topbar);
  padding-inline: var(--h-space-4);
  flex: 0 0 auto;
  overflow: hidden;
}

.h-sidebar__nav {
  flex: 1 1 auto;
  padding: var(--h-space-3) var(--h-space-2);
  overflow-y: auto;
  overflow-x: hidden;
}

.h-sidebar__section {
  padding: var(--h-space-4) var(--h-space-3) var(--h-space-1);
  font-size: var(--h-font-size-2xs);
  font-weight: var(--h-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--h-font-tracking-wider);
  color: var(--h-c-sidebar-muted);
  white-space: nowrap;
}

.h-app.is-collapsed .h-sidebar__section {
  opacity: 0;
}

.h-nav-item {
  display: flex;
  align-items: center;
  gap: var(--h-space-3);
  padding: var(--h-space-2) var(--h-space-3);
  margin-bottom: 2px;
  font-size: var(--h-font-size-md);
  font-weight: var(--h-font-weight-medium);
  color: var(--h-c-sidebar-text);
  border-radius: var(--h-radius-md);
  white-space: nowrap;
  transition: background-color var(--h-motion-duration-fast) var(--h-motion-ease-standard);
}

.h-nav-item:hover {
  background-color: var(--h-c-sidebar-hover);
  text-decoration: none;
}

.h-nav-item.is-active {
  color: #fff;
  background-color: var(--h-c-sidebar-active);
}

.h-nav-item__icon {
  flex: 0 0 auto;
  width: var(--h-size-icon-lg);
  height: var(--h-size-icon-lg);
  color: var(--h-c-sidebar-muted);
}

.h-nav-item.is-active .h-nav-item__icon,
.h-nav-item:hover .h-nav-item__icon {
  color: currentcolor;
}

.h-nav-item__label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.h-nav-item__badge {
  flex: 0 0 auto;
}

.h-sidebar__brand-full {
  height: 24px;
  width: auto;
}

.h-sidebar__brand-mark {
  display: none;
}

.h-app.is-collapsed .h-sidebar__brand {
  justify-content: center;
  padding-inline: 0;
}

.h-app.is-collapsed .h-sidebar__brand-full,
.h-app.is-collapsed .h-nav-item__label,
.h-app.is-collapsed .h-nav-item__badge {
  display: none;
}

.h-app.is-collapsed .h-sidebar__brand-mark {
  display: block;
}

.h-app.is-collapsed .h-nav-item {
  justify-content: center;
  padding-inline: 0;
}

.h-sidebar__footer {
  flex: 0 0 auto;
  padding: var(--h-space-3);
  border-top: 1px solid var(--h-c-sidebar-border);
}

/* --- Zone principale ---------------------------------------------------------- */
.h-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.h-topbar {
  position: sticky;
  top: 0;
  z-index: var(--h-z-topbar);
  display: flex;
  align-items: center;
  gap: var(--h-space-3);
  height: var(--h-size-topbar);
  padding-inline: var(--h-space-4) var(--h-space-5);
  background-color: color-mix(in srgb, var(--h-c-bg-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--h-c-border);
}

.h-topbar__title {
  font-family: var(--h-font-family-display);
  font-size: var(--h-font-size-xl);
  font-weight: var(--h-font-weight-semibold);
  letter-spacing: var(--h-font-tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.h-content {
  flex: 1 1 auto;
  padding: var(--h-space-6) var(--h-space-5);
}

@media (min-width: 1280px) {
  .h-content {
    padding: var(--h-space-8) var(--h-space-8);
  }
}

.h-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--h-space-4);
  margin-bottom: var(--h-space-6);
}

.h-page-header__title {
  font-family: var(--h-font-family-display);
  font-size: var(--h-font-size-3xl);
  font-weight: var(--h-font-weight-semibold);
  letter-spacing: var(--h-font-tracking-tight);
}

.h-page-header__subtitle {
  margin-top: var(--h-space-1);
  font-size: var(--h-font-size-lg);
  color: var(--h-c-text-muted);
}

.h-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--h-space-2);
}

/* --- Barre laterale mobile ---------------------------------------------------- */
.h-sidebar-backdrop {
  display: none;
}

@media (max-width: 1024px) {
  .h-app {
    grid-template-columns: 1fr;
  }

  .h-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    transform: translateX(-100%);
    transition: transform var(--h-motion-duration-normal) var(--h-motion-ease-out);
    box-shadow: var(--h-shadow-2xl);
  }

  [dir='rtl'] .h-sidebar {
    transform: translateX(100%);
  }

  .h-app.is-sidebar-open .h-sidebar {
    transform: none;
  }

  .h-app.is-sidebar-open .h-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--h-z-sidebar) - 1);
    background-color: var(--h-c-bg-overlay);
  }

  .h-content {
    padding: var(--h-space-4);
  }
}

/* --- Zone d'accroche du site vitrine ------------------------------------------ */
.h-section {
  padding-block: var(--h-space-16);
}

@media (min-width: 768px) {
  .h-section {
    padding-block: var(--h-space-24);
  }
}

.h-section--tinted {
  background-color: var(--h-c-bg-surface-alt);
  border-block: 1px solid var(--h-c-border-subtle);
}