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

        body {
            font-family: 'Georgia', 'Times New Roman', serif;
            line-height: 1.6;
            color: #3e2723;
            background: #f5f0e8 url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4c4a8' fill-opacity='0.12'%3E%3Cpath d='M50 0L60 10L50 20L40 10zM50 25L60 35L50 45L40 35zM50 50L60 60L50 70L40 60zM50 75L60 85L50 95L40 85zM25 12.5L35 22.5L25 32.5L15 22.5zM75 12.5L85 22.5L75 32.5L65 22.5zM25 37.5L35 47.5L25 57.5L15 47.5zM75 37.5L85 47.5L75 57.5L65 47.5zM25 62.5L35 72.5L25 82.5L15 72.5zM75 62.5L85 72.5L75 82.5L65 72.5zM25 87.5L35 97.5L25 107.5L15 97.5zM75 87.5L85 97.5L75 107.5L65 97.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        /* ===== HEADER TRADITIONNEL ===== */
        .header {
            background: #3e1c0e;
            padding: 35px 15px;
            text-align: center;
            border-bottom: 4px solid #b8860b;
            position: relative;
        }

        .header::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 6px;
            background: repeating-linear-gradient(
                90deg,
                #b8860b 0px, #b8860b 15px,
                #3e1c0e 15px, #3e1c0e 20px,
                #8b4513 20px, #8b4513 35px,
                #3e1c0e 35px, #3e1c0e 40px
            );
        }

        .header::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 25px;
            background: #b8860b;
            clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
        }

        .header h1 {
            color: #f5f0e8;
            font-size: 2.2rem;
            letter-spacing: 8px;
            text-transform: uppercase;
            font-weight: 400;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
        }

        .header .subtitle {
            color: #d4a843;
            font-size: 0.95rem;
            letter-spacing: 4px;
            margin-top: 8px;
            font-style: italic;
        }

        /* ===== NAVIGATION ===== */
        .nav {
            background: #2d1a0f;
            padding: 10px;
            text-align: center;
            border-bottom: 3px solid #b8860b;
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 5px;
        }

        .nav a {
            display: inline-block;
            margin: 3px 5px;
            padding: 8px 16px;
            color: #d4c4a8;
            text-decoration: none;
            font-size: 0.82rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            border: 1px solid transparent;
            transition: all 0.3s ease;
            position: relative;
            white-space: nowrap;
        }

        .nav a::before {
            content: '◆';
            margin-right: 6px;
            color: #b8860b;
            font-size: 0.6rem;
            vertical-align: middle;
        }

        .nav a:hover {
            color: #b8860b;
            border-color: #b8860b;
            background: rgba(184,134,11,0.1);
        }

        .btn-accueil {
            background: #b8860b !important;
            color: #3e1c0e !important;
            border-radius: 4px;
        }

        /* ===== CONTAINER ===== */
        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 25px 15px;
        }

        /* ===== SECTIONS ===== */
        .section {
            background: #fffef8;
            margin-bottom: 25px;
            border: 2px solid #b8860b;
            box-shadow: 0 4px 15px rgba(44,24,16,0.12);
            position: relative;
        }

        .section::before {
            content: '';
            position: absolute;
            top: -2px; left: 20px; right: 20px;
            height: 2px;
            background: #b8860b;
        }

        .section-header {
            background: #3e1c0e;
            color: #f5f0e8;
            padding: 14px 22px;
            font-size: 1rem;
            font-weight: 400;
            letter-spacing: 3px;
            text-transform: uppercase;
            border-bottom: 3px solid #b8860b;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .section-header .icon { font-size: 1.1rem; color: #d4a843; }
        .section-body { padding: 22px; }

        /* ===== HISTOIRE ===== */
        .histoire-avec-logo { overflow: hidden; }
        .logo-float {
            float: right;
            width: 230px;
            margin-left: 22px;
            margin-bottom: 12px;
            text-align: center;
            border: 1px solid #d4c4a8;
            padding: 8px;
            background: #faf8f3;
        }
        .logo-float img { width: 100%; height: auto; display: block; }
        .logo-float .logo-slogan { font-size: 0.78rem; color: #8d6e63; margin-top: 4px; }
        .logo-float .a-la-une { font-size: 1.15rem; color: #3e2723; margin-top: 18px; text-align: left; font-weight: 400; border-top: 1px solid #d4c4a8; padding-top: 8px; }
        .history-text { text-align: justify; font-size: 0.9rem; color: #4a3728; }
        .history-text p { margin-bottom: 14px; }
        .highlight-box { background: #f5f0e8; border-left: 4px solid #b8860b; padding: 14px 18px; margin: 14px 0; font-size: 0.87rem; border-radius: 0 6px 6px 0; }
        .highlight-box strong { color: #3e2723; }

        /* ===== GÉOGRAPHIE ===== */
        .geo-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 22px; align-items: start; }
        .geo-info { text-align: justify; font-size: 0.9rem; color: #4a3728; }
        .geo-info p { margin-bottom: 12px; }
        .geo-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .stat-card { background: #3e1c0e; color: #f5f0e8; padding: 12px; text-align: center; border: 2px solid #b8860b; border-radius: 4px; }
        .stat-card .number { font-size: 1.5rem; font-weight: 700; color: #d4a843; font-family: Georgia, serif; }
        .stat-card .label { font-size: 0.72rem; opacity: 0.9; letter-spacing: 1px; margin-top: 3px; }

        /* ===== CARTE ===== */
        .carte-images-row { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: stretch; margin-bottom: 25px; }
        .carte-image-block { text-align: center; display: flex; flex-direction: column; }
        .carte-image-block .carte-img-wrapper { flex: 1; min-height: 350px; border: 3px solid #b8860b; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 12px rgba(44,24,16,0.15); display: flex; align-items: center; justify-content: center; background: #faf8f3; }
        .carte-image-block .carte-img-wrapper img { width: 100%; height: 100%; object-fit: contain; display: block; }
        .carte-image-block .carte-caption { font-size: 0.8rem; color: #8d6e63; text-align: center; margin-top: 10px; font-style: italic; }
        .leaflet-control-attribution { display: none !important; }
        #map { width: 100%; height: 350px; min-height: 350px; }
        .carte-description-full { margin-top: 10px; padding-top: 20px; border-top: 2px solid #d4c4a8; }
        .carte-description-full h4 { color: #3e1c0e; font-size: 0.95rem; margin-bottom: 15px; letter-spacing: 1px; text-transform: uppercase; border-bottom: 2px solid #b8860b; padding-bottom: 6px; display: inline-block; font-family: 'Cinzel', serif; }
        .carte-description-full p { font-size: 0.88rem; color: #4a3728; text-align: justify; margin-bottom: 12px; line-height: 1.7; }
        .carte-description-full strong { color: #3e2723; }
        .carte-description-full .legende-list { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
        .carte-description-full .legende-list li { padding: 4px 0; font-size: 0.82rem; color: #4a3728; }
        .carte-description-full .legende-list li::before { content: "◆ "; color: #b8860b; font-size: 0.6rem; }
        .carte-source { font-size: 0.78rem; color: #8d6e63; margin-top: 15px; padding-top: 12px; border-top: 1px dashed #d4c4a8; font-style: italic; text-align: right; }

        /* ===== TABLEAU DES VILLAGES ===== */
        .villages-layout { display: flex; gap: 20px; align-items: flex-start; }
        .villages-table-wrapper { flex: 0 0 60%; max-width: 60%; overflow-x: auto; }
        .villages-images-colonne { flex: 1; display: flex; flex-direction: column; gap: 15px; }
        .villages-images-colonne .img-trad { text-align: center; }
        .villages-images-colonne .img-trad img { width: 100%; max-width: 100%; height: auto; border: 3px solid #b8860b; border-radius: 6px; display: block; }
        .villages-images-colonne .img-trad .image-caption { font-size: 0.78rem; color: #8d6e63; margin-top: 8px; font-style: italic; }
        .villages-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
        .villages-table th { background: #3e1c0e; color: #f5f0e8; padding: 7px 9px; text-align: left; font-weight: 400; letter-spacing: 1px; font-size: 0.7rem; text-transform: uppercase; border-bottom: 3px solid #b8860b; }
        .villages-table td { padding: 5px 9px; border-bottom: 1px solid #e8dcc8; color: #4a3728; }
        .villages-table tr:nth-child(even) { background: #faf8f3; }
        .villages-table tr:hover { background: #f5f0e8; }
        .village-num { background: #b8860b; color: #fff; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.68rem; border-radius: 3px; }
        .chef-name { color: #3e2723; font-weight: 600; }

        /* ===== FOOTER ===== */
        .footer { background: #3e1c0e; color: #d4c4a8; text-align: center; padding: 22px 15px; margin-top: 25px; border-top: 4px solid #b8860b; position: relative; }
        .footer::before { content: ''; position: absolute; top: -4px; left: 0; right: 0; height: 4px; background: repeating-linear-gradient(90deg, #b8860b 0px, #b8860b 15px, #3e1c0e 15px, #3e1c0e 20px, #8b4513 20px, #8b4513 35px, #3e1c0e 35px, #3e1c0e 40px); }
        .footer .copyright { color: #d4a843; font-size: 0.9rem; letter-spacing: 3px; }
        .footer .sub { margin-top: 6px; opacity: 0.8; font-size: 0.78rem; letter-spacing: 2px; }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 1024px) {
            .geo-grid { grid-template-columns: 1fr; }
            .geo-stats { max-width: 400px; margin: 0 auto; }
            .carte-images-row { grid-template-columns: 1fr; }
            .carte-image-block .carte-img-wrapper { min-height: 300px; }
            #map { height: 300px; min-height: 300px; }
            .villages-layout { flex-direction: column; }
            .villages-table-wrapper { flex: 1; max-width: 100%; }
            .villages-images-colonne { flex-direction: row; flex-wrap: wrap; }
            .villages-images-colonne .img-trad { flex: 1; min-width: 200px; }
        }

        @media (max-width: 768px) {
            .header { padding: 25px 10px; }
            .header h1 { font-size: 1.5rem; letter-spacing: 4px; }
            .header .subtitle { font-size: 0.8rem; }
            .nav { padding: 8px 5px; }
            .nav a { margin: 2px 3px; padding: 6px 10px; font-size: 0.7rem; letter-spacing: 1px; }
            .logo-float { float: none; width: 180px; margin: 0 auto 15px auto; }
            .section-header { font-size: 0.85rem; padding: 12px 15px; }
            .section-body { padding: 15px; }
            .history-text { font-size: 0.85rem; }
            .highlight-box { padding: 10px 14px; font-size: 0.82rem; }
            .carte-image-block .carte-img-wrapper { min-height: 250px; }
            #map { height: 250px; min-height: 250px; }
            .carte-description-full .legende-list { grid-template-columns: 1fr; }
            .villages-table { font-size: 0.7rem; }
            .villages-table th, .villages-table td { padding: 5px 6px; }
            .villages-images-colonne { flex-direction: column; }
            .villages-images-colonne .img-trad { min-width: 100%; }
            .container { padding: 15px 10px; }
        }

        @media (max-width: 480px) {
            .header h1 { font-size: 1.1rem; letter-spacing: 2px; }
            .header .subtitle { font-size: 0.7rem; }
            .nav a { font-size: 0.6rem; padding: 5px 8px; }
            .logo-float { width: 150px; }
            .section-header { font-size: 0.75rem; letter-spacing: 1px; }
            .geo-stats { grid-template-columns: 1fr 1fr; }
            .stat-card .number { font-size: 1.2rem; }
            .carte-image-block .carte-img-wrapper { min-height: 200px; }
            #map { height: 200px; min-height: 200px; }
            .villages-table { font-size: 0.6rem; }
            .villages-table th, .villages-table td { padding: 4px 5px; }
            .village-num { width: 18px; height: 18px; font-size: 0.6rem; }
            .footer .copyright { font-size: 0.75rem; }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .section { animation: fadeIn 0.6s ease forwards; }