/* Main CSS */
.wrap{
    overflow: clip
}
.degrade{
    position: fixed;
    left:0; top:0; right:0; bottom:0;
    background: linear-gradient( to top, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
    z-index:1
}
main{
    width:90%;
    max-width:1280px;
    margin:0 auto;
    position: relative;
    z-index:2;
    padding-bottom:1px
}
.home main{
    padding-bottom:0
}
.entry-header.cat{
    position: relative;
}
a.bouton{
    display: inline-flex;
    padding:0.75rem 1.5rem;
    border-radius: 3rem;
    background-color: var(--bleufonce);
    color: var(--blanc)
}
a.bouton:hover{
    background-color: var(--bleuelectric);
}
@media screen and (min-width:1200px){
    .entry-header.cat::before{
        content:"";
        display: block;
        position:absolute;
        right:0; bottom:0;
        width:50%; height:100%;
        background: url(../img/double-loop-header.svg) no-repeat top right / contain;
    }
}

.entry-content {
    text-align: left;
}

.content.thin{
    max-width:640px;
    margin:0 auto;
    padding-bottom:2rem;
}
.alignfull {
    margin: 0 calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}
.alignfull.has-background {
    padding: 4vw calc(-50% - -50vw);
}
.alignwide {
    margin: 4vw calc(25% - 25vw);
}
.relative{
    position: relative;
}
.ariane{
    font-size:1.5rem;
    margin-bottom:2rem;
    text-transform: uppercase;
}
.ariane > span{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    color: var(--emeraude)
}
.ariane span span{
    font-size:0.7rem;
    color: var(--noir);
}
.categs{
    gap:0.75rem
}
.taxonomy-description{
    max-width:590px;
    margin: 1rem auto;
}
.sub-categories{
    gap:1rem;
}
.content-actus{
    background-image:url(../img/tourbillon-vert.svg);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 20%;
}
figure.full-width{
    margin-bottom:0
}
figure.full-width img{
    width:100%; height:100%;
    object-fit: cover;
}
.wp-block-button a:hover{
    background-color: var(--bleufonce) !important;
}

a.bt{
    display: inline-flex;
    justify-content: center;
    padding:0.75rem 1.5rem;
    background-color: var(--bleuelectric);
    color: var(--blanc);
    font-weight: bold;
    border-radius: 2rem;
    border: 2px solid var(--bleuelectric)
}
a.bt.blanc{
    background-color: var(--blanc);
    border: 2px solid var(--blanc);
    color: var(--bleuelectric)
}
a.bt.vert{
    background-color: var(--emeraude);
    border: 2px solid var(--emeraude);
    color: var(--blanc);
}
.sub-categories .all-categories, .sub-categories .current-category{
    background-color: var(--bleuelectric) !important;
    color: var(--blanc) !important;
}
a.bt.icone{
    gap:0 0.5rem
}
a.bt.icone::before{
    content:"";
    display: block;
    width: 26px; height:26px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
a.bt.adhesion.icone::before{
    background-image: url(../img/adhesion-pos.svg);
}
a.bt.adhesion.icone:hover::before{
    background-image: url(../img/adhesion.svg);
}
a.bt.contour{
    background-color:transparent;
    border-color: inherit;
    color: var(--bleuelectric);
}
a.bt:hover{
    background-color: var(--bleufonce) !important;
    border-color: var(--bleufonce);
    color: var(--blanc)
}
a.bt.blanc:hover{
    background-color: var(--emeraude) !important;
    border-color: var(--emeraude);
    color: var(--blanc)
}

a.arrow-link{
    font-weight: bold;
    color: var(--bleuelectric);
    display: inline-flex;
    align-items: center;
    gap:0 0.5rem;
    margin:2rem 0;
    padding:0.5rem 0
}
a.arrow-link.white{
    color: var(--blanc);
}
a.arrow-link .arrow-r, a.arrow-link .arrow-l{
    width:28px; height:18px;
    margin-top:2px;
    transition: all 0.2s ease;
}
a.arrow-link .arrow-r{
    background: url(../img/arrow-r.svg) no-repeat center / contain;
}
a.arrow-link .arrow-l{
    background: url(../img/arrow-l.svg) no-repeat center / contain;
}
a.arrow-link.white .arrow-r{
    background-image: url(../img/arrow-r-white.svg);
}
a.arrow-link:hover .arrow-r{
    transform: translateX(25%);
}
a.arrow-link:hover .arrow-l{
    transform: translateX(-25%);
}
.wp-block-button.no-background a{
    padding-left:0; padding-right: 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-weight: bold;
}
.wp-block-button.no-background a::after{
    content:"";
    display: inline-block;
    width:25px; height: 15px;
    background: url(../img/arrow-r-white.svg) no-repeat center / contain;
    margin-top:2px;
    transition: all 0.2s ease;
}
.wp-block-button.no-background.vert a::after{
    background: url(../img/arrow-r-vert.svg) no-repeat center / contain;
}
.wp-block-button.no-background a:hover::after{
    transform: translateX(25%)
}
.wp-block-button.no-background.vert a{
    color: var(--emeraude);
}
.frm_button_submit, .frm_final_submit{
    transition:all 0.2s ease;
}
.frm_form_field input[type=text], .frm_form_field input[type=tel], .frm_form_field input[type=email], .frm_form_field textarea{
    padding:12px;
}
.wp-block-list{
    list-style: none;
    padding:0;
    margin:1rem 0;
}
.wp-block-list li{
    display: grid;
    grid-template-columns: [puce] 30px [libelle] auto;
    margin: .5rem 0;
}
.wp-block-list li::before{
    content:"";
    display:inline-block;
    width:20px; height: 20px;
    background: url(../img/puce-liste.svg) no-repeat center / contain;
    align-self: top;
    margin-top:3px;
}
.border-radius-1{
    border-radius: 1rem;
    overflow: clip;
}
.vs{
    border-radius: 1rem;
    overflow: clip;
}
.vs img{
    width:100%;
    object-fit:cover
}
.pagination{
    gap:0.5rem
}
.pagination .page-numbers{
    font-weight: bold;
    display: inline-flex;
    padding:0.5rem 1.25rem;
    background-color: var(--blanc);
    border-radius:2rem;
    font-size:0.8rem;
    text-transform: uppercase;
}
.pagination a.page-numbers:hover{
    background-color: var(--bleuelectric);
    color: var(--blanc);
}

.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 998;
    background: rgba(255,255,255, .5);
    border-radius:50%
}

.spinner {
    width: 70px;
    height: 70px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--bleufonce);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@media screen and (min-width:768px){
    .heading-home .accroche{
        font-size:3rem;
    }
}
@media screen and (min-width:1680px){
    .heading-home .accroche{
        font-size:4rem;
    }
}