.bloch_cache2 {
  overflow-x: hidden;
}

.portfolio_grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

/* Gestion des colonnes */
.portfolio_col1,
.portfolio_col2,
.portfolio_col3,
.portfolio_col4 {
  position: relative;
  overflow: hidden;
  flex-wrap: nowrap;
}

/* Déplacement des colonnes pour ne pas qu'elles soient alignées */
.portfolio_col1 {
  margin-bottom: 50px !important;
}

.portfolio_col2 {
  margin-bottom: 0px !important;
}

.portfolio_col3 {
  margin-bottom: 120px !important;
}

.portfolio_col4 {
  margin-bottom: 75px !important;
}

/* Affichage par défaut du texte et du masque pour .portfolio_col1 */
.portfolio_col1_texte {
  opacity: 1;
  z-index: 10;
  transition: opacity 1.5s ease-in-out;
}

.portfolio_grid .portfolio_col1::before {
  content:""; /* A maintenir pour que l effet apparaisse */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M 0,40 Q40,50 100,50 L100,100 L0,100 Z" fill="red"/></svg>');
  mask-size: cover;
  z-index: 10;
  opacity: 0.6;
  background: #000000;
  transition: opacity 1s ease;
}

/* On masque les autres titres et paragraphes */
.portfolio_col2_texte,
.portfolio_col3_texte,
.portfolio_col4_texte {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.portfolio_col2::before,
.portfolio_col3::before,
.portfolio_col4::before {
  content:""; /* A maintenir pour que l effet apparaisse */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M 0,40 Q40,50 100,50 L100,100 L0,100 Z" fill="red"/></svg>');
  mask-size: cover;
  z-index: 10; /* ::before en-dessous du texte */
  opacity: 0;
  background:#000000;
  transition: opacity 1s ease;
}

/* Affichage au survol */
.portfolio_col2:hover .portfolio_col2_texte,
.portfolio_col3:hover .portfolio_col3_texte,
.portfolio_col4:hover .portfolio_col4_texte {
  opacity: 1;
  z-index: 10;
}

.portfolio_col2:hover::before,
.portfolio_col3:hover::before,
.portfolio_col4:hover::before {
  opacity: 0.6;
}

/* Masquer le contenu de .portfolio_col1 lorsque toute autre colonne est survolée */
/* Afficher le masque au survol de .portfolio_col1 */
.portfolio_col1:hover::before {
  opacity: 0.6;
}

/* Masquer le masque lorsque toute autre colonne est survolée */
.portfolio_grid:hover .portfolio_col1::before {
  opacity: 0 !important;
}

.portfolio_col1:hover .portfolio_col1_texte {
  opacity: 1 !important;
}

/* Faire réapparaître le masque lorsque la souris revient sur .portfolio_col1 */
.portfolio_grid:hover .portfolio_col1:hover::before {
  opacity: 0.6 !important;
}

.portfolio_grid:hover .portfolio_col1 .portfolio_col1_texte {
  opacity: 0;
}