@import url(https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);

.button {
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 8px 16px;
    transition: all .3s ease
}

.button, .button:hover {
    background-color: #5468ff
}

.button.secondary {
    background-color: #fffef3
}

.modal {
    background-color: #fff;
    border-radius: 8px;
    left: 50%;
    padding: 24px;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%)
}

.container {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 16px;
    width: 100%
}

.grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: relative
}

body, html {
    color: #3d3a3a;
    font-family: Bricolage Grotesque, serif;
    height: 100%;
    overflow-x: clip;
    scroll-behavior: smooth
}

a {
    color: inherit;
    text-decoration: none
}

ol, ul {
    list-style: none
}

h1, h2, h3, h4, h5, h6 {
    font-optical-sizing: none;
    font-variation-settings: "wdth"75;
    font-weight: 700
}

h1 {
    font-family: Bricolage Grotesque, serif;
    font-size: 2.5rem
}

h2 {
    font-size: 2rem
}

p {
    font-family: Bricolage Grotesque, serif;
    font-optical-sizing: none;
    font-variation-settings: "wdth"75
}

.color-bar {
    align-items: flex-start;
    display: flex;
    padding: 0 10vw
}

@media screen and (max-width:768px) {
    .color-bar {
        z-index: 5
    }
}

.color-bar div {
    height: .5vh;
    width: 100%
}

.color-bar .green {
    background-color: #79e17d
}

.color-bar .red {
    background-color: #ee2136
}

.color-bar .blue {
    background-color: #5271ff
}

.color-bar .yellow {
    background-color: #ffd600
}

.home-header {
    align-items: baseline;
    color: #3d3a3a;
    display: flex;
    font-size: 1.1vw;
    justify-content: space-between;
    padding: 5vh 10vw;
    position: relative
}

.home-header .has-sub-menu {
    display: none
}

.home-header h1 {
    font-size: 1.5vw
}

.home-header h1 span {
    font-size: 2vw;
    font-weight: 700
}

.home-header hr {
    border: 1px solid #3d3a3a;
    height: .1vh;
    min-width: 56vw
}

.home-header .hamburger {
    background: none;
    border: none;
    cursor: pointer;
    display: none;
    padding: 0;
    z-index: 1000
}

.home-header .hamburger .hamburger-box {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 30px
}

.home-header .hamburger .hamburger-inner {
    display: block;
    margin-top: -1.5px;
    top: 50%
}

.home-header .hamburger .hamburger-inner, .home-header .hamburger .hamburger-inner:after, .home-header .hamburger .hamburger-inner:before {
    background-color: #3d3a3a;
    height: 3px;
    position: absolute;
    transition: transform .3s ease;
    width: 30px
}

.home-header .hamburger .hamburger-inner:after, .home-header .hamburger .hamburger-inner:before {
    content: "";
    display: block
}

.home-header .hamburger .hamburger-inner:before {
    top: -6px
}

.home-header .hamburger .hamburger-inner:after {
    bottom: -6px
}

.home-header .hamburger.active .hamburger-inner {
    transform: rotate(45deg)
}

.home-header .hamburger.active .hamburger-inner:before {
    top: 0;
    transform: rotate(90deg)
}

.home-header .hamburger.active .hamburger-inner:after {
    bottom: 0;
    transform: rotate(90deg)
}

.home-header .navbar-menu {
    display: flex;
    gap: 2vw
}

.home-header .navbar-menu a {
    color: #3d3a3a;
    font-size: 1.1vw;
    text-decoration: none
}

.home-header .navbar-menu a:hover {
    text-decoration: underline
}

.home-header .navbar-menu .has-sub-menu {
    position: relative
}

.home-header .navbar-menu .has-sub-menu .sub-menu {
    background-color: #f2f0f0;
    display: none;
    left: 0;
    padding: 1vw;
    position: absolute;
    top: 100%;
    z-index: 4
}

.home-header .navbar-menu .has-sub-menu .sub-menu a {
    display: block;
    margin-bottom: .5vw
}

.home-header .navbar-menu .has-sub-menu:hover .sub-menu {
    display: block
}

@media screen and (max-width:768px) {
    .home-header {
        flex-direction: column;
        font-size: 5vw;
        padding: 2vh 5vw
    }

    .home-header h1 {
        font-size: 5vw;
        width: 100%
    }

    .home-header h1 span {
        font-size: 6vw
    }

    .home-header hr {
        display: none
    }

    .home-header .hamburger {
        display: block;
        position: absolute;
        right: 5vw;
        top: 5vh
    }

    .home-header .navbar-menu {
        background-color: #f2f0f0;
        display: flex;
        flex-direction: column;
        height: 101vh;
        left: 0;
        padding: 2vh 5vw;
        position: absolute;
        top: -102vh;
        transition: top .4s ease, visibility .4s ease;
        visibility: hidden;
        width: 100vw;
        z-index: 4 !important
    }

    .home-header .navbar-menu a {
        font-size: 4vw;
        padding: 1vh 0
    }

    .home-header .navbar-menu .has-sub-menu {
        display: block;
        font-weight: 700
    }

    .home-header .navbar-menu .has-sub-menu .sub-menu {
        display: block;
        font-weight: 400;
        padding: 1vh 2vw;
        position: static
    }

    .home-header .navbar-menu.active {
        top: -1vh;
        visibility: visible;
        z-index: 4 !important
    }
}

.top-home {
    background-image: url(/images/image.png?dcd3a67304adb9c67dcc11cbce2a5bc8);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100vw 160vh;
    height: auto !important;
    height: 150vh;
    z-index: 1
}

@media screen and (max-width:768px) {
    .top-home .home-layout {
        flex-direction: column;
        height: -moz-fit-content !important;
        height: fit-content !important;
        row-gap: 3vh
    }

    .top-home .home-layout .image {
        margin-top: 0 !important
    }

    .top-home .home-layout .image img {
        box-shadow: none !important
    }

    .top-home .home-layout .side-menu {
        display: none !important
    }

    .top-home .SVG {
        background-color: #ffd600;
        height: -moz-fit-content !important;
        height: fit-content !important
    }

    .top-home .SVG .home-presentation {
        flex-direction: column-reverse;
        row-gap: 2vh !important
    }

    .top-home .SVG .home-presentation .experiences {
        flex-basis: 60%
    }

    .top-home .SVG .home-presentation .experiences .moyen, .top-home .SVG .home-presentation .experiences h2 {
        font-size: 5vw !important
    }

    .top-home .SVG .home-presentation .experiences .petit {
        font-size: 4vw !important
    }

    .top-home .SVG .home-presentation .experiences hr {
        border-width: .2vh
    }

    .top-home .SVG .home-presentation .nom h2 {
        font-size: 8vw !important
    }

    .top-home .SVG .presentation {
        flex-direction: column;
        row-gap: 2vh !important
    }

    .top-home .SVG .presentation img {
        height: auto !important
    }

    .top-home .SVG .presentation p {
        font-size: 4vw !important;
        text-align: justify;
        width: 100%
    }

    .top-home .SVG .presentation .link-presentation {
        flex-direction: column;
        width: 80vw !important
    }

    .top-home .SVG .presentation .link-presentation .about-plus, .top-home .SVG .presentation .link-presentation .plus {
        width: auto !important
    }
}

.top-home .home-layout {
    display: flex;
    height: 70vh;
    justify-content: space-between;
    padding: 0 10vw
}

.top-home .home-layout .bienvenue {
    flex-basis: 25vw;
    max-height: 35vh
}

.top-home .home-layout .image {
    aspect-ratio: 390/500;
    flex-basis: 10vw;
    margin-top: 20vh
}

.top-home .home-layout .image img {
    box-shadow: 50px -50px 0 0 rgba(0, 0, 0, .1);
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top;
    width: 100%
}

.top-home .home-layout .side-menu {
    align-items: flex-end;
    align-self: flex-start;
    display: flex;
    flex-basis: 10vw;
    flex-direction: column;
    font-size: 1vw;
    gap: .1vw
}

.top-home .home-layout .side-menu a {
    color: #3d3a3a;
    display: inline-block;
    margin-bottom: 10px;
    margin-left: auto;
    padding-bottom: 5px;
    position: relative;
    text-decoration: none;
    width: -moz-fit-content;
    width: fit-content
}

.top-home .home-layout .side-menu a:hover:after {
    animation: underline .3s ease forwards;
    bottom: 0;
    content: "";
    height: .2vh;
    left: 0;
    position: absolute;
    width: 100%
}

.top-home .home-layout .side-menu a:not(:hover):after {
    animation: underline-reverse .3s ease forwards
}

.top-home .home-layout .side-menu .a-propos-link:hover:after, .top-home .home-layout .side-menu .a-propos-link~.sub-menu a:hover:after, .top-home .home-layout .side-menu .realisations-link:hover:after, .top-home .home-layout .side-menu .realisations-link~.sub-menu a:hover:after, .top-home .home-layout .side-menu .savoirs-link:hover:after, .top-home .home-layout .side-menu .savoirs-link~.sub-menu a:hover:after {
    background-color: #000
}

.top-home .home-layout .side-menu .has-sub-menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: end
}

.top-home .home-layout .side-menu .has-sub-menu .sub-menu {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s ease, margin-top .5s ease
}

.top-home .home-layout .side-menu .has-sub-menu .sub-menu>* {
    margin-bottom: 1vh;
    opacity: 0;
    transform: translateY(-100%);
    transition: all .3s ease
}

.top-home .home-layout .side-menu .has-sub-menu .sub-menu>:first-child {
    transition-delay: .1s
}

.top-home .home-layout .side-menu .has-sub-menu .sub-menu>:nth-child(2) {
    transition-delay: .2s
}

.top-home .home-layout .side-menu .has-sub-menu .sub-menu>:nth-child(3) {
    transition-delay: .3s
}

.top-home .home-layout .side-menu .has-sub-menu .sub-menu>:nth-child(4) {
    transition-delay: .4s
}

.top-home .home-layout .side-menu .has-sub-menu .sub-menu>:nth-child(5) {
    transition-delay: .5s
}

.top-home .home-layout .side-menu .has-sub-menu .sub-menu>:nth-child(6) {
    transition-delay: .6s
}

.top-home .home-layout .side-menu .has-sub-menu .sub-menu>:nth-child(7) {
    transition-delay: .7s
}

.top-home .home-layout .side-menu .has-sub-menu .sub-menu>:nth-child(8) {
    transition-delay: .8s
}

.top-home .home-layout .side-menu .has-sub-menu .sub-menu>:nth-child(9) {
    transition-delay: .9s
}

.top-home .home-layout .side-menu .has-sub-menu .sub-menu>:nth-child(10) {
    transition-delay: 1s
}

.top-home .home-layout .side-menu .has-sub-menu:hover .sub-menu {
    margin-top: 1vh;
    max-height: 25vh
}

.top-home .home-layout .side-menu .has-sub-menu:hover .sub-menu>* {
    opacity: 1;
    transform: translateY(0)
}

.top-home .home-layout .side-menu .has-sub-menu:not(:hover) .sub-menu {
    margin-top: 0;
    max-height: 0;
    transition: max-height .5s ease, margin-top .5s ease
}

.top-home .home-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>* {
    opacity: 0;
    transform: translateY(-100%);
    transition: all .3s ease
}

.top-home .home-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:first-child {
    transition-delay: .9s
}

.top-home .home-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(2) {
    transition-delay: .8s
}

.top-home .home-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(3) {
    transition-delay: .7s
}

.top-home .home-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(4) {
    transition-delay: .6s
}

.top-home .home-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(5) {
    transition-delay: .5s
}

.top-home .home-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(6) {
    transition-delay: .4s
}

.top-home .home-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(7) {
    transition-delay: .3s
}

.top-home .home-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(8) {
    transition-delay: .2s
}

.top-home .home-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(9) {
    transition-delay: .1s
}

.top-home .home-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(10) {
    transition-delay: 0s
}

.top-home .SVG {
    height: 75vh;
    margin-top: 5vh;
    padding: 0 10vw
}

