/*
Theme Name: MJSM
Theme URI: https://hamak.ca/
Author: Guy ARISTOR / Quentin LEQUENNE
Description: Thème développé par Hamak.
Requires at least: WordPress 5.0
Version: 1.0
*/


/*******************/
/***** GÉNÉRAL *****/
/*******************/

img.alignleft{
    display: flex;
    justify-self: flex-start;
    clear: none;
    float: none;
}

img.aligncenter{
    display: flex;
    justify-self: center;
    clear: none;
    float: none;
}

img.alignright{
    display: flex;
    justify-self: flex-end;
    clear: none;
    float: none;
}

.wysiwyg strong{
    color: inherit!important;
}


.back-button-wrapper{
    text-decoration: none;
}



/****************/
/***** HERO *****/
/****************/

.hero__links .hero__link:nth-child(4n - 2) .hero__link--splatter {
    width: auto;
} 


/********************/
/***** CONTACTS *****/
/********************/

.contact__person{
    margin-bottom: 60px;
}


/*********************/
/***** DOCUMENTS *****/
/*********************/

.documentation .doc{
    width: 100%!important;
}



/******************/
/***** JEUNES *****/
/******************/

.page-template-template-jeune .mouvement__text--text{
    margin-top: 84px;
    width: 100%;
}


/****************************/
/***** PAROLES DE JEUNE *****/
/****************************/

.paroles__filters{
    display: grid;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
}

.paroles__filter{
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    flex: 1 1 0;
    cursor: pointer;
    padding: 0 8px;
}

.paroles__filter--splatter{
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: auto;
    opacity: 0.25;
    display: block;
    transition: height 0.5s cubic-bezier(0.68, 0.16, 0.39, 0.98);
}

.paroles__filter--text{
    position: relative;
    z-index: 2;
    font-size: 16px;
    line-height: 1.35;
}

.paroles__filter.active .paroles__filter--splatter{
    height: 500%;
}

.paroles__filter:hover .paroles__filter--splatter{
    height: 500%;
}

/* TABLETS */
@media screen and (max-width: 1024px){
    .paroles__filters{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 16px;
    }
}

