.knak{
    display: inline-flex;
    padding:0.5rem 1rem;
    border-radius: 3rem;
    text-transform: uppercase;
    background-color: var(--bleufonce);
    color: var(--blanc);
}
.round{
    display: inline-flex;
    width:40px;
    height:40px;
    border-radius: 50%;
    background-size:65%;
    background-position: center;
    background-repeat: no-repeat
}
.round.user{
    background-image: url(../img/user.svg);
}
.knak.vertclair, .round.vertclair{
    background-color: var(--vertclair)
}
.knak.vert, .round.vert{
    background-color: var(--vert)
}
.knak.bleu, .round.bleu{
    background-color: var(--bleu)
}
.round.vertclair:hover, .round.vert:hover, .round.bleu:hover, .knak:hover{
    background-color: var(--bleufonce);
    color: var(--blanc)
}

.heading-page{
    padding: 1rem 5%;
    min-height:250px;
    overflow: clip;
    background: url(../img/fond-heading.webp) no-repeat center / cover;
}
.under{
    transform: translateY(-50%);
    z-index:4;
    gap: 0 0.5rem;
    padding:0 5%
}
.under .trait{
    width:150px; height:12px;
    background-color: var(--gris);
}
.under .trait.bleu{
    background-color: var(--bleu);
}
.under .trait.vertclair{
    background-color: var(--vertclair);
}
.heading-page .filtre{
    position: absolute;
    left:0; top:0;
    width:100%; height: 100%;
    z-index:1;
    background: linear-gradient( to right,  var(--bleufonce) 0%,var(--bleu) 100% );
    opacity:0.85
}
.heading-page .ariane{
    color: var(--blanc);
    z-index: 2;
    font-size: 0.8rem;
}
.heading-page .ariane a{
    color: var(--blanc);
}
.heading-page h1{
    color: var(--blanc);
    z-index:2;
    font-size: 2rem;
}

.circle-arrow{
    width:45px; height: 45px;
    border-radius: 50%;
    background: var(--bleu) url(../img/arrow-right-bl.svg) no-repeat center / contain
}
.circle-arrow.vert{
    background-color: var(--vertclair)
}
.bouton{
    display:flex;
    gap: 0.5rem;
    padding:1rem 1.5rem;
    margin-bottom:1rem;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--blanc);
    border: 2px solid transparent;
    font-size:1.2rem;
    color: var(--blanc);
}
.bouton.bleu{
    background-color: var(--bleu)
}
.bouton.vert{
    background-color: var(--vert)
}
.bouton.vertclair{
    background-color: var(--vertclair)
}
.bouton.bleufonce{
    background-color: var(--bleufonce)
}
.bouton:hover{
    color: var(--blanc);
    background-color: var(--gris)
}
.bouton.back::before{
    content:"";
    display: block;
    width:30px; height:20px;
    background: url(../img/arrow-back.svg) no-repeat center / contain
}

.button{
    display:flex;
    flex-direction: column;
    gap: 0.5rem;
    padding:1rem 1.5rem;
    margin-bottom:1rem;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--blanc);
    border: 2px solid transparent;
    font-size:1.2rem;
}
.button .icone{
    width:30px; height:30px;
    display:block;
}
.button:hover{
    border-color: var(--blanc);
    color: var(--blanc);
}

.wp-block-button a::after{
    content:"";
    display:inline-block;
    background: url(../img/arrow-button.svg) no-repeat center / contain;
    width:15px; height:12px;
    margin-left:0.85rem;
    color: var(--blanc);
    font-weight: 500;
}
.wp-block-button a:hover{
    background-color: var(--bleufonce);
    color: var(--blanc)
}

.pagination-num ul{
    margin:0; padding:0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 4px;
}
.pagination{
    gap:4px;
}
.pagination-num ul li a, .pagination .page-numbers{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--bleufonce);
    border:1px solid;
    width:40px; height:40px;
}
.pagination .next.page-numbers, .pagination .prev.page-numbers{
    width:auto;
    padding-left:0.5rem; padding-right: 0.5rem
}
.pagination-num ul li.active a, .pagination .page-numbers.current{
    background-color: var(--bleu);
    color: var(--blanc);
    border-color:var(--bleu);
}
.pagination-num ul li .points{
    font-size:1.5rem;
    font-weight: bold;
    letter-spacing: 2px;
}
.pagination-num ul li a span{
    display: inline-block;
    vertical-align: middle;
    line-height:1;
    transform: translateY(-2px);
}
.pagination-num ul li.prev a, .pagination-num ul li.next a{
    width:auto;
    padding-left:1rem; padding-right:1rem;
}
.single-nav{
    border:1px solid var(--bleu)
}
.single-nav a{
    color: var(--bleu);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:1rem;
    text-align:center;
    color:var(--bleufonce);
    background-color: var(--blanc);
}
.single-nav .next a{
    background-color: var(--bleu);
    color: var(--blanc);
}
.single-nav a:hover{
    background-color: var(--grism);
}
.single-nav .next a:hover{
    background-color: var(--gris);
}
.single-nav a span.arrow{
    display:inline-flex;
    width:20px; height:20px;
    margin:0 0.5rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top:3px;
}
.single-nav a span.arrow.prev{
    background-image: url(../img/arrow-left-black.svg)
}
.single-nav a span.arrow.next{
    background-image: url(../img/arrow-button.svg)
}

/* form */
.with_frm_style .frm_dropzone svg{
    display: block;
    margin:0 auto;
}
.with_frm_style .frm_dropzone .frmsvg {
    width:25px; height: 25px;
}
.frm_dropzone.frm_single_upload {
    max-width: 100%;
}
.with_frm_style .frm_dropzone{
    background-color: transparent
}
.frm_dropzone .dz-message {
    border:1px solid var(--gris);
    background: none;
    padding: 1rem;
    border-radius: 0;
    cursor: pointer;
    display: none;
    font-size:1rem;
}

@media screen and (min-width:768px){
    .under .motif{
        width: 100px;
        height: 100px;
        background: url(../img/motif.svg) no-repeat center / contain;
    }
}

@media screen and (min-width:1200px){
    .heading-page::before{
        content:"";
        display:block;
        width:5vw;
        height:5vw;
        background-color: var(--blanc);
        position:absolute;
        right:0; top:-1px;
        z-index:3;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
    }
    .heading-page::after{
        content:"";
        display:block;
        width:6.5vw;
        height:6.5vw;
        background-color: var(--blanc);
        position:absolute;
        left:0; bottom:-1px;
        z-index:3;
        clip-path: polygon(0 0, 0 100%, 100% 100%);
    }
    .heading-page h1{
        text-align:left;
    }
    .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{
        padding-left:0;
    }
}
@media screen and (min-width:1440px){
    .heading-page, .under{
        padding-left: 6.5%;
        padding-right: 6.5%
    }
    .heading-page h1{
        font-size: 2.5rem;
    }
    .heading-page h1{
        max-width:50%;
    }
    .single .heading-page h1{
        max-width:70%;
    }
}

@media screen and (min-width:1920px){
    .heading-page h1{
        font-size: 3rem;
    }
}