#dressCode {
    min-height: 100svh;
}

#dressCodeColumn {
    position: relative;
    max-width: 800px;
    margin: auto;
    color: var(--dark-green);
    z-index: 2;
    padding: 20px;
    text-align: center;
}

.color-palette, .dress-examples{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 12px;
    margin: 24px 0;
  }
  
  .color-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 12%;
  }

  .color-circle{
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
  }
  
.color-label {
    width: 100%;
    text-align: center;
}

#color1{ background: var(--light-rose); }
#color2{ background: var(--light-green); }
#color3{ background: var(--light-teal); }
#color4{ background: var(--champagne-bubble); }
#color5{ background: var(--dark-green); }
#color6{ background: var(--pink-hush); }
  
  .dress-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  
  .dress-img{
    width: 100px;
    aspect-ratio: 3 / 4;   /* vertical élégant */
    object-fit: cover;
    border-radius: 12px;
  }