/*===============================================================================================*/
/*===   MAIN   ==================================================================================*/
/*===============================================================================================*/
.movie-minicard {
  display: grid;
  text-align: center;
  color: white ;
  grid-template-columns: auto ;
  grid-template-areas:   'card_language'
                         'card_cover';
position: relative; /* Définit le conteneur de positionnement pour le titre */
}

.movie-minicard a { text-decoration: none ; }
.movie-minicard a:hover { text-decoration: none ; }

.movie-minicard-language {
  grid-area: card_language ;
  color: white ;
}
.movie-minicard-title {
    grid-area: card_cover; /* partage avec la couv card_title */
    /* Limit titles on 2 lines in front page */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    word-break: break-all; /* breaks vrey long words (like URLs, ...) */
    word-break: normal ;
  position:absolute; /* pour affichage du titre par-dessus */
  bottom: 0; /* bottom,left,right 0 => bas de l'affiche */
  left: 0;
  right:0;
  background-color: rgba(50, 0, 50, 0.7) ;
  font-size: 0.9rem ;
  line-height: 1.2rem ;
  min-height: 2.4rem;
}

.movie-minicard-cover {
  grid-area: card_cover ;
  aspect-ratio: 2/3;
  overflow: hidden;
  position:relative; /* pour affichage du titre par-dessus */
}
.movie-minicard-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* cut what's overflowing */
}




.movie-smallcard {
  display: grid;
  text-align: center;
  color: white ;
  grid-template-columns: auto ;
  grid-template-areas:   'card_cover'
                         'card_title'
                         'card_language';
}

.movie-smallcard a { text-decoration: none ; }
.movie-smallcard a:hover { text-decoration: none ; }

.movie-smallcard-language {
  grid-area: card_language ;
  color: white ;
}
.movie-smallcard-title {
    grid-area: card_title;
    /* Limit titles on 2 lines in front page */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    word-break: break-all; /* breaks vrey long words (like URLs, ...) */
    word-break: normal ;
  line-height: 1.2rem ;
  min-height: 2.4rem;
}

.movie-smallcard-cover {
  grid-area: card_cover ;
  aspect-ratio: 2/3;
  overflow: hidden;
}
.movie-smallcard-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* cut what's overflowing */
}












.review-minicard {
  display: grid;
  text-align: center;
  color: white ;
  grid-template-columns: 50% 50%;
  grid-column-gap: 0.1rem;
  grid-template-areas:   'review_cover review_title'
                         'review_cover review_title'
                         'review_cover review_author';
}
.review-minicard-cover {
  grid-area: review_cover ;
  aspect-ratio: 2/3;
  overflow: hidden;
}
.review-minicard-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* cut what's overflowing */
}
.review-minicard-title {
  grid-area: review_title ;
  padding-right: 1.0rem ;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: normal ;
  text-align: left;
}
.review-minicard-author {
  grid-area: review_author ;
  text-align: left;
  margin-top: auto; /* put it at the very bottom */
}



