:root {
            --teal: #146771;
            --td: #0E5159;
            --tp: #0A3F46;
            --tl: #1A7B86;
            --or: #C5A84F;
            --ol: #D6BB6E;
            --om: #B89542;
            --w: #FFF;
            --off: #F6F6F4;
            --n: #0A3F46;
            --ns: #2A2A28;
            --g: #71716C;
            --gl: #D6D5D0;
            --serif: 'DM Serif Display', Georgia, serif;
            --sans: 'IBM Plex Sans', sans-serif
        }

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

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: var(--sans);
            color: var(--n);
            background: var(--w);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden
        }

        .w {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 48px
        }

        @media (max-width: 600px) {
            .w {
                padding: 0 20px
            }
        }

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        /* NAV */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            background: rgba(255, 255, 255, .97);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(0, 0, 0, .05);
            transition: .3s
        }

        nav.scrolled {
            box-shadow: 0 2px 20px rgba(0, 0, 0, .05)
        }

        .nb {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 144px
        }

        .nl {
            display: flex;
            align-items: center;
            gap: 18px;
            text-decoration: none
        }

        .nl-m {
            width: 140px;
            height: 140px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .nl-m img,
        .nl-m svg {
            width: 100%;
            height: 100%;
            object-fit: contain
        }

        .nl-t {
            display: flex;
            flex-direction: column
        }

        .nl-n {
            font-family: var(--serif);
            font-size: 30px;
            color: var(--td);
            letter-spacing: 1.5px;
            line-height: 1
        }

        .nl-s {
            font-size: 10.5px;
            color: var(--om);
            letter-spacing: 3px;
            text-transform: uppercase;
            font-weight: 500;
            margin-top: 3px
        }

        .nk {
            display: flex;
            gap: 2px;
            list-style: none;
            align-items: center
        }

        .nk a {
            text-decoration: none;
            font-size: 13px;
            font-weight: 400;
            color: var(--ns);
            padding: 7px 14px;
            transition: .25s
        }

        .nk a:hover {
            color: var(--teal)
        }

        .nk a.on {
            color: var(--teal);
            font-weight: 500
        }

        .nk .cb {
            background: var(--teal);
            color: var(--w) !important;
            padding: 8px 22px;
            font-weight: 500;
            margin-left: 8px
        }

        .nk .cb:hover {
            background: var(--tl)
        }

        .bur {
            display: none;
            cursor: pointer;
            padding: 8px;
            flex-direction: column;
            gap: 5px
        }

        .bur span {
            width: 22px;
            height: 2px;
            background: var(--td)
        }

        .mm {
            display: none;
            position: fixed;
            top: 92px;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--w);
            padding: 32px 48px;
            z-index: 99;
            flex-direction: column
        }

        .mm.open {
            display: flex
        }

        .mm a {
            text-decoration: none;
            font-size: 17px;
            padding: 16px 0;
            color: var(--n);
            border-bottom: 1px solid var(--gl);
            font-family: var(--serif)
        }

        @media (max-width: 900px) {
            .nk {
                display: none
            }

            .bur {
                display: flex
            }
        }

        /* BTNS */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 26px;
            font-size: 13.5px;
            font-weight: 500;
            text-decoration: none;
            border: none;
            font-family: var(--sans);
            cursor: pointer;
            transition: .3s
        }

        .bp {
            background: var(--teal);
            color: var(--w)
        }

        .bp:hover {
            background: var(--tl)
        }

        .bo {
            background: transparent;
            color: var(--teal);
            border: 1.5px solid var(--teal)
        }

        .bo:hover {
            background: var(--teal);
            color: var(--w)
        }

        .ar {
            transition: transform .25s
        }

        .btn:hover .ar {
            transform: translateX(3px)
        }

        /* === HERO V6 STYLE: split left text / right photo === */
        .hero {
            min-height: 100vh;
            display: grid;
            grid-template-columns:1fr 1fr;
            margin-top: 92px
        }

        @media (max-width: 900px) {
            .hero {
                grid-template-columns:1fr;
                min-height: auto
            }

            .hero-right {
                min-height: 360px
            }
        }

        .hero-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 72px 56px 72px 48px;
            position: relative
        }

        .hero-left::after {
            content: '';
            position: absolute;
            right: 0;
            top: 12%;
            bottom: 12%;
            width: 1px;
            background: var(--gl)
        }

        @media (max-width: 900px) {
            .hero-left {
                padding: 48px 20px
            }

            .hero-left::after {
                display: none
            }
        }

        .hero-tag {
            font-size: 10px;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--om);
            font-weight: 600;
            margin-bottom: 28px
        }

        .hero h1 {
            font-family: var(--serif);
            font-size: clamp(34px, 4vw, 52px);
            font-weight: 400;
            line-height: 1.12;
            color: var(--tp);
            margin-bottom: 22px
        }

        .hero h1 i {
            color: var(--or);
            font-style: italic
        }

        .hero-p {
            font-size: 16px;
            line-height: 1.75;
            color: var(--g);
            font-weight: 300;
            margin-bottom: 16px;
            max-width: 440px
        }

        .hero-p strong {
            color: var(--ns);
            font-weight: 500
        }

        .hero-ul {
            list-style: none;
            margin: 16px 0 32px;
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .hero-ul li {
            font-size: 14.5px;
            color: var(--ns);
            display: flex;
            align-items: center;
            gap: 12px
        }

        .hero-ul li::before {
            content: '';
            width: 16px;
            height: 1px;
            background: var(--or);
            flex-shrink: 0
        }

        .hero-btns {
            display: flex;
            gap: 12px;
            flex-wrap: wrap
        }

        .hero-right {
            position: relative;
            overflow: hidden
        }

        .hero-right img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .hero-right-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(8, 44, 43, .7) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 36px
        }

        .hero-right-overlay .loc {
            display: flex;
            gap: 24px;
            flex-wrap: wrap
        }

        .loc-item {
            font-size: 12.5px;
            color: rgba(255, 255, 255, .75)
        }

        .loc-item strong {
            display: block;
            font-family: var(--serif);
            font-size: 16px;
            color: var(--w);
            margin-bottom: 2px
        }

        .loc-item a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
            border-bottom: 1px solid rgba(255, 255, 255, .2);
            transition: .25s;
            font-size: 11.5px
        }

        .loc-item a:hover {
            color: var(--or);
            border-color: var(--or)
        }

        /* === NOTAIRES small cards === */
        .notaires-sec {
            padding: 80px 0;
            background: var(--w)
        }

        .stag {
            font-size: 10px;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--om);
            font-weight: 600;
            margin-bottom: 14px
        }

        .stit {
            font-family: var(--serif);
            font-size: clamp(26px, 3.2vw, 40px);
            color: var(--tp);
            line-height: 1.18;
            margin-bottom: 14px
        }

        .ssub {
            font-size: 15px;
            color: var(--g);
            line-height: 1.7;
            font-weight: 300;
            max-width: 480px;
            margin-bottom: 0
        }

        .notaires-row {
            display: flex;
            gap: 24px;
            margin-top: 36px;
            flex-wrap: wrap
        }

        .not-card {
            display: flex;
            gap: 20px;
            align-items: center;
            padding: 22px;
            border: 1px solid var(--gl);
            flex: 1;
            min-width: 300px;
            transition: .3s
        }

        .not-card:hover {
            border-color: var(--or);
            background: var(--off)
        }

        .not-photo {
            width: 100px;
            height: 124px;
            flex-shrink: 0;
            overflow: hidden;
            position: relative
        }

        .not-photo img {
            filter: brightness(.95)
        }

        .not-info h3 {
            font-family: var(--serif);
            font-size: 19px;
            color: var(--tp);
            margin-bottom: 3px
        }

        .not-info .role {
            font-size: 9px;
            color: var(--om);
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 8px
        }

        .not-info .spec {
            font-size: 12.5px;
            color: var(--g);
            line-height: 1.45
        }

        /* SECTIONS */
        .sec {
            padding: 88px 0
        }

        .eg {
            display: grid;
            grid-template-columns:repeat(3, 1fr);
            gap: 1px;
            background: var(--gl);
            border: 1px solid var(--gl)
        }

        @media (max-width: 1000px) {
            .eg {
                grid-template-columns:repeat(2, 1fr)
            }
        }

        @media (max-width: 600px) {
            .eg {
                grid-template-columns:1fr
            }
        }

        .ec {
            background: var(--w);
            padding: 32px 28px;
            display: flex;
            flex-direction: column;
            transition: .3s
        }

        .ec:hover {
            background: var(--off)
        }

        .ec-ico {
            font-size: 28px;
            margin-bottom: 14px
        }

        .ec h3 {
            font-family: var(--serif);
            font-size: 21px;
            color: var(--tp);
            margin-bottom: 10px;
            line-height: 1.2
        }

        .ec > p {
            font-size: 13.5px;
            color: var(--g);
            line-height: 1.6;
            margin-bottom: 12px
        }

        .ec-qs {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 7px;
            margin-bottom: 18px;
            flex-grow: 1
        }

        .ec-qs li {
            font-size: 13px;
            color: var(--ns);
            line-height: 1.45;
            padding-left: 16px;
            position: relative
        }

        .ec-qs li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 6px;
            width: 6px;
            height: 1px;
            background: var(--or)
        }

        .ec-lk {
            font-size: 13px;
            font-weight: 500;
            color: var(--teal);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: auto;
            padding-top: 14px;
            border-top: 1px solid var(--gl);
            transition: .25s
        }

        .ec-lk:hover {
            color: var(--or)
        }

        .ec-cta {
            background: var(--teal);
            color: var(--w);
            padding: 32px 28px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-decoration: none;
            transition: .3s;
            min-height: 220px
        }

        .ec-cta:hover {
            background: var(--td)
        }

        .ec-cta-tag {
            font-size: 10px;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--ol);
            font-weight: 600
        }

        .ec-cta-tit {
            font-family: var(--serif);
            font-size: 26px;
            line-height: 1.15;
            color: var(--w);
            margin-top: 14px;
            flex-grow: 1
        }

        .ec-cta-arrow {
            font-size: 24px;
            color: var(--or);
            margin-top: 18px;
            transition: transform .25s
        }

        .ec-cta:hover .ec-cta-arrow {
            transform: translateX(6px)
        }

        /* DIFF */
        .diff-bg {
            background: var(--tp);
            color: var(--w)
        }

        .diff-bg .stag {
            color: var(--or)
        }

        .diff-bg .stit {
            color: var(--w)
        }

        .dg {
            display: grid;
            grid-template-columns:repeat(3, 1fr);
            gap: 48px
        }

        @media (max-width: 800px) {
            .dg {
                grid-template-columns:1fr;
                gap: 32px
            }
        }

        .di {
            padding-left: 20px;
            position: relative
        }

        .di::before {
            content: '';
            position: absolute;
            left: 0;
            top: 3px;
            width: 3px;
            height: 36px;
            background: var(--or)
        }

        .di-n {
            font-family: var(--serif);
            font-size: 36px;
            color: rgba(255, 255, 255, .12);
            line-height: 1;
            margin-bottom: 10px;
            font-style: italic
        }

        .di h3 {
            font-family: var(--serif);
            font-size: 19px;
            margin-bottom: 8px;
            line-height: 1.25
        }

        .di p {
            font-size: 13.5px;
            color: rgba(255, 255, 255, .55);
            line-height: 1.65
        }

        /* EQUIPE page */
        .team-hero {
            margin-top: 92px;
            display: grid;
            grid-template-columns:1fr 1fr;
            min-height: 440px
        }

        @media (max-width: 800px) {
            .team-hero {
                grid-template-columns:1fr
            }
        }

        .team-hero-txt {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 56px 48px
        }

        .team-hero-img {
            position: relative;
            overflow: hidden;
            min-height: 360px
        }

        .team-profiles {
            border-top: 1px solid var(--gl)
        }

        .team-profile {
            display: grid;
            grid-template-columns:280px 1fr;
            border-bottom: 1px solid var(--gl)
        }

        @media (max-width: 700px) {
            .team-profile {
                grid-template-columns:1fr
            }
        }

        .team-profile:nth-child(even) {
            grid-template-columns:1fr 280px
        }

        .team-profile:nth-child(even) .tp-img {
            order: 2
        }

        @media (max-width: 700px) {
            .team-profile:nth-child(even) {
                grid-template-columns:1fr
            }

            .team-profile:nth-child(even) .tp-img {
                order: 0
            }
        }

        .tp-img {
            position: relative;
            overflow: hidden;
            min-height: 340px
        }

        .tp-img img {
            transition: transform .6s
        }

        .tp-img:hover img {
            transform: scale(1.03)
        }

        .tp-txt {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 40px 36px
        }

        .tp-txt h3 {
            font-family: var(--serif);
            font-size: 28px;
            color: var(--tp);
            margin-bottom: 4px
        }

        .tp-txt .role {
            font-size: 10px;
            color: var(--om);
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 16px
        }

        .tp-txt p {
            font-size: 14px;
            color: var(--g);
            line-height: 1.65;
            margin-bottom: 16px
        }

        .tp-contact {
            display: flex;
            flex-direction: column;
            gap: 4px
        }

        .tp-contact span {
            font-size: 12.5px;
            color: var(--g);
            display: flex;
            align-items: center;
            gap: 8px
        }

        .tp-contact span em {
            color: var(--or);
            font-style: normal
        }

        /* ETUDE */
        .ph {
            padding: 72px 0 80px;
            display: grid;
            grid-template-columns:1.2fr 1fr;
            gap: 48px;
            align-items: center;
            margin-top: 92px
        }

        @media (max-width: 800px) {
            .ph {
                grid-template-columns:1fr;
                margin-top: 92px
            }
        }

        .ph-txt h1 {
            font-family: var(--serif);
            font-size: clamp(30px, 3.6vw, 44px);
            color: var(--tp);
            line-height: 1.15;
            margin-bottom: 20px
        }

        .ph-txt h1 i {
            color: var(--or)
        }

        .ph-txt p {
            font-size: 15px;
            color: var(--g);
            line-height: 1.8;
            margin-bottom: 12px
        }

        .ph-stats {
            display: flex;
            gap: 32px;
            margin-top: 28px
        }

        .ps {
            text-align: center
        }

        .ps-n {
            font-family: var(--serif);
            font-size: 34px;
            color: var(--teal)
        }

        .ps-l {
            font-size: 10px;
            color: var(--g);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 2px
        }

        .ph-img {
            position: relative;
            overflow: hidden;
            min-height: 360px
        }

        /* BUREAUX */
        .bx-bg {
            background: var(--tp);
            color: var(--w)
        }

        .bx-bg .stag {
            color: var(--or)
        }

        .bx-bg .stit {
            color: var(--w)
        }

        .bx-g {
            display: grid;
            grid-template-columns:1fr 1fr;
            gap: 24px
        }

        @media (max-width: 700px) {
            .bx-g {
                grid-template-columns:1fr
            }
        }

        .bx-c {
            border: 1px solid rgba(194, 162, 74, .2);
            padding: 28px;
            transition: .3s
        }

        .bx-c:hover {
            border-color: var(--or);
            background: rgba(255, 255, 255, .03)
        }
        .bx-img {
            height: 170px;
            margin: -28px -28px 20px;
            overflow: hidden
        }


        .bx-badge {
            display: inline-block;
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--tp);
            background: var(--or);
            padding: 3px 10px;
            margin-bottom: 10px
        }

        .bx-c h3 {
            font-family: var(--serif);
            font-size: 21px;
            color: var(--w);
            margin-bottom: 14px
        }

        .bx-row {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: rgba(255, 255, 255, .55);
            margin-bottom: 6px
        }

        .bx-row span:first-child {
            color: var(--or);
            width: 16px;
            text-align: center;
            flex-shrink: 0
        }

        .bx-row a {
            color: inherit;
            text-decoration: none;
            border-bottom: 1px solid rgba(255, 255, 255, .15);
            transition: .25s
        }

        .bx-row a:hover {
            color: var(--or);
            border-color: var(--or)
        }

        /* HONORAIRES */
        .hon {
            max-width: 660px;
            border-left: 3px solid var(--or);
            padding-left: 28px
        }

        .hon p {
            font-size: 15px;
            color: var(--g);
            line-height: 1.8;
            margin-bottom: 14px
        }

        .hon-hl {
            background: var(--off);
            padding: 18px 22px;
            margin: 18px 0;
            font-size: 14px;
            color: var(--tp);
            line-height: 1.7
        }

        .hon-note {
            max-width: 760px;
            font-size: 14px;
            color: var(--g);
            line-height: 1.8;
            margin: 14px 0
        }

        .hon-act {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 14px;
            margin-top: 22px
        }

        .dlg {
            display: grid;
            grid-template-columns:1fr 1fr;
            gap: 1px;
            background: var(--gl);
            border: 1px solid var(--gl);
            margin-top: 28px
        }

        @media (max-width: 700px) {
            .dlg {
                grid-template-columns:1fr
            }
        }

        .dlc {
            background: var(--w);
            padding: 28px;
            text-align: center;
            transition: .3s
        }

        .dlc:hover {
            background: var(--off)
        }

        .dlc h3 {
            font-family: var(--serif);
            font-size: 17px;
            color: var(--tp);
            margin-bottom: 5px
        }

        .dlc p {
            font-size: 12px;
            color: var(--g);
            margin-bottom: 12px
        }

        .dl-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--teal);
            color: var(--w);
            padding: 8px 18px;
            font-size: 12px;
            font-weight: 500;
            text-decoration: none;
            transition: .3s
        }

        .dl-btn:hover {
            background: var(--tl)
        }

        /* MENTIONS LÉGALES */
        .leg {
            max-width: 820px
        }

        .leg h3 {
            font-family: var(--serif);
            font-size: 20px;
            color: var(--tp);
            margin: 34px 0 10px;
            padding-left: 16px;
            border-left: 3px solid var(--or);
            scroll-margin-top: 110px
        }

        .leg h3:first-child {
            margin-top: 0
        }

        .leg p {
            font-size: 14.5px;
            color: var(--g);
            line-height: 1.85;
            margin-bottom: 12px
        }

        .leg strong {
            color: var(--tp);
            font-weight: 600
        }

        .leg a {
            color: var(--teal);
            text-decoration: none;
            border-bottom: 1px solid var(--gl);
            transition: .3s
        }

        .leg a:hover {
            color: var(--or);
            border-color: var(--or)
        }

        /* CONTACT */
        .ct-g {
            display: grid;
            grid-template-columns:1.1fr 1fr;
            gap: 0;
            border: 1px solid var(--gl)
        }

        @media (max-width: 800px) {
            .ct-g {
                grid-template-columns:1fr
            }
        }

        .ct-f {
            padding: 32px
        }

        .fg {
            margin-bottom: 14px
        }

        .fg label {
            display: block;
            font-size: 11px;
            font-weight: 600;
            color: var(--tp);
            margin-bottom: 4px;
            letter-spacing: .5px;
            text-transform: uppercase
        }

        .fg input, .fg textarea, .fg select {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid var(--gl);
            font-size: 14px;
            font-family: var(--sans);
            transition: .25s;
            background: var(--w);
            color: var(--n)
        }

        .fg input:focus, .fg textarea:focus, .fg select:focus {
            outline: none;
            border-color: var(--teal);
            box-shadow: 0 0 0 2px rgba(23, 96, 94, .07)
        }

        .fg textarea {
            resize: vertical;
            min-height: 90px
        }

        .fr {
            display: grid;
            grid-template-columns:1fr 1fr;
            gap: 12px
        }

        @media (max-width: 600px) {
            .fr {
                grid-template-columns:1fr
            }
        }

        .cap {
            background: var(--off);
            border: 1px solid var(--gl);
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
            font-size: 13px;
            color: var(--g)
        }

        .cap-b {
            width: 18px;
            height: 18px;
            border: 2px solid var(--gl);
            cursor: pointer;
            transition: .25s;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }

        .ct-s {
            background: var(--tp);
            color: var(--w);
            padding: 32px;
            display: flex;
            flex-direction: column;
            gap: 18px
        }

        .ct-s h4 {
            font-family: var(--serif);
            font-size: 17px;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, .1)
        }

        .ct-r {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 13px;
            color: rgba(255, 255, 255, .55);
            margin-bottom: 6px;
            line-height: 1.5
        }

        .ct-r span:first-child {
            color: var(--or);
            flex-shrink: 0
        }

        .ct-r a {
            color: inherit;
            text-decoration: none;
            border-bottom: 1px solid rgba(255, 255, 255, .15);
            transition: .25s
        }

        .ct-r a:hover {
            color: var(--or);
            border-color: var(--or)
        }

        .ct-map {
            margin-top: auto;
            background: var(--td)
        }

        .ct-map-tabs {
            display: flex;
            gap: 0;
            border-bottom: 1px solid rgba(255, 255, 255, .08)
        }

        .ct-map-tabs button {
            flex: 1;
            background: transparent;
            border: none;
            color: rgba(255, 255, 255, .55);
            padding: 10px 12px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            cursor: pointer;
            font-family: var(--sans);
            transition: .25s;
            border-bottom: 2px solid transparent
        }

        .ct-map-tabs button:hover {
            color: var(--w)
        }

        .ct-map-tabs button.on {
            color: var(--or);
            border-bottom-color: var(--or)
        }

        .ct-map iframe {
            display: block;
            width: 100%;
            height: 260px;
            border: 0
        }

        /* Bureau description (étude) */
        .bx-desc {
            font-size: 13px;
            color: rgba(255, 255, 255, .65);
            line-height: 1.7;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid rgba(197, 168, 79, .18)
        }

        /* Services à l'étude (équipe) */
        .svc-sec {
            background: var(--off);
            padding: 64px 0
        }

        .svc-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-top: 28px
        }

        @media (max-width: 800px) {
            .svc-grid {
                grid-template-columns: 1fr 1fr
            }
        }

        @media (max-width: 500px) {
            .svc-grid {
                grid-template-columns: 1fr
            }
        }

        .svc-i {
            background: var(--w);
            border: 1px solid var(--gl);
            padding: 18px 20px;
            font-size: 13.5px;
            color: var(--ns);
            transition: .3s
        }

        .svc-i:hover {
            border-color: var(--or);
            background: #fff
        }

        .svc-i strong {
            display: block;
            font-family: var(--serif);
            font-size: 16px;
            color: var(--tp);
            margin-bottom: 4px;
            font-weight: 400
        }

        .svc-i span {
            font-size: 12px;
            color: var(--g)
        }

        /* Bouton clair pour fond foncé (rural) */
        .bw {
            background: var(--w);
            color: var(--teal)
        }

        .bw:hover {
            background: var(--off);
            color: var(--td)
        }

        /* CTA */
        .cta-b {
            padding: 52px 0;
            border-top: 1px solid var(--gl);
            border-bottom: 1px solid var(--gl);
            text-align: center
        }

        .cta-b h2 {
            font-family: var(--serif);
            font-size: clamp(22px, 2.5vw, 30px);
            color: var(--tp);
            margin-bottom: 8px
        }

        .cta-b p {
            font-size: 14px;
            color: var(--g);
            margin-bottom: 22px;
            max-width: 380px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6
        }

        /* FOOTER */
        footer {
            background: var(--tp);
            color: rgba(255, 255, 255, .55);
            padding: 44px 0 22px
        }

        .ft-logo {
            width: 140px;
            height: 140px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--w);
            border-radius: 12px;
            padding: 14px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, .15)
        }

        .ft-logo img,
        .ft-logo svg {
            width: 100%;
            height: 100%;
            object-fit: contain
        }

        .ftb-blocks {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 12px;
            font-size: 12px;
            line-height: 1.55
        }

        .ftb-blocks .b-tit {
            font-family: var(--serif);
            color: var(--w);
            font-size: 13px;
            letter-spacing: 1px
        }

        .ftb-blocks .b-sub {
            color: rgba(255, 255, 255, .55)
        }

        .ftb-center {
            align-items: center;
            text-align: center;
            margin: 0 auto 24px;
            padding-top: 24px;
            border-top: 1px solid rgba(255, 255, 255, .12)
        }

        .ft-contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px
        }

        @media (max-width: 600px) {
            .ft-contact-grid {
                grid-template-columns: 1fr
            }
        }

        .ft-contact-grid h4 {
            font-family: var(--serif);
            color: var(--w);
            font-size: 13px;
            margin-bottom: 6px;
            letter-spacing: .5px
        }

        .ft-contact-grid a, .ft-contact-grid span {
            display: block;
            color: rgba(255, 255, 255, .55);
            text-decoration: none;
            font-size: 12px;
            line-height: 1.6;
            transition: .25s
        }

        .ft-contact-grid a:hover {
            color: var(--or)
        }

        .ftg {
            display: grid;
            grid-template-columns:1.5fr .9fr .9fr 2fr;
            gap: 32px;
            margin-bottom: 28px;
            align-items: start
        }

        @media (max-width: 900px) {
            .ftg {
                grid-template-columns:1fr 1fr
            }
        }

        @media (max-width: 500px) {
            .ftg {
                grid-template-columns:1fr
            }
        }

        .ftb .nl-n {
            color: var(--w)
        }

        .ftb .nl-s {
            color: var(--or)
        }

        .ftb p {
            margin-top: 10px;
            font-size: 12px;
            line-height: 1.6;
            max-width: 200px
        }

        .ftc h4 {
            color: var(--w);
            font-family: var(--serif);
            font-size: 15px;
            margin-bottom: 10px
        }

        .ftc a {
            display: block;
            color: rgba(255, 255, 255, .35);
            text-decoration: none;
            font-size: 12px;
            padding: 2px 0;
            transition: .25s
        }

        .ftc a:hover {
            color: var(--or)
        }

        .ftx {
            padding-top: 14px;
            border-top: 1px solid rgba(255, 255, 255, .06);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 10.5px;
            flex-wrap: wrap;
            gap: 10px
        }

        .ftx a {
            color: rgba(255, 255, 255, .25);
            text-decoration: none;
            transition: .25s
        }

        .ftx a:hover {
            color: var(--or)
        }

        .pg {
            display: none
        }

        .pg.on {
            display: block
        }

        .rv {
            opacity: 0;
            transform: translateY(16px);
            transition: .5s ease
        }

        .rv.vis {
            opacity: 1;
            transform: translateY(0)
        }