@font-face {
    font-family: Roboto;
    src: url("./Fonts/Roboto-Regular.ttf"),
         url("./Fonts/Roboto-Regular.woff"),
         url("./Fonts/Roboto-Regular.woff2");
}

@font-face {
    font-family: Lato;
    src: url("./Fonts/Lato-Regular.ttf");
}

/* --- RESET --- */

body, * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #F7F8F8;
}

main {
    padding: 65px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

main > * {
    max-width: 1200px;
}

main li {
    font-size: 16px;
    font-family: Lato;
}

h2 {
    font-family: Roboto;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 30px;
}

h3 {
    font-family: Lato;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding-bottom: 30px;
}

main p {
    font-family: Lato;
    font-size: 16px;
    line-height: 28px;
    width: 100%;
}

div.produits img {
    max-width: 550px;
    margin: 20px auto;
    display: block;
}

main p.justify {
    text-align: justify;
}

main p.left{
    text-align: left;
}

main p.center {
    text-align: center;
}

div.produits, div.horaires, div.market, div.ailleurs {
    padding: 30px;
    width: 100%;
}

/* --- PRODUITS --- */

main img {
    width: 100%;
    box-shadow: 4px 4px 10px 3px rgba(51, 51, 51, 0.25);
    border-radius: 18px;
    margin-bottom: 30px;
}

/* --- HORAIRES --- */

div.panneau {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.horaires img {
    max-width: 400px;
}

main p ul {
    list-style-type: none;
}

span a {
    text-decoration: none;
    color: #8A2033;
    font-weight: bold;
}

a.rouge, span.rouge {
    text-decoration: none;
    color: #8A2033;
    font-weight: bold;
}

.horaires ul li {
    display: flex;
    align-items: flex-start;
    padding: 30px 0 0 60px;
}

div.horaires ul li:nth-child(2) {
    padding: 10px 0 30px 60px
}

.horaires ul li img {
    box-shadow: none;
    border-radius: 0;
    width: 23px;
    height: 23px;
    margin-right: 30px;
    padding-top: 5px;
}

.horaires ul li p {
    display: block;
}

/* --- MARKET --- */
h3.market-title {
    margin-top: 20px;
}
div.slider-container {
    height:309px;
    width: 223px;
    margin: auto;
}
div.slider-wrapper {
    height: 96%;
    padding-right: 76%;
    position: relative;
    bottom: 0;
    overflow: hidden;
    box-shadow: 4px 4px 10px 3px rgb(51 51 51 / 25%);
    border-radius: 18px;
    margin-bottom: 30px;
}
div.slider {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    -webkit-animation: MarketSlider 12s infinite;
    -moz-animation: MarketSlider 12s inifinite;
    animation: MarketSlider 12s infinite;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- SLIDER --- */
@keyframes MarketSlider {
    0% {
        background-image: url(/Images/market1.jpg);
        opacity: 1;
    }
    25% {
        background-image: url(/Images/market1.jpg);
        opacity: 0;
        background-image: url(/Images/market2.jpg);
        opacity: 1;
    }
    50% {
        background-image: url(/Images/market2.jpg);
        opacity: 0;
        background-image: url(/Images/market3.jpg);
        opacity: 1;
    }
    75% {
        background-image: url(/Images/market3.jpg);
        opacity: 0;
        background-image: url(/Images/market4.jpg);
        opacity: 1;
    }
    100% {
        background-image: url(/Images/market4.jpg);
        opacity: 0;
        background-image: url(/Images/market1.jpg);
        opacity: 1;
    }
}

ul.list {
    list-style-type: none;
}
ul.list li {
    padding-left: 40px;
    position: relative;
}
ul.list li:before {
    content: '-  ';
    color: #8A2033;
    /* Ajusté pour correspondre à la taille du texte (16px) */
    font-size: 1.1rem; 
    position: absolute;
    left: 10px;
}

span.quotes::before {
    content: open-quote;
}
span.quotes::after {
    content: close-quote;
}

/* --- RESPONSIVE --- */

@media screen and (min-width: 500px) {
    div.slider-container {
        min-width: 370px;
        min-height: 512.7px;
        margin: auto;
    }
}

@media screen and (min-width: 900px) {
    div.produits, div.horaires, div.market {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    main {
        padding: 150px 20px 20px 20px;
    }
    main p {
        font-size: 18px;
        line-height: 32px;
    }
    main li {
        font-size: 18px;
        line-height: 32px;
    }
    ul.list li:before {
        content: '-  ';
        color: #8A2033;
        /* Ajusté pour correspondre à la taille desktop (18px) */
        font-size: 1.2rem;
    }
    .contenu-revert {
        order: -1;
        margin-right: 50px;
    }
    .contenu {
        margin-left: 50px;
    }
    div.slider-container{
        min-width: 370px;
        min-height: 512.7px;
    }
    h3 {
        font-size: 24px;
    }
    h2{
        font-size: 36px;
    }
}