.top-home .SVG .home-presentation {
    align-items: center;
    display: flex;
    font-family: Poppins, sans-serif;
    justify-content: space-between;
    width: 100%
}

.top-home .SVG .home-presentation .experiences {
    flex-basis: 60%
}

.top-home .SVG .home-presentation .experiences h2 {
    font-size: 1.5vw
}

.top-home .SVG .home-presentation .experiences .moyen {
    font-size: 1.25vw
}

.top-home .SVG .home-presentation .experiences .petit {
    font-size: 1vw
}

.top-home .SVG .home-presentation .experiences hr {
    border-width: .2vh
}

.top-home .SVG .home-presentation .nom h2 {
    font-size: 3vw
}

.top-home .SVG .presentation {
    display: flex;
    flex-wrap: wrap;
    gap: .2vw;
    justify-content: space-between;
    padding: 5vh 0
}

.top-home .SVG .presentation img {
    height: 30vh;
    max-width: 100%
}

.top-home .SVG .presentation p {
    flex-basis: 25%;
    font-family: Poppins, sans-serif;
    font-size: 1vw;
    font-weight: 450
}

.top-home .SVG .presentation .link-presentation {
    color: #000;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
    display: flex;
    justify-content: end;
    margin-right: 0;
    width: 100vw
}

.top-home .SVG .presentation .link-presentation .about-plus {
    width: 8vw
}

.top-home .SVG .presentation .link-presentation .plus {
    align-items: center;
    border: 2px solid #353535;
    display: flex;
    font-weight: 700;
    height: 5vh;
    justify-content: center;
    margin-top: 2vh;
    overflow: hidden;
    transition: .5s ease;
    width: 15vw
}

.top-home .SVG .presentation .link-presentation .plus:before {
    background: #fff;
    content: "";
    display: block;
    height: 30vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: .5s ease;
    width: 0;
    z-index: -1
}

.top-home .SVG .presentation .link-presentation .plus:hover:before {
    width: 50vw
}

.top-home .SVG .presentation .link-presentation .plus:hover {
    color: #000 !important
}

.transition {
    left: 8vw;
    position: absolute;
    top: 125vh;
    z-index: 0
}

@media screen and (max-width:768px) {
    .transition {
        display: none
    }
}

.expert-title {
    font-size: 8vw;
    margin-top: 5rem;
    padding: 0 10vw
}

.expert-title span {
    border-top: 2px solid #5271ff;
    color: #5271ff
}

@media screen and (max-width:768px) {
    .expert-title {
        font-size: 15vw !important;
        margin-top: 5vh !important
    }
}

.expertises {
    display: flex;
    justify-content: space-between;
    padding: 0 0 0 10vw
}

.expertises .decoration {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 5vw;
    row-gap: 1vw;
    width: 6vw
}

.expertises .decoration .big {
    background-color: #5271ff;
    height: 100%;
    width: 100%
}

.expertises .decoration .small {
    background-color: #5271ff;
    height: 5%;
    width: 100%
}

.expertises .menu-expertises {
    display: flex;
    flex-direction: column;
    font-size: 4vw;
    font-weight: 700
}

.expertises .menu-expertises a {
    align-items: center;
    -moz-column-gap: 1vw;
    column-gap: 1vw;
    display: flex;
    justify-content: flex-start;
    width: -moz-fit-content;
    width: fit-content
}

.expertises .menu-expertises a:after {
    background-color: #5271ff;
    bottom: 0;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: transform .4s ease-out;
    width: 100%
}

.expertises .menu-expertises a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom right
}

.expertises .menu-expertises .small-link {
    display: flex;
    flex-direction: column;
    font-size: 1.5vw;
    gap: .5vw;
    margin-top: 2vh
}

.expertises .menu-expertises .small-link a {
    align-items: center;
    -moz-column-gap: 1vw;
    column-gap: 1vw;
    display: flex;
    justify-content: flex-start
}

.expertises .menu-expertises svg {
    border: 2px solid #5271ff;
    border-radius: 50%;
    transform: rotate(-90deg)
}

.expertises .decoration-fin {
    width: 20vw
}

.expertises .decoration-fin .big {
    background-color: #5271ff;
    height: 100%;
    position: relative;
    width: 100%
}

@media screen and (max-width:768px) {
    .expertises {
        padding: 0 10vw !important
    }

    .expertises .decoration, .expertises .decoration-fin {
        display: none
    }

    .expertises .menu-expertises {
        margin-top: 3vh;
        row-gap: 2vh;
        width: 100vw !important
    }

    .expertises .menu-expertises a {
        justify-content: space-between !important
    }

    .expertises .menu-expertises a svg {
        height: 20px !important;
        width: 20px !important
    }

    .expertises .menu-expertises .small-link {
        font-size: 4vw !important;
        margin-top: 0 !important;
        row-gap: 2vh
    }
}

.Realisations .title-realisation {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5rem;
    padding: 0 10vw
}

.Realisations .title-realisation h1 {
    font-size: 7vw
}

.Realisations .title-realisation h1 span {
    border-top: 2px solid #ee2136;
    color: #ee2136;
    font-variation-settings: "wdth"75
}

.Realisations .title-realisation img {
    fill: #ee2136
}

.Realisations .card-layout {
    display: flex;
    gap: 1vw;
    padding: 0 10vw
}

.Realisations .card-layout .show-card {
    display: flex;
    flex-basis: 90%;
    flex-wrap: wrap;
    gap: 1vw
}

.Realisations .card-layout .show-card .card {
    align-items: flex-start;
    aspect-ratio: 29.7/21;
    box-shadow: -3px 3px 5px 2px #ccc6c6;
    display: flex;
    flex-basis: 48%;
    flex-wrap: wrap;
    overflow: hidden;
    position: relative;
    z-index: 2
}

.Realisations .card-layout .show-card .card .background-image {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1
}

.Realisations .card-layout .show-card .card .background-image img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all .4s linear;
    width: 100%
}

.Realisations .card-layout .show-card .card .background-image .hover {
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0
}

.Realisations .card-layout .show-card .card .background-image:hover img {
    transform: scale(1.1)
}

.Realisations .card-layout .show-card .card .background-image:hover .hover {
    align-items: center;
    background-color: rgba(238, 33, 54, .7);
    display: flex;
    justify-content: center;
    z-index: 2
}

.Realisations .card-layout .show-card .card .background-image:hover .hover svg {
    opacity: 1
}

.Realisations .card-layout .see-more {
    align-items: center;
    background-color: #ee2136;
    display: flex;
    flex-basis: 10%;
    justify-content: center;
    text-align: center
}

.Realisations .card-layout .see-more a svg {
    border: 2px solid #fff;
    border-radius: 50%;
    transform: scale(2) rotate(180deg)
}

@media screen and (max-width:768px) {
    .Realisations .title-realisation {
        margin-top: 5vh
    }

    .Realisations .title-realisation h1 {
        font-size: 15vw !important
    }

    .Realisations .title-realisation img {
        display: none
    }

    .Realisations .card-layout {
        flex-direction: column
    }

    .Realisations .card-layout .show-card {
        display: block
    }

    .Realisations .card-layout .show-card .card {
        margin: 2vh 0
    }

    .Realisations .card-layout .see-more {
        flex-basis: auto;
        height: 7vh !important
    }

    .Realisations .card-layout .see-more svg {
        height: 20px;
        width: 20px
    }
}

.univers {
    margin-bottom: 10vh;
    margin-top: 35vh;
    max-width: 100vw;
    min-height: 126vh;
    padding: 0 10vw;
    position: relative
}

.univers .svg-univer {
    align-items: end;
    bottom: -4vh;
    display: flex;
    justify-content: flex-start;
    position: absolute;
    width: 80vw
}

.univers .svg-univer .plante {
    height: 40vh;
    max-width: 100%
}

.univers .svg-univer .panneau {
    height: 40vh;
    margin-left: 25vw;
    max-width: 100%;
    transform-origin: bottom right
}

.univers .svg-univer .panneau:hover {
    animation: squeeze 1s linear infinite
}

@keyframes squeeze {
    0% {
        transform: rotate(0deg)
    }

    25% {
        transform: rotate(5deg)
    }

    75% {
        transform: rotate(-5deg)
    }
}

.univers .bg-univers {
    height: 100%;
    left: 0;
    max-width: 100vw;
    position: absolute;
    top: 0;
    z-index: -1
}

.univers .univers-title {
    display: flex;
    left: 10vw;
    position: absolute;
    right: 10vw;
    transform: translateY(-13vh)
}

.univers .univers-title .grey-bar {
    background-color: #f2f0f0;
    display: flex;
    height: 8vh;
    justify-content: center;
    position: absolute;
    transform: translateY(-1vh) translateX(5vw);
    width: 60vw
}

.univers .univers-title h1 {
    font-size: 8vw;
    line-height: .8;
    position: relative;
    text-align: end;
    width: 100%;
    z-index: 2
}

.univers .univers-title h1 span {
    color: #79e17d
}

.univers .citation {
    align-items: center;
    background-color: #79e17d;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    height: 20vw;
    justify-content: center;
    padding: 1vw;
    position: absolute;
    top: 0;
    width: 20vw
}

.univers .citation h2 {
    font-family: Bricolage Grotesque, serif;
    font-size: 2vw;
    font-weight: 650;
    text-align: center
}

.univers .citation p {
    font-family: Poppins, sans-serif;
    font-size: 1vw;
    text-align: center
}

.univers .background-image {
    align-items: center;
    display: grid;
    grid-template-areas: "a b c d""e f g h""i j k l""m n o p";
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 25vh) 15vh;
    height: 100%;
    position: relative
}

.univers .background-image img {
    width: 100%
}

.univers .background-image .Nature, .univers .background-image .art, .univers .background-image .culture, .univers .background-image .ecritures, .univers .background-image .musique {
    align-self: end;
    border-bottom: 2px solid #79e17d;
    color: #fff;
    font-family: Bricolage Grotesque, serif;
    font-size: 3vw;
    font-weight: 700;
    position: relative
}

.univers .background-image .Nature:after, .univers .background-image .art:after, .univers .background-image .culture:after, .univers .background-image .ecritures:after, .univers .background-image .musique:after {
    background-color: #79e17d;
    bottom: -2px;
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    z-index: 1
}

.univers .background-image .Nature svg, .univers .background-image .art svg, .univers .background-image .culture svg, .univers .background-image .ecritures svg, .univers .background-image .musique svg {
    border: 2px solid #fff;
    border-radius: 50%;
    transform: rotate(-90deg)
}

.univers .background-image .musique {
    grid-area: e;
    text-align: right
}

.univers .background-image .musique:after {
    right: 100%;
    width: calc(100% + 10vw)
}

.univers .background-image .art {
    grid-area: d
}

.univers .background-image .art:after {
    left: 100%;
    width: 10vw
}

.univers .background-image .ecritures {
    grid-area: g;
    width: 100%
}

.univers .background-image .ecritures:after {
    left: 100%;
    width: calc(100% + 10vw)
}

.univers .background-image .culture {
    grid-area: j;
    text-align: right
}

.univers .background-image .culture:after {
    right: 100%;
    width: calc(100% + 10vw)
}

.univers .background-image .Nature {
    grid-area: p
}

.univers .background-image .Nature:after {
    left: 100%;
    width: 10vw
}

