/**
 * Layout system: variables, breakpoints, page/section/grid hierarchy.
 * Single source for spacing and responsive breakpoints.
 */

:root {
  /* Typography */
  --font-primary: "Mona Sans", "MonaSans", sans-serif;
  --color-text: #1d1d1b;
  --color-text-muted: rgba(29, 29, 27, 0.7);
  --color-text-subtle: rgba(29, 29, 27, 0.5);

  /* Font sizes - harmonisés */
  --font-size-xs: 0.6875rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.8125rem;
  --font-size-md: 0.875rem;
  --font-size-lg: 0.9375rem;
  --font-size-xl: 1rem;
  --font-size-2xl: 1.125rem;
  --font-size-3xl: 1.25rem;
  --font-size-h3: 1.25rem;   /* 20px, titres cartes (charte H3) */

  /* Couleurs charte */
  --color-primary: #FF8E1C;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing scale (base 8px, charte graphique) */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  /* Breakpoints (for reference; use in @media) */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;

  /* Page layout */
  --page-padding-x: var(--space-lg);
  --page-padding-y: var(--space-md);

  /* Barre .navbar--main (hors menu plein écran) — pour caler les overlays position:fixed (drawer dashboard mobile) */
  --navbar-main-bar-offset: calc(2 * var(--space-xs) + 2.125rem);

  /* Légendes courbes (line_chart_powers getResponsiveStyles) + légende HTML onglet Schéma */
  --chart-legend-font-size: 11px;
  --chart-legend-font-size-narrow: 10px;
  --chart-legend-font-size-min: 9px;

  /* Chart wrappers: min height from layout, never from JS */
  --chart-min-height: 280px;
  --chart-max-height: none;
}

/* Page = viewport height: main scrolls, footer always visible */
.layout-page {
  min-height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.layout-page .layout-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--page-padding-y) var(--page-padding-x);
  box-sizing: border-box;
}

/* Section: vertical rhythm */
.layout-section {
  margin-bottom: var(--space-xl);
}

.layout-section:last-child {
  margin-bottom: 0;
}

/* Grid: responsive columns */
.layout-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 992px) {
  .layout-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .layout-grid--2 {
    grid-template-columns: 1fr;
  }
}

/* Row: horizontal flex with wrap */
.layout-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-start;
}

@media (max-width: 767px) {
  .layout-row {
    flex-direction: column;
    gap: var(--space-lg);
  }
}

/* Card: section block with optional title + content */
.layout-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: transparent;
}

.layout-card__title {
  flex-shrink: 0;
  margin-bottom: var(--space-sm);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  color: var(--color-text);
}

/* Chart wrapper: gets size from grid/flex; single child (chart div) fills 100% */
.chart-wrapper {
  flex: 1;
  min-height: var(--chart-min-height);
  max-height: var(--chart-max-height);
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chart-wrapper > * {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
}