:root{
    --full-white: #ffffff;
    --container-shadow: #86878940;
    --red: #AF1D1D;
    --red-hover:#AF1D1De6;
    --black: #292929;
    --light-black: #3D3D3D;
}

.btn{
    padding: 0;
    border: none;
}

.suggestion-container{
    position: relative;

    width: 1200px;
    overflow: hidden;
    box-sizing: border-box;
    margin: -161px auto 26px;
    padding: 20px;

    background-color: var(--full-white);
    box-shadow: 0 0 8px 0 var(--container-shadow);
    border-radius: 10px;
}

.suggestion_content{
    flex-grow: 1;
}

.suggestion_title{
    margin: 0 0 10px;
    padding: 0;

    font: 500 24px/28px "Roboto", "Arial", sans-serif;
    color: var(--black);
}

.suggestion_subtitle{
    max-width: 80%;
    margin-bottom: 12px;

    font-size: 16px;
    line-height: 20px;
    color: var(--light-black);
}

.suggestion_link{
    display: flex;
    column-gap: 4px;
    justify-content: center;

    width: 223px;
    padding: 12px;

    color: var(--full-white);
    font: 500 16px/16px "Roboto", "Arial", sans-serif;


    background-color: var(--red);
    border-radius: 8px;
    cursor: pointer;
}

.pierre-assist-button .suggestion_link:hover{
    background-color: var(--red-hover);
}

.suggestion_link::after {
    content: "";
    height: 16px;
    width: 16px;

    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2210%22%20height%3D%2211%22%20viewBox%3D%220%200%2010%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M8.40954%203.20378L1.33201%2010.2813C1.18622%2010.4271%201.00066%2010.5%200.775348%2010.5C0.550033%2010.5%200.36448%2010.4271%200.218688%2010.2813C0.072896%2010.1355%200%209.94997%200%209.72465C0%209.49934%200.072896%209.31378%200.218688%209.16799L7.29622%202.09046H1.25249C1.02717%202.09046%200.838304%202.01425%200.685885%201.86183C0.533466%201.70941%200.457256%201.52054%200.457256%201.29523C0.457256%201.06991%200.533466%200.881047%200.685885%200.728628C0.838304%200.576209%201.02717%200.5%201.25249%200.5H9.20477C9.43009%200.5%209.61895%200.576209%209.77137%200.728628C9.92379%200.881047%2010%201.06991%2010%201.29523V9.24752C10%209.47283%209.92379%209.6617%209.77137%209.81412C9.61895%209.96653%209.43009%2010.0427%209.20477%2010.0427C8.97946%2010.0427%208.79059%209.96653%208.63817%209.81412C8.48575%209.6617%208.40954%209.47283%208.40954%209.24752V3.20378Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E') no-repeat center;
    /*transition: 0.2s;*/
}

.suggestion_Piere{
    position: absolute;

    bottom: -36px;
    right: 103px;

    shape-outside: polygon(90px 107.31%, 20.06% 84.03%, -7.02% 46.31%, 39.77% -3.98%, 78.02% -6px);

    margin-left: 15px;
}

.suggestion_btn--close{
    position: absolute;
    top: 0;
    right: -3px;

    width: 70px;
    height: 65px;

    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2272%22%20height%3D%2273%22%20viewBox%3D%220%200%2072%2073%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Ccircle%20cx%3D%2282.5%22%20cy%3D%2212.5%22%20r%3D%2260.5%22%20fill%3D%22%23B71C1C%22%2F%3E%0A%3Ccircle%20cx%3D%2258%22%20cy%3D%221%22%20r%3D%2257%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M56%2016L44%2028M44%2016L56%2028%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E") no-repeat center;
    background-size: contain;
    cursor: pointer;
}

.pierre-assist-button{
    display: inline-block
}

#content .white_bg.white_bg__zero-top,
.suggestion-container + #content .white_bg,
ins + #content .white_bg,
iframe + #content .white_bg {
    margin-top: 0;
}

@media (max-width: 1230px) {
    .suggestion-container{
        width: auto;
        margin: 0 15px 26px;
        padding: 15px;
    }
}

@media (max-width: 960px) {
    .suggestion_subtitle{
        max-width: 70%;
    }
}

@media (max-width: 768px) {
    .suggestion_title{
        max-width: 70%;
    }

    .suggestion_Piere{
        float: right;
        position: static;
        margin-right: 70px;
    }
}

@media (max-width: 630px) {
    .suggestion_subtitle{
        max-width: 50%;
    }
}

@media (max-width: 570px) {
    .suggestion-container{
        overflow: auto;
        height: auto;
    }

    .suggestion_title, .suggestion_subtitle{
        max-width:90%;
    }

    .suggestion_subtitle{
        margin-bottom: 22px;
    }

    .suggestion_Piere{
        margin-top: 42px;
        margin-right: 0;

        /*shape-outside: polygon(90px 107.31%, 26.37% 75.3%, -9.72% 59.83%, 60.94% 19.05%, 103.69% 35px);*/

        shape-outside: none;
        height: 130px;
        width: auto;
    }

    .suggestion_btn--close{
        top:15px;
        right: 13px;

        width: 24px;
        height: 24px;

        background: url("data:image/svg+xml;charset=utf-8, %3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M18%206L6%2018M6%206L18%2018%22%20stroke%3D%22%23999999%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E") no-repeat center;
    }
}

@media (max-width: 385px) {
    .suggestion_title{
        font-size: 18px;
        line-height: 24px;
    }

    .suggestion_link{
        width: auto;
    }

}