@import "https://cdn.jsdelivr.net/npm/@fontsource/exo-2@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/exo-2@latest/700.css";

* {
    box-sizing: border-box
}

html {
    font-size: 100%
}

body {
    margin: 0;
    overscroll-behavior: contain;
    overflow-x: hidden;
    font-family: 'Exo 2', sans-serif;
    background: #FFF;
    color: #1A1A1A
}

.headershell {
    background: linear-gradient(135deg, #F9F9F9 0%, #FFF 100%);
    border-bottom: 4px solid #30F300;
    padding: 24px 40px;
    position: relative
}

.headershell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, #30F300 0%, #9D5B29 100%);
    opacity: .3
}

.headergrid {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px
}

.brandbox {
    background: #FFF;
    padding: 16px;
    border: 3px solid #30F300;
    border-radius: 4px;
    box-shadow: 1px 6px 28px 0 #30f30014;
    transition: transform .7s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.brandbox:hover {
    transform: scale(1.05) rotate(-2deg)
}

.brandlogo {
    display: block;
    width: 78px;
    height: 78px;
    object-fit: contain
}

.navhold {
    flex: 1;
    display: flex;
    justify-content: center
}

.navmenu {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center
}

.navitem {
    position: relative
}

.navlink {
    display: block;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    color: #2A2A2A;
    text-decoration: none;
    border: 3px solid transparent;
    border-radius: 42px;
    background: #FFF;
    transition: background-color .8s cubic-bezier(0.68, -0.55, 0.265, 1.55), border-color .6s ease-in-out, color .6s ease-in-out, transform .7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden
}

.navlink::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(180deg, #30F300 0%, #9D5B29 100%);
    transition: height .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: -1
}

.navlink:hover::before {
    height: 100%
}

.navlink:hover {
    border-color: #30F300;
    color: #FFF;
    transform: translateY(-4px)
}

.navlink:focus {
    outline: 3px solid #30F300;
    outline-offset: 4px
}

.announcebox {
    background: #9D5B29;
    color: #FFF;
    padding: 16px 24px;
    border-radius: 42px;
    font-size: 16px;
    font-weight: 700;
    border: 3px solid #30F300;
    box-shadow: 1px 12px 60px 0 #9d5b291a;
    white-space: nowrap;
    transition: transform .7s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow .6s ease-in-out
}

.announcebox:hover {
    transform: scale(1.08);
    box-shadow: 1px 12px 60px 0 #9d5b2933
}

@media (max-width: 1280px) {
    .headergrid {
        gap: 24px
    }

    .navmenu {
        gap: 16px
    }

    .navlink {
        padding: 16px;
        font-size: 16px
    }

    .announcebox {
        font-size: 16px;
        padding: 16px
    }
}

@media (max-width: 768px) {
    .headershell {
        padding: 16px 24px
    }

    .headergrid {
        flex-direction: column;
        gap: 16px
    }

    .brandbox {
        padding: 8px
    }

    .brandlogo {
        width: 70px;
        height: 70px
    }

    .navhold {
        width: 100%
    }

    .navmenu {
        flex-direction: column;
        align-items: center;
        gap: 8px
    }

    .navlink {
        width: 100%;
        text-align: center;
        padding: 16px
    }

    .announcebox {
        width: 100%;
        text-align: center
    }
}

@media (max-width: 480px) {
    .headershell {
        padding: 8px 16px
    }

    .navlink {
        font-size: 16px
    }

    .announcebox {
        font-size: 16px
    }
}

.footershell {
    background: linear-gradient(135deg, #2A2A2A 0%, #1A1A1A 100%);
    border-top: 4px solid #30F300;
    padding: 80px 40px 40px;
    position: relative;
    margin-top: 80px
}

.footershell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, #9D5B29 0%, #30F300 100%);
    opacity: .5
}

.footergrid {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
    gap: 40px;
    margin-bottom: 80px
}

.footerblock {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.footerbrand {
    background: #FFF;
    padding: 24px;
    border-radius: 4px;
    border: 3px solid #30F300;
    box-shadow: 1px 12px 60px 0 #30f3001a;
    transition: transform .7s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.footerbrand:hover {
    transform: scale(1.03) rotate(1deg)
}

.footerlogo {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 16px
}

.companyname {
    font-size: 23px;
    font-weight: 700;
    color: #2A2A2A;
    margin: 0;
    line-height: 1.5
}

.footerheading {
    font-size: 23px;
    font-weight: 700;
    color: #30F300;
    margin: 0 0 16px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .08em
}

.contactcard {
    background: #FFF;
    padding: 24px;
    border-radius: 4px;
    border: 3px solid #9D5B29;
    box-shadow: 1px 6px 28px 0 #9d5b2914;
    transition: transform .6s ease-in-out, box-shadow .6s ease-in-out
}

.contactcard:hover {
    transform: translateY(-6px);
    box-shadow: 1px 12px 60px 0 #9d5b291a
}

.contactlist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.contactrow {
    display: flex;
    align-items: flex-start;
    gap: 16px
}

.contacticon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 4px
}

.contacticonsvg {
    width: 100%;
    height: 100%;
    fill: #30F300;
    transition: fill .6s ease-in-out
}

.contactrow:hover .contacticonsvg {
    fill: #9D5B29
}

.contacttext {
    font-size: 16px;
    color: #2A2A2A;
    line-height: 1.5;
    margin: 0
}

.contactlink {
    color: #2A2A2A;
    text-decoration: none;
    transition: color .6s ease-in-out
}

.contactlink:hover {
    color: #30F300
}

.contactlink:focus {
    outline: 3px solid #30F300;
    outline-offset: 2px
}

.footernavlist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.footernavitem {
    position: relative
}

.footernavlink {
    display: inline-block;
    font-size: 16px;
    color: #F9F9F9;
    text-decoration: none;
    padding: 8px 16px;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: color .6s ease-in-out, border-color .6s ease-in-out, background-color .7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden
}

.footernavlink::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: #30F300;
    transition: height .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: -1
}

.footernavlink:hover::before {
    height: 100%
}

.footernavlink:hover {
    color: #1A1A1A;
    border-color: #30F300
}

.footernavlink:focus {
    outline: 3px solid #9D5B29;
    outline-offset: 4px
}

.legalbox {
    background: #1A1A1A;
    padding: 24px 40px;
    border-top: 2px solid #30F300
}

.legalcontent {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px
}

.copyright {
    font-size: 16px;
    color: #F9F9F9;
    margin: 0;
    line-height: 1.5
}

.legallinks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 24px
}

.legallink {
    font-size: 16px;
    color: #F9F9F9;
    text-decoration: none;
    padding: 8px;
    border-bottom: 2px solid transparent;
    transition: color .6s ease-in-out, border-color .6s ease-in-out
}

.legallink:hover {
    color: #30F300;
    border-color: #30F300
}

.legallink:focus {
    outline: 3px solid #9D5B29;
    outline-offset: 4px
}

@media (max-width: 1280px) {
    .footergrid {
        grid-template-columns: 1fr 1fr;
        gap: 40px
    }

    .footershell {
        padding: 80px 24px 40px
    }

    .legalbox {
        padding: 24px
    }
}

@media (max-width: 768px) {
    .footergrid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .footershell {
        padding: 40px 16px 24px
    }

    .legalcontent {
        flex-direction: column;
        gap: 24px;
        text-align: center
    }

    .legallinks {
        flex-direction: column;
        gap: 16px;
        align-items: center
    }
}

@media (max-width: 480px) {
    .footershell {
        padding: 40px 8px 16px
    }

    .footergrid {
        gap: 24px
    }

    .legalbox {
        padding: 16px
    }
}

.consentbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #2A2A2A 0%, #1A1A1A 100%);
    border-bottom: 4px solid #30F300;
    padding: 24px 40px;
    box-shadow: 1px 12px 60px 0 #30f3001a;
    z-index: 8000;
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px
}

.consentbar.visible {
    transform: translateX(0)
}

.consentcontent {
    max-width: 1500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%
}

.consenttext {
    flex: 1;
    color: #F9F9F9;
    font-size: 16px;
    line-height: 1.5;
    margin: 0
}

.consentactions {
    display: flex;
    gap: 24px;
    flex-shrink: 0
}

.consentbtn {
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Exo 2', sans-serif;
    color: #F9F9F9;
    background: transparent;
    border: 3px solid #30F300;
    border-radius: 42px;
    cursor: pointer;
    text-decoration: underline;
    transition: background-color .7s cubic-bezier(0.68, -0.55, 0.265, 1.55), color .6s ease-in-out, transform .6s ease-in-out;
    position: relative;
    overflow: hidden
}

.consentbtn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: #30F300;
    transition: height .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: -1
}

.consentbtn:hover::before {
    height: 100%
}

.consentbtn:hover {
    color: #1A1A1A;
    transform: scale(1.05)
}