@media screen and (max-width:768px) {
    .univers {
        margin-top: 5vh !important;
        min-height: -moz-fit-content;
        min-height: fit-content
    }

    .univers .bg-univers {
        display: none
    }

    .univers .univers-title {
        position: static;
        transform: none
    }

    .univers .univers-title .grey-bar {
        display: none
    }

    .univers .univers-title h1 {
        font-size: 15vw;
        text-align: left
    }

    .univers .citation {
        flex-direction: column;
        height: 80vw;
        justify-content: space-evenly;
        margin-top: 3vh;
        padding: 5vw;
        position: static;
        width: 80vw
    }

    .univers .citation h2 {
        font-size: 10vw
    }

    .univers .citation p {
        font-size: 5vw
    }

    .univers .background-image {
        display: flex;
        flex-direction: column;
        margin-top: 3vh;
        row-gap: 2vh
    }

    .univers .background-image .Nature, .univers .background-image .art, .univers .background-image .culture, .univers .background-image .ecritures, .univers .background-image .musique {
        align-items: baseline;
        border-bottom: 2px solid #79e17d;
        color: #3d3a3a;
        display: flex;
        font-family: Bricolage Grotesque, serif;
        font-size: 5vw;
        font-weight: 700;
        justify-content: space-between;
        opacity: 1 !important;
        transform: none !important;
        width: 100%
    }

    .univers .background-image .Nature:after, .univers .background-image .art:after, .univers .background-image .culture:after, .univers .background-image .ecritures:after, .univers .background-image .musique:after {
        display: none
    }

    .univers .background-image .Nature svg, .univers .background-image .art svg, .univers .background-image .culture svg, .univers .background-image .ecritures svg, .univers .background-image .musique svg {
        fill: #79e17d !important;
        border: 2px solid #79e17d;
        border-radius: 50%;
        height: 20px;
        transform: rotate(-90deg);
        width: 20px
    }

    .univers .background-image .Nature, .univers .background-image .art, .univers .background-image .ecritures {
        align-self: flex-end;
        flex-direction: row-reverse
    }

    .univers .svg-univer {
        display: none
    }
}

footer {
    padding: 0 10vw
}

footer .footer-mid {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5vh
}

footer .footer-mid h1 {
    font-size: 1.5vw
}

footer .footer-mid h1 span {
    font-size: 2vw;
    font-weight: 700
}

footer .footer-mid .apropos, footer .footer-mid .contacts, footer .footer-mid .expertise, footer .footer-mid .realisations {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-family: Poppins, sans-serif;
    gap: 1vw;
    text-align: center
}

footer .footer-mid .apropos a, footer .footer-mid .contacts a, footer .footer-mid .expertise a, footer .footer-mid .realisations a {
    color: #3d3a3a;
    display: block;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: -moz-fit-content;
    width: fit-content
}

footer .footer-mid .apropos a:before, footer .footer-mid .contacts a:before, footer .footer-mid .expertise a:before, footer .footer-mid .realisations a:before {
    background-color: #3d3a3a;
    content: "";
    height: 1.5px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: -2px;
    transform: translateY(0);
    transform-origin: left;
    transition: top .3s ease, opacity .1s ease-in;
    width: 100%
}

footer .footer-mid .apropos a:hover:before, footer .footer-mid .contacts a:hover:before, footer .footer-mid .expertise a:hover:before, footer .footer-mid .realisations a:hover:before {
    opacity: 1;
    top: 100%
}

footer .footer-mid .apropos .main-link, footer .footer-mid .contacts .main-link, footer .footer-mid .expertise .main-link, footer .footer-mid .realisations .main-link {
    font-family: Bricolage Grotesque, serif;
    font-size: 1.5vw;
    font-weight: 700
}

footer .footer-mid .apropos .main-link:before, footer .footer-mid .contacts .main-link:before, footer .footer-mid .expertise .main-link:before, footer .footer-mid .realisations .main-link:before {
    height: 3px
}

footer .footer-down {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 2vw
}

@media screen and (max-width:768px) {
    footer .footer-mid {
        align-items: center;
        flex-direction: column
    }

    footer .footer-mid h1 {
        text-align: center
    }

    footer .footer-mid h1, footer .footer-mid h1 span {
        font-size: 10vw !important
    }

    footer .footer-mid .apropos, footer .footer-mid .contacts, footer .footer-mid .expertise, footer .footer-mid .realisations {
        display: flex;
        flex-direction: column;
        font-family: Poppins, sans-serif;
        gap: 1vw;
        margin-top: 3vh;
        text-align: center
    }

    footer .footer-mid .apropos .main-link, footer .footer-mid .contacts .main-link, footer .footer-mid .expertise .main-link, footer .footer-mid .realisations .main-link {
        font-family: Bricolage Grotesque, serif;
        font-size: 5vw;
        font-weight: 700
    }

    footer .footer-mid svg {
        margin-top: 2vh
    }

    footer .footer-down {
        text-align: center
    }
}

.bottom-bar {
    bottom: 0;
    position: relative
}

.all-layout {
    display: flex;
    justify-content: flex-end;
    padding: 0 10vw
}

.all-layout .side-menu {
    align-items: flex-end;
    align-self: flex-start;
    display: flex;
    flex-basis: 10%;
    flex-direction: column;
    font-size: 1vw;
    gap: 1vw
}

.all-layout .side-menu a {
    color: #3d3a3a;
    display: inline-block;
    margin-bottom: .2vh;
    margin-left: auto;
    padding-bottom: 1vh;
    position: relative;
    text-decoration: none;
    width: -moz-fit-content;
    width: fit-content
}

.all-layout .side-menu a:hover:after {
    animation: underline .3s ease forwards;
    bottom: 0;
    content: "";
    height: .2vh;
    left: 0;
    position: absolute;
    width: 100%
}

.all-layout .side-menu a:not(:hover):after {
    animation: underline-reverse .3s ease forwards
}

.all-layout .side-menu .a-propos-link:hover:after, .all-layout .side-menu .a-propos-link~.sub-menu a:hover:after, .all-layout .side-menu .realisations-link:hover:after, .all-layout .side-menu .realisations-link~.sub-menu a:hover:after, .all-layout .side-menu .savoirs-link:hover:after, .all-layout .side-menu .savoirs-link~.sub-menu a:hover:after {
    background-color: #000
}

.all-layout .side-menu .has-sub-menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: end
}

.all-layout .side-menu .has-sub-menu .sub-menu {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s ease, margin-top .5s ease
}

.all-layout .side-menu .has-sub-menu .sub-menu>* {
    margin-bottom: .1vh;
    opacity: 0;
    transform: translateY(-100%);
    transition: all .3s ease
}

.all-layout .side-menu .has-sub-menu .sub-menu>:first-child {
    transition-delay: .1s
}

.all-layout .side-menu .has-sub-menu .sub-menu>:nth-child(2) {
    transition-delay: .2s
}

.all-layout .side-menu .has-sub-menu .sub-menu>:nth-child(3) {
    transition-delay: .3s
}

.all-layout .side-menu .has-sub-menu .sub-menu>:nth-child(4) {
    transition-delay: .4s
}

.all-layout .side-menu .has-sub-menu .sub-menu>:nth-child(5) {
    transition-delay: .5s
}

.all-layout .side-menu .has-sub-menu .sub-menu>:nth-child(6) {
    transition-delay: .6s
}

.all-layout .side-menu .has-sub-menu .sub-menu>:nth-child(7) {
    transition-delay: .7s
}

.all-layout .side-menu .has-sub-menu .sub-menu>:nth-child(8) {
    transition-delay: .8s
}

.all-layout .side-menu .has-sub-menu .sub-menu>:nth-child(9) {
    transition-delay: .9s
}

.all-layout .side-menu .has-sub-menu .sub-menu>:nth-child(10) {
    transition-delay: 1s
}

.all-layout .side-menu .has-sub-menu:hover .sub-menu {
    margin-top: 10px;
    max-height: 500px
}

.all-layout .side-menu .has-sub-menu:hover .sub-menu>* {
    opacity: 1;
    transform: translateY(0)
}

.all-layout .side-menu .has-sub-menu:not(:hover) .sub-menu {
    margin-top: 0;
    max-height: 0;
    transition: max-height .5s ease, margin-top .5s ease
}

.all-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>* {
    opacity: 0;
    transform: translateY(-100%);
    transition: all .3s ease
}

.all-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:first-child {
    transition-delay: .9s
}

.all-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(2) {
    transition-delay: .8s
}

.all-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(3) {
    transition-delay: .7s
}

.all-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(4) {
    transition-delay: .6s
}

.all-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(5) {
    transition-delay: .5s
}

.all-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(6) {
    transition-delay: .4s
}

.all-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(7) {
    transition-delay: .3s
}

.all-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(8) {
    transition-delay: .2s
}

.all-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(9) {
    transition-delay: .1s
}

.all-layout .side-menu .has-sub-menu:not(:hover) .sub-menu>:nth-child(10) {
    transition-delay: 0s
}

@keyframes underline {
    0% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

@keyframes underline-reverse {
    0% {
        transform: scaleX(1)
    }

    to {
        transform: scaleX(0)
    }
}

.real-container {
    display: flex;
    gap: .5vw;
    max-width: 100vw;
    min-height: 55vh;
    overflow-x: hidden
}

.real-container .left-grid {
    display: flex;
    flex-basis: 30vw;
    flex-wrap: wrap;
    width: 25vw
}

.real-container .left-grid .un {
    flex-basis: 10vw;
    height: calc(50% - .5vw);
    margin-bottom: .5rem
}

.real-container .left-grid .deux {
    background-color: #ee2136;
    display: flex;
    flex-basis: 15vw;
    flex-direction: column;
    height: calc(50% - .5vh);
    margin-bottom: .5rem
}

.real-container .left-grid .deux .deux-un {
    align-items: end;
    display: flex;
    height: 61%;
    justify-content: end
}

.real-container .left-grid .deux .deux-un .Mes {
    color: #fff;
    font-family: Bricolage Grotesque, serif;
    font-optical-sizing: none;
    font-size: 7vw;
    font-variation-settings: "wdth"75;
    margin-block-end: 0;
    margin-block-start: 0;
    text-align: right
}

.real-container .left-grid .trois {
    background-color: #ee2136;
    height: calc(49% - .5vh);
    margin-top: .5vh;
    width: 25vw
}

.real-container .center-grid {
    display: flex;
    flex-basis: 38vw;
    flex-direction: column
}

.real-container .center-grid .quatre {
    align-items: flex-end;
    color: #ee2136;
    display: flex;
    height: 30%
}

.real-container .center-grid .quatre .real-titre {
    color: #000;
    font-optical-sizing: none;
    font-size: 7.5vw;
    font-variation-settings: "wdth"75;
    margin-block-end: 0;
    margin-block-start: 0
}

.real-container .center-grid .cinq {
    align-items: center;
    background-color: #ee2136;
    display: flex;
    height: 70%;
    justify-content: center;
    padding-top: 1vh
}

.real-container .center-grid .cinq .find {
    color: #fff;
    font-optical-sizing: none;
    font-size: 2.5vw;
    font-variation-settings: "wdth"75;
    padding: 2vw
}

.real-container .right-grid {
    background-color: #ee2136;
    flex-basis: 36vw
}

.real-container .right-grid .six {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    width: 42vw
}

.real-container .right-grid .six .word-cloud {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 40vh;
    overflow: hidden;
    padding: 1vh;
    position: relative;
    width: 100%
}

.real-container .right-grid .six .word-cloud svg {
    display: block;
    height: 100%;
    width: 42vw
}

.real-container .right-grid .six img {
    filter: brightness(0) invert(100%);
    height: 35vh;
    max-width: 100%;
    transform: rotate(180deg) translateY(1.5vh)
}

@media screen and (max-width:768px) {
    .real-container {
        align-items: center;
        background-color: #ee2136;
        flex-direction: column;
        margin-top: 5vh;
        min-height: -moz-fit-content;
        min-height: fit-content;
        padding-bottom: 5vh;
        text-align: center
    }

    .real-container .left-grid {
        flex-basis: 20%;
        justify-content: center;
        width: 100%
    }

    .real-container .left-grid .trois, .real-container .left-grid .un {
        display: none
    }

    .real-container .left-grid .deux {
        flex-basis: auto;
        margin: 0
    }

    .real-container .left-grid .deux .deux-un h1 {
        font-size: 15vw !important
    }

    .real-container .center-grid {
        flex-basis: auto;
        width: 100%
    }

    .real-container .center-grid .quatre {
        justify-content: center
    }

    .real-container .center-grid .quatre .real-titre {
        font-size: 15vw
    }

    .real-container .center-grid .cinq .find {
        font-size: 6vw
    }

    .real-container .center-grid .cinq .choice {
        font-size: 5.5vw
    }

    .real-container .right-grid {
        display: none
    }
}

.show-realisations {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 10vh;
    transition: height .5s ease-out
}

.show-realisations .search-container {
    background: transparent;
    border-bottom: 2px solid #000;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 3vh 0;
    padding: 1.5rem 0;
    transition: all .3s ease;
    width: 80vw;
    z-index: 2
}

.show-realisations .search-container .search-title {
    background-color: #f2f0f0;
    border-radius: 3px;
    font-family: Poppins, sans-serif;
    font-size: 1vw;
    font-weight: 700;
    margin-bottom: 1vh;
    padding: 2vh 0
}

@media screen and (max-width:768px) {
    .show-realisations .search-container .search-title {
        font-size: 6vw
    }
}

.show-realisations .search-container .search-box {
    align-items: center;
    border: 2px solid #000;
    display: flex;
    flex-basis: 30%;
    gap: .5vw;
    height: 100%;
    margin-bottom: 1rem;
    padding: 0 1vw 0 .5vw;
    position: relative
}

.show-realisations .search-container .search-box .search-icon {
    cursor: pointer;
    height: 5vh;
    transition: transform .3s ease
}

.show-realisations .search-container .search-box .search-icon:hover {
    transform: scale(1.1)
}

.show-realisations .search-container .search-box input[type=text] {
    border: none;
    flex: 1;
    font-size: 1vw;
    outline: none
}

@media screen and (max-width:768px) {
    .show-realisations .search-container .search-box input[type=text] {
        font-size: 4vw
    }
}

.show-realisations .search-container .search-box input[type=text]:focus {
    outline: none
}

.show-realisations .search-container .search-box .search-dropdown {
    background: #fff;
    border: 1px solid #eee;
    border-top: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    display: none;
    left: 0;
    max-height: 300px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1000
}

.show-realisations .search-container .search-box .search-dropdown.active {
    animation: slideDown .3s cubic-bezier(.4, 0, .2, 1) forwards;
    display: block !important
}

.show-realisations .search-container .search-box .search-dropdown .search-results {
    list-style: none;
    margin: 0;
    padding: 0
}

.show-realisations .search-container .search-box .search-dropdown .search-results li {
    cursor: pointer;
    padding: .8rem 1rem;
    transition: background-color .3s ease
}

.show-realisations .search-container .search-box .search-dropdown .search-results li:hover {
    background-color: #f5f5f5
}

.show-realisations .search-container .search-box .search-dropdown .search-results li.selected {
    background-color: #e8e8e8
}

.show-realisations .search-container .search-box .filter-icon {
    cursor: pointer;
    transition: transform .3s ease
}

.show-realisations .search-container .search-box .filter-icon:hover {
    transform: rotate(90deg) scale(1.1)
}

.show-realisations .search-container .active-filters {
    flex-basis: 100%;
    margin: 1rem 0;
    min-height: 40px
}

.show-realisations .search-container .active-filters .active-filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.show-realisations .search-container .active-filters .active-filters-container .active-filter-tag {
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 20px;
    display: flex;
    font-size: .9rem;
    gap: .5rem;
    padding: .25rem .75rem
}

.show-realisations .search-container .active-filters .active-filters-container .active-filter-tag .filter-type {
    color: #666;
    font-size: .8rem;
    text-transform: uppercase
}

.show-realisations .search-container .active-filters .active-filters-container .active-filter-tag button {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0
}

.show-realisations .search-container .active-filters .active-filters-container .active-filter-tag button:hover {
    color: #333
}

.show-realisations .search-container .filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
    transition: all .3s ease;
    width: 100%
}

