/*
Theme Name: Les Éditions du Colporteur
Theme URI: https://www.exemple.com
Author: Clemence Massoulie
Author URI: https://www.exemple.com
Description: Thème personnalisé pour le site des Éditions du Colporteur.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: colporteur
*/

/* VARIABLES */
    :root {
        /* COULEURS */
        --foretauvergne: #274a3c;
        --neigedesvolcans: #ffffff;
        --basalte: #1c1d1d;
        --ordelimagne: #ffd400;
        --chataigneducezalier: #42240d;
        --eaudevolvic: #457cb6;
        --braisedespuys: #B70303;
        --brumedusancy : #EBEBEB;

        /* FONTS */
        --richmond: richmond-display, sans-serif;
        --basic: basic-sans, sans-serif;

        /* STYLE */
        --whiteborder: 2px solid var(--neigedesvolcans);
        --backgroundsize: 4rem;
    }

/* BASIQUE */
    * {
        box-sizing: border-box;
        font-family: var(--basic);
        font-weight: 400;
        font-style: normal;
        margin: 0;
        padding: 0;
    }

 body {
        color: var(--basalte);
        overflow-x: hidden;
        background-color: var(--neigedesvolcans);
    }

    a {
        color: var(--foretauvergne);
        text-decoration: none;
        font-weight: 600;
        padding: .5rem;
        position: relative;
        text-align: center;
        
        &:after {
            background: none repeat scroll 0 0 transparent;
            bottom: 0;
            content: "";
            display: block;
            height: 2px;
            left: 50%;
            position: absolute;
            background: var(--foretauvergne);
            transition: width 0.3s ease 0s, left 0.3s ease 0s;
            width: 0;
        }

        &:hover:after {
            width: 100%; 
            left: 0; 
        }
    }

    .none:after,
    .dernier a:after { /* Enlève l'effet du hover des liens */
        background: none;
        content: "";
        height: 0;
        left: 0;
        position: inherit;
    }

    .link {
        color: var(--foretauvergne);
        padding: 0;
        transition: color .3s ease-in-out;

        &:hover {
            color: var(--basalte);
        }
    }

    #backtotop {
        background-color: var(--foretauvergne);
        aspect-ratio: 1/1;
        width: 3rem;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--neigedesvolcans);
        position: fixed;
        bottom: 3rem;
        right: 3rem;
        cursor: pointer;
        border: var(--whiteborder);
        opacity: 0;
        transition: 
            background-color .3s ease,
            opacity .3s ease
        ;
        z-index: 99;

        .fa-caret-up {
            font-size: 1.9rem;
        }

        &:hover {
            background-color: var(--basalte);
        }
    }

    #backtotop.visible {
        opacity: 1;
    }

    .glass {
        background: rgba(255, 255, 255, .23);
        box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
        backdrop-filter: blur(1px);
        border: 1px solid rgba(255, 255, 255, .22);
        color: var(--neigedesvolcans);
    }

    .btn,
    .single_add_to_cart_button,
    .forminator-button,
    .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button,
    .wp-block-button__link {
        background-color: var(--foretauvergne);
        color: var(--neigedesvolcans);
        border: none;
        padding: 1rem;
        cursor: pointer;
        font-weight: 600;
        font-size: 1rem;
        display: block;
        margin-top: 1rem;
        width: fit-content;
        transition: transform .3s ease-in-out;
        border-radius: 0;

        &:hover {
            transform: rotate(-5deg);
        }
    }

    .section {
        width: 100%;
        padding: 5% 20rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .autres-editeurs {
        padding-top: 0%
    }

    h2 {
        font-size: 2.5rem;
        font-family: var(--richmond);
    }

    #carte {
        scroll-margin-top: 16rem;
    }

    .separation {
        padding: 2rem 0;
        background-image: url('assets/img/motif2.svg');
        background-color: var(--foretauvergne);
        background-size: var(--backgroundsize);
        background-position: center;
    }

    p {
        font-size: 1.2rem;
        text-align: justify;
        hyphens: auto;

        em {
            font-style: italic;
        }
    }

    .text {
        margin-top: 3rem;
        hyphens: auto;

        p:not(:last-of-type) {
            margin-bottom: 1rem;
        }

        h2 {
            font-weight: 900;
            color: var(--foretauvergne);
            margin-bottom: 1rem;
            margin-top: 3rem;
            font-family: var(--richmond);

            &:first-of-type {
                margin-top: 0;
            }

            &:last-of-type {
                margin-bottom: 0;
            }
        }

        h3 {
            font-weight: 600;
            color: var(--basalte);
            margin-bottom: 1rem;
            margin-top: 3rem;
            font-family: var(--basic);
            font-size: 1.5rem;
        }

        strong {
            font-weight: 600;
        }
    }

