/* =====================================================
   THEME — couche d'homogénéité (thème clair tricolore)
   Chargée en DERNIER sur chaque page (après tokens.css, la feuille de la page
   et ses styles inline) : fond, en-tête, barres latérales, onglets, cartes,
   formulaires et listes déroulantes identiques sur toutes les pages.
   Blanc = fonds et cartes · Bleu = texte, navigation, données · Rouge = action, actif.
   ===================================================== */

/* ---------- Page ---------- */
html body {
    background: var(--bg-base);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}
body ::selection { background: rgba(47, 94, 168, 0.18); color: var(--ink); }
body :focus-visible { outline-color: var(--brand-blue); }

/* Calques d'ambiance de l'ancien thème sombre : retirés */
body .bg-layer, body .bg-noise, body .bg-vignette, body .bg-gradient, body .court-lines { display: none !important; }

/* ---------- En-têtes (pages d'app + accueil) ---------- */
body .app-header,
body .perf-header,
body .site-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--border-mid);
    box-shadow: 0 1px 0 rgba(22, 41, 77, 0.03), 0 6px 18px rgba(22, 41, 77, 0.05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body .app-header::before, body .perf-header::before, body .site-header::before { display: none; }
/* Filet tricolore sous l'en-tête : la signature de toutes les pages */
body .app-header::after, body .perf-header::after, body .site-header::after {
    content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--tricolor); opacity: 1; z-index: 1; pointer-events: none;
}
body .app-logo, body .perf-header .app-logo {
    background: var(--brand-red);
    border: 0;
    color: #FFFFFF;
    filter: none;
    box-shadow: 0 4px 12px rgba(213, 43, 30, 0.22);
    animation: none;
}
body .app-logo i { color: #FFFFFF; }
body .app-title { color: var(--ink); text-shadow: none; }
body .app-subtitle { color: var(--text-dim); }

body .user-info,
body .btn-back,
body .user-chip,
body .btn-logout {
    background: #FFFFFF;
    border: 1px solid var(--border-mid);
    color: var(--text-mid);
    box-shadow: none;
    backdrop-filter: none;
}
body .status-indicator { background: var(--color-success); }

/* ---------- Barre latérale repliable (analyse) ---------- */
body .perf-sidebar {
    background: #FFFFFF;
    border-right: 1px solid var(--border-mid);
    box-shadow: 4px 0 18px rgba(22, 41, 77, 0.05);
    backdrop-filter: none;
}
body .perf-sidebar__section { color: var(--text-dim); }
body .perf-sidebar__toggle { color: var(--text-mid); background: transparent; }
body .perf-sidebar__toggle:hover { color: var(--brand-navy); background: var(--surface-2); }
body .perf-nav-item { color: var(--text-mid); }
body .perf-nav-item__icon { color: var(--brand-navy); background: transparent; }
body .perf-nav-item__title { color: var(--ink); }
body .perf-nav-item__desc { color: var(--text-dim); }
body .perf-nav-item:hover { background: var(--brand-blue-bg); }
body .perf-nav-item.is-active { background: var(--brand-blue-bg); }
body .perf-nav-item.is-active .perf-nav-item__icon { color: var(--brand-navy); }
body .perf-nav-item.is-active .perf-nav-item__indicator { background: var(--brand-red); box-shadow: none; }
body .perf-nav-item__tooltip { background: var(--ink); color: #FFFFFF; border: 0; }

/* ---------- Barre latérale de collecte ---------- */
body .app-sidebar {
    background: #FFFFFF;
    border: 1px solid var(--border-mid);
    box-shadow: var(--shadow-sm);
}
body .sidebar-title { color: var(--ink); }
body .sidebar-subtitle { color: var(--text-dim); }
body .sidebar-nav__item { color: var(--text-mid); }
body .sidebar-nav__item:hover { background: var(--brand-blue-bg); color: var(--brand-navy); }
body .sidebar-nav__item.active, body .sidebar-nav__item.is-active { background: var(--brand-blue-bg); color: var(--brand-navy); border-color: transparent; box-shadow: inset 3px 0 0 var(--brand-red); }
body .sidebar-nav__icon { color: inherit; }

/* ---------- Cartes / panneaux : blanc, bord fin, ombre douce ---------- */
body .card, body .panel, body .sc-card, body .chart-container, body .metric-card, body .kpi-card,
body .quadrant-card, body .player-profile, body .data-table-container, body .form-section,
body .pulse, body .mod, body .quick-col, body .sc-kpis, body .pc, body .hub-team, body .hub-opp,
body .sel-card, body .selector-group, body .table-container, body .sc-ai {
    background: #FFFFFF;
    border-color: var(--border-mid);
    box-shadow: var(--shadow-sm);
}
body .card-header { background: transparent; border-bottom-color: var(--border-subtle); }
body .card-title, body .chart-title, body .panel-head h2, body .sc-card h2 { color: var(--ink); }

/* ---------- Onglets : actif = teinte bleue + filet rouge (le rouge plein est réservé à l'action) ---------- */
body .tabs-container, body .sc-tabs, body .tab-switcher {
    background: #FFFFFF;
    border: 1px solid var(--border-mid);
    box-shadow: var(--shadow-sm);
}
body .tab-btn, body .sc-tab, body .tab-switcher-button { color: var(--text-mid); background: transparent; }
body .tab-btn:hover, body .sc-tab:hover, body .tab-switcher-button:hover { color: var(--brand-navy); background: var(--brand-blue-bg); }
body .tab-btn.active, body .tab-btn.is-active, body .tab-btn[aria-selected="true"],
body .sc-tab[aria-selected="true"],
body .tab-switcher-button.active {
    background: var(--brand-blue-bg);
    color: var(--brand-navy);
    box-shadow: inset 0 -2px 0 var(--brand-red);
}
body .tab-btn.active *, body .sc-tab[aria-selected="true"] *, body .tab-switcher-button.active * { color: var(--brand-navy); }
body:has(> .sc-main) .sc-tabs .sc-tab[aria-selected="true"] { background: var(--brand-blue-bg); color: var(--brand-navy); }
body .sc-tab .n { background: var(--surface-3); color: var(--text-mid); }
body .sc-tab[aria-selected="true"] .n { background: rgba(0, 39, 118, 0.12); color: var(--brand-navy); }
body .tab-btn.active::after, body .tab-btn.active::before { display: none; }

/* ---------- Boutons : UN SEUL STYLE pour toutes les pages ----------
   Forme commune (modèle : bouton du Planner) : 38 px de haut, arrondi 8 px,
   Overpass 600 13 px, bordure 1 px, pas de dégradé, pas de soulèvement au survol.
   Variantes : principal (rouge plein) · secondaire (blanc, bordure) ·
   discret (sans fond) · danger (contour rouge). Les bascules (vues, sources,
   modes) suivent le style des onglets : actif = teinte bleue + filet rouge. */
body .btn, body .sc-btn, body .pl-btn, body .ac-btn, body .pc-btn, body .export-btn,
body .btn-back, body .btn-logout, body .btn-ghost, body .btn-light, body .btn-outline,
body .cmdk-trigger, body .ai-trigger-btn, body .ai-regen-btn, body .btn-validate-sprint, body .btn-login {
    align-items: center; justify-content: center; gap: 8px;
    min-height: 38px; padding: 0 16px;
    border-radius: 8px; border: 1px solid var(--border-strong);
    background: #FFFFFF; background-image: none;
    color: var(--ink);
    font: 600 13px/1 var(--font-ui);
    letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
    box-shadow: none; filter: none; backdrop-filter: none; transform: none;
    cursor: pointer;
    transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;
}
/* Liens présentés en bouton : boîte flexible pour que hauteur et centrage s'appliquent */
body a.btn, body a.sc-btn, body a.pl-btn, body a.ac-btn, body a.export-btn,
body a.btn-back, body a.btn-logout, body a.btn-ghost, body a.btn-login { display: inline-flex; }
body .btn i, body .sc-btn i, body .pl-btn i, body .ac-btn i, body .export-btn i,
body .btn-back i, body .btn-logout i, body .btn-ghost i { font-size: 13px; }

/* Secondaire (par défaut) : survol bleu pâle */
body .btn:hover, body .sc-btn:hover, body .pl-btn:hover, body .ac-btn:hover, body .pc-btn:hover, body .export-btn:hover,
body .btn-back:hover, body .btn-logout:hover, body .btn-ghost:hover, body .btn-light:hover, body .btn-outline:hover,
body .btn-secondary:hover, body .btn-info:hover, body .btn-warning:hover, body .cmdk-trigger:hover, body .ai-regen-btn:hover {
    background: var(--brand-blue-bg); border-color: rgba(0, 39, 118, 0.35); color: var(--brand-navy);
    transform: none; box-shadow: none;
}
body .btn:active, body .sc-btn:active, body .pl-btn:active, body .ac-btn:active, body .pc-btn:active, body .export-btn:active,
body .btn-back:active, body .btn-logout:active, body .btn-ghost:active {
    transform: none !important; background-color: #E2EAF6;
}
body .btn-secondary, body .btn-info, body .btn-warning, body .sc-btn--ai {
    background: #FFFFFF; background-image: none; border-color: var(--border-strong); color: var(--ink); box-shadow: none;
}
body .sc-btn--ai i, body .btn-info i { color: var(--brand-blue); }
body .sc-btn--ai:hover { background: var(--brand-blue-bg); border-color: rgba(0, 39, 118, 0.35); color: var(--brand-navy); filter: none; }
body .btn.btn-info *, body .btn.btn-warning * { color: inherit; }
body .cmdk-trigger { color: var(--text-mid); font-weight: 500; padding: 0 8px 0 12px; }

/* Principal : rouge plein — enregistrer, créer, valider, se connecter */
body .btn.btn-primary, body .btn.btn-success, body .sc-btn.sc-btn--primary, body .pl-btn.pl-btn--primary,
body .ac-btn.ac-btn--primary, body .pc-btn.pc-btn--add, body .export-btn.primary,
body .ai-trigger-btn, body .btn-validate-sprint, body .btn-login {
    background: var(--brand-red); background-image: none; border-color: var(--brand-red); color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(213, 43, 30, 0.20);
}
body .btn.btn-primary:hover, body .btn.btn-success:hover, body .sc-btn.sc-btn--primary:hover, body .pl-btn.pl-btn--primary:hover,
body .ac-btn.ac-btn--primary:hover, body .pc-btn.pc-btn--add:hover, body .export-btn.primary:hover,
body .ai-trigger-btn:hover, body .btn-validate-sprint:hover:not(:disabled), body .btn-login:hover {
    background: var(--brand-red-dk); border-color: var(--brand-red-dk); color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(213, 43, 30, 0.20); transform: none;
}
body .btn.btn-primary *, body .btn.btn-success *, body .sc-btn.sc-btn--primary *, body .pl-btn.pl-btn--primary *,
body .ac-btn.ac-btn--primary *, body .pc-btn.pc-btn--add *, body .ai-trigger-btn *, body .btn-validate-sprint * { color: #FFFFFF; }
body .btn-login { min-height: 48px; }
/* Passage déjà validé : c'est un état (vert), plus une action */
body .btn-validate-sprint.validated, body .btn-validate-sprint.validated:hover:not(:disabled) {
    background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); box-shadow: none;
}
body .btn-validate-sprint.validated * { color: var(--color-success); }

/* Danger : contour rouge — supprimer, retirer */
body .btn.btn-danger, body .sc-btn.sc-btn--danger, body .pl-btn.pl-btn--danger {
    background: #FFFFFF; background-image: none; border-color: var(--color-error-border); color: var(--brand-red-txt); box-shadow: none;
}
body .btn.btn-danger:hover, body .sc-btn.sc-btn--danger:hover, body .pl-btn.pl-btn--danger:hover {
    background: var(--brand-red-bg); border-color: rgba(213, 43, 30, 0.45); color: var(--brand-red-txt);
}
body .btn.btn-danger * { color: inherit; }

/* Discret : sans fond ni bordure */
body .pl-btn.pl-btn--quiet { background: transparent; border-color: transparent; color: var(--text-mid); }
body .pl-btn.pl-btn--quiet:hover { background: var(--brand-blue-bg); color: var(--brand-navy); }

/* Tailles */
body .btn.btn-sm, body .pl-btn.pl-btn--sm, body .sc-btn.sc-btn--sm, body .pc-btn, body .ai-regen-btn {
    min-height: 30px; padding: 0 10px; font-size: 12px;
}
body .btn.btn-lg { min-height: 44px; padding: 0 22px; font-size: 14px; }
body .pl-btn.pl-btn--icon, body .sc-btn.sc-btn--icon, body .btn.btn-icon { width: 38px; padding: 0; }
body .pl-btn.pl-btn--sm.pl-btn--icon { width: 30px; }

/* Désactivé */
body .btn:disabled, body .sc-btn:disabled, body .pl-btn:disabled, body .ac-btn:disabled, body .pc-btn:disabled,
body .export-btn:disabled, body .ai-trigger-btn:disabled, body .btn-validate-sprint:disabled, body .btn-login:disabled,
body .export-btn[aria-disabled="true"], body .pl-btn[aria-disabled="true"] {
    opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Focus clavier identique partout */
body .btn:focus-visible, body .sc-btn:focus-visible, body .pl-btn:focus-visible, body .ac-btn:focus-visible,
body .pc-btn:focus-visible, body .export-btn:focus-visible, body .btn-back:focus-visible, body .btn-logout:focus-visible,
body .btn-ghost:focus-visible, body .cmdk-trigger:focus-visible, body .ai-trigger-btn:focus-visible,
body .btn-validate-sprint:focus-visible, body .btn-login:focus-visible, body .view-btn:focus-visible,
body .src-btn:focus-visible, body .mode-pill-btn:focus-visible, body .view-switch a:focus-visible, body .chart-legend-btn:focus-visible {
    outline: 2px solid var(--brand-blue); outline-offset: 2px;
}

/* Bascules (vues, sources, modes) : même langage que les onglets */
body .view-btn, body .src-btn, body .mode-pill-btn, body .view-switch a {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 32px; padding: 0 12px;
    border-radius: 8px; border: 1px solid var(--border-mid);
    background: #FFFFFF; color: var(--text-mid);
    font: 600 12.5px/1 var(--font-ui); letter-spacing: 0;
    box-shadow: none; cursor: pointer;
    transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
body .mode-pill-btn, body .view-switch a { border-color: transparent; background: transparent; min-height: 28px; }
body .view-btn:hover, body .src-btn:hover, body .mode-pill-btn:not(.active):hover, body .view-switch a:hover {
    background: var(--brand-blue-bg); color: var(--brand-navy);
}
body .pl-seg button:hover, body .sc-seg button:hover { background: var(--brand-blue-bg); color: var(--brand-navy); }
body .pl-seg button[aria-pressed="true"], body .sc-seg button[aria-pressed="true"], body .pl-pill[aria-pressed="true"],
body .view-btn.active, body .src-btn.active, body .mode-pill-btn.active, body .view-switch a[aria-current="page"] {
    background: var(--brand-blue-bg); border-color: rgba(0, 39, 118, 0.35); color: var(--brand-navy);
    box-shadow: inset 0 -2px 0 var(--brand-red);
}

/* Bouton rond de légende des graphiques */
body .chart-legend-btn {
    background: #FFFFFF; border: 1px solid var(--border-strong); color: var(--text-mid); box-shadow: var(--shadow-sm);
}
body .chart-legend-btn:hover { background: var(--brand-blue-bg); border-color: rgba(0, 39, 118, 0.35); color: var(--brand-navy); }

/* Liens d'action (« Ouvrir le Planner → », « Importer → ») */
body .pulse-cta, body .card-header__action { color: var(--brand-blue); font-weight: 600; }
body .pulse-cta:hover, body .card-header__action:hover { color: var(--brand-navy); text-decoration: underline; text-underline-offset: 3px; }

/* Cibles tactiles : 44 px minimum sur écran tactile */
@media (pointer: coarse) {
    body .btn, body .sc-btn, body .pl-btn, body .ac-btn, body .export-btn, body .btn-back, body .btn-logout,
    body .btn-ghost, body .ai-trigger-btn, body .btn-validate-sprint, body .view-btn, body .src-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    body .btn, body .sc-btn, body .pl-btn, body .ac-btn, body .export-btn, body .view-btn, body .src-btn { transition: none; }
}

/* ---------- Formulaires ---------- */
body .form-control, body .sc-input, body .sc-select, body .sc-search input, body textarea.form-control,
body .form-group input, body .form-group select, body .form-group textarea {
    background: #FFFFFF !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink) !important;
}
body .form-control:focus, body .sc-input:focus, body .sc-select:focus, body .sc-search input:focus,
body .form-group input:focus, body .form-group select:focus, body .form-group textarea:focus {
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 3px rgba(47, 94, 168, 0.15) !important;
    outline: none;
}
body input::placeholder, body textarea::placeholder { color: var(--text-dim); }
body select option { color: var(--ink); }
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--brand-blue); }
body label, body .form-group label, body .sc-label { color: var(--text-mid); }

/* ---------- Select2 (thème par défaut, version claire) ---------- */
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
    background: #FFFFFF;
    border: 1px solid var(--border-strong);
    box-shadow: none;
}
body .select2-container--default .select2-selection--single:hover,
body .select2-container--default .select2-selection--multiple:hover { border-color: rgba(47, 94, 168, 0.5); background: #FFFFFF; }
body .select2-container--open .select2-selection--single,
body .select2-container--focus .select2-selection--multiple { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(47, 94, 168, 0.15); }
body .select2-container--default .select2-selection--single .select2-selection__rendered,
body .select2-container--default .select2-selection--multiple .select2-selection__rendered { color: var(--ink); }
body .select2-container--default .select2-selection--single .select2-selection__placeholder,
body .select2-container--default .select2-selection--multiple .select2-search__field::placeholder { color: var(--text-dim); }
body .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--text-mid); }
body .select2-dropdown {
    background: #FFFFFF;
    border: 1px solid var(--border-mid);
    box-shadow: var(--shadow-lg);
}
body .select2-search--dropdown .select2-search__field {
    background: #FFFFFF; border: 1px solid var(--border-strong); color: var(--ink);
}
body .select2-results__option { color: var(--ink); background: transparent; }
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
body .select2-results__option--highlighted { background: var(--brand-blue-bg); color: var(--brand-navy); }
body .select2-container--default .select2-results__option[aria-selected="true"],
body .select2-container--default .select2-results__option--selected { background: var(--brand-blue); color: #FFFFFF; }
body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--brand-blue-bg); border: 1px solid rgba(47, 94, 168, 0.3); color: var(--brand-navy);
}
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--brand-navy); }
body .select2-container--default .select2-results__group { color: var(--text-dim); }

