/* === Barre mobile basse + responsive === */
        /* --- 12c. MOBILE BOTTOM BAR --- */
        .mobile-bottom-bar {
            position: fixed;
            bottom: 1.5rem;
            /* Centrage SANS transform (translateX casse le fixed sur certains
               navigateurs mobiles → la barre « décroche » au scroll). */
            left: 1rem;
            right: 1rem;
            margin-left: auto;
            margin-right: auto;
            width: auto;
            max-width: 400px;
            z-index: 100;
            display: none;
            padding: 0.5rem;
            border-radius: 2rem;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 -2px 10px rgba(0, 0, 0, 0.04);
            transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
        }
        .mobile-bottom-bar {
            background: #f8f9fd;
            border: 1px solid rgba(255, 255, 255, 0.5);
        }
        [data-theme="dark"] .mobile-bottom-bar {
            background: #192236;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4), 0 -2px 10px rgba(0, 0, 0, 0.2);
        }
        .bottom-os-grid {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Boutons dimensionnés à leur contenu (non étirés) + petit espacement :
               on récupère l'espace mort pour loger l'icône centrale sans rétrécir
               les filtres ni les serrer. */
            gap: 0.18rem;
            background: rgba(0, 0, 0, 0.05);
            padding: 0.25rem;
            border-radius: 1.8rem;
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
            transition: background-color 0.3s, border-color 0.3s;
        }
        [data-theme="dark"] .bottom-os-grid {
            background: rgba(20, 20, 22, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
        }
        .bottom-os-indicator {
            position: absolute;
            /* Hauteur alignée sur les boutons (38px), centrée verticalement.
               (La grille est plus haute à cause du FAB central : sans ça,
               l'indicateur serait trop haut → presque carré/rond.) */
            top: 50%;
            height: 38px;
            transform: translateY(-50%);
            /* Position et largeur pilotées par JS (positionBottomIndicator) pour
               suivre exactement le bouton actif malgré l'icône centrale. */
            left: 0;
            width: 0;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.04);
            /* Pilule : rayon = demi-hauteur → toujours ovale, jamais circulaire,
               même sur un bouton étroit (« Tous »). */
            border-radius: 999px;
            z-index: 1;
            transition: left 0.32s cubic-bezier(0.25, 1, 0.5, 1), width 0.32s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s, border-color 0.3s;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
        }
        [data-theme="dark"] .bottom-os-indicator {
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.06);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
        }
        .bottom-os-btn {
            position: relative;
            z-index: 2;
            flex: 0 0 auto;
            height: 38px;
            padding: 0 0.6rem;
            white-space: nowrap;
            border-radius: 999px;
            border: none;
            font-size: 0.72rem;
            font-weight: 600;
            background: transparent;
            color: #64748b;
            cursor: pointer;
            transition: color 0.25s ease, transform 0.1s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            outline: none;
            -webkit-tap-highlight-color: transparent;
        }
        [data-theme="dark"] .bottom-os-btn {
            color: #7ba4d9;
        }
        .bottom-os-btn:active {
            transform: scale(0.94);
        }
        .bottom-os-btn.active {
            color: #0f172a;
            font-weight: 700;
        }
        [data-theme="dark"] .bottom-os-btn.active {
            color: #ffffff;
        }

        /* ---- Feuille filtres système : ancrée juste au-dessus de la barre,
           masquée/révélée par le bouton « Filtres » de la barre. ---- */
        .bottom-filter-sheet {
            position: fixed;
            left: 1rem;
            right: 1rem;
            bottom: calc(1.5rem + 5.65rem);
            margin-left: auto;
            margin-right: auto;
            width: auto;
            max-width: 400px;
            z-index: 99;
            display: none;
            padding: 0.4rem;
            border-radius: 1.8rem;
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16), 0 -2px 10px rgba(0, 0, 0, 0.04);
            background: #f8f9fd;
            border: 1px solid rgba(255, 255, 255, 0.5);
            opacity: 0;
            transform: translateY(8px) scale(0.97);
            transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        [data-theme="dark"] .bottom-filter-sheet {
            background: #192236;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .bottom-filter-sheet.is-open {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        .bottom-filter-sheet .bottom-os-grid {
            justify-content: space-between;
        }
        .bottom-filter-sheet .bottom-os-btn {
            flex: 1 1 0;
        }

        /* ---- Barre de navigation rapide : 4 onglets égaux (icône + libellé) ---- */
        .bottom-nav-grid {
            position: relative;
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            gap: 0.2rem;
        }
        .bottom-nav-btn {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.2rem;
            padding: 0.4rem 0.2rem;
            border: none;
            background: transparent;
            border-radius: 1.2rem;
            color: #64748b;
            cursor: pointer;
            outline: none;
            -webkit-tap-highlight-color: transparent;
            transition: color 0.2s ease, background-color 0.2s ease, transform 0.1s ease;
        }
        [data-theme="dark"] .bottom-nav-btn {
            color: #7ba4d9;
        }
        .bottom-nav-btn:active {
            transform: scale(0.94);
        }
        .bottom-nav-btn.is-active,
        .bottom-nav-btn[aria-pressed="true"],
        .bottom-nav-btn[aria-expanded="true"] {
            color: var(--accent);
            background: var(--accent-light);
        }
        .bottom-nav-btn:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .bottom-nav-ico {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }
        .bottom-nav-label {
            font-size: 0.62rem;
            font-weight: 700;
            white-space: nowrap;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .bottom-nav-badge {
            position: absolute;
            top: 0;
            min-width: 15px;
            height: 15px;
            padding: 0 3px;
            border-radius: 999px;
            background: var(--accent);
            color: #fff;
            font-size: 0.55rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            box-shadow: 0 0 0 2px var(--bg-card, #fff);
        }

        /* Détecteur : icône conservée dans son écrin dégradé rouge — reste la
           fonctionnalité phare, visuellement distincte des 3 autres onglets. */
        /* PLUS GRAND QUE SES VOISINS, ET C'EST VOULU.
           Au centre de la barre, le Détecteur est le bouton phare : sa
           pastille passe de 30 à 38 px et remonte légèrement, ce qui la
           détache de la rangée sans la faire déborder. */
        .bottom-nav-btn-accent .bottom-nav-ico-wrap {
            width: 38px;
            height: 38px;
            margin-top: -6px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
            box-shadow: 0 3px 10px rgba(225, 29, 72, 0.38), 0 1px 3px rgba(0, 0, 0, 0.15);
            transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
        }
        [data-theme="dark"] .bottom-nav-btn-accent .bottom-nav-ico-wrap {
            background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
            box-shadow: 0 3px 12px rgba(251, 113, 133, 0.38), 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .bottom-nav-btn-accent .bottom-nav-ico {
            width: 21px;
            height: 21px;
            color: #fff;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
        }
        .bottom-nav-btn-accent .bottom-nav-label {
            color: var(--accent);
        }
        .bottom-nav-btn-accent:active .bottom-nav-ico-wrap {
            transform: scale(0.92);
        }
        .bottom-nav-btn-accent:hover .bottom-nav-ico-wrap {
            transform: translateY(-1px) scale(1.05);
        }

        /* Très petits écrans : resserre encore un peu pour tout faire tenir */
        @media (max-width: 344px) {
            .bottom-nav-btn { padding: 0.4rem 0.1rem; }
            .bottom-nav-label { font-size: 0.56rem; }
            .bottom-os-btn { padding: 0 0.4rem; }
            .bottom-os-grid { gap: 0.12rem; }
            .bottom-nav-btn-accent .bottom-nav-ico-wrap { width: 26px; height: 26px; }
        }

        /* --- 13. RESPONSIVE --- */
        @media (max-width: 1023px) {
            .mobile-bottom-bar {
                display: block;
            }
            body {
                padding-bottom: 6.5rem; /* Barre à onglets (icône + libellé) plus haute que l'ancienne pilule */
            }
            .back-to-top {
                bottom: 7.5rem; /* Augmenté pour éviter de chevaucher la barre flottante du bas */
            }
        }
        @media (max-width: 768px) {
            html {
                font-size: 17px; /* Augmente proportionnellement tous les textes, titres et boutons sur mobile pour une lisibilité accrue */
            }

            .hero-container {
                gap: 0.85rem; /* Réduit l'espacement externe global du bloc Hero */
                margin-bottom: 2rem;
            }

            .chart-hero-section {
                padding: 1.25rem 1rem; /* Réduit la marge interne du graphique */
                border-radius: 1.15rem;
            }

            .back-to-top {
                bottom: 7.5rem; /* Augmenté pour le mobile également */
                right: 1.5rem;
                width: 40px;
                height: 40px;
            }



            .os-filter-grid {
                margin-bottom: 1rem !important;
            }

            .sidebar {
                gap: 1.25rem !important;
            }
        }

        @media (min-width: 640px) {
            .shortcuts-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .container {
                padding: 0 2.5rem;
            }

            .brand-bar-inner {
                padding: 1rem 2.5rem;
            }

            .search-bar-wrapper {
                padding: 0.6rem 2.5rem;
            }

            .search-bar-wrapper.is-floating {
                padding: 0.75rem 3.5rem;
            }

        }

        @media (min-width: 1024px) {
            .content-grid {
                grid-template-columns: minmax(280px, 1fr) 2.5fr;
            }

            .sidebar {
                order: 0;
                position: sticky;
                top: 5rem;
                max-height: calc(100vh - 6rem);
                overflow-y: auto;
                overscroll-behavior: contain; /* le défilement reste local à la sidebar, ne remonte pas à la page */
                scrollbar-width: none; /* Firefox */
                -ms-overflow-style: none; /* IE/Edge */
                display: flex;
                flex-direction: column;
                align-items: stretch;
                align-self: start;
                -webkit-mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
                mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
            }

            /* Le fondu ne s'affiche que du côté où il reste du contenu à découvrir,
               pour ne pas estomper le premier/dernier élément quand tout est déjà visible. */
            .sidebar.at-top {
                -webkit-mask-image: linear-gradient(to bottom, black, black calc(100% - 20px), transparent);
                mask-image: linear-gradient(to bottom, black, black calc(100% - 20px), transparent);
            }

            .sidebar.at-bottom {
                -webkit-mask-image: linear-gradient(to bottom, transparent, black 20px, black);
                mask-image: linear-gradient(to bottom, transparent, black 20px, black);
            }

            .sidebar.at-top.at-bottom {
                -webkit-mask-image: none;
                mask-image: none;
            }

            .sidebar::-webkit-scrollbar {
                display: none; /* Chrome, Safari, Opera */
            }

            .main-area {
                order: 0;
                min-height: 100dvh;
            }

            .container {
                padding: 0 4rem;
            }

            .brand-bar-inner {
                padding: 1rem 4rem;
            }

            .search-bar-wrapper {
                padding: 0.6rem 4rem;
            }

            .search-bar-wrapper.is-floating {
                padding: 0.75rem 5rem;
            }

        }