@media screen and (max-width:768px) {
    .show-realisations .search-container .filters-container {
        flex-direction: column
    }
}

.show-realisations .search-container .filters-container .filter-group {
    flex-basis: 30%;
    margin-bottom: 1rem;
    width: 100%
}

.show-realisations .search-container .filters-container .filter-group .filter-header {
    align-items: center;
    background-color: #fff;
    border-bottom: 2px solid #000;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: .5rem
}

.show-realisations .search-container .filters-container .filter-group .filter-header h3 {
    font-size: 1rem;
    margin: 0;
    transition: color .3s ease
}

.show-realisations .search-container .filters-container .filter-group .filter-header .arrow-icon {
    transition: transform .3s cubic-bezier(.4, 0, .2, 1)
}

.show-realisations .search-container .filters-container .filter-group.active .arrow-icon {
    transform: rotate(180deg)
}

.show-realisations .search-container .filters-container .filter-group.active .filter-content {
    animation: slideDown .3s cubic-bezier(.4, 0, .2, 1) forwards;
    display: flex;
    flex-direction: column
}

.show-realisations .search-container .filters-container .filter-group .filter-content {
    display: none;
    opacity: 0;
    padding: .5rem;
    transform: translateY(-10px);
    transform-origin: top;
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.show-realisations .search-container .filters-container .filter-group .filter-content.closing {
    animation: slideUp .3s cubic-bezier(.4, 0, .2, 1) forwards
}

.show-realisations .search-container .filters-container .filter-group .filter-content button {
    background: none;
    border: none;
    cursor: pointer;
    display: block;
    margin: .25rem 0;
    opacity: 0;
    overflow: hidden;
    padding: .5rem;
    position: relative;
    text-align: left;
    transform: translateY(-10px);
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    width: 100%
}

.show-realisations .search-container .filters-container .filter-group .filter-content button:first-child {
    animation: fadeInUp .3s cubic-bezier(.4, 0, .2, 1) forwards;
    animation-delay: .05s
}

.show-realisations .search-container .filters-container .filter-group .filter-content button:nth-child(2) {
    animation: fadeInUp .3s cubic-bezier(.4, 0, .2, 1) forwards;
    animation-delay: .1s
}

.show-realisations .search-container .filters-container .filter-group .filter-content button:nth-child(3) {
    animation: fadeInUp .3s cubic-bezier(.4, 0, .2, 1) forwards;
    animation-delay: .15s
}

.show-realisations .search-container .filters-container .filter-group .filter-content button:nth-child(4) {
    animation: fadeInUp .3s cubic-bezier(.4, 0, .2, 1) forwards;
    animation-delay: .2s
}

.show-realisations .search-container .filters-container .filter-group .filter-content button:nth-child(5) {
    animation: fadeInUp .3s cubic-bezier(.4, 0, .2, 1) forwards;
    animation-delay: .25s
}

.show-realisations .search-container .filters-container .filter-group .filter-content button:nth-child(6) {
    animation: fadeInUp .3s cubic-bezier(.4, 0, .2, 1) forwards;
    animation-delay: .3s
}

.show-realisations .search-container .filters-container .filter-group .filter-content button:nth-child(7) {
    animation: fadeInUp .3s cubic-bezier(.4, 0, .2, 1) forwards;
    animation-delay: .35s
}

.show-realisations .search-container .filters-container .filter-group .filter-content button:nth-child(8) {
    animation: fadeInUp .3s cubic-bezier(.4, 0, .2, 1) forwards;
    animation-delay: .4s
}

.show-realisations .search-container .filters-container .filter-group .filter-content button:nth-child(9) {
    animation: fadeInUp .3s cubic-bezier(.4, 0, .2, 1) forwards;
    animation-delay: .45s
}

.show-realisations .search-container .filters-container .filter-group .filter-content button:nth-child(10) {
    animation: fadeInUp .3s cubic-bezier(.4, 0, .2, 1) forwards;
    animation-delay: .5s
}

.show-realisations .search-container .filters-container .filter-group .filter-content button:before {
    background-color: #f0f0f0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    width: 100%;
    z-index: -1
}

.show-realisations .search-container .filters-container .filter-group .filter-content button:hover:before {
    transform: translateX(0)
}

.show-realisations .search-container .filters-container .filter-group .filter-content button.active {
    background-color: #e0e0e0
}

.show-realisations .search-container .filters-container .filter-group .filter-content .filter-button {
    background: #fff;
    border: 2px solid #eee;
    border-radius: 20px;
    cursor: pointer;
    font-size: .9rem;
    overflow: hidden;
    padding: .5rem 1rem;
    position: relative;
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.show-realisations .search-container .filters-container .filter-group .filter-content .filter-button:before {
    background-color: #ee2136;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    width: 100%;
    z-index: -1
}

.show-realisations .search-container .filters-container .filter-group .filter-content .filter-button:hover {
    border-color: #ee2136;
    color: #ee2136
}

.show-realisations .search-container .filters-container .filter-group .filter-content .filter-button:hover:before {
    transform: scaleX(1);
    transform-origin: left;
    z-index: -1
}

.show-realisations .search-container .filters-container .filter-group .filter-content .filter-button.active {
    background: #ee2136;
    border-color: #ee2136;
    color: #fff
}

.show-realisations .search-container .filters-container .filter-group .filter-content .filter-button.active:checked {
    background-color: #ee2136
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

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

@keyframes slideUp {
    0% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-10px)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

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

.show-realisations .search-container .no-results {
    color: #666;
    font-size: 1.2rem;
    padding: 2rem;
    text-align: center
}

.show-realisations .decoration-realisation {
    height: 30vh;
    position: absolute;
    top: 0;
    width: 100%
}

.show-realisations .decoration-realisation img {
    height: 60vh;
    max-width: 100%;
    position: absolute
}

.show-realisations .decoration-realisation .plante-left {
    top: 0;
    transform: rotate(90deg) translateY(15vh)
}

.show-realisations .decoration-realisation .plante-right {
    right: 0;
    transform: rotate(-90deg) translateX(-25vh)
}

.show-realisations .card-realisations {
    align-items: flex-end;
    box-sizing: border-box;
    display: flex;
    justify-content: space-evenly;
    margin: 2rem 0;
    min-height: 40vh;
    opacity: 0;
    transform: translateY(20px);
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    width: 60vw
}

.show-realisations .card-realisations.aos-animate {
    opacity: 1;
    transform: translateY(0)
}

.show-realisations .card-realisations img {
    aspect-ratio: 29.7/21;
    flex-basis: auto;
    height: 40vh;
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: bottom;
    object-position: bottom;
    transition: transform .3s ease
}

.show-realisations .card-realisations .right-card {
    border: 2px solid #000;
    border-left: hidden;
    display: flex;
    flex-basis: 60%;
    justify-content: space-between;
    min-height: 30vh;
    transition: all .3s ease
}

.show-realisations .card-realisations .right-card .content-card {
    display: flex;
    flex-basis: 80%;
    flex-direction: column;
    justify-content: center;
    padding: 0 1rem
}

.show-realisations .card-realisations .right-card .content-card .card-title {
    font-family: Poppins, sans-serif;
    font-size: 11pt;
    font-weight: 700
}

.show-realisations .card-realisations .right-card .content-card .description-card {
    font-family: Poppins, sans-serif;
    font-size: 11pt;
    padding: .7rem 0;
    transition: color .3s ease
}

.show-realisations .card-realisations .right-card .content-card .categorie {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.show-realisations .card-realisations .right-card .content-card .categorie .details-card {
    background-color: #f2f0f0;
    border-radius: 5px;
    font-family: Poppins, sans-serif;
    font-size: 10pt;
    font-weight: 400;
    padding: 2px 5px;
    transition: all .3s ease
}

.show-realisations .card-realisations .right-card .cta-card {
    align-items: flex-end;
    display: flex;
    flex-basis: 20%;
    justify-content: flex-start;
    padding-bottom: 5vh
}

.show-realisations .card-realisations .right-card .cta-card svg {
    transform: rotate(90deg);
    transition: all .3s ease
}

.show-realisations .card-realisations .right-card .cta-card:hover svg {
    transform: rotate(90deg) scale(1.1)
}

@media screen and (max-width:768px) {
    .show-realisations {
        padding: 0 10vw
    }

    .show-realisations .decoration-realisation {
        display: none
    }

    .show-realisations .card-realisations {
        flex-direction: column;
        width: 100%
    }

    .show-realisations .card-realisations .right-card {
        border-left: solid
    }

    .show-realisations .card-realisations .right-card .content-card {
        padding: 1vh
    }
}

.fleur-bande {
    align-items: center;
    background-color: #ee2136;
    display: flex;
    height: 30vh;
    justify-content: space-evenly;
    width: 100%;
    z-index: 0
}

.fleur-bande .bande-img {
    filter: brightness(0) invert(100);
    height: 100%;
    left: 10vw;
    max-width: 100%;
    position: absolute;
    top: 40%;
    transform: scaleX(-1)
}

.fleur-bande #loadMore {
    background-color: #fff;
    border: #fff;
    border-radius: 60px;
    color: #ee2136;
    cursor: pointer;
    font-family: Bricolage Grotesque, serif;
    font-size: 24pt;
    font-weight: 500;
    height: 8vh;
    width: 15vw
}

@media screen and (max-width:768px) {
    .fleur-bande .bande-img {
        display: none
    }

    .fleur-bande #loadMore {
        font-size: 8vw;
        height: auto;
        padding: 1vh 3vh;
        width: auto
    }
}

.concept-bande {
    display: flex;
    justify-content: flex-end;
    overflow-y: hidden;
    padding-right: 10vw;
    width: 100%
}

.concept-bande .concept-commentaire {
    align-items: flex-end;
    background-color: #fff;
    border: 2px solid #000;
    display: flex;
    height: 30vh;
    justify-content: space-between;
    margin-top: 10rem;
    overflow-y: visible;
    width: 70%;
    z-index: 2
}

.concept-bande .concept-commentaire img {
    background: #fff;
    background: linear-gradient(90deg, #fff 60%, hsla(0, 0%, 100%, 0));
    height: 35vh;
    max-width: 100%;
    transform: translateX(-1vw)
}

.concept-bande .concept-commentaire .mot-de-fin {
    background-color: #ee2136;
    color: #fff;
    flex-basis: 40vw;
    height: 35vh;
    padding: 1rem;
    transform: translateX(-1vw) translateY(-1vw)
}

.concept-bande .concept-commentaire .mot-de-fin h1 {
    font-family: Bricolage Grotesque, serif;
    font-size: 1.3vw;
    font-variation-settings: "wdth"75;
    font-weight: 700;
    width: 50%
}

.concept-bande .concept-commentaire .mot-de-fin p {
    font-family: Poppins, sans-serif;
    font-size: 1vw
}

.concept-bande .concept-img {
    height: 30vh;
    left: 10.5vw;
    max-width: 100%;
    position: absolute;
    top: -30%;
    transform: rotate(180deg);
    z-index: -1
}

@media screen and (max-width:768px) {
    .concept-bande {
        height: -moz-fit-content;
        height: fit-content;
        padding: 0 10vw
    }

    .concept-bande .concept-commentaire {
        display: block;
        height: -moz-fit-content;
        height: fit-content;
        width: 100%
    }

    .concept-bande .concept-commentaire img {
        display: none
    }

    .concept-bande .concept-commentaire .mot-de-fin {
        height: auto
    }

    .concept-bande .concept-commentaire .mot-de-fin h1 {
        font-size: 8vw
    }

    .concept-bande .concept-commentaire .mot-de-fin p {
        font-size: 4vw
    }
}

.end-banner {
    align-items: flex-end;
    background-color: #f2f0f0;
    color: #353535;
    -moz-column-gap: 3vw;
    column-gap: 3vw;
    font-family: Bricolage Grotesque, serif;
    font-size: 15.3pt;
    font-weight: bolder;
    height: 40vh;
    margin-bottom: 3rem;
    transform: translateY(-20vh);
    width: 100%;
    z-index: 0
}

.end-banner, .end-banner a {
    display: flex;
    justify-content: center
}

.end-banner a {
    align-items: center;
    border: 2px solid #353535;
    height: 5vh;
    margin-bottom: 5rem;
    overflow: hidden;
    transition: .5s ease;
    width: 15vw
}

.end-banner a:before {
    background: #353535;
    content: "";
    display: block;
    height: 30vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: .5s ease;
    width: 0;
    z-index: -1
}

.end-banner a:hover:before {
    width: 50vw
}

.end-banner a:hover {
    color: #fff !important
}

@media screen and (max-width:768px) {
    .end-banner {
        align-items: center;
        flex-direction: column;
        height: auto;
        justify-content: center;
        margin-top: 2vh;
        padding: 2vh;
        row-gap: 1vh;
        transform: none
    }

    .end-banner a {
        font-size: 4vw;
        height: auto;
        margin-bottom: 0;
        padding: 1vh 2vh;
        width: auto
    }
}

.filter-checkbox {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: .5rem;
    padding: .5rem;
    transition: background-color .3s ease
}

.filter-checkbox input[type=checkbox] {
    display: none
}

.filter-checkbox .checkbox-custom {
    border: 2px solid #eee;
    display: inline-block;
    height: 15px;
    position: relative;
    transition: all .3s ease;
    width: 15px
}

.filter-checkbox .checkbox-custom:after {
    background-color: #ee2136;
    content: "";
    height: 15px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .3s ease;
    width: 15px
}

.filter-checkbox .checkbox-label {
    font-size: .9rem
}

.filter-checkbox input[type=checkbox]:checked+.checkbox-custom {
    border-color: #ee2136
}

.filter-checkbox input[type=checkbox]:checked+.checkbox-custom:after {
    transform: translate(-50%, -50%) scale(1)
}

.filter-checkbox:hover {
    background-color: #f5f5f5
}

.vision-container {
    padding: 0 10vw
}

.vision-container .quote {
    color: #ffd600;
    font-family: Poppins, sans-serif;
    font-size: 7vw;
    font-weight: 700;
    height: 10vh
}

.vision-container .quote-container {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.vision-container .quote-container .quote-bottom {
    color: #ffd600;
    font-family: Poppins, sans-serif;
    font-size: 7vw;
    font-weight: 700
}

.vision-container .quote-container .vision-quote {
    font-family: Poppins, sans-serif;
    font-size: 1.2vw;
    width: 24.75vw
}

.vision-container .quote-container .bar {
    background-color: #000;
    height: .3vh;
    width: 41.25vw
}

.vision-container .vision-titre {
    align-items: baseline;
    display: flex;
    font-family: Bricolage Grotesque, serif;
    font-size: 8vw
}

.vision-container .vision-titre span {
    color: #ffd600
}

.vision-container .vision-titre .bar-titre {
    background-color: #3d3a3a;
    height: 6vh;
    margin-left: 3vw;
    width: 38.5vw
}

.vision-container .vision-content {
    border-left: 1.2vw solid #ffd600;
    display: flex;
    flex-direction: column;
    font-family: Poppins, sans-serif;
    font-size: 1vw;
    gap: 1vw;
    justify-content: space-evenly;
    padding: 0 5vw 5vh
}

.vision-container .vision-content .text-group {
    border-left: 5px solid #ffd600;
    margin-top: 3vh;
    padding: 0 1vw
}

.vision-container .vision-content .text-group p {
    font-family: Poppins, sans-serif;
    margin-bottom: 2vh
}

@media screen and (max-width:768px) {
    .vision-container .vision-titre {
        font-size: 15vw
    }

    .vision-container .vision-titre .bar-titre {
        display: none
    }

    .vision-container .vision-content {
        font-size: 5vw
    }

    .vision-container .vision-content .quote {
        height: 2vh
    }

    .vision-container .vision-content .text-group {
        border: none
    }

    .vision-container .quote-container {
        display: block
    }

    .vision-container .quote-container .quote-bottom {
        color: #ffd600;
        font-family: Poppins, sans-serif;
        font-size: 7vw;
        font-weight: 700
    }

    .vision-container .quote-container .vision-quote {
        font-family: Poppins, sans-serif;
        font-size: 5vw;
        width: 100%
    }

    .vision-container .quote-container .bar {
        display: none
    }
}

.banner-vision {
    align-items: center;
    background-color: #ffd600;
    display: flex;
    height: 30vh;
    justify-content: center;
    margin-bottom: 5vh;
    width: 100vw
}

.banner-vision a {
    border: .2vh solid #000;
    color: #000;
    font-family: Bricolage Grotesque, serif;
    font-size: 1vw;
    font-weight: 700;
    overflow: hidden;
    padding: 1vh 5vw;
    z-index: 1
}

.banner-vision a:before {
    background: #000;
    content: "";
    display: block;
    height: 30vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: .5s ease;
    width: 0;
    z-index: -1
}

.banner-vision a:hover:before {
    width: 50vw
}

.banner-vision a:hover {
    color: #fff !important
}

@media screen and (max-width:768px) {
    .banner-vision a {
        font-size: 5vw
    }
}

.savoir-titre {
    font-size: 7.5vw;
    margin-bottom: 5vh;
    padding: 0 10vw
}

.savoir-titre span {
    border-bottom: 5px solid #5271ff;
    color: #5271ff
}

@media screen and (max-width:768px) {
    .savoir-titre {
        font-size: 15vw;
        margin-top: 3vh
    }
}

.savoirs-container {
    display: flex;
    flex-direction: column-reverse;
    height: 150vh;
    justify-content: space-between;
    padding: 0 10vw
}

.savoirs-container .savoir-item {
    align-items: center;
    border-top: 1px solid #5271ff;
    display: flex;
    font-family: Poppins, sans-serif;
    justify-content: space-between;
    padding: 1vh 0;
    width: 100%
}

.savoirs-container .savoir-item h1 {
    display: inline-block;
    font-family: Poppins, sans-serif;
    font-size: 1.1vw
}

.savoirs-container .savoir-item p {
    font-family: Poppins, sans-serif
}

.savoirs-container .savoir-item .savoirs-title:before {
    background-color: #5271ff;
    content: "";
    display: block;
    height: .5vh;
    left: 0;
    position: absolute;
    top: -1.5vh;
    width: 100%
}

.savoirs-container .savoir-item .logiciel-item {
    display: inline-block;
    position: relative
}

.savoirs-container .savoir-item .logiciel-item img {
    height: 50px;
    -o-object-fit: contain;
    object-fit: contain;
    transition: transform .3s ease;
    width: 50px
}

.savoirs-container .savoir-item .logiciel-item:hover img {
    transform: scale(1.1)
}

.savoirs-container .savoir-item .logiciel-name {
    background-color: rgba(0, 0, 0, .8);
    border-radius: 4px;
    bottom: -25px;
    color: #fff;
    font-size: 12px;
    left: 50%;
    opacity: 0;
    padding: 5px 10px;
    position: absolute;
    transform: translateX(-50%);
    transition: all .3s ease;
    visibility: hidden;
    white-space: nowrap;
    z-index: 1000
}

.savoirs-container .savoir-item .logiciel-item:hover .logiciel-name {
    opacity: 1;
    visibility: visible
}

.savoirs-container .savoir-item .logiciels-container {
    gap: 20px;
    margin-top: 20px
}

.savoirs-container .savoir-item ul {
    margin-left: 1vw
}

.savoirs-container .savoir-item ul li {
    font-size: 1vw;
    list-style-type: disc
}

.savoirs-container .savoir-item .logiciels-container {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    justify-content: space-evenly
}

.savoirs-container .savoir-item .logiciels-container .logiciel-item {
    height: 5vh;
    max-width: 5vh
}

.savoirs-container .savoir-item .logiciels-container .logiciel-item img {
    bottom: 0;
    height: 100%;
    left: 0;
    -o-object-fit: contain;
    object-fit: contain;
    right: 0;
    top: 0;
    width: 100%
}

@media screen and (max-width:768px) {
    .savoirs-container {
        height: -moz-fit-content;
        height: fit-content
    }

    .savoirs-container .savoir-item {
        flex-direction: column
    }

    .savoirs-container .savoir-item .savoirs-title {
        font-size: 7vw
    }

    .savoirs-container .savoir-item .savoirs-title:before {
        display: none
    }
}

.softskills-container {
    padding: 5vh 10vw
}

.softskills-container .softskills-title {
    font-size: 2vw;
    transform: translateX(-50%);
    width: -moz-fit-content;
    width: fit-content
}

.softskills-container .softskills {
    border: 2px solid #000;
    border-right: none;
    border-top: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
    height: 85vh;
    padding: 5vh 0 5vh 5vw
}

.softskills-container .softskills .savoir-item {
    align-items: center;
    background-color: #5271ff;
    color: #fff;
    display: flex;
    flex-basis: 32%;
    font-size: 2vw;
    justify-content: center;
    padding: 1.5vw
}

.softskills-container .softskills .savoir-item span {
    display: inline-block;
    font-variation-settings: "wdth"55
}

@media screen and (max-width:768px) {
    .softskills-container .softskills-title {
        font-size: 12vw;
        transform: none
    }

    .softskills-container .softskills {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2vh;
        height: -moz-fit-content;
        height: fit-content
    }

    .softskills-container .softskills .savoir-item {
        flex-basis: 49%
    }

    .softskills-container .softskills .savoir-item .savoirs-title {
        font-size: 6vw
    }
}

.map-container-view {
    align-items: center;
    background-color: #5271ff;
    display: flex;
    flex-direction: column;
    height: 90vh;
    margin-bottom: 5rem
}

.map-container-view .country {
    fill: #1e3b8a;
    stroke: #1e3b8a;
    stroke-width: .2;
    transition: fill .3s
}

.map-container-view .country:hover {
    fill: #999;
    cursor: pointer
}

.map-container-view .highlighted {
    fill: #ffd600
}

.map-container-view #map-container {
    height: 100%;
    width: 80vw
}

.map-container-view #map-container svg {
    overflow: visible
}

.map-container-view .annotation-group {
    opacity: 1;
    padding: 5px
}

.map-container-view .annotation-group .annotation-text {
    fill: #fff;
    font: 700 21.6pt Bricolage Grotesque, serif
}

.map-container-view .annotation-group .language-level {
    fill: #ffd600;
    background-color: #5271ff;
    font: 700 21.6pt Bricolage Grotesque, serif
}

.map-container-view .annotation-group .annotation-line {
    stroke: gold;
    stroke-width: 2;
    fill: none;
    opacity: 1;
    transition: opacity .3s
}

.map-container-view .map-title {
    border: 2px solid #ff0;
    border-left: none;
    border-top: none;
    display: flex;
    justify-content: center;
    margin-left: 15vw;
    padding-right: 15vw
}

.map-container-view .map-title .main-map-title {
    background-color: #5271ff;
    color: #fff;
    font-size: 24pt;
    padding-right: 10px;
    text-align: center;
    transform: translateY(20%)
}

.map-container-view .map-title .main-map-title span {
    color: #ffd600
}

.map-container-view .map-title .decouvrir {
    background-color: #ffd600;
    display: flex;
    flex-direction: column;
    height: 25vh;
    justify-content: space-evenly;
    padding: 1rem;
    position: absolute;
    right: 0;
    transform: translateY(-90%) translateX(50%);
    width: 25vw;
    z-index: 2
}

.map-container-view .map-title .decouvrir a {
    align-self: flex-end;
    font-size: 1.5vw
}

.map-container-view .map-title .decouvrir a svg {
    border: 2px solid #000;
    border-radius: 50%
}

.map-container-view p {
    font-family: Poppins, sans-serif;
    font-size: 10pt
}

.map-container-view p .yellow {
    color: #ffd600
}

.map-container-view p .blue {
    color: #1e3b8a
}

@media screen and (max-width:768px) {
    .map-container-view {
        height: -moz-fit-content;
        height: fit-content
    }

    .map-container-view .map-title {
        border: none;
        flex-direction: column-reverse;
        margin-bottom: 5vh
    }

    .map-container-view .map-title .decouvrir {
        height: auto;
        position: static;
        transform: none;
        width: auto
    }

    .map-container-view #map-container {
        display: none
    }

    .map-container-view p {
        font-size: 4vw;
        padding: 2vh;
        text-align: center
    }
}

.about-container {
    padding: 0 10vw
}

.about-container .about-title {
    color: #000;
    font-family: Bricolage Grotesque, serif;
    font-size: 7vw
}

.about-container .about-title:after {
    background-color: #ffd600;
    bottom: 0;
    content: "";
    height: 25vh;
    left: 35vw;
    position: absolute;
    width: 15vw
}

.about-container .quote-about {
    font-family: Poppins, sans-serif;
    font-size: 7vw;
    margin: 0 auto;
    min-height: 10vh;
    width: 56vw
}

.about-container .about-end-quote {
    text-align: right
}

.about-container .a-propos-layout {
    margin-left: 10vw;
    width: 60vw
}

.about-container .a-propos-layout p {
    font-family: Poppins, sans-serif;
    font-size: 1vw
}

@media screen and (max-width:768px) {
    .about-container {
        margin-top: 5vh;
        z-index: 0
    }

    .about-container .about-title {
        font-size: 15vw;
        z-index: 1
    }

    .about-container .about-title:after {
        display: none
    }

    .about-container .about-end-quote, .about-container .quote-about {
        margin: 0;
        min-height: -moz-fit-content;
        min-height: fit-content
    }

    .about-container .a-propos-layout {
        margin-left: 0;
        width: 100%
    }

    .about-container .a-propos-layout p {
        font-size: 5vw
    }
}

.links-banners .white-banner {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 20vh
}

.links-banners .white-banner .echange {
    background-color: #fff;
    border: 2px solid #3d3a3a;
    color: #3d3a3a;
    font-size: 1vw;
    font-weight: 700;
    outline: none;
    padding: 1vh 2vw
}

.links-banners .yellow-banner {
    align-items: center;
    background-color: #ffd600;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-bottom: 5vh;
    min-height: 30vh
}

.links-banners .yellow-banner h1 {
    font-size: 2vw
}

.links-banners .yellow-banner .link-yellow {
    display: flex;
    gap: 1vw;
    justify-content: space-evenly
}

.links-banners .yellow-banner .link-yellow a {
    align-items: center;
    border: 2px solid #000;
    color: #000;
    display: flex;
    font-size: 1vw;
    font-weight: 700;
    height: 5vh;
    justify-content: center;
    width: 15vw
}

@media screen and (max-width:768px) {
    .links-banners {
        z-index: 1
    }

    .links-banners .white-banner .echange {
        font-size: 4vw
    }

    .links-banners .yellow-banner h1 {
        font-size: 6vw
    }

    .links-banners .yellow-banner .link-yellow {
        flex-direction: column
    }

    .links-banners .yellow-banner .link-yellow a {
        font-size: 3vw;
        height: auto;
        padding: 1vh 2vh;
        width: auto
    }

    .all-layout .side-menu {
        display: none
    }
}

.contact {
    align-items: center;
    background-image: url(/images/contact-bg.svg?07f99e5d6cc5031dc6f4495edc1a03a0);
    background-size: cover;
    display: flex;
    flex-direction: column;
    margin-bottom: 5vh;
    padding: 0 10vw 5vh;
    position: relative
}

.contact .error-popup, .contact .success-popup {
    background-color: #fff;
    border: 3px solid #ffd600;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    left: 50%;
    max-width: 90vw;
    opacity: 0;
    padding: 2rem;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%) scale(.7);
    transition: all .5s cubic-bezier(.68, -.55, .27, 1.55);
    visibility: hidden;
    width: 400px;
    z-index: 1000
}

