/*
Theme Name: Val Janon
Theme URI: https://elementor.com/hello-theme/
Description: Thème Val Janon personnalisé qui hérite de Hello Elementor
Author: Ludovic Rabat
Author URI: https://ludovic-rabat.fr
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

.produits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    margin: 3rem auto;
    max-width: 1280px;
}

.produit-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    border-bottom: 1px solid #999;
    padding-bottom: 2rem;
}

.produit-content h2 {
    margin-top: 0;
}

.produit-content p {
    margin: 0 0 12px;
}

.produit-image {
    position: relative;
    display: block;
    overflow: hidden;
    flex: 0 0 200px;
    --swap-speed: 600ms;
}

.produit-image .img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity var(--swap-speed) ease;
}

.produit-image .img-secondary {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.produit-image.is-hovered .img-primary {
    opacity: 0;
}

.produit-image.is-hovered .img-secondary {
    opacity: 1;
}

.produit-content {
    flex: 1;
}

.produit-content h2 {
    font-size: 1.5rem;
    text-transform: uppercase;
    color: #661f27;
    margin-bottom: 0.5rem;
}

.cta-btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background-color: #661f27;
    color: white!important;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.cta-btn:hover {
    background-color: #8a2d35;
}


.taxonomy-description {
    max-width: 1000px;
    margin: auto;
    padding: 1rem 2rem;
}
    
@media (min-width: 1200px) {
    .page-header .entry-title, .site-footer .footer-inner, .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-header:not(.dynamic-header), body:not([class*=elementor-page-]) .site-main {
        max-width: 1280px!important;
        padding-top: 80px;
    }
}

@media screen and (max-width: 768px) {
    .produit-image {
        flex: initial;
    }
}

/* @media (max-width: 768px) {
    .produit-image {
        float: left;
        width: 175px;
        margin: 0 10px 10px 0;
    }
} */