.consentbtn:focus {
    outline: 3px solid #9D5B29;
    outline-offset: 4px
}

@media (max-width: 768px) {
    .consentbar {
        padding: 16px 24px
    }

    .consentcontent {
        flex-direction: column;
        gap: 24px
    }

    .consentactions {
        width: 100%;
        flex-direction: column;
        gap: 16px
    }

    .consentbtn {
        width: 100%
    }
}

.doc-box {
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 24px;
    background: #fff
}

@media (min-width: 768px) {
    .doc-box {
        padding: 80px 40px
    }
}

.doc-box p {
    font-size: 16px;
    line-height: 1.9;
    margin: 0 0 24px;
    color: #1a1a1a
}

.doc-box ul,
.doc-box ol {
    font-size: 16px;
    line-height: 1.9;
    margin: 0 0 24px;
    padding: 0 0 0 40px;
    color: #1a1a1a
}

.doc-box li {
    margin: 0 0 8px
}

.doc-box li:last-child {
    margin-bottom: 0
}

.doc-box em,
.doc-box i {
    font-style: italic
}

.doc-box a {
    color: #30F300;
    text-decoration: underline;
    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1)
}

.doc-box a:hover {
    color: #9D5B29
}

.doc-box table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 40px;
    font-size: 16px;
    line-height: 1.5;
    box-shadow: 1px 2px 4px 0 #30f30012
}

.doc-box thead {
    background: #F9F9F9
}

.doc-box th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    border: 2px solid #30F300;
    color: #1a1a1a
}

.doc-box td {
    padding: 16px;
    border: 1px solid #e3e3e3;
    color: #1a1a1a
}

.doc-box tbody tr:nth-child(even) {
    background: #fafafa
}

.doc-box hr {
    border: none;
    height: 2px;
    background: #30F300;
    margin: 40px 0;
    border-radius: 4px
}

@media (max-width: 480px) {
    .doc-box {
        padding: 40px 16px
    }

    .doc-box table {
        font-size: 14px
    }

    .doc-box th,
    .doc-box td {
        padding: 8px
    }
}

.services {
    background: #FFF;
    color: #1D1D1D;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
    overflow-x: clip
}

.services * {
    box-sizing: border-box
}

.services .openbanner {
    background: linear-gradient(128deg, #30F300 0%, #F9F9F9 100%);
    padding: 160px 40px 80px;
    position: relative;
    overflow: hidden
}

.services .openbanner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, #9d5b2908 2px, #9d5b2908 4px);
    pointer-events: none;
    z-index: 1
}

.services .bannergrid {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 80px;
    align-items: start;
    position: relative;
    z-index: 2
}

.services .textcol {
    padding-top: 40px
}

.services .textcol h1 {
    font-size: 72px;
    line-height: 1.1;
    margin: 0 0 40px;
    color: #1D1D1D;
    filter: blur(8px);
    animation: clarifytext .9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: .2s
}

@keyframes clarifytext {
    to {
        filter: blur(0)
    }
}

.services .textcol h1 .accent {
    color: #9D5B29;
    position: relative;
    display: inline-block
}

.services .textcol h1 .accent::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 3px;
    background: #9D5B29
}

.services .textcol p {
    font-size: 23px;
    line-height: 1.5;
    margin: 0 0 24px;
    color: #2D2D2D
}

.services .textcol p:first-of-type {
    font-size: 30px;
    line-height: 1.5
}

.services .imagecol {
    position: relative
}

.services .imagecol img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%);
    border-radius: 42px;
    box-shadow: 1px 12px 60px 0 #30f3001a;
    aspect-ratio: 16/9;
    object-fit: cover
}

.services .offerzone {
    background: #FFF;
    padding: 80px 40px;
    position: relative
}

.services .offerzone::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: 60px;
    background: #FFF;
    clip-path: ellipse(100% 100% at 50% 100%)
}

.services .offerzone h2 {
    font-size: 72px;
    line-height: 1.1;
    margin: 0 0 80px;
    color: #1D1D1D;
    text-align: center
}

.services .offergrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto
}

.services .offerleft {
    display: grid;
    grid-template-rows: auto auto;
    gap: 80px
}

.services .offerright {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.services .offercard {
    background: #F9F9F9;
    padding: 40px;
    border-radius: 42px;
    border: 4px solid #30F300;
    position: relative;
    overflow: hidden;
    box-shadow: 1px 6px 28px 0 #9d5b2914;
    transition: transform .7s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.services .offercard:hover {
    transform: scale(1.02)
}

.services .offercard h3 {
    font-size: 30px;
    line-height: 1.1;
    margin: 0 0 24px;
    color: #1D1D1D;
    font-weight: 300;
    letter-spacing: .05em;
    text-transform: uppercase
}

.services .offercard p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 16px;
    color: #3D3D3D
}

.services .offercard p:last-of-type {
    margin: 0
}

.services .offercard.large {
    padding: 80px 40px
}

.services .offercard.large h3 {
    font-size: 72px;
    margin-bottom: 40px
}

.services .offercard.large p {
    font-size: 23px;
    line-height: 1.5;
    margin-bottom: 24px
}

.services .dashedbox {
    border: 3px dashed #9D5B29;
    padding: 40px;
    border-radius: 4px;
    background: #FFF;
    margin-top: 40px
}

.services .dashedbox h4 {
    font-size: 23px;
    line-height: 1.1;
    margin: 0 0 24px;
    color: #9D5B29
}

.services .dashedbox ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.services .dashedbox li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 16px;
    line-height: 1.5;
    color: #2D2D2D
}

.services .dashedbox li::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #30F300;
    flex-shrink: 0
}

.services .expertzone {
    background: linear-gradient(180deg, #F9F9F9 0%, #F9F9F9 50%, #9D5B29 50%, #9D5B29 100%);
    padding: 80px 40px;
    position: relative
}

.services .expertzone::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: 60px;
    background: #F9F9F9;
    clip-path: ellipse(100% 100% at 50% 100%)
}

.services .expertcontainer {
    max-width: 1200px;
    margin: 0 auto
}

.services .expertcontainer h2 {
    font-size: 72px;
    line-height: 1.1;
    margin: 0 0 80px;
    color: #1D1D1D
}

.services .expertlayout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: start
}

.services .activityfeed {
    background: #FFF;
    padding: 40px;
    border-radius: 42px;
    border: 4px solid #30F300;
    box-shadow: 1px 12px 60px 0 #9d5b291a
}

.services .activityfeed h3 {
    font-size: 30px;
    line-height: 1.1;
    margin: 0 0 40px;
    color: #1D1D1D
}

.services .feeditem {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 2px solid #F9F9F9;
    transition: background .8s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.services .feeditem:hover {
    background: #30f30008
}

.services .feeditem:last-child {
    border-bottom: none
}

.services .feedicon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #30F300;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden
}

.services .feedicon::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #9D5B29;
    transition: height .7s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.services .feeditem:hover .feedicon::before {
    height: 100%
}

.services .feedicon svg {
    width: 20px;
    height: 20px;
    fill: #1D1D1D;
    position: relative;
    z-index: 1
}

.services .feedcontent {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.services .feedtime {
    font-size: 16px;
    line-height: 1.1;
    color: #9D5B29;
    font-weight: 600
}

.services .feeddesc {
    font-size: 16px;
    line-height: 1.5;
    color: #2D2D2D;
    margin: 0
}

.services .expertprofile {
    display: flex;
    flex-direction: column;
    gap: 40px;
    filter: blur(4px);
    animation: clarifyexpert .9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: .5s
}

@keyframes clarifyexpert {
    to {
        filter: blur(0)
    }
}

.services .profilecard {
    background: #FFF;
    padding: 40px;
    border-radius: 42px;
    border: 4px solid #9D5B29;
    box-shadow: 1px 6px 28px 0 #30f30014;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center
}

.services .profileimage {
    width: 120px;
    height: 154px;
    border-radius: 42px;
    overflow: hidden;
    border: 3px solid #30F300
}

.services .profileimage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform .7s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.services .profilecard:hover .profileimage img {
    transform: scale(1.1)
}

.services .profilecard h4 {
    font-size: 23px;
    line-height: 1.1;
    margin: 0;
    color: #1D1D1D
}

.services .profilecard p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    color: #3D3D3D
}

