main {
    background: var(--background);
}

section .section-container {
    max-width: 1000px;
    background: white;
}

h2 i {
    color: var(--brown);
}


/* Hero Section */
#heroSection .section-container {
    padding-top: 0;
    padding-bottom: 0;
}

#heroSection .intro {
    text-wrap: initial;
}

#heroSection .post-infos {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 20px;
    color: var(--green-dark);
    align-items: center;
    border-bottom: var(--border);
    padding-bottom: 10px;
    justify-content: space-between;
}

#heroSection .post-infos > div {
    display: flex;
    gap: 5px;
    align-items: center;
}

#heroSection .post-date {
    display: flex;
    align-items: center;
    gap: 5px;
}

#heroSection #summary {
    background: var(--brown);
    padding: 20px;
    border-radius: var(--medium-radius);
    box-shadow: var(--small-shadow);
}

#heroSection #summary h2 {
    margin-bottom: 10px;
}

#heroSection #summary h2 i {
    color: var(--tertiary-bg);
}

#heroSection #summary nav ul {
    list-style-type: disc;
    padding-left: 15px;
}

#heroSection #summary nav li {
    transition: all 0.3s ease;
}

#heroSection #summary nav a {
    color: black;
    width: fit-content;
    line-height: 1.4;
    margin-top: 10px;
}

#heroSection #summary nav a:hover {
    color: white;
}

#heroSection #summary nav li:has(a:hover) {
    color: white;
}


/* Section Comparatif */
#comparatif article h3 {
    text-wrap: balance;
}

#comparatif article ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 5px;
}

#comparatif article .avantages li i {
    color: green;
}

#comparatif article .inconvenients li i {
    color: red;
}

#comparatif article li p {
    display: flex;
    gap: 5px;
    align-items: first baseline;
}

#produits {
    margin-top: 20px;
}

#produits .articles {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

#produits article {
    padding-bottom: 25px;
    /*background: var(--tertiary-bg);*/
    background: #F8EDDBA3;
    border: none;
}

#produits .product-header figure {
    background: white;
    border-radius: 10px;
    box-shadow: var(--small-shadow);
    overflow: hidden;
    margin-bottom: 20px;
}

#produits .product-header img {
    height: 200px;
    object-fit: contain;
}

#produits .title-container {
    padding-left: 15px;
    position: relative;
    margin-bottom: 10px;
}

#produits .title-container:after {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    height: 100%;
    background: var(--green-dark);
    width: 5px;
    border-radius: var(--low-radius);
}

#produits .details {
    margin-bottom: 20px;
}

#produits .details .desc {
    text-align: justify;
}

#produits .details .desc strong {
    font-weight: 700;
    color: var(--green-dark);
}

#produits .points {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#produits .conclusion {
    margin-top: 20px;
}

#produits .conclusion h4 {
    margin-bottom: 5px;
}

#produits .conclusion div {
    text-align: justify;
}

#produits .conclusion div strong {
    font-weight: 700;
    color: var(--green-dark);
}

#produits .ctas {
    margin-top: 20px;
}

#produits .ctas h4 {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    position: relative;
}

#produits .ctas h4:after {
    position: absolute;
    content: " ";
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    height: 4px;
    width: 100px;
    background: var(--green-dark);
    border-radius: 10px;
}

#produits .ctas h4 i {
    color: var(--green-dark);
}

#produits .ctas nav {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#produits .ctas nav a {
    width: 100%;
}

#produits .ctas p {
    margin-top: 20px;
    text-align: center;
}


/* Recommandation, Guide, Conclusion Sections */
#introduction .section-container {
    padding-bottom: 0;
}

#recommandation .section-container,
#guide .section-container,
#conclusion .section-container {
    padding-top: 0;
}

#guide .section-container > div {
    background: var(--brown);
}

#recommandation h2,
#introduction h2,
#guide h2,
#conclusion h2 {
    margin-bottom: 10px;
    text-wrap: initial;
}

#guide h2 i {
    color: var(--tertiary-bg);
}

#recommandation .text,
#introduction .text,
#guide .text,
#conclusion .text,
#comparatif .transition {
    text-wrap: initial;
    text-align: justify;
}

#recommandation ul,
#introduction ul,
#guide ul,
#conclusion ul,
#comparatif .transition ul {
    list-style-type: disc;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#recommandation strong,
