.back-image{
    position: fixed;
    left:0; top:0;
    right:0; bottom:0;
    z-index:1
}
.back-image img{
    width:100%; height: 100%;
    object-fit: cover
}
.back-image::after{
    content:"";
    display: block;
    position: absolute;
    left:0; top:0;
    width:100%; height: 100%;
    background: linear-gradient( to bottom, rgba(0,0,0,.85) 20%, rgba(0,0,0,.6) 100%);
}
.logo-app{
    display: flex;
    justify-content: start;
}
.logo-app .wp-block-image{
    border-radius: 0
}
.top-page{
    padding:0 7.5%;
    height:40vh;
    z-index:1;
}
.top-page.border-b{
    border-bottom:1px solid rgba(255,255,255, .35)
}
.top-page.small{
    min-height:24vh;
}
.top-page .titre{
    top:50%; z-index:21;
    transform: translate(0, -50%);
    display: flex;
    flex-direction: column;
    align-items: start
}
.top-page.landing .titre{
    left:50%;
    transform: translate(-50%, -50%);
    align-items: center
}
.top-page .titre .up-line{
    font-size:0.8rem;
    text-transform: uppercase;
    font-weight:700;
    letter-spacing:0.05rem;
}
.top-page .titre h1{
    margin:0;  font-weight:500;
}
.top-page.landing .titre h1{
    text-align: center
}
.top-page .titre h1 span{
    display:inline-block; vertical-align:middle;
}
.top-page .titre h1 .logotype{
    background-color: var(--blanc); margin-right:1rem;
    border-radius:1rem; text-align:center;
    padding:0.5rem 1rem;
}
.top-page .logo-mark{
    width:80%;
    max-width:350px;
    margin:1rem 0 0 0;
}
.top-page .logo-mark img{
    width:100%; height: 100%;
    object-fit: contain;
}
.top-page .titre h1 .logotype img{
    height:auto; width:180px; margin:0 auto; display:block;
}
.heading{
    text-align:left;
}
.heading ul{
    list-style:none;
    padding:0; margin:2rem 0;
}
.heading h3::after{
    content:""; display:block;
    position:absolute; top:120%; right:0;
    width:200%; height:1px; background-color: var(--blanc);
}

.up-title{
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing:0.05rem;
}

ul.specifique{
    list-style:none;
    padding:0;
}
ul.specifique li{
    border-bottom:1px solid; padding:0.85rem 0; margin:0;
}
.accroche{
    font-size:1.35rem;
}
.autres-posts{
    margin-top:3rem; padding-top:3rem;
    background-color: var(--bleudark);
    box-sizing:border-box;
}
.autres-posts.alignfull{
    padding-left:7.5%; padding-right:7.5%;
}
.autres-posts h3{
    margin-top:0;
}
.autres-posts, .liste-clients{
    padding-bottom:3rem;
}
.autres-posts a, .liste-clients a{
    display:block; border-radius:1px;
    border-radius: 1rem;
    padding:1rem; margin:1.5rem 0; color: var(--bleudark);
    -webkit-transition:all 0.2s ease;transition:all 0.2s ease;
    min-height:calc(100% - 2rem); box-sizing:border-box;
}
.autres-posts a:hover,  .liste-clients a:hover{
    -webkit-transform:scale(1.1); transform:scale(1.1);
}
.autres-posts a .logo, .liste-clients a .logo{
    height:70px; display:block; margin:1rem 0;
    text-align:center;
}
.autres-posts a img, .liste-clients a img{
    display:block; width:auto; height:100%;
    margin:0 auto; max-width:80%;
}
.autres-posts .swiper{
    padding-bottom:3rem;
}
.autres-posts .swiper-button-prev, .autres-posts .swiper-button-next{
    width:40px; height:20px; bottom:0; top:unset;
    background-image: url(img/prev-next.svg); background-repeat: no-repeat; background-size: 100%; 
}
.autres-posts .swiper-button-prev{
    background-position: center bottom;left:calc(50% - 45px);
}
.autres-posts .swiper-button-next{
    background-position: center top; right:calc(50% - 45px);
}
.autres-posts .swiper-button-prev::after, .autres-posts .swiper-button-next::after{
    content:""; 
}

.liste-clients{
    border-bottom:1px solid var(--holytag);
}
.liste-clients a .extrait{
    display:block; font-size:0.8rem;
    margin-top:0.5rem;
}
.foliotage{
    margin-top:3rem; display:flex;
    justify-content: center;
}
.foliotage .page-numbers{
    display:inline-block !important; padding:1rem 1.25rem; margin:0 1px;
    background-color: var(--holytag); color: var(--blanc);
    line-height:1;
    border-radius:0;
}
.foliotage .page-numbers:hover{
    background-color: var(--bleudark);
}
.foliotage .page-numbers.current{
    background-color: var(--blanc); color: var(--bleudark);
    font-weight: bold;
}
.foliotage a{
    height:auto; margin:0;
}
.foliotage a:hover{
    -webkit-transform: scale(1);transform: scale(1);
}
.foliotage a.next, .foliotage a.prev{
    background-color: transparent; text-transform:uppercase; font-size:0.8rem;
}
.foliotage a.next:hover, .foliotage a.prev:hover{
    background-color: transparent; color: var(--holytag);
}

.story .wp-block-image{
    border-radius: 1rem;
    overflow: clip;
}

.liste-actus a{
    display:block; margin:1rem 0;
    color: var(--blanc)
}
.liste-actus a > span{
    display:block;
}
.liste-actus a .date{
    font-size:0.75rem; font-weight:bold;
}
.liste-actus a .vignette{
    background-color: var(--gris); overflow:hidden;
    margin-bottom:1rem;
    border-radius: 1rem;
    overflow: clip
}
.liste-actus a .vignette .cover{
    -webkit-transition:all 0.2s ease;transition:all 0.2s ease;
}
.liste-actus a:hover .vignette .cover{
    -webkit-transform: scale(1.1);transform: scale(1.1);
}

.links{
    margin:3rem 0; border-bottom:1px solid var(--holytag);
    padding-bottom:3rem;
}
.links a{
    display:inline-block;
    padding: 1rem 2rem; border:1px solid; border-radius:1px;
}
.dt{
    text-align:left; font-size:0.75rem; font-weight:bold;
}

#breadcrumbs{
    -webkit-transform: translateY(-200%); transform: translateY(-200%);
    text-align:left; font-size:0.75rem; color: var(--gris);
}
#breadcrumbs a{ text-transform:uppercase; color: var(--blanc)}


@media screen and (orientation: landscape){
    .top-page .titre{ width:70%;}
    .marge-laterale{
        padding:0 10%;
    }
}

@media screen and (min-width:1280px){
    .top-page{
        height:55vh;
    }
    .top-page.small{
        height:24vh;
    }
}