.services .profilestats {
    background: #F9F9F9;
    padding: 40px;
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.services .statitem {
    text-align: center
}

.services .statvalue {
    font-size: 30px;
    line-height: 1.1;
    color: #30F300;
    font-weight: 600;
    display: block;
    margin-bottom: 8px
}

.services .statlabel {
    font-size: 16px;
    line-height: 1.1;
    color: #2D2D2D
}

@media (max-width: 1280px) {
    .services .openbanner {
        padding: 120px 40px 80px
    }

    .services .bannergrid {
        gap: 40px
    }

    .services .textcol h1 {
        font-size: 60px;
        margin-bottom: 24px
    }

    .services .textcol p {
        font-size: 20px
    }

    .services .textcol p:first-of-type {
        font-size: 26px
    }

    .services .offerzone h2,
    .services .expertcontainer h2 {
        font-size: 60px;
        margin-bottom: 40px
    }

    .services .offercard.large h3 {
        font-size: 60px
    }

    .services .offercard.large p {
        font-size: 20px
    }
}

@media (max-width: 768px) {
    .services .openbanner {
        padding: 80px 24px 40px
    }

    .services .bannergrid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .services .textcol {
        padding-top: 0
    }

    .services .textcol h1 {
        font-size: 48px;
        margin-bottom: 24px
    }

    .services .textcol p {
        font-size: 18px;
        margin-bottom: 16px
    }

    .services .textcol p:first-of-type {
        font-size: 23px
    }

    .services .offerzone,
    .services .expertzone {
        padding: 40px 24px
    }

    .services .offerzone h2,
    .services .expertcontainer h2 {
        font-size: 48px;
        margin-bottom: 40px
    }

    .services .offergrid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .services .offerleft {
        gap: 40px
    }

    .services .offercard {
        padding: 24px
    }

    .services .offercard h3 {
        font-size: 23px;
        margin-bottom: 16px
    }

    .services .offercard.large {
        padding: 40px 24px
    }

    .services .offercard.large h3 {
        font-size: 48px;
        margin-bottom: 24px
    }

    .services .offercard.large p {
        font-size: 18px;
        margin-bottom: 16px
    }

    .services .dashedbox {
        padding: 24px;
        margin-top: 24px
    }

    .services .dashedbox h4 {
        font-size: 20px;
        margin-bottom: 16px
    }

    .services .dashedbox ul {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .services .expertlayout {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .services .activityfeed {
        padding: 24px
    }

    .services .activityfeed h3 {
        font-size: 23px;
        margin-bottom: 24px
    }

    .services .feeditem {
        gap: 16px;
        padding: 16px 0
    }

    .services .feedicon {
        width: 32px;
        height: 32px
    }

    .services .feedicon svg {
        width: 16px;
        height: 16px
    }

    .services .profilecard {
        padding: 24px;
        gap: 16px
    }

    .services .profileimage {
        width: 100px;
        height: 128px
    }

    .services .profilecard h4 {
        font-size: 20px
    }

    .services .profilestats {
        padding: 24px;
        gap: 16px
    }

    .services .statvalue {
        font-size: 23px
    }

    .services .expertprofile {
        gap: 24px
    }
}

@media (max-width: 480px) {
    .services .openbanner {
        padding: 40px 16px 24px
    }

    .services .bannergrid {
        gap: 24px
    }

    .services .textcol h1 {
        font-size: 36px;
        margin-bottom: 16px
    }

    .services .textcol h1 .accent::before {
        width: 12px;
        height: 2px;
        left: -16px
    }

    .services .textcol p {
        font-size: 16px;
        margin-bottom: 16px
    }

    .services .textcol p:first-of-type {
        font-size: 20px
    }

    .services .offerzone,
    .services .expertzone {
        padding: 24px 16px
    }

    .services .offerzone h2,
    .services .expertcontainer h2 {
        font-size: 36px;
        margin-bottom: 24px
    }

    .services .offergrid {
        gap: 24px
    }

    .services .offerleft {
        gap: 24px
    }

    .services .offercard {
        padding: 16px
    }

    .services .offercard h3 {
        font-size: 20px;
        margin-bottom: 16px
    }

    .services .offercard.large {
        padding: 24px 16px
    }

    .services .offercard.large h3 {
        font-size: 36px;
        margin-bottom: 16px
    }

    .services .offercard.large p {
        font-size: 16px;
        margin-bottom: 16px
    }

    .services .dashedbox {
        padding: 16px;
        margin-top: 16px
    }

    .services .dashedbox h4 {
        font-size: 18px;
        margin-bottom: 16px
    }

    .services .expertlayout {
        gap: 24px
    }

    .services .activityfeed {
        padding: 16px
    }

    .services .activityfeed h3 {
        font-size: 20px;
        margin-bottom: 16px
    }

    .services .feeditem {
        gap: 16px;
        padding: 16px 0
    }

    .services .profilecard {
        padding: 16px;
        gap: 16px
    }

    .services .profileimage {
        width: 80px;
        height: 103px
    }

    .services .profilecard h4 {
        font-size: 18px
    }

    .services .profilestats {
        padding: 16px;
        gap: 16px
    }

    .services .statvalue {
        font-size: 20px
    }

    .services .statlabel {
        font-size: 14px
    }

    .services .expertprofile {
        gap: 16px
    }
}

.services .blurcontext:hover .offercard:not(:hover) {
    filter: blur(2px);
    transition: filter .7s cubic-bezier(0.4, 0, 0.2, 1)
}

.services .blurcontext .offercard {
    transition: filter .7s cubic-bezier(0.4, 0, 0.2, 1)
}

.front {
    background: #F9F9F9;
    overflow-x: clip
}

.front * {
    box-sizing: border-box
}

.front .contain {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px
}

.front .openhero {
    padding: 80px 0;
    position: relative;
    background: linear-gradient(to bottom, #F9F9F9, #fff)
}

.front .openhero::before {
    content: '';
    position: absolute;
    top: 40px;
    right: 5%;
    width: 280px;
    height: 280px;
    border: 3px solid #30F300;
    border-radius: 42px;
    opacity: .15;
    transform: rotate(12deg);
    pointer-events: none
}

.front .openhero::after {
    content: '';
    position: absolute;
    bottom: 60px;
    left: 8%;
    width: 180px;
    height: 180px;
    border: 2px solid #9D5B29;
    border-radius: 42px;
    opacity: .12;
    transform: rotate(-8deg);
    pointer-events: none
}

.front .herogrid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 40px;
    align-items: start;
    position: relative
}

.front .herocard {
    position: relative;
    border: 2px solid #30F300;
    border-radius: 4px;
    padding: 8px;
    background: #fff;
    box-shadow: 1px 6px 28px 0 #30f30014;
    animation: colorshift 700ms cubic-bezier(0.4, 0, 0.2, 1)
}

@keyframes colorshift {
    0% {
        border-color: #9D5B29
    }

    100% {
        border-color: #30F300
    }
}

.front .herocard img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    aspect-ratio: 16/9;
    object-fit: cover;
    position: relative
}

.front .herocard img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, #0000004d, transparent);
    pointer-events: none
}

.front .herotext {
    padding: 16px 0;
    position: relative
}

.front .herotext::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background: #30F300
}

.front .herotext::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 2px;
    background: #9D5B29
}

.front .herotag {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #9D5B29;
    margin: 0 0 16px;
    font-weight: 600
}

.front .heromain {
    font-size: 72px;
    line-height: 1.1;
    margin: 0 0 24px;
    color: #1a1a1a;
    font-weight: 700
}

.front .heromain .accent {
    background: linear-gradient(135deg, #30F300, #9D5B29);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.front .herodesc {
    font-size: 23px;
    line-height: 1.5;
    color: #333;
    margin: 0
}

.front .divider1 {
    height: 60px;
    background: #F9F9F9;
    position: relative;
    overflow: hidden
}

.front .divider1 svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%
}

.front .journey {
    padding: 80px 0;
    background: radial-gradient(ellipse at center, #30f3000d, #F9F9F9);
    position: relative
}

.front .journey::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 5 C15 8,15 12,20 15 C25 12,25 8,20 5 M20 25 C15 28,15 32,20 35 C25 32,25 28,20 25' fill='none' stroke='%239D5B29' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    pointer-events: none
}

.front .journeyhead {
    text-align: center;
    margin: 0 0 80px;
    animation: colorshift 800ms cubic-bezier(0.4, 0, 0.2, 1)
}

.front .journeytitle {
    font-size: 72px;
    line-height: 1.1;
    margin: 0 0 16px;
    color: #1a1a1a;
    font-weight: 700
}

.front .journeysub {
    font-size: 23px;
    line-height: 1.5;
    color: #333;
    margin: 0
}

.front .timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding: 40px 0
}

.front .timeline::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 80px;
    right: 80px;
    height: 3px;
    background: linear-gradient(to right, #30F300, #9D5B29);
    z-index: 1
}

.front .timepoint {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2
}

.front .timedot {
    width: 24px;
    height: 24px;
    background: #fff;
    border: 4px solid #30F300;
    border-radius: 42px;
    margin: 0 auto 24px;
    position: relative;
    transition: transform 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55), border-color 700ms cubic-bezier(0.4, 0, 0.2, 1)
}

.front .timepoint:nth-child(2) .timedot {
    border-color: #9D5B29
}

.front .timepoint:nth-child(3) .timedot {
    border-color: #30F300
}

.front .timepoint:nth-child(4) .timedot {
    border-color: #9D5B29
}

