:root {
    --htr-menu: 73px;

    --small-margin: 40px;
    --medium-margin: 70px;

    --tnyspace: 26px;
    --ltspace: 42px;
    --smallspace: 56px;
    --mdspace: 70px;
    --lrgspace: 80px;
    --bigspace: 100px;
    --verybigspace: 137px;



    --side-base: 10vw;


    --font-85: 85px;
    --font-55: 55px;
    --font-28: 28px;
    --font-22: 22px;
    --font-20: 20px;
    --font-15: 15px;
    --font-13: 13px;

    --padding-card: 35px 28px 32px 40px;


    --small-radius: 10px;
    --border-radius: 20px;
    --big-radius: 28px;

    --Noir: #2C000B;
    --Gris-txt: #61313C;
    --Gris: #E1E1E1;

    --Blanc: #ffffff;
    --Rouge: #FF073A;
    --Rouge-fonce: #70001B;

    --Noir-pur: #000;

}

.top_head{
    --htr-menu: 138px;
}

::selection {
    background-color: var(--Noir);
    color: var(--Blanc);
}

/* Firefox */
::-moz-selection {
    background-color: var(--Noir);
    color: var(--Blanc);
}

/* width */
::-webkit-scrollbar {
    width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--Blanc);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--Rouge);
    border-radius: 10px;
    cursor: pointer;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--Rouge);
    width: 2px;
}

html, body, #wrapper{
    transition: 0s;
}

html{
    scroll-behavior: unset;
    margin-top: 0 !important;
}
body{
    background: var(--Blanc);
    background: url('../images/texture_fond_pomzed_2026.png') #f2e6e6 0% 0% / 150px 150px repeat;
}

#wrapper{
    /*backdrop-filter: grayscale(100%) brightness(106%);*/
}
#container{
    background: transparent;
    padding: var(--htr-menu) 0 0;
}

#content{
    overflow: hidden;
}
* {
    font-family: "tenon", sans-serif;
    font-weight: 400;
    color: var(--Gris-txt);
    font-size: var(--font-22);
}

button, input[type='submit'] {
    font-family: "tenon", sans-serif;
}


/* Font */


h1, h2{
    color: var(--Noir);
    font-size: var(--font-55);
    font-style: normal;
    font-weight: 800;
    line-height:  103.448%;
    text-transform: uppercase;
    margin-bottom: 17px;
}

h2{
    margin-top: 22px;
}

p{
    line-height: 136% ;
    margin-top: 17px;
    margin-bottom: 17px;
}

.txt p{
    max-width: 793px;
}

.txt p a, .txt ul a, .txt ol a{
    text-decoration: underline;
    -webkit-text-decoration-color: var(--Gris-txt);
    text-decoration-color: var(--Gris-txt);

    text-decoration-thickness: 1px;
    text-underline-offset: 1px;
    /*color: #545454;*/
    transition: text-decoration-color 0.2s ease-in-out, -webkit-text-decoration-color 0.3s ease-in-out;
}

.txt p a:hover, .txt ul a:hover, .txt ol a:hover{
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 1px;
    -webkit-text-decoration-color: var(--Rouge);
    text-decoration-color: var(--Rouge);
}


.title_1000{
    max-width: 1000px;
}

.title_815{
    max-width: 815px;
}

.title_790{
    max-width: 790px;
}

.title_660{
    max-width: 660px;
}



/* Espaces */

.mrg_cote{
    padding-right: var(--side-base);
    padding-left: var(--side-base);
}


/* TODO : Header */

.menu-toggled, .menu-toggled body, .menu-toggled #wrapper{
    overflow: hidden;
}

#header{
    padding: 20px var(--side-base) 20px var(--side-base);
    height: fit-content;
    align-items: center;
    background-color: var(--Blanc);
    transition: 0.5s, background-color .7s cubic-bezier(1, 0.02, 0.79, 0.1);
}

#header>div{
    height: fit-content;
    width: 100%;
    align-items: center;
    gap: 29px;
    transition: 0.5s, background-color .7s cubic-bezier(1, 0.02, 0.79, 0.1);
    display: flex;
}

#header.hide {
    transform: translateY(-100%);
}

.menu-toggled #header.hide {
    transform: translateY(0%);
}

.top_head #header{
    background-color: transparent;
    transition: 0.5s, background-color .2s cubic-bezier(0.13, 0.92, 0, 0.99);
    padding-top: 58px;
    padding-bottom: 47px;
}

.menu-toggled #header{
    background-color: var(--Blanc);
}

#menu{
    width: fit-content;
    margin: 0;
}

#menu>.menu-toggle{
    display:flex;
}

#menu .menu{
    flex-direction:column;
}

#branding a{
    display: flex;
    height: fit-content;
}




#menu .menu-icon {
    display: flex;
    font-size: unset;
    width: 28px;
    height: 22px;
    flex-direction: column;
    justify-content: space-between;
}

#close-bar1, #close-bar2, #close-bar3 {
    display: flex;
    position: static;
    background-color: var(--Rouge);
    width: 100%;
    height: 1px;
}

.menu-toggled #menu #close-bar1 {
    transform: translateY(11px) rotate(45deg);
}

.menu-toggled #menu #close-bar2 {
    width: 0;
    transform: translateX(4px);
}

.menu-toggled #menu #close-bar3 {
    transform: translateY(-10px) rotate(-45deg);
}


#menu>#main-menu-container{
    position:fixed;
    top: var(--htr-menu);
    left:0;
    right:0;
    height:0;
    z-index:-1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items: flex-start;
    background: var(--Rouge-fonce);
    overflow:hidden;
}

.menu-toggled #menu>#main-menu-container {
    height: calc(100svh - var(--htr-menu));
}

.menu-menu-1-container{
    background-color: var(--Rouge);
    height: 100%;
    padding: 93px 0 93px 24vw;
    width: 55%;
}

#menu .menu{
    justify-content: flex-start;
    align-items: flex-start;
}

#menu .menu>li {
    width: 100%;
    padding-right: 68px;
}

#menu .menu>li>a {
    margin-left: 0;
    color: var(--Blanc);
    width: 100%;
    display: inline-flex;

    font-size: var(--font-55);
    font-style: normal;
    font-weight: 800;
    line-height: 103.448%;
    text-transform: uppercase;
    transition: 0.3s ease-in-out;
    letter-spacing: 0;
}

#menu .menu>li>a:hover {
    color: var(--Noir);
}

.menu-toggled #menu .open, #menu .close {
    display: block;
}

#menu .open>a,
#menu .menu>.current_page_item>a,
#menu .menu-item-has-children:has(.current_page_item)>a{
    color: var(--Noir-pur);
}



#menu .menu>li {
    width: 100%;
    padding-right: 68px;
}

#menu .menu>li.menu-item-has-children{
    position: relative;
}


#menu .menu>li.menu-item-has-children::after{
    content: '';
    display: block;
    position: absolute;
    height: 37px;
    width: 37px;
    background-color: var(--Rouge);
    top: 47%;
    right: 0;
    transition: 0.2s ease-in;
    transform: translate(-20%, -50%) rotate(45deg);
    border-radius: 0 30px 0 0;
}

#menu .menu>li.menu-item-has-children:hover::after,
#menu .menu>li.menu-item-has-children.open::after,
#menu .menu>li.menu-item-has-children:has(.current_page_item)::after{

    transform: translate(50%, -50%) rotate(45deg);
    border-radius: 0;
}

#menu .menu>li.menu-item-has-children.last_sous_menu::after{
    content: unset;
    display: none;
}




.menu-menu-1-container>ul>.menu-item-has-children:not(:last-child) ul{
    display: block;
    position: absolute;
    left: 100%;
    top: 0px;

    padding-top: 7px;
    padding-left: 8vw;
    padding-bottom: 100px;
    width: 36vw;
}

.menu-menu-1-container>ul>.menu-item-has-children:not(:last-child) ul{
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.menu-menu-1-container > ul > .menu-item-has-children:not(:last-child) ul li {
    opacity: 0;
    transform: translateX(-15px);
    transition: opacity .4s ease, transform .4s ease;
}


.menu-toggled #menu  .menu-menu-1-container > ul > .menu-item-has-children:not(:last-child).open ul li {
    opacity: 1;
    transform: translateX(0);
}


