.portfolio {
margin-bottom:50px;
}

.ligne {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12 colonnes pour permettre un alignement flexible */
  grid-gap: 20px; /* Espace entre chaque bloc */
  padding: 0 30px; /* 30px de padding à gauche et à droite */
  box-sizing: border-box;
  margin-bottom:20px;

}

.portfolio-item {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.portfolio-link {
    position: relative;
    display: block;
}

.portfolio-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Overlay invisible par défaut */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Couche semi-transparente */
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenu de l'overlay : centré */
.overlay-content {
    color: #FFF;
    text-align: center;
    font-family:"Staatliches";

}

.portfolio-item.small:hover .overlay, .portfolio-item.large-left:hover .overlay , .portfolio-item.large-right:hover .overlay  {
    opacity: 1; /* Rendre l'overlay visible au survol */
}

/* Grand bloc prenant 8 colonnes */
.portfolio-item.large {
  grid-column: span 6; /* Le grand bloc prend 8 colonnes */
  background-color: #ccc;
  aspect-ratio: 1 / 1; /* Ratio 1:1 pour rendre le bloc carré */
}

/* Conteneur des petits blocs */
.portfolio-item.small-container {
  grid-column: span 6; /* Le conteneur des petits blocs prend 4 colonnes */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Chaque petit bloc prend la moitié de l'espace (2 colonnes) */
  grid-gap: 20px; /* Espace entre les petits blocs */
}

.portfolio-item.small-container4x {
  grid-column: span 12; /* Le conteneur des petits blocs prend 4 colonnes */
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Chaque petit bloc prend la moitié de l'espace (2 colonnes) */
  grid-gap: 20px; /* Espace entre les petits blocs */
}

/* Petit bloc dans les petits conteneurs */
.portfolio-item.small {
  background-color: #fff;
}

.portfolio-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assure que l'image remplit le bloc de manière proportionnée */
    display: block;
}


.large-left {
    grid-column: span 6; /* Grande taille à gauche */
    order: 0; /* Positionner à droite */
}

.large-right {
    grid-column: span 6; /* Grande taille à droite */
    order: 1; /* Positionner à droite */
}

.portfolio-filters {
    text-align: center; /* Centre les filtres */
    margin-bottom: 20px; /* Espace en bas pour séparer du portfolio */
}

.filter-button {
    padding: 10px 20px; /* Espacement interne pour le confort */
    margin: 5px; /* Espacement entre les boutons */
    background-color: #015063; /* Couleur de fond des boutons */
    color: white; /* Couleur du texte */
    border: none; /* Supprime la bordure par défaut */
    border-radius: 0px; /* Coins arrondis pour un look moderne */
    cursor: pointer; /* Change le curseur pour indiquer que c'est cliquable */
    transition: background-color 0.3s, transform 0.3s; /* Transition pour les effets */
}

.filter-button:hover {
    background-color: #D83E36; /* Couleur de fond lorsque le bouton est survolé */
    transform: scale(1.05); /* Légère augmentation de la taille lors du survol */
}

.filter-button.active {
    background-color: #D83E36; /* Couleur de fond pour le bouton actif */
    color: #fff; /* Couleur du texte pour le bouton actif */
}

/* Responsive */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .portfolio {
    grid-template-columns: 1fr; /* Sur petit écran, chaque bloc prend toute la largeur */
  }

  .portfolio-item.large,
  .portfolio-item.small-container {
    grid-column: span 1;
  }
  
  .portfolio-item.small-container,.portfolio-item.small-container4x {
    grid-template-columns: 1fr; /* Les petits blocs prennent toute la largeur du conteneur sur mobile */
  }

  .ligne {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* 12 colonnes pour permettre un alignement flexible */
  grid-gap: 20px; /* Espace entre chaque bloc */
  padding: 0 30px; /* 30px de padding à gauche et à droite */
  box-sizing: border-box;
  margin-bottom:20px;

}

.large-left {
    grid-column: span 1; /* Grande taille à gauche */
    order: 0; /* Positionner à droite */
}

.large-right {
    grid-column: span 1; /* Grande taille à droite */
    order: 1; /* Positionner à droite */
}


}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

/* Grand bloc prenant 8 colonnes */
.portfolio-item.large {
  grid-column: span 6; /* Le grand bloc prend 8 colonnes */
  background-color: #ccc;
  aspect-ratio: 1 / 1; /* Ratio 1:1 pour rendre le bloc carré */
}

/* Conteneur des petits blocs */
.portfolio-item.small-container {
  grid-column: span 6; /* Le conteneur des petits blocs prend 4 colonnes */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Chaque petit bloc prend la moitié de l'espace (2 colonnes) */
  grid-gap: 20px; /* Espace entre les petits blocs */
}

.portfolio-item.small-container4x {
  grid-column: span 12; /* Le conteneur des petits blocs prend 4 colonnes */
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Chaque petit bloc prend la moitié de l'espace (2 colonnes) */
  grid-gap: 20px; /* Espace entre les petits blocs */
}
}