.front .timepoint:hover .timedot {
    transform: scale(1.4);
    border-color: #30F300
}

.front .timelabel {
    font-size: 23px;
    line-height: 1.5;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px
}

.front .timedetail {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    margin: 0
}

.front .divider2 {
    height: 60px;
    background: #F9F9F9;
    position: relative;
    overflow: hidden
}

.front .divider2 svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scaleX(-1);
    width: 100%;
    height: 100%
}

.front .metrics {
    padding: 80px 0;
    background: #fff;
    position: relative
}

.front .metricshead {
    text-align: center;
    margin: 0 0 80px
}

.front .metricstitle {
    font-size: 72px;
    line-height: 1.1;
    margin: 0 0 16px;
    color: #1a1a1a;
    font-weight: 700;
    animation: colorshift 750ms cubic-bezier(0.4, 0, 0.2, 1)
}

.front .metricssub {
    font-size: 23px;
    line-height: 1.5;
    color: #333;
    margin: 0
}

.front .metricgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px
}

.front .metricbox {
    background: #F9F9F9;
    border: 3px solid #30F300;
    border-radius: 4px;
    padding: 40px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color 600ms cubic-bezier(0.4, 0, 0.2, 1)
}

.front .metricbox::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(to top, #30f3001a, transparent);
    transition: height 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.front .metricbox:hover::before {
    height: 100%
}

.front .metricbox:hover {
    border-color: #9D5B29
}

.front .metricbox:nth-child(2) {
    border-color: #9D5B29
}

.front .metricbox:nth-child(2):hover {
    border-color: #30F300
}

.front .metricnum {
    font-size: 72px;
    line-height: 1.1;
    font-weight: 700;
    color: #30F300;
    margin: 0 0 16px;
    position: relative;
    z-index: 2
}

.front .metricbox:nth-child(2) .metricnum {
    color: #9D5B29
}

.front .metricbox:nth-child(3) .metricnum {
    color: #30F300
}

.front .metriclabel {
    font-size: 23px;
    line-height: 1.5;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px;
    position: relative;
    z-index: 2
}

.front .metrictext {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    margin: 0;
    position: relative;
    z-index: 2
}

.front .divider3 {
    height: 60px;
    background: #F9F9F9;
    position: relative;
    overflow: hidden
}

.front .divider3 svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    width: 100%;
    height: 100%
}

.front .longterm {
    padding: 80px 0;
    background: linear-gradient(to bottom, #F9F9F9, #fff);
    position: relative
}

.front .longterm::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 10%;
    width: 200px;
    height: 200px;
    border: 2px solid #30F300;
    border-radius: 42px;
    opacity: .1;
    transform: rotate(-15deg);
    pointer-events: none
}

.front .longgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center
}

.front .longtext h2 {
    font-size: 72px;
    line-height: 1.1;
    margin: 0 0 24px;
    color: #1a1a1a;
    font-weight: 700;
    animation: colorshift 650ms cubic-bezier(0.4, 0, 0.2, 1)
}

.front .longtext p {
    font-size: 23px;
    line-height: 1.5;
    color: #333;
    margin: 0 0 24px
}

.front .longtext p:last-child {
    margin: 0
}

.front .longvisual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.front .longcard {
    background: #F9F9F9;
    border: 2px solid #9D5B29;
    border-radius: 4px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55), border-color 600ms cubic-bezier(0.4, 0, 0.2, 1)
}

.front .longcard:hover {
    transform: translateY(-8px);
    border-color: #30F300
}

.front .longcard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(to bottom, #9d5b291a, transparent);
    transition: height 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.front .longcard:hover::before {
    height: 100%
}

.front .longicon {
    width: 48px;
    height: 48px;
    margin: 0 0 16px;
    position: relative;
    z-index: 2
}

.front .longicon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #30F300;
    stroke-width: 2
}

.front .longcard:nth-child(2) .longicon svg,
.front .longcard:nth-child(4) .longicon svg {
    stroke: #9D5B29
}

.front .longcardtitle {
    font-size: 23px;
    line-height: 1.5;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px;
    position: relative;
    z-index: 2
}

.front .longcardtext {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    margin: 0;
    position: relative;
    z-index: 2
}

.front .divider4 {
    height: 60px;
    background: #F9F9F9;
    position: relative;
    overflow: hidden
}

.front .divider4 svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scaleY(-1);
    width: 100%;
    height: 100%
}

.front .support {
    padding: 80px 0;
    background: #fff;
    position: relative
}

.front .supportwrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px
}

.front .supporttop {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin: 0 0 80px;
    position: relative
}

.front .supporttop::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 4px;
    background: linear-gradient(to right, transparent, #30F300, #9D5B29, transparent)
}

.front .supporthead {
    grid-column: 1 / -1;
    text-align: center
}

.front .supporttitle {
    font-size: 72px;
    line-height: 1.1;
    margin: 0 0 16px;
    color: #1a1a1a;
    font-weight: 700;
    animation: colorshift 850ms cubic-bezier(0.4, 0, 0.2, 1)
}

.front .supportsub {
    font-size: 23px;
    line-height: 1.5;
    color: #333;
    margin: 0
}

.front .supportgrid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start
}

.front .supportprofile {
    position: relative
}

.front .profileframe {
    border: 3px solid #30F300;
    border-radius: 4px;
    padding: 8px;
    background: #F9F9F9;
    box-shadow: 1px 12px 60px 0 #9d5b291a
}

.front .profileframe img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    aspect-ratio: 7/9;
    object-fit: cover;
    object-position: top
}

.front .profilename {
    font-size: 23px;
    line-height: 1.5;
    font-weight: 600;
    color: #1a1a1a;
    margin: 16px 0 8px
}

.front .profilerole {
    font-size: 16px;
    line-height: 1.5;
    color: #9D5B29;
    margin: 0
}

.front .supportcontent {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.front .supportitem {
    background: #F9F9F9;
    border: 2px solid #9D5B29;
    border-radius: 4px;
    padding: 24px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    transition: border-color 600ms cubic-bezier(0.4, 0, 0.2, 1)
}

.front .supportitem::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(to right, #30f3001a, transparent);
    transition: width 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.front .supportitem:hover::before {
    width: 100%
}

.front .supportitem:hover {
    border-color: #30F300
}

.front .supportitem:nth-child(2) {
    border-color: #30F300
}

.front .supportitem:nth-child(2):hover {
    border-color: #9D5B29
}

.front .supportico {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    position: relative;
    z-index: 2
}

.front .supportico svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #30F300;
    stroke-width: 2
}

.front .supportitem:nth-child(2) .supportico svg {
    stroke: #9D5B29
}

.front .supportitem:nth-child(3) .supportico svg {
    stroke: #30F300
}

.front .supportbody {
    flex: 1;
    position: relative;
    z-index: 2
}

.front .supportlabel {
    font-size: 23px;
    line-height: 1.5;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px
}

.front .supportdesc {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    margin: 0
}

@media (max-width: 1280px) {
    .front .heromain {
        font-size: 72px
    }

    .front .journeytitle,
    .front .metricstitle,
    .front .longtext h2,
    .front .supporttitle {
        font-size: 72px
    }

    .front .herodesc,
    .front .journeysub,
    .front .metricssub,
    .front .longtext p,
    .front .supportsub {
        font-size: 23px
    }
}

@media (max-width: 768px) {

    .front .contain,
    .front .supportwrap {
        padding: 0 16px
    }

    .front .openhero,
    .front .journey,
    .front .metrics,
    .front .longterm,
    .front .support {
        padding: 40px 0
    }

    .front .herogrid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .front .herocard {
        max-width: 400px;
        margin: 0 auto
    }

    .front .heromain {
        font-size: 30px
    }

    .front .herodesc {
        font-size: 16px
    }

    .front .journeyhead {
        margin: 0 0 40px
    }

    .front .journeytitle,
    .front .metricstitle,
    .front .longtext h2,
    .front .supporttitle {
        font-size: 30px
    }

    .front .journeysub,
    .front .metricssub,
    .front .longtext p,
    .front .supportsub {
        font-size: 16px
    }

    .front .timeline {
        flex-direction: column;
        gap: 24px;
        padding: 24px 0
    }

    .front .timeline::before {
        display: none
    }

    .front .metricgrid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .front .metricnum {
        font-size: 30px
    }

    .front .metriclabel {
        font-size: 16px
    }

    .front .longgrid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .front .longvisual {
        grid-template-columns: 1fr
    }

    .front .supporttop {
        grid-template-columns: 1fr;
        gap: 24px;
        margin: 0 0 40px
    }

    .front .supportgrid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .front .supportprofile {
        max-width: 280px;
        margin: 0 auto
    }
}

@media (max-width: 480px) {

    .front .openhero::before,
    .front .openhero::after,
    .front .longterm::before {
        display: none
    }

    .front .herocard {
        padding: 8px
    }

    .front .metricbox {
        padding: 24px 16px
    }

    .front .longcard {
        padding: 16px
    }

    .front .supportitem {
        padding: 16px;
        flex-direction: column;
        gap: 16px
    }
}

.planificationfinanciere {
    background: #F9F9F9;
    overflow-x: clip
}

.planificationfinanciere .titrebloc {
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 16px;
    text-align: center;
    position: relative
}

.planificationfinanciere .titrebloc::before,
.planificationfinanciere .titrebloc::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #30F300 20%, #30F300 80%, transparent)
}

