:root {
            --primary: #222;
            --secondary: #1b6d85;
            --accent: #23527c;
            --gray: #f4f4f4;
            --text: #333;
        }
        * { box-sizing: border-box; }
        body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; color: var(--text); line-height: 1.6; }
        .row { max-width: 1200px; margin: 0 auto; padding: 0 15px; display: flex; flex-wrap: wrap; }
        header { background: #fff; padding: 20px 0; border-bottom: 3px solid var(--primary); }
        #logo img { max-width: 200px; }
        .nav-menu { list-style: none; padding: 0; display: flex; gap: 20px; background: var(--primary); color: #fff; padding: 10px; }
        .nav-menu a { color: #fff; text-decoration: none; font-weight: bold; }
        .hero { width: 100%; height: 400px; background-size: cover; background-position: center; display: flex; align-items: center; }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 40px auto; }
        .card { border: 1px solid #ddd; padding: 15px; text-align: center; }
        .card img { width: 100%; height: 200px; object-fit: cover; border-radius: 4px; }
        .btn { display: inline-block; padding: 10px 20px; background: var(--secondary); color: #fff; text-decoration: none; margin-top: 10px; }
        footer { background: var(--primary); color: #fff; padding: 40px 0; margin-top: 50px; }
        @media (max-width: 768px) { .nav-menu { flex-direction: column; } }
        .langue { width: 24px; vertical-align: middle; }