/*
Theme Name: Poultree
Author: Numéria Communication
Author URI: https://www.numeria-communication.com/
Description: Un thème dédié au CNR BEA
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: poultree
*/

:root{
    --color-1: #B7195D;
    --color-2: #4095A6;
    --color-3: #00AFDA;
    --color-4: #CBDDE6;
    --color-5: #191540;
    --color-6: #662D91;
    --color-7: #75757D;
    --color-8: #EFEBE6;
}

body, html{
    /*height: 100%;*/
}
body{
    margin: 0;
    padding: 0;
    background-color: #FFFBF6;
    color: var(--color-5);
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 400;
}

*{
    box-sizing: border-box;
}

a,
a:hover{
    text-decoration: none;
}

.text-align-center{
    text-align: center;
}
.mx-auto{
    margin-left: auto;
    margin-right: auto;
}

.header{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140px;
}
.footer{
    padding-bottom: 30px;
}

.stage{
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.stage[data-stage="0"]{
    max-width: 1260px;
}
.stage .content{
    padding: 30px 0;
}

.fs44{
    font-family: 'Antonio', sans-serif;
    font-size: 44px;
    font-weight: 400;
}
.fs44.start{
    font-size: 4vh;
}

.button{
    font-family: 'Antonio', sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    background-color: var(--color-1);
    border: none;
    border-radius: 50px;
    padding: 6px 38px 9px;
    cursor: pointer;
    display: inline-flex;
}
.button:focus{
    outline: none;
}
.button.start{
    font-size: 24px;
    border-bottom: solid 4px #eb85b1;
    padding: 10px 60px 15px;
}
.button.pdf{
    font-size: 20px;
    border-bottom: solid 4px #EB85B1;
    padding: 10px 30px;
}
.button.prev{
    background-color: #fff;
    color: var(--color-1);
    border: solid 1px var(--color-1);
}

.stage[data-stage="0"] .banner{
    max-width: 100%;
    max-height: 40vh;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 15px;
}

.banner_title{
    font-family: 'Antonio', sans-serif;
    font-size: 20px;
    text-align: center;
    padding: 20px 50px;
    background-color: var(--color-5);
    color: #fff;
    border-radius: 10px;
    margin-top: 10px;
}
.stage[data-stage="1"] .banner_title,
.stage[data-stage="4"] .banner_title{
    font-size: 22px;
    text-transform: uppercase;
}
.stage .banner_title .method{
    font-size: 26px;
    color: var(--color-4);
    text-transform: uppercase;
    margin-top: 5px;
}
#stage-6 .banner_title.new_method{
    padding: 90px 30px;
    margin-bottom: 30px;
    font-size: 26px;
}

sub{
    font-size: .6em;
}

.question{
    font-size: 22px;
    padding: 20px 0;
    display: flex;
    align-items: center;
    flex-flow: wrap;
}
.question:first-child{
    padding-top: 0;
}
.question .number{
    font-family: 'Antonio', sans-serif;
    font-size: 58px;
    line-height: 60px;
    font-weight: 600;
    color: var(--color-1);
    width: 110px;
    position: relative;
}
.question .number:after{
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background-image: url('/wp-content/themes/poultree/assets/images/arrow_right.svg');
    background-size: contain;
    background-repeat: no-repeat;
    right: 10px;
    top: calc(50% - 15px);
}
.question .text{
    padding: 10px;
    flex: 1;
}

.responses{
    padding: 0 100px;
    padding-bottom: 20px;
}
.responses .response{
    margin-bottom: 10px;
}
.response .resp_button{
    font-family: 'Antonio', sans-serif;
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    background-color: #fff;
    box-shadow: 2px 3px 4px 0px rgba(0,0,0,0.03);
    outline: solid 1px var(--color-8);
    min-width: 110px;
    border: none;
    border-radius: 5px;
    padding: 14px 40px;
    position: relative;
    cursor: pointer;
}
.response .resp_button.active{
    outline: solid 1px var(--color-2);
}
.response .resp_button.active:before{
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    background-image: url('/wp-content/themes/poultree/assets/images/check-solid.svg');
    background-size: contain;
    background-repeat: no-repeat;
    left: 10px;
}
.responses.size .response .resp_button{
    min-width: 150px;
}
.response .text{
    font-size: 20px;
    margin-left: 30px;
    color: var(--color-7);
}
hr{
    border: none;
    border-top: solid 1px rgba(0,0,0,0.1);
    width: 100%;
}
.navigation{
    margin: 30px 0;
}