/* Décalage de 0.2s entre chaque ligne */
.menu-menu-1-container > ul > .menu-item-has-children:not(:last-child).open ul li:nth-child(1) {
    transition-delay: .06s;
}

.menu-menu-1-container > ul > .menu-item-has-children:not(:last-child).open ul li:nth-child(2) {
    transition-delay: .12s;
}

.menu-menu-1-container > ul > .menu-item-has-children:not(:last-child).open ul li:nth-child(3) {
    transition-delay: .18s;
}

.menu-menu-1-container > ul > .menu-item-has-children:not(:last-child).open ul li:nth-child(4) {
    transition-delay: .24s;
}

.menu-menu-1-container > ul > .menu-item-has-children:not(:last-child).open ul li:nth-child(5) {
    transition-delay: 0.3s;
}

.menu-menu-1-container > ul > .menu-item-has-children:not(:last-child).open ul li:nth-child(6) {
    transition-delay: 0.36s;
}

.menu-menu-1-container > ul > .menu-item-has-children:not(:last-child).open ul li:nth-child(7) {
    transition-delay: 0.42s;
}


.menu-menu-1-container > ul > .menu-item-has-children:not(:last-child).open ul li:nth-child(8) {
    transition-delay: 0.48s;
}



@media (min-width: 889px) {

    .menu-toggled #menu  .menu-menu-1-container > ul > .menu-item-has-children:not(:last-child):hover ul li {
        opacity: 1;
        transform: translateX(0);
    }

    /* Décalage de 0.2s entre chaque ligne */
    .menu-menu-1-container > ul > .menu-item-has-children:not(:last-child):hover ul li:nth-child(1) {
        transition-delay: .06s;
    }

    .menu-menu-1-container > ul > .menu-item-has-children:not(:last-child):hover ul li:nth-child(2) {
        transition-delay: .12s;
    }

    .menu-menu-1-container > ul > .menu-item-has-children:not(:last-child):hover ul li:nth-child(3) {
        transition-delay: .18s;
    }

    .menu-menu-1-container > ul > .menu-item-has-children:not(:last-child):hover ul li:nth-child(4) {
        transition-delay: .24s;
    }

    .menu-menu-1-container > ul > .menu-item-has-children:not(:last-child):hover ul li:nth-child(5) {
        transition-delay: 0.3s;
    }

    .menu-menu-1-container > ul > .menu-item-has-children:not(:last-child):hover ul li:nth-child(6) {
        transition-delay: 0.36s;
    }

    .menu-menu-1-container > ul > .menu-item-has-children:not(:last-child):hover ul li:nth-child(7) {
        transition-delay: 0.42s;
    }


    .menu-menu-1-container > ul > .menu-item-has-children:not(:last-child):hover ul li:nth-child(8) {
        transition-delay: 0.48s;
    }
}



.menu-menu-1-container>ul>.menu-item-has-children:not(:last-child) ul a{

    color: var(--Blanc);
    font-size: var(--font-28);
    font-weight: 500;
    line-height:  142.857% ;
    text-transform: uppercase;
}

/*.menu-toggled #menu .menu-menu-1-container > ul > .menu-item-has-children.open ul li:hover{*/
.menu-toggled #menu .menu-menu-1-container > ul > .menu-item-has-children:not(:last-child):hover ul li:hover{
    transition: 0.2s;
    transform: translateX(8px);
}

.menu-toggled #menu .menu-menu-1-container>ul>.menu-item-has-children:not(:last-child) ul .current_page_item>a{
    color: var(--Rouge);
}

.menu-toggled #menu .menu-menu-1-container>ul>.menu-item-has-children:not(:last-child) ul li:hover>a{
    /*color: var(--Gris);*/
}


#menu .menu-menu-1-container>ul>li.last_sous_menu>a{
    display: none;
}

.menu-menu-1-container>ul>li.last_sous_menu ul{
    display: flex;
    margin-top: 62px;
}

.menu-menu-1-container>ul>li.last_sous_menu ul a{

    color: var(--Blanc);
    font-size: var(--font-15);
    font-weight: 400;
    line-height: 84% ;
    text-transform: uppercase;
    margin-right: 10px;
}

.menu-menu-1-container>ul>li.last_sous_menu ul li:last-child a{
    margin-right: 0;
}

.menu-menu-1-container>ul>li.last_sous_menu ul li + li a:before{
    content: '/';
    margin-right: 10px;
}


.menu-menu-1-container>ul>li.last_sous_menu ul a:hover{

    color: var(--Noir);
}

.menu-menu-1-container>ul>li.last_sous_menu ul .current-menu-item a{

    color: var(--Noir-pur);
}

.menu-menu-1-container>ul>li.last_sous_menu ul a:before,
.menu-menu-1-container>ul>li.last_sous_menu ul a:hover:before{
    color: var(--Blanc);
}

.hide_presta{
    display: none;
}


.general_search{
    margin: auto 0 auto auto;
    position: relative;
}

.general_search input {
    border-radius: var(--small-radius);
    border: 1px solid var(--Rouge);
    background-color: #ffffff0f;
    padding: 9px 34px 8px 13px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 7px 34px 7px 13px;
    margin: 0;
    height: 33px;
    width: 165px;
}

.general_search button.search_btn{
    background-color: transparent;
    padding: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 13px;
    display: flex;
    align-items: center;
    /*transform: translateY(-50%);*/
    height: 100%;
}

#search_results{
    /*display: flex;*/
    flex-direction: column;
    gap: 8px;
    /*background-color: var(--Rouge);*/
    color: var(--Blanc);
    /*border-radius: var(--small-radius);*/
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;

    /*width: fit-content;*/
    /*padding: 14px 17px;*/
    min-width: 100%;
    white-space: nowrap;
    max-width: 400px;
    width: max-content;
    pointer-events: none;
    transition: 0.2s ease;

    display: flex;
    overflow: auto;
    max-height: 70svh;
    padding-right: 3px;
    border-radius: var(--small-radius);
    opacity: 0;
}

#search_results a{
    color: var(--Blanc);
    white-space: wrap;
    line-height: 120%;
    background: #8d7b7f;
    padding: 10px 17px;
    border-radius: var(--small-radius);
}

#search_results a:hover{
    color: var(--Blanc);
    white-space: wrap;
    line-height: 120%;
    background: #716064;
    padding: 10px 17px;
    border-radius: var(--small-radius);
}

#search_results p{
    color: var(--Blanc);
    margin: 0;
}


.general_search input:focus ~ #search_results,
#header .general_search:hover #search_results{
    opacity: 1;
    pointer-events: all;
}

.hide .general_search input:focus ~ #search_results,
.hide #header .general_search:hover #search_results{
    opacity: 0;
    pointer-events: none;
}


/* animation presta avec logo */


.logo_with_presta{
    display: flex;
    gap: 8px;
}

/*Vertical Sliding*/
.slidingVertical {
    display: grid;

}

.slidingVertical a {
    animation: topToBottom 17.5s linear infinite 0s;
    -ms-animation: topToBottom 17.5s linear infinite 0s;
    -webkit-animation: topToBottom 17.5s linear infinite 0s;
    color: var(--Blanc);
    opacity: 0;
    overflow: hidden;
    font-size: 20px;
    font-weight: 200;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    grid-area: 1 / 1;
    position: relative;
    margin-top: 4px;
}


#header .slidingVertical a {
    color: var(--Noir);
}

