/*-------------Shop CSS-------------*/

html {
	font-size: 16px;
    }

body {
	font-family: 'Open Sans Condensed', sans-serif;
	background-color: #636468;
    }

/*-------------Mobile version-------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

.carousel, .menu_cat_desktop {
    display: none;
                                    }

.grid {
    display: grid;
    grid-template-rows: repeat(9, auto);
    grid-template-columns: repeat(2, 50%);
    grid-template-areas: 
    ". shopping"
    "category category"
    "filter filter"
    "i1 i1"
    "i2 i2"
    "i3 i3" 
    "i4 i4"
    "i5 i5"
    "link_read link_read"
    "problem problem";
    place-items: center;
        }

.menu_cat {
    grid-area: category;
    padding-bottom: 2rem;
            }

.filter {
    grid-area: filter;
    padding-bottom: 2rem;
        }

.img1 {
    grid-area: i1;
        }

.img2 {
    grid-area: i2;
        }

.img3 {
    grid-area: i3;
        }

.img4 {
    grid-area: i4;
        }

.img5 {
    grid-area: i5;
}

.problem {
    grid-area: problem;
    color: #EEE;
    text-decoration: none;
    font-size: 0.5rem;
    margin-bottom: 2rem;
}

.problem:hover {
    cursor: pointer;
    text-decoration: underline;
}


.operate{
    display: none;
        }

.carousel{
    margin-bottom: 2rem;
        }

.shopping {
    grid-area: shopping;
    color: #eee;
    padding-bottom: 2rem;
            }

a.link_read {
    grid-area: link_read;
            }

a.link_read  {
        display: block;
        padding:10px 20px;
        border: 3px solid #FFFFFF;
        margin: 0 auto 5%;
        border-radius:2px;
        text-decoration:none;
        font-weight:300;
        color:#FFFFFF;
        text-align:center;
        transition: all 0.2s;
        width: fit-content;
        width: -moz-fit-content;
        margin-top: 2rem;
                }
    
a.link_read:hover, a.operate:hover {
        color:#000000;
        background-color:#FFFFFF;
    }

.article-item {
            margin: 5px 0;
            border: 4px black double;
            border-radius: 5px;
}
        
.article-item figure a {
            text-decoration: none;
            color: rgb(51, 51, 51);
}

.description {
	text-align: center;
	overflow: hidden;
	white-space: pre-wrap;
	background-color: #EEE;
}

.description::first-letter {
	font-size: 2rem;
}

.article-item figure {
	width: 300px;
	height: 450px;
	padding: 10px;
	display: grid;
    grid-template-areas: 
    "I1"
    "I2"
    "I3";
    justify-items: center;
    align-items: center;
    background-color: #EEE;
}

figcaption {
    grid-area: I1;
	font-weight: bold;
    text-align: center;
	font-size: 1rem;
    background-color: rgb(51,51,51);
    color: #EEE;
	padding: 6px 3px;
    border-radius: 5px;
    width: 280px;
}

figcaption > p {
    grid-area: I3;
}

.productimg {
    grid-area: I2;
    border: 1px solid #000;
    border-radius: 5px;
    width: 280px;
    height: auto;
    align-self: center;
}


/*-------------Css header-------------*/

header{
    width: 100%;
    height:auto;
    display: inline-block;
    background: #EEE;
    font-family: 'Open Sans Condensed', sans-serif;
    border-radius: 0px 0px 20px 20px;
        }

header h1{
    width: 100%;
    font-size: 2em;
    align-items: center;
    display: flex;
    margin: 0 auto 0 auto;
    justify-content: center;
        }

header h1 span{
    color: rgba(172, 24, 24, 0.767);
    font-size: 130%;
    font-family: 'Permanent Marker', cursive;
                }
header nav{
    width: 100%;
    background: rgb(51,51,51);
    padding: 12px;
            }

header nav ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    height: 100%;
}
nav ul li{
    font-size: 2.5rem;
    height: 100%;
    list-style-type: none;
    align-items:center;
    display: flex;
    color:white;
        }

header nav ul li a{
    width: 20%;
    color: #EEE

                    }

nav ul li a:hover{
    color:rgba(172, 24, 24, 0.767);
                }

header nav ul li .nomLi{
    display: none;
                        }

nav ul #lienE-shop{
    background-color:rgba(172, 24, 24, 0.767);
    padding: 6px;
    border-radius:6px;
                    }

nav ul #lienE-shop:hover a{
    color:rgb(51, 51, 51);
                            }

.menu_cat_mobile {
    color: #333333;
    border-color: rgb(255, 255, 255);
     width: 175px;
                 }

.style_sort{
color: #333333;
border-color: rgb(255, 255, 255);
text-align: center;
text-align-last: center;
width: 90px;
            }

/*-------------Css footer-------------*/

footer{
    font-family: 'Open Sans Condensed', sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column-reverse;
    width: 100%;
    padding: 0px;
    background-color:rgb(51, 51, 51);
     }

footer .gauche{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-around;
    flex-direction: column;
    width: 100%;
    padding: 0px;
    margin: 0px;
                }

.pourGauche{
    display: flex;
    width: 30%;
    flex-direction: row;
            }

