/*===============================================================================================*/
/*===   FOOTER   ================================================================================*/
/*===============================================================================================*/
.footer {
    text-align: center;
    margin-top: 3rem;
}

/*===============================================================================================*/
/*===   MAIN   ==================================================================================*/
/*===============================================================================================*/
.main_and_ads_block {
  /* Max-width is defined in user_block, menu_block and main_block too allow more width for ads */
  margin: auto;
}

.main_and_ads_block {
  display: grid ;
  grid-template-columns: 100% ; /* pub skyscraper est 160px large */
  grid-template-areas: 'main_block' ;
}

.pubs_container {
  display: flex; /* pour que 2 images oient des fois cote-cote ou l'une au-dessus de l'autre selon taille */
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  border-radius: 3px;
  padding: 3px;
  border: 1px var(--pubs-border-color) dotted;
  background: var(--pubs-bg-color);
}
.pubs_mobile {
  display: none ;
  margin-top: 0.5rem;
}
.pubs_top    {
  margin-top: 0.8rem;
  margin-bottom: 0.3rem;
}

.pubs_middle  {
  margin-top: 1.0rem;
  margin-bottom: 0.0rem;
}


/*
.pubs_top    {
  grid-area: pubs_top;
  display: inline-block;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 3px;
  padding: 3px;
  border: 1px var(--pubs-border-color) dotted;
  background: var(--pubs-bg-color);
}*/
.pubs_right  {
  grid-area: pubs_right;
  display: flex;
  align-items: top;
  justify-content: center;
  border-radius: 5px;
  padding: 5px;
  border: 1px var(--pubs-border-color) dotted;
  background: var(--pubs-bg-color);
}


.main_block {
  grid-area: main_block;
  width: 100%;
  height: 100%;
}


/*===============================================================================================*/
/*===   Header, User and Menu   =================================================================*/
/*===============================================================================================*/
/* Header contains: jumbotron, user_block and menu_block */

.header_block {
  background-color: var(--main-bg-bg-color);
  width: 100%;
  margin-bottom: 5px;
}

/* Main banner */
.jumbotron {
  background: linear-gradient(transparent, 88%, var(--main-bg-bg-color) 99%), url("../images/banner_202502_right.webp"), url("../images/banner_202502_left.webp");
  background-size: 110%, cover, contain;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: auto, left, bottom left;
  height: 198px;
}

/* Centered banner on very big screens */
/* When the screen is bigger than the image the cover not work well */
@media (min-width: 2600px) {
  .jumbotron {
    background-size: auto;
    background-position: center;
  }
}


.user_block, .menu_block, .main_block {
  max-width: var(--main-content-max-width) ;
  margin: auto;
  padding-right: 5px ;
  padding-left: 5px ;

}

/* User block */
.user_block {
  text-align: right;
  margin-top: 0.5rem;
}

/* Menu block */

/* hamburger menu, hidden by default */
.menu_label, #menu_toggle{
  display: none;
}

.menu_block {
  margin-top: 1rem;
}
 
.menu .menu_items {
  display: flex;
  /* See the <a> below for the align */
}

.menu .menu_items a {
  display: flex;
  height: 3.0rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--main-menu-text-color) ;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
 
.menu a:hover {
  color: var(--main-menu-text-hover-color) ;
  background-color: var(--main-menu-bg-hover-color) ;
  border: 1px solid var(--main-menu-border-hover-color) ;
  border-bottom: 0px;
  font-weight: normal;
}

.menu a.active{
  color: var(--main-menu-text-active-color) ;
  background-color: var(--main-menu-bg-active-color);
  font-weight: bold;
}



/*===============================================================================================*/
/*===============================================================================================*/
/*===   Index page   ============================================================================*/
/*===============================================================================================*/
.index_welcome { margin-left: 8% ; }
@media (max-width: 999px) { }
@media (max-width: 799px) { margin-left: 3% ; }
@media (max-width: 499px) { }