/* HEADER */
    header {
        position: sticky;
        width: 100%;
        top: 0;
        z-index: 99;
    }

    nav {
        width: 100%;
        color: var(--foretauvergne);
        font-size: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 2rem;
        background-color: var(--neigedesvolcans);

        .burger {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 20px;
            cursor: pointer;
            z-index: 1001;

            span {
                display: block;
                height: 3px;
                background: var(--foretauvergne);
                border-radius: 2px;
                transition: 0.3s ease;
            }

            &.active {
                span:nth-child(1) {
                    transform: rotate(45deg) translate(5px, 5px);
                }

                span:nth-child(2) {
                    opacity: 0;
                }         
                
                span:nth-child(3) {
                    transform: rotate(-45deg) translate(7px, -7px);
                }            
            }
        }

        ul {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin: 0;
            width: 100%;
        }

        #nav1 {
            justify-content: flex-start;
            flex: 0;
            gap: 2rem;
            white-space: nowrap;

            li:last-of-type {
                a {
                    background-color: var(--foretauvergne);
                    color: var(--neigedesvolcans);
                    padding: 1rem;
                    transition: background-color .3s ease-in-out;
                    display: block;
                    white-space: nowrap;

                    &:hover {
                        background-color: var(--basalte);
                    }
                }
            }
        }

        #nav2 {
            display: flex;
            justify-content: center;
            flex: 1;
        }

        #nav3 {
            justify-content: flex-end;
            flex: 0;
            gap: 2rem;

            li:last-of-type {
                a {
                    background-color: var(--chataigneducezalier);
                    color: var(--neigedesvolcans);
                    padding: 1rem;
                    transition: background-color .3s ease-in-out;
                    display: block;
                    white-space: nowrap;

                    &:hover {
                        background-color: var(--basalte);
                    }
                }
            }        
        }

        li {
            text-align: center;

            a {
                display: flex;
                align-items: center;
                color: inherit;

                .icon {
                    width: auto;
                    height: 3vh;
                }

                span {
                    margin-left: 1rem;
                }
            }

            span {
                font-weight: 600;
            }
        }

        #logo {
            width: 20vw;
            height: auto;
        }
    }

    .has-submenu {
        position: relative;

        &:hover .submenu {
            max-height: 300px;
            opacity: 1;
            pointer-events: auto;
            animation: bounceDown 0.5s ease forwards;

            &::before,
            &::after {
            transform: scale(1);
            }
        }

        .submenu {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 95%;
            left: 0;
            background-color: var(--foretauvergne);
            min-width: 200px;
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            transform: translateY(-10px);
            transition: opacity 0.4s ease, max-height 0.4s ease;
            z-index: 1000;
            pointer-events: none;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

            &::before,
            &::after {
            content: "";
            position: absolute;
            background-color: var(--foretauvergne);
            transition: transform 0.4s ease;
            pointer-events: none;
            height: 2px;
            width: 100%;
            left: 0;
            }

            &::before {
            top: 0;
            transform: scaleX(0);
            transform-origin: left;
            }

            &::after {
            bottom: 0;
            transform: scaleX(0);
            transform-origin: right;
            }

            li {
            width: 100%;

            a {
                display: block;
                padding: 0.75rem 1rem;
                text-decoration: none;
                color: var(--neigedesvolcans);
                background-color: var(--foretauvergne);
                transition: background-color .3s ease;

                &:hover {
                background-color: var(--basalte);
                }
            }
            }
        }
    }

    @keyframes bounceDown {
    0% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(5px);
    }
    70% {
        transform: translateY(-2px);
    }
    100% {
        transform: translateY(0);
    }
    }


    #nav4 {
            list-style: none;
            display: flex;
            align-items: center;
            margin: 0;
            width: 100%;
            justify-content: flex-end;
            background-color: var(--basalte);
            font-size: .9rem;

        li {
            text-align: center;

            a {
                display: flex;
                align-items: center;
                color: var(--neigedesvolcans);
                transition: background-color .3s ease-in-out;
                padding: .5rem 1rem;           
                white-space: nowrap; 

                &:hover {
                    background-color: var(--foretauvergne);
                }

                .icon {
                    width: auto;
                    height: 2vh;
                }

                img {
                    margin-right: 1rem;
                }
            }
        }
    }

/* RECHERCHE */
    .search {
        background-image: url("assets/img/motif2.svg");
        background-color: var(--foretauvergne);
        background-size: var(--backgroundsize);
        background-position: center;
        display: flex;
        justify-content: center;
        padding: .9rem;
        position: relative;

        a {
            height: 100%;
            position: absolute;
            top: 0;
            left: 2rem;
            display: flex;
            align-items: center;
            transition: transform .3s ease-in-out;

            img {
                height: 100%;
                width: 1.9rem;
            }

            &:hover {
                transform: rotate(-5deg);
            }
        }

        .search-wrapper {
            width: 60%;
            max-width: 800px;
            position: relative;

            input {
                height: 4vh;
                width: 100%;
                border-radius: 25px;
                padding: 1rem 3.5rem 1rem 1.5rem;

                &::placeholder {
                    color: var(--neigedesvolcans);
                }
            }

            button {
                position: absolute;
                right: 1rem;
                top: 50%;
                transform: translateY(-50%);
                background: none;
                border: none;
                cursor: pointer;
                padding: 0;

                img {
                    height: 24px;
                    width: 24px;
                    object-fit: contain;
                }            
            }
        }
    }

