/*
  ╔══════════════════════════════════════════════════════════════════════════╗
  ║                      layout.css — Containers & Grid                      ║
  ╚══════════════════════════════════════════════════════════════════════════╝
*/

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}


.main {
  padding-top: 0; /* Supprimé car le header n'est plus "fixed" */
  flex-grow: 1;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Styles des sections pleine largeur */
.section {
  padding: var(--spacing-xl) 0;
  border-bottom: 1px solid var(--color-border);
  min-height: 500px;
  display: flex;
  align-items: center;
  background: var(--bg-primary-gradient);
}

.section:nth-child(odd) {
  background: var(--bg-secondary-gradient);
}

.section .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--page-v-padding);
}

.section h2 {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}
#projects h2 {
    margin-bottom: var(--spacing-xl);
}
@media (max-width: 499px) {
  #projects.section {
    height: 1000px;
  }
  #projects .container {
    height: 100%;
    padding: var(--spacing-lg) 0;
    display: flex;
    flex-direction: column;
  }
  #projects .carousel-wrapper {
    flex-grow: 1;
    min-height: 0; /* Fix flexbox behavior */
  }
}