.index_subtitles_area {
  display: grid ;
  grid-template-columns: repeat(3,1fr) ;
  grid-template-rows: repeat(3,1fr) ;
  grid-row-gap: 0.8rem;
  border-radius: 10px ;
  grid-template-areas: 'grp1 grp1 pubA'
                       'grp2 grp2 pubA'
                       'grp3 grp3 grp3' ;
  /* background-color: pink ; */
  /* background: radial-gradient(circle, transparent, var(--main-menu-bg-hover-color) 140%);·*/
  /* border: 1px solid var(--main-menu-bg-hover-color) ; */
}
.index_subtitles_grp1 {
  grid-area: grp1 ;
  /* background-color: yellow ; */
  display: grid ;
  grid-template-columns: repeat(5,1fr) ;
  grid-column-gap: 0.8rem ;
  padding-left: 1.4rem;
  padding-right: 0.4rem;
  padding-bottom: 1.4rem;
  border-radius: 10px;
  background: radial-gradient(ellipse, transparent 60%, var(--section-halo-color) 160%);
  box-shadow: 0 0 10px  var(--section-halo-color) ;
}
.index_subtitles_grp2 {
  grid-area: grp2 ;
  /* background-color: orange ; */
  display: grid ;
  grid-template-columns: repeat(5,1fr) ;
  grid-column-gap: 0.8rem ;
  padding-left: 1.4rem;
  padding-right: 0.4rem;
  padding-bottom: 1.4rem;
  border-radius: 10px;
  background: radial-gradient(ellipse, transparent 60%, var(--section-halo-color) 160%);
  box-shadow: 0 0 10px  var(--section-halo-color) ;
}
.index_subtitles_grp3 {
  grid-area: grp3 ;
  /* background-color: blue ; */
  display: grid ;
  grid-template-columns: repeat(7,1fr) ;
  grid-column-gap: 0.8rem ;
  padding-left: 1.4rem;
  padding-right: 0.4rem;
  padding-bottom: 1.4rem;
  border-radius: 10px;
  background: radial-gradient(ellipse, transparent 60%, var(--section-halo-color) 160%);
  box-shadow: 0 0 10px  var(--section-halo-color) ;
}
.index_subtitles_pubA {
  grid-area: pubA ;
  margin: auto;
  margin-left: 1.0rem;
  /* background-color: purple ; */
}
.index_subtitles_explore_link {
  font-size: 1.0rem ;
  color: #F4C430;
  margin: auto ;
  text-align: center ;
}