.planificationfinanciere .titrebloc::before {
    top: 40px
}

.planificationfinanciere .titrebloc::after {
    bottom: 40px
}

.planificationfinanciere .titrebloc .cadreinterieur {
    position: relative
}

.planificationfinanciere .titrebloc .cadreinterieur::before,
.planificationfinanciere .titrebloc .cadreinterieur::after {
    content: '';
    position: absolute;
    top: -24px;
    bottom: -24px;
    width: 1px;
    background: linear-gradient(180deg, transparent, #9D5B29 20%, #9D5B29 80%, transparent)
}

.planificationfinanciere .titrebloc .cadreinterieur::before {
    left: 0
}

.planificationfinanciere .titrebloc .cadreinterieur::after {
    right: 0
}

.planificationfinanciere .titrebloc h1 {
    font-size: 72px;
    line-height: 1.1;
    color: #1a1a2e;
    margin: 0 0 24px;
    letter-spacing: -.02em
}

.planificationfinanciere .titrebloc .descriptionprincipale {
    font-size: 23px;
    line-height: 1.5;
    color: #2d2d3f;
    margin: 0 0 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto
}

.planificationfinanciere .titrebloc .lienaction {
    display: inline-block;
    font-size: 16px;
    line-height: 1.5;
    color: #1a1a2e;
    text-decoration: underline;
    text-decoration-color: #30F300;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color .35s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 40px
}

.planificationfinanciere .titrebloc .lienaction:hover {
    text-decoration-color: transparent
}

.planificationfinanciere .titrebloc .imageprincipale {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 16/9
}

.planificationfinanciere .titrebloc .imageprincipale::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(275deg, #30F300 0%, #30f300b3 35%, #9d5b2966 70%, transparent 100%);
    z-index: 2;
    pointer-events: none
}

.planificationfinanciere .titrebloc .imageprincipale .placeholdervisuel {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8e8ea 0%, #d4d4d8 50%, #c2c2c7 100%);
    position: relative
}

.planificationfinanciere .titrebloc .imageprincipale .placeholdervisuel::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #9d5b2926 0%, transparent 70%)
}

.planificationfinanciere .blocformulaire {
    background: #fff;
    position: relative;
    padding: 80px 16px
}

.planificationfinanciere .blocformulaire::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 40px;
    background: #fff;
    clip-path: ellipse(60% 100% at 50% 100%)
}

.planificationfinanciere .blocformulaire .conteneurformulaire {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start
}

.planificationfinanciere .blocformulaire .colonneintro h2 {
    font-size: 30px;
    line-height: 1.1;
    color: #1a1a2e;
    margin: 0 0 24px;
    font-weight: 300;
    letter-spacing: .05em;
    text-transform: uppercase
}

.planificationfinanciere .blocformulaire .colonneintro .textedescriptif {
    font-size: 16px;
    line-height: 1.5;
    color: #3d3d4f;
    margin: 0 0 16px
}

.planificationfinanciere .blocformulaire .colonneintro .textedescriptif:last-child {
    margin-bottom: 0
}

.planificationfinanciere .blocformulaire .colonneformulaire {
    background: #F9F9F9;
    padding: 40px;
    border-radius: 4px;
    border: 3px solid #30F300;
    position: relative;
    box-shadow: 1px 6px 28px 0 #30f30014
}

