/* Styles spécifiques template Post questionnaire */
/* Conteneur principal du template post questionnaire */
.post-quest-main { width:100%; }
.post-quest-section { 
    &.section-1{
        position: relative;
        padding-top: 4rem;
    }
    &.section-2{
        padding-top: 3rem;
    }
}
.post-quest-section .inner { 
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1160px; 
    margin: 0 auto; 
    padding: 0 1.5rem 4rem; 
}
.post-quest-section.section-1 { text-align: center; }
.post-quest-section .portrait { 
    width:140px; 
    height:140px;
    border-radius: 100%;
}
.post-quest-section .portrait img { 
    width:100%; 
    height:100%;
    object-fit:cover;
    border-radius: 100%;
}
.pq-title { 
    font-size: 35px; 
    font-weight: 600;
    color: white;
    margin-top: 0.5rem;
}
.pq-subtitle { 
    font-size: 15px; 
    font-weight: 400; 
    margin-bottom: 1rem;
}
.pq-reco{
    background-color: white;
    padding: 1rem;
    border-radius: 20px;
    & p{
        margin: 0;
    }
}
.pq-cols-wrapper.is-one-col, .pq-cols-wrapper.is-two-cols, .pq-cols-wrapper.has-extra-col, .pq-cols-wrapper.single { 
    display: flex;
    justify-content: center;
    width: 100%; 
    & .pq-col {
        width: 48%;
        max-width: 600px;
        padding: 0 1rem;
        & figure{
            height: 240px;
            position: relative;
            overflow: hidden;
            & img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            & span{
                position: absolute;
                bottom: -1px;
                left: 0;
                width: 100%;
                height: 30px;
                background:white;
                mask: radial-gradient(circle 15px at 50% 0%, transparent 98%, #000 100%);
                -webkit-mask: radial-gradient(circle 15px at 50% 0%, transparent 98%, #000 100%);
            }
            & svg{
                position: absolute;
                bottom: 30px;
                right: 50%;
                transform: translate(50%, 50%);
            }
            @media (max-width: 768px) {
                & svg{
                    top: unset;
                }
            }
        }
    }
}
.pq-cols-wrapper.is-two-cols, .pq-cols-wrapper.has-extra-col, .pq-cols-wrapper.single {
    position: relative;
    justify-content: space-between;
    & svg.plus {
        position: absolute;
        top: 340px;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    @media (max-width: 768px) {
        & svg.plus {
            position: static;
            transform: none;
            top: unset;
            left: unset;
        }
    }
    
}
.pq-cols-wrapper.has-extra-col, .pq-cols-wrapper.single {
    color: white;
}
.pq-tarif { 
    margin: 3rem 0 2rem; 
    text-align:center; 
}
.pq-tarif .tarif-title { 
    font-size: 22px; 
    margin:0; 
    font-weight: 500;
}
.pq-contact-cta{
    border-radius: 50px;
    background: #AA846F;
    padding: 15px 20px;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    font-weight: 500;
}
.post-quest-section.section-3{
    position: relative;
    & .separator-shape{
        z-index: 2;
    }
    & .col-image{
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        margin: 0;
        & img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    & .col-bkg{
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-color: black;
        opacity: 0.5;
    }
    & .inner{
        padding: 0;
    }
    & .pq-col{
        padding: 10rem 3rem 6rem;
        display: flex;
        flex-direction: column;
    }
}
.pq-cols-wrapper.single{
    flex-direction: row-reverse;

}
@media (max-width: 768px) {
    .pq-cols-wrapper.is-one-col, .pq-cols-wrapper.is-two-cols, .pq-cols-wrapper.has-extra-col, .pq-cols-wrapper.single {
        flex-direction: column;
        align-items: center;
        & .pq-col{
            width: 100%;
            max-width: none;
            padding: 1rem 0;
        }
        & svg {
            top: 48%;
            transform: translate(-50%, -50%);
        }
    }
    .post-quest-section.section-3 {
        & .col-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 50%;
            margin: 0;
        }
        & .col-bkg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background-color: black;
            opacity: 0.5;
        }
        & .inner {
            & .pq-cols-wrapper{
                & .pq-col{
                    padding: 3rem 1.5rem;
                }
            }
        }
    }
}