.slidingVertical a:nth-child(2) {
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

.slidingVertical a:nth-child(3) {
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

.slidingVertical a:nth-child(4) {
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}

.slidingVertical a:nth-child(5) {
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

.slidingVertical a:nth-child(6) {
    animation-delay: 12.5s;
    -ms-animation-delay: 12.5s;
    -webkit-animation-delay: 12.5s;
}

.slidingVertical a:nth-child(7) {
    animation-delay: 15s;
    -ms-animation-delay: 15s;
    -webkit-animation-delay: 15s;
}

.service-carousel {
    /*margin-left: 107px;*/
    /*margin-top: -28.5px;*/
}

/*topToBottom Animation*/
@-moz-keyframes topToBottom {
    0% {
        opacity: 0;
        pointer-events: none;
        z-index: 0;
    }
    5% {
        opacity: 0;
        -moz-transform: translateY(-50px);
        pointer-events: none;
        z-index: 0;
    }
    7% {
        opacity: 1;
        -moz-transform: translateY(0px);
        pointer-events: all;
        z-index: 2;
    }
    19% {
        opacity: 1;
        -moz-transform: translateY(0px);
        pointer-events: all;
        z-index: 2;
    }
    21% {
        opacity: 0;
        -moz-transform: translateY(50px);
        pointer-events: none;
        z-index: 0;
    }
    80% {
        opacity: 0;
        pointer-events: none;
        z-index: 0;
    }
    100% {
        opacity: 0;
        pointer-events: none;
        z-index: 0;
    }
}

@-webkit-keyframes topToBottom {
    0% {
        opacity: 0;
        pointer-events: none;
        z-index: 0;
    }
    5% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        pointer-events: none;
        z-index: 0;
    }
    7% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        pointer-events: all;
        z-index: 2;
    }
    19% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        pointer-events: all;
        z-index: 2;

    }
    21% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        pointer-events: none;
        z-index: 0;
    }
    80% {
        opacity: 0;
        pointer-events: none;
        z-index: 0;
    }
    100% {
        opacity: 0;
        pointer-events: none;
        z-index: 0;
    }
}


@-ms-keyframes topToBottom {

    0% {
        opacity: 0;
        pointer-events: none;
        z-index: 0;
    }
    5% {
        opacity: 0;
        transform: translateY(-30px);
        pointer-events: none;
        z-index: 0;
    }
    7% {
        opacity: 1;
        transform: translateY(0px);
        pointer-events: all;
        z-index: 2;
    }
    19% {
        opacity: 1;
        transform: translateY(0px);
        pointer-events: all;
        z-index: 2;

    }
    21% {
        opacity: 0;
        transform: translateY(30px);
        pointer-events: none;
        z-index: 0;
    }
    80%, 100% {
        opacity: 0;
        pointer-events: none;
        z-index: 0;
    }
}



/* Bouton */

.liste_liens{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    height: fit-content;
}

.liste_liens.liens_left{
    justify-content: flex-start;
}

.btn, input[type="submit"].btn{
    background-color: var(--Rouge);
    color: var(--Blanc);
    border-radius: var(--small-radius);
    padding: 7px 15px;

    font-size: var(--font-15);
    font-style: normal;
    line-height: 133%;
}


.liste_liens:has(.btn:hover)>svg.fleche_link{
    transform: translateX(4px);
    transition: 0.2s;
}

/* fils d arrianne */

.breadcrumb{
    margin-bottom: 17px;
}

.breadcrumb a, .breadcrumb span{
    color: var(--Gris-txt);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 230.769% ;
    text-transform: uppercase;
}

.breadcrumb span:last-child{
    color: var(--Rouge);
    font-weight: 700;
}


/* Element générale */

.icon-pomzed{
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 8;

}

.icon-pomzed>div{
    height: 50px;
    width: 50px;
    background-color: var(--Blanc);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.icon-pomzed>span{
    color: var(--Rouge, #FF073A);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 105%;
    text-transform: uppercase;
    transition: 0.2s;
}

.icon-pomzed:hover>span{
    font-weight: 700;
    /*letter-spacing: -0.2px;*/
}


.icon-pomzed:hover>div{
    background-color: var(--Rouge);
}


.icon-pomzed>div svg{
    transition: 0.2s ease-in;
}

.icon-pomzed:hover>div svg{
    transform: rotate(10deg);
}


.icon-pomzed:hover>div path{
    stroke: var(--Blanc);
}


.icon-pomzed.icon-25{
    bottom: 128px;
}


/* Bloc Blog-rs */

.blog_rs{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px;
    margin-top: var(--bigspace);
    margin-bottom: var(--verybigspace);
}

.blog_rs>a, .blog_rs>div{
    border-radius: var(--border-radius);
    border: 1px solid var(--Rouge);
    overflow: hidden;
    background-color: var(--Blanc);
    position: relative;
}


.badge{
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 9;
    color: var(--Noir);
    background-color: transparent;
    display: flex;
    align-items: center;
    gap: 5px;

    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height:  213% ;
    text-transform: uppercase;
}


.badge svg{
   margin-bottom: 5px;
}


.blog_rs>div .badge span{
    color: var(--Blanc);
}


.blog_rs>a{
    display: flex;
    padding: 61px 69px 47px 42px;
    flex-direction: column;
    justify-content: space-between;
}

.blog_rs>a>p{
    color: var(--Noir);
    font-size: var(--font-28);
    font-style: normal;
    font-weight: 700;
    line-height: 114.286% ;
    max-width: 266px;

    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;

    /* Nombre de lignes à afficher */
    -webkit-line-clamp: 6;
    line-clamp: 6;
}


.blog_rs .eapps-instagram-feed-posts-item-image-icon svg {
    display: none;
}

#eapps-instagram-feed-1 {
    max-width: 1000px;
}


.blog_rs .eapps-instagram-feed-posts-item-template-tile .eapps-instagram-feed-posts-item-text {
    font-size: var(--font-15);
    text-align: left;
    max-height: 190px;
    width: 100%;
    margin-top: 82px;

    display: -webkit-box;
    -webkit-box-orient: vertical;

    /* Nombre de lignes à afficher */
    -webkit-line-clamp: 9;
    line-clamp: 9;
}

.blog_rs .eapps-instagram-feed-posts-item-template-tile .eapps-instagram-feed-posts-item-overlay {
    display: flex;
    align-items: flex-start;
}


.blog_rs>a:hover{
    background-color: var(--Rouge);
}

.blog_rs>a:hover>p, .blog_rs>a:hover .badge span{
    color: var(--Blanc);
}

.blog_rs>a:hover .badge svg path,
.blog_rs>div:hover .badge svg path{
    fill: var(--Blanc);
}

.blog_rs>a:hover>svg{
    transition: 0.2s ease-out;
}

.blog_rs>a:hover>svg{
    transform: translateX(20%);
}

.blog_rs>a:hover>svg path{
    stroke: var(--Blanc);
}



/*.blog_rs #eapps-instagram-feed-1 .eapps-instagram-feed-posts-item-overlay {*/
/*    background: transparent;*/
/*}*/

/*.blog_rs .eapps-instagram-feed-posts-item-with-data:hover.eapps-instagram-feed-posts-item-template-tile .eapps-instagram-feed-posts-item-image {*/
/*     filter: unset;*/
/*}*/

/*.blog_rs#eapps-instagram-feed-1 .eapps-instagram-feed-posts-item-overlay .eapps-instagram-feed-posts-item-content{*/
/*    height: 100%;*/
/*    display: flex;*/
/*    align-items: flex-end;*/
/*}*/

/*.blog_rs .eapps-instagram-feed-posts-item-template-tile .eapps-instagram-feed-posts-item-text {*/
/*    margin-top: auto;*/
/*    text-align: left;*/

/*    color: #FFF;*/
/*    font-family: Tenon;*/
/*    font-size: 28.522px;*/
/*    font-style: normal;*/
/*    font-weight: 800;*/
/*    line-height: 127%; !* 36.223px *!*/
/*    text-transform: uppercase;*/

/*    max-height: 90%;*/

/*    overflow: hidden;*/
/*    display: -webkit-box;*/
/*    -webkit-line-clamp: 7;*/
/*    -webkit-box-orient: vertical;*/
/*}*/


/*.eapps-instagram-feed-posts-item-with-data.eapps-instagram-feed-posts-item-template-tile .eapps-instagram-feed-posts-item-overlay {*/
/*    !*opacity: 1;*!*/
/*    !*visibility: visible;*!*/
/*    !*pointer-events: all;*!*/
/*    !*padding-top: 0;*!*/
/*}*/



/* bloc FAQ */


.filtres_faq{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 22px;
    margin-bottom: 36px;
}

.filtres_faq label input{
    display: none;
}

.filtres_faq label{
    cursor: pointer;
    border: 1px solid var(--Rouge);
    border-radius: var(--small-radius);
    /*background-color: var(--Blanc);*/
    padding: 8px 17px 6px;

    font-size: var(--font-15);
    font-weight: 400;
    line-height: 133.333%;
    transition: 0.2s ease-out;
}


.filtres_faq label:hover{
    background-color: var(--Blanc);
}


.filtres_faq label:has(input:checked){
    background: var(--Rouge);
    color: var(--Blanc);
}

.bloc_faq{
    margin-bottom: 110px;
}

.bloc_faq details{
    border-top: solid #9A9999 1px;
    padding: 27px 0;
    width: 100%;
}

.bloc_faq .liste_faq{
    border-bottom: solid #9A9999 1px;
    margin-bottom: var(--ltspace);
    max-width: 866px;
    width: 100%;
}

.bloc_faq  summary{
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.bloc_faq details .contenu{
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease, padding-bottom 0.1s ease;
}

details .contenu{
    max-width: 800px;
}

.bloc_faq details.open .contenu{
    max-height: 1500px; /* ou une valeur suffisante selon le contenu */
}

.bloc_faq details .contenu p, .bloc_faq details .contenu ol, .bloc_faq details .contenu ul{
    margin: 15px 0 10px;
    width: calc(100% - 60px);
}

summary::marker{
    display: none;
}

/* Enlève la flèche par défaut du <summary> */
summary::-webkit-details-marker {
    display: none;
}

/* Pour Firefox */
summary {
    list-style: none;
}

.bloc_faq  details .plus_rond{
    display: grid;
    height: 16px;
    width: 16px;
    align-items: center;
    justify-items: center;
    flex: 0 0 auto;
}


.bloc_faq  details .plus_rond div{
    height: 1px;
    width: 100%;
    grid-area: 1 / 1;
    background-color: var(--Rouge);
    transition: 0.2s ease-in;
}


.bloc_faq  details .plus_rond div:last-child{
    transform: rotate(90deg);
}

.bloc_faq  details .plus_rond.to_moins div:last-child{
    transform: rotate(90deg) scale(0%);

}

.bloc_faq details h2, .bloc_faq details h3 {
    margin: 0 18px 0 0;
    color: var(--Rouge);
    font-size: var(--font-28);
    font-style: normal;
    font-weight: 700;
    line-height: 114.286% ;
}


.bottom_cote{
    display: flex;
    width: fit-content;
    flex-wrap: wrap;
    gap: 10px 27px;
}

.bottom_cote .general_search {
    margin: auto auto auto 0;
    position: relative;
}

.bloc_faq .bottom_cote{
    margin-top: var(--ltspace);
}





/* show reel */

.home #container{
    padding-top: 0;
}

.contain_showreel{
    height: 130svh;
}

.home .contain_showreel{
    height: 100svh;
}

.bloc_showreel{
    position: sticky;
    top: 0px;
    min-height: 100svh;
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: var(--mdspace);
    padding-bottom: var(--mdspace);
}

.bloc_showreel .img_vdo{
    border-radius: var(--big-radius);
    aspect-ratio: 16/9;
    max-height: calc(100svh - var(--htr-menu) - var(--mdspace));
    margin: auto;
    width: min(
            100%,
            calc((100svh - var(--htr-menu) - var(--mdspace)) * 16 / 9)
    );
}

.home .bloc_showreel{
    padding-top: var(--htr-menu);
    padding-bottom: var(--mdspace);
}




.page-template-page-succursale .contain_showreel, .page-template-page-succursale .bloc_showreel{
    height: fit-content;
    min-height: auto;
}

.page-template-page-succursale .contain_showreel{
    margin-top: var(--bigspace);
    margin-bottom: var(--bigspace);
}


/* image et video */

.img_vdo{
    width: 100%;
    /*height: 100svh;*/
    position: relative;
    overflow: hidden;
}

.img_vdo a{
    display: flex;
    height: 100%;
    pointer-events: none;
}

.img_vdo video, .img_vdo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* img aleatoir en bas de page */

.img_bottom{
    width: 100%;
    margin: 0;
    display: flex;
    min-height: 220px;
    aspect-ratio: 5 / 2;
}


/* TODO : porfolio */

/**************
***PORTFOLIO***
***************/

/******
PROJETS
 */

body:has(.single-projets){
    background: var(--Blanc);
}

.page-template-template-projets #random-svg{
    display: none!important;
}