.contact .error-popup.show, .contact .success-popup.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    visibility: visible
}

.contact .error-popup .error-icon, .contact .error-popup .success-icon, .contact .success-popup .error-icon, .contact .success-popup .success-icon {
    align-items: center;
    background-color: #ffd600;
    border-radius: 50%;
    display: flex;
    height: 80px;
    justify-content: center;
    margin: 0 auto 1.5rem;
    width: 80px
}

.contact .error-popup .error-icon svg, .contact .error-popup .success-icon svg, .contact .success-popup .error-icon svg, .contact .success-popup .success-icon svg {
    fill: #fff;
    height: 40px;
    width: 40px
}

.contact .error-popup h3, .contact .success-popup h3 {
    color: #3d3a3a;
    font-family: Bricolage Grotesque, serif;
    font-size: 1.5rem;
    margin-bottom: 1rem
}

.contact .error-popup p, .contact .success-popup p {
    color: #3d3a3a;
    font-family: Poppins, sans-serif;
    font-size: 1rem;
    margin-bottom: 1.5rem
}

.contact .error-popup .close-popup, .contact .success-popup .close-popup {
    background-color: #ffd600;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-family: Bricolage Grotesque, serif;
    font-size: 1rem;
    font-weight: 700;
    padding: .75rem 1.5rem;
    transition: all .3s ease
}

