/* ============================================================
   Layout — Conteneurs, grilles, structure de page
   ============================================================ */

/* ─── Conteneurs ──────────────────────────────────────────── */

.vc-container {
  width: 100%;
  max-width: var(--vc-content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--vc-container-padding);
  padding-right: var(--vc-container-padding);
}

.vc-container-wide {
  width: 100%;
  max-width: var(--vc-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--vc-container-padding);
  padding-right: var(--vc-container-padding);
}

.vc-container-narrow {
  width: 100%;
  max-width: var(--vc-content-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--vc-container-padding);
  padding-right: var(--vc-container-padding);
}

/* ─── Structure de page ───────────────────────────────────── */

.vc-page-wrapper {
  min-height: calc(100vh - var(--vc-header-height));
  padding-top: var(--vc-header-height);
}

/* La page d'accueil ne pousse pas sous le header (hero full screen) */
.vc-page-home .vc-page-wrapper { padding-top: 0; }

/* Désactive le padding-top global pour front-page */
body.home .vc-page-wrapper,
body.front-page .vc-page-wrapper { padding-top: 0; }

/* ─── Contenu + sidebar ───────────────────────────────────── */

.vc-content-with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-top: var(--vc-space-12);
  padding-bottom: var(--vc-section-py);
}

.vc-content-area { min-width: 0; }

@media (max-width: 1024px) {
  .vc-content-with-sidebar {
    grid-template-columns: 1fr;
    gap: var(--vc-space-8);
  }
}

/* ─── Grille d'articles ───────────────────────────────────── */

.vc-posts-grid {
  display: grid;
  gap: var(--vc-gap-grid) var(--vc-space-8);
}

.vc-posts-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vc-posts-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) {
  .vc-posts-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .vc-posts-grid--2,
  .vc-posts-grid--3 { grid-template-columns: 1fr; }
}

/* ─── Spacing helpers ─────────────────────────────────────── */

.vc-mt-0 { margin-top: 0; }
.vc-mb-0 { margin-bottom: 0; }
.vc-py-section { padding-top: var(--vc-section-py); padding-bottom: var(--vc-section-py); }
.vc-py-lg      { padding-top: var(--vc-section-py-sm); padding-bottom: var(--vc-section-py-sm); }