 <style>

        :root {

            --primary: #1a1a1a;

            --secondary: #d4af37;

            --accent: #8b7355;

            --light: #dfdfdf;

            --white: #ffffff;

            --text-dark: #2c2c2c;

            --text-light: #666666;

            --shadow: rgba(0, 0, 0, 0.1);

        }



        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        body {

            font-family: 'Barlow', sans-serif;

            color: var(--text-dark);

            line-height: 1.6;

            overflow-x: hidden;

        }



        /* Navigation */

        .navbar {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            z-index: 1000;

            padding: 1rem 5%;

            display: flex;

            justify-content: space-between;

            align-items: center;

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

            backdrop-filter: blur(10px);

            box-shadow: 0 2px 20px var(--shadow);

        }



        .logo {

            font-family: 'Playfair Display', serif;

            font-size: 2rem;

            font-weight: 700;

            color: var(--primary);

            letter-spacing: 2px;

        }



        .nav-links {

            display: flex;

            gap: 3rem;

            list-style: none;

            align-items: center;

        }



        .nav-links a {

            text-decoration: none;

            color: var(--text-dark);

            font-weight: 500;

            font-size: 0.95rem;

            letter-spacing: 0.5px;

            transition: all 0.3s;

            position: relative;

            text-transform: uppercase;

        }



        .nav-links a::after {

            content: '';

            position: absolute;

            bottom: -5px;

            left: 0;

            width: 0;

            height: 2px;

            background: var(--secondary);

            transition: width 0.3s;

        }



        .nav-links a.active::after,

        .nav-links a:hover::after {

            width: 100%;

        }



        .contact-btn {

            padding: 0.8rem 2rem;

            background: var(--secondary);

            color: var(--primary);

            border: none;

            border-radius: 2px;

            cursor: pointer;

            font-weight: 600;

            letter-spacing: 1px;

            transition: all 0.3s;

            text-transform: uppercase;

            font-size: 0.85rem;

        }



        /* Hero Section */

        .page-hero {

            height: 60vh;

            background: linear-gradient(135deg, var(--primary) 0%, #2c2c2c 100%);

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            color: var(--white);

            position: relative;

            overflow: hidden;

            margin-top: 80px;

        }



        .page-hero::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

background: url(./about.jpg);

            background-size: cover;

            background-position: center;            opacity: 0.3;

        }



        .page-hero-content {

            position: relative;

            z-index: 2;

            max-width: 800px;

            padding: 0 2rem;

        }



        .page-hero-subtitle {

            font-size: 0.95rem;

            letter-spacing: 3px;

            text-transform: uppercase;

            color: var(--secondary);

            margin-bottom: 1rem;

        }



        .page-hero-title {

            font-family: 'Playfair Display', serif;

            font-size: 4.5rem;

            font-weight: 700;

            margin-bottom: 1.5rem;

        }



        .page-hero-description {

            font-size: 1.2rem;

            color: rgba(255, 255, 255, 0.85);

        }



        /* Contact Section */

        .contact-section {

            padding: 4rem 5% 8rem;

            background: var(--white);

        }



        .contact-container {

            max-width: 1400px;

            margin: 0 auto;

            display: grid;

            grid-template-columns: 1fr;

            gap: 5rem;

            align-items: start;

        }



        /* Contact Info */

        .contact-info {

            position: sticky;

            top: 120px;

        }



        .contact-info h2 {

            font-family: 'Playfair Display', serif;

            font-size: 3rem;

            margin-bottom: 1.5rem;

            color: var(--primary);

        }



        .contact-info p {

            font-size: 1.1rem;

            color: var(--text-light);

            line-height: 1.8;

            margin-bottom: 3rem;

        }



        .info-item {

            display: flex;

            gap: 1.5rem;

            margin-bottom: 2.5rem;

            align-items: flex-start;

        }



        .info-icon {

            width: 60px;

            height: 60px;

            background: var(--light);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 1.5rem;

            flex-shrink: 0;

            transition: all 0.3s;

        }



        .info-item:hover .info-icon {

            background: var(--secondary);

            transform: scale(1.1);

        }



        .info-content h3 {

            font-family: 'Playfair Display', serif;

            font-size: 1.3rem;

            margin-bottom: 0.5rem;

            color: var(--primary);

        }



        .info-content p,

        .info-content a {

            color: var(--text-light);

            text-decoration: none;

            transition: color 0.3s;

        }



        .info-content a:hover {

            color: var(--secondary);

        }



        .social-links {

            display: flex;

            gap: 1rem;

            margin-top: 3rem;

        }



        .social-link {

            width: 50px;

            height: 50px;

            border: 2px solid var(--text-light);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            color: var(--text-dark);

            text-decoration: none;

            transition: all 0.3s;

            font-size: 1.2rem;

        }



        .social-link:hover {

            border-color: var(--secondary);

            background: var(--secondary);

            color: var(--primary);

            transform: translateY(-3px);

        }



        /* Contact Form */

        .contact-form-wrapper {

            background: var(--light);

            padding: 4rem;

            border-radius: 2px;

            box-shadow: 0 10px 40px var(--shadow);

        }



        .form-header {

            margin-bottom: 3rem;

        }



         /* Filter Section */

        .filter-section {

            padding: 4rem 5% 2rem;

            background: var(--white);

            text-align: center;

        }



        .filter-buttons {

            display: flex;

            gap: 1rem;

            justify-content: center;

            flex-wrap: wrap;

        }



        .filter-btn {

            padding: 0.8rem 2rem;

            background: transparent;

            border: 2px solid var(--text-light);

            color: var(--text-dark);

            cursor: pointer;

            font-weight: 500;

            letter-spacing: 1px;

            text-transform: uppercase;

            font-size: 0.9rem;

            transition: all 0.3s;

            border-radius: 2px;

        }



        .filter-btn:hover,

        .filter-btn.active {

            background: var(--secondary);

            border-color: var(--secondary);

            color: var(--primary);

        }







        .form-header h3 {

            font-family: 'Playfair Display', serif;

            font-size: 2rem;

            margin-bottom: 0.5rem;

            color: var(--primary);

        }



        .form-header p {

            color: var(--text-light);

        }



        .form-group {

            margin-bottom: 2rem;

        }



        .form-row {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 1.5rem;

        }



        label {

            display: block;

            margin-bottom: 0.5rem;

            color: var(--text-dark);

            font-weight: 500;

            font-size: 0.95rem;

            text-transform: uppercase;

            letter-spacing: 0.5px;

        }



        input,

        textarea,

        select {

            width: 100%;

            padding: 1rem 1.5rem;

            border: 2px solid transparent;

            background: var(--white);

            font-family: 'Barlow', sans-serif;

            font-size: 1rem;

            color: var(--text-dark);

            transition: all 0.3s;

            border-radius: 2px;

        }



        input:focus,

        textarea:focus,

        select:focus {

            outline: none;

            border-color: var(--secondary);

        }



        textarea {

            resize: vertical;

            min-height: 150px;

        }



        select {

            cursor: pointer;

            appearance: none;

            background-image: url('data:image/svg+xml;utf8,<svg fill="%23666" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');

            background-repeat: no-repeat;

            background-position: right 1rem center;

            background-size: 20px;

        }



        .checkbox-group {

            display: flex;

            gap: 0.8rem;

            align-items: flex-start;

            margin-top: 1.5rem;

        }



        .checkbox-group input[type="checkbox"] {

            width: auto;

            margin-top: 0.2rem;

        }



        .checkbox-group label {

            margin: 0;

            text-transform: none;

            font-weight: 400;

            letter-spacing: normal;

        }



        .submit-btn {

            width: 100%;

            padding: 1.3rem;

            background: var(--secondary);

            color: var(--primary);

            border: none;

            border-radius: 2px;

            cursor: pointer;

            font-weight: 600;

            letter-spacing: 1px;

            text-transform: uppercase;

            font-size: 1rem;

            transition: all 0.3s;

            margin-top: 1rem;

        }



        .submit-btn:hover {

            transform: translateY(-3px);

            box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4);

        }



        /* Map Section */

        .map-section {

            padding: 0;

            height: 500px;

            background: var(--light);

            position: relative;

        }



        .map-placeholder {

            width: 100%;

            height: 100%;

            background: linear-gradient(135deg, var(--light) 0%, #e8e6e3 100%);

            display: flex;

            align-items: center;

            justify-content: center;

            flex-direction: column;

            gap: 1rem;

            color: var(--text-light);

        }



        .map-placeholder svg {

            width: 80px;

            height: 80px;

            opacity: 0.3;

        }



        /* FAQ Section */

        .faq-section {

            padding: 8rem 5%;

            background: var(--light);

        }



        .section-header {

            max-width: 800px;

            margin: 0 auto 4rem;

            text-align: center;

        }



        .section-subtitle {

            font-size: 0.95rem;

            letter-spacing: 3px;

            text-transform: uppercase;

            color: var(--secondary);

            margin-bottom: 1rem;

        }



        .section-title {

            font-family: 'Playfair Display', serif;

            font-size: 3.5rem;

            font-weight: 700;

            color: var(--primary);

        }



        .faq-container {

            max-width: 900px;

            margin: 0 auto;

        }



        .faq-item {

            background: var(--white);

            margin-bottom: 1.5rem;

            border-radius: 2px;

            overflow: hidden;

            box-shadow: 0 2px 10px var(--shadow);

        }



        .faq-question {

            padding: 2rem;

            cursor: pointer;

            display: flex;

            justify-content: space-between;

            align-items: center;

            transition: all 0.3s;

        }



        .faq-question:hover {

            background: var(--light);

        }



        .faq-question h3 {

            font-family: 'Playfair Display', serif;

            font-size: 1.3rem;

            color: var(--primary);

            margin: 0;

        }



        .faq-icon {

            font-size: 1.5rem;

            color: var(--secondary);

            transition: transform 0.3s;

        }



        .faq-item.active .faq-icon {

            transform: rotate(45deg);

        }



        .faq-answer {

            max-height: 0;

            overflow: hidden;

            transition: max-height 0.3s ease-out;

        }



        .faq-answer-content {

            padding: 0 2rem 2rem;

            color: var(--text-light);

            line-height: 1.8;

        }



        .faq-item.active .faq-answer {

            max-height: 500px;

        }



        /* Footer */

        .footer {

            background: var(--primary);

            color: var(--white);

            padding: 5rem 5% 2rem;

        }



        .footer-content {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

            gap: 3rem;

            margin-bottom: 3rem;

        }



        .footer-section h3 {

            font-family: 'Playfair Display', serif;

            font-size: 1.5rem;

            margin-bottom: 1.5rem;

            color: var(--secondary);

        }



        .footer-section p, .footer-section a {

            color: rgba(255, 255, 255, 0.7);

            line-height: 1.8;

            text-decoration: none;

            display: block;

            transition: color 0.3s;

        }



        .footer-section a:hover {

            color: var(--secondary);

        }



        .footer-bottom {

            text-align: center;

            padding-top: 2rem;

            border-top: 1px solid rgba(255, 255, 255, 0.1);

            color: rgba(255, 255, 255, 0.5);

        }



        /* Success Message */

        .success-message {

            display: none;

            padding: 1.5rem;

            background: #27ae60;

            color: white;

            border-radius: 2px;

            margin-bottom: 2rem;

            text-align: center;

        }



        .success-message.show {

            display: block;

            animation: slideDown 0.4s ease-out;

        }



        @keyframes slideDown {

            from {

                opacity: 0;

                transform: translateY(-20px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }

/* verification date */

.flatpickr-day.today,

.flatpickr-day.selected{

background:#28a745;

border-color:#28a745;

color:white;

}



        /* Responsive */

        @media (max-width: 968px) {

            .nav-links {

                display: none;

            }



            .page-hero-title {

                font-size: 3rem;

            }



            .contact-container {

                grid-template-columns: 1fr;

                gap: 3rem;

            }



            .contact-info {

                position: static;

            }



            .contact-form-wrapper {

                padding: 2rem;

            }



            .form-row {

                grid-template-columns: 1fr;

            }

        }

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

/* Réinitialisation */
* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

.menu-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--primary);
    background: none;
    border: none;
    padding: 5px;
}

@media screen and (max-width: 992px) {
    .navbar {
        padding: 15px 5%;
        position: relative;
    }

    .menu-toggle {
        display: block;
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.98);
        flex-direction: column;
        padding: 20px 0;
        box-shadow: 0 10px 30px var(--shadow);
        z-index: 999;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links a {
        display: block;
        padding: 15px 20px;
        font-size: 14px;
        border-bottom: 1px solid var(--light);
    }

    .nav-links a:last-child {
        border-bottom: none;
    }

    .contact-btn {
        display: none;
    }
}

/* =========================
   TABLETTE (768px - 992px)
========================= */

@media screen and (max-width: 992px) {
    .page-hero {
        height: 50vh;
        margin-top: 80px;
    }

    .page-hero-title {
        font-size: 3.5rem;
    }

    .page-hero-description {
        font-size: 1.1rem;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contact-info {
        position: static;
    }

    .contact-form-wrapper {
        padding: 3rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .section-title {
        font-size: 3rem;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================
   MOBILE (max 768px)
========================= */

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
        width: 100%;
    }

    /* NAVBAR */
    .navbar {
        padding: 10px 15px;
        min-height: 60px;
    }

    .logo img {
        width: 120px;
    }

    .menu-toggle {
        font-size: 24px;
    }

    .nav-links {
        top: 100%;
        padding: 10px 0;
    }

    .nav-links a {
        padding: 12px 15px;
        font-size: 13px;
    }

    /* HERO */
    .page-hero {
        height: auto;
        min-height: 40vh;
        padding: 100px 20px 50px;
        margin-top: 0;
    }

    .page-hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
    }

    .page-hero-description {
        font-size: 1rem;
        padding: 0 15px;
    }

    .page-hero-subtitle {
        font-size: 0.85rem;
    }

    /* FILTER SECTION */
    .filter-section {
        padding: 2rem 15px;
    }

    .filter-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .filter-btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 13px;
    }
}

    </style>