.contact .error-popup .close-popup:hover, .contact .success-popup .close-popup:hover {
    background-color: #ccab00;
    transform: translateY(-2px)
}

.contact .error-popup {
    border-color: #ee2136
}

.contact .error-popup .close-popup, .contact .error-popup .error-icon {
    background-color: #ee2136
}

.contact .error-popup .close-popup:hover {
    background-color: #cc1023
}

.contact .popup-overlay {
    background-color: rgba(0, 0, 0, .5);
    bottom: 0;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all .3s ease;
    visibility: hidden;
    z-index: 999
}

.contact .popup-overlay.show {
    opacity: 1;
    visibility: visible
}

.contact .contact-titre {
    align-self: flex-start;
    display: flex;
    flex-direction: column
}

.contact .contact-titre h1 {
    font-size: 7vw;
    line-height: .8;
    width: -moz-fit-content;
    width: fit-content
}

.contact .contact-titre h1:nth-of-type(2) {
    align-items: center;
    color: #ffd600;
    display: flex;
    transform: translateX(22vw)
}

.contact .contact-titre h1:nth-of-type(2) img {
    height: 10vh
}

.contact .contact-content {
    border: 2px solid #000;
    border-right: none;
    border-top: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 2vh;
    padding: 5vh 2vw 0;
    transform: translateX(2vw)
}

.contact .contact-content .hey {
    color: #fff;
    font-size: 1.5vw;
    font-weight: bolder;
    position: absolute;
    top: -5vh
}

.contact .contact-content .hey:before {
    background-color: #3d3a3a;
    content: "";
    height: 2vw;
    position: absolute;
    transform: translateX(-25%) translateY(-12.5%) rotate(-8deg);
    width: 6vw;
    z-index: -1
}

.contact .contact-content .recherche {
    flex-basis: 30%;
    height: -moz-fit-content;
    height: fit-content;
    transform: translateX(-4vw)
}

.contact .contact-content .recherche .paragraph-layout {
    display: flex;
    flex-direction: column;
    height: 25vh;
    justify-content: space-between
}

.contact .contact-content .recherche .paragraph-layout .paragraphe-contact {
    background-color: #fff;
    font-size: 1.1vw;
    line-height: 1.5
}

.contact .contact-content .recherche .paragraph-layout .paragraphe-contact .highlight {
    border-radius: 3px;
    font-weight: 700;
    padding: 2px 4px
}

.contact .contact-content .recherche .paragraph-layout .paragraphe-contact .highlight:before {
    background-color: #ffd600;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: rotate(-1deg);
    width: 100%;
    z-index: -1 !important
}

.contact .contact-content .form-container {
    flex-basis: 50%
}

.contact .contact-content .form-container form {
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
    height: 50vh
}

.contact .contact-content .form-container form input, .contact .contact-content .form-container form textarea {
    font-family: Bricolage Grotesque, serif;
    font-size: 1vw;
    font-weight: 700;
    height: 100%;
    outline: 2px solid #000;
    padding-left: 1rem;
    width: 100%
}

.contact .contact-content .form-container form input::-moz-placeholder, .contact .contact-content .form-container form textarea::-moz-placeholder {
    color: rgba(0, 0, 0, .39);
    font-family: Bricolage Grotesque, serif;
    font-size: 1vw;
    font-weight: 700
}

.contact .contact-content .form-container form input::placeholder, .contact .contact-content .form-container form textarea::placeholder {
    color: rgba(0, 0, 0, .39);
    font-family: Bricolage Grotesque, serif;
    font-size: 1vw;
    font-weight: 700
}