/* WRAPPER */
    .wrapper {
        width: 100%;

        .hero-carousel {
            position: relative;
            overflow: hidden;
            height: 450px;
            width: calc(100% - 6rem);
            margin: 3rem auto 0 auto;
            border-radius: 15px;

            .carousel-track {
                display: flex;
                transition: transform .5s ease-in-out;
                height: 100%;
            }

            .slide {
                min-width: 100%;
                background-size: cover;
                background-position: center;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding: 0 10rem;

                h1 {
                    font-weight: 900;
                    color: var(--neigedesvolcans);
                    font-size: 3rem;
                    text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
                }

                h2 {
                    font-weight: 600;
                    color: var(--neigedesvolcans);
                    font-size: 2rem;
                    font-family: var(--basic);
                    text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
                }                
            }

            .carousel-nav {
                position: absolute;
                width: 100%;
                top: 50%;
                transform: translateY(-50%);
                display: flex;
                justify-content: space-between;
                padding: 0 2rem;
                z-index: 2;
            }

            button  {
                background-color: var(--foretauvergne);
                color: white;
                border: none;
                font-size: 2rem;
                padding: .5rem 1rem;
                cursor: pointer;
                line-height: 1;
                transition: background-color .3s ease-in-out;

                &:hover {
                    background-color: var(--basalte);
                }
            }

        }

        .section {
            .titre {
                color: var(--foretauvergne);
                font-weight: 900;
                text-align: center;
                margin: 0 .5rem;
            }

            .ligne {
                background-color: var(--foretauvergne);
                height: 3px;
                display: block;
                width: 25%;
            }

            .book {
                display: flex;
                flex-direction: column;
                height: 660px;
                width: 340px;
                justify-content: flex-start;
                align-items: flex-start;
                position: relative;

                &:nth-of-type(4) {
                    display: none;
                }

                .livre {
                    width: 340px;
                    height: 440px;
                    transition: height .3s ease-in-out;
                    z-index: 1;
                    position: relative;
                    overflow: hidden;
                    border-bottom: 3px solid var(--chataigneducezalier);
                    margin-bottom: 1rem;

                    a {
                        padding: 0;
                    }

                    img {
                        height: 440px;
                        width: 100%;
                        object-fit: cover;
                        transition: height 0.5s ease;
                        z-index: 99;
                        position: relative;

                        &:hover {
                            height: 385px;
                        }
                    }

                    .info {
                        margin-top: 1rem;
                        position: absolute;
                        bottom: 1rem;
                        opacity: 0;
                        transform: translateY(30px);
                        transition: 
                            opacity .3s ease-in-out,
                            transform .3s ease-in-out
                        ;

                        p {
                            font-size: 1rem;
                        }
                    }

                    &:hover .info {
                        opacity: 1;
                        transform: translateY(0);
                    }

                }

                .titre_livre {
                    text-align: center;
                    font-weight: 600;
                    color: var(--foretauvergne);
                    font-size: 1.5rem;
                    width: 100%;
                    height: 4rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .categoryname{
                    text-align: center;
                    font-size: 1rem;
                    position: absolute;
                    bottom: 4rem;

                    a {
                        font-weight: 400;
                    }
                }
                
                .btn {
                    margin: 0 auto;
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                }
            }

            .breadcrumb {
                justify-content: flex-start;
                padding: 0;
            }

            .livre {
                display: flex;
                gap: 68px;
                margin-top: 3rem;

                .infolivre {
                    width: fit-content;
                    display: flex;
                    flex-direction: column;
                    gap: 25px;

                    .img {
                        width: 100%;
                        height: auto;
                        overflow: hidden;
                        border: 5px solid var(--basalte);

                        a {
                            display: block;
                            padding: 0;
                        }               
                        
                        img {
                            width: 15rem;
                            height: auto;
                            display: block;
                            transition: transform .5s cubic-bezier(0.25, 0.1, 0.25, 1);

                            &:hover {
                                transform: scale(1.2);
                            }
                        }                    
                    }   
                    
                    .btn {
                        width: 100%;
                    }

                    .theme {
                        border-bottom: 2px solid var(--basalte);
                        padding-bottom: 1.5rem;

                        .product-tags {
                            list-style-type: none;

                            li {
                                &:first-of-type {
                                    margin-top: .5rem;
                                }

                                a {
                                    padding: 0;
                            }
                            }
                        }
                    }

                    p, a {
                        font-size: 1rem;
                    }     
                    
                    span {
                        font-weight: 600;
                    }

                    .description {
                        p:not(:last-of-type) {
                            margin-bottom: .5rem;
                        }
                    }


                }

                .resume {
                    h1 {
                        color: var(--foretauvergne);
                        font-weight: 900;
                        font-family: var(--richmond);
                    }

                    h2 {
                        color: var(--basalte);
                        font-weight: 900;
                        font-size: 1.7rem;
                        margin-bottom: 1rem;
                        margin-top: 2rem;
                        font-family: var(--richmond);
                        hyphens: auto;
                    } 

                    h3 {
                        color: var(--basalte);
                        font-weight: 600;
                        font-size: 1.4rem;
                        margin-top: 2rem;
                        margin-bottom: .5rem;
                    }

                    .sous-titre {
                        color: var(--basalte);
                        font-weight: 600;
                        font-size: 1.2rem;
                        margin-top: .5rem;
                        font-family: var(--basic);
                    }                    

                    .auteur {
                        margin-top: 1rem;
                    }

                    a {
                        padding: 0;
                    }
                }

                .commande {
                    .stock {
                        font-size: 1rem;
                    }

                    .rupture {
                        background-color: var(--braisedespuys);
                        color: var(--neigedesvolcans);
                        font-size: .9rem;
                        padding: 1rem;
                        text-align: center;
                        margin-bottom: 1rem;
                    }

                    .out-of-stock {
                        display: none;
                    }

                    bdi {
                        font-family: var(--richmond);
                        color: var(--foretauvergne);
                        font-size: 2rem;
                        font-weight: 900;
                    }

                    .single_add_to_cart_button {
                        white-space: nowrap;
                    }

                    .qtytext {
                        font-size: 1rem;
                        margin-top:  3rem;
                        margin-bottom: .8rem;
                    }

                    .quantity {
                        input {
                            box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
                            border: none;
                            background-color: var(--neigedesvolcans);
                            text-align: center;
                            padding: .5rem 0;
                            width: 100%;
                            margin: 0;
                            margin-bottom: 1rem;
                        }
                    }

                    .commerces {
                        margin-top: 3rem;
                        background-color: var(--chataigneducezalier);
                        padding: 1rem;

                        .points-de-vente {
                            a {
                                color: var(--neigedesvolcans);
                                font-family: var(--basic);
                                font-size: 1rem;
                                font-weight: 400;
                                padding-left: 0;
                            }

                            p {
                                font-size: 1rem;
                                hyphens: auto;
                                text-align: left;
                            }

                            .commerces-sous-titre {
                                font-size: .8rem;
                                color: var(--braisedespuys);
                                font-weight: 900;
                                margin-top: 1rem;
                            }

                            .liste-des-pdv {
                                list-style-type: none;
                                background-color: var(--neigedesvolcans);
                                box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
                                height: 300px;
                                overflow-y: scroll;
                                margin: 1rem 0;

                                li:not(:last-of-type) {
                                    padding-bottom: 1rem;
                                    border-bottom: 2px solid var(--basalte);
                                }

                                li {
                                    padding: 1rem 1rem 0 1rem;
                                    cursor: pointer;
                                }

                                li {
                                    background-color: var(--neigedesvolcans);
                                    color: var(--basalte);
                                    transition: background-color .3s ease-in-out;

                                    &:hover {
                                        background-color: var(--foretauvergne);
                                        color: var(--neigedesvolcans);
                                    }
                                }
                                
                                .nom-pdv {
                                    font-weight: 600;
                                }

                                .ville-pdv {
                                    font-size: .9rem;
                                }
                            }

                            .scroll {
                                background-color: var(--foretauvergne);
                                width: 100%;
                                display: block;
                                text-align: center;
                                color: var(--neigedesvolcans);
                                top: 0;
                                padding: .3rem 0;
                                transition: background-color .3s ease-in-out;
                                cursor: pointer;

                                &:hover {
                                    background-color: var(--basalte);
                                }
                            }
                        }
                    }
                }

                .commande:has(.rupture) .qtytext,
                .commande:has(.out-of-stock) .qtytext {
                    display: none;
                }
            }

            .videoauteur {
                display: flex;
                flex-direction: column;
                flex-basis: 100%;
                align-items: center;

                h2 {
                    color: var(--foretauvergne);
                    font-weight: 900;   
                    align-self: flex-start;                 
                }            

                .video {     
                    margin-top: 3rem;  
                    width: 100%;
                    
                    iframe {
                        width: 100%;
                        height: 600px;
                    }
                }
            }

            .avis-section {
                width: 100%;

                h2 {
                    margin: 0;
                    text-align: left;
                }

                h2:last-of-type {
                    margin-top: 3rem;
                    padding-top: 3rem;
                    border-top: 2px solid var(--basalte);
                }

                .btn {
                    margin: 0 auto;
                    margin-top: 3rem;
                }

                .comment-form {
                    display: flex;
                    flex-direction: column;

                    label, legend {
                        font-size: .9rem;
                    }

                    p {
                        text-align: left; 
                    }

                    .comment-form-type {
                        order: 1;
                    }

                    .comment-form-author {
                        order: 2;
                    }

                    .comment-form-libraire-infos {
                        order: 3;
                        justify-content: space-between;

                        .comment-form-ville,
                        .comment-form-departement {
                            width: calc(50% - 20px);
                        }
                    }

                    .comment-form-email {
                        order: 4;
                    }

                    .comment-form-url {
                        order: 5;
                    }

                    .comment-form-cookies-consent {
                        order: 6;

                        label {
                            font-size: .8rem;
                        }
                    }

                    .star-rating {
                        order: 7;
                        display: flex;
                        flex-direction: row-reverse;
                        justify-content: flex-end;
                        gap: .5rem;
                        border: none;
                        cursor: pointer;

                        input[type="radio"] {
                            display: none;
                        }

                        label {
                            cursor: pointer;

                            .star-svg path {
                                fill: none;
                                stroke: #FFD400;
                                transition: fill 0.2s ease;
                            }

                            &:hover .star-svg path {
                                fill: #FFD400;
                            }

                            &:hover ~ label {
                                .star-svg path {
                                    fill: #FFD400;
                                }
                            }
                        }

                        input[type="radio"]:checked {
                            + label .star-svg path {
                             fill: #FFD400;
                            }

                            + label ~ label {
                            .star-svg path {
                                fill: #FFD400;
                            }
                            }
                        }
                    }

                    .comment-form-comment {
                        order: 8;
                    }

                    .form-submit {
                        order: 9;
                        align-self: center;
                    }

                    input, select, textarea {
                        box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
                        border: none;
                        background-color: var(--neigedesvolcans);
                        text-align: left;
                        padding: .5rem;
                        width: 100%;
                        margin: .9rem 0 1rem 0;
                    }

                    #wp-comment-cookies-consent {
                        width: auto;
                        margin-right: .5rem;
                    }

                    .submit {
                        background-color: var(--foretauvergne);
                        color: var(--neigedesvolcans);
                        border: none;
                        padding: 1rem;
                        cursor: pointer;
                        font-weight: 600;
                        font-size: 1rem;
                        display: block;
                        margin-top: 1rem;
                        width: fit-content;
                        transition: transform .3s ease-in-out;

                        &:hover {
                            transform: rotate(-5deg);
                        }                        
                    }                    
                }

                .modal-content {
                    width: 40%;

                    h3 {
                        margin-bottom: 1rem;
                    }
                }                

                .avis-grid {
                    margin-top: 2rem;
                    display: flex;
                    flex-wrap: wrap;
                    gap: 40px;

                    .avis {
                        width: calc(50% - 20px);

                        strong {
                            font-weight: 600;
                        }

                        time {
                            font-size: .9rem;
                        }

                        .stars {
                            margin: .5rem 0;
                        }
                    }
                }
            }

            .propos {
                width: 100%;

                .apropos {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 5rem;

                    .bloc-auteur,
                    .livres-auteur {
                        width: calc(50% - 2.5rem);
                    }

                    .bloc-auteur {
                        border-right: 2px solid var(--foretauvergne);
                        padding-right: 5rem;

                        h2 {
                            font-weight: 900;
                            color: var(--foretauvergne);
                            margin-bottom: 2rem;
                        }

                        img {
                            width: 100%;
                            margin-bottom: 2rem;
                            border: 5px solid var(--basalte);
                        }

                        div {
                            p {
                                a {
                                    padding: 0;
                                }
                            }
                        }
                    }

                    .livres-auteur {
                        h2 {
                            font-weight: 900;
                            color: var(--foretauvergne);
                            margin-bottom: 2rem;
                        }

                        .grid-livres {
                            list-style-type: none;
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: center;
                            gap: 50px;

                            .memeauteur {
                                flex: 0 0 calc(50% - 25px);
                                max-width: calc(50% - 25px);
                                box-sizing: border-box;

                                .img {
                                    width: 100%;
                                    height: auto;
                                    overflow: hidden;
                                    border-bottom: 2px solid var(--basalte);
                                    margin-bottom: 1rem;

                                    a {
                                        display: block;
                                        padding: 0;

                                        img {
                                            width: 100%;
                                            height: auto;
                                            transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);

                                            &:hover {
                                                transform: scale(1.2);
                                            }
                                        }
                                    }
                                }

                                h3 {
                                    color: var(--foretauvergne);
                                    text-align: center;
                                    font-weight: 900;
                                }

                                .prix {
                                    text-align: center;
                                    font-size: 1rem;
                                    margin-top: 0.5rem;
                                }

                                .btn {
                                    width: 100%;
                                }
                            }
                        }

                    }
                }
            }

            .detour {
                .grid-livres {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    margin-top: 3rem;

                    .detourwrap {
                        max-width: 30%;

                        &:has(.book:nth-of-type(2)) .book:last-of-type {
                            display: none;
                        }

                        .img {
                            width: 100%;
                            height: auto;
                            overflow: hidden;
                            border-bottom: 2px solid var(--basalte);
                            margin-bottom: 1rem;

                            a {
                                display: block;
                                padding: 0;

                                img {
                                    width: 100%;
                                    height: auto;
                                    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);

                                    &:hover {
                                        transform: scale(1.2);
                                    }
                                }
                            }
                        }

                        h3 {
                            text-align: center;
                            color: var(--foretauvergne);
                            font-weight: 900;
                        }

                        .prix {
                            text-align: center;
                            font-size: 1rem;
                            margin-top: 0.5rem;
                        }

                        .btn {
                            width: 100%;
                        }
                    }
                }
            }

            .catproduct {
                h1 {
                    margin: 0;
                    margin-bottom: 3rem;
                    font-family: var(--richmond);
                    font-size: 2.5rem;
                    text-align: left;
                }

                .bioauteur {
                    margin-bottom: 3rem;
                    
                    .img {
                        height: 25rem;
                        overflow: hidden;
                        border: 5px solid var(--basalte);
                        margin-bottom: 3rem;

                        img {
                            display: block;
                            width: 100%;
                        }
                    }

                    p {
                        a {
                            padding: 0;
                        }
                    } 
                }

                .filters {
                    width: 25%;
                }

                .catalogue {
                    display: flex;
                    flex-direction: row;
                    gap: 6rem;

                    .bookwrap {
                        gap: 41px;
                        width: 75%;

                        .catwrap {
                            width: calc(33% - 41px);

                            .categoryname {
                                a {
                                    font-weight: 400;
                                    font-size: 1rem;
                                }
                            }
                        }
                    }

                    .bookwrap.autres-editeurs {
                        width: 100%;
                    }
                }

                .btn {
                    width: 100%;
                }

                h2 {
                    margin: 0;
                    margin-bottom: 3rem;
                    text-align: left;
                }

                .woocommerce-ordering {
                    .orderby {
                        box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
                        border: none;
                        background-color: var(--neigedesvolcans);
                        text-align: center;
                        padding: .5rem 0;
                        width: 100%;
                        margin: 0;
                        margin-bottom: 3rem;
                        appearance: none;
                    }
                }

                .bookwrap {
                    display: flex;
                    flex-wrap: wrap;
                    width: 100%;
                    gap: 50px;
                    justify-content: space-between;

                    .catwrap {
                        width: 30%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;                        

                        .img {
                            width: 100%;
                            height: auto;
                            overflow: hidden;
                            border-bottom: 2px solid var(--basalte);
                            margin-bottom: 1rem;

                            a {
                                display: block;
                                padding: 0;
                                transition: transform .5s cubic-bezier(.25, .1, .25, 1);                                

                                &:hover {
                                    transform: scale(1.2);
                                }

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

                        h3 {
                            color: var(--foretauvergne);
                            text-align: center;
                            font-weight: 900;
                        }

                        .prix {
                            text-align: center;
                            font-size: 1rem;
                            margin-top: .5rem;
                        }

                        .btn {
                            width: 100%;
                        }
                    }                    
                }

                .auteurpage {
                    margin-bottom: 1rem;

                    a {
                        font-weight: 400;
                        font-size: 1rem;                        
                    }
                }
            }

            .categories-block {
                display: flex;
                justify-content: space-evenly;
                gap: 1rem;
                width: 100%;
                margin-bottom: 3rem;

                .cat-link {
                    width: 100%;
                }
            }     
            
            .block-posts {
                display: flex;
                justify-content: flex-start;
                
                .sepPost {
                    display: none;
                    padding: .8rem 0;
                    margin: 3rem 0;                    
                }

                .posts {
                    display: flex;
                    flex-direction: column;
                    gap: 3rem;
                    width: 60%;

                    .post {
                        display: flex;
                        flex-direction: column;
                        background-color: var(--cat-bg);
                        width: 100%;
                        padding: 1rem;

                        .thumb {
                            padding: 0;
                            overflow: hidden;
                            height: 20rem;
                            margin-bottom: 1rem;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: center;
                            }
                        }

                        .postsinfo {
                            background-color: var(--neigedesvolcans);
                            padding: 1rem;

                            h2 {
                                text-align: left;
                                margin: 0;
                                font-size: 2rem;

                                a {
                                    font-family: var(--richmond);
                                    padding: 0;
                                    font-weight: 900;
                                }
                            }

                            .text {
                                margin-top: 1rem;
                            }

                            .date {
                                font-size: .9rem;
                            }
                        }

                        .btn {
                            background-color: white;
                            color: var(--basalte);
                            align-self: flex-end;
                        }
                    }

                    nav {
                        padding: 0;

                        .nav-links {
                            display: flex;
                            gap: 1rem;
                        }
                    }
                }

                .sidebar {
                    width: 24rem;
                    padding-left: 4rem;
                    margin-left: 4rem;
                    border-left: 2px solid var(--basalte);

                    h3 {
                        font-family: var(--richmond);
                        color: var(--foretauvergne);
                        font-weight: 900;
                        font-size: 1.5rem;
                        margin-bottom: 2rem;
                    }
                    .articlewrap {
                        display: flex;
                        gap: 3rem;
                        flex-direction: row;
                        flex-wrap: wrap;

                        .article {
                            display: flex;
                            flex-direction: column;
                            gap: 1rem;

                            .img {
                                width: 100%;
                                height: 170px;
                                overflow: hidden;
                                position: relative;
                                border: 5px solid var(--basalte);

                                a {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                    padding: 0;
                                    aspect-ratio: 2/1;

                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                        transition: transform .5s cubic-bezier(.25, .1, .25, 1);
                                        transform-origin: center center;

                                        &:hover {
                                            transform: scale(1.2);
                                        }
                                    }                                    
                                }
                            }

                            h4 {
                                color: var(--foretauvergne);
                                font-family: var(--basic);
                                font-weight: 900;
                                font-size: 1.2rem;
                            }

                            .suite {
                                width: 100%;
                                cursor: pointer;
                            }
                        }
                    }              
                    
                    .sidebarSep {
                        padding: .5rem 0;
                        margin: 3rem 0;
                    }

                    .tags {
                        .top-tags {
                            list-style-type: none;

                            li {
                                margin-bottom: 1rem;

                                &:last-of-type {
                                    margin: 0;
                                }

                                a {
                                    padding-left: 0;
                                }
                            }
                        }
                    }

                    .dedicaces {
                        p {
                            text-align: left;
                            margin-bottom: 1rem;

                            &:last-of-type {
                                margin-bottom: 3rem;
                            }
                        }

                        .dates {
                            .liste-dedicaces {
                                list-style-type: none;

                                li {
                                    margin-bottom: 2rem;
                                    padding-bottom: 2rem;
                                    border-bottom: 2px solid var(--basalte);

                                    &:last-of-type {
                                        margin-bottom: 0;
                                        padding-bottom: 0;
                                        border: 0;
                                    }

                                    &:first-of-type {
                                        margin-top: 2rem;
                                        padding-top: 2rem;
                                        border-top: 2px solid var(--basalte);
                                    }

                                    p {
                                        margin-bottom: 0;
                                        color: var(--foretauvergne);
                                        font-weight: 900;
                                        font-size: 1.2rem;
                                    }

                                    .commerce {
                                        color: var(--basalte);
                                        font-size: 1rem;
                                        font-weight: 600;
                                        margin-top: .5rem;
                                        margin-bottom: .2rem;
                                    }
                                }
                            }
                        }


                    }
                }
            }
        }

        .newsletter {
            background-color: var(--foretauvergne);
            padding: 5% 9rem 5% 0;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: bottom left;
            background-size: 34%;

            .section {
                padding: 0;
                padding-left: 46rem;
                row-gap: 30px;

                .ligne {
                    background-color: var(--neigedesvolcans);
                }

                .titre {
                    color: var(--neigedesvolcans);
                    font-size: 2rem;
                }

                p {
                    color: var(--neigedesvolcans);
                    font-weight: 400;
                    font-size: 1.2rem;

                    &:last-of-type {
                        margin-top: 1.3rem;
                    }
                }

                #mailpoet_form_3 {
                    form {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        row-gap: 30px;
                        margin-top: 3rem;

                        div {
                            width: 60%;

                            input {
                                height: 4vh;
                                width: 60%;
                                border: none;
                                padding: 1rem 3.5rem 1rem 1.5rem;
                            }

                            .btn {
                                background-color: var(--neigedesvolcans);
                                color: var(--basalte);
                                border-radius: 0;
                                width: fit-content !important;
                                border: none !important;
                                padding: 1rem 1rem 2rem 1rem !important;
                                margin: 0 auto !important;
                                margin-top: 1rem !important;                             
                            }             
                        }
                    }
                }
            }
        }

        .carnet {
            h2 {
                font-weight: 900;
                color: var(--foretauvergne);
                margin-bottom: 1rem;
            }

            .articlewrap {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                column-gap: 3rem;
                margin-top: 3rem;
                justify-content: space-between;

                .article {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    align-items: center;
                    justify-content: space-between;
                    width: 14rem;
                    text-align: center;
                    font-weight: 600;

                    .titrearticle {
                        font-weight: 600;
                    }

                    .suite {
                        font-weight: 900;
                    }

                    .img {
                        width: 100%;
                        height: 167px;
                        overflow: hidden;
                        position: relative;
                        border: 5px solid var(--basalte);

                        a {
                            display: block;
                            width: 100%;
                            height: 100%;
                            padding: 0;
                        }

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            transition: transform .5s cubic-bezier(.25, .1, .25, 1);
                            transform-origin: center center;

                            &:hover {
                                transform: scale(1.2);
                            }
                        }
                    }
                }
            }

            .btn {
                margin: 0 auto;
                margin-top: 3rem;
            }
        }

        .sentiers {
            width: 100%;

            .btn {
                margin: 3rem auto;
            }

            .grid {
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                justify-content: space-between;
                width: 100%;
                margin-top: 3rem;

                .carre {
                    display: flex;
                    flex: 1 1 150px;
                    padding: 9rem 1rem 1rem 1rem;
                    align-items: flex-end;
                    background-color: lightgray;
                    aspect-ratio: 2/1;
                    height: 3rem;
                    white-space: nowrap;
                }
            }
        }

        .manuscrit {
            background-color: var(--foretauvergne);
            color: white;

            .titre {
                color: white !important;
            }

            span {
                background-color: var(--neigedesvolcans) !important;
            }

            .text {
                display: flex;
                flex-direction: column;
                width: 100%;
            }

            .btn {
                margin: 0 auto;
                background-color: var(--neigedesvolcans);
                color: var(--basalte);
                margin-top: 3rem;
            }
        }

        .auteurs {
            h1 {
                margin: 0 !important;
                font-family: var(--richmond);
                font-size: 2.5rem;
                text-align: left;
            }

            .liste-auteurs {
                .grid-auteurs {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 30px;
                    list-style-type: none;

                    li {
                        width: calc((100% - 90px) / 4);
                        margin-top: 3rem;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        h2 {
                            font-size: 1.3rem;
                            font-family: var(--basic);
                            color: var(--foretauvergne);
                            margin-top: 1rem;
                            font-weight: 600;
                        }

                        .btn {
                            width: 100%;
                        }
                    }

                    .img {
                        width: 100%;
                        height: 180px;
                        overflow: hidden;
                        border: 5px solid var(--basalte);
                        background-color: var(--foretauvergne);
						display: block;

                        a {
                            display: block;
                            padding: 0;
                        }

                        img {
                            width: 100%;
                            height: auto;
                            transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);

                            &:hover {
                                transform: scale(1.2);
                            }
                        }
                    }
                }
            }

        }

        .resultats {
            flex-direction: column;
            align-items: flex-start;

            .titre {
                margin: 0 0 1rem 0;
                font-family: var(--richmond);
            }

            .result-count {
                font-size: 1.2rem;
                margin-bottom: 3rem;
            }

            .liste-resultats {
                width: 100%;

                .grid-resultats {
                    display: flex;
                    list-style-type: none;
                    gap: 5rem;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    .result-card {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        width: 25%;

                        .img {
                            width: 100%;
                            height: auto;
                            overflow: hidden;
                            border-bottom: 2px solid var(--basalte);
                            margin-bottom: 1rem;

                            a {
                            display: block;
                            padding: 0;            

                                img {
                                    width: 100%;
                                    height: auto;
                                    transition: transform .5s cubic-bezier(.25, .1, .25, 1);

                                    &:hover {
                                        transform: scale(1.2);                                        
                                    }
                                }
                            }
                        }

                        h2 {
                            text-align: center;
                            font-weight: 600;
                            font-size: 1.5rem;  
                            display: flex;
                            margin-bottom: 1rem;
                            
                            a {
                                padding: 0;
                            }
                        }

                        .meta {
                            display: flex;
                            flex-direction: column;
                            margin-bottom: 1rem;

                            .badge {
                                font-weight: 600;
                            }
                        }

                        .price {
                            margin-top: 1rem;
                            font-weight: 600;
                        } 
                    }
                } 
            }
        }

        .hero {
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 20rem;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            padding: 4rem 5rem;

            h1 {
                font-family: var(--richmond);
                font-weight: 900;
                color: var(--neigedesvolcans);
                font-size: 4rem;
                text-align: right;
                line-height: 3.8rem;
                width: 50%;
                text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
            }        
        }

        .separation.page {
            padding: 1rem 0;
        }

        .breadcrumb {
            display: flex;
            gap: 10px;
            width: 100%;

            .title {
                color: var(--basalte);
            }

            a {
                padding: 0;
            }

            span, a {
                padding-bottom: .5rem;
            }
        }

        .contact {
            .text {
                width: 100%;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;

                h2 {
                    text-align: left;
                    width: 100%;
                    margin-bottom: 2rem;
                }

                p {
                    width: 100%;
                }

                .min {
                    width: 100%;
                    text-align: left;
                    font-size: 1rem;
                    color: var(--braisedespuys);

                    a {
                        color: var(--braisedespuys);
                        padding: 0;
                        transition: color .3s ease-in-out;

                        &:hover {
                            color: var(--basalte);
                        }
                    }
                }

                .forminator-ui {
                    width: 70%;
                    margin-top: 3rem;

                    .forminator-row:not(:last-of-type) {
                        margin-bottom: 3rem;

                        .forminator-field {
                            .forminator-label {
                                color: var(--basalte) !important;
                                margin-bottom: 1rem !important;
                                font-size: 1.2rem !important;
                                font-family: var(--basic) !important;
                            }

                            input, textarea {
                                box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
                                border: none;
                                background-color: var(--neigedesvolcans);
                                text-align: left;
                                padding: .5rem;
                                width: 100%;
                                margin: 0;                            
                            }

                            .forminator-file-upload {
                                .forminator-button-upload {
                                    background-color: var(--basalte);
                                    margin: 0;
                                    margin-right: 1rem;
                                }

                                span {
                                    font-size: .9rem;
                                }
                            }
                        }
                    }
                }

                .forminator-button-submit {
                    margin: 0 auto;
                }                
            }
        }

        .pageS   {
            .text {
                .separation {
                    padding: .8rem 0;
                    margin: 3rem 0;
                }

                .wp-block-columns {
                    margin-top: 1rem;
                }

                p {
                    a {
                        padding: 0;
                    }
                } 

                iframe {
                    width: 100%;
                    margin: 3rem 0;
                }

                h2:first-of-type {
                    margin-top: 3rem;
                }

                .forminator-guttenberg {
                    .forminator-ui {
                        .forminator-row {
                            .forminator-field-group {
                                label {
                                    font-weight: 900;
                                    color: var(--foretauvergne);
                                    margin-bottom: 1rem;
                                    font-family: var(--richmond);
                                    font-size: 2.5rem;
                                }

                                .forminator-all-group-copies {
                                    background: none !important;
                                    box-shadow: none !important;
                                    padding: 0;
                                    display: flex;
                                    flex-wrap: wrap;
                                    width: 100%;
                                    justify-content: center;                                    

                                    .forminator-grouped-fields {
                                        width: 70%;
                                        
                                        .forminator-row {
                                            .forminator-field-text,
                                            .forminator-field-checkbox,
                                            .forminator-field-radio,
                                            .forminator-field-textarea,
                                            .forminator-field-name,
                                            .forminator-field-email,
                                            .forminator-field-phone,
                                            .forminator-field-address,
                                            .forminator-field-textarea,
                                            .forminator-field-upload,
                                            .forminator-field-url {
                                                .forminator-field {
                                                    .forminator-label {
                                                        font-size: 1.2rem;
                                                        font-family: var(--basic);
                                                        color: var(--basalte);
                                                        font-weight: 400;
                                                    }

                                                    input,
                                                    textarea {
                                                        box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
                                                        border: none;
                                                        background-color: var(--neigedesvolcans);
                                                        text-align: left;
                                                        padding: .5rem;
                                                        width: 100%;
                                                        margin: 0;
                                                    }
                                                }
                                            }

                                            .forminator-field-checkbox,
                                            .forminator-field-radio {
                                                .forminator-field {
                                                    .forminator-checkbox,
                                                    .forminator-radio {
                                                        input {
                                                            width: unset;
                                                        }

                                                        .forminator-checkbox-label,
                                                        .forminator-radio-label {
                                                            font-size: 1rem;
                                                            color: var(--basalte);
                                                        }
                                                    }

                                                    .forminator-checkbox {
                                                        input {
                                                            position: absolute;
                                                            opacity: 0;
                                                            cursor: pointer;                                                            
                                                        }

                                                        .forminator-checkbox-box {
                                                            display: flex;
                                                            width: 20px;
                                                            height: 20px;
                                                            border: 2px solid var(--foretauvergne);
                                                            align-items: center;
                                                            transition: background 0.2s;
                                                        }

                                                        input:checked + .forminator-checkbox-box {
                                                            background-color: var(--foretauvergne);
                                                            border-color: var(--foretauvergne);
                                                        }

                                                        input:checked + .forminator-checkbox-box::after {
                                                            content: "";
                                                            display: block;
                                                            width: 3px;
                                                            height: 8px;
                                                            border: solid var(--neigedesvolcans);
                                                            border-width: 0 2px 2px 0;
                                                            margin: 2px auto;
                                                            transform: rotate(45deg);
                                                        }                                                        
                                                    }

                                                    .forminator-radio {
                                                        input {
                                                            position: absolute;
                                                            opacity: 0;
                                                            cursor: pointer;                                                            
                                                        }          
                                                        
                                                        .forminator-radio-bullet {
                                                            display: inline-block;
                                                            width: 20px;
                                                            height: 20px;
                                                            border: 2px solid var(--foretauvergne);
                                                            border-radius: 50%;
                                                            margin-right: 8px;
                                                            vertical-align: middle;
                                                            transition: background 0.2s, border-color 0.2s;
                                                            position: relative;                                                           
                                                        }

                                                        input:checked + .forminator-radio-bullet {
                                                            border-color: var(--foretauvergne);
                                                        }

                                                        input:checked + .forminator-radio-bullet::after {
                                                            content: "";
                                                            position: absolute;
                                                            top: 50%;
                                                            left: 50%;
                                                            width: 10px;
                                                            height: 10px;
                                                            background-color: var(--foretauvergne);
                                                            border-radius: 50%;
                                                            transform: translate(-50%, -50%);
                                                        }
                                                    }
                                                }

                                            }
                                        }
                                    }
                                }
                            }


                        }
                    }
                }

                .forminator-button-submit {
                    margin: 0 auto;
                    margin-top: 3rem;
                }
            }
        }

        .infoarticle {
            background-color: var(--foretauvergne);
            padding: .8rem 5rem;

            .auteurarticle {
                color: var(--neigedesvolcans);
                text-align: center;
                font-size: 1rem;
                width: 100;

                a {
                    color: var(--neigedesvolcans);
                    transition: color .3s ease-in-out;
                    padding: 0;

                    &:hover {
                        color: var(--basalte);
                    }
                }
            }
        }

        .panier {
            display: block;

            .btn {
                padding: 0;
            }

            .wc-block-cart__submit {
                width: 100%;
            }

            .wc-block-cart__submit-container {
                a {
                    color: white;
                }
            }
        }

        .single {            
            .contenu {
                margin-top: 3rem;
                text-align: justify;
                hyphens: auto;
                padding-left: 10rem;
                padding-right: 10rem;

                p {
                    a {
                        padding: 0;
                    }

                    em {
                        a {
                            font-style: italic;
                        }
                    }
                }

                p:not(last-of-type) {
                    margin-bottom: 2rem;
                }

                .notesources {
                    padding-left: 5rem;
                    border-left: 2px solid var(--basalte);
                }

                h2 {
                    font-weight: 900;
                    color: var(--foretauvergne);
                    margin-bottom: 1rem;
                    text-align: left;
                    font-family: var(--basic);
                    color: var(--basalte);
                    font-size: 2rem;    
                    
                    em {
                        font-weight: 900;
                    }
                }

                h3 {
                    color: var(--basalte);
                    font-weight: 900;
                    font-size: 2rem;
                    margin-bottom: 1rem;
                    margin-top: 2rem;
                    font-family: var(--richmond);
                    hyphens: auto;

                    em {
                        font-style: italic;
                        color: var(--basalte);
                        font-weight: 900;
                        font-size: 2rem;
                        margin-bottom: 1rem;
                        margin-top: 2rem;
                        font-family: var(--richmond);
                        hyphens: auto;
                    }
                }

                h4 {
                    color: var(--basalte);
                    font-size: 1.2rem;
                    font-weight: 600;

                    &:last-of-type {
                        margin-bottom: 2rem;
                    }

                    em {
                        font-weight: 900;
                    }
                }

                sup {
                    font-size: .8rem;
                    color: var(--basalte);

                    a {
                        padding: 0;
                        margin-left: .2rem;
                        font-weight: 900;
                    }
                }

                strong {
                    font-weight: 900;
                    color: var(--basalte);
                }

                em {
                    font-style: italic;
                }

                .separation {
                    padding: .8rem 0;
                    margin: 3rem 0;
                }

                .wp-block-footnotes {
                    padding-left: 1rem;

                    li:not(:last-of-type) {
                        margin-bottom: 1rem;
                    }
                }

                ul, ol {
                    padding-left: 1rem;
                }

                blockquote {
                    background-color: var(--brumedusancy);
                    padding: 2rem;
                    margin: 2rem 0;

                    p {
                        margin: 0;
                    }

                    cite {
                        font-size: 1rem;
                        font-style: italic;
                        margin-top: 1rem;

                        strong {
                            font-style: italic;
                            font-weight: 900;
                        }

                        em {
                            font-style: italic;
                        }

                    }
                }

                figure {
                    margin: 2rem 0;
                    padding: 0;

                    img {
                        border: 3px solid var(--basalte);
                    }           
                    
                    figcaption {
                        font-style: italic;
                    }
                }
            }

            .etiquettes {
                padding: .5rem;
                background-color: var(--brumedusancy);
                width: 100%;
                display: flex;
                align-items: center;
                margin-top: 3rem;

                h3 {
                    font-size: .8rem;
                }

                .tags {
                    list-style-type: none;
                    padding: 0;
                    display: flex;
                    align-items: center;
                    gap: .5rem;
                    padding-left: .5rem;
                    
                    a {
                        font-size: .8rem;
                        padding: 0;

                        &:after {
                            height: 1.5px;
                        }
                    }
                }
            }

            .articlewrap {
                justify-content: flex-start;
                column-gap: 3rem;

                h2 {
                    width: 100%;
                    text-align: left;
                }
            }
        }
    }

    .woocommerce-message {
        border: none;
        background-color: var(--neigedesvolcans);
        color: var(--basalte);
        margin: 0;

        .btn {
            width: 100%;
            margin-top: 3rem;
        }
    }

    .sepPanier {
        padding: 1rem 0;

        .single_add_to_cart_button {
            background-color: var(--neigedesvolcans);
            color: var(--basalte);
            margin: 0  auto;
        }
    }

    footer {
        background-image: url('assets/img/motif2.svg');
        background-color: var(--foretauvergne);
        background-size: var(--backgroundsize);
        min-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;

        .section {
            padding: 0 10rem;

            .elements {
                display: flex;
                flex-direction: row;
                width: 100%;
                color: var(--neigedesvolcans);
                background-color: var(--foretauvergne);
                padding: 5%;
                gap: 20px;
                justify-content: space-between;

                .infos {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;

                    img {
                        width: 14rem;
                    }

                    address {
                        text-align: left;
                        line-height: 1.5;
                    }
                }

                .contact {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;

                    p {
                        font-family: var(--richmond);
                        font-size: 1.5rem;
                        font-weight: 600;
                        width: 100%;
                    }

                    .social {
                        list-style-type: none;
                        display: flex;
                        justify-content: space-between;

                        a {
                            padding: 0;

                            .fa-brands {
                                color: white;
                                font-size: 1.7rem;
                                transition: color .3s ease-in-out;

                                &:hover {
                                    color: var(--basalte);
                                }
                            }
                        }
                    }

                    .nouscontacter {
                        color: var(--neigedesvolcans);
                        padding: 0;
                        text-align: center;
                    }
                }

                .legal {
                    width: 33%;

                    p {
                        font-family: var(--richmond);
                        font-size: 1.5rem;
                        font-weight: 600;
                        width: 100%;
                    }

                    #legallinks {
                        list-style-type: none;

                        li {
                            a {
                                color: white;
                                padding: 0;
                                text-align: center;
                            }
                        }

                        li:first-of-type {
                            margin-top: 1rem;
                        }

                        li:not(:last-of-type) {
                            margin-bottom: 1rem;
                        }
                    }
                }
            }
        }
    }