/*********************************/

.list-categorie{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 22px;
    margin-bottom: 36px;
}

.list-categorie .category-projets{
    cursor: pointer;
    border: 1px solid var(--Rouge);
    border-radius: var(--small-radius);
    /*background-color: var(--Blanc);*/
    padding: 8px 17px 6px;

    font-size: var(--font-15);
    font-weight: 400;
    line-height: 133.333%;
    transition: 0.2s ease-out;
    margin: 0;
}


.list-categorie .category-projets:hover{
    background-color: var(--Blanc);
}


.list-categorie .category-projets.active{
    background: var(--Rouge);
    color: var(--Blanc);
}

.list-categorie .liste_liens{
    margin-left: auto;
    margin-right: 0;
}

/*********************************/

.loader {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 20px ;
}

.loader span {
    width: 18px;
    height: 18px;
    background: #d40028; /* change la couleur si tu veux */
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.loader span:nth-child(1) {
    animation-delay: 0s;
}
.loader span:nth-child(2) {
    animation-delay: 0.2s;
}
.loader span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.3;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}
.search-bar{
    display: flex;
    margin-left: auto;
    padding: 0;
}
#search-input{
    outline: 0;
    border: none;
    border-bottom: 1px solid black;
    font-size: 18px;
    color: #545454;
    width: 400px;
}

#search-input::placeholder{
    font-size: 18px;
}

.list-categorie .p:last-of-type{
    display: none;
}

.category > span {
    display: inline-block;
    margin-right: 7px;
}

.category > span:last-of-type {
    display: none;
}

.all-filter {
    cursor: pointer;
}

.category-projets {
    cursor: pointer;
    transition: 0.5s ease-in-out all;
}

.category-projets:not(.active) {
}
.category-projets.active{
}
.category-projets:hover{
    opacity: 1;
}
.container-projets {
    position: relative;
    padding: 0px var(--side-base) 0 var(--side-base);
    margin-bottom: var(--bigspace);
}

.grid-projets {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
    transition: all .5s cubic-bezier(.25, .46, .45, .94);
}

.grid-projets.hidden {
    transform: translate(0, 80px);
    opacity: 0;
    transition: all .5s cubic-bezier(.25, .46, .45, .94);
}

.block-projet {
    position: relative;
    height: 27.9vw;
    width: 100%;
    transition: all .5s cubic-bezier(.25, .46, .45, .94);
    display: block;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}

.block-projet.appear {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.block-projet.active {
    z-index: 200;
}

.block-projet video,
.block-projet img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s cubic-bezier(.25, .46, .45, .94);
    transform: scale(1);
}

.project-image-container {
    height: 27.9vw;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.txt-projets {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 50px;
    opacity: 0;
    transition: all 0.5s cubic-bezier(.25, .46, .45, .94);
    background-color: var(--Rouge);
}

.relative-proj.active .txt-projets,
.block-projet:hover .txt-projets {
    opacity: 1;
    transition: all 0.5s .1s cubic-bezier(.25, .46, .45, .94);
}

.txt-projets p, .txt-projets h2 {
    color: white;
    margin: 0;
    font-weight: 400;
}
.txt-projets h2 {
    font-size: var(--font-28);
    line-height: 120%;
}
.txt-projets p {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 15px;
    margin-bottom: 10px;
}

.txt-projets .sur-proj {
    font-size: var(--font-13);
    text-transform: uppercase;
    letter-spacing: unset;
}
.grid-projet-blog {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
    padding: 90px var(--side-base);
    margin: 90px 0 0 0;
    position: relative;
    z-index: 6;
}
.single-projets .grid-projet-blog{
    background: #ededed;

}
.relative-proj{
    position: relative;
    overflow: hidden;
}

.extern-ling-block{
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 201;
    height: 16px;
    width: 16px;
    opacity: 0;
    transition: all 0.5s cubic-bezier(.25, .46, .45, .94);
}
.extern-ling-block svg{
    height: 16px;
    width: 16px;
}
.extern-ling-block svg path{
    transition: 0.5s ease-in-out all;
}
.extern-ling-block:hover svg path{
    stroke: #d40028;
}
.relative-proj.active .extern-ling-block{
    opacity: 1;
}

.single-projets {
    padding: 0 var(--side-base) 0 var(--side-base);
}
.blog #random-svg{
    display: none;
}
.single-projets .titre-intro p{
    margin-bottom: 10px;
}
.single-projets .titre-intro p:last-of-type{
    margin-bottom: 0;
}
.head-projet, .grid-content-projet {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /*grid-gap: 35px;*/
    margin-bottom: var(--ltspace);
    position: relative;
}