.contact .contact-content .form-container form textarea {
    padding-top: 1vw
}

.contact .contact-content .form-container form .submit {
    background-color: transparent;
    border: 2px solid #353535;
    color: #353535;
    flex-basis: 30%;
    font-family: Bricolage Grotesque, serif;
    font-size: 1.05vw;
    font-weight: bolder;
    height: 5vh;
    margin: 0 auto;
    overflow: hidden
}

.contact .contact-content .form-container form .submit:before {
    background: #353535;
    content: "";
    display: block;
    height: 30vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: .5s ease;
    width: 0;
    z-index: -1
}

.contact .contact-content .form-container form .submit:hover:before {
    width: 50vw
}

.contact .contact-content .form-container form .submit:hover {
    color: #fff !important
}

.contact .contact-content .form-container form .surname-form:before {
    background-color: #000;
    content: "";
    display: block;
    height: 2px;
    left: -107%;
    position: absolute;
    top: 50%;
    width: 18vw
}

.contact .contact-content .form-container form .name-form, .contact .contact-content .form-container form .surname-form {
    flex-basis: calc(50% - 0.5vw)
}

.contact .contact-content .form-container form .name-form label, .contact .contact-content .form-container form .surname-form label {
    display: none
}

.contact .contact-content .form-container form .email-form, .contact .contact-content .form-container form .message-form, .contact .contact-content .form-container form .objet-form {
    flex-basis: 100%
}

.contact .contact-content .form-container form .email-form label, .contact .contact-content .form-container form .message-form label, .contact .contact-content .form-container form .objet-form label {
    display: none
}

.contact .contact-content .link-contact {
    background-color: #ffd600;
    bottom: 0;
    color: #000;
    flex-basis: 100%;
    font-family: Poppins, sans-serif;
    font-size: 1vw;
    height: -moz-fit-content;
    height: fit-content;
    left: 0;
    padding-bottom: 1rem;
    transform: translateX(-3vw)
}

.contact .contact-content .link-contact span {
    font-weight: 700
}

.contact .back-home {
    border: 2px solid #000;
    color: #000;
    font-size: 14pt;
    font-weight: bolder;
    margin: 0 auto;
    overflow: hidden;
    padding: 1rem 2rem;
    transition: .5s ease;
    z-index: 1
}

.contact .back-home:before {
    background: #000;
    content: "";
    display: block;
    height: 30vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: .5s ease;
    width: 0;
    z-index: -1
}

.contact .back-home:hover:before {
    width: 50vw
}

.contact .back-home:hover {
    color: #fff !important
}

@media screen and (max-width:768px) {
    .contact {
        margin-top: 5vh
    }

    .contact .contact-titre {
        align-items: flex-start;
        margin-bottom: 3vh
    }

    .contact .contact-titre h1 {
        font-size: 15vw
    }

    .contact .contact-titre h1:nth-of-type(2) {
        transform: none
    }

    .contact .contact-titre img {
        display: none
    }

    .contact .contact-content {
        border: none;
        flex-direction: column;
        margin-top: 6vh;
        padding: 0;
        transform: none
    }

    .contact .contact-content .recherche {
        transform: none
    }

    .contact .contact-content .recherche .hey {
        font-size: 6vw
    }

    .contact .contact-content .recherche .hey:before {
        height: 9vw;
        width: 23vw
    }

    .contact .contact-content .recherche .paragraph-layout {
        display: block;
        height: -moz-fit-content;
        height: fit-content;
        margin: 2vh 0
    }

    .contact .contact-content .recherche .paragraph-layout .paragraphe-contact {
        font-size: 5vw
    }

    .contact .contact-content .form-container form {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2vh
    }

    .contact .contact-content .form-container form input, .contact .contact-content .form-container form textarea {
        font-family: Bricolage Grotesque, serif;
        font-size: 5vw;
        font-weight: 700;
        height: 100%;
        outline: 2px solid #000;
        padding-left: 1rem;
        width: 100%
    }

    .contact .contact-content .form-container form input::-moz-placeholder, .contact .contact-content .form-container form textarea::-moz-placeholder {
        color: rgba(0, 0, 0, .39);
        font-family: Bricolage Grotesque, serif;
        font-size: 5vw;
        font-weight: 700
    }

    .contact .contact-content .form-container form input::placeholder, .contact .contact-content .form-container form textarea::placeholder {
        color: rgba(0, 0, 0, .39);
        font-family: Bricolage Grotesque, serif;
        font-size: 5vw;
        font-weight: 700
    }

    .contact .contact-content .form-container form .submit {
        font-size: 5vw;
        height: auto;
        padding: 1vh 2vh
    }

    .contact .contact-content .link-contact {
        font-size: 5vw;
        transform: none
    }
}

.univers-container {
    margin-bottom: 5vh;
    padding-left: 10vw
}

.univers-container .univers-titre {
    font-size: 10vw;
    line-height: .7
}

.univers-container .univers-titre span {
    color: #79e17d
}

.univers-container .second-titre {
    align-items: baseline;
    display: flex;
    justify-content: flex-end;
    text-align: end
}

.univers-container .second-titre span {
    padding-right: 1vw
}

.univers-container .second-titre div {
    background-color: #79e17d;
    height: 10vh;
    width: 45vw
}

.univers-container .notion-main-content {
    align-items: end;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 auto;
    width: 45vw
}

.univers-container .notion-main-content p {
    font-family: Poppins, sans-serif;
    font-size: 1vw;
    padding: 1vw;
    width: 22.5vw
}

.univers-container .green-bar-univers {
    background-color: #79e17d;
    height: 6vh;
    left: 0;
    position: absolute;
    width: 80vw
}

.univers-container .notion-subpages {
    padding-right: 10vw
}

.univers-container .notion-subpages .subpage {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 12vh;
    width: 100%
}

.univers-container .notion-subpages .subpage .notion-image {
    aspect-ratio: 1/1;
    flex-basis: 50%;
    max-height: 90vh
}

.univers-container .notion-subpages .subpage .notion-image img {
    max-height: 90vh;
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: right;
    object-position: right
}

.univers-container .notion-subpages .subpage .notion-content {
    border: .2vh solid #79e17d;
    border-left: none;
    display: flex;
    flex-basis: 40vw;
    flex-direction: column;
    justify-content: space-between;
    min-height: 45vh;
    padding: 5vh 0 5vh 1.5vw
}

.univers-container .notion-subpages .subpage .notion-content h3 {
    font-family: Poppins, sans-serif;
    font-size: 1.1vw;
    margin-bottom: 1vh
}

.univers-container .notion-subpages .subpage .notion-content p {
    font-family: Poppins, sans-serif;
    font-size: 1vw;
    margin-bottom: 1vh;
    width: 90%
}

.univers-container .notion-subpages .subpage:nth-of-type(2n) {
    flex-direction: row-reverse;
    justify-content: center
}

.univers-container .notion-subpages .subpage:nth-of-type(2n) .notion-image img {
    -o-object-position: left;
    object-position: left
}

.univers-container .notion-subpages .subpage:nth-of-type(2n) .notion-content {
    border-left: .2vh solid #79e17d;
    border-right: none;
    padding-right: 1.5vw
}

@media screen and (max-width:768px) {
    .univers-container {
        margin-top: 5vh
    }

    .univers-container .univers-titre {
        font-size: 12vw
    }

    .univers-container .second-titre {
        align-items: flex-start;
        font-size: 12vw
    }

    .univers-container .notion-main-content {
        display: block;
        margin: 0;
        width: 100%
    }

    .univers-container .notion-main-content p {
        font-size: 5vw;
        width: 100%
    }

    .univers-container .notion-subpages .subpage {
        flex-direction: column
    }

    .univers-container .notion-subpages .subpage .notion-image {
        aspect-ratio: auto
    }

    .univers-container .notion-subpages .subpage .notion-content {
        border: 2px solid #79e17d;
        min-height: -moz-fit-content;
        min-height: fit-content;
        padding: 1vh
    }

    .univers-container .notion-subpages .subpage .notion-content h3 {
        font-size: 6vw
    }

    .univers-container .notion-subpages .subpage .notion-content p {
        font-size: 4vw
    }

    .univers-container .notion-subpages .subpage:nth-of-type(2n) {
        flex-direction: column
    }

    .univers-container .notion-subpages .subpage:nth-of-type(2n) .notion-content {
        border: 2px solid #79e17d;
        min-height: -moz-fit-content;
        min-height: fit-content;
        padding: 1vh
    }

    .univers-container .notion-subpages .subpage:nth-of-type(2n) .notion-content h3 {
        font-size: 6vw
    }

    .univers-container .notion-subpages .subpage:nth-of-type(2n) .notion-content p {
        font-size: 4vw
    }
}

.link-univers {
    background-color: #79e17d;
    gap: 1.5vw;
    height: 25vh;
    width: 100vw
}

.link-univers, .link-univers a {
    align-items: center;
    display: flex;
    justify-content: center
}

.link-univers a {
    border: .3vh solid #353535;
    color: #353535;
    font-size: 1vw;
    font-weight: 700;
    height: 5vh;
    overflow: hidden;
    width: 15vw
}

.link-univers a span {
    z-index: 1
}

.link-univers a:before {
    background: #353535;
    content: "";
    display: block;
    height: 30vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: .5s ease;
    width: 0;
    z-index: 0
}

.link-univers a:hover:before {
    width: 50vw
}

.link-univers a:hover {
    color: #fff !important
}

@media screen and (max-width:768px) {
    .link-univers {
        flex-direction: column
    }

    .link-univers a {
        font-size: 4vw;
        height: auto;
        padding: 1vh 2vh;
        width: auto
    }
}

.footer-univers {
    align-items: center;
    background-image: url(/images/univers.png?89eeb1b8c5c9904368d209e8e8f13b95);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100vw auto;
    display: flex;
    height: 70vh;
    margin-bottom: 5rem
}

@media screen and (max-width:768px) {
    .footer-univers {
        height: 20vh;
        margin: 0
    }
}

.article-container {
    padding: 0 10vw
}

.article-container ul {
    list-style: disc;
    padding-left: 2vw
}

.article-container p {
    font-family: Poppins, sans-serif
}

.article-container .article-title {
    color: #000;
    font-family: Bricolage Grotesque, serif;
    font-size: 4vw;
    margin-bottom: 4vw
}

.article-container hr {
    flex-basis: 100%;
    margin-bottom: 4vh
}

.article-container .presentation-articles .img-text-layout {
    align-items: center;
    display: flex;
    gap: 10vw;
    margin-bottom: 12vh
}

.article-container .presentation-articles .img-text-layout .article-images {
    align-items: center;
    border: 2px solid #000;
    display: flex;
    flex-basis: 45%;
    flex-direction: column;
    height: 60vh;
    justify-content: center;
    padding: 1rem
}

.article-container .presentation-articles .img-text-layout .article-images .article-image {
    aspect-ratio: auto;
    max-height: 35vh;
    max-width: 100%
}

.article-container .presentation-articles .img-text-layout .article-images .article-image:nth-of-type(2), .article-container .presentation-articles .img-text-layout .article-images .article-image:only-of-type {
    transform: translateX(15%) translateY(25%)
}

.article-container .presentation-articles .img-text-layout .article-images .article-image:only-of-type {
    max-height: 100%;
    width: 100%
}

.article-container .presentation-articles .img-text-layout .quote-article {
    align-items: center;
    background-color: #f2f0f0;
    display: flex;
    flex-basis: 45%;
    flex-direction: column;
    font-family: Bricolage Grotesque, serif;
    font-size: 1vw;
    height: 60vh;
    justify-content: center;
    margin: 0 auto;
    padding-bottom: 2vh
}

.article-container .presentation-articles .img-text-layout .quote-article p {
    width: 90%
}

.article-container .presentation-articles .img-text-layout .quote-article p:nth-child(odd) {
    margin: 2vh 0
}

.article-container .skills-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin: 2rem 0
}

