body {
    margin: 0;
    h2, h3, h4{
        margin: 0;
    }
}

.page-template-template-homepage2025{
    h1{
        font-size: 0px;
        line-height: 0px;
        color: transparent;
        position: absolute;
        top: 0; 
    }
    h2, h3, h4, p{
        margin: 0;
    }
    div{
        box-sizing: border-box;
    }
    .slider{
/*         .blanc{
            .buttons .primary-color{
                border:#000 solid 1px !important;
                color: #000!important;
            }
        } */
    }

    .slider-smartphone{
        display: none;
    }

    #ajax-content-wrap, #changing-color{  
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 5rem;
        width: 100%;
        background-color: #fff;
        transition: all ease-in-out 300ms;
    }

    #changing-color{
        padding: 5rem 0rem;
    }
    .bg-green{
        background-color: #4C4E3E!important;
        color: #fff!important;
        h2, a{
            color: #fff!important;
        }
        a:after{
            filter: invert(1);
        }
        .logos-magazines{
            background-color: #3D3E32!important;
        }

        .ligne-video .frame{
            border-color: #4C4E3E!important;
        }
    }
    
    section .wrapper{
        max-width: 90rem;
        margin: auto;
    }

    .simple-link{
        font-size: .875rem;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
        text-transform: uppercase;
        text-decoration: none;
        display: flex;
        gap: .75rem;
        transition: all ease-in-out 300ms;
    }
    .simple-link:after{
        content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13" fill="none"><path d="M1 0.5L7 6.5L1 12.5" stroke="black"/></svg>');
        margin-top: .0625rem;
    }
    .simple-link-white:after{
        content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13" fill="none"><path d="M1 0.5L7 6.5L1 12.5" stroke="white"/></svg>');
        margin-top: .0625rem;
    }
    .simple-link:hover{
        gap: 1.125rem;
    }

    .btn-link{
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;
        padding: 1rem 1.5rem;
        border: .0625rem solid #FFF;
        transition: all ease-in-out 300ms;
        text-decoration: none;
        
    }
    .btn-link:hover{
        background-color: #FFF;
        color: #000!important;
    }
    .btn-link-black{
        border: .0625rem solid #000;
    }
    .btn-link-black:hover{
        background-color: #000;
        color: #fff!important;
    }

    .slider-pleine-largeur{
        width: 100%;
        
        margin-bottom:3rem;

        .slide_rayure_speciale{
            display: flex;
            position: relative;
            height: 45.9375rem;

            video{
                width: 100%;
                object-fit: cover;
                overflow: hidden;
            }
            .video-mobile{
                display: none;
            }

            .image-unique{
                width: 100%;
                height: 100%;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    min-height: 600px;
                    object-fit: cover;
                    opacity: 0;
                    animation: animImgDroite 4s cubic-bezier(0.76, 0, 0.24, 1) 300ms 1 alternate forwards;
                }
            }

            .bloc-gauche{
                width: 50%;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    
                    object-fit: cover;
                    opacity: 0;
                    animation: animImgGauche 4s cubic-bezier(0.76, 0, 0.24, 1) 300ms 1 alternate forwards;
                }
                
            }
            .bloc-droite{
                width: 50%;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    opacity: 0;
                    animation: animImgDroite 4s cubic-bezier(0.76, 0, 0.24, 1) 300ms 1 alternate forwards;
                }
            }

            .infos{
                position: absolute;
                top:50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 3.75rem;
                animation: slideInText 1s cubic-bezier(0.76, 0, 0.24, 1) 4s 1 alternate forwards;
                opacity: 0;
                h2{
                    font-size: 60px;
                    font-style: normal;
                    font-weight: 100!important;
                    line-height: 3.25rem;
                    color: #fff;
                    text-align: center;
                }
                #countdown{
                    background-color: #000;
                    color: #FFF;
                    padding: 1rem 1.5rem;
                    font-size: 1.25rem;
                }
                a{
                    color:#fff;
                }
            }

        }
    }

    .mise-en-avant-produits{
        width: 100%;

        .wrapper{
            max-width: 80rem;
            margin: 0 auto;
            padding: 0 1.5rem;

            .grille{
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                gap: 5rem 1.25rem;                
            }
            .title{
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 80px;
                flex-wrap: nowrap;
                
                .surtitre{
                    
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 300;
                    line-height: normal;
                    letter-spacing: 0.64px;
                    text-transform: uppercase;
                    margin-bottom: 20px;
                    display: flex;
                    gap: 20px;
                }
                .surtitre:before{
                    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='9' viewBox='0 0 33 9' fill='none'%3E%3Cline y1='4.5' x2='32' y2='4.5' stroke='black'/%3E%3Cpath d='M28 0.5L32 4.5L28 8.5' stroke='black'/%3E%3C/svg%3E");
                    display: block;
                    width: 32px;
                    height: 8px;
                }
                .titre{
                    font-family: "Larken";
                    font-size: 44px;
                    font-style: normal;
                    font-weight: 100;
                    line-height: 52px;
                    margin-bottom: 60px;
                    
                }
            }
            .card{
                display: flex;
                flex-direction: column;
                gap: 2rem;
                position: relative;
                justify-content: space-between;
                .images{
                    width: 100%;
                    aspect-ratio: 1;
                    overflow: hidden; 

                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                    .secondary{
                        position: absolute;
                        top: 0;
                        left: 0;
                        opacity: 0;
                        transition: all ease-in-out 300ms;
                        height: unset;
                        aspect-ratio: 1;
                    }
                }

                .infos{
                    display: flex;
                    flex-direction: column;
                    gap: 1.25rem;

                    h3{
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 100;
                        line-height: normal; 
                    }
                    .separator{
                        background-color: #DEDCD2;
                        width: 100%;
                        height: .0625rem;
                    }
                    .price{
                        font-size: .875rem;
                        font-style: normal;
                        font-weight: 300;
                        line-height: 1.25rem;
                        color: #000;
                    }
                    .btn-link{
                        width: fit-content;
                        color: #000;
                    }
                }
            }
            .card:hover{
                .secondary{
                    opacity: 1;
                }
                .btn-link{
                    background-color: #000;
                    color: #fff!important;
                }
            }
        }
    }

    .blocs-repeteur{
        width: 100%;

        .wrapper{
            max-width: 80rem;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        .blocs-container {
            display: grid;
            grid-template-columns: 1fr 1fr; /* Exactement 2 colonnes */
            gap: 20px;
            max-width: 100%;
        }
        
        .bloc-item {
            border: 1px solid #000;
            padding: 20px;
            box-sizing: border-box;
        }
        
        .bloc-item h3 {
            margin-top: 0;
            margin-bottom: 15px;
            font-size: 24px;
        }
        
        .bloc-link {
            margin-top: 10px;
        }
        

        
        .bloc-link .arrow {
            margin-left: 5px;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .blocs-container {
                grid-template-columns: 1fr; /* Une seule colonne sur mobile */
            }
        }
    }

    .ligne-deux-blocs{
        width: 100%;
        
        padding: 100px 1.5rem ;
        margin-bottom: -5rem;
        background-size: cover;
        background-position: center;
        .wrapper{
            max-width: 1160px;
            width: 100%;
            display: grid;
            grid-template-columns: 1fr;

            gap: 2.5rem;
            /* margin: 0 1.5rem; */

            .colonne{
                position: relative;
                height: 100%; 
                width: 100%;
                background-color: #FFF;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                img{
                    height: 300px;
                    width: 100%;
                    object-fit: cover;
                    transition: filter ease-in-out 300ms;
                }
                .infos{
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 1.5rem;
                    max-width: 700px;
                    width: 100%;
                    padding: 40px 10px;
                    h2, p{
                        color: #000;
                        text-shadow: 0rem 0rem 2.5rem rgba(0, 0, 0, 0.25);
                        text-align: center;
                    }
    
                    h2{
                        font-size: 1.5rem;
                        font-style: normal;
                        font-weight: 300!important;
                        line-height: 1.25rem;
                    }
                    p{
                        font-size: .875rem;
                        font-style: normal;
                        font-weight: 300;
                        line-height: 1.125rem;
                    }
                }
            }
            .colonne:hover{
                img{
                    filter: brightness(.7) ;
                }
            }
        }
    }

    .conseil-couleur-distance{
        .wrapper{
            .content{
                display: flex;
                gap: 2.5rem;
                align-items: center;
                .img{
                    
                    max-height: 25rem;
                    
                    img{
                        border-radius: 1rem;
                        box-shadow: -12px 12px 24px 0px rgba(0, 0, 0, 0.20);
                    }
                    
                }
                .infos{
                    display: flex;
                    flex-direction: column;
                    gap: 1.75rem;
                    height: 100%;
                    justify-content: center;
                    h2{
                        font-size: 1.5rem;
                        font-weight: 100;
                        line-height: normal;
                    }
                    .texte{
                        font-size: .875rem;
                        font-weight: 300;
                        line-height: normal;
                    }
                    .btn-link{
                        width: fit-content;
                    }
                }
            }
        }
    }

    .logos-magazines{
        background: #DEDCD2;
        width: 100%;
        height: 4rem;
        margin-top: -5rem;

        .wrapper{
            max-width: 53.75rem;
            height: 100%;
            padding: 0 .625rem;
            display: grid;
            grid-template-columns: repeat(5, 1fr);

            .logo{
                height: 100%;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                img{
                    height: 1.25rem;
                    width: auto;
                }
            }
        }
    }

    .ligne-photo-texte-alterne{
        width: 100%;
        .wrapper{
            max-width: 120rem;

            .ligne{
                width: 100%;
                display: flex;
                flex-direction: row;
                min-height: 25rem;

                .bloc-photo{
                    width: 50%;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .bloc-texte{
                    width: 50%;
                    display: flex;
                    padding: 5rem;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    gap: 1.5rem;
                    flex: 1 0 0;
                    align-self: stretch;

                    h2{
                        font-size: 1.5rem;
                        font-style: normal;
                        font-weight: 100;
                        line-height: normal;
                    }

                    p{
                        font-size: .875rem;
                        font-style: normal;
                        font-weight: 300;
                        line-height: 1.25rem;
                    }

                    a{
                        margin-top: 1rem;
                    }

                }
            }
            .ligne:nth-child(2n){
                flex-direction: row-reverse;
            }
        }
    }

    .ligne-video{
        width: 100%;
        background-size: cover;
        background-position: center;
        .wrapper{
            max-width: 120rem;
            position: relative;
            video{
                width: 100%;
            }

            .frame{
                position: absolute;
                top: 0;
                left: 0;
                border: 5rem solid #ffffff;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                width: 100%;
                height: 100%;
                transition: all cubic-bezier(0.76, 0, 0.24, 1) 1s;
            }


            .infos{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2.5rem;
                color: #FFF;

                h2{
                    font-size: 3.75rem;
                    font-style: normal;
                    font-weight: 100;
                    line-height: 3.25rem;
                    color: #FFF;
                }
                a{
                    color: #FFF;
                }
            }

        }
        .wrapper:hover .frame{
            border: 0rem solid #fff;
        }
    }
}