.grid-content-projet {
    margin-bottom: calc(var(--ltspace) / 2);
}
.grid-content-projet .titre-txt{
    max-width: 900px;
}
.grid-content-projet .titre-txt p{
    margin-bottom: 10px;
}
.head-projet p {
    margin-bottom: 0;
}

.head-projet > div:nth-of-type(1) {
    padding-right: 11.5px;
}

.head-projet > div:nth-of-type(2), .grid-content-projet > div:nth-of-type(2) {
    padding-left: 11.5px;
}

.list-projets {
    opacity: 0;
    animation: appear 0.4s 0.4s ease-in-out forwards;
    /*min-height: 140px;*/
}

.list-projets a {
    display: block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 3px;
}

.list-projets a.active {
    font-weight: 700;
}

.grid-galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
    opacity: 0;

    animation: appear 0.4s 0.1s ease-in-out forwards;
    /*margin-bottom: var(--mdspace);*/
    margin-bottom: var(--ltspace);
}
.bloc-youtube{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}
.youtube-full{
    display: flex;
    margin-bottom: var(--ltspace);
}
.youtube-full iframe,
.youtube-wrapper iframe{
    width: auto;
    height: auto;
    max-height: 80vh;
    margin: auto;
}

.format-169 iframe{ aspect-ratio: 16 / 9; }
.format-34  iframe{ aspect-ratio: 3 / 4; }
.format-916 iframe{ aspect-ratio: 9 / 16; }
.format-11  iframe{ aspect-ratio: 1 / 1; }


.lien_exter_site{
    color: #d40028;
    display: flex;
    margin-top: 20px;
    align-items: center;
    font-size: 20px;
    text-decoration: none;
    transition: 0.4s ease-in-out all;
}
.lien_exter_site:hover{
    opacity: 0.6;
    color: #d40028;
    text-decoration: none;
}
.lien_exter_site svg{
    margin-left: 10px;
}
.lien_exter_site:hover svg{
    transform: translate(3px, -3px);
}
.list-projets-cli{
    margin-top: 20px;
}
.list-projets-cli a{
    line-height: 130%;
    color: #d40028;
    font-size: 1.2rem;
    display: block;
    margin-bottom: 2px;
}
.list-projets-cli a.active{
    font-weight: 700;
}

@keyframes appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.grid-galerie a:nth-of-type(1) {
    grid-area: 1 / 1 / 2 / 2;
}

.grid-galerie a:nth-of-type(2) {
    grid-area: 1 / 2 / 2 / 3;
}

.grid-galerie a:nth-of-type(3) {
    grid-area: 1 / 3 / 2 / 4;
}

.grid-galerie a:nth-of-type(4) {
    grid-area: 2 / 1 / 3 / 2;
}

.grid-galerie a:nth-of-type(6) {
    grid-area: 3 / 1 / 4 / 2;
}

.grid-galerie a:nth-of-type(5) {
    grid-area: 2 / 2 / 4 / 4;
}

.grid-galerie a {
    line-height: 0;
}

.grid-galerie img,
.grid-galerie video {
    width: 100%;
    height: 29.4vw;
    object-fit: cover;
}

.grid-galerie img.is_svg{
    object-fit: contain;
}

.old-web.grid-galerie img {
    padding: 5vw 0;
    background: #e8e8e8;
}

.grid-galerie a:nth-of-type(5) img,
.grid-galerie a:nth-of-type(5) video {
    /*height: 100%;*/
    height: calc(29.4vw * 2 + 30px);
}

.contenu-projet .image-full-bloc, .contenu-projet .vdo-full-bloc {
    max-width: unset !important;
    height: auto;
}

.image-full-bloc{
    width: calc(100% + var(--side-base) * 2);
    height: auto;
    margin-left: calc(-1 * var(--side-base));
    margin-bottom: var(--ltspace);
    max-width: unset;
}

.vdo-full-bloc.no-marg,
.image-full-bloc.no-marg{
    /*margin-bottom: -0px;*/
    margin-bottom: -4px;
}
.vdo-full-bloc.no-marg{
    margin-bottom: -9px;

}
.vdo-full-bloc{
    width: calc(100% + var(--side-base) * 2);
    height: auto;
    margin-left: calc(-1 * var(--side-base));
    margin-bottom: var(--ltspace);
    max-width: unset;
    object-fit: cover;
}


.content-vdo-base {
    padding: 100px var(--side-base);
    width: calc(100% + var(--side-base)* 2);
    margin-left: calc(-1* var(--side-base));
    margin-bottom: var(--ltspace);
}

.content-vdo-base video {
    max-width: 100%;
    display: flex;
    height: auto;
    max-height: 80vh;
    margin: auto;
}

.navigation-projet {
    display: flex;
    align-items: center;
    height: 40px;
}

.navigation-projet a {
    display: flex;
    align-items: center;
}

.go-back {
    margin-right: 30px;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    display: flex;
}

.go-back svg {
    margin-right: 8px;
    margin-top: -1px;
    width: 7px;
    height: 18px;
    transition: all .5s cubic-bezier(.25, .46, .45, .94);
}
.go-back:hover svg{
    transform: translate(-5px,0);
}

.flex-prev {
    display: flex;
    align-items: center;
    margin-left: -10px;
}

.flex-prev > span {
    font-size: 22px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: -1px;
}

.flex-prev a {
    line-height: 3px;
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    transition: all .5s cubic-bezier(.25, .46, .45, .94);
}
.flex-prev a:hover{
    transform: translateX(5px);
}
.flex-prev a:last-of-type{
    margin-bottom: -0px;
}
.flex-prev svg{
    height: 18px;
    width: 13px;

}
.flex-prev a:hover svg path{
    fill: var(--Noir);
}
.flex-prev .prev-proj {
    transform: rotate(180deg) translate(0);

}
.flex-prev .prev-proj:hover{
    transform: rotate(180deg) translateX(10px);

}
.go-back{
    margin-bottom: 15px;
}
.go-back,
.go-back:hover{
    color: #d40028;
}

/* 3 random */

.random_3_projects, .random_6_projects{
    margin-top: var(--lrgspace);
    margin-bottom: var(--lrgspace);
    padding-bottom: 0;
}

.random_3_projects .grid-projets, .random_6_projects .grid-projets{
    margin-bottom: 36px;
}




/*************
* Pages  TODO
 *************/

.default_content{
    max-width: 1000px;
}


/* Accueil */

.accueil_projet{
    margin-top: 0;
    margin-bottom: var(--tnyspace);
}

.mrg_txt{
    margin-top: var(--bigspace);
    margin-bottom: var(--bigspace);
}


.no_mrg_top{
    margin-top: 0;
}

.no_mrg_bottom{
    margin-bottom: 0;
}


.no_mrg_top>*:first-child{
    margin-top: 0;
}




/* Page prestations */

.all_presta{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px 23px;
    margin-top: var(--smallspace);
    margin-bottom: var(--lrgspace);
}

.all_presta>a{
    border-radius: var(--border-radius);
    padding: var(--padding-card);
    background-color: var(--Rouge);
    color: var(--Blanc);
    min-height: fit-content;
    /*height: 30vw;*/
    max-height: 422px;
}

.all_presta>a>div{
    min-height: 27vw;
    height: fit-content;
}

.all_presta>a *{
    color: var(--Blanc);
}

.all_presta>a span{
    display: inline-flex;

    max-width: 187px;
    color: var(--Blanc);
    font-size: var(--font-28);
    font-weight: 700;
    line-height: 114.286%;
    text-transform: uppercase;
}


ol {
    list-style: decimal;
    list-style-position: outside; /* ou inside */
    padding-left: 22px;
    margin: 17px 0;
}

ol li {
    display: list-item;
    font-size: var(--font-20);
    margin-bottom: 16px;
    padding-left: 9px;
}

