/*** Design System for CEPID Infoviz 2025* Based on cepid.eu visual identity*//* ==========================================CSS Custom Properties (Design Tokens)========================================== */:root {--breakpoint-xs: 0px;--breakpoint-sm: 428px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px;--map-height-mobile: 280px;--map-height-tablet: 320px;--map-height-desktop: 380px;--color-primary: #2563eb;--color-primary-dark: #1d4ed8;--color-primary-light: #3b82f6;--color-secondary: #64748b;--color-secondary-dark: #475569;--color-background: #f8fafc;--color-surface: #ffffff;--color-surface-alt: #f1f5f9;--color-text: #1e293b;--color-text-muted: #64748b;--color-text-light: #94a3b8;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-border: #e2e8f0;--color-border-dark: #cbd5e1;--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;--font-size-xs: 0.75rem;--font-size-sm: 0.875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--spacing-xs: 0.25rem;--spacing-sm: 0.5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--radius-sm: 0.25rem;--radius-md: 0.375rem;--radius-lg: 0.5rem;--radius-xl: 0.75rem;--transition-fast: 150ms ease;--transition-base: 200ms ease;--transition-slow: 300ms ease;--header-height: 80px;--sidebar-width: 280px;--max-content-width: 1400px}
/* ==========================================Reset & Base Styles========================================== */*,*::before,*::after {box-sizing: border-box;margin: 0;padding: 0}
html {font-size: 16px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
body {font-family: var(--font-family);font-size: var(--font-size-base);line-height: 1.5;color: var(--color-text);background-color: var(--color-background);min-height: 100vh}
a {color: var(--color-primary);text-decoration: none;transition: color var(--transition-fast)}
a:hover {color: var(--color-primary-dark)}
img {max-width: 100%;height: auto}
button {font-family: inherit;font-size: inherit;cursor: pointer;border: none;background: none}
input,select {font-family: inherit;font-size: inherit}
table {border-collapse: collapse;width: 100%}
/* ==========================================Header========================================== */.header {background: var(--color-surface);border-bottom: 1px solid var(--color-border);position: sticky;top: 0;z-index: 100;box-shadow: var(--shadow-sm)}
.header-content {max-width: var(--max-content-width);margin: 0 auto;padding: var(--spacing-md) var(--spacing-xl);display: flex;align-items: center;gap: var(--spacing-xl)}
.logo-link {display: flex;align-items: center;flex-shrink: 0}
.logo {height: 120px;width: auto}
.header-title {flex: 1}
.header-title h1 {font-size: var(--font-size-xl);font-weight: 600;color: var(--color-text);margin: 0}
.header-title .subtitle {font-size: var(--font-size-sm);color: var(--color-text-muted);margin: 0}
.data-source {display: flex;flex-direction: column;align-items: flex-end;font-size: var(--font-size-sm)}
.source-label {color: var(--color-text-light);font-size: var(--font-size-xs);text-transform: uppercase;letter-spacing: 0.05em}
.source-link {color: var(--color-primary);font-weight: 500}
/* ==========================================Navigation Tabs========================================== */.nav-tabs {background: var(--color-surface);border-bottom: 1px solid var(--color-border);display: flex;justify-content: center;gap: var(--spacing-xs);padding: 0 var(--spacing-xl);position: sticky;top: var(--header-height);z-index: 90}
.tab-btn {padding: var(--spacing-md) var(--spacing-lg);color: var(--color-text-muted);font-weight: 500;border-bottom: 2px solid transparent;transition: all var(--transition-fast)}
.tab-btn:hover {color: var(--color-text);background: var(--color-surface-alt)}
.tab-btn.active {color: var(--color-primary);border-bottom-color: var(--color-primary)}
/* ==========================================Main Layout========================================== */.main-content {max-width: var(--max-content-width);margin: 0 auto;display: flex;flex-direction: column;gap: var(--spacing-lg);padding: var(--spacing-xl);min-height: 800px}
/* ==========================================Stats Summary Bar========================================== */.stats-summary-bar {display: flex;justify-content: center;gap: var(--spacing-lg);padding: var(--spacing-sm);background: transparent;border-bottom: 1px solid var(--color-border);margin-bottom: var(--spacing-sm);width: 100%}
.stats-summary-bar .stat-item {border: none;padding: 0;display: flex;flex-direction: column;align-items: center}
.stats-summary-bar .stat-value {font-size: var(--font-size-xl);font-weight: 700;color: var(--color-primary)}
/* ==========================================Filters Container (Bubbles)========================================== */.filters-container {display: none;background: var(--color-surface);border-radius: var(--radius-lg);padding: var(--spacing-lg);box-shadow: var(--shadow-sm);margin-bottom: var(--spacing-xl)}
.filters-container h3 {font-size: var(--font-size-lg);font-weight: 600;margin-bottom: var(--spacing-lg);color: var(--color-text);text-align: left}
.filter-row {display: flex;flex-wrap: wrap;gap: var(--spacing-xl);justify-content: flex-start}
.filter-group {margin-bottom: var(--spacing-md);flex: 1;min-width: 280px;max-width: 500px}
.dept-filter .dept-input-wrapper input {width: 100%}
.filter-group label {display: block;font-size: var(--font-size-sm);font-weight: 600;color: var(--color-text-muted);margin-bottom: var(--spacing-sm);text-transform: uppercase;letter-spacing: 0.05em;text-align: left}
.bubble-group .checkbox-group {display: flex;flex-wrap: wrap;gap: var(--spacing-xs);justify-content: flex-start;max-height: none;overflow: visible;padding: 0}
.bubble-group .checkbox-group label {display: inline-flex;align-items: center;gap: var(--spacing-xs);padding: 6px 16px;background: var(--color-surface);border: 1px solid var(--color-border);border-radius: 50px;font-size: var(--font-size-sm);color: var(--color-text);cursor: pointer;transition: all var(--transition-fast);text-transform: none;letter-spacing: normal;user-select: none;font-weight: normal;margin: 0}
.bubble-group .checkbox-group label:hover {background: var(--color-surface-alt);border-color: var(--color-primary-light)}
.bubble-group input[type="checkbox"] {width: 0;height: 0;opacity: 0;position: absolute}
/* Styled state when checkedWe use :has() for modern browsers, and fallback logic if needed.*/.bubble-group label:has(input:checked) {background: var(--color-primary);color: white;border-color: var(--color-primary);box-shadow: var(--shadow-sm)}
.bubble-group label:active {transform: scale(0.98)}
.dept-filter {margin-bottom: var(--spacing-md)}
.dept-chips {display: flex;flex-wrap: wrap;gap: var(--spacing-xs);margin-bottom: var(--spacing-sm);min-height: 0}
.dept-chip {display: inline-flex;align-items: center;gap: var(--spacing-xs);padding: 6px 12px;background: var(--color-primary);color: white;border-radius: 50px;font-size: var(--font-size-sm);box-shadow: var(--shadow-sm);animation: fadeIn 0.2s ease}
.dept-chip-remove {background: none;border: none;color: white;padding: 0;margin-left: 2px;cursor: pointer;font-size: 1.1em;line-height: 1;opacity: 0.8;transition: opacity var(--transition-fast)}
.dept-chip-remove:hover {opacity: 1}
.dept-input-wrapper {position: relative}
.search-input {width: 100%;padding: 10px 16px;border: 1px solid var(--color-border);border-radius: 50px;font-size: var(--font-size-sm);transition: border-color var(--transition-fast), box-shadow var(--transition-fast);background: var(--color-surface);color: var(--color-text)}
.search-input:focus {outline: none;border-color: var(--color-primary);box-shadow: 0 0 0 2px var(--color-primary-light)}
.dept-dropdown {position: absolute;top: calc(100% + 4px);left: 0;right: 0;background: var(--color-surface);border: 1px solid var(--color-border);border-radius: var(--radius-md);box-shadow: var(--shadow-lg);max-height: 200px;overflow-y: auto;z-index: 100;animation: slideDown 0.15s ease}
.dept-dropdown[hidden] {display: none}
.dept-option {padding: var(--spacing-sm) var(--spacing-md);font-size: var(--font-size-sm);color: var(--color-text);cursor: pointer;display: flex;justify-content: space-between;align-items: center}
.dept-option:hover,.dept-option.highlighted {background-color: var(--color-surface-alt);color: var(--color-primary)}
.dept-option-code {color: var(--color-text-muted);font-size: var(--font-size-xs);background: var(--color-background);padding: 2px 6px;border-radius: 4px}
.dept-no-results {padding: var(--spacing-md);color: var(--color-text-muted);text-align: center;font-size: var(--font-size-sm)}
@keyframes fadeIn {from {opacity: 0;transform: scale(0.9)}
to {opacity: 1;transform: scale(1)}
}
@keyframes slideDown {from {opacity: 0;transform: translateY(-5px)}
to {opacity: 1;transform: translateY(0)}
}
.filter-actions {display: flex;justify-content: center;margin-top: var(--spacing-lg);border-top: 1px solid var(--color-border);padding-top: var(--spacing-lg)}
.sidebar {display: none}
/* ==========================================Content Area========================================== */.content-area {flex: 1;min-width: 0;contain: layout style}
.tab-content {display: none;content-visibility: auto;contain-intrinsic-size: 0 500px}
.tab-content.active {display: block;content-visibility: visible;contain: layout style;min-height: 600px}
.tab-content h2 {font-size: var(--font-size-2xl);font-weight: 600;margin-bottom: var(--spacing-lg);color: var(--color-text)}
/* ==========================================Buttons========================================== */.btn {display: inline-flex;align-items: center;justify-content: center;padding: var(--spacing-sm) var(--spacing-md);border-radius: var(--radius-md);font-weight: 500;transition: all var(--transition-fast)}
.btn-primary {background: var(--color-primary);color: white}
.btn-primary:hover {background: var(--color-primary-dark)}
.btn-secondary {background: var(--color-surface-alt);color: var(--color-text);width: 100%}
.btn-secondary:hover {background: var(--color-border)}
.toggle-group {display: flex;align-items: center;gap: var(--spacing-sm)}
.toggle-group label {font-size: var(--font-size-sm);color: var(--color-text-muted);font-weight: 500}
.toggle-btn {padding: var(--spacing-xs) var(--spacing-md);border-radius: var(--radius-md);font-size: var(--font-size-sm);font-weight: 500;color: var(--color-text-muted);background: var(--color-surface-alt);transition: all var(--transition-fast)}
.toggle-btn:hover {background: var(--color-border)}
.toggle-btn.active {background: var(--color-primary);color: white}
/* ==========================================Metrics Grid========================================== */.metrics-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: var(--spacing-lg);margin-bottom: var(--spacing-xl);min-height: 120px;contain: layout style paint}
.metric-card {background: var(--color-surface);border-radius: var(--radius-lg);padding: var(--spacing-lg);text-align: center;box-shadow: var(--shadow-sm);transition: box-shadow var(--transition-fast);min-height: 100px}
.metric-card:hover {box-shadow: var(--shadow-md)}
.metric-icon {font-size: var(--font-size-2xl);margin-bottom: var(--spacing-sm)}
.metric-value {font-size: var(--font-size-3xl);font-weight: 700;color: var(--color-primary);line-height: 1.2;font-variant-numeric: tabular-nums;min-height: 1.2em}
.metric-label {font-size: var(--font-size-sm);color: var(--color-text-muted);margin-top: var(--spacing-xs)}
/* ==========================================Charts========================================== */.charts-row {display: grid;grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));gap: var(--spacing-lg);margin-bottom: var(--spacing-lg);contain: layout style}
.chart-card {background: var(--color-surface);border-radius: var(--radius-lg);padding: var(--spacing-lg);box-shadow: var(--shadow-sm);min-height: 400px;contain: layout style}
.chart-card.full-width {grid-column: 1 / -1}
.chart-card h3 {font-size: var(--font-size-lg);font-weight: 600;margin-bottom: var(--spacing-md);color: var(--color-text)}
.chart-card canvas {width: 100% !important;max-height: 400px}
/* ==========================================Salary Section========================================== */.salary-toggles {display: flex;gap: var(--spacing-xl);margin-bottom: var(--spacing-lg);padding: var(--spacing-md);background: var(--color-surface);border-radius: var(--radius-lg);box-shadow: var(--shadow-sm)}
.salary-table-container {background: var(--color-surface);border-radius: var(--radius-lg);padding: var(--spacing-lg);box-shadow: var(--shadow-sm);margin-top: var(--spacing-lg)}
.salary-table-container h3 {font-size: var(--font-size-lg);font-weight: 600;margin-bottom: var(--spacing-md)}
.salary-table {font-size: var(--font-size-sm)}
.salary-table th,.salary-table td {padding: var(--spacing-sm) var(--spacing-md);text-align: left;border-bottom: 1px solid var(--color-border)}
.salary-table th {background: var(--color-surface-alt);font-weight: 600;color: var(--color-text-muted);text-transform: uppercase;font-size: var(--font-size-xs);letter-spacing: 0.05em}
.salary-table tbody tr:hover {background: var(--color-surface-alt)}
/* ==========================================Map Section========================================== */.map-controls {display: flex;gap: var(--spacing-xl);margin-bottom: var(--spacing-lg);padding: var(--spacing-md);background: var(--color-surface);border-radius: var(--radius-lg);box-shadow: var(--shadow-sm)}
.map-container {display: flex;gap: var(--spacing-lg);background: var(--color-surface);border-radius: var(--radius-lg);padding: var(--spacing-lg);box-shadow: var(--shadow-sm);margin-bottom: var(--spacing-lg)}
#france-map {flex: 1;min-height: var(--map-height-desktop);max-height: var(--map-height-desktop);background: var(--color-surface-alt);border-radius: var(--radius-md)}
.map-legend {width: 150px;flex-shrink: 0}
.map-legend h4 {font-size: var(--font-size-sm);font-weight: 600;margin-bottom: var(--spacing-sm)}
.comparison-panel {background: var(--color-surface);border-radius: var(--radius-lg);padding: var(--spacing-lg);box-shadow: var(--shadow-sm)}
.comparison-panel h3 {font-size: var(--font-size-lg);font-weight: 600;margin-bottom: var(--spacing-sm)}
.help-text {font-size: var(--font-size-sm);color: var(--color-text-muted);margin-bottom: var(--spacing-md)}
.comparison-cards {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: var(--spacing-md)}
/* ==========================================Sectors Section========================================== */#sector-treemap {min-height: 400px;background: var(--color-surface-alt);border-radius: var(--radius-md)}
.sector-details {background: var(--color-surface);border-radius: var(--radius-lg);padding: var(--spacing-lg);box-shadow: var(--shadow-sm);margin-top: var(--spacing-lg)}
.sector-details h3 {font-size: var(--font-size-lg);font-weight: 600;margin-bottom: var(--spacing-md)}
.data-table {font-size: var(--font-size-sm)}
.data-table th,.data-table td {padding: var(--spacing-sm) var(--spacing-md);text-align: left;border-bottom: 1px solid var(--color-border)}
.data-table td:first-child {white-space: normal;word-wrap: break-word}
.data-table th {background: var(--color-surface-alt);font-weight: 600;color: var(--color-text-muted)}
.data-table tbody tr:hover {background: var(--color-surface-alt)}
.sector-color-dot {display: inline-block;width: 12px;height: 12px;border-radius: 3px;margin-right: var(--spacing-xs);vertical-align: middle;flex-shrink: 0}
/* ==========================================Dossier Métiers========================================== */.intro-text {color: var(--color-text-muted);margin-bottom: var(--spacing-xl);font-size: var(--font-size-lg)}
.dossier-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: var(--spacing-lg)}
.dossier-card {background: var(--color-surface);border-radius: var(--radius-lg);padding: var(--spacing-lg);box-shadow: var(--shadow-sm);transition: box-shadow var(--transition-fast);display: flex;flex-direction: column;gap: var(--spacing-md)}
.dossier-card .btn-cta {margin-top: auto}
.dossier-card:hover {box-shadow: var(--shadow-md)}
.dossier-card h4 {font-size: var(--font-size-lg);font-weight: 600;margin-bottom: var(--spacing-md);color: var(--color-primary)}
.dossier-stats {display: grid;grid-template-columns: repeat(2, 1fr);gap: var(--spacing-md);margin-bottom: var(--spacing-md);padding: var(--spacing-md);background: var(--color-surface-alt);border-radius: var(--radius-md)}
.dossier-stat {text-align: center}
.dossier-stat-value {display: block;font-size: var(--font-size-xl);font-weight: 700;color: var(--color-text)}
.dossier-stat-label {font-size: var(--font-size-xs);color: var(--color-text-muted);text-transform: uppercase}
.dossier-salary {margin-bottom: var(--spacing-md)}
.dossier-salary h5 {font-size: var(--font-size-sm);font-weight: 600;margin-bottom: var(--spacing-xs);color: var(--color-text-muted)}
.salary-range {display: flex;align-items: center;gap: var(--spacing-md);font-size: var(--font-size-sm)}
.salary-bar {flex: 1;height: 8px;background: linear-gradient(to right, var(--color-success), var(--color-warning));border-radius: var(--radius-sm)}
.dossier-employers h5 {font-size: var(--font-size-sm);font-weight: 600;margin-bottom: var(--spacing-xs);color: var(--color-text-muted)}
.employer-tags {display: flex;flex-wrap: wrap;gap: var(--spacing-xs)}
.employer-tag {padding: var(--spacing-xs) var(--spacing-sm);background: var(--color-surface-alt);border-radius: var(--radius-sm);font-size: var(--font-size-xs);color: var(--color-text)}
/* ==========================================Footer========================================== */.footer {background: var(--color-surface);border-top: 1px solid var(--color-border);margin-top: var(--spacing-2xl)}
.footer-content {max-width: var(--max-content-width);margin: 0 auto;padding: var(--spacing-xl);display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;gap: var(--spacing-xl)}
.footer-brand {display: flex;align-items: center;gap: var(--spacing-md)}
.footer-logo {height: 100px;width: auto}
.footer-brand p {font-size: var(--font-size-sm);color: var(--color-text-muted);max-width: 200px}
.footer-info {flex: 1;text-align: center}
.data-attribution {font-size: var(--font-size-sm);color: var(--color-text-muted);line-height: 1.6}
.data-attribution a,.footer-info a {text-decoration: underline}
.footer-links {display: flex;gap: var(--spacing-md)}
.footer-links a {font-size: var(--font-size-sm);color: var(--color-text-muted)}
.footer-links a:hover {color: var(--color-primary)}
.footer-copyleft {font-size: var(--font-size-xs);color: var(--color-text-light);text-align: center;width: 100%;margin-top: var(--spacing-md);padding-top: var(--spacing-md);border-top: 1px solid var(--color-border)}
.footer-copyleft span {cursor: help}
.copyleft-symbol {display: inline-block;transform: scaleX(-1)}
/* ==========================================Mobile-First Responsive DesignBase = Mobile (<768px), enhance upwards========================================== */:root {--header-height: 60px;--sidebar-width: 100%}
.sidebar {display: none}
.mobile-filter-btn {display: flex}
.header-content {flex-wrap: wrap;gap: var(--spacing-sm);padding: var(--spacing-sm) var(--spacing-md)}
.logo {height: 40px}
.header-title h1 {font-size: var(--font-size-base)}
.header-title .subtitle {font-size: var(--font-size-xs)}
.data-source {display: none}
.nav-tabs {overflow-x: auto;justify-content: flex-start;padding: 0 var(--spacing-md);-webkit-overflow-scrolling: touch;scrollbar-width: none}
.nav-tabs::-webkit-scrollbar {display: none}
.tab-btn {padding: var(--spacing-md);min-height: 44px;white-space: nowrap;font-size: var(--font-size-sm)}
.main-content {flex-direction: column;padding: var(--spacing-md);gap: var(--spacing-md)}
.metrics-grid {grid-template-columns: repeat(2, 1fr);gap: var(--spacing-sm)}
.metric-card {padding: var(--spacing-md)}
.metric-value {font-size: var(--font-size-xl)}
.charts-row {grid-template-columns: 1fr;gap: var(--spacing-md)}
.chart-card {padding: var(--spacing-md);min-height: auto}
.chart-card canvas {max-height: 300px}
.salary-table-container {overflow-x: auto;-webkit-overflow-scrolling: touch}
.salary-table {min-width: 600px}
.salary-toggles {flex-direction: column;gap: var(--spacing-md);padding: var(--spacing-md)}
.map-container {flex-direction: column;padding: var(--spacing-md);position: static}
#france-map {min-height: var(--map-height-mobile);max-height: var(--map-height-mobile)}
.map-legend {position: static;width: 100%;margin-top: var(--spacing-md);background: var(--color-surface-alt);padding: var(--spacing-md);border-radius: var(--radius-md);box-shadow: none;min-height: 80px}
.dossier-grid {grid-template-columns: 1fr}
.footer-content {flex-direction: column;text-align: center;padding: var(--spacing-lg) var(--spacing-md);gap: var(--spacing-md)}
.footer-brand {flex-direction: column}
.footer-brand p {max-width: none}
.footer-links {flex-direction: column;align-items: center}
.footer-copyleft {margin-top: 0;padding-top: var(--spacing-sm);border-top: none}
.checkbox-group input[type="checkbox"] {width: 24px;height: 24px;min-width: 44px;min-height: 44px}
.checkbox-group label {min-height: 44px;padding: var(--spacing-sm) 0}
.btn,.toggle-btn {min-height: 44px;padding: var(--spacing-sm) var(--spacing-md)}
.pagination-btn {min-width: 44px;min-height: 44px}
/* ==========================================Tablet (768px - 1024px)========================================== */@media (min-width: 768px) {:root {--header-height: 70px}
.sidebar {display: none}
.mobile-filter-btn {display: flex}
.header-content {flex-wrap: nowrap;gap: var(--spacing-lg);padding: var(--spacing-md) var(--spacing-lg)}
.logo {height: 70px}
.header-title h1 {font-size: var(--font-size-lg)}
.data-source {display: flex}
.nav-tabs {justify-content: center;padding: 0 var(--spacing-lg)}
.main-content {padding: var(--spacing-lg);gap: var(--spacing-lg)}
.metrics-grid {grid-template-columns: repeat(4, 1fr)}
.charts-row {grid-template-columns: repeat(2, 1fr)}
.chart-card {min-height: 300px}
.chart-card canvas {max-height: 300px}
.salary-table-container {overflow-x: visible}
.salary-table {min-width: 0}
.salary-toggles {flex-direction: row;gap: var(--spacing-xl)}
.map-container {flex-direction: row;position: static}
#france-map {min-height: var(--map-height-tablet);max-height: var(--map-height-tablet)}
.map-legend {position: static;width: 150px;background: transparent;padding: 0;border-radius: 0;box-shadow: none}
.dossier-grid {grid-template-columns: repeat(2, 1fr)}
.footer-content {flex-direction: row;text-align: left;padding: var(--spacing-xl)}
.footer-brand {flex-direction: row}
.footer-brand p {max-width: 200px}
.footer-links {flex-direction: row;align-items: center}
.footer-copyleft {margin-top: var(--spacing-md);padding-top: var(--spacing-md);border-top: 1px solid var(--color-border)}
}
/* ==========================================Desktop (>1024px)========================================== */@media (min-width: 1024px) {:root {--header-height: 80px;--sidebar-width: 280px}
.sidebar {display: none}
.mobile-filter-btn {display: flex}
.main-content {flex-direction: column;padding: var(--spacing-xl);gap: var(--spacing-xl)}
.header-content {padding: var(--spacing-md) var(--spacing-xl);gap: var(--spacing-xl)}
.logo {height: 120px}
.header-title h1 {font-size: var(--font-size-xl)}
.nav-tabs {padding: 0 var(--spacing-xl)}
#france-map {min-height: var(--map-height-desktop);max-height: var(--map-height-desktop)}
.dossier-grid {grid-template-columns: repeat(auto-fit, minmax(350px, 1fr))}
}
/* ==========================================Utilities========================================== */.text-success {color: var(--color-success)}
.text-warning {color: var(--color-warning)}
.text-error {color: var(--color-error)}
.text-muted {color: var(--color-text-muted)}
.bg-success {background-color: var(--color-success)}
.bg-warning {background-color: var(--color-warning)}
.bg-error {background-color: var(--color-error)}
.font-bold {font-weight: 700}
.font-semibold {font-weight: 600}
.text-center {text-align: center}
.text-right {text-align: right}
.loading {display: flex;align-items: center;justify-content: center;min-height: 200px;color: var(--color-text-muted)}
body.loading .main-content {visibility: hidden}
body.loading .main-content::before {content: 'Chargement...';visibility: visible;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: var(--font-size-lg);color: var(--color-text-muted)}
.checkbox-group:empty::before,.skeleton-placeholder {content: '';display: block;height: 100%;min-height: 180px;background: linear-gradient(90deg,var(--color-surface-alt) 0%,var(--color-border) 50%,var(--color-surface-alt) 100%);background-size: 200% 100%;animation: skeleton-pulse 1.5s ease-in-out infinite;border-radius: var(--radius-sm)}
@keyframes skeleton-pulse {0% {background-position: 200% 0}
100% {background-position: -200% 0}
}
.stat-value:empty::before,.metric-value:empty::before {content: '---';opacity: 0.3}
.loading::after {content: '';width: 24px;height: 24px;border: 2px solid var(--color-border);border-top-color: var(--color-primary);border-radius: 50%;animation: spin 1s linear infinite;margin-left: var(--spacing-sm)}
@keyframes spin {to {transform: rotate(360deg)}
}
.tooltip {position: absolute;background: var(--color-text);color: white;padding: var(--spacing-sm) var(--spacing-md);border-radius: var(--radius-md);font-size: var(--font-size-sm);pointer-events: none;z-index: 1000;max-width: 250px;box-shadow: var(--shadow-lg)}
.tooltip::after {content: '';position: absolute;bottom: -6px;left: 50%;transform: translateX(-50%);border-width: 6px 6px 0;border-style: solid;border-color: var(--color-text) transparent transparent}
/* ==========================================Offers Modal========================================== */.offers-modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(4px);display: flex;align-items: center;justify-content: center;z-index: 2000;padding: var(--spacing-lg)}
.offers-modal-content {background: var(--color-surface);border-radius: var(--radius-xl);width: 100%;max-width: 1000px;max-height: 90vh;display: flex;flex-direction: column;box-shadow: var(--shadow-lg)}
.offers-modal-header {display: flex;justify-content: space-between;align-items: flex-start;padding: var(--spacing-lg);border-bottom: 1px solid var(--color-border)}
.offers-modal-header h2 {font-size: var(--font-size-xl);font-weight: 600;margin: 0}
.offers-modal-count {font-weight: 400;color: var(--color-primary);font-size: var(--font-size-lg)}
.offers-modal-context {display: block;font-size: var(--font-size-sm);color: var(--color-text-muted);margin-top: var(--spacing-xs)}
.offers-modal-close {background: none;border: none;font-size: 1.5rem;color: var(--color-text-muted);cursor: pointer;padding: var(--spacing-xs);line-height: 1;transition: color var(--transition-fast)}
.offers-modal-close:hover {color: var(--color-text)}
.offers-modal-body {flex: 1;overflow: hidden;display: flex;flex-direction: column;padding: var(--spacing-lg)}
.offers-modal-stats {display: flex;gap: var(--spacing-lg);margin-bottom: var(--spacing-md);font-size: var(--font-size-sm);color: var(--color-text-muted)}
.offers-modal-stats strong {color: var(--color-text)}
.offers-table-container {flex: 1;overflow-y: auto;border: 1px solid var(--color-border);border-radius: var(--radius-md)}
.offers-table {width: 100%;border-collapse: collapse;font-size: var(--font-size-sm);table-layout: fixed}
.offers-table th:nth-child(1),.offers-table td:nth-child(1) {width: 30%}
.offers-table th:nth-child(2),.offers-table td:nth-child(2) {width: 18%}
.offers-table th:nth-child(3),.offers-table td:nth-child(3) {width: 18%}
.offers-table th:nth-child(4),.offers-table td:nth-child(4) {width: 14%}
.offers-table th:nth-child(5),.offers-table td:nth-child(5) {width: 14%}
.offers-table th:nth-child(6),.offers-table td:nth-child(6) {width: 6%}
.offers-table th,.offers-table td {padding: var(--spacing-sm) var(--spacing-md);text-align: left;border-bottom: 1px solid var(--color-border);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.offers-table th {background: var(--color-surface-alt);font-weight: 600;color: var(--color-text-muted);text-transform: uppercase;font-size: var(--font-size-xs);letter-spacing: 0.05em;position: sticky;top: 0;z-index: 1}
.offers-table th.sortable {cursor: pointer;user-select: none;transition: background-color 0.15s ease}
.offers-table th.sortable:hover {background: var(--color-border)}
.offers-table th.sortable.sorted {color: var(--color-primary);background: var(--color-primary-light)10}
.offers-table th .sort-icon {font-size: 10px;opacity: 0.7}
.offers-table tbody tr:hover {background: var(--color-surface-alt)}
.offer-title {white-space: normal;line-height: 1.3}
.offer-title>span:last-child {display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.offer-family-badge {display: inline-block;padding: 2px 6px;border-radius: var(--radius-sm);font-size: var(--font-size-xs);font-weight: 500;margin-bottom: 4px}
.contract-badge {display: inline-block;padding: 2px 8px;background: var(--color-surface-alt);border-radius: var(--radius-sm);font-size: var(--font-size-xs);white-space: nowrap}
.offer-link {display: inline-block;padding: 4px 8px;background: var(--color-primary);color: white;border-radius: var(--radius-sm);font-size: var(--font-size-xs);font-weight: 500;text-align: center;white-space: nowrap;transition: background var(--transition-fast)}
.offers-table td:last-child {overflow: visible;text-align: center;padding: var(--spacing-xs)}
.offer-link:hover {background: var(--color-primary-dark);color: white}
.offers-modal-pagination {margin-top: var(--spacing-md)}
.pagination-controls {display: flex;justify-content: center;align-items: center;gap: var(--spacing-xs)}
.pagination-btn {padding: var(--spacing-xs) var(--spacing-sm);min-width: 36px;background: var(--color-surface);border: 1px solid var(--color-border);border-radius: var(--radius-sm);font-size: var(--font-size-sm);cursor: pointer;transition: all var(--transition-fast)}
.pagination-btn:hover:not(:disabled) {background: var(--color-surface-alt);border-color: var(--color-border-dark)}
.pagination-btn.active {background: var(--color-primary);border-color: var(--color-primary);color: white}
.pagination-btn:disabled {opacity: 0.5;cursor: not-allowed}
.pagination-ellipsis {padding: 0 var(--spacing-xs);color: var(--color-text-muted)}
.infinite-scroll-loading {display: flex;align-items: center;justify-content: center;gap: var(--spacing-sm);padding: var(--spacing-md);color: var(--color-text-muted);font-size: var(--font-size-sm)}
.loading-spinner {width: 16px;height: 16px;border: 2px solid var(--color-border);border-top-color: var(--color-primary);border-radius: 50%;animation: spin 0.8s linear infinite}
@keyframes spin {to {transform: rotate(360deg)}
}
.loaded-count {font-size: var(--font-size-xs);color: var(--color-text-muted)}
.btn-cta {display: flex;align-items: center;justify-content: center;gap: var(--spacing-sm);margin: var(--spacing-md) auto 0;padding: var(--spacing-sm) var(--spacing-lg);background: var(--color-primary);color: white;border: none;border-radius: var(--radius-md);font-size: var(--font-size-sm);font-weight: 500;cursor: pointer;transition: background var(--transition-fast);text-align: center}
.btn-cta:hover {background: var(--color-primary-dark)}
.btn-cta::before {content: ''}
/* ==========================================Logo Responsive Sizing========================================== */@media (max-width: 1024px) {.logo {height: 70px}
.footer-logo {height: 60px}
}
@media (max-width: 768px) {.logo {height: 50px;width: 50px;object-fit: cover;object-position: left}
.footer-logo {height: 40px;width: 40px;object-fit: cover;object-position: left}
.offers-modal-overlay {padding: var(--spacing-sm)}
.offers-modal-content {max-height: 95vh}
.offers-table th:nth-child(2),.offers-table td:nth-child(2),.offers-table th:nth-child(4),.offers-table td:nth-child(4),.offers-table th:nth-child(6),.offers-table td:nth-child(6) {display: none}
.offer-title {max-width: 150px}
}
/* ==========================================Count Badge (n=X) for cardinality display========================================== */.count-badge {font-size: var(--font-size-xs);font-weight: 400;color: var(--color-text-muted);margin-left: var(--spacing-xs)}
/* ==========================================Info Tooltip========================================== */.info-tooltip {cursor: help;font-size: var(--font-size-sm);color: var(--color-text-muted);margin-left: var(--spacing-xs)}
/* ==========================================PWA Components========================================== */.offline-indicator {position: fixed;top: var(--header-height);left: 0;right: 0;background: var(--color-warning);color: white;padding: var(--spacing-xs) var(--spacing-md);display: flex;align-items: center;justify-content: center;gap: var(--spacing-sm);font-size: var(--font-size-sm);font-weight: 500;z-index: 99;box-shadow: var(--shadow-sm)}
.offline-indicator[hidden] {display: none}
.offline-icon {font-size: var(--font-size-base)}
.mobile-filter-btn {position: fixed;top: auto;bottom: 24px;left: 50%;right: auto;transform: translateX(-50%);display: flex;align-items: center;gap: var(--spacing-sm);padding: var(--spacing-md) var(--spacing-lg);background: var(--color-primary);color: white;border: none;border-radius: 50px;font-size: var(--font-size-sm);font-weight: 600;box-shadow: var(--shadow-lg);cursor: pointer;z-index: 1000;transition: all var(--transition-fast)}
.mobile-filter-btn:hover {background: var(--color-primary-dark);transform: translateX(-50%) scale(1.05)}
.mobile-filter-btn:active {transform: translateX(-50%) scale(0.98)}
@media (min-width: 768px) {.mobile-filter-btn {top: 50%;right: var(--spacing-lg);bottom: auto;left: auto;transform: translateY(-50%)}
.mobile-filter-btn:hover {transform: translateY(-50%) scale(1.05)}
.mobile-filter-btn:active {transform: translateY(-50%) scale(0.98)}
}
/* ==========================================Bottom Sheet (Mobile Base)========================================== */.bottom-sheet {position: fixed;left: 0;right: 0;bottom: 0;z-index: 2001;background: var(--color-surface);border-radius: var(--radius-xl) var(--radius-xl) 0 0;box-shadow: var(--shadow-2xl);transition: transform var(--transition-normal);transform: translateY(100%);display: flex;flex-direction: column;max-height: 85vh}
.bottom-sheet.open {transform: translateY(0)}
.bottom-sheet[hidden] {display: none}
.bottom-sheet-header {padding: var(--spacing-md) var(--spacing-lg);border-bottom: 1px solid var(--color-border);display: flex;align-items: center;justify-content: space-between}
.bottom-sheet-header h3 {font-size: var(--font-size-lg);font-weight: 600;margin: 0}
.bottom-sheet-handle {position: absolute;top: 8px;left: 50%;transform: translateX(-50%);width: 40px;height: 4px;background: var(--color-border);border-radius: 2px}
.bottom-sheet-content {padding: var(--spacing-lg);overflow-y: auto;overscroll-behavior: contain;flex: 1}
.bottom-sheet-footer {padding: var(--spacing-md) var(--spacing-lg);border-top: 1px solid var(--color-border);display: flex;gap: var(--spacing-md);background: var(--color-surface)}
.bottom-sheet-footer .btn {flex: 1}
.bottom-sheet-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(2px);z-index: 2000;opacity: 0;transition: opacity var(--transition-normal);pointer-events: none}
.bottom-sheet-overlay.visible {opacity: 1;pointer-events: auto}
.bottom-sheet-overlay[hidden] {display: none}
@media (min-width: 1024px) {.bottom-sheet {top: 50%;right: 160px;left: auto;bottom: auto;max-width: 380px;max-height: 70vh;border-radius: var(--radius-xl);transform: translate(20px, -50%);opacity: 0;pointer-events: none;transition: transform var(--transition-normal), opacity var(--transition-normal)}
.bottom-sheet.open {transform: translate(0, -50%);opacity: 1;pointer-events: auto}
}
@media (min-width: 1280px) {.sidebar {display: none}
.mobile-filter-btn {display: flex}
.main-content {padding-left: var(--spacing-xl);padding-right: var(--spacing-xl)}
.content-area {width: 100%;max-width: 100%}
.bottom-sheet {max-width: 400px}
}
@media (min-width: 1536px) {.logo {height: 120px}
}
.update-toast {position: fixed;bottom: var(--spacing-lg);left: var(--spacing-lg);right: var(--spacing-lg);max-width: 400px;background: var(--color-text);color: white;border-radius: var(--radius-lg);padding: var(--spacing-md);display: flex;align-items: center;gap: var(--spacing-md);box-shadow: var(--shadow-lg);z-index: 300;opacity: 0;transform: translateY(100%);transition: all var(--transition-slow)}
.update-toast.visible {opacity: 1;transform: translateY(0)}
.update-toast[hidden] {display: none}
.update-toast-content {flex: 1;display: flex;align-items: center;gap: var(--spacing-sm)}
.update-toast-icon {display: flex;align-items: center;color: var(--color-primary)}
.update-toast-icon svg {flex-shrink: 0}
.update-toast-text {display: flex;flex-direction: column}
.update-toast-text strong {font-size: var(--font-size-sm)}
.update-toast-text span {font-size: var(--font-size-xs);opacity: 0.8}
.update-toast-btn {background: white;color: var(--color-text);border: none;padding: var(--spacing-sm) var(--spacing-md);border-radius: var(--radius-md);font-size: var(--font-size-sm);font-weight: 600;cursor: pointer;white-space: nowrap;transition: all var(--transition-fast)}
.update-toast-btn:hover {background: var(--color-surface-alt)}
.update-toast-dismiss {display: flex;align-items: center;justify-content: center;width: 32px;height: 32px;background: none;border: none;color: white;opacity: 0.6;cursor: pointer;transition: opacity var(--transition-fast)}
.update-toast-dismiss:hover {opacity: 1}
/* ==========================================Error Toast========================================== */.error-toast-container {position: fixed;top: calc(var(--header-height) + var(--spacing-md));right: var(--spacing-md);z-index: 1000;display: flex;flex-direction: column;gap: var(--spacing-sm);pointer-events: none}
.error-toast {display: flex;align-items: flex-start;gap: var(--spacing-sm);padding: var(--spacing-md);background: var(--color-surface);border-left: 4px solid var(--color-error);border-radius: var(--radius-md);box-shadow: var(--shadow-lg);max-width: 400px;pointer-events: auto;transform: translateX(120%);opacity: 0;transition: transform 0.3s ease, opacity 0.3s ease}
.error-toast.visible {transform: translateX(0);opacity: 1}
.error-toast.dismissing {transform: translateX(120%);opacity: 0}
.error-toast-icon {flex-shrink: 0;color: var(--color-error);line-height: 1}
.error-toast-content {flex: 1;min-width: 0}
.error-toast-content strong {display: block;color: var(--color-error);margin-bottom: var(--spacing-xs);font-size: var(--font-size-sm)}
.error-toast-content p {margin: 0;font-size: var(--font-size-sm);color: var(--color-text-muted);line-height: 1.4}
.error-toast-close {flex-shrink: 0;display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;background: none;border: none;color: var(--color-text-muted);cursor: pointer;border-radius: var(--radius-sm);transition: all var(--transition-fast)}
.error-toast-close:hover {background: var(--color-surface-alt);color: var(--color-text)}
@media (max-width: 767px) {.error-toast-container {top: calc(var(--header-height) + var(--spacing-sm));left: var(--spacing-sm);right: var(--spacing-sm)}
.error-toast {max-width: none;transform: translateY(-120%)}
.error-toast.visible {transform: translateY(0)}
.error-toast.dismissing {transform: translateY(-120%)}
}
@supports (padding: env(safe-area-inset-bottom)) {.bottom-sheet {padding-bottom: env(safe-area-inset-bottom)}
.update-toast {bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom));left: calc(var(--spacing-lg) + env(safe-area-inset-left));right: calc(var(--spacing-lg) + env(safe-area-inset-right))}
}
@media (min-width: 768px) {.update-toast {left: 50%;right: auto;transform: translateX(-50%) translateY(100%)}
.update-toast.visible {transform: translateX(-50%) translateY(0)}
}
/* ==========================================Multi-Select Dropdown Styles========================================== */.multi-select-container {position: relative;margin-bottom: var(--spacing-sm)}
.multi-select-trigger {width: 100%;padding: 10px 16px;background: var(--color-surface);border: 1px solid var(--color-border);border-radius: 50px;text-align: left;cursor: pointer;display: flex;justify-content: space-between;align-items: center;transition: all var(--transition-fast)}
.multi-select-trigger:after {content: '';width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid var(--color-text-muted)}
.filter-dropdown-menu {position: absolute;top: calc(100% + 4px);left: 0;right: 0;background: var(--color-surface);border: 1px solid var(--color-border);border-radius: var(--radius-md);box-shadow: var(--shadow-lg);max-height: 300px;overflow-y: auto;z-index: 100;display: none;animation: slideDown 0.15s ease}
.filter-dropdown-menu.active {display: block}
.filter-dropdown-item {display: flex;align-items: center;gap: var(--spacing-sm);padding: var(--spacing-sm) var(--spacing-md);cursor: pointer;transition: background var(--transition-fast);color: var(--color-text);font-size: var(--font-size-sm);user-select: none}
.filter-dropdown-item:hover {background: var(--color-surface-alt)}
.filter-dropdown-item input[type="checkbox"] {accent-color: var(--color-primary);width: 16px;height: 16px;cursor: pointer}
.filter-dropdown-group-header {display: flex;align-items: center;gap: var(--spacing-sm);padding: var(--spacing-sm) var(--spacing-md);cursor: pointer;user-select: none;background: var(--color-surface-alt);color: var(--color-text);font-size: var(--font-size-sm);font-weight: 600}
.filter-dropdown-group-header:hover {background: var(--color-border)}
.filter-dropdown-group-header input[type="checkbox"] {accent-color: var(--color-primary);width: 16px;height: 16px;cursor: pointer}
.filter-chips {display: flex;flex-wrap: wrap;gap: var(--spacing-xs);margin-top: var(--spacing-xs);min-height: 0}
.filter-chip {display: inline-flex;align-items: center;gap: 4px;padding: 4px 10px;background: var(--color-primary-light);color: var(--color-primary);border-radius: 50px;font-size: var(--font-size-xs);font-weight: 500}
.filter-chip-remove {background: none;border: none;color: var(--color-primary);cursor: pointer;font-size: 14px;line-height: 1;padding: 0;display: flex;align-items: center;justify-content: center}
.filter-chip-remove:hover {color: var(--color-primary-dark)}