@keyframes animImgDroite {
    0% {
        opacity: 0;
        transform: translateY(-46.875rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes animImgGauche {
    0% {
        opacity: 0;
        transform: translate(-46.875rem, 46.875rem);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);

    }
}

@keyframes slideInText {
	0% {
		opacity: 0;
		margin-top: 6.25rem;
	}

	100% {
		opacity: 1;
		margin-top: 0;
	}
}

@media only screen and (max-width: 43.125rem){
    .page-template-template-homepage2024{
        .hide-mobile{
            display: none;
        }
        .video-mobile{
            display: block!important;
        }
        .slider{
            display: none;
        }
        .slider-smartphone{
            display: block;
            .nectar-slider-wrap{
                left:0!important;
            }
        }

        .btn-link{
            font-size: 1rem;
            padding: .75rem;
            
            text-align: center;
        }

        .slider-pleine-largeur{
            
            .slide_rayure_speciale{
                flex-direction: column;
                height: auto;
                .video{

                    height: 100%;
                    object-fit: cover;

                }
                .bloc-droite, .bloc-gauche{
                    width: 100%;
                }
                .infos{
                    h2{
                        font-size: 45px;
                        font-style: normal;
                        font-weight: 100;
                        line-height: 3.25rem;
                    }
                }
            }
            margin-bottom:0;
        }

        .ligne-trois-colonnes{
            .wrapper{
                grid-template-columns: 1fr;
                .colonne{
                    height: 28.75rem;
                }
            }
        }

        .ligne-catchphrase{
            .wrapper{
                
                grid-template-columns: 1fr;
                gap: 2rem;
            }
        }

        .mise-en-avant-produits{
            .wrapper{
                .title{
                    a{
                        margin-top: 20px;
                    }
                }
                .grille{
                    grid-template-columns: 1fr 1fr;
                    gap: 2.5rem 1.5rem;
                }
                

                .card{



                    .infos{
                        
                        h3{
                            font-size: 1.125rem;
                        }
                        .price{
                            font-size: .75rem;
                        }
                        .btn-link{
                            width: 100%!important;
                        }                   
                    }

                }
            }
        }

        .ligne-deux-blocs{
            .wrapper{
                grid-template-columns: 1fr;
                grid-template-rows: unset;
                gap:1.5rem;
                

                .colonne{
                    min-height: 15.625rem;
                    .infos{
                        width: calc(100% - 5rem);
                    }
                }
            }
        }
        .conseil-couleur-distance{
            .content{
                flex-direction: column;
                column-gap: 0 !important;
                row-gap: 1rem !important;
                .img {
                    img {
                        width: auto;
                        max-height:240px;
                    }
                }
                .infos h2{
                    text-align: center;
                }
                .infos .texte{
                    padding: 0 20px;
                }
                .btn-link{
                    margin: auto;
                }
            }
        }

        .logos-magazines{
            height: auto;
            .wrapper{
                padding: 10px 0px;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
                gap: 10px;

                .logo:nth-child(1), .logo:nth-child(2), .logo:nth-child(3){
                    grid-column: span 2;
                }
                .logo:nth-child(4), .logo:nth-child(5){
                    grid-column: span 3;
                }
            }
        }

        .ligne-photo-texte-alterne{
            .wrapper{
                display: flex;
                flex-direction: column;
                gap: 1.25rem;
                .ligne{
                    flex-direction: column;
                    .bloc-photo{
                        height: 15rem;
                        width: 100%;
                    }
                    .bloc-texte{
                        width: 100%;
                        padding: 2rem 1.5rem;
                    }
                }
                .ligne:nth-child(2n){
                    flex-direction: column;
                }
            }
        }

        .ligne-video{
            height: 43.75rem;
            .wrapper{
                height: 100%;
                video{
                    height: 100%;
                    object-fit: cover;
                }
                .frame{
                    display: none;
                }
                .infos{
                    width: 100%;
                    h2{
                        font-size: 1.5rem;
                        line-height: 1.25rem;
                    }
                }
            }
        }
    }    
}



#footer-outer{
    width: 100%;
    margin-top: -5rem;
}