html,

.transition-max-height {
  transition: max-height 0.0s ease-in-out;
}

.collapsed {
  max-height: 0;
  overflow: hidden;
}

.expanded {
  max-height: 1500px; /* Suffisant pour afficher des images */
}


body {
  min-height: 100%;
  overflow-x: hidden;
  color: white;
}


header{
    background-color: #6489da;
}



html.dark {
  background-color: #111827;
  color: white;
}

body {
  position: relative;
}

.sidebar {
  position: fixed;
  top: 0;
  width: 5vw;
  height: 100vh; /* hauteur égale à la hauteur de la fenêtre */
  z-index: -1;
}


.left-bar {
  left: 0;
  background: linear-gradient(to bottom, #3b82f6, #9333ea);
}

.right-bar {
  right: 0;
  background: linear-gradient(to bottom, #f97316, #ec4899);
}

/* Style commun pour compétences et qualités */
.tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  min-width: 120px;
  min-height: 50px;
  text-align: center;
  border-radius: 0.75rem;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.3s;
}

/* Couleurs compétences */
.skill-light {
  background-color: #f43f5e; /* rose vif */
}

.skill-dark {
  background-color: #be123c; /* rose foncé */
}

/* Couleurs qualités */
.quality-light {
  background-color: #10b981; /* vert vif */
}

.quality-dark {
  background-color: #065f46; /* vert foncé */
}






/* Par défaut : mobile (tout est centré) */
.container {
  text-align: center;
}

.flex-responsive {
  justify-content: center;
  text-align: center;
}

/* Dès que l'écran fait 640px ou plus (taille sm de Tailwind) */
@media (min-width: 640px) {
  .container {
    text-align: left;
  }

  .flex-responsive {
    justify-content: flex-start;
    text-align: left;
  }

}