@media (max-width: 999px) { }
@media (max-width: 799px) {
    /* 2 elements per category and one category per line */
    .index_subtitles_area {
      grid-template-columns: 100% ;
      grid-template-rows: auto;
      grid-row-gap: 0.5rem;
      grid-template-areas: 'grp1'
                           'grp2'
                           'grp3'
                           'pubA';
    }
    .index_subtitles_grp1 > div:nth-child(n + 3) { display: none; }
    .index_subtitles_grp2 > div:nth-child(n + 3) { display: none; }
    .index_subtitles_grp3 > div:nth-child(n + 3) { display: none; }
    .index_subtitles_grp1 { grid-template-columns: repeat(3,1fr) ; }
    .index_subtitles_grp2 { grid-template-columns: repeat(3,1fr) ; }
    .index_subtitles_grp3 { grid-template-columns: repeat(3,1fr) ; }

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

.index_subtitles_search form {
  display: grid;
  grid-template-columns: 80% 20%;
  width: 90%;
  margin: auto;
  margin-bottom: 2.0rem;
}
.index_advanced_search_link {
  font-size: 1.0rem ;
  color: #F4C430;
  text-align: right ;
}


.index_reviews_area {
  display: grid ;
  grid-template-columns: 25% 25% 25% auto ;
  padding: 0.8rem;
  grid-column-gap: 1.0rem ;
  border-radius: 10px ;
  background: radial-gradient(ellipse, transparent 60%, var(--section-halo-color) 160%);
  box-shadow: 0 0 10px  var(--section-halo-color) ;
}
.index_reviews_area > div {
  border-right: 1px solid white ;
}
.index_reviews_explore_link {
  font-size: 1.0rem ;
  color: #F4C430;
  margin: auto ;
}

@media (max-width: 999px) { }
@media (max-width: 799px) {
    /* Reviews 2 by 2 */
    .index_reviews_area {
      grid-template-columns: 50% 50% ;
      grid-row-gap: 2.0rem;
    }
    .index_subtitles_search form {
      width: 98% ;
    }
}
@media (max-width: 499px) { }

.index_comments_and_ratings_area {
  display: grid ;
  grid-template-columns: 60% 40% ;
  grid-column-gap: 1.0rem;
}
@media (max-width: 999px) { }
@media (max-width: 799px) {
    /* Comments and ratings are not side by side anymore */
    .index_comments_and_ratings_area {
      grid-template-columns: auto ;
    }
}
@media (max-width: 499px) { }



.index_forum_and_badges_area {
  display: grid ;
  grid-template-columns: 60% 40% ;
  grid-column-gap: 1.0rem;
}
@media (max-width: 999px) { }
@media (max-width: 799px) {
    /* Comments and ratings are not side by side anymore */
    .index_forum_and_badges_area {
      grid-template-columns: auto ;
    }
}
@media (max-width: 499px) { }



.index_comments_explore_link {
  font-size: 1.0rem ;
  color: #F4C430;
}

.index_comments_area {
  padding: 0.8rem;
  border-radius: 10px ;
  background: radial-gradient(ellipse, transparent 60%, var(--section-halo-color) 160%);
  box-shadow: 0 0 10px  var(--section-halo-color) ;
}
.index_ratings_area {
  padding: 0.8rem;
  border-radius: 10px ;
  background: radial-gradient(ellipse, transparent 60%, var(--section-halo-color) 160%);
  box-shadow: 0 0 10px  var(--section-halo-color) ;
}


.index_gallery_area {
  display: grid ;
  grid-template-columns: repeat(4,1fr) ;
  padding: 0.8rem;
  grid-column-gap: 1.0rem ;
  border-radius: 10px ;
  background: radial-gradient(ellipse, transparent 60%, var(--section-halo-color) 160%);
  box-shadow: 0 0 10px  var(--section-halo-color) ;
}
.index_gallery_explore_link {
  font-size: 1.0rem ;
  color: #F4C430;
  margin: auto ;
}

@media (max-width: 999px) { }
@media (max-width: 799px) {
    /* Display only 4 elements */
    .index_gallery_area > div:nth-child(n + 5) {
      display: none;
    }
    .index_gallery_area {
      grid-template-columns: repeat(2,1fr) ;
    }
}
@media (max-width: 499px) { }







/*===============================================================================================*/
/*===============================================================================================*/
/*===   Index content   =========================================================================*/
/*===============================================================================================*/

/* HEADER OF LISTS */
/* Text header for the blocks of covers, Not much to do only a correct margins */
.lastadded_header{
    margin-top: 1.8rem;
    margin-bottom: 1rem;
    /* This is an example of a rule that is not needed and was left over
from previous tests */
    /*display: block;*/
}

/* INDENTATION OF MAIN BLOCKS WITH RESPECT TO THEIR HEADERS */
.welcome_content, .lastadded_content, .lastadded_comments, .lastadded_badges, .tops {
    /* Depending on the width of the page, I put it just to try it */
    /*margin-left: 8vw;*/

    /* I thinks this is the same as bootstrap */
    margin-left: 160px;
}

/*Here's the good part, as I said, I'm going to start with the big elements and
work down to the small elements*/


/* COVERS BLOCKS */
.lastadded_content{
    /* This can be done in many ways, you can see some of them here
https://www.w3schools.com/css/css_templates.asp
I chose this one because it seems to me cleaner and easier to adjust to
different screen sizes without losing control over sizes and so on.*/
    display: grid;

    /* This is the most important rule, it defines the size of the covers.
In this case a % of the available space for this block*/
    grid-template-columns: 15% 15% 15% 15% 15% 15%;

    /* This is the same if all columns have the same size, repeat 6 times 15%*/
    /*grid-template-columns: repeat(6, 15%); */

    /*For smaller versions just adjust this and most of the work is done by itself*/
    /*grid-template-columns: repeat(3, 20%); */
    /*grid-template-columns: repeat(2, 40%); */
    /*grid-template-columns: repeat(1, 75%); */


    /* Here it is indicated how to use the space left over once the smaller
elements are placed inside the grid. In this case it adds space to the sides. In
practice it centers them inside.

If we do not use all the space 6*15 = 90%, it is the same as indicating grid-gap
which is the space between elements of the grid. */
    justify-content: space-around;

    /*It is not necessary when there is free space in the columns, but it is
when it is auto*/
    /*grid-gap: 1vw;*/

    /* If there is more than one row as in the small versions, if the space
between them is necessary. The current value is only a test*/
    /*grid-row-gap: 20px;*/
}

/* COVER */
/* It doesn't really need much, just the center alignment for the texts */
.cover {
    text-align: center;

    /*To adjust things I usually include some of these to easily see exactly
where the blocks arrive. it's just for debugging purposes*/
    /* border: solid 1px black; */

    /*It is not necessary either, it is only useful if we want to limit the
size, but as we already have the 1140px width limit and the
grid-template-columns it is better to adjust it there*/
    /*max-width: 200px;  */
}

/* COLOR OF THE LANGUAGE TEXT */
.cover .language {
    color: white;
}

/* LIMIT THE TITLE TEXT OF COVER */
.cover .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;
}