ol li::marker {
    color: var(--Rouge);
    font-weight: 500;
    display: flex;
}


.all_presta>a ul{
    margin-top: 18px;
    display: flex;
    flex-direction: column;
}

.with_ul_point ul{
    list-style: disc;
    padding-left: 27px;
}

.with_ul_arrow ul li, .with_ul_point ul li{
    font-size: var(--font-20);
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.with_ul_point ul li {
    display: list-item;
    padding-left: 4px;
}

.with_ul_point ul li::marker {
    color: var(--Gris-txt);
    font-weight: 500;
    display: flex;
    font-size: 15px;
}

.with_ul_arrow ul li:before{
   content: '';
    display: inline-block;
    width: 14px;
    height: 12px;

    margin-top: 4px;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M0 5.9693L13.2857 5.9693M9.50003 11.2788L13.3096 5.95122L9.50003 0.278809' stroke='%23470011'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M0 5.9693L13.2857 5.9693M9.50003 11.2788L13.3096 5.95122L9.50003 0.278809' stroke='%23470011'/%3E%3C/svg%3E") no-repeat center;

    mask-size: contain;

    background-color: var(--Rouge);
    transition: 0.5s ease;
    margin-right: 12px;
    flex: 0 0 auto;
}

.with_ul_arrow ul li:has(a:hover):before{
    transform: translateX(4px);
    transition: 0.2s;
}

.all_presta .with_ul_arrow ul li:before{
    background-color: var(--Blanc);
}

.all_presta>a:nth-child(3), .all_presta>a:nth-child(5){
    background-color: var(--Noir);
}

.all_presta>a:first-child, .all_presta>a:nth-child(6), .all_presta>a:nth-child(7){
    background-color: var(--Gris);
}

.all_presta>a:first-child span,
.all_presta>a:nth-child(6) span,
.all_presta>a:nth-child(7) span{
    color: var(--Rouge);
}


.all_presta>a:first-child ul li,
.all_presta>a:nth-child(6) ul li,
.all_presta>a:nth-child(7) ul li{
    color: var(--Noir);
}

.all_presta>a:first-child ul li:before,
.all_presta>a:nth-child(6) ul li:before,
.all_presta>a:nth-child(7) ul li:before{
    background-color: var(--Rouge);
}


.all_presta .img_vdo{
    grid-area: 3 span / 2 span ;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius);
}

.slogan{
    margin-top: 40px;
}

.slogan p{
    font-size: 28px;
    font-style: italic;
    font-weight: 700;
    line-height: 114.286%;
}

.slogan p em{
    color: var(--Rouge);
    font-style: italic;
    font-weight: 700;
    line-height: 114.286%;
}




.li_width_bull > li{
    position: relative;
    cursor: pointer;
}


.li_width_bull > li .li_bull{
    position: absolute;
    top: -30px;
    left: -7px;
    /*opacity: 0.1;*/
    z-index: 9;
    padding: 28px 90px 30px 35px;
    background-color: var(--Gris-txt);
    width: calc(100% + var(--side-base) + 7px);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    transform: translateX(102%);
    transition: 0.4s cubic-bezier(0.17, 0.97, 0.21, 0.97);
}

.li_width_bull > li .li_bull *{
    color: var(--Blanc);
}

.li_width_bull > li .li_bull span{
    font-size: var(--font-13);
    line-height: 153.846% ;
    text-transform: uppercase;
}

.li_width_bull > li .li_bull p{
    font-size: var(--font-22);
    font-weight: 300;
    margin-top: 10px;
    margin-bottom: 0;
}

.close_bull{
    position: absolute;
    top: 0;
    right: 0;
    padding: 31px 28px 10px 10px;
    cursor: pointer;
}

.close_bull:hover svg path{
   stroke: var(--Noir);
}

.li_width_bull > li .li_bull.show{
    transform: translateX(0%);
}

.li_width_bull > li:hover::before {
    transform: translateX(4px);
    transition: 0.2s;
}


/* Page dedier prestations */

.autres_presta{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 21px 25px;
    margin-top: var(--smallspace);
    margin-bottom: var(--bigspace);
}

.autres_presta>a{
    border-radius: var(--border-radius);
    border: 1px solid var(--Rouge);
    padding: var(--padding-card);
}

.autres_presta>a span{
    display: inline-flex;

    max-width: 187px;
    color: var(--Rouge);
    font-size: var(--font-28);
    font-weight: 700;
    line-height: 114.286%;
    text-transform: uppercase;
}


.txt_cote{
    display: flex;
    justify-content: space-between;
}

.txt_cote>.txt>p:first-child{
    margin-top: 0;
}

.txt_cote.with_ul_arrow ul{
    display: flex;
    flex-direction: column;
    flex: 0 0 30%;
    margin-top: 8px;
}

.txt_cote.with_ul_arrow ul li:before{
    background: var(--Rouge);
}


.txt_btn{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}

/*.txt_btn .txt p:last-child{*/
/*  margin-bottom: 0;*/
/*}*/

.txt_btn .liste_liens{
    margin-bottom: var(--smallspace);
}


/* Page profil */

h1.big_titre{
    color: var(--Rouge);
    font-size: var(--font-85);
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    text-transform: uppercase;
    box-sizing: initial;
    max-width: 1288px;
}

.logo_pom_pix_bada{
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
    margin-top: 42px;
}

.logo_pom_pix_bada a{
    display: flex;
}

.logo_pom_pix_bada a svg path{
    transition: 0.2s ease-in;
}

.logo_pom_pix_bada a:hover svg path{
    fill: var(--Noir);
}




/* Succursale */

.simple_mansory {
    columns: 3;
    column-gap: 29px;
    margin-top: var(--smallspace);
    margin-bottom: var(--verybigspace);
}

.simple_mansory > a {
    break-inside: avoid;
    margin-bottom: 29px;
    display: flex;
}

.simple_mansory > a picture{
    display: flex;
}


/* Page Blog */

.all_blog_job{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px 23px;
    margin-top: var(--smallspace);
    margin-bottom: var(--lrgspace);
}

.all_blog_job>a{
    border-radius: var(--border-radius);
    padding: 0;
    background-color: var(--Rouge);
    color: var(--Blanc);
    min-height: fit-content;
    /*height: 30vw;*/
    max-height: 485px;
    overflow: hidden;
}

.all_blog_job>a>div{
    min-height: 27vw;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.all_blog_job>a>div>img{
    width: 100%;
    height: auto;
    aspect-ratio: 39 / 25;
}

.all_blog_job>a>div>div{
    padding: 26px 30px 24px;
    flex: auto;
    display: flex;
    flex-direction: column;
    max-height: unset;
    gap: 29px;
}

.all_blog_job>a>div>div .blog_card_meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto 0 0 0;
}

.all_blog_job>a>div>div .blog_card_meta p{
    margin: 0;
    color: var(--Noir);
    font-size: var(--font-13);
    font-style: normal;
    font-weight: 400;
    line-height:  153.846%;
    text-transform: uppercase;
}

.all_blog_job>a *{
    color: var(--Blanc);
}

.all_blog_job>a span{
    display: inline-flex;
    color: var(--Blanc);
    font-size: var(--font-22);
    font-weight: 400;
    line-height: 114.286%;
}



.all_blog_job>a:nth-child(2),
.all_blog_job>a:nth-child(4n){
    background-color: var(--Noir);
}

.all_blog_job>a:first-child,
.all_blog_job>a:nth-child(6n),
.all_blog_job>a:nth-child(7n){
    background-color: var(--Gris);
}

.all_blog_job>a:first-child span,
.all_blog_job>a:nth-child(6n) span,
.all_blog_job>a:nth-child(7n) span{
    color: var(--Noir);
}

.all_blog_job>a:nth-child(2)>div>div .blog_card_meta p,
.all_blog_job>a:nth-child(4n)>div>div .blog_card_meta p{
    color: var(--Blanc);
    opacity: 0.5;
}

.all_blog_job>a:first-child>div>div .blog_card_meta p,
.all_blog_job>a:nth-child(6n)>div>div .blog_card_meta p,
.all_blog_job>a:nth-child(7n)>div>div .blog_card_meta p{
    color: var(--Gris-txt);
}

