.containers .rows {
    display: flex; /* Active le mode flexbox */
    flex-wrap: nowrap; /* Empêche le passage à une nouvelle ligne */
    justify-content: space-between; /* Ajoute un espace entre les éléments */
    overflow-x: auto; /* Permet le défilement horizontal si nécessaire */
    }

    .rows .item {
        flex: 0 0 auto; /* Conserve la taille des éléments */
        margin: 0 10px; /* Ajoute de l'espacement entre eux */
    }

.bg-image{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 20vh;
    height: 100vh;
}

@media (max-width=768px){
    .bg-image{
        min-height: 20vh;
    }
}

.capitalize {
    text-transform:lowercase;
}

.capitalize::first-letter {
    text-transform:uppercase;
}


.video-overlay {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 2px 6px;
  font-size: 14px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
}

/* Contrôles cachés tant qu'on n'interagit pas */
.video-card video:not(.active)::-webkit-media-controls {
  display: none !important;
}
.video-card video:not(.active) {
  pointer-events: none;
}


.video-container {
  position: relative;
  width: 320px;
  height: 180px;
  margin: 10px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #000;
  transition: box-shadow 0.3s ease;
}

.video-container:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

.thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 2px 6px;
  font-size: 14px;
  border-radius: 3px;
  z-index: 1;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  color: #000;
  cursor: pointer;
  z-index: 1;
  transition: background 0.2s;
}

.play-button:hover{
  background: rgba(255, 0, 0, 0.85);
  color: white;
}

.video-container video{
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.capitalize{
    text-transform:lowercase;
}

.capitalize::first-letter{
    text-transform:uppercase;
}


.bg-bleu{
    background-color:#0074cc;
}

.text-bleu{
    color:#0074cc;
}

.text-jauche{
    color:#ffcc00;
}

.bg-jauche{
    background-color:#ffcc00;
}

.text-rouge{
    color:#ff6666;
}

.bg-rouge{
    background-color:#ff6666;
}


.text-vert{
    color:#66cc66;
}

.bg-vert{
    background-color:#66cc66;
}