/* MOBILE */
@media screen and (max-width: 550px){
    .paroles__filters{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 330px){
    .paroles__filters{
        grid-template-columns: 1fr;
    }
}


/* GRID */
.paroles__grid{
    margin-top: 32px;
}

.paroles__grid--title{
    margin-bottom: 24px;
}

.paroles__grid--wrapper{
    display: flex;
    flex-wrap: wrap;
    margin: -16px;
}

.paroles__grid .article{
    text-decoration: none;
    width: calc(100% / 4);
    padding: 8px;
}

.paroles__grid .article__wrapper{
    background: #fff;
    box-shadow: -6px 6px 10px rgba(35, 31, 32, 0.05);
    border-radius: 0 0 16px 16px;
    padding: 0 0 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.paroles__grid .article__img{
    width: 100%;
    aspect-ratio: 5/4;
}

.paroles__grid .article__img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.paroles__grid .article__categories{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 24px;
    margin-top: 24px;
    gap: 10px;
}

.paroles__grid .article__categories .category{
    padding: 6px 16px;
    color: #231F20;
    border-radius: 10px;
}

.paroles__grid .article__title{
    margin-top: 24px;
    padding: 0 24px;
}

.paroles__grid .article__content{
    margin-top: 24px;
    padding: 0 24px;
}


/* GRID TABLETS */
@media screen and (max-width: 1024px){
    .paroles__grid .article{
        width: calc(100% / 2);
    }
}

/* GRID MOBILE */
@media screen and (max-width: 550px){
    .paroles__grid .article{
        width: 100%;
    }
}



/************************************/
/***** PAROLE DE JEUNE - SINGLE *****/
/************************************/

.single-paroles .article-single__banner{
    background-color: #eeb60a;
    margin-top: 20px;
    margin-bottom: 40px;
    position: relative;
}


.single-paroles .article-single__banner.banner-noir{
    background-color: #000;
}

.single-paroles .article-single__banner.banner-bleu{
    background-color: #374794;
}

.single-paroles .article-single__banner.banner-rouge{
    background-color: #de0f15;
}

.single-paroles .article-single__banner.banner-cerise{
    background-color: #c43a66;
}

.single-paroles .article-single__banner.banner-orange{
    background-color: #ea7431;
}

.single-paroles .article-single__banner.banner-vert-menthe{
    background-color: #a5d0af;
}

.single-paroles .article-single__banner.banner-jaune{
    background-color: #eab535;
}

.single-paroles .article-single__banner.banner-rose{
    background-color: #e286af;
}

.single-paroles .article-single__banner-inner{
    padding-top: 60px;
    padding-bottom: 60px;
    display: flex;
    gap: 30px;
}

.single-paroles .article-single__banner-inner .article-single__banner-left{
    width: 50%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.single-paroles .article-single__banner-inner .article-single__banner-right{
    width: 50%;
}

.single-paroles .article-single__banner-inner .article-single__banner--title{
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
    padding: 0 120px;
}

.single-paroles .article-single__banner-inner .article-single__banner--title .h1{
    display: block;
    position: relative;
    font-size: 32px;
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.single-paroles .article-single__banner-inner .article-single__banner--text{
    display: flex;
    align-self: center;
    text-align: center;
    max-width: 450px;
    border: 3px solid #FFF;
    border-radius: 15px;
    padding: 35px;
    position: relative;
    font-size: 22px;
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    line-height: 1.5;
    color: #FFF;
    margin-bottom: 80px;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-blanc{
    border: 3px solid #FFF;
    color: #FFF;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-noir{
    border: 3px solid #000;
    color: #000;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-bleu{
    border: 3px solid #374794;
    color: #374794;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-rouge{
    border: 3px solid #de0f15;
    color: #de0f15;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-cerise{
    border: 3px solid #c43a66;
    color: #c43a66;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-orange{
    border: 3px solid #ea7431;
    color: #ea7431;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-vert-menthe{
    border: 3px solid #a5d0af;
    color: #a5d0af;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-jaune{
    border: 3px solid #eab535;
    color: #eab535;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-rose{
    border: 3px solid #e286af;
    color: #e286af;
}

.single-paroles .article-single__banner-inner .article-single__banner--text:before{
    content: "“";
    position: absolute;
    width: 80px;
    height: 40px;
    font-size: 140px;
    color: #DD1115;
    background-color: #eeb60a;
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    top: -40px;
    left: 20px;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 40px;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-blanc:before,
.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-blanc:after{
    color: #FFF;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-noir:before,
.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-noir:after{
    color: #000;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-bleu:before,
.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-bleu:after{
    color: #374794;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-rouge:before,
.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-rouge:after{
    color: #de0f15;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-cerise:before,
.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-cerise:after{
    color: #c43a66;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-orange:before,
.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-orange:after{
    color: #ea7431;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-vert-menthe:before,
.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-vert-menthe:after{
    color: #a5d0af;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-jaune:before,
.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-jaune:after{
    color: #eab535;
}

.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-rose:before,
.single-paroles .article-single__banner-inner .article-single__banner--text.banner-text-rose:after{
    color: #e286af;
}

.single-paroles .article-single__banner-inner .article-single__banner--text:after{
    content: "”";
    position: absolute;
    width: 80px;
    height: 40px;
    font-size: 140px;
    color: #DD1115;
    background-color: #eeb60a;
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    bottom: -40px;
    right: 20px;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 40px;
}


.single-paroles .article-single__banner.banner-noir .article-single__banner-inner .article-single__banner--text:before,
.single-paroles .article-single__banner.banner-noir .article-single__banner-inner .article-single__banner--text:after{
    background-color: #000;
}

.single-paroles .article-single__banner.banner-bleu .article-single__banner-inner .article-single__banner--text:before,
.single-paroles .article-single__banner.banner-bleu .article-single__banner-inner .article-single__banner--text:after{
    background-color: #374794;
}

.single-paroles .article-single__banner.banner-rouge .article-single__banner-inner .article-single__banner--text:before,
.single-paroles .article-single__banner.banner-rouge .article-single__banner-inner .article-single__banner--text:after{
    background-color: #de0f15;
}

.single-paroles .article-single__banner.banner-cerise .article-single__banner-inner .article-single__banner--text:before,
.single-paroles .article-single__banner.banner-cerise .article-single__banner-inner .article-single__banner--text:after{
    background-color: #c43a66;
}

.single-paroles .article-single__banner.banner-orange .article-single__banner-inner .article-single__banner--text:before,
.single-paroles .article-single__banner.banner-orange .article-single__banner-inner .article-single__banner--text:after{
    background-color: #ea7431;
}

.single-paroles .article-single__banner.banner-vert-menthe .article-single__banner-inner .article-single__banner--text:before,
.single-paroles .article-single__banner.banner-vert-menthe .article-single__banner-inner .article-single__banner--text:after{
    background-color: #a5d0af;
}

.single-paroles .article-single__banner.banner-jaune .article-single__banner-inner .article-single__banner--text:before,
.single-paroles .article-single__banner.banner-jaune .article-single__banner-inner .article-single__banner--text:after{
    background-color: #eab535;
}

.single-paroles .article-single__banner.banner-rose .article-single__banner-inner .article-single__banner--text:before,
.single-paroles .article-single__banner.banner-rose .article-single__banner-inner .article-single__banner--text:after{
    background-color: #e286af;
}


.single-paroles .article-single__banner .banner-illustration.banner-illustration-1{
    position: absolute;
    top: 0;
    right: -12px;
    max-width: 125px;
    max-height: 125px;
    width: 100%;
    height: 100%;
}

.single-paroles .article-single__banner .banner-illustration.banner-illustration-2{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -100px;
    max-width: 175px;
    max-height: 175px;
    width: 100%;
    height: 100%;
}

.single-paroles .article-single__banner .banner-illustration.banner-illustration-3{
    position: absolute;
    bottom: 0;
    right: -12px;
    max-width: 125px;
    max-height: 125px;
    width: 100%;
    height: 100%;
}

.single-paroles .article-single__banner-inner .article-single__banner--image img{
    width: 100%;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    object-position: center;
}

.single-paroles .article-single__top-content{
    margin-bottom: 40px;
}

.single-paroles .article-single__bottom-section{
    display: flex;
    flex-wrap: wrap;
}


.single-paroles .article-single__bottom-section .left-section{
    padding-right: 12px;
    width: calc((4 / 12) * 100%);
    margin-bottom: 40px;
}

.single-paroles .article-single__bottom-section .right-section{
    padding-left: 12px;
    width: calc((8 / 12) * 100%);
    margin-bottom: 40px;
}

.single-paroles .article-single__bottom-section .video iframe{
    width: 100%;
}

.single-paroles .article-single__bottom-section .testimonies{
    padding-top: 0;
    margin-bottom: 40px;
}

.single-paroles .article-single__bottom-section .testimonies .testimonies__slider{
    margin-top: 0;
}

.single-paroles .article-single__bottom-section .testimonies .testimonies__slider .slick-slider{
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 0;
}

.single-paroles .article-single__bottom-section .testimonies .testimonies__slider .slick-list{
    margin: 0;
}

.single-paroles .images__slider{
    overflow: hidden;
    padding-top: 120px;
}

.single-paroles .images__slider .slick-list{
    overflow: visible;
}

.single-paroles .images__slider .image{
    border-radius: 16px;
    margin: 0 8px;
    position: relative;
}


.single-paroles .images__slider .image img{
    max-width: 100%;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
}


.single-paroles .images__slider .image .carrousel_illustration{
    position: absolute;
    max-width: 250px;
    max-height: 250px;
    width: 100%;
    height: 100%;
    top: -155px;
    left: 20px;
}



@media screen and (max-width: 1600px){

    .single-paroles .article-single__banner .banner-illustration.banner-illustration-1{
        max-width: 100px;
        max-height: 100px;
    }
    
    .single-paroles .article-single__banner .banner-illustration.banner-illustration-2{
        max-width: 125px;
        max-height: 125px;
    }
    
    .single-paroles .article-single__banner .banner-illustration.banner-illustration-3{
        max-width: 100px;
        max-height: 100px;
    }
}


@media screen and (max-width: 1400px){
    
    .single-paroles .article-single__banner-inner .article-single__banner--title{
        padding: 0 80px;
    }

    .single-paroles .article-single__banner .banner-illustration.banner-illustration-1{
        right: -30px;
        max-width: 100px;
        max-height: 100px;
    }
    
    .single-paroles .article-single__banner .banner-illustration.banner-illustration-2{
        left: -120px;
        max-width: 125px;
        max-height: 125px;
    }
    
    .single-paroles .article-single__banner .banner-illustration.banner-illustration-3{
        bottom: -30px;
        right: -30px;
        max-width: 100px;
        max-height: 100px;
    }
}


@media screen and (max-width: 1200px){
    
    .single-paroles .article-single__banner-inner{
        gap: 50px;
        flex-wrap: wrap;
    }
    
    .single-paroles .article-single__banner-inner .article-single__banner--title{
        padding: 0 120px;
    }
    
    .single-paroles .article-single__banner-inner .article-single__banner-left{
        width: 100%;
    }
    
    .single-paroles .article-single__banner-inner .article-single__banner-right{
        width: 100%;
    }
    
    .single-paroles .article-single__banner .banner-illustration.banner-illustration-1{
        right: -30px;
        max-width: 125px;
        max-height: 125px;
    }
    
    .single-paroles .article-single__banner .banner-illustration.banner-illustration-2{
        left: 0px;
        max-width: 175px;
        max-height: 175px;
    }
    
    .single-paroles .article-single__banner .banner-illustration.banner-illustration-3{
        bottom: -30px;
        right: -30px;
        max-width: 125px;
        max-height: 125px;
    }
}



@media screen and (max-width: 768px){
    
    .single-paroles .article-single__banner-inner .article-single__banner--title{
        padding: 0 80px;
    }
    
    .single-paroles .article-single__banner .banner-illustration.banner-illustration-1{
        right: -30px;
        max-width: 100px;
        max-height: 100px;
    }
    
    .single-paroles .article-single__banner .banner-illustration.banner-illustration-2{
        bottom: -30px;
        left: -30px;
        top: auto;
        transform: translateY(0);
        max-width: 100px;
        max-height: 100px;
    }
    
    .single-paroles .article-single__banner .banner-illustration.banner-illustration-3{
        bottom: -30px;
        right: -30px;
        max-width: 100px;
        max-height: 100px;
    }
    
    .single-paroles .article-single__bottom-section .left-section,
    .single-paroles .article-single__bottom-section .right-section{
        width: 100%;
    }
    
    .single-paroles .article-single__bottom-section .left-section{
        padding-right: 0;
    }
    
    .single-paroles .article-single__bottom-section .right-section{
        padding-left: 0;
    }
}


@media screen and (max-width: 425px){
    
    .single-paroles .article-single__banner-inner .article-single__banner--title{
        padding: 0px;
    }
    
    .single-paroles .article-single__banner .banner-illustration.banner-illustration-1{
        display: none;
    }
    
    .single-paroles .article-single__banner .banner-illustration.banner-illustration-2{
        bottom: -40px;
        left: 0;
        top: auto;
        transform: translateY(0);
        max-width: 100px;
        max-height: 100px;
    }
    
    .single-paroles .article-single__banner .banner-illustration.banner-illustration-3{
        bottom: -40px;
        right: 0;
        max-width: 100px;
        max-height: 100px;
    }
    
}





/****************/
/***** AIDE *****/
/****************/


.aides .aides__slider:not(:last-child){
    margin-bottom: 120px;
}

.category__text {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.category__text .round-anim-box .anim-circle{
    left: 55%;
}

.aides__slider .slick-track{
    margin-left: 0;
}

.aides__slider .slick-slide{
    background: #fff;
    padding: 25px;
    border-radius: 16px;
    margin: 0 8px;
    height: inherit;
    box-shadow: -6px 6px 10px rgba(35, 31, 32, 0.05);
    min-width: 200px;
}

.aide .aide__image{
    margin-bottom: 20px;
}

.aide .aide__image img{
    width: 100%;
    height: 250px;
    max-width: 100%;
    max-height: 250px;
    object-fit: cover;
    object-position: center;
}

.aide .aide__text .h2{
    margin-bottom: 15px;
}

.aide .aide_link{
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 16px;
    margin-top: 20px;
    border-radius: 16px;
    background: #EEB60A;
    transition: background 0.5s cubic-bezier(0.68, 0.16, 0.39, 0.98);
    color: #231F20;
    max-width: 400px;
    position: relative;
}

.aide .aide_link:hover{
    background: rgba(238, 182, 10, 0.75);
}