/** Grilles et conteneurs principaux. */

.container {
  width: min(100% - (var(--jdj-gutter) * 2), var(--jdj-container));
  margin-inline: auto;
}

.site { display: flex; flex-direction: column; min-height: 100svh; }
.site-main { flex: 1 0 auto; padding-block: var(--sp-5); }

/* Gabarit contenu + sidebar via container queries. */
.layout {
  display: grid;
  gap: clamp(var(--sp-4), 4vw, var(--sp-6));
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1000px) {
  body:not(.jdj-no-sidebar).jdj-sidebar-right .layout { grid-template-columns: minmax(0, 1fr) 320px; }
  body:not(.jdj-no-sidebar).jdj-sidebar-left  .layout { grid-template-columns: 320px minmax(0, 1fr); }
  body:not(.jdj-no-sidebar).jdj-sidebar-left  .layout > .content { order: 2; }
  body:not(.jdj-no-sidebar).jdj-sidebar-left  .layout > .sidebar { order: 1; }
}

.jdj-no-sidebar .layout,
.jdj-sidebar-none .layout { grid-template-columns: 1fr; }
.jdj-no-sidebar .sidebar,
.jdj-sidebar-none .sidebar { display: none; }

/* Sidebar collante. */
.sidebar { position: sticky; top: calc(var(--jdj-header-h) + var(--sp-3)); display: grid; gap: var(--sp-4); }

/* Grille d'articles uniforme et aérée (esprit magazine premium). */
.post-grid {
  display: grid;
  gap: clamp(var(--sp-4), 3vw, var(--sp-6)) clamp(var(--sp-3), 2.5vw, var(--sp-5));
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  align-items: start;
}
@media (min-width: 700px)  { .post-grid--fixed { grid-template-columns: repeat(2, 1fr); } }

/* Fil d'Ariane. */
.breadcrumbs { margin: var(--sp-3) 0 var(--sp-1); }
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1);
  list-style: none; padding: 0; margin: 0;
  font-size: var(--fs-sm); color: var(--jdj-text-faint);
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--sp-1); }
.breadcrumbs li + li::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: 0.5;
}
.breadcrumbs a { color: var(--jdj-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--jdj-primary); text-decoration: underline; }
.breadcrumbs [aria-current="page"] {
  color: var(--jdj-text); font-weight: 600;
  max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* En-tête de page / archive. */
.page-header { margin-bottom: var(--sp-5); }
.page-header__title { font-size: var(--fs-2xl); }
.page-header__desc { color: var(--jdj-text-muted); margin-top: var(--sp-1); max-width: 60ch; }

/* Pagination. */
.pagination { margin-top: var(--sp-6); display: flex; justify-content: center; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 2.6em; height: 2.6em; padding-inline: 0.6em;
  border: 1px solid var(--jdj-border); border-radius: var(--jdj-radius-sm);
  text-decoration: none; color: var(--jdj-text);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--jdj-primary); }
.pagination .page-numbers.current { background: var(--jdj-primary); color: #fff; border-color: var(--jdj-primary); }