.review-card {
  display: grid;
  border: 1px var(--card-border-color) solid ;
  border-radius: 5px ;
   background: linear-gradient(135deg, var(--card-head-bg-color) 60%, var(--card-content-bg-color) 100%);
  /* background-color: var(--card-head-bg-color) ; */
  grid-template-columns: 22% auto 10%;
  grid-template-rows: 2.8rem 1.5rem 1.5rem 10.0rem 1.5rem;
  grid-template-areas: 'cover  title     title'
                       'cover  author    likes'
                       'cover  date      likes'
                       'cover  excerpt   excerpt'
                       'cover  more      more';
  padding: 10px;
  margin-left: 3.0rem;
  margin-right: 3.0rem;
  margin-bottom: 0.8rem;
}
.review-card-cover  {
  grid-area: cover;
  display: flex;           /* Active Flexbox pour centrer l’image */
  justify-content: center; /* Centre horizontalement */
  align-items: center;     /* Centre verticalement */
}
.review-card-cover img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.review-card-title  {  grid-area: title; font-size: 1.85rem; }
.review-card-author {  grid-area: author; text-align: right; }
.review-card-date   {  grid-area: date; text-align: right; }
.review-card-likes  {  grid-area: likes; text-align: right; font-size: 1.6rem; }
.review-card-excerpt{
  grid-area: excerpt;
  display: block;
  border-left: 3px var(--card-border-color) solid;
  padding-left: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-card-more   {  grid-area: more; border-left: 3px var(--card-border-color) solid; padding-left: 15px; }


@media (max-width: 970px) and (min-width: 800px) { }
@media (max-width: 799px) { }
@media (max-width: 550px) {
    /*********************/
    /***   REVIEWS S   ***/
    /*********************/
    .review-card {
      grid-template-columns: 40% auto;
      grid-template-rows: 3.8rem 1.5rem 10.0rem 1.5rem;
      grid-template-areas: 'cover    title     '
                           'cover    title    '
                           'cover    author      ';
      padding: 5px;
      margin: 0.2rem;
      overflow: hidden;
    }
    .review-card-title  {  grid-area: title; font-size: 1.1rem; overflow: hidden; }
    .review-card-likes  {  display: none; }
    .review-card-date  {  display: none; }
    .review-card-excerpt  {  display: none; }
    .review-card-more  {  display: none; }
    .review-card-author { text-align: left ; }
}



.comment-minicard {
    display: grid;
    grid-template-columns: 6.0rem 10.0rem auto ;
    grid-template-rows: 2.0rem auto ;
    grid-column-gap: 0.0rem;
    border: 1px solid var(--comment-border-color) ;
    background-color: var(--comment-head-bg-color) ;
    padding: 5px ;
    border-radius: 5px;
    margin-bottom: 0.3rem;
    grid-template-areas: 'comment_cover comment_head    comment_head'
                         'comment_cover comment_content comment_content';
    font-size: 0.9rem ;
/**    min-height: 5rem; /* Hauteur minimale */
/**    max-height: 15rem; /* Hauteur maximale */
    overflow: hidden; /* Coupe le contenu qui dépasse si max-height est atteint */
}
.comment-minicard-info {
    grid-area: comment_info ;
    background: linear-gradient(135deg, var(--comment-info-bg-color), var(--comment-border-color));
    display: none;
}
.comment-minicard-head {
    grid-area: comment_head ;
    background-color: var(--comment-head-bg-color) ;
    border-bottom: 1px solid var(--comment-border-color) ;
    padding-left: 1.0rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.comment-minicard-content {
    grid-area: comment_content ;
    padding: 0.5rem 0.5rem 0 0.5rem ;
    /* background-color: var(--comment-content-bg-color) ; */
    background: linear-gradient(135deg, var(--comment-head-bg-color) 60%, var(--comment-content-bg-color) 100%);
    font-style: italic ;
}
.comment-minicard-cover {
    grid-area: comment_cover ;
    padding-right: 0.5rem;
    aspect-ratio: 2/3 ;
/**    width: 100%; /* Prend toute la largeur de la colonne */
/**    height: 100%; /* Prend toute la hauteur de la zone */
    overflow: hidden; /* Coupe ce qui dépasse */
}
.comment-minicard-cover img {
    width: 100% ;
    height:100%;
    object-fit:cover;
}

.comment-card {
    display: grid;
    grid-template-columns: 6.0rem 10.0rem auto ;
    grid-template-rows: 2.0rem auto ;
    grid-column-gap: 0.0rem;
    border: 1px solid #444444;
    background-color: #111111;
    padding: 5px ;
    border-radius: 5px;
    grid-template-areas: 'comment_cover comment_head   comment_head'
                         'comment_cover comment_info   comment_content';
}
.comment-card-info {
    grid-area: comment_info ;
    background-color: #303030;
    padding: 0.5rem;
}
.comment-card-head {
    grid-area: comment_head ; 
    background-color: #111111;
    border-bottom: 1px solid #444444;
    padding-left: 1.0rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.comment-card-content {
    grid-area: comment_content ;
    padding: 0.5rem;
    background-color: #222222;
}
.comment-card-cover {
    grid-area: comment_cover ;
    padding-right: 0.5rem;
}
.comment-card-cover img {
    max-width: 100% ;
}


.rating-minicard {
  display: grid;
  text-align: center;
  grid-template-columns: 6.0rem auto;
  grid-column-gap: 0.1rem;
  grid-template-areas:   'rating_cover rating_title'
                         'rating_cover rating_result'
                         'rating_cover rating_result';
  margin: 0.3rem 0 0.3rem 0 ;
}
.rating-minicard-cover {
  grid-area: rating_cover ;
  aspect-ratio: 2/3;
  overflow: hidden;
  padding-right: 0.8rem;
}
.rating-minicard-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rating-minicard-title {
  grid-area: rating_title ;
  padding-right: 0.3rem ;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: normal ;
  text-align: left;
}
.rating-minicard-result {
  grid-area: rating_result ;
  text-align: left;
}



.screenshot-minicard {
  display: grid;
  text-align: center;
  grid-template-columns: 100%;
  grid-template-areas:   'screenshot_language'
                         'screenshot_cover'
                         'screenshot_title';
  margin: 0.5rem ;
}
.screenshot-minicard-language {
  grid-area: screenshot_language ;
  color: white;
}
.screenshot-minicard-cover {
  grid-area: screenshot_cover ;
  aspect-ratio: 16/9;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.screenshot-minicard-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.screenshot-minicard-title {
  grid-area: screenshot_title ;
  text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: normal ;
}



.bbsmsg-minicard {
    display: grid;
    grid-template-areas: 'infos'
                         'content' ;
    border: 1px solid var(--comment-border-color) ;
    background-color: var(--comment-head-bg-color) ;
    padding: 5px ;
    border-radius: 5px;
    margin-bottom: 0.6rem;
    font-size: 0.9rem ;
/**    min-height: 5rem; /* Hauteur minimale */
    max-height: 5.8rem; /* Hauteur maximale */
    overflow: hidden; /* Coupe le contenu qui dépasse si max-height est atteint */
}
.bbsmsg-minicard-infos { grid-area: infos ; }
.bbsmsg-minicard-content {
  grid-area: content;
  padding-left: 3.6rem;
}



/*===============================================================================================*/
/*===============================================================================================*/
/*===   Average screens   =======================================================================*/
/*===============================================================================================*/
@media (max-width: 970px) and (min-width: 800px) {


}
/*===============================================================================================*/
/*===============================================================================================*/
/*===   Small Screens   =========================================================================*/
/*===============================================================================================*/
@media (max-width: 799px) {


}
/*===============================================================================================*/
/*===============================================================================================*/
/*===   Very small screens   ====================================================================*/
/*===============================================================================================*/
@media (max-width: 550px) {



}