/* Lightbox */
    #lightbox {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        justify-content: center;
        align-items: center;

        .overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            opacity: 0;
            animation: fadeIn 0.4s ease forwards;
        }

        .lightbox-img {
            position: relative;
            max-width: 90%;
            max-height: 90%;
            box-shadow: 0 0 20px black;
            opacity: 0;
            transform: scale(0.95);
            animation: zoomIn 0.4s ease 0.1s forwards;
        }  
    }      
    
/* Modal */
    .modal-pdv {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0,0,0,0.8);
        backdrop-filter: blur(3px);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 9999;
        cursor: pointer;
    }

    .modal-pdv.active {
        opacity: 1;
        pointer-events: all;
    }

    .modal-content {
        background: white;
        padding: 2rem;
        width: 90%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;

        h3 {
            font-family: var(--richmond);
            font-weight: 900;
            color: var(--foretauvergne);
            margin-bottom: 2rem;
            font-size: 2rem;
        }

        .carte, 
        iframe {
            width: 100%;
        }
    }

    .notice {
        width: 40%;
    }

    .modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
    }


/* EFFETS */
    .fade-in-on-scroll {
        opacity: 0;
        transition: 
            opacity .4s ease-out,
            transform .6s cubic-bezier(.22, 1.5, .36, 1);
        ;
    }

    .left {
        transform: translateX(-350px);
    }

    .right {
        transform: translateX(500px);
    }

    .bottom {
        transform: translateY(100px);
    }

    .top {
        transform: translateY(-500px);
    }

    .visible {
        transform: none;
        opacity: 1;
    }

    @keyframes fadeIn {
        to { 
            opacity: 1; 
        }
    }

    @keyframes zoomIn {
        to {
            opacity: 1;
            transform: scale(1);
        }
    }        