.all_blog_job>a .blog_card_meta svg path{
    stroke: var(--Blanc);
}

.all_blog_job>a:first-child .blog_card_meta svg path,
.all_blog_job>a:nth-child(2) .blog_card_meta svg path,
.all_blog_job>a:nth-child(4n) .blog_card_meta svg path,
.all_blog_job>a:nth-child(6n) .blog_card_meta svg path,
.all_blog_job>a:nth-child(7n) .blog_card_meta svg path{
    stroke: var(--Rouge);
}

.all_blog_job>a .blog_card_meta svg{
    transition: 0.2s ease-in;
}

.all_blog_job>a:hover .blog_card_meta svg{
    transform: translateX(4px);
}

.all_blog_job>a:hover>div>div{
    opacity: 0.8;
    transition: 0.2s ease-in;
}

.blog_search{
    width: fit-content;
    margin-left: 0;
    margin-right: auto;
}

.blog_search>input{
    height: 43px;
    min-width: 305px;
}

.general_search>input::placeholder{
    color: rgba(97, 49, 60, 0.70);
}










.blog-card {
    opacity: 0;
    transform: translateY(40px);
    animation: blogAppear .6s ease forwards;
}

.blog-card:nth-child(3n + 1) {
    animation-delay: 0s;
}

.blog-card:nth-child(3n + 2) {
    animation-delay: .12s;
}

.blog-card:nth-child(3n) {
    animation-delay: .24s;
}

@keyframes blogAppear {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Single blog */

.action_blog{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 26px;
    margin-top: 21px;
    padding-bottom: 21px;

    border-bottom: 1px solid #9A9999;
}

.action_blog p, .action_blog button span{
    color: var(--Gris-txt);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 230.769%;
    text-transform: uppercase;
    margin: 0;
}

.action_blog>p{
    margin-left: 0;
    margin-right: auto;
}

.action_blog .duree{
    display: flex;
    gap: 5px;
    align-items: center;
}

.action_blog .duree svg{
  margin-bottom: 2px;
}


/* lien de partage */

.btn_partage{
    display: flex;
    gap: 9px;
    padding: 0;
    align-items: center;
    background: transparent;
}

.single-blog #footer{
    margin-top: var(--bigspace);
}


.share_popup_overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:9999;
}

.share_popup{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(.9);
    background:var(--Rouge);
    padding:32px;
    border-radius:var(--small-radius);
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:10000;
    width: 90%;
    min-width: 200px;
    max-width:340px;
}

.share_popup *{
    color: var(--Blanc);
}


.share_popup h3{
    margin-top: 0;
}

.share_popup.active,
.share_popup_overlay.active{
    opacity:1;
    visibility:visible;
}

.share_popup.active{
    transform:translate(-50%,-50%) scale(1);
}

.share_popup a,
.share_popup button{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    margin-top:12px;
}

button.share_popup_close{
    position:absolute;
    top:12px;
    right:10px;
    background: transparent;
    width: fit-content;
    margin-top: 0;
}


button.share_copy{
    display: flex;
    gap: 10px;
    color: var(--Blanc);
    background-color: transparent;
    padding-left: 0;
}

button.share_copy span{
    color: var(--Blanc);
    font-size: var(--font-15);
    font-weight: 500;
}

button.share_copy svg{
    height: 22px;
    width: 22px;
}

.rs_share{
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.rs_share a{
    width: fit-content;
    margin: 0;
}

.rs_share a svg{
    width: 30px;
    height: 30px;
}

.share_copy svg path,
.share_copy span{
    transition: 0.2s ease-in;
}

.rs_share a:hover svg path,
.share_popup_close:hover,
.share_copy:hover svg path,
.share_copy:hover span{
    /*opacity: 0.6;*/
    color: var(--Noir);
    fill: var(--Noir);
}






/* todo Contenu Flexible */

.flexible_content{

}

.flexible_content h2{
    font-size: 45px;
    font-weight: 500;
    margin-bottom: 20px;
    margin-top: 45px;
}

.flexible_content h3{
    font-size: 32px !important;
    font-weight: 700;
    margin-top: 20px !important;
    margin-bottom: 16px !important;
    color: var(--Rouge);
}

.flexible_content h4{
    font-size: var(--font-22) !important;
    font-weight: 700;
    margin-top: 19px !important;
    margin-bottom: 17px !important;
    color: var(--Noir);
}

.flexible_content p.pom-text{
    color: var(--Rouge) !important;
}


.flexible_content .flex_img img,
.flex_vdo video,
.flex_vdo iframe{
    width: 100%;
    border-radius: var(--border-radius);
}

.flex_img, .flex_vdo, .block-gallery{
    margin-top: var(--bigspace);
    margin-bottom: var(--bigspace);

    box-sizing: initial;
    max-width: 815px;
}


.single-blog .flexible_content h2{
    color: var(--Rouge);
    font-size: var(--font-28);
    font-weight: 700;
    line-height:  114.286% ;
    max-width: 815px;
    text-transform: none;
}

.flexible_content .txt_en_avant{
    background: var(--Gris);
    border-radius: var(--border-radius);
    padding: 50px;
    max-width: 815px;
    margin-top: var(--smallspace);
    margin-bottom: var(--smallspace);
}

.flexible_content .txt_en_avant h2{
    color: var(--Noir);
    margin-top: 0;
    margin-bottom: 26px;
}


    /* test slider */

.image-slider {
    width: 100%;
    overflow: hidden;
    margin-top: var(--bigspace);
}

.image-slider .swiper-slide {
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}


.image-slider .swiper-slide picture {
    width: 100%;
    height: 100%;
}

.image-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}





/* Formulaire */

.wpcf7{
    margin: var(--smallspace) 0 var(--mdspace);
}

input, textarea, select, option {
    font-family: "tenon", sans-serif;
    font-size: var(--font-15);
    padding: 13px;
}

form .formulaire{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 20px;
    max-width: 828px;
}

form .formulaire .form-group p{
    margin: 0;
}

form .formulaire select{
    background: transparent;
    border: 1px solid var(--Rouge);
    width: 100%;
    margin-top: 0;
    border-radius: var(--small-radius);
    font-size: 18px;
    cursor: pointer;
}

form .formulaire select:focus,
form .formulaire select:hover{
    background: var(--Blanc);
}


form .formulaire .select_custom span {
    position: relative;
}

form .formulaire .select_custom span:before {
    content: '';
    display: block;
    width: 12px;
    height: 7px;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M0.341797 0.364502L5.66938 5.3645L10.8418 0.364502' stroke='black'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M0.341797 0.364502L5.66938 5.3645L10.8418 0.364502' stroke='black'/%3E%3C/svg%3E") no-repeat center;

    -webkit-mask-size: contain;
    mask-size: contain;

    background-color: var(--Rouge);
    transition: 0.5s ease;
    flex: 0 0 auto;
    position: absolute;
    right: 12px;
    top: 50%;
    /*transform: translateY(-50%);*/
}

form .formulaire .select_custom span select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

form .formulaire .select_custom span select::-ms-expand {
    display: none;
}

form .formulaire .select_custom span select:focus{
    outline: none;
    box-shadow: none;
}

form .formulaire .select_custom span:has(select:focus):before {
    transform: rotate(-180deg);
}

form .formulaire input[type='text'],
form .formulaire input[type='email'],
form .formulaire input[type='tel'],
form .formulaire textarea{
    background: transparent;
    border: 1px solid var(--Rouge);
    width: 100%;
    margin-top: 0;
    color: var(--Gris-txt);
    border-radius: var(--small-radius);
    font-size: 18px;
}

form .formulaire input[type='text']:focus,
form .formulaire input[type='email']:focus,
form .formulaire input[type='tel']:focus,
form .formulaire textarea:focus,
form .formulaire input[type='text']:hover,
form .formulaire input[type='email']:hover,
form .formulaire input[type='tel']:hover,
form .formulaire textarea:hover{
    background: var(--Blanc);
}

form .formulaire input::placeholder,
form .formulaire textarea::placeholder{
   color: var(--Gris-txt);
    opacity: 0.7;

}

form .formulaire .col-xl-12,
form .formulaire .col-md-12,
form .formulaire .sub_form{
    grid-area: 1 span / 2 span;
}