/* ASPECT RATIO OF A IMAGE CONTAINER */
/*The width of the image is already defined by grid-template-columns, the only
thing left to define is the height, in this case it is a fixed proportion*/
.cover .cover-image,
.card-cover-area .cover-image {

    /* I think most of the covers are more or less 300%450=0.666 the same as 2/3 */
    aspect-ratio: 2/3;

    /*In this case it is not necessary, but if for some reason the image
does not respect the size that is allowed, this prevents it from going out of
its place*/
    overflow: hidden;
}

/* ASPECT-RATIO FALLBACK*/
@supports not (aspect-ratio: 2/3) {
    .cover .cover-image {
        width: 100%;
        position: relative;
        padding-top: 150%;
    }

    .cover .cover-image img {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
}

/*THE IMAGE ADJUST*/
/* necessary to ensure that the image completely fills the containing block and
that it is perfectly aligned with the others and with the margins. */
.cover .cover-image img,
.card-cover-area .cover-image img {
    width: 100%;
    height: 100%;
}

/*If you wanted to do something similar but from bottom to top, you would have
to start by putting a fixed size to the images, it can be relative to the page
but not a percentage because this is always with respect to its parent, and go
up by their parents assigning paddings and margins, taking care not to exceed
the maximum of the page of 1140px. it is possible, but I find it more difficult
to do.*/


/* IMAGE CROPPED */
/*This is what is being done so far, it has the problem that images with
different aspect ratios can be cut not very well*/
.cover .cover-image img,
.card-cover-area .cover-image img {
    object-fit: cover;
}

/* IMAGE SCALED */
/*Here the image is scaled to fit in the available space, I think it can be
useful for previews and maybe for web scenes

In that case you have to create a different class to differentiate them*/
/*.cover .cover-image img {
    object-fit: scale-down;
    background: #303030;
}*/

/* TOPS BLOCKS IN 2 COLUMS */
/*Blocks containing only text are much easier, automatic columns usually work
very well and margins can be easily indicated inside using the padding.

If you want to be consistent with the above, you can do it the same way by
specifying smaller sizes than the total for the columns and setting the rule
that adjusts the free space around them*/
.tops {
    display: grid;
    grid-template-columns: auto auto;
}

/* COMENTS BLOCK */
/* There is not much to explain here, as I said before, the texts are very
simple, a few colors, alignments and margins is more than enough. You can do the
same as with the tops and show it in 2 columns when the screen is big, but I
think it's fine as it is */
.comment {
    background-color: #303030;
    padding: 1.25rem;
    margin-bottom: 1px;
}

.comment p {
    margin: 0px;
}

.comment_content{
    text-indent: 50px;
    font-style: italic;
}

/* 1 LINE LIMIT TO COMENTS HEADER */
.comment_header p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*From this point on, in the normal size, I don't think any further explanation is needed*/





.top_header {
    color: #3498DB;
}

.alltime .top_header {
    color: #E74C3C !important;
}





/*===============================================================================================*/
/*===============================================================================================*/
/*===   Average screens   =======================================================================*/
/*===============================================================================================*/
@media (max-width: 970px) and (min-width: 800px) {
    .jumbotron {
        height: 150px;
    }

    /* Show a grid of 2 row with 3 covers each, The cover has 20% of the
available space horizontally */
    .lastadded_content{
        grid-template-columns: repeat(3, 20%);
        grid-row-gap: 20px;
    }

    /* Remove the indent of main block */
    .welcome_content, .lastadded_content, .lastadded_comments, .lastadded_badges, .tops {
        margin-left: 0vw;
    }


    /* TITLE, LANGUAGE AND RATING INSIDE THE IMAGE, WITH TRANSPARENT PANNEL */
    /* These texts inside the images were just an attempt to compact the covers,
but if you don't like it you can remove all this block and they would look the
same as the big version but changing the distribution to two rows */

    /* I copied this code from another website and just adapted it here, I don't
quite understand how it works, but I think it has to do with the definitions of
position: relative and absolute, which allow you to ignore the normal position
of the elements inside a parent */

    .cover a {
        position: relative;
        display: inline-block;
        height: 100%;
        width: 100%;
    }

    .cover .cover-image {
        height: 100%;
        width: 100%;
        z-index: 0;
    }

    .cover .language {
        text-align: left;
        position: absolute;
        display: block;
        width: 100%;
        background: rgba(0, 0, 0, 0.8);
        font-weight: bold;
        top: 0;
        left: 0;
        z-index: 1; /* Needed for aspect-ratio fallback */
    }

    .cover .title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 3; /* Needed for aspect-ratio fallback */
    }

    .cover .rating{
        text-align: right;
        position: absolute;
        display: block;
        width: 100%;
        background: rgba(0, 0, 0, 0);
        top: 0;
        left: 0;
        z-index: 2; /* Needed for aspect-ratio fallback */
    }

}

