/********
RESET
********/

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

ul {
    list-style-type:none;
}

a {
    text-decoration:none;
    color:black;
}

img {
    width:100%;
    height:auto;
}

/********
GENERAL
********/

body {
    font-family:"Athiti", sans-serif;
    font-size:18px;
}

h2, h3, h4, h5 {
    font-family:"Merienda", sans-serif;
    text-align:center;
    padding:1rem;
} 

h1::before, h2::before, h3::before, h4::before, .article-home-menus li::before {
    content:url("../3.ressources/images/star-solid.svg");
    padding:0.5rem;
}

h1::after, h2::after, h3::after, h4::after {
    content:url("../3.ressources/images/star-solid.svg");
    padding:0.5rem;
}

h1 {
    font-size:30px;
    text-transform:uppercase;
    font-weight:normal;
}

h2 {
    font-size:30px;
}

h3 {
    font-size:25px
}

h4 {
    font-size:20px;
}

h5 {
    font-size:18px;
}

button, .footer ul, .footer address {
    font-size:16px;
}

/********
HEADER
********/

.header img {
    width:10rem;
}

.header {
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    background:linear-gradient(#ebe3db, #fff 95%);
}

.header .container {
    padding:0;
}

.header nav {
    margin:1rem 0;
}


.header ul {
    
    
}


.header li {
    border-top:1px solid black;
}

.header nav a {
    display:inline-block;
    width:100%;
    padding:1rem;
    font-weight:bold;
    background-color:#ebe3db;
    transition:background-color 0.5s, color 0.2s;
    cursor:pointer;
}

.header nav a:hover {
    background-color:#950000;
    color:#fff;
}


.header nav .active {
    background-color:#4c4343;
    color:#fff;
}


/********
CAROUSEL
********/

@font-face {
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('../3.ressources/fonts/slick.eot');
    src: url('../3.ressources/fonts/slick.eot?#iefix') format('embedded-opentype'), url('../3.ressources/fonts/slick.woff') format('woff'), url('../3.ressources/fonts/slick.ttf') format('truetype'), url('../3.ressources/fonts/slick.svg#slick') format('svg');
}

.slick-prev, .slick-next {
    font-size:0;
    line-height:0;
    
    position:absolute;
    top:50%;
    
    width:20px;
    height:20px;
    
    cursor:pointer;
    
    color:transparent;
    background:transparent;
    border:none;
}

.slick-prev {
    left:2%;
    z-index:10;
}

.slick-next {
    right:4%;
}

.slick-prev::before, .slick-next::before{
    font-size:40px;
    line-height:1;
    color:#fff;
    font-family:"slick";
    opacity:0.75;
}

.slick-prev::before{
    content:"←";
}

.slick-next::before{
    content:"→";
}

.slick-dots {
    width:100%;
    text-align:center;
}

.slick-dots li {
    display:inline-block;
    width:20px;
    height:20px;
    cursor:pointer;
    margin-inline:5px;
    position:relative;
}

.slick-dots li button {
    font-size:0;
    line-height:0;
    
    width:20px;
    height:20px;
    padding:5px;
    border-radius:50%;
    
    display:block;
    
    border:none;
    color:transparent;
    background:transparent;
    outline:none;
}

.slick-dots li button::before {
    content:'•';
    position:absolute;
    
    font-family:"slick";
    font-size:1rem;
    line-height:2;
    
    width:20px;
    height:20px;
    
    opacity:0.25;
    color:#9E9EA7;
}

.slick-dots .slick-active button::before {
    color:#950000;
    opacity:0.75;
}

/********
MAIN
********/

.container {
    padding:1rem;
}

article {
    margin:1rem 0;
}

.article-home img, p {
    margin:0.75rem 0;
}

.home-menus {
    display:flex;
    flex-direction:column;
}

.article-home-menus {
    background-color:#ebe3db;
}

.article-home-menus ul {
    list-style-image:;
}

.article-home-menus li {
    border-bottom:1px dashed black;
    padding:0.5rem;
}

.btn-more {
    border:none;
    box-shadow: 0 2px 10px #4c4343;
    background-color:#4c4343;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    width:90%;
    margin:1rem auto 2rem;
    padding:0.75rem 1.5rem;
    transition:all 0.5s;
}

.btn-more:hover {
    background-color:#950000;
}

.btn-more img {
    width:3rem;
    padding-inline:0.5rem;
}

/*** HOVER ***/

.article-home-menus-img {
    position:relative;
}

.article-home-menus-img p {
    display:none;
    
    font-size:50px;
    text-align:center;
    padding:4rem;
    color:#fff;
    
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:100%;
    margin:0;
    
    outline: 10px solid #fff;
    outline-offset:-8rem;
}

.article-home-menus-img p em {
    font-size:15px;
}

/*.article-home-menus-img:hover img {
    filter: brightness(40%);
    
}*/

.article-home-menus-img:hover p {
    display:flex;
    flex-direction:column;
    justify-content:center;
    background-color:rgba(76,67,67,.9)
}


/********
FOOTER
********/

.footer {
    background:url("../3.ressources/images/footer-bg.jpg");
    color:#fff;
}

.footer section {
    margin-bottom:2rem;
}

.footer h5 {
    border-bottom:1px dashed #fff;
}

.footer ul, .footer address, .footer i {
    margin:1rem 0;
}

.footer a {
    color:#fff;
    font-size:16px;
}

.footer address {
    font-style:normal;
}

.fa {
    padding:1rem;
}

/*** FOOTER 3WA ***/

footer {
    background-color:#444444;
    text-align:center;
}

footer a, footer p {
    color:#fff;
}

/*footer a {
    text-decoration:underline;
}*/

footer img {
    width:3rem;
}


/*********************
RESPONSIVE
*********************/

/*** DESKTOP ***/

@media screen and (min-width:980px) {
    .container {
        max-width:1400px;
        margin:0 auto;
    }
    
    /** HEADER **/
    
    .header .container {
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        width:75%;
    }
    
    .logo-titre-header {
        display:flex;
        align-items:center;
        width:100%;
    }
    
    .header nav {
        width:100%;
    }
    
    .header nav ul {
        display:flex;
        justify-content:space-around;
    }
    
    .header li {
        border-top:none;
    }
    
    /** ARTICLE HOME **/
    
    .article-home {
        display:flex;
        flex-direction:column;
    }
    .article-home .content {
        display:flex;
        flex-direction:row-reverse;
        align-items:center;
    }
    .article-home img {
        width:40%;
    }
    
    /** MENUS **/
    
    .home-menus {
        display:flex;
        flex-direction:row;
        gap:1.5rem;
    }
    
    /** FOOTER **/
    
    .footer .container {
        display:flex;
        justify-content:space-around;
        gap:2rem;
    }
    
    .footer .container > * {
        width:100%;
    }

}


/*** TABLET ***/

@media screen and (min-width:780px) and (max-width:979px) {
    
    /** HEADER **/
    
    .header nav {
        width:100%;
        background-color:#ebe3db;
    }
    
    .header nav ul {
        display:flex;
        justify-content:space-around;
    }
    
    .header li {
        border-top:none;
    }

}