* {
     box-sizing: border-box;
 }


 body {
     margin: 0;
     font-family: 'Raleway', sans-serif;
 }


 #app {
     display: grid;
     grid-template-columns: 290px 1fr 0px;
     width: 100vw;
     height: 100vh;
     overflow: clip;
     transition: grid-template-columns 0.25s ease;
 }


 #app.detail-open {
     grid-template-columns: 290px 1fr 480px;
 }


 /* ── LEFT SIDEBAR ── */
 #sidebar {
     display: flex;
     flex-direction: column;
     border-right: 1px solid #ddd;
     background: #fff;
     overflow: hidden;
 }


 #sidebar-header {
     padding: 14px 16px 10px;
     border-bottom: 1px solid #dce7f1;
     /* ← was #eee: subtle #45729f tint */
     flex-shrink: 0;
 }


 #sidebar-header h1 {
     font-size: 1.25rem;
     font-weight: 500;
     color: #45729f;
 }

 #sidebar-header img {
     max-width: 100%;
     height: auto;
     max-height: 140px;
     margin: auto;
     transform: translateX(-7px);
     display: block;
 }

 #sidebar-header .data-date {
     margin: 5px 0 0;
     font-size: 10px;
     color: #aaa;
 }

 .sidebar-brand {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 4px;
     flex: 1;
     min-width: 0;
 }

 #sidebar-header .sidebar-brand img {
     width: 110px;
     max-width: 45%;
     height: auto;
     margin: 0 auto;
     transform: none;
 }

 .back-to-site {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     min-height: 44px;
     color: #45729f;
     font-size: 12px;
     font-weight: 600;
     text-decoration: none;
 }

 .back-to-site:hover {
     text-decoration: underline;
 }

 .back-to-site:focus-visible {
     outline: 2px solid #45729f;
     outline-offset: 4px;
     border-radius: 3px;
 }

 #sidebar-header .data-date:empty {
     display: none;
 }


 #sidebar-scroll {
     flex: 1;
     overflow-y: auto;
     padding: 12px 14px;
     display: flex;
     flex-direction: column;
     gap: 12px;
 }


 .filters-title {
     margin: 0;
     font-size: 16px;
     font-weight: 600;
     color: #45729f;
 }

 .sidebar-footer {
     flex-shrink: 0;
     padding: 8px 14px;
     background: #f9fafb;
     font-size: 11px;
     text-align: center;
 }

 .sidebar-footer a {
     color: #555;
     text-underline-offset: 2px;
 }

 .sidebar-footer a:hover {
     color: #365d84;
 }

 .sidebar-footer a:focus-visible {
     outline: 2px solid #45729f;
     outline-offset: 2px;
 }


 /* ── MAP ── */
 #map {
     width: 100%;
     height: 100%;
 }


 /* ── RIGHT PANEL ── */
 #detail-panel {
     border-left: 1px solid #ddd;
     background: #f9fafb;
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }


 #detail-hero {
     position: relative;
     width: 100%;
     height: 200px;
     background: #e5e7eb;
     flex-shrink: 0;
     overflow: hidden;
 }


 #detail-hero img {
     background-color: white;
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }


 #detail-hero-placeholder {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 48px;
     color: #d1d5db;
     background: #f3f4f6;
 }


 #detail-hero-credit {
     position: absolute;
     bottom: 6px;
     right: 8px;
     font-size: 10px;
     color: rgba(255, 255, 255, .75);
     text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
 }


 #detail-hero-count {
     position: absolute;
     bottom: 6px;
     left: 8px;
     background: rgba(0, 0, 0, .45);
     color: #fff;
     font-size: 11px;
     padding: 2px 8px;
     border-radius: 10px;
     cursor: pointer;
 }


 .detail-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     padding: 14px 18px 10px;
     background: #fff;
     border-bottom: 1px solid #e5e7eb;
     gap: 10px;
     flex-shrink: 0;
 }


 .detail-header-left {
     flex: 1;
     min-width: 0;
 }


 .detail-header h2 {
     margin: 0 0 5px;
     font-size: 17px;
     line-height: 1.3;
     color: #111;
 }


 .detail-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 5px;
     align-items: center;
 }


 #detail-close {
     background: none;
     border: none;
     cursor: pointer;
     font-size: 20px;
     line-height: 1;
     color: #9ca3af;
     padding: 2px;
     flex-shrink: 0;
 }


 #detail-close:hover {
     color: #45729f;
     /* ← was #111: uses brand color on hover */
 }


 #detail-content {
     flex: 1;
     overflow-y: auto;
     padding: 0 0 24px;
 }


 /* Sections */
 .detail-section {
     background: #fff;
     margin: 10px 14px 0;
     border-radius: 8px;
     border: 1px solid #e5e7eb;
     overflow: hidden;
 }


 .detail-section-title {
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .07em;
     color: #45729f;
     /* ← was #6b7280: section titles now carry the brand color */
     padding: 10px 14px 6px;
     border-bottom: 1px solid #f3f4f6;
     background: #f9fafb;
 }


 .detail-row {
     display: flex;
     gap: 10px;
     padding: 8px 14px;
     border-bottom: 1px solid #f3f4f6;
     font-size: 13px;
     line-height: 1.5;
 }


 .detail-row:last-child {
     border-bottom: none;
 }


 .detail-row-icon {
     flex-shrink: 0;
     width: auto;
     margin: auto 0;
     text-align: center;
     color: #9ca3af;
     font-style: normal;
 }

 .detail-row-icon i {
     font-size: 1rem;
 }

 .detail-row-body {
     flex: 1;
     min-width: 0;
 }

 .detail-row-label {
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: .05em;
     color: #9ca3af;
     margin-bottom: 1px;
 }


 .detail-row-value {
     color: #1f2937;
     word-break: break-word;
 }


 .detail-row-value a {
     color: #45729f;
     /* ← was #2563eb: links now use the brand color */
     text-decoration: none;
 }


 .detail-row-value a:hover {
     text-decoration: underline;
 }


 .detail-description {
     padding: 12px 14px;
     font-size: 13px;
     line-height: 1.65;
     color: #374151;
     border-bottom: 1px solid #f3f4f6;
 }


 .detail-description:last-child {
     border-bottom: none;
 }


 .detail-description.italic {
     font-style: italic;
     color: #6b7280;
 }


 /* Tags */
 .detail-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
     padding-top: 2px;
 }


 .detail-tag {
     background: #eef3f8;
     /* ← was #eff6ff: tint of #45729f */
     color: #365d84;
     /* ← was #1d4ed8: darker shade of #45729f */
     border-radius: 4px;
     padding: 2px 8px;
     font-size: 11.5px;
     line-height: 1.6;
 }


 .detail-tag.green {
     background: #f0fdf4;
     color: #166534;
 }


 .detail-tag.amber {
     background: #fffbeb;
     color: #92400e;
 }


 .detail-tag.gray {
     background: #f3f4f6;
     color: #374151;
 }


 .detail-tag.red {
     background: #fef2f2;
     color: #991b1b;
 }


 .detail-badge {
     display: inline-flex;
     align-items: center;
     padding: 2px 10px;
     border-radius: 12px;
     font-size: 11px;
     font-weight: 600;
     color: #fff;
 }


 /* Galerie miniatures */
 .photo-thumbs {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
     gap: 4px;
     padding: 10px 14px;
 }


 .photo-thumbs a {
     display: block;
     aspect-ratio: 4/3;
     overflow: hidden;
     border-radius: 4px;
     background: #f3f4f6;
     cursor: pointer;
 }


 .photo-thumbs img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .2s;
     display: block;
 }


 .photo-thumbs a:hover img {
     transform: scale(1.06);
 }


 /* Stats capacité */
 .detail-stats {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
     gap: 8px;
     padding: 12px 14px;
 }


 .detail-stat {
     background: #f9fafb;
     border: 1px solid #e5e7eb;
     border-radius: 6px;
     padding: 8px 10px;
     text-align: center;
 }


 .detail-stat-value {
     font-size: 20px;
     font-weight: 700;
     color: #111;
     line-height: 1.2;
 }


 .detail-stat-label {
     font-size: 10px;
     color: #9ca3af;
     margin-top: 2px;
 }


 /* ── COMMON SIDEBAR ── */
 fieldset {
     margin: 0;
     padding: 8px 10px 10px;
     border: 1px solid #b9cfdf;
     /* ← was #ddd: 40% tint of #45729f */
     border-radius: 4px;
 }


 legend {
     padding: 0 5px;
     font-weight: 600;
     font-size: 12px;
     color: #45729f;
     /* ← was #333: legends now use the brand color */
 }


 label {
     display: flex;
     align-items: center;
     gap: 7px;
     margin: 6px 0;
     cursor: pointer;
     font-size: 12.5px;
 }


 .legend-dot {
     display: inline-block;
     width: 9px;
     height: 9px;
     border-radius: 50%;
     flex-shrink: 0;
 }


 .filter-scroll {
     max-height: 180px;
     overflow-y: auto;
 }


 .text-filter {
     width: 100%;
     padding: 6px 8px;
     font-size: 12.5px;
     border: 1px solid #ddd;
     border-radius: 4px;
     outline: none;
 }




 .text-filter:focus {
     border-color: #45729f;
     /* ← was #6b7280: focus ring now uses brand color */
 }


 .count {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     flex-shrink: 0;
     padding: 10px 14px;
     border-top: 1px solid #e5e7eb;
     background: #f9fafb;
     font-size: 11.5px;
     color: #555;
 }

 #visible-count {
     white-space: nowrap;
 }

 #reset-filters {
     min-width: 0;
     padding: 6px 7px;
     border: 1px solid #ccd8e5;
     border-radius: 6px;
     background: #fff;
     color: #365d84;
     font: inherit;
     cursor: pointer;
 }

 #reset-filters:hover {
     background: #edf2f7;
 }

 #reset-filters:focus-visible {
     outline: 2px solid #45729f;
     outline-offset: 2px;
 }

 #reset-filters:disabled {
     opacity: .5;
     cursor: default;
 }


 .loading {
     font-size: 12px;
     color: #999;
     font-style: italic;
 }


 .toggle-links {
     font-size: 11px;
     margin-bottom: 4px;
     color: #666;
 }


 .toggle-links button {
     border: 0;
     background: none;
     font: inherit;
     padding: 0;
     cursor: pointer;
     color: #45729f;
     /* ← was #2563eb: inline links use brand color */
     text-decoration: none;
     margin-right: 6px;
 }


 .toggle-links button:hover {
     text-decoration: underline;
 }


 /* ── LIGHT SLIDER ── */
 #light-slider {
     -webkit-appearance: none;
     width: 100%;
     height: 4px;
     border-radius: 2px;
     background: linear-gradient(to right,
             #1a1a3e 0%, #f97316 22%, #fde68a 35%,
             #60a5fa 50%, #fde68a 75%, #f97316 83%, #1a1a3e 100%);
 }


 #light-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: #fff;
     border: 2px solid #374151;
     cursor: pointer;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
 }


 #light-slider::-moz-range-thumb {
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: #fff;
     border: 2px solid #374151;
     cursor: pointer;
 }


 /* ── LIGHTBOX ── */
 #lightbox {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .88);
     z-index: 9999;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     gap: 12px;
 }


 #lightbox.open {
     display: flex;
 }


 #lightbox img {
     max-width: 90vw;
     max-height: 80vh;
     border-radius: 6px;
     object-fit: contain;
 }


 #lightbox-caption {
     color: #d1d5db;
     font-size: 13px;
     text-align: center;
     max-width: 600px;
 }


 #lightbox-close {
     position: absolute;
     top: 16px;
     right: 20px;
     font-size: 28px;
     color: #fff;
     cursor: pointer;
     background: none;
     border: none;
     line-height: 1;
 }


 #lightbox-nav {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     pointer-events: none;
     padding: 0 16px;
 }


 #lightbox-nav button {
     pointer-events: all;
     background: rgba(255, 255, 255, .15);
     border: none;
     color: #fff;
     font-size: 24px;
     border-radius: 50%;
     width: 44px;
     height: 44px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
 }


 #lightbox-nav button:hover {
     background: rgba(255, 255, 255, .3);
 }


 /* ── Type icon selector ── */
 .type-grid {
     display: grid;
     grid-template-columns: repeat(1, minmax(72px, 1fr));
     gap: 5px;
     padding: 2px 0 4px;
 }


 .type-btn {
     display: flex;
     flex-direction: row;
     justify-content: start;
     align-items: center;
     gap: .5rem;
     padding: .75rem;
     border: 1.5px solid #e5e7eb;
     border-radius: 7px;
     background: #f9fafb;
     cursor: pointer;
     font-size: 12px;
     color: #6b7280;
     line-height: 1.25;
     text-align: left;
     transition: border-color .15s, background .15s, color .15s;
     user-select: none;
     hyphens: auto;
     font-family: inherit;
     hyphens: none;
     word-break: normal;
     overflow-wrap: normal;
 }


 .type-btn .type-icon {
     font-size: 22px;
     line-height: 1;
 }


 .type-btn:hover {
     border-color: #9ca3af;
     background: #f3f4f6;
     color: #374151;
 }


 .type-btn.active {
     border-color: #45729f;
     /* ← was #2563eb */
     background: #eef3f8;
     /* ← was #eff6ff: tint of #45729f */
     color: #365d84;
     /* ← was #1d4ed8: shade of #45729f */
     font-weight: 600;
 }


 .type-btn.inactive {
     opacity: 0.45;
 }


 /* ── DRAG HANDLE ── */
 .sheet-handle {
     width: 36px;
     height: 4px;
     border-radius: 2px;
     background: #d1d5db;
     margin: 10px auto 0;
     flex-shrink: 0;
     display: none;
 }


 /* ── MOBILE TOP BAR ── */
 #mobile-topbar {
     display: none;
 }


 /* ── FILTER FAB ── */
 #filter-fab {
     display: none;
 }


 /* ── SHEET BACKDROP ── */
 #sheet-backdrop {
     display: block;
     visibility: hidden;
     pointer-events: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.35);
     z-index: 190;
     backdrop-filter: blur(2px);
     -webkit-backdrop-filter: blur(2px);
     opacity: 0;
     transition: opacity 0.3s ease;
 }


 #sheet-backdrop.visible {
     visibility: visible;
     pointer-events: auto;
     opacity: 1;
 }


 /* ── 9/16 PORTRAIT LAYOUT ── */
 @media (max-width: 768px),
 (orientation: portrait) and (max-width: 1280px) {
     .back-to-site {
         display: none;
     }

     #app {
         display: block;
         position: relative;
         width: 100vw;
         height: 100dvh;
         overflow: clip;
     }


     /* Detail-open on mobile has no grid effect */
     #app.detail-open {
         grid-template-columns: unset;
     }


     /* ── Full-screen map ── */
     #map {
         position: absolute;
         inset: 0;
         width: 100% !important;
         height: 100% !important;
     }


     /* Move mapbox controls to not overlap sheets */
     .mapboxgl-ctrl-bottom-right {
         bottom: 80px !important;
         right: 12px !important;
     }


     .mapboxgl-ctrl-top-right {
         right: 8px !important;
     }

     /* ── Floating top bar ── */
     #mobile-topbar {
         display: flex;
         align-items: center;
         gap: 10px;
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         z-index: 100;
         padding: 10px 14px 14px;
         background: linear-gradient(to bottom, rgba(20, 20, 20, 0.55) 0%, transparent 100%);
         pointer-events: none;
     }


     #mobile-topbar>* {
         pointer-events: auto;
     }


     #mobile-topbar img {
         height: 36px;
         width: auto;
         filter: brightness(0) invert(1);
         flex-shrink: 0;
     }


     #mobile-topbar-search {
         flex: 1;
         display: flex;
         align-items: center;
         background: rgba(255, 255, 255, 0.92);
         backdrop-filter: blur(8px);
         -webkit-backdrop-filter: blur(8px);
         border-radius: 24px;
         padding: 0 12px;
         height: 40px;
         box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
         gap: 6px;
     }


     #mobile-topbar-search input {
         flex: 1;
         border: none;
         background: none;
         outline: none;
         font-size: 14px;
         color: #111;
         min-width: 0;
     }


     #mobile-topbar-search input::placeholder {
         color: #9ca3af;
     }


     #mobile-count-badge {
         background: rgba(255, 255, 255, 0.15);
         backdrop-filter: blur(6px);
         -webkit-backdrop-filter: blur(6px);
         color: #fff;
         font-size: 11px;
         font-weight: 600;
         padding: 4px 10px;
         border-radius: 20px;
         white-space: nowrap;
         border: 1px solid rgba(255, 255, 255, 0.25);
         display: none;
         /* shown via JS once data loads */
     }


     /* ── Sidebar → Filter bottom sheet ── */
     .sheet-handle {
         display: block;
     }


     #sidebar {
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         width: 100%;
         height: 88dvh;
         border-right: none;
         border-top: none;
         border-top-left-radius: 20px;
         border-top-right-radius: 20px;
         box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.22);
         background: #fff;
         overflow: hidden;
         z-index: 200;
         transform: translateY(110%);
         transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
         display: flex;
         flex-direction: column;
     }


     #app.filter-open #sidebar {
         transform: translateY(0);
     }


     #sidebar-header {
         padding: 10px 16px 12px;
         display: flex;
         align-items: center;
         gap: 12px;
         border-bottom: 1px solid #f0f0f0;
     }


     #sidebar-header img {
         max-height: 32px;
     }


     #sidebar-header-title {
         font-size: 15px;
         font-weight: 700;
         color: #111;
         flex: 1;
     }


     #sidebar-header-close {
         background: #f3f4f6;
         border: none;
         width: 32px;
         height: 32px;
         border-radius: 50%;
         cursor: pointer;
         font-size: 16px;
         color: #6b7280;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: background 0.15s;
     }


     #sidebar-header-close:hover {
         background: #e5e7eb;
         color: #111;
     }

     #sidebar-header img {
         height: 120px;
         max-height: none;
         width: auto;
     }

     #sidebar-scroll {
         padding: 10px 14px 32px;
         gap: 10px;
     }


     /* ── Filter FAB ── */
     #filter-fab {
         display: flex;
         align-items: center;
         gap: 7px;
         position: absolute;
         bottom: 22px;
         left: 50%;
         transform: translateX(-50%);
         z-index: 150;
         background: #45729f;
         /* ← was #1f2937: FAB now uses the brand color */
         color: #fff;
         border: none;
         border-radius: 28px;
         padding: 11px 22px;
         font-size: 14px;
         font-weight: 600;
         box-shadow: 0 4px 20px rgba(69, 114, 159, 0.45);
         /* ← shadow tinted to match */
         cursor: pointer;
         white-space: nowrap;
         transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
         letter-spacing: 0.01em;
     }


     #filter-fab:hover {
         background: #365d84;
         /* ← darker shade on hover */
     }


     #filter-fab:active {
         transform: translateX(-50%) scale(0.96);
     }


     #filter-fab i {
         font-size: 16px;
     }


     #filter-fab .fab-count {
         background: rgba(255, 255, 255, 0.2);
         border-radius: 10px;
         padding: 1px 7px;
         font-size: 12px;
     }


     #app.filter-open #filter-fab {
         display: none;
     }


     /* ── Sheet backdrop ── */
     #sheet-backdrop {
         display: block;
     }


     /* ── Detail bottom sheet ── */
     #detail-panel {
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         width: 100%;
         height: 88dvh;
         border-left: none;
         border-top-left-radius: 20px;
         border-top-right-radius: 20px;
         box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.22);
         background: #f9fafb;
         z-index: 300;
         transform: translateY(110%);
         transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
         display: flex;
         flex-direction: column;
         overflow: hidden;
     }


     #app.detail-open #detail-panel {
         transform: translateY(0);
     }


     #detail-hero {
         border-top-left-radius: 20px;
         border-top-right-radius: 20px;
         height: 220px;
     }


     /* Widen detail header for mobile */
     .detail-header {
         padding: 12px 16px 10px;
     }


     .detail-header h2 {
         font-size: 16px;
     }


     /* Touch-optimized rows */
     .detail-row {
         padding: 10px 14px;
         font-size: 13.5px;
     }


     .detail-section {
         margin: 8px 12px 0;
     }


     /* Larger photo thumbs */
     .photo-thumbs {
         grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
     }


     /* Stat numbers bigger */
     .detail-stat-value {
         font-size: 22px;
     }


     /* Hide desktop data-date */
     .data-date {
         display: none;
     }


     /* Larger touch targets for checkboxes */
     label {
         padding: 4px 0;
         font-size: 13px;
     }


     label input[type="checkbox"] {
         width: 16px;
         height: 16px;
     }


     /* Type grid full width */
     .type-grid {
         grid-template-columns: 1fr 1fr;
     }


     .type-btn {
         padding: 8px 4px 7px;
         font-size: 13px;
         flex-direction: column;
         align-items: center;
         text-align: center;
     }


     .type-btn .type-icon {
         font-size: 24px;
     }


     /* Filter groups more airy */
     fieldset {
         padding: 10px 12px 12px;
     }


     .filter-group {
         border-radius: 10px;
     }


     details.filter-group>summary {
         padding: 11px 14px;
         font-size: 13.5px;
     }


 }


 @media (min-width: 769px) and (orientation: landscape),
 (min-width: 1281px) {
     #sidebar-header-close {
         display: none;
     }
 }


 .detail-socials {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     padding-top: 2px;
 }


 .detail-social-link {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 34px;
     height: 34px;
     border-radius: 999px;
     background: #f3f4f6;
     color: #374151;
     text-decoration: none;
     font-size: 18px;
     transition: background .15s, transform .15s, color .15s;
 }


 .detail-social-link i {
     font-size: 18px;
     line-height: 1;
     display: block;
 }


 .detail-social-link:hover {
     background: #e5e7eb;
     color: #111827;
     transform: translateY(-1px);
 }


 .detail-social-link.facebook:hover {
     color: #1877f2;
 }


 .detail-social-link.instagram:hover {
     color: #c13584;
 }


 .detail-social-link.linkedin:hover {
     color: #0a66c2;
 }


 .detail-social-link.youtube:hover {
     color: #ff0000;
 }


 .detail-social-link.tiktok:hover {
     color: #111827;
 }


 .detail-social-link.x:hover {
     color: #111827;
 }


 .filter-group {
     flex-shrink: 0;
     margin: 0;
     border: 1px solid #ddd;
     border-radius: 6px;
     background: #fff;
     overflow: hidden;
 }


 .filter-group summary {
     list-style: none;
     cursor: pointer;
     padding: 10px 12px;
     font-weight: 600;
     font-size: 12px;
     color: #333;
     display: flex;
     align-items: center;
     justify-content: start;
     gap: 1rem;
     user-select: none;
     color: white;
     background-color: #45729f;
 }


 .filter-group summary::-webkit-details-marker {
     display: none;
 }


 .filter-group summary::after {
     content: "▾";
     font-size: 12px;
     color: #ffffff;
     transition: transform .2s ease;
 }


 .filter-group summary i.ph {
     font-size: 22px;
     color: #ffffff;
     transition: transform .2s ease;
 }

 .filter-group[open] summary::after {
     transform: rotate(180deg);
 }


 .filter-group-content {
     padding: 0 10px 10px;
     border-top: 1px solid #eee;
 }


 .filter-group-content>.toggle-links,
 .filter-group-content>.text-filter,
 .filter-group-content>.filter-scroll,
 .filter-group-content>#type-filters {
     margin-top: 8px;
 }


 .filter-group-content>.text-filter:first-child,
 .filter-group-content>.toggle-links:first-child,
 .filter-group-content>.filter-scroll:first-child,
 .filter-group-content>#type-filters:first-child {
     margin-top: 10px;
 }

 /* ── Catégories fusionnées ─────────────────────────────── */
 .feed-section {
     margin-bottom: 10px;
 }

 .feed-header {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 5px 4px;
     border-radius: 6px;
     cursor: default;
     user-select: none;
     font-size: 12px;
     font-weight: 600;
     color: #444;
     transition: background 0.15s;
 }

 .feed-header.partial .feed-label {
     opacity: 0.6;
 }

 .feed-header.empty .feed-label {
     opacity: 0.35;
 }

 .feed-icon {
     font-size: 15px;
     flex-shrink: 0;
     display: flex;
     align-items: center;
 }

 /* Icône colorée inactive quand le feed est désactivé */
 .feed-header.empty .feed-icon {
     opacity: 0.3;
 }

 .feed-label {
     flex: 1;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .feed-badge {
     font-size: 10px;
     font-weight: 700;
     padding: 1px 5px;
     border-radius: 9999px;
     flex-shrink: 0;
 }

 .feed-actions {
     display: flex;
     gap: 4px;
     flex-shrink: 0;
 }

 .feed-actions a {
     cursor: pointer;
     font-size: 10px;
     color: #999;
     padding: 1px 4px;
     border-radius: 4px;
     line-height: 1.6;
 }

 .feed-actions a:hover {
     background: #eee;
     color: #333;
 }

 /* Type button : l'icône prend la couleur du feed (inline style="color:…") */
 /* Le reste du style .type-btn reste identique, seulement .type-icon change */
 .type-btn .type-icon {
     /* color est posée en inline — pas besoin de règle supplémentaire */
     /* mais on peut l'affaiblir quand inactif : */
     transition: color 0.15s, opacity 0.15s;
 }

 .type-btn.inactive .type-icon {
     opacity: 0.3;
     /* force le gris sur l'icône quand inactif */
     color: #aaa !important;
 }

 #prix-filters {
     margin-top: 8px;
 }

 #prix-help {
     margin: 8px 0 0;
     font-size: 11px;
     color: #666;
 }

 /* Loading and failure state remains readable over the map. */
 [hidden] {
     display: none !important;
 }

 #load-status {
     position: fixed;
     top: 16px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 500;
     max-width: calc(100vw - 32px);
     padding: 12px 16px;
     border-radius: 8px;
     background: white;
     color: #334155;
     box-shadow: 0 2px 12px #0003;
     font-size: 14px;
 }

 #load-status.error {
     border-left: 4px solid #b91c1c;
 }

 #load-retry {
     margin-left: 8px;
     cursor: pointer;
 }

 .toggle-links button:focus-visible {
     outline: 2px solid #45729f;
     outline-offset: 3px;
 }

 .photo-thumbs img {
     height: 70px;
     object-fit: cover;
 }