.site-viewport {
  width: 100%;
}

.site-container,
.section-inner {
  width: min(calc(100% - (var(--container-gutter) * 2)), var(--container-main));
  margin-inline: auto;
}

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

.section {
  position: relative;
  width: 100%;
  padding-block: var(--space-10);
}

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

.section-wide {
  width: min(calc(100% - (var(--section-inset) * 2)), var(--container-wide));
  margin-inline: auto;
}

.section-full {
  width: 100%;
}

.section-surface-page {
  background: var(--surface-page);
}

.section-surface-card {
  background: var(--surface-card);
}

.section-surface-soft {
  background: var(--surface-soft);
}

.section-surface-dark {
  color: var(--color-on-dark);
  background: var(--surface-dark);
}

.section-framed {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-standard);
}

.section-media {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

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

.col-3 {
  grid-column: span 3;
}

.col-4 {
  grid-column: span 4;
}

.col-6 {
  grid-column: span 6;
}

.col-8 {
  grid-column: span 8;
}

.col-12 {
  grid-column: span 12;
}

.flow > * + * {
  margin-block-start: var(--space-3);
}

.reading-width {
  max-width: var(--reading-max);
}

/* Repères techniques réutilisables pour le zoning */
.layout-guide-header {
  padding-block: var(--space-8) var(--space-6);
  border-bottom: var(--border-decorative);
}

.layout-guide-header p {
  max-width: var(--reading-max);
  color: var(--color-text-secondary);
}

.layout-guide-section {
  padding-block: var(--space-8);
  border-bottom: var(--border-decorative);
}

.layout-guide-title {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: baseline;
  margin-bottom: var(--space-4);
}

.layout-guide-index,
.layout-guide-label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.layout-guide-title h2,
.layout-guide-cell p,
.layout-guide-block p {
  margin: 0;
}

.layout-guide-viewport {
  width: 100%;
  min-height: 8rem;
  padding: var(--space-2);
  border-block: var(--border-control);
  background: var(--surface-soft);
}

.layout-guide-block {
  min-height: 8rem;
  padding: var(--space-3);
  border: var(--border-control);
  border-radius: var(--radius-standard);
  background: var(--surface-card);
}

.layout-guide-wide {
  min-height: 10rem;
  background: var(--surface-soft);
}

.layout-guide-full {
  min-height: 9rem;
  border-block: var(--border-control);
  background: var(--surface-soft);
}

.layout-guide-contained {
  min-height: 9rem;
  border: var(--border-control);
  border-radius: var(--radius-standard);
  background: var(--surface-card);
}

.layout-guide-grid {
  padding: var(--space-2);
  border: var(--border-decorative);
  border-radius: var(--radius-standard);
  background: var(--surface-card);
}

.layout-guide-cell {
  min-height: 6rem;
  padding: var(--space-2);
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-standard);
  background: var(--surface-card);
}

.layout-guide-column {
  grid-column: span 1;
  min-height: 8rem;
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-small);
  background: var(--surface-soft);
}

.layout-guide-structure {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-3);
  border: var(--border-decorative);
  border-radius: var(--radius-standard);
  background: var(--surface-card);
  list-style: none;
}

.layout-guide-structure li {
  padding: var(--space-2);
  border-inline-start: 4px solid var(--color-brand-primary);
  background: var(--surface-soft);
}

.layout-guide-footer {
  padding-block: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}