/* ---------- Tableaux ---------- */
body table th { color: var(--text-mid); }
body table td { color: var(--ink); }
body .table thead th, body .sc-table th { border-bottom-color: var(--border-mid); }

/* ---------- Analyse de match : jetons du module en clair ---------- */
body:has(> .sc-main) {
    --sc-bg-top: var(--bg-base);
    --sc-bg-bottom: var(--bg-base);
    --sc-surface: #FFFFFF;
    --sc-surface-2: #F3F6FB;
    --sc-surface-3: #E7EEF8;
    --sc-line: rgba(22, 41, 77, 0.22);
    --sc-line-soft: rgba(22, 41, 77, 0.12);
    --sc-ink-mid: var(--text-mid);
    --sc-ink-dim: var(--text-dim);
    --sc-link: var(--brand-blue);
    --sc-overlay: rgba(22, 41, 77, 0.45);
    background: var(--bg-base);
}

/* ---------- Pastilles « vs », drapeaux et avatars ---------- */
body .avatar { background: var(--brand-blue-bg); color: var(--brand-navy); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--border-mid); }
body .avatar.is-bust { background: linear-gradient(180deg, #DCE7F5, #BFD3EC); }
body .portrait { background: linear-gradient(165deg, var(--brand-navy) 0%, var(--brand-blue) 70%); box-shadow: var(--shadow-md); }
body .portrait::after { background: linear-gradient(to top, rgba(0, 39, 118, 0.45), transparent); }
body .portrait__ini { color: #FFFFFF; }

/* ---------- Palette de commandes (Ctrl+K) ---------- */
body .cp-panel, body .command-palette, body [class*="cmdk"] { background: #FFFFFF; color: var(--ink); }

/* ---------- Défilement ---------- */
body * { scrollbar-color: rgba(22, 41, 77, 0.25) transparent; }

/* ---------- Carte « prochain match » (aplat bleu marine) ---------- */
body .hub-next { background: linear-gradient(150deg, #002776 0%, #1A4E9E 100%); border: 0; box-shadow: var(--shadow-md); }
body .hub-next, body .hub-next * { color: #FFFFFF; }
body .hub-next__k, body .hub-next__when, body .hub-next__teams i { color: rgba(255, 255, 255, 0.82); }
body .hub-next:hover { background: linear-gradient(150deg, #001E5C 0%, #154590 100%); box-shadow: var(--shadow-lg); }

/* ---------- Listes d'aide / instructions : neutres (le rouge est réservé à l'action) ---------- */
body .info-list li { background: var(--surface-2); border-color: var(--border-subtle); color: var(--text-mid); }
body .info-list li b, body .info-list li strong { color: var(--ink); }
body .info-list h4 { color: var(--ink); }

/* ---------- Téléphones (iPhone, Android) ----------
   Vérifié sur iPhone SE / 15 Pro, Galaxy S9+, Pixel 7 (320 à 412 px).
   Chargé après les styles inline : s'impose aux onglets et en-têtes des pages. */
.mnav-burger, .mnav-backdrop { display: none; }
@media (prefers-reduced-motion: reduce) {
    body .perf-sidebar, body .mnav-backdrop { transition: none !important; }
}
@media (max-width: 768px) {
    /* En-tête : titre sur 2 lignes maximum, actions compactes */
    body .app-header .app-info, body .perf-header .app-info { min-width: 0; gap: 10px; flex: 1 1 auto; }
    body .app-header .app-info > div:last-child { min-width: 0; }
    body .app-title {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
        font-size: 16px; line-height: 1.15; overflow-wrap: normal; word-break: normal; hyphens: none;
    }
    body .app-logo, body .perf-header .app-logo { width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
    body .header-actions { gap: 6px; flex: 0 0 auto; }
    body .header-actions .user-info { display: none; }

    body .app-subtitle { display: none; }

    /* Barre latérale = tiroir à gauche, ouvert par le bouton ☰ (js/mobile_nav.js) */
    body .mnav-burger {
        display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
        width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 8px;
        border: 1px solid var(--border-subtle, #dfe2e7); background: #FFFFFF; color: var(--brand-navy, #002776);
        font-size: 17px; cursor: pointer;
    }
    body .mnav-burger:focus-visible { outline: 2px solid var(--brand-navy, #002776); outline-offset: 2px; }
    body .app-layout:has(.perf-sidebar) { padding-left: 16px; padding-right: 16px; }
    body .perf-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 1200;
        width: min(290px, 86vw); height: 100dvh; min-height: 0;
        flex-direction: column; background: #FFFFFF; backdrop-filter: none;
        box-shadow: 8px 0 32px rgba(0, 20, 60, 0.18);
        transform: translateX(-105%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
        visibility: hidden;
    }
    body.mnav-open .perf-sidebar { transform: none; visibility: visible; }
    body .perf-sidebar__toggle { display: none; }
    body .perf-sidebar__section {
        display: block; opacity: 1; height: auto; padding: 18px 20px 12px; text-align: left;
        border-bottom: 1px solid var(--border-subtle, #dfe2e7);
        border-top: 3px solid transparent; border-image: var(--tricolor) 1;
        border-image-slice: 1 0 0 0;
    }
    body .perf-sidebar__nav {
        display: block; flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0 24px;
    }
    body .perf-nav-item {
        display: flex; flex-direction: row; align-items: center; text-align: left;
        min-width: 0; height: auto; min-height: 52px; margin: 2px 8px; padding: 4px 8px 4px 0; gap: 4px;
    }
    body .perf-nav-item__icon { width: 44px; height: 44px; min-width: 44px; }
    body .perf-nav-item__content { opacity: 1; transform: none; white-space: normal; padding: 0; }
    body .perf-nav-item__title { font-size: 14px; line-height: 1.25; }
    body .perf-nav-item__desc { display: block; font-size: 11px; }
    body .perf-nav-item.is-active::after { left: 0; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
    body .perf-nav-item__tooltip { display: none; }
    body .mnav-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1150; background: rgba(0, 20, 60, 0.42);
        opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
    }
    body.mnav-open .mnav-backdrop { opacity: 1; pointer-events: auto; }
    body.mnav-open { overflow: hidden; }

    /* Onglets : défilent horizontalement au lieu de tronquer les libellés */
    body .tabs-container, body .sc-tabs, body .tab-switcher {
        overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    body .tabs-container::-webkit-scrollbar, body .sc-tabs::-webkit-scrollbar, body .tab-switcher::-webkit-scrollbar { display: none; }
    body .tab-btn, body .sc-tab, body .tab-switcher-button { flex: 1 0 auto; white-space: nowrap; }

    /* Zone principale : marges réduites, aucun bloc plus large que l'écran */
    body .main-container--padded, body .main-container--scroll { padding: 16px 0; }
    body .main-container > * { max-width: 100%; }
    body .sc-seg { flex-wrap: wrap; max-width: 100%; }
    body .sc-card-head { flex-wrap: wrap; }
    body .sc-filters { max-width: 100%; }
    body .section-title > div { min-width: 0; }
    body .section-title h2 { white-space: normal; overflow-wrap: anywhere; }
}
/* Petits téléphones : le bouton ☰ remplace la pastille du module, le titre garde toute la place */
@media (max-width: 480px) {
    body .app-header:has(.mnav-burger) .app-logo { display: none; }
    body .app-title { font-size: 15px; }
}