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


        body {

            background: #ffffff;

            color: #222;

            font-family:
                Arial,
                Helvetica,
                sans-serif;

            line-height: 1.7;

        }


        /* =================================
           NAVIGATION
        ================================= */

        .navbar {

            position: fixed;

            top: 0;
            left: 0;

            width: 100%;

            height: 75px;

            display: flex;

            align-items: center;

            justify-content: center;

            background: rgba(255, 255, 255, 0.92);

            backdrop-filter: blur(10px);

            border-bottom:
                1px solid #eee;

            z-index: 1000;

        }


        .nav-content {

            width: min(1100px, 90%);

            display: flex;

            justify-content: space-between;

            align-items: center;

        }


        .logo {

            text-decoration: none;

            color: #222;

            font-family: Georgia, serif;

            font-size: 1.5rem;

            font-weight: bold;

            letter-spacing: 2px;

        }


        .logo span {

            color: #c9a24d;

        }


        .nav-links {

            display: flex;

            gap: 35px;

        }


        .nav-links a {

            position: relative;

            text-decoration: none;

            color: #333;

            font-size: .95rem;

            transition: .3s;

        }


        .nav-links a:hover {

            color: #c9a24d;

        }


        .nav-links a.active {

            color: #c9a24d;

        }


        /* =================================
           HERO
        ================================= */

        .about-hero {

            min-height: 55vh;

            padding-top: 75px;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            background: #faf9f6;

        }


        .hero-content {

            max-width: 800px;

            padding: 80px 25px;

        }


        .eyebrow {

            color: #c9a24d;

            text-transform: uppercase;

            letter-spacing: 4px;

            font-size: .75rem;

            font-weight: bold;

            margin-bottom: 20px;

        }


        .about-hero h1 {

            font-family:
                Georgia,
                "Times New Roman",
                serif;

            font-size:
                clamp(3rem, 7vw, 5rem);

            font-weight: normal;

            color: #222;

            margin-bottom: 25px;

        }


        .hero-line {

            width: 60px;

            height: 2px;

            background: #c9a24d;

            margin: 0 auto 25px;

        }


        .hero-content p {

            color: #777;

            font-size: 1.1rem;

        }


        /* =================================
           CONTENU
        ================================= */

        .about-content {

            width: min(900px, 90%);

            margin: auto;

            padding: 100px 0;

        }


        .about-content h2 {

            font-family:
                Georgia,
                "Times New Roman",
                serif;

            font-size: 2.2rem;

            font-weight: normal;

            margin-bottom: 25px;

            color: #222;

        }


        .about-content h2::before {

            content: "";

            display: inline-block;

            width: 35px;

            height: 2px;

            background: #c9a24d;

            margin-right: 15px;

            vertical-align: middle;

        }


        .about-content p {

            color: #555;

            font-size: 1.05rem;

            margin-bottom: 25px;

        }


        /* =================================
           CITATION
        ================================= */

        .quote {

            margin: 70px 0;

            padding: 40px;

            border-left:
                3px solid #c9a24d;

            background: #faf9f6;

        }


        .quote p {

            font-family:
                Georgia,
                "Times New Roman",
                serif;

            font-size: 1.5rem;

            font-style: italic;

            color: #444;

            margin: 0;

        }


        /* =================================
           BLOC FINAL
        ================================= */

        .about-ending {

            margin-top: 80px;

            padding-top: 50px;

            border-top:
                1px solid #eee;

            text-align: center;

        }


        .about-ending h3 {

            font-family:
                Georgia,
                serif;

            font-size: 1.8rem;

            font-weight: normal;

            margin-bottom: 15px;

        }


        .about-ending p {

            max-width: 650px;

            margin: auto;

            color: #777;

        }


        /* =================================
           FOOTER
        ================================= */

        footer {

            padding: 35px 20px;

            text-align: center;

            background: #faf9f6;

            border-top:
                1px solid #eee;

            color: #888;

            font-size: .85rem;

        }


        footer span {

            color: #c9a24d;

        }


        /* =================================
           RESPONSIVE
        ================================= */

        @media (max-width: 700px) {

            .nav-links {

                gap: 15px;

            }

            .nav-links a {

                font-size: .8rem;

            }

            .about-content {

                padding: 70px 0;

            }

            .quote {

                padding: 25px;

            }

        }