footer .gauche i{
    text-decoration: none;
    color: #EEE;
    padding: 5px;
    font-size: 2rem;
                }

footer .droite{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-around;
    flex-direction: column;
    width: 100%;
    padding: 0px;
                }

footer .droite a{
    text-decoration: none;
    color: #EEE;
    padding: 5px;
    font-size: 1rem;    
                }

footer .gauche i:hover, footer .droite a:hover{
    color: rgba(172, 24, 24, 0.767);
                                                }

/*-------------Desktop version-------------*/

@media screen and (min-width: 961px){

    .grid {
        grid-template-rows: repeat(4, auto);
        grid-template-columns: repeat(5, 20%);
        place-items: center;
        grid-template-areas: 
        "carousel carousel carousel carousel carousel"
        "category category filter operate shopping" 
        "i1 i2 i3 i4 i5"
        ". . link_read . ."
        ". . problem . .";
        padding: 0 40px;
        padding-top: 60px;
            }

    .menu_cat_mobile {
        display: none;
                    }

    /*-------------Menu category_desktop:"marchandises"-------------*/

    .menu_cat_desktop ul{
        list-style-type: none;
        align-items: center;
        display: flex;
        justify-content: space-around;
                        }

    .menu_cat_desktop li{
        width: 25%;
        text-align: center;
                        }

    .menu_cat_desktop a{
        display: inline-block;
        text-decoration: none;
        color: #eee;
        border-bottom: 2px solid transparent;
        padding: 10px 0.5em 10px 0.5em;
                        }

    .menu_cat_desktop a:hover{
        color:rgba(172, 24, 24, 0.767);
        border-bottom: 2px solid rgba(245, 25, 25, 0.767);
                                }

    .menu_cat_desktop{
        display: flex;
        width: 100%;
        margin: 0 auto;
        background-color: rgb(51, 51, 51);
        position: sticky;
                        }
   
    /*-------------Carousel-------------*/

    @keyframes slidy {
        0% { left: 0%; }
        10% { left: 0%; }
        25% { left: -100%; }
        40% { left: -100%; }
        50% { left: -200%; }
        65% { left: -200%; }
        85% { left: -300%; }
        100% { left: -300%; }
                     }
    
    .carousel {
        display: block;
        grid-area: carousel;
        width: 80%;
        max-width: 1000px;
        overflow: hidden; /*to hide the overflowing elements of the div*/
        margin: 5px 0;
        margin-bottom: 5%;
        border: 4px white double;
        border-radius: 5px;
                }
    
    .carousel figure {
        position: relative; /*to enable the move of the figure during the animation*/
        width: 500%; 
        font-size: 0;
        animation: 15s slidy infinite;
                    }
    
    .carousel figure img {
        width: 20%;
        height: auto;
        overflow: hidden; 
                            }

    /*-------------menu desktop a_link-------------*/

    .menu_desktop {
        padding: 10px auto 10px auto ;
        background-color: #636468;
                    }

    /*-------------Header Responsive desktop-------------*/

    header{
        display:flex;
        height: 200px;
        background: linear-gradient(130deg, #EEE 37%,rgb(51, 51, 51) 37%);
             }

    header h1{
        width: 60%;
        font-size: 4rem;
                }

    header nav {
        background: none;
                 }

    nav{
        width: 40%;
         }

    nav ul{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        width: 100%;
        height: 100%;
             }

    nav ul li a .nomLi{
        display: flex;
                        }

    nav ul li a #shop{
        width: 100px;
                        }

    nav ul li{
        font-size: 2.5rem;
        height: 100%;
        list-style-type: none;
        align-items:center;
        display: flex;
        color:white;
                }

    nav ul li a {
        text-decoration: none;
        color:white;
                  }

    nav ul li .icone{
        display: none;
                     }

    nav ul #lienE-shop{
        background-color:rgba(172, 24, 24, 0.767);
        padding-right: 10px;
        padding-left: 10px;
        border-radius:6px;
                      }

    nav ul #lienE-shop a:hover{
        color: rgb(51, 51, 51);
                                }

/*-------------Footer Responsive desktop-------------*/

    footer{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 30px;
        flex-direction: row; 
             }

    footer .pourGauche{
        width: 30%;
        display: flex;
        align-items: start;
        justify-content: center;
        flex-wrap: wrap;
        text-align: left;
                        }
    
    footer .gauche{
        display: flex;
        align-items: center;
        margin-right: 0px;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: stretch;
                     }
                     
    footer .droite{
        display: flex;
        text-align: end;
        justify-content: space-around;
        flex-wrap: wrap;
        flex-direction: row;
        width: 65%;
                    }

    footer .droite a{
        font-size: 1rem;
                    }

    footer .gauche i{
        text-decoration: none;
        color: #EEE;
        padding: 5px;
        font-size: 2rem;
    }

    /*------------Products-----------*/
    .article-item {
        transition: all 0.2s ease-in 0.2s;
    }
    
    .article-item:hover {
        border: 8px #555 double;
        background-color: rgba(172,24,24,0.767);
        letter-spacing:2px;
        cursor: pointer;
     }

     article figure a:hover {
        text-decoration: underline;
    }

    .article-item figure {
        width: 175px;
        height: 300px;
    }

    figcaption, .productimg {
        width: 150px;
    }
}