form .formulaire input[type="file"]{
    color: var(--Gris-txt);
    width: 100%;
    font-size: 18px;
    padding: 0;
}

form .formulaire input[type="file"]::file-selector-button {
    background: var(--Gris-txt);
    border-radius: var(--small-radius);
    color: var(--Blanc);
    transition: .2s;
    padding: 6px 9px;
    cursor: pointer;
    margin-right: 20px;
    border: 0 solid transparent;
    font-size: 18px;
}

form .formulaire input[type="file"]::file-selector-button:hover {
    background: var(--Rouge);
    color: var(--Blanc);
}

/* Compatibilité anciens Chrome/Safari */
form .formulaire input[type="file"]::-webkit-file-upload-button {
    background: var(--Gris-txt);
    border-radius: var(--small-radius);
    color: var(--Blanc);
    border: 0 solid transparent;
    transition: .2s;
    padding: 6px 9px;
    margin-right: 20px;
    cursor: pointer;
    font-size: 18px;

}

.btn-file input, .btn-file>p{
    margin: 0;
}


.honeypot_invisible{
    position: absolute;
}

form .formulaire .btn-submit{
    display: flex;
    justify-content: flex-end;
}

form .formulaire .btn-submit>p{
    display: flex;
    align-items: center;
}

form .formulaire .btn-submit>p:before{
    content: '';
    display: inline-block;
    width: 17px;
    height: 14px;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M0 5.9693L13.2857 5.9693M9.50003 11.2788L13.3096 5.95122L9.50003 0.278809' stroke='%23470011'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M0 5.9693L13.2857 5.9693M9.50003 11.2788L13.3096 5.95122L9.50003 0.278809' stroke='%23470011'/%3E%3C/svg%3E") no-repeat center;

    mask-size: contain;

    background-color: var(--Rouge);
    transition: 0.5s ease;
    margin-right: 15px;
    flex: 0 0 auto;
}

form .formulaire .btn-submit input{
    margin-top: 0;

}


form .formulaire .btn-submit:has(input:hover) p:before{
    transform: translateX(4px);
    transition: 0.2s;
}


.wpcf7-spinner{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


input[type="submit"].btn{
    font-size: 18px;
    text-transform: uppercase;
    padding: 13px 15px;
}




.txt_contact{
    margin-top: var(--ltspace);
}

.txt_contact p em{
    color: var(--Rouge);
    font-style: normal;
}

.txt_contact p em strong{
    color: var(--Rouge);
}

.galerie_contact{
    display: flex;
    gap: 23px;
    margin-top: 32px;
    margin-bottom: var(--bigspace);
}

.galerie_contact>*{
    flex: 1;
}

.galerie_contact img{
   border-radius: var(--border-radius);
    width: 100%;
    height: auto;
}


.galerie_contact .item_contact img{
    aspect-ratio: 19 / 10;
}

.galerie_contact .rect_item img{
    aspect-ratio: 28/30;
}

.item_contact h3{
    margin-top: 29px;
    margin-bottom: 12px;
    color: var(--Noir-pur);
    font-size: 25px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-transform: uppercase;
}

a.item_contact:hover h3{
    color: var(--Rouge);
}

.item_contact p{
    margin-top: 12px;
    margin-bottom: 10px;
    color: var(--Noir-pur);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
}

a.item_contact:hover p{
    color: var(--Noir);
}


/* Job */

.page-template-page-job .flexible_content h2 {
    font-size: var(--font-28);
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 25px;
    line-height: 114.286%;
    color: var(--Gris-txt);
    max-width: 815px;
    text-transform: none;
}

.section_stage{
    margin-top: var(--mdspace);
}




    /* TODO : Footer */

.lien_logo{
    display: flex;
}

#footer{
    background-color: var(--Noir);
    padding: 74px var(--side-base) 53px;
}

#footer .logo_footer a>svg path:first-child{
    fill: var(--Blanc);
}

.haut_footer{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    justify-content: space-between;
    margin-top: 45px;
    margin-bottom: 0;
}

.haut_footer .gauche{
    display: flex;
    gap: 67px;
    margin-bottom: 70px;
}

.listes_footer p,
.listes_footer a,
.listes_footer a:visited{
    margin: 0;
    color: var(--Blanc);
    line-height: 25px;
    line-height: 166%;
}

a.titre_footer, p.titre_footer{
    color: var(--Rouge) !important;
    font-weight: 700;
    text-transform: uppercase;
}

.contacts{
    display: flex;
    justify-content: flex-end;
    gap: 21px;
}


.rs{
    display: flex;
    align-items: center;
    gap: 0;
    height: fit-content;
}

.rs a{
    padding-left: 5px;
    padding-right: 5px;
}

.rs a:first-child{
    padding-left: 9px;
}

.rs a:last-child{
    /*padding-right: 0;*/
}

.rs a svg{
    transition: 0.2s ease-out;
}

.rs a:hover svg{
    transform: scale(1.2) rotate(10deg);
}


#copyright{
    color: var(--Blanc, #FFF);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 240%;
    opacity: 0.5;
    display: flex;
    justify-content: flex-end;
    gap: 21px;
    grid-area: 1 span / 2 span;
}
#copyright a, #copyright a:visited, #copyright a:hover{
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--Blanc);
}


#copyright svg path, #copyright svg rect{
    fill: #A2A79E;
}




/* Cookie */

.cookie-popup {
    position: fixed;
    inset: auto auto 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(5px);
}
.cookie-popup.show {
    visibility: visible;
    opacity: 1;
}
.cookie-popup-content {
    background: rgba(0, 14, 28, 0.95);
    padding: 2rem;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.cookie-popup-content>div{
    display: flex;
    align-items: center
}
.cookie-popup-content p {
    color: var(--Blanc);
    margin: 1rem 0;
    font-size: 0.95rem;
}
.cookie-popup-content a {
    color: var(--Blanc);
    text-decoration: underline;
}
.cookie-popup-content button {
    background: var(--Blanc);
    color: var(--Noir);
    border: none;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    padding: 0.7rem 1.5rem;
    cursor: pointer;
    font-size: 1rem;
    height: fit-content;
    width: fit-content;
    transition: 0.2s;
    margin-left: 20px;
}
.cookie-popup-content button:hover {
    background-color: var(--Noir);
    color: var(--Blanc);
}
@media (max-width: 500px){
    .cookie-popup-content>div{
        flex-direction: column;
        align-items: flex-start;
    }
    .cookie-popup-content h3{
        font-size: 18px;
    }
    .cookie-popup-content p{
        font-size: 14px;
    }
    .cookie-popup-content button{
        margin: 0;
        padding: 8px 16px;
    }
}

/* Crayon */

#wpadminbar{
    display: none;
}
.header-edit-link {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background-color: #333;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}
.header-edit-link>a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-edit-link .dashicons {
    font-size: 20px;
    line-height: 1;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
}

.header-edit-link:hover {
    background-color: #000;
}















/* test mansory */

.galerie_mansory{

}

.gallery {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.gallery-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: auto;
}





.contain_years{
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    padding-left: var(--side-base);

    margin-top: var(--smallspace);
    margin-bottom: var(--bigspace);
}

.gallery_years{
    top: calc( var(--htr-menu) + 10px);
    position: sticky;
    right: 0;

    width: var(--side-base);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    margin-left: 16px;

    box-sizing: border-box;
    height: fit-content;
}

.gallery_years>a{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-bottom: 21px;
    width: 100%;
    max-width: 71px;
}

.gallery_years>a span{
    color: var(--Noir);
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 110%;
    text-transform: uppercase;
    max-height: 0;
    overflow: hidden;
    transition: 0.2s ease;
    opacity: 0;
}

.gallery_years>a:before{
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background-color: var(--Noir);
    transform-origin: right;
    opacity: 0.2;
    transform: scaleX(70%);
    transition: 0.2s;
}


.gallery_years>a.focus_year span,
.gallery_years>a:hover span{
    max-height: 60px;
    opacity: 1;
}

.gallery_years>a.focus_year:before,
.gallery_years>a:hover:before{
    opacity: 1;
    transform: scaleX(100%);
}

.gallery-year{
    display: flex;
    flex-direction: column;
    gap: 20px;
}