/*
   CSS spécifique pour la partie « Albums »
*/

.couverture {position: relative; width: 167px; display: inline-block; vertical-align: top; margin-right: 7px; text-align: center; padding-top: 15px;}
.album_date {text-transform: capitalize; font-weight: 900 !important; margin: 5px 0 !important;}
.album_titre {text-transform: uppercase; margin: 0 !important; font-size: 12px !important;}
.album_tome {margin-top: 0 !important;}

.couvalbum { position: relative; display: inline-block; height: 220px; border-radius: 2px; transform: rotate(-1deg); transition: .5s; }
.couvalbum::before { content: ""; position: absolute; top: -6px; left: 0; bottom: 6px; right: 10px; box-shadow: 3px 3px 8px #444; border: solid 1px; border-color: #ccc #aaa #aaa #ddd; transform: skewY(-4deg); border-radius: 2px; transition: .5s; background: #fff url('../img/3emecouverture.jpg') no-repeat center / cover; z-index: -1; }
.couvalbum::after { background-image: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3) 1.2%, hsla(0, 0%, 100%, .7) 0, hsla(0, 0%, 100%, .6) 1.5%, hsla(0, 0%, 100%, .2) 2%, hsla(0, 0%, 100%, .2) 2.8%, rgba(0, 0, 0, .2) 3.7%, rgba(0, 0, 0, .2) 5%, hsla(0, 0%, 100%, .2) 6.1%, hsla(0, 0%, 100%, .2) 6.5%, hsla(0, 0%, 100%, 0) 7.4%);
    box-shadow: inset 0 -2px 2px 0 rgba(0, 0, 0, .5); content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; border-radius: 2px; }
.couvalbum img { border-radius: 2px; }
.couvalbum:hover { transform: rotate(2deg); }
.couvalbum:hover::before { transform: skewY(-8deg); top: -11px; bottom: 11px; right: 18px; }

/* Les boutons permettant d'afficher les différentes séries */
.bouton_serie {cursor: pointer; color: #efeeed; width: 100px; height: 40px; align-content: center; display: inline-block; text-align: center; font-family: Artifex; font-size: 13px; padding: 5px 0 5px 0; background: #1a1a1a; transition-duration: .4s; text-transform: uppercase; line-height: 1; overflow: hidden;}
.bouton_serie2 {background: #888; color: white;}
.bouton_serie:hover, .bouton_serie2:hover {background: #555;}

#listes-albums {position: relative; display: inline-block; margin-bottom: 30px;}

/* Fondu pour l'apparition des tuiles */
.couverture {animation: apparition 1s ease;}
@keyframes apparition {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Icône son - Cheval */
.son-icone {fill: currentColor; animation: chevaucher 0.6s infinite ease-in-out;}
@keyframes chevaucher {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}