#introduction strong,
#guide strong,
#conclusion strong,
#comparatif .transition strong {
    font-weight: 700;
    color: var(--green-dark);
}

#guide strong {
    color: var(--tertiary-bg);
}

#recommandation p,
#introduction p,
#guide p,
#conclusion p {
    margin-top: 10px;
}


/* Navigation Section */
#navSection .section-container {
    padding-top: 0;
}

#navSection .cat-nav {
    background: var(--kaki);
    border: none;
}

#navSection .cat-nav h2 {
    color: white;
}

#navSection .cat-nav h2 i {
    color: var(--brown);
}

#navSection ul {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    gap: 10px;
}

#navSection li a {
    width: 100%;
    background: var(--tertiary-bg);
    padding: 10px;
    border-radius: var(--medium-radius);
}

#navSection li h3 {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

#navSection .cat-nav li a:hover h3 {
    color: var(--brown);
}

#navSection .btn {
    margin-top: 30px;
    width: 100%;
}

#navSection .last-articles {
    margin-top: 30px;
}

#navSection .last-articles li a:hover h3{
    color: var(--green-dark);
}


    /* Pad Version */
    @media screen and (min-width: 768px) {
        /* Hero Section */
        #heroSection #summary {
            padding: 25px;
        }


        /* Section Comparatif */
        #produits .articles {
            gap: 30px;
        }

        #produits article {
            padding: 25px;
        }

        #produits .product-header {
            margin-bottom: 25px;
            display: flex;
            justify-content: space-between;
            gap: 25px;
        }

        #produits .product-header figure {
            width: 45%;
            margin: 0;
        }

        #produits .product-header img {
            /*height: 225px;*/
            height: 100%;
        }

        #produits .details {
            /*width: 55%;*/
            width: 100%;
            margin: 0;
        }

        #produits .title-container {
            margin-bottom: 15px;
        }

        #produits .points {
            flex-direction: row;
            justify-content: space-between;
            gap: 40px;
            margin-top: 25px;
        }

        #produits .points > div {
            width: 50%;
        }

        #produits .conclusion {
            margin-top: 25px;
        }

        #produits .ctas {
            margin-top: 25px;
        }

        #produits .ctas nav a {
            width: 225px;
            margin: 0 auto;
        }


        /* Recommandation, Guide, Conclusion Sections */
        #guide .section-container > div {
            padding: 25px;
        }


        /* Navigation Section */
        #navSection .cat-nav,
        #navSection .latest-nav {
            padding: 25px;
        }

        #navSection .last-articles {
            margin-top: 40px;
        }

        #navSection ul {
            margin-top: 25px;
            gap: 15px;
        }

        #navSection li a {
            padding: 15px;
        }

        #navSection .btn {
            margin-top: 35px;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
        }
    }


        /* Desktop Version */
        @media screen and (min-width: 992px) {
            main {
                padding-top: 3rem;
                padding-bottom: 3rem;
            }

            #nav-breadcrumb .section-container {
                border-top-left-radius: 50px;
                border-top-right-radius: 50px;
            }

            /* Hero Section */
            #heroSection #summary {
                padding: 30px;
            }


            /* Section Comparatif */
            #comparatif article ul {
                margin-top: 10px;
                gap: 10px;
            }

            #produits .articles {
                gap: 40px;
            }

            #produits article {
                padding: 30px;
            }

            #produits .product-header {
                margin-bottom: 30px;
                gap: 30px;
            }

            #produits .details figure {
                width: 40%;
            }

            #produits .details img {
                /*height: 250px;*/
            }

            #produits .title-container {
                margin-bottom: 20px;
            }

            #produits .points {
                margin-top: 30px;
            }

            #produits .conclusion {
                margin-top: 30px;
            }

            #produits .ctas {
                margin-top: 40px;
            }


            /* Recommandation, Guide, Conclusion Sections */
            #guide .section-container > div {
                padding: 30px;
            }


            /* Navigation Section */
            #navSection .section-container {
                border-bottom-left-radius: 50px;
                border-bottom-right-radius: 50px;
            }

            #navSection .last-articles {
                margin-top: 50px;
            }

            #navSection .cat-nav,
            #navSection .latest-nav {
                padding: 30px;
            }

            #navSection ul {
                margin-top: 30px;
                gap: 20px;
            }

            #navSection li a {
                padding: 20px;
            }

            #navSection .btn {
                margin-top: 40px;
            }
        }