.planificationfinanciere .blocformulaire .formulairecontact {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.planificationfinanciere .blocformulaire .champgroupe {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.planificationfinanciere .blocformulaire .champgroupe label {
    font-size: 16px;
    line-height: 1.5;
    color: #2d2d3f;
    font-weight: 500
}

.planificationfinanciere .blocformulaire .champgroupe input[type="text"],
.planificationfinanciere .blocformulaire .champgroupe input[type="email"] {
    padding: 16px;
    font-size: 16px;
    line-height: 1.5;
    border: 2px solid #9D5B29;
    border-radius: 4px;
    background: #fff;
    color: #1a1a2e;
    transition: border-color .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1)
}

.planificationfinanciere .blocformulaire .champgroupe input[type="text"]:focus,
.planificationfinanciere .blocformulaire .champgroupe input[type="email"]:focus {
    outline: none;
    border-color: #30F300;
    box-shadow: 1px 2px 4px 0 #30f30012
}

.planificationfinanciere .blocformulaire .champgroupe input::placeholder {
    color: #8a8a9e;
    transition: opacity .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.planificationfinanciere .blocformulaire .champgroupe input:focus::placeholder {
    opacity: 0
}

.planificationfinanciere .blocformulaire .groupeservices {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.planificationfinanciere .blocformulaire .groupeservices .labelservices {
    font-size: 16px;
    line-height: 1.5;
    color: #2d2d3f;
    font-weight: 500;
    margin-bottom: 8px
}

.planificationfinanciere .blocformulaire .groupeservices .optionsliste {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.planificationfinanciere .blocformulaire .groupeservices .optionitem {
    position: relative
}

.planificationfinanciere .blocformulaire .groupeservices .optionitem input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

.planificationfinanciere .blocformulaire .groupeservices .optionitem label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border: 2px solid #9D5B29;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background .7s cubic-bezier(0.68, -0.55, 0.265, 1.55), border-color .7s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform .7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    font-size: 16px;
    line-height: 1.5;
    color: #2d2d3f;
    font-weight: 400
}

.planificationfinanciere .blocformulaire .groupeservices .optionitem input[type="checkbox"]:checked+label {
    background: #30F300;
    border-color: #30F300;
    transform: scale(1.03)
}

.planificationfinanciere .blocformulaire .groupeservices .optionitem label::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #9D5B29;
    border-radius: 4px;
    background: #fff;
    flex-shrink: 0;
    transition: background .7s cubic-bezier(0.68, -0.55, 0.265, 1.55), border-color .7s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.planificationfinanciere .blocformulaire .groupeservices .optionitem input[type="checkbox"]:checked+label::before {
    background: #1a1a2e;
    border-color: #1a1a2e
}

.planificationfinanciere .blocformulaire .groupeservices .optionitem input[type="checkbox"]:checked+label::after {
    content: '';
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0
}

.planificationfinanciere .blocformulaire .consentementgroupe {
    display: flex;
    align-items: start;
    gap: 8px
}

.planificationfinanciere .blocformulaire .consentementgroupe input[type="checkbox"] {
    margin-top: 4px;
    width: 20px;
    height: 20px;
    border: 2px solid #9D5B29;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: #30F300
}

.planificationfinanciere .blocformulaire .consentementgroupe label {
    font-size: 16px;
    line-height: 1.5;
    color: #3d3d4f;
    cursor: pointer
}

.planificationfinanciere .blocformulaire .consentementgroupe label a {
    color: #9D5B29;
    text-decoration: underline;
    text-decoration-color: #9D5B29;
    text-underline-offset: 2px;
    transition: text-decoration-color .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.planificationfinanciere .blocformulaire .consentementgroupe label a:hover {
    text-decoration-color: transparent
}

.planificationfinanciere .blocformulaire .boutonsoumission {
    padding: 16px 40px;
    font-size: 16px;
    line-height: 1.5;
    color: #1a1a2e;
    background: #fff;
    border: 3px solid #30F300;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em
}

.planificationfinanciere .blocformulaire .boutonsoumission::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: #30F300;
    transition: height .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: -1
}

.planificationfinanciere .blocformulaire .boutonsoumission:hover::before {
    height: 100%
}

.planificationfinanciere .blocformulaire .boutonsoumission:hover {
    color: #1a1a2e
}

.planificationfinanciere .bloccoordonnees {
    background: linear-gradient(165deg, #F9F9F9 0%, #fff 45%, #F9F9F9 100%);
    padding: 80px 16px;
    position: relative
}

.planificationfinanciere .bloccoordonnees .conteneurcoordonnees {
    max-width: 1500px;
    margin: 0 auto
}

.planificationfinanciere .bloccoordonnees h2 {
    font-size: 30px;
    line-height: 1.1;
    color: #1a1a2e;
    margin: 0 0 40px;
    text-align: center
}

.planificationfinanciere .bloccoordonnees .grillecontacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px
}

.planificationfinanciere .bloccoordonnees .cartecontact {
    background: #fff;
    padding: 40px 24px;
    border-radius: 42px;
    border: 2px dashed #9D5B29;
    text-align: center;
    position: relative;
    transition: transform .8s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 1px 2px 4px 0 #9d5b2912
}

.planificationfinanciere .bloccoordonnees .cartecontact:hover {
    transform: translateY(-8px);
    box-shadow: 1px 12px 60px 0 #9d5b291a
}

.planificationfinanciere .bloccoordonnees .cartecontact .iconecercle {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    border-radius: 42px;
    background: #30F300;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background .7s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.planificationfinanciere .bloccoordonnees .cartecontact:hover .iconecercle {
    background: #9D5B29
}

.planificationfinanciere .bloccoordonnees .cartecontact .iconecercle svg {
    width: 40px;
    height: 40px;
    fill: #1a1a2e;
    transition: opacity .7s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.planificationfinanciere .bloccoordonnees .cartecontact .iconecercle .iconedefaut {
    position: absolute;
    opacity: 1
}

.planificationfinanciere .bloccoordonnees .cartecontact .iconecercle .iconehover {
    position: absolute;
    opacity: 0
}

.planificationfinanciere .bloccoordonnees .cartecontact:hover .iconecercle .iconedefaut {
    opacity: 0
}

.planificationfinanciere .bloccoordonnees .cartecontact:hover .iconecercle .iconehover {
    opacity: 1
}

.planificationfinanciere .bloccoordonnees .cartecontact h3 {
    font-size: 23px;
    line-height: 1.1;
    color: #1a1a2e;
    margin: 0 0 16px;
    font-weight: 600
}

.planificationfinanciere .bloccoordonnees .cartecontact .detailcontact {
    font-size: 16px;
    line-height: 1.5;
    color: #3d3d4f;
    margin: 0;
    word-break: break-word
}

.planificationfinanciere .bloccoordonnees .cartecontact .detailcontact a {
    color: #9D5B29;
    text-decoration: none;
    transition: color .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.planificationfinanciere .bloccoordonnees .cartecontact .detailcontact a:hover {
    color: #30F300
}

.planificationfinanciere .blocprogression {
    background: #fff;
    padding: 80px 16px;
    position: relative;
    overflow: hidden
}

.planificationfinanciere .blocprogression::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(220deg, transparent 0%, #30f30008 50%, transparent 100%);
    pointer-events: none
}

.planificationfinanciere .blocprogression .conteneurprogression {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.planificationfinanciere .blocprogression h2 {
    font-size: 30px;
    line-height: 1.1;
    color: #1a1a2e;
    margin: 0 0 40px;
    text-align: center;
    font-weight: 300;
    letter-spacing: .05em;
    text-transform: uppercase
}

.planificationfinanciere .blocprogression .grilleescalier {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: end
}

.planificationfinanciere .blocprogression .colonneescalier {
    animation: cascadereveal .9s cubic-bezier(0.68, -0.55, 0.265, 1.55) backwards
}

.planificationfinanciere .blocprogression .colonneescalier:nth-child(1) {
    animation-delay: .1s
}

.planificationfinanciere .blocprogression .colonneescalier:nth-child(2) {
    animation-delay: .3s
}

.planificationfinanciere .blocprogression .colonneescalier:nth-child(3) {
    animation-delay: .5s
}

@keyframes cascadereveal {
    0% {
        opacity: 0;
        transform: translateY(40px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.planificationfinanciere .blocprogression .carteetape {
    background: #F9F9F9;
    padding: 40px 24px;
    border-radius: 4px;
    border: 3px solid #9D5B29;
    position: relative;
    box-shadow: 1px 6px 28px 0 #9d5b2914;
    transition: border-color .7s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.planificationfinanciere .blocprogression .colonneescalier:nth-child(1) .carteetape {
    min-height: 280px
}

.planificationfinanciere .blocprogression .colonneescalier:nth-child(2) .carteetape {
    min-height: 360px
}

.planificationfinanciere .blocprogression .colonneescalier:nth-child(3) .carteetape {
    min-height: 440px
}

.planificationfinanciere .blocprogression .carteetape:hover {
    border-color: #30F300
}

.planificationfinanciere .blocprogression .carteetape .numerocercle {
    width: 60px;
    height: 60px;
    border-radius: 42px;
    background: #30F300;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 23px;
    line-height: 1.1;
    font-weight: 700;
    color: #1a1a2e;
    transition: background .7s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform .7s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.planificationfinanciere .blocprogression .carteetape:hover .numerocercle {
    background: #9D5B29;
    transform: rotate(360deg)
}

.planificationfinanciere .blocprogression .carteetape h3 {
    font-size: 23px;
    line-height: 1.1;
    color: #1a1a2e;
    margin: 0 0 16px;
    text-align: center;
    font-weight: 600
}

.planificationfinanciere .blocprogression .carteetape .descriptionetape {
    font-size: 16px;
    line-height: 1.5;
    color: #3d3d4f;
    margin: 0 0 16px;
    text-align: center
}

.planificationfinanciere .blocprogression .carteetape .barreprogression {
    width: 100%;
    height: 8px;
    background: #9d5b2926;
    border-radius: 42px;
    overflow: hidden;
    margin-top: 24px
}

.planificationfinanciere .blocprogression .carteetape .remplissageprogression {
    height: 100%;
    background: linear-gradient(90deg, #9D5B29 0%, #30F300 100%);
    border-radius: 42px;
    transition: width .9s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.planificationfinanciere .blocprogression .colonneescalier:nth-child(1) .remplissageprogression {
    width: 35%
}

.planificationfinanciere .blocprogression .colonneescalier:nth-child(2) .remplissageprogression {
    width: 68%
}

.planificationfinanciere .blocprogression .colonneescalier:nth-child(3) .remplissageprogression {
    width: 92%
}

.planificationfinanciere .blocprogression .carteetape:hover .remplissageprogression {
    width: 100% !important
}

@media (max-width: 1280px) {
    .planificationfinanciere .titrebloc {
        padding: 80px 16px
    }

    .planificationfinanciere .titrebloc h1 {
        font-size: 72px
    }

    .planificationfinanciere .blocformulaire .conteneurformulaire {
        gap: 40px
    }

    .planificationfinanciere .bloccoordonnees .grillecontacts {
        gap: 24px
    }

    .planificationfinanciere .blocprogression .grilleescalier {
        gap: 24px
    }
}

@media (max-width: 768px) {
    .planificationfinanciere .titrebloc {
        padding: 40px 16px
    }

    .planificationfinanciere .titrebloc h1 {
        font-size: 30px
    }

    .planificationfinanciere .titrebloc .descriptionprincipale {
        font-size: 16px
    }

    .planificationfinanciere .blocformulaire {
        padding: 40px 16px
    }

    .planificationfinanciere .blocformulaire .conteneurformulaire {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .planificationfinanciere .blocformulaire .colonneformulaire {
        padding: 24px
    }

    .planificationfinanciere .blocformulaire .groupeservices .optionsliste {
        grid-template-columns: 1fr
    }

    .planificationfinanciere .bloccoordonnees {
        padding: 40px 16px
    }

    .planificationfinanciere .bloccoordonnees h2 {
        font-size: 23px;
        margin-bottom: 24px
    }

    .planificationfinanciere .bloccoordonnees .grillecontacts {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .planificationfinanciere .blocprogression {
        padding: 40px 16px
    }

    .planificationfinanciere .blocprogression h2 {
        font-size: 23px;
        margin-bottom: 24px
    }

    .planificationfinanciere .blocprogression .grilleescalier {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .planificationfinanciere .blocprogression .colonneescalier:nth-child(1) .carteetape,
    .planificationfinanciere .blocprogression .colonneescalier:nth-child(2) .carteetape,
    .planificationfinanciere .blocprogression .colonneescalier:nth-child(3) .carteetape {
        min-height: auto
    }
}

@media (max-width: 480px) {
    .planificationfinanciere .titrebloc {
        padding: 24px 8px
    }

    .planificationfinanciere .titrebloc h1 {
        font-size: 23px
    }

    .planificationfinanciere .blocformulaire {
        padding: 24px 8px
    }

    .planificationfinanciere .blocformulaire .colonneformulaire {
        padding: 16px
    }

    .planificationfinanciere .bloccoordonnees {
        padding: 24px 8px
    }

    .planificationfinanciere .blocprogression {
        padding: 24px 8px
    }
}

.apropos {
    background: #FFF;
    color: #1D1D1D;
    overflow-x: clip
}

.apropos * {
    box-sizing: border-box
}

.apropos .titrebloc {
    position: relative;
    display: flex;
    align-items: stretch;
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 40px;
    gap: 40px
}

.apropos .titrebloc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(45deg, #30f30008 0px, #30f30008 2px, transparent 2px, transparent 12px);
    pointer-events: none;
    z-index: 1
}

.apropos .zonegauche {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 40px;
    position: relative;
    z-index: 2
}

.apropos .zonedroite {
    flex: 0 0 40%;
    position: relative;
    padding: 24px
}

.apropos .zonedroite::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, #9d5b29d9 100%);
    pointer-events: none;
    z-index: 2
}

.apropos .imagetitre {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
    box-shadow: 1px 12px 60px 0 #30f3001a
}

.apropos .principaltitre {
    font-size: 72px;
    line-height: 1.1;
    color: #1D1D1D;
    margin: 0;
    font-weight: 700;
    letter-spacing: -.02em
}

.apropos .citationtitre {
    font-size: 23px;
    line-height: 1.5;
    color: #4A4A4A;
    margin: 0;
    font-style: italic;
    border-left: 4px solid #30F300;
    padding: 0 0 0 24px
}

.apropos .presentationsection {
    position: relative;
    background: linear-gradient(125deg, #FFF 0%, #FFF 45%, #F9F9F9 45%, #F9F9F9 100%);
    padding: 80px 0;
    overflow: hidden
}

.apropos .presentationsection::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 50%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle at 30% 40%, #30f30014 0%, transparent 70%);
    pointer-events: none;
    animation: spotlightdrift 18000ms ease-in-out infinite alternate;
    transform: translateX(-50%)
}

@keyframes spotlightdrift {
    0% {
        transform: translateX(-50%) translateY(0)
    }

    100% {
        transform: translateX(-30%) translateY(40px)
    }
}

.apropos .conteneurpresentation {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px
}

.apropos .entete {
    margin: 0 0 80px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.apropos .titresection {
    font-size: 72px;
    line-height: 1.1;
    color: #1D1D1D;
    margin: 0;
    font-weight: 300;
    letter-spacing: .08em;
    text-transform: uppercase
}

.apropos .introparagraphe {
    font-size: 23px;
    line-height: 1.5;
    color: #2D2D2D;
    margin: 0;
    max-width: 900px
}

.apropos .grillecontenu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin: 0 0 80px
}

.apropos .cartecontenu {
    background: #FFF;
    border: 3px solid #30F300;
    border-radius: 42px;
    padding: 40px;
    position: relative;
    transition: transform 750ms cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 750ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 1px 2px 4px 0 #30f30012
}

.apropos .cartecontenu:hover {
    transform: translateY(-8px);
    box-shadow: 1px 12px 60px 0 #30f3001a
}

.apropos .cartecontenu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(180deg, #30f3000d 0%, transparent 100%);
    border-radius: 42px;
    transition: height 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none
}

.apropos .cartecontenu:hover::before {
    height: 100%
}

.apropos .numerocarte {
    font-size: 72px;
    line-height: 1.1;
    color: #30F300;
    margin: 0 0 16px;
    font-weight: 700;
    position: relative;
    display: inline-block
}

.apropos .numerocarte::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60%;
    height: 3px;
    background: #30F300;
    transition: width 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.apropos .cartecontenu:hover .numerocarte::after {
    width: 100%
}

.apropos .titrecarte {
    font-size: 30px;
    line-height: 1.1;
    color: #1D1D1D;
    margin: 0 0 16px;
    font-weight: 600
}

.apropos .textecarte {
    font-size: 16px;
    line-height: 1.5;
    color: #3D3D3D;
    margin: 0
}

.apropos .zoneprofil {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: center;
    background: #FFF;
    border: 2px solid #9D5B29;
    border-radius: 42px;
    padding: 40px;
    box-shadow: 1px 6px 28px 0 #9d5b2914
}

.apropos .conteneurportrait {
    position: relative;
    width: 280px;
    height: 280px;
    overflow: hidden;
    border-radius: 42px;
    border: 4px solid #9D5B29;
    box-shadow: 1px 6px 28px 0 #9d5b2914
}

.apropos .imageportrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}

.apropos .infoprofil {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.apropos .nomprofil {
    font-size: 30px;
    line-height: 1.1;
    color: #1D1D1D;
    margin: 0;
    font-weight: 600
}

.apropos .titreprofil {
    font-size: 23px;
    line-height: 1.1;
    color: #9D5B29;
    margin: 0;
    font-weight: 500
}

.apropos .bioprofil {
    font-size: 16px;
    line-height: 1.5;
    color: #3D3D3D;
    margin: 0
}

.apropos .valeursection {
    background: #FFF;
    padding: 80px 0;
    position: relative
}

.apropos .valeursection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, #30F300 2px, transparent 2px), radial-gradient(circle, #30F300 3px, transparent 3px), radial-gradient(circle, #30F300 1px, transparent 1px);
    background-size: 80px 80px, 120px 120px, 60px 60px;
    background-position: 0 0, 40px 40px, 20px 20px;
    opacity: .03;
    pointer-events: none
}

.apropos .conteneurvaleur {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1
}

.apropos .titrevaleur {
    font-size: 72px;
    line-height: 1.1;
    color: #1D1D1D;
    margin: 0 0 80px;
    font-weight: 300;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center
}

.apropos .grillevaleur {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.apropos .lignevaleur {
    display: grid;
    grid-template-columns: 1fr;
    background: #F9F9F9;
    border: 3px solid transparent;
    border-radius: 4px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: border-color 650ms cubic-bezier(0.4, 0, 0.2, 1)
}

.apropos .lignevaleur::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -100%;
    width: 0;
    height: 1px;
    background: #30F300;
    transform: translateY(-50%);
    transition: width 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55), left 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.apropos .lignevaleur:hover::before {
    left: 0;
    width: 100%
}

.apropos .lignevaleur:hover {
    border-color: #30F300
}

.apropos .titreligne {
    font-size: 30px;
    line-height: 1.1;
    color: #1D1D1D;
    margin: 0 0 16px;
    font-weight: 600
}

.apropos .texteligne {
    font-size: 16px;
    line-height: 1.5;
    color: #3D3D3D;
    margin: 0
}

.apropos .diviseuronde {
    height: 80px;
    position: relative;
    overflow: hidden
}

.apropos .diviseuronde svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.apropos .diviseuronde path {
    fill: #F9F9F9
}

.apropos .grillereference {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 80px 0 0
}

.apropos .cartereference {
    background: #FFF;
    border: 2px solid #9D5B29;
    border-radius: 4px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 650ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 650ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 1px 2px 4px 0 #9d5b2912
}

.apropos .cartereference:hover {
    transform: translateY(-4px);
    box-shadow: 1px 6px 28px 0 #9d5b2914
}

.apropos .iconereference {
    width: 48px;
    height: 48px;
    background: #9D5B29;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 650ms cubic-bezier(0.4, 0, 0.2, 1)
}

.apropos .cartereference:hover .iconereference {
    background: #30F300
}

.apropos .iconereference svg {
    width: 24px;
    height: 24px;
    fill: #FFF
}

.apropos .titrereference {
    font-size: 23px;
    line-height: 1.1;
    color: #1D1D1D;
    margin: 0;
    font-weight: 600
}

.apropos .typereference {
    font-size: 16px;
    line-height: 1.1;
    color: #9D5B29;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .05em
}

.apropos .taillereference {
    font-size: 16px;
    line-height: 1.1;
    color: #6D6D6D;
    margin: 0
}

@media (max-width: 1280px) {
    .apropos .titrebloc {
        padding: 80px 24px;
        gap: 24px
    }

    .apropos .zonegauche {
        padding: 24px
    }

    .apropos .zonedroite {
        padding: 16px
    }

    .apropos .principaltitre {
        font-size: 72px
    }

    .apropos .citationtitre {
        font-size: 23px
    }

    .apropos .presentationsection {
        padding: 80px 0
    }

    .apropos .conteneurpresentation {
        padding: 0 24px
    }

    .apropos .entete {
        margin: 0 0 80px
    }

    .apropos .titresection {
        font-size: 72px
    }

    .apropos .introparagraphe {
        font-size: 23px
    }

    .apropos .grillecontenu {
        gap: 24px;
        margin: 0 0 80px
    }

    .apropos .cartecontenu {
        padding: 24px
    }

    .apropos .zoneprofil {
        padding: 24px;
        gap: 24px
    }

    .apropos .conteneurportrait {
        width: 240px;
        height: 240px
    }

    .apropos .valeursection {
        padding: 80px 0
    }

    .apropos .conteneurvaleur {
        padding: 0 24px
    }

    .apropos .titrevaleur {
        font-size: 72px;
        margin: 0 0 80px
    }

    .apropos .lignevaleur {
        padding: 24px
    }

    .apropos .grillereference {
        gap: 16px;
        margin: 80px 0 0
    }

    .apropos .cartereference {
        padding: 16px
    }
}

@media (max-width: 768px) {
    .apropos .titrebloc {
        flex-direction: column;
        padding: 40px 16px;
        gap: 24px
    }

    .apropos .zonegauche {
        flex: 1 1 auto;
        padding: 16px
    }

    .apropos .zonedroite {
        flex: 1 1 auto;
        min-height: 300px;
        padding: 16px
    }

    .apropos .principaltitre {
        font-size: 30px
    }

    .apropos .citationtitre {
        font-size: 16px;
        padding: 0 0 0 16px
    }

    .apropos .presentationsection {
        padding: 40px 0
    }

    .apropos .conteneurpresentation {
        padding: 0 16px
    }

    .apropos .entete {
        margin: 0 0 40px;
        gap: 16px
    }

    .apropos .titresection {
        font-size: 30px
    }

    .apropos .introparagraphe {
        font-size: 16px
    }

    .apropos .grillecontenu {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 0 0 40px
    }

    .apropos .cartecontenu {
        padding: 16px
    }

    .apropos .numerocarte {
        font-size: 30px;
        margin: 0 0 8px
    }

    .apropos .titrecarte {
        font-size: 23px;
        margin: 0 0 8px
    }

    .apropos .zoneprofil {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 16px
    }

    .apropos .conteneurportrait {
        width: 200px;
        height: 200px;
        margin: 0 auto
    }

    .apropos .nomprofil {
        font-size: 23px
    }

    .apropos .titreprofil {
        font-size: 16px
    }

    .apropos .valeursection {
        padding: 40px 0
    }

    .apropos .conteneurvaleur {
        padding: 0 16px
    }

    .apropos .titrevaleur {
        font-size: 30px;
        margin: 0 0 40px
    }

    .apropos .lignevaleur {
        padding: 16px
    }

    .apropos .titreligne {
        font-size: 23px;
        margin: 0 0 8px
    }

    .apropos .grillereference {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 40px 0 0
    }

    .apropos .cartereference {
        padding: 16px;
        gap: 8px
    }

    .apropos .titrereference {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .apropos .titrebloc {
        padding: 24px 8px;
        gap: 16px
    }

    .apropos .zonegauche {
        padding: 8px;
        gap: 16px
    }

    .apropos .zonedroite {
        min-height: 240px;
        padding: 8px
    }

    .apropos .principaltitre {
        font-size: 30px
    }

    .apropos .citationtitre {
        font-size: 16px;
        padding: 0 0 0 8px
    }

    .apropos .presentationsection {
        padding: 24px 0
    }

    .apropos .conteneurpresentation {
        padding: 0 8px
    }

    .apropos .entete {
        margin: 0 0 24px;
        gap: 8px
    }

    .apropos .titresection {
        font-size: 30px
    }

    .apropos .introparagraphe {
        font-size: 16px
    }

    .apropos .grillecontenu {
        gap: 8px;
        margin: 0 0 24px
    }

    .apropos .cartecontenu {
        padding: 8px
    }

    .apropos .numerocarte {
        font-size: 30px
    }

    .apropos .titrecarte {
        font-size: 23px
    }

    .apropos .zoneprofil {
        padding: 8px;
        gap: 8px
    }

    .apropos .conteneurportrait {
        width: 160px;
        height: 160px
    }

    .apropos .nomprofil {
        font-size: 23px
    }

    .apropos .titreprofil {
        font-size: 16px
    }

    .apropos .valeursection {
        padding: 24px 0
    }

    .apropos .conteneurvaleur {
        padding: 0 8px
    }

    .apropos .titrevaleur {
        font-size: 30px;
        margin: 0 0 24px
    }

    .apropos .lignevaleur {
        padding: 8px
    }

    .apropos .titreligne {
        font-size: 23px
    }

    .apropos .grillereference {
        gap: 8px;
        margin: 24px 0 0
    }

    .apropos .cartereference {
        padding: 8px
    }
}

.successpage {
    background: linear-gradient(125deg, #F9F9F9 0%, #fff 100%);
    min-height: 100vh;
    padding: 80px 16px
}

.successpage .wrap {
    max-width: 1500px;
    margin: 0 auto
}

.successpage .confirm {
    background: #fff;
    border: 3px solid #30F300;
    border-radius: 42px;
    padding: 80px 40px;
    text-align: center;
    box-shadow: 1px 12px 60px 0 #30f3001a;
    margin: 0 0 80px
}

.successpage .iconcheck {
    width: 120px;
    height: 120px;
    margin: 0 auto 40px;
    position: relative
}

.successpage .iconcheck svg {
    width: 100%;
    height: 100%
}

.successpage .iconcheck circle {
    fill: none;
    stroke: #30F300;
    stroke-width: 4;
    stroke-linecap: round
}

.successpage .iconcheck polyline {
    fill: none;
    stroke: #30F300;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.successpage .confirm h1 {
    font-size: 72px;
    line-height: 1.1;
    color: #1a1a1a;
    margin: 0 0 24px;
    font-weight: 300;
    letter-spacing: .02em
}

.successpage .confirm .lead {
    font-size: 23px;
    line-height: 1.5;
    color: #333;
    margin: 0 0 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto
}

.successpage .details {
    background: #F9F9F9;
    border: 2px solid #9D5B29;
    border-radius: 4px;
    padding: 40px;
    margin: 0 0 40px;
    text-align: left
}

.successpage .details h2 {
    font-size: 30px;
    line-height: 1.1;
    color: #1a1a1a;
    margin: 0 0 24px;
    font-weight: 600
}

.successpage .details .row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin: 0 0 16px;
    align-items: flex-start
}

.successpage .details .row:last-child {
    margin: 0
}

.successpage .details .label {
    font-size: 16px;
    line-height: 1.5;
    color: #666;
    min-width: 180px;
    flex-shrink: 0
}

.successpage .details .value {
    font-size: 16px;
    line-height: 1.5;
    color: #1a1a1a;
    font-weight: 500
}

.successpage .actions {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap
}

.successpage .actions .btn {
    font-size: 16px;
    line-height: 1.5;
    padding: 16px 40px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: transform .7s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.successpage .actions .btnprimary {
    background: #fff;
    border: 4px solid #30F300;
    color: #1a1a1a
}

.successpage .actions .btnprimary::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #30F300;
    transition: height .8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0
}

.successpage .actions .btnprimary:hover::before {
    height: 100%
}

.successpage .actions .btnprimary span {
    position: relative;
    z-index: 1
}

.successpage .actions .btnprimary:hover {
    transform: scale(1.05)
}

.successpage .actions .btnsecondary {
    background: #fff;
    border: 3px solid #9D5B29;
    color: #1a1a1a
}

.successpage .actions .btnsecondary::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #9D5B29;
    transition: height .8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0
}

.successpage .actions .btnsecondary:hover::before {
    height: 100%
}

.successpage .actions .btnsecondary span {
    position: relative;
    z-index: 1;
    transition: color .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.successpage .actions .btnsecondary:hover span {
    color: #fff
}

.successpage .actions .btnsecondary:hover {
    transform: scale(1.05)
}

.successpage .info {
    background: #fff;
    border: 2px solid #F9F9F9;
    border-radius: 42px;
    padding: 40px;
    box-shadow: 1px 2px 4px 0 #9d5b2912
}

.successpage .info h2 {
    font-size: 30px;
    line-height: 1.1;
    color: #1a1a1a;
    margin: 0 0 24px;
    text-align: center;
    font-weight: 300;
    letter-spacing: .03em
}

.successpage .info .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px
}

.successpage .info .item {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start
}

.successpage .info .item .icn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 2px solid #30F300;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center
}

.successpage .info .item .icn svg {
    width: 18px;
    height: 18px
}

.successpage .info .item .icn polyline,
.successpage .info .item .icn path {
    fill: none;
    stroke: #30F300;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.successpage .info .item .txt h3 {
    font-size: 16px;
    line-height: 1.5;
    color: #1a1a1a;
    margin: 0 0 8px;
    font-weight: 600
}

.successpage .info .item .txt p {
    font-size: 16px;
    line-height: 1.5;
    color: #666;
    margin: 0
}

@media (max-width: 768px) {
    .successpage {
        padding: 40px 16px
    }

    .successpage .confirm {
        padding: 40px 24px;
        margin: 0 0 40px
    }

    .successpage .confirm h1 {
        font-size: 30px
    }

    .successpage .confirm .lead {
        font-size: 16px
    }

    .successpage .iconcheck {
        width: 80px;
        height: 80px;
        margin: 0 auto 24px
    }

    .successpage .details {
        padding: 24px
    }

    .successpage .details h2 {
        font-size: 23px
    }

    .successpage .details .row {
        flex-direction: column;
        gap: 8px
    }

    .successpage .details .label {
        min-width: auto
    }

    .successpage .actions {
        flex-direction: column
    }

    .successpage .actions .btn {
        width: 100%;
        text-align: center
    }

    .successpage .info {
        padding: 24px
    }

    .successpage .info h2 {
        font-size: 23px
    }

    .successpage .info .grid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 480px) {
    .successpage .confirm h1 {
        font-size: 23px
    }

    .successpage .details h2,
    .successpage .info h2 {
        font-size: 23px
    }
}