/*===============================================================================================*/
/*===============================================================================================*/
/*===   Small Screens   =========================================================================*/
/*===============================================================================================*/
@media (max-width: 799px) {
    /* REDUCE MARGINS TO MATCH WITH THE FONTS REDUCTION */
    .lastadded_header {
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    .comment_content {
        text-indent: 25px;
    }

    /* LOGO REDUCTION */
    .jumbotron {
        height: 100px;
    }

    /* Grid of 2x3 */
    .lastadded_content{
        grid-template-columns: 50% 50%;
        grid-gap: 5px;
    }

/*Here I am going to do something different, I am going to put the data of each
cover in another grid, but with several cells joined together. I am going to put
the image to the left filling all the height of the grid. To do this use the
grid-template-areas option to define how to put the cells together and grid-area
to give them names. It seems complex but it is quite intuitive and visual.

https://www.w3schools.com/cssref/pr_grid-template-areas.asp*/

    .cover {
        display: grid;
        grid-template-columns: 20% 40% 40%;
        grid-template-areas:    'cover-img language rating'
                                'cover-img title title';

        /* I put the same background as the comments */
        background-color: #303030;
        padding: 1.25rem;
    }

    /* The names for te grid and margins and correct positioning of texts */
    .cover .cover-image {
        grid-area: cover-img;
    }

    .cover .language {
        grid-area: language;
        text-align: left;
        padding-left: 1.25rem;
    }

    .cover .rating{
        grid-area: rating;
        text-align: right;
        padding-left: 1.25rem;
    }

    .cover .title {
        grid-area: title;
        text-align: left;
        padding-left: 1.25rem;

        /* I put this because for some reason the 2 line limit was not working
properly */
        height: fit-content;
    }

    /* This is not very intuitive, it skips this element of the list of parents
and children, I think it does not work for everything, but for this case it
does. with this for the grid is as if the <div> of the texts were directly its
children and not only the <a> */
    .cover a {
        display: contents;
    }

    /* The same of the other size */
    .tops {
        grid-template-columns: auto;
    }

    .welcome_content, .lastadded_content, .lastadded_comments, .lastadded_badges, .tops {
        margin-left: 0vw;
    }

    .lastadded_badges_date {
        display: none;
    }


    /* MENU BUTTON LEFT IN USER_BLOCK */
    .user_block {
        display: flex;
    }

    .user_block div:first-child {
        flex: 20%
    }

    .user_block div:last-child {
        flex: 80%
    }

    .user_block{
        padding-bottom: 10px;
    }

    /* MENU */
    .menu .menu_items {
        display: none;
        flex-direction: column;
        height: 220px;
    }

    .menu .menu_items a {
        width: 100%;
        height: 100%;
        padding: 0;
    }

    .menu_label {
        display: flex;
        width: 70px;
        height: 70px;
        border: 2px solid #444444;
        border-radius: 5px;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        color: white;
        cursor: pointer;
        background-color: var(--main-bg-color);
    }

    .menu_label:hover {
        background-color: #151515;
        border: 1px solid #444444;
    }

    #menu_toggle:checked + .menu_items {
        display: flex;
    }

}


/*===============================================================================================*/
/*===============================================================================================*/
/*===   Very small screens   ====================================================================*/
/*===============================================================================================*/
@media (max-width: 550px) {
    .jumbotron {
        height: 75px;
    }

    .lastadded_content{
        grid-template-columns: 100%;
    }


/************************/
/***   PUBLICITES S   ***/
/************************/
    .pubs_right  {
      grid-area: pubs_right;
      display: flex;
      overflow: hidden;
    }
    .pubs_mobile {
      display: inline-block ;
    }

}