.method_description{
    font-family: 'Antonio', sans-serif;
    font-size: 26px;
    line-height: 1.2;
    text-transform: uppercase;
}
.method_description span{
    color: #B7195D;
}

.question_helper,
.method_description{
    margin-top: 30px;
}
.question_helper{
    background-color: #fff;
    outline: solid 1px var(--color-8);
    padding: 25px;
    padding-left: 120px;
    border-radius: 10px;
    position: relative;
    min-height: 80px;
}
.question_helper:before{
    content: '';
    position: absolute;
    width: 30px;
    height: 40px;
    background-image: url('/wp-content/themes/poultree/assets/images/bulb.png');
    background-size: contain;
    background-repeat: no-repeat;
    left: 50px;
    top: 25px;
}
.question_helper>p{
    margin: unset;
}
.hide{
    display: none;
}

#stage-3 .ait{
    font-size: 32px;
    font-weight: 600;
    font-family: 'Antonio', sans-serif;
}
#stage-3 .additional_infos .additional_info{
    padding: 30px 0;
    padding-left: 60px;
    position: relative;
    border-bottom: solid 1px #F0E7DD;
}
#stage-3 .additional_infos .additional_info:last-child{
    border-bottom: none;
}
#stage-3 .additional_infos .additional_info:before{
    content: '';
    position: absolute;
    width: 33px;
    height: 33px;
    background-image: url('/wp-content/themes/poultree/assets/images/star.svg');
    background-size: contain;
    background-repeat: no-repeat;
    left: 10px;
    top: 30px;
}
#stage-3 .additional_infos .title{
    font-size: 24px;
    font-weight: 300;
    font-family: 'Antonio', sans-serif;
}
#stage-3 .additional_infos .description{
    font-size: 18px;
    line-height: 1.5em;
}
#stage-3 .artai{
    text-align: center;
    font-family: 'Antonio';
    font-size: 22px;
}
#stage-3 .wrapper_img{
    margin: 10px 0;
}
#stage-3 .img_star_broken{
    width: 45px;
    display: block;
    margin: auto;
}
#stage-3 .banner_title{
    font-size: 19px;
}

#stage-5 .content p{
    max-width: 800px;
    margin: 30px auto;
    font-size: 18px;
    line-height: 1.5em;
}
.stage .notice{
    margin-bottom: 15px;
}
.stage .notice span{
    color: #fff;
    background-color: var(--color-1);
    border-radius: 6px;
    padding: 4px 20px;
    display: inline-flex;
}
.logo.eurcaw{
    height: 110px;
}
.logo.frcaw{
    height: 100px;
}

.selected_method_name,
.final_methods_summary .heading{
    margin-bottom: 15px;
}
.final_method_selected{
    margin-bottom: 40px;
}
.wrapper_logo{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
    gap: 15px;
}






/*
Responsive
*/
@media screen and (max-width: 1000px){
    body{
        font-size: 19px;
    }
    .fs44{
        font-size: 32px;
    }
    .banner_title,
    .response .resp_button{
        font-size: 18px;
    }
    .stage{
        padding: 0 20px;
    }

    .responses{
        padding: 0 30px;
        padding-bottom: 20px;
    }
    .stage .banner_title .method,
    .method_description,
    #stage-6 .banner_title.new_method{
        font-size: 22px;
    }
    .question,
    #stage-3 .additional_infos .title{
        font-size: 20px;
    }
    .question .number{
        font-size: 48px;
        line-height: 50px;
    }
    #stage-3 .ait{
        font-size: 26px;
    }
    #stage-6 .banner_title.new_method{
        padding: 60px 30px;
    }
}

@media screen and (max-width: 690px){
    body{
        font-size: 18px;
    }
    .fs44,
    .fs44.start,
    #stage-3 .ait{
        font-size: 24px;
    }
    .banner_title{
        font-size: 16px;
        padding: 15px 25px;
    }
    .stage .banner_title .method,
    .method_description{
        font-size: 20px;
    }
    .question{
        font-size: 18px;
    }
    .question .number{
        font-size: 40px;
        line-height: 42px;
        width: 90px;
    }
    .responses{
        padding: 0;
    }
    .response .resp_button{
        font-size: 17px;
    }
    .response .text{
        margin-top: 6px;
        font-size: 16px;
    }
    #stage-3 .additional_infos .title{
        font-size: 18px;
    }
    #stage-3 .additional_infos .description,
    #stage-5 .content p{
        font-size: 16px;
    }
    .question_helper{
        padding-left: 80px;
    }
    .question_helper:before{
        left: 30px;
    }

    .header{
        height: auto;
    }
    
}