@media screen and (max-width:768px) {
    .article-container .skills-sections {
        flex-direction: column
    }

    .article-container .skills-sections .skills-title h1 {
        font-size: 8vw !important
    }

    .article-container .skills-sections h3 {
        font-size: 4vw !important
    }

    .article-container .skills-sections .skill-section {
        flex-basis: 100% !important
    }

    .article-container .skills-sections .arrow-icon, .article-container .skills-sections .article-section-content, .article-container .skills-sections .logiciel-content, .article-container .skills-sections .logiciel-header, .article-container .skills-sections .logiciel-logo, .article-container .skills-sections .logiciel-title, .article-container .skills-sections .logiciel-title span, .article-container .skills-sections .savoir-content, .article-container .skills-sections .savoir-content li, .article-container .skills-sections .savoir-header, .article-container .skills-sections .techniques-description, .article-container .skills-sections h4 {
        font-size: 4vw !important
    }
}

.article-container .skills-sections .skills-title {
    background-color: #f2f0f0;
    flex-basis: 100%;
    padding: 1vw
}

.article-container .skills-sections .skills-title h1 {
    color: #000;
    font-family: Poppins, sans-serif;
    font-size: 1vw
}

.article-container .skills-sections .skill-section {
    flex-basis: 20%;
    overflow: hidden;
    transition: all .3s ease
}

.article-container .skills-sections .skill-section.active .skill-content {
    max-height: 100vh
}

.article-container .skills-sections .skill-header {
    align-items: center;
    border-bottom: 2px solid #000;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 1rem
}

.article-container .skills-sections .skill-header h3 {
    color: #3d3a3a;
    font-family: Poppins, sans-serif;
    font-size: 1vw;
    margin: 0
}

.article-container .skills-sections .skill-header .arrow-icon {
    transition: transform .3s ease
}

.article-container .skills-sections .skill-content {
    background: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease-out
}

.article-container .skills-sections .skill-content h4 {
    color: #3d3a3a;
    font-family: Poppins, sans-serif;
    font-size: 1.1vw;
    font-weight: 500;
    margin: 1rem 0 .5rem
}

.article-container .skills-sections .skill-content .savoir-section {
    overflow: hidden
}

.article-container .skills-sections .skill-content .savoir-section .savoir-header {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: .5rem 1rem;
    transition: background-color .3s ease
}

.article-container .skills-sections .skill-content .savoir-section .savoir-header h4 {
    margin: 0;
    padding: 0
}

.article-container .skills-sections .skill-content .savoir-section .savoir-header .arrow-icon {
    color: #666;
    flex-shrink: 0;
    height: 16px;
    transition: transform .3s ease;
    width: 16px
}

.article-container .skills-sections .skill-content .savoir-section .savoir-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease-out
}

.article-container .skills-sections .skill-content .savoir-section .savoir-content ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.article-container .skills-sections .skill-content .savoir-section .savoir-content ul li {
    color: #3d3a3a;
    font-family: Poppins, sans-serif;
    font-size: 1vw;
    font-weight: 400
}

.article-container .skills-sections .skill-content .savoir-section.active .savoir-content {
    max-height: 500px
}

.article-container .skills-sections .skill-content .savoir-section.active .arrow-icon {
    transform: rotate(180deg)
}

.article-container .skills-sections .skill-content ul {
    list-style: none;
    margin: 0
}

.article-container .skills-sections .skill-content ul li {
    margin: 2vh 0
}

.article-container .skills-sections .logiciels-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5vh .1vh
}

.article-container .skills-sections .logiciel-item {
    transition: all .3s ease
}

.article-container .skills-sections .logiciel-item.active .techniques-content {
    max-height: 500px
}

.article-container .skills-sections .logiciel-item.active .arrow-icon {
    transform: rotate(180deg)
}

.article-container .skills-sections .logiciel-item .logiciel-content {
    display: flex;
    flex-direction: column
}

.article-container .skills-sections .logiciel-item .logiciel-header {
    align-items: center;
    display: flex
}

.article-container .skills-sections .logiciel-item .logiciel-header .logiciel-logo {
    background: #fff;
    flex-shrink: 0;
    height: 8vh;
    width: 8vh
}

.article-container .skills-sections .logiciel-item .logiciel-header .logiciel-logo img {
    height: 100%;
    width: 100%
}

.article-container .skills-sections .logiciel-item .logiciel-header .logiciel-info {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 4px
}

.article-container .skills-sections .logiciel-item .logiciel-header .logiciel-info .logiciel-title {
    align-items: center;
    display: flex;
    font-family: Poppins, sans-serif;
    justify-content: flex-start;
    width: 100%
}

.article-container .skills-sections .logiciel-item .logiciel-header .logiciel-info .logiciel-title .title {
    color: #000;
    font-size: 1vw;
    font-weight: 500
}

.article-container .skills-sections .logiciel-item .logiciel-header .logiciel-info .logiciel-title .arrow-icon {
    color: #666;
    flex-shrink: 0;
    height: 24px;
    transition: transform .3s ease;
    width: 24px
}

.article-container .skills-sections .logiciel-item .logiciel-header .logiciel-info .techniques-content {
    border-radius: 8px;
    max-height: 0;
    overflow: hidden;
    transition: all .3s ease-out
}

.article-container .skills-sections .logiciel-item .logiciel-header .logiciel-info .techniques-content .techniques-description {
    color: #353535;
    font-size: .7vw
}

.article-container .article-content {
    z-index: 0 !important
}

.article-container .article-content .article-section {
    display: block;
    margin-bottom: 10vh
}

.article-container .article-content .article-section:nth-child(2) {
    background-color: #f2f0f0;
    display: flex;
    flex-direction: column;
    min-height: 45vh;
    padding: 1.5vw;
    z-index: 0 !important
}

.article-container .article-content .article-section:nth-child(2) .article-section-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
    padding: 1vh 0
}

.article-container .article-content .article-section:nth-child(3) {
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    padding: 1.5rem
}

.article-container .article-content .article-section:nth-child(3) .article-section-content .file-block {
    margin: 10px 0
}

.article-container .article-content .article-section:nth-child(3) .article-section-content .file-block .file-link {
    align-items: center;
    color: #000;
    display: flex;
    text-decoration: none
}

.article-container .article-content .article-section:nth-child(3) .article-section-content .file-block .file-link:hover {
    text-decoration: underline
}

.article-container .article-content .article-section.has-image {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    height: 100vh;
    justify-content: space-between
}

.article-container .article-content .article-section.has-image h1 {
    background-color: #f2f0f0;
    border-radius: 5px;
    flex-basis: 100%;
    margin-bottom: 3.5rem;
    padding: 1rem
}

.article-container .article-content .article-section.has-image .article-section-images {
    flex-basis: 35%;
    height: 100vh
}

.article-container .article-content .article-section.has-image .article-section-images img {
    max-width: 100%;
    padding: 2rem;
    z-index: 2
}

.article-container .article-content .article-section.has-image .article-section-content {
    border-left: 1rem solid #f2f0f0;
    display: flex;
    flex-direction: column;
    min-height: -moz-fit-content;
    min-height: fit-content;
    padding: 1rem
}

.article-container .article-content .article-section.has-image .article-section-content strong {
    display: flex;
    padding-top: 2rem
}

.article-container .article-content .article-section h1 {
    font-family: Poppins, sans-serif;
    font-size: 1.1vw
}

.article-container .article-content .article-section h1 strong {
    font-size: 1.1vw;
    font-weight: 600
}

.article-container .article-content .article-section .article-section-content {
    font-family: Poppins, sans-serif;
    font-size: 1vw;
    width: 55%
}

.article-container .article-content .embed-container {
    height: 50vh;
    overflow: hidden;
    position: relative;
    width: calc(80vw - 4rem)
}

.article-container .article-content .embed-container iframe {
    border: 2px solid #353535;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@media screen and (max-width:768px) {
    .article-container {
        margin-top: 5vh
    }

    .article-container .article-title {
        font-size: 10vw
    }

    .article-container .presentation-articles .img-text-layout {
        flex-direction: column
    }

    .article-container .presentation-articles .img-text-layout .quote-article {
        font-size: 4.5vw
    }

    .article-container .article-content .article-section h1 strong {
        font-size: 5vw
    }

    .article-container .article-content .article-section .article-section-content {
        width: 100%
    }

    .article-container .article-content .article-section .article-section-content p {
        font-size: 4vw;
        width: 100%
    }

    .article-container .article-content .article-section .article-section-content .file-block {
        font-size: 4vw
    }

    .article-container .article-content .has-image {
        flex-direction: column;
        flex-wrap: nowrap !important;
        height: -moz-fit-content !important;
        height: fit-content !important
    }

    .article-container .article-content .has-image .article-section-content {
        font-size: 4vw;
        width: 100%
    }

    .article-container .article-content .has-image .article-section-images img {
        padding: 0 !important
    }
}

.pagination-articles {
    background-color: #f2f0f0;
    gap: 1rem;
    height: 35vh;
    margin-bottom: 10vh;
    margin-top: 4rem;
    padding: 2rem 0
}

.pagination-articles, .pagination-articles a {
    align-items: center;
    display: flex;
    justify-content: center
}

.pagination-articles a {
    border: 2px solid #353535;
    font-weight: 700;
    height: 5vh;
    margin-top: 2vh;
    overflow: hidden;
    transition: .5s ease;
    width: 15vw
}

.pagination-articles a span {
    font-family: Poppins, sans-serif;
    z-index: 1
}

.pagination-articles a:before {
    background: #353535;
    content: "";
    display: block;
    height: 30vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: .5s ease;
    width: 0;
    z-index: 0
}

.pagination-articles a:hover:before {
    width: 50vw
}

.pagination-articles a:hover {
    color: #fff !important
}

@media screen and (max-width:768px) {
    .pagination-articles {
        flex-direction: column;
        gap: 1rem
    }

    .pagination-articles a {
        width: 50vw
    }
}

.mentions-legales-container {
    font-family: Poppins, sans-serif;
    padding: 0 10vw
}

.mentions-legales-container .mentions-legales-title {
    color: #000;
    font-family: Bricolage Grotesque, serif
}

.mentions-legales-container .mentions-legales-title h1 {
    font-size: 7vw
}

.mentions-legales-container .section {
    margin-bottom: 5vh
}

.mentions-legales-container .section .section-title {
    color: #000;
    font-size: 1.1vw;
    font-weight: 700;
    margin-bottom: 2vh;
    padding-bottom: 1vh
}

.mentions-legales-container .section .section-content {
    font-size: 1vw
}

.mentions-legales-container .section .section-content p {
    margin-bottom: .5vh
}

.home-menu {
    height: 1200px;
    margin: 0 auto;
    position: relative;
    width: 1200px
}

.home-menu>a {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2
}

.home-menu>a img {
    height: auto;
    width: 400px
}

.home-menu ul {
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%
}

.home-menu .link {
    height: 300px;
    position: absolute;
    width: 300px
}

.home-menu .link svg {
    height: 100%;
    transition: transform .3s ease;
    width: 100%
}

.home-menu .link svg:hover {
    cursor: pointer;
    transform: scale(1.1)
}

.home-menu .link:first-child {
    left: calc(50% + 400px);
    top: 50%;
    transform: translate(-50%, -50%)
}

.home-menu .link:nth-child(2) {
    left: calc(50% + 200.00031px);
    top: calc(50% + 346.40998px);
    transform: translate(-50%, -50%)
}

.home-menu .link:nth-child(3) {
    left: calc(50% - 199.99939px);
    top: calc(50% + 346.41052px);
    transform: translate(-50%, -50%)
}

.home-menu .link:nth-child(4) {
    left: calc(50% - 400px);
    top: calc(50% + .00106px);
    transform: translate(-50%, -50%)
}

.home-menu .link:nth-child(5) {
    left: calc(50% - 200.00123px);
    top: calc(50% - 346.40945px);
    transform: translate(-50%, -50%)
}

.home-menu .link:nth-child(6) {
    left: calc(50% + 199.99847px);
    top: calc(50% - 346.41105px);
    transform: translate(-50%, -50%)
}