/* ==== Vibrant Vannes Palette ==== */
        :root {
            --bg: #0A0F23;
            --bg-2: #101830;
            --card: #16224c;
            --accent: #0052CC;
            --accent2: #E82C2C;
            --glow: #22E3FF;
            --text: #F4F6FB;
            --muted: #9DA7B2;
            --line: rgba(255, 255, 255, 0.07);
            --yes: #9AF7A2;
            --radius-lg: 16px;
            --radius-md: 14px;
            --radius-sm: 12px;
        }

        :root[data-theme="light"] {
            --bg: #FAFBFF;
            --bg-2: #FFFFFF;
            --card: #FAFBFF;
            --accent: #0052CC;
            --accent2: #E82C2C;
            --glow: #0052CC;
            --text: #0A0F23;
            --muted: #516171;
            --line: rgba(0, 0, 0, 0.08);
            --yes: #39b644;
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Inter, Arial, sans-serif;
            background: linear-gradient(180deg, #070B16, #0A0F23 50%, #060A14);
            color: var(--text);
        }

        :root[data-theme="light"] body {
            background: #FAFBFF;
            color: var(--text)
        }

        header {
            display: flex;
            gap: 20px;
            align-items: center;
            justify-content: space-between
        }

        .controls {
            display: flex;
            gap: 10px;
            align-items: center
	    flex-wrap: wrap;
        }

        .btn {
            display: inline-flex;
            gap: 8px;
            align-items: center;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 999px;
            font-weight: 700;
            text-decoration: none;
            border: 1px solid var(--line);
            color: var(--text);
            background: rgba(255, 255, 255, 0.06);
        }

        :root[data-theme="light"] .btn {
            background: #fff
        }

        .btn:hover {
            filter: brightness(1.05)
        }

        .main-badge {
            background: linear-gradient(90deg, var(--accent), var(--accent2));
            color: white;
            padding: 6px 14px;
            border-radius: 999px;
            font-weight: 700;
            box-shadow: 0 0 18px rgba(0, 82, 204, .35);
        }

        .pill {
            display: inline-flex;
            gap: 8px;
            align-items: center;
            padding: 8px 14px;
            border: 1px solid var(--line);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.05);
            color: var(--text);
        }

        :root[data-theme="light"] .pill {
            background: #fff
        }

        .main-hero {
            margin: -20px -20px 20px -20px;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            overflow: hidden;
            position: relative;
            background: #0F1532;
            border: 0px solid var(--line);
            max-height: 350px;
        }
        .main-hero.index {
            max-height: initial;
	}
        .main-hero>img, .cardImg {
            width: 100%;
            height: auto;
            display: block;
            margin-top: -300px;
        }
        .main-hero.index>img {
            margin-top: initial;
	}

        .hero-overlay, .card-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(5, 10, 20, 0), rgba(5, 10, 20, .75) 65%, rgba(5, 10, 20, .9));
            display: flex;
            align-items: flex-end;
        }

        :root[data-theme="light"] .hero-overlay {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85));
        }

        .main-hero h1 {
            margin: 0;
            padding: 20px;
            font-size: clamp(22px, 4vw, 38px);
            line-height: 1.1;
            color: var(--glow);
        }

        section {
            margin: 28px 0;
            padding: 22px;
            border: 1px solid var(--line);
            background: var(--bg-2);
            border-radius: var(--radius-lg);
        }

        :root[data-theme="light"] section {
            background: #fff
        }

        h2 {
            margin: 0 0 12px;
            font-size: 22px;
            color: var(--glow)
        }

        p {
            color: var(--muted)
        }

        ul {
            margin: 6px 0 0;
            padding-left: 18px;
            color: var(--text)
        }

        .col-6 {
            grid-column: span 6
        }

        .gallery {
            display: flex;
            gap: 10px;
            flex-wrap: nowrap;
            overflow-x: auto;
        }
        .grid{display:flex;flex-wrap:wrap;gap:14px}
        @media (min-width:768px){
        .gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            flex-wrap: initial;
            overflow-x: initial;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
        }
        .grid.cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
        .grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
        .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

        }


        .gallery img {
            width: 100%;
            height: 210px;
            object-fit: cover;
            border-radius: var(--radius-sm);
            border: 1px solid var(--line)
        }

        .card {
            padding: 18px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: var(--card)
        }
        .card-hero {
            position: relative;
        }

        .footer {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: baseline;
            justify-content: space-between;
        }

        .main-cta {
    align-items: center;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    border: 1px solid var(--line);
    padding: 3px 8px;
    font-size: 13px;
        }

        .muted {
            color: var(--muted)
        }
            #map {
                height: 340px;
                border-radius: var(--radius-sm);
                border: 1px solid var(--line);
                overflow: hidden
            }

        .obf {
            unicode-bidi: bidi-override;
            direction: rtl
        }

        .yes {
            color: var(--yes);
            font-weight: 700
        }

        /* print */
        @media print {
            @page {
                size: A4;
                margin: 14mm
            }

            html,
            body {
                background: #fff;
                color: #111
            }

            .controls,
            .cta {
                display: none !important
            }

            a[href]:after {
                content: " (" attr(href) ")";
                font-size: .9em;
                color: #555
            }

            /* --- Ensures hero image prints --- */
            .hero-overlay {
                background: none !important;
            }

            .hero img {
                page-break-inside: avoid;
                break-inside: avoid;
            }

            .hero {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            #map-print-placeholder {
                display: block !important;
                padding: 12px;
                border: 1px dashed #999;
                border-radius: 8px
            }

        }

    :root{
      --bg:#0b1220; --txt:#e6eaf2; --muted:#a7b0c0; --card:#121a2b; --line:#23314d;
      --ok:#23c46e; --ko:#e04f4f; --warn:#e2b93b; --accent:#7ab8ff;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
    a{color:var(--accent);text-decoration:none}
    img{max-width:100%;height:auto;display:block}
    .wrap{max-width:1100px;margin:0 auto}
    .hero{display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;padding:24px 0 0 0;    flex-wrap: wrap;}
    .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px}
    h1{font-size:clamp(28px,3vw,40px);margin:0 0 8px}
    h2{font-size:clamp(20px,2vw,26px);margin:24px 0 8px}
    h3{font-size:18px;margin:20px 0 8px;color:var(--muted)}
    .meta{color:var(--muted);font-weight:500}
    .badge {
        display:inline-block;
        border:1px solid var(--line);
        padding:3px 8px;
        border-radius:999px;
        font-size:13px;
        background: var(--line);        
    }
    .badge.over {
        position:absolute;
        top: 5px;
        right: 5px;
    }
    .kpi{display:grid;grid-template-columns:auto 1fr;gap:4px 10px}
    .list{margin:0;padding:0;list-style:none}
    .list li{padding:8px 0;border-bottom:1px dashed var(--line)}
    .flags{display:flex;flex-wrap:wrap;gap:6px}
    .ok{color:var(--ok)} .ko{color:var(--ko)} .warn{color:var(--warn)}
    .table-wrapper { overflow-x: auto; }
    .table{width:100%;border-collapse:collapse}
    .table th,.table td{border:1px solid var(--line);padding:10px;vertical-align:top;text-align:left}
    .foot{color:var(--muted);font-size:14px; margin: 28px auto 28px auto;}
    .language-switch{list-style:none;margin:0;padding:0;display:flex;gap:10px;align-items:center}
    .language-switch li{padding:0}
    .language-switch .active{font-weight:700;text-decoration:underline}
    .cta{display:inline-block;background:#1e63ff;color:white;padding:10px 14px;border-radius:10px;border:1px solid #2a6bff}
    .note{font-size:14px;color:var(--muted)}
    @media (max-width:900px){.hero{grid-template-columns:1fr}}


/* ===========================
   PRINT-OPTIMIZED STYLES (Dark → Light-safe)
   =========================== */
@media print {

  @page {
    size: A4 portrait;
    margin: 14mm;
  }

  html, body, *, *::before, *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html, body {
    background: #fff !important;
    color: #333 !important;        /* ✅ Force readable text */
  }

  body {
    font: 12pt/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Inter, Arial, sans-serif !important;
  }

  /* Remove buttons and UI elements */
  .controls, .cta, .btn, [data-noprint="true"] {
    display: none !important;
  }

  /* Force link color and optional href */
  a, a:visited {
    color: #333 !important;
    text-decoration: underline;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666 !important;
  }

  /* Force all text to dark neutral */
  h1, h2, h3, h4, h5, h6,
  p, li, span, strong, em, td, th, div {
    color: #333 !important;        /* ✅ Ensures everything prints dark */
    background: transparent !important;
  }

  /* Simplify and flatten visuals */
  header, section, .card, .pill, .main-badge, .hero, .main-hero {
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  .hero-overlay { background: none !important; }

  /* Replace variable palette with print-safe equivalents */
  :root {
    --text: #333 !important;
    --muted: #555 !important;
    --line: rgba(0,0,0,0.18) !important;
    --accent: #000 !important;
    --accent2: #000 !important;
    --glow: #000 !important;
    --yes: #2f7d32 !important;
  }

  /* Headings */
  h1 { font-size: 20pt !important; color: #111 !important; }
  h2 { font-size: 14pt !important; color: #222 !important; }
  h3 { font-size: 12pt !important; color: #333 !important; }

  /* Paragraphs & lists */
  p, li { color: #333 !important; font-size: 11pt !important; }

  /* Layout simplification */
  .wrap { max-width: none !important; }
  .grid, .gallery { display: block !important; }
  .col-6, .grid > * { width: 100% !important; max-width: 100% !important; }

  /* Tables */
  table, .table {
    width: 100% !important;
    border-collapse: collapse !important;
  }
  .table th, .table td, table th, table td {
    border: 1px solid #bbb !important;
    padding: 6pt 8pt !important;
    color: #333 !important;
  }
  .table thead { display: table-header-group !important; }

  /* Images */
  img, svg, canvas {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid !important;
  }

  /* Cards and sections */
  section, .card {
    border: 1px solid #ccc !important;
    border-radius: 6pt !important;
    padding: 12pt !important;
    margin: 10pt 0 !important;
    background: #fff !important;
    color: #333 !important;
  }

  /* Prevent awkward breaks */
  header, .hero, .main-hero, section, .card, .footer {
    page-break-inside: avoid !important;
  }

  /* Map & placeholder */
  #map { display: none !important; }
  #map-print-placeholder {
    display: block !important;
    padding: 10pt !important;
    border: 1px dashed #999 !important;
    border-radius: 6pt !important;
    color: #333 !important;
  }

  /* Full-page helpers */
  .page {
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(297mm - 28mm) !important;
    justify-content: space-between !important;
    padding: 6pt 0 !important;
    background: #fff !important;
    color: #333 !important;
  }

  .page.strict {
    break-before: page !important;
    break-after: page !important;
  }

  .page-break { break-after: page !important; }

  /* Remove animations */
  * {
    animation: none !important;
    transition: none !important;
  }
}