/* SELECT */
    .custom-dropdown {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .dropdown-toggle {
        display: block;
        width: 100%;
        padding: 0.5rem 1rem;
        background: var(--neigedesvolcans);
        border: none;
        cursor: pointer;
        text-align: center;
        box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
        margin: 1rem 0;
        color: var(--basalte);
    }

    .dropdown-menu {
        display: none;
        position: absolute;
        z-index: 10;
        background: var(--neigedesvolcans);
        border: none;
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
    }

    .custom-dropdown.open .dropdown-menu {
        display: block;
    }

    .dropdown-menu li {
        padding: 0.5rem 1rem;
        cursor: pointer;
    }

    .dropdown-menu li:hover {
        background-color: var(--foretauvergne);
        color: var(--neigedesvolcans);
    }

.wc-block-cart-item__prices .wc-block-components-product-price:before {
    content: "Prix unitaire : ";
    font-weight: 600;
}

.wc-block-components-product-name {
    padding: 0;
    font-size: 1.2rem !important;
}

.wc-block-components-product-metadata {
    display: none;
}

.wc-block-components-totals-footer-item-tax {
    font-weight: 400 !important;
    font-size: 1rem;
    margin-top: 1rem !important;
    justify-content: right;
}

.wc-block-components-express-payment.wc-block-components-express-payment--checkout,
.wc-block-components-express-payment-continue-rule,
.wc-block-cart__payment-options {
    display: none !important;
}

.wc-block-components-product-summary {
    h2 {
        strong {
            color: var(--neigedesvolcans) !important;
        }
    }
}

.wc-block-product-template__responsive {
    li {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        h2 {
            text-align: center !important;
        }
    }
}

.boutique-btn-small,
.manuscrit-btn-small {
    display: none;
}