/* mise en colonnes*/
.cols {
    padding: 0;
    columns: 5; /* nombre de colonnes*/
    column-gap: 15px; /* espacement etre chaque colonne*/
}
p {
    break-inside: avoid; /* empêche un paragraphe, une photo d'être coupée en deux colonnes*/
    margin: 0;
    padding-bottom: 20px; /* espace entre chaque paragraphe*/
}
img {
  width: 100%; /* pourcentage de remplissage du contenant*/
  margin: 2px;
  border-radius: 10px; /* arrondi des angles*/
  object-fit: cover; /* garde les proportions d'origine*/
  transition: transform 0.3s ease, opacity 0.3s ease;
}

p {
    position: relative;
}

/* baisse l'opacité de l'image lorsque je la survole */
p:hover img {
    opacity: 0.5; 
  }

/* le texte dans strong n'apparait pas sans être survolé */  
p strong {
    display: none;
}

/* quand je survole le texte caché apparait en premier plan + caractèristiques du texte */ 
p:hover strong {
    display: block;
    position: absolute;
    
    color: white;
    font-size: x-large;
    font-family: 'Space Mono', monospace;
    font-weight: bold;
    padding: 10px;
    bottom: 20px;
    right: 0; 
    text-align: right; 
    transition: opacity 0.3s ease;
    pointer-events: none;
    
}