/* specific Clonas */
/* contexte général flex sur le conteneur */
/* Layout */

.grille {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10px;
  /*grid-auto-rows: minmax(98%, auto);*/
}

.my_play.emdesc a {
    color: #737373;
}

.emission {
    position : relative;
    overflow : hidden;
    height: 100%;
    width: 100%;
    cursor : pointer;
    color: white;
    text-align: center;
    position: relative;
    margin-bottom: 10px;
    min-height: 350px;
    border-radius: 10px;
    padding-top: 30%;
}
.podcast {
    background: linear-gradient(#5F72B9, #21398A);
}
.podcast button {
    background-color: #fff;
    color: #000;
    border-radius: 20px;
    padding: 0px 60px;
}
.img-back-player {
    position : absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
/*    width: 100%;
    height: 100%;*/
    max-width: none;
    object-fit: cover;
    opacity : .5;
}

/* --- page épisode : lecteur podcast réduit ---
   scopé à .my_podcast pour ne PAS toucher les cartes de la page liste (layout 4col) */
.my_podcast .emission {
    min-height: 0;
    padding: 26px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
/* micro dessiné en CSS (SVG inline) en remplacement de l'ancienne image micro.png surdimensionnée */
.my_podcast .emission.podcast::before {
    content: "";
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3z'/><path d='M19 11a1 1 0 0 0-2 0 5 5 0 0 1-10 0 1 1 0 0 0-2 0 7 7 0 0 0 6 6.92V21H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2h-3v-3.08A7 7 0 0 0 19 11z'/></svg>") center/contain no-repeat;
    opacity: .9;
}
.my_podcast .emission.podcast button {
    margin: 0;
}



/*
    -------------- 900px --------------------
*/

@media only screen and (max-width: 900px) {

     .grille {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-gap: 10px;
      grid-auto-rows: minmax(100px, auto);
    }
}

/*
    smartphone
    -------------- 500px --------------------
*/
@media only screen and (max-width: 500px) {

     .grille {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-gap: 10px;
      grid-auto-rows: minmax(100px, auto);
    }

}
@media only screen and ( max-width: 62.5em ) {
    }
@media only screen and ( max-width: 40em ) {

}
@media (max-width:499px){
}