/* === Autocomplete, highlight carte, modal système, touch targets === */
        /* --- 14b. SEARCH AUTOCOMPLETE SUGGESTIONS --- */
        .search-suggestions {
            position: absolute;
            top: calc(100% + 0.5rem);
            left: 0;
            right: 0;
            background: #f8f9fd;
            border: 1px solid var(--border-color);
            border-radius: 1rem;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), var(--glass-shadow);
            z-index: 1000;
            max-height: 320px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(225, 29, 72, 0.35) transparent;
            padding: 0.5rem;
            display: none;
            flex-direction: column;
            gap: 0.25rem;
            animation: fadeInSuggestions 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .search-suggestions::-webkit-scrollbar {
            width: 6px;
        }

        .search-suggestions::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 999px;
            margin: 0.5rem 0;
        }

        .search-suggestions::-webkit-scrollbar-thumb {
            background: rgba(225, 29, 72, 0.3);
            border-radius: 999px;
            transition: background 0.2s ease;
        }

        .search-suggestions::-webkit-scrollbar-thumb:hover {
            background: rgba(225, 29, 72, 0.6);
        }

        .search-suggestions::-webkit-scrollbar-button {
            display: none;
            width: 0;
            height: 0;
        }

        [data-theme="dark"] .search-suggestions {
            background: #192236;
            border-color: rgba(255, 255, 255, 0.12);
        }

        @keyframes fadeInSuggestions {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .suggestion-item {
            display: flex;
            /* `safe center` keeps short dialogs centered but falls back to the
               top edge when a card is taller than the viewport. */
            align-items: safe center;
            justify-content: space-between;
            padding: 0.6rem 0.85rem;
            border-radius: 0.65rem;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            color: var(--text-primary);
        }

        .suggestion-item:hover {
            background: var(--bg-filter);
        }

        .suggestion-item.is-keyboard-active {
            background: var(--bg-filter);
            outline: 2px solid var(--accent);
            outline-offset: -2px;
        }

        .suggestion-left {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            min-width: 0;
        }

        .suggestion-title {
            font-size: 0.825rem;
            font-weight: 700;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .suggestion-desc {
            font-size: 0.7rem;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .suggestion-right {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-shrink: 0;
        }

        .suggestion-keys {
            display: flex;
            gap: 0.15rem;
        }

        .suggestion-key {
            font-family: monospace;
            font-size: 0.625rem;
            font-weight: 700;
            background: var(--bg-key);
            border: 1px solid var(--key-border);
            color: var(--key-text);
            padding: 0.1rem 0.3rem;
            border-radius: 0.25rem;
        }

        .suggestion-badge {
            font-size: 0.55rem;
            font-weight: 800;
            padding: 0.2rem 0.4rem;
            border-radius: 0.35rem;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .suggestion-no-results {
            padding: 1rem;
            text-align: center;
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 600;
        }

        /* --- 14c. TARGET CARD HIGHLIGHT ACTIVE --- */
        .shortcut-card.highlight-active {
            box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15), 0 16px 40px rgba(225, 29, 72, 0.08) !important;
            border-color: rgba(225, 29, 72, 0.4) !important;
            transform: translateY(-4px) !important;
            z-index: 50 !important;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }



        /* --- 15. SETTINGS BUTTON & USER SYSTEM MODAL --- */
        .brand-actions {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .settings-btn {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-primary);
            cursor: pointer;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: var(--shadow-sm);
        }

        .settings-btn:hover {
            background: var(--bg-filter);
            border-color: var(--accent);
            color: var(--accent);
            transform: rotate(45deg);
        }

        .settings-btn svg {
            width: 18px;
            height: 18px;
        }

        /* --- 15b. UX MOBILE: INCREASE TOUCH TARGETS (Min 48x48px) --- */
        .settings-btn,
        .theme-switch,
        .bottom-os-btn,
        .clear-search,
        .suggested-prev-btn,
        .suggested-next-btn {
            position: relative;
        }
        .settings-btn::before,
        .theme-switch::before,
        .bottom-os-btn::before,
        .clear-search::before,
        .suggested-prev-btn::before,
        .suggested-next-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 48px;
            min-height: 48px;
            width: 100%;
            height: 100%;
            z-index: 10;
        }

        .modal-overlay {
            position: fixed;
            inset: 0;
            background: var(--modal-scrim, rgba(15, 23, 42, 0.45));
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            opacity: 0;
            transition: opacity 160ms ease;
            /* Fond plein : les couches animées sous le dialogue ne traversent
               plus le voile et ne déclenchent pas de recalcul de flou. */
            /* SANS CECI, UN DIALOGUE PLUS HAUT QUE L'ÉCRAN EST INATTEIGNABLE.
               Le centrage vertical rogne alors le contenu des DEUX côtés, et
               rien ne défile : sur un portable posé à l'horizontale, le
               bouton « Valider » sortait déjà de l'écran.

               La marge, elle, est portée par la CARTE et non par ce fond.
               En padding ici, elle réduirait la largeur utile à 100 % − 40 px,
               et le détecteur — qui se veut plein cadre en « width: 100vw » —
               déborderait alors de l'écran en largeur. */
            overflow-y: auto;
        }

        body.has-modal {
            overflow: hidden;
        }

        .modal-overlay.is-visible {
            pointer-events: auto;
            opacity: 1;
            transition-duration: 220ms;
        }

        /* Surface de lecture stable au-dessus du voile plein. */
        /* LARGEUR — UNE SEULE RÈGLE, DE 320 px À 4K.

           « width: 90 % » perdait 10 % de chaque côté MÊME sur un téléphone
           de 320 px, là où chaque pixel compte, tout en laissant la carte
           s'étaler sur les grands écrans. On inverse : une marge FIXE et
           confortable (1,25 rem), puis un plafond. Étroit, la carte prend
           tout sauf ses marges ; large, elle s'arrête au plafond et se
           centre. Aucun palier à maintenir.

           « flex: none » est indispensable : dans un conteneur défilant,
           flexbox comprimerait la carte au lieu de laisser le fond défiler. */
        .modal-card {
            flex: none;
            margin: 1.25rem auto;
            background: var(--modal-surface, var(--bg-card));
            border: 1px solid var(--modal-border, var(--border-color));
            border-radius: 1.5rem;
            padding: 2.5rem 2rem;
            max-width: 480px;
            width: calc(100% - 2.5rem);
            box-shadow: var(--modal-shadow, var(--glass-shadow));
            text-align: center;
            /* Sortie courte, sans rebond ni animation de dimensions/flou. */
            transform: translateY(8px) scale(.98);
            transition: transform 160ms cubic-bezier(.4,0,1,1);
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        /* La carte des paramètres conserve sa bordure et son reflet propres.
           Le voile plein derrière elle fixe le contraste de son contenu. */
        #systemModal .modal-card {
            position: relative;
            background: rgba(255, 255, 255, 0.88);
            border-color: rgba(255, 255, 255, 0.65);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10), 0 2px 8px -2px rgba(0, 0, 0, 0.06),
                        inset 0 1px 1px rgba(255, 255, 255, 0.9);
        }

        [data-theme="dark"] #systemModal .modal-card {
            background: rgba(23, 30, 46, 0.90);
            border-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 2px 8px -2px rgba(0, 0, 0, 0.2),
                        inset 0 1px 1px rgba(255, 255, 255, 0.08);
        }

        #systemModal .modal-close-icon[hidden] {
            display: none !important;
        }

        /* A transient update notice must never cover actions inside a modal. */
        body.has-modal .pwa-update-banner {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translate(-50%, 10px);
        }

        .modal-overlay.is-visible .modal-card {
            transform: none;
            transition: transform 220ms cubic-bezier(.16,1,.3,1);
        }

        /* Une seule surface animée : pas de cascade sur les enfants ni
           de délai sur les boutons, formulaires et claviers. */
        .modal-card > * { flex-shrink: 0; }

        .modal-overlay.kb-motion-off,
        .modal-overlay.kb-motion-off .modal-card { transition: none; transform: none; }
        @media (prefers-reduced-motion: reduce) {
            .modal-overlay,
            .modal-overlay.is-visible,
            .modal-card,
            .modal-overlay.is-visible .modal-card {
                transform: none;
                transition: none;
            }
        }

        /* RÉGLAGES — PLUS ÉTROIT QUE LES AUTRES DIALOGUES.

           Son contenu est une COLONNE de petits réglages : deux langues, trois
           systèmes, un état, un bouton. À 480 px il s'étalait sur presque toute
           la largeur d'une fenêtre étroite, et les trois systèmes s'y
           retrouvaient si espacés qu'ils ne se lisaient plus comme un groupe.
           Resserré, l'ensemble se parcourt d'un seul regard. */
        #systemModal .modal-card {
            max-width: 25rem;
            padding: 2rem 1.6rem;
        }

        #systemModal .system-toggle-group {
            gap: 0.5rem;
        }

        #systemModal .system-toggle-btn {
            padding: 1rem 0.4rem;
        }

        /* --- PETITS ÉCRANS ------------------------------------------------
           En dessous de 400 px, la marge intérieure de 2 rem coûte plus
           qu'elle n'apporte : elle vole un quart de la largeur au contenu.
           On la réduit, sans jamais la supprimer — du texte collé au bord
           d'une carte se lit mal. */
        @media (max-width: 400px) {
            #systemModal {
                align-items: flex-start;
            }

            .modal-card {
                margin: 0.75rem auto;
                width: calc(100% - 1.5rem);
                padding: 1.75rem 1.25rem;
                border-radius: 1.15rem;
            }

            #systemModal .modal-card {
                padding: 1.6rem 1.1rem;
            }
        }

        /* --- ORDINATEUR : PLUS LARGE, DONC PLUS COURT ---------------------

           25 rem est la bonne largeur sur un téléphone, où elle occupe
           presque tout l'écran. Sur un ordinateur, la même carte devient une
           colonne étroite perdue au milieu du vide — et surtout, elle
           s'ALLONGE : « Système d'exploitation / Operating System » passe sur
           deux lignes, la description sur trois, et la carte finit par
           dépasser la hauteur de la fenêtre. Elle ne peut alors plus être
           centrée : elle défile.

           L'élargir la raccourcit donc, et c'est ce qui la ramène au centre.
           La largeur est le levier ; le centrage vertical en est le résultat. */
        @media (min-width: 600px) {
            #systemModal .modal-card {
                max-width: 32rem;
                padding: 2.25rem 2rem;
            }
        }

        @media (min-width: 1024px) {
            #systemModal .modal-card {
                max-width: 34rem;
            }
        }

        /* --- HAUTEURS CONTRAINTES ----------------------------------------
           Un portable ouvert dans une fenêtre non maximisée offre souvent
           moins de 800 px de haut. On resserre alors le rythme vertical
           plutôt que de laisser défiler : tout le dialogue tient à l'écran,
           et se lit d'un seul regard.

           Le défilement reste en place — c'est le filet, pas le plan. */
        @media (max-height: 820px) {
            .modal-card {
                margin: 0.85rem auto;
                padding-top: 1.75rem;
                padding-bottom: 1.75rem;
                gap: 0.9rem;
            }

            #systemModal .activation-state {
                margin-bottom: 0.85rem;
                padding: 0.7rem 0.85rem;
            }

            #systemModal .settings-group-label {
                margin-bottom: 0.35rem !important;
            }

            #systemModal .lang-toggle-group {
                margin-bottom: 0.85rem !important;
            }

            #systemModal .system-toggle-btn {
                padding: 0.8rem 0.4rem;
            }

            /* ESPACEMENT COMPTE DOUBLE — la vraie cause de la hauteur.
               La carte est une grille en « gap », et plusieurs de ses enfants
               portent EN PLUS leur propre marge basse : chaque separation
               etait donc payee deux fois. Sur 8 separations, cela faisait
               pres de 60 px pour rien, et c'est ce qui poussait le dialogue
               hors de l'ecran sur un portable de 720 px de haut. */
            #systemModal .modal-card {
                gap: 0.6rem;
            }

            #systemModal .activation-state,
            #systemModal .lang-toggle-group {
                margin-bottom: 0 !important;
            }

            #systemModal .system-toggle-group {
                margin: 0;
            }

            #systemModal .activation-logout {
                margin-top: 0.35rem;
            }
        }

        /* --- ÉCRANS TRÈS BAS (téléphone à l'horizontale) ------------------
           Ici la hauteur manque vraiment : on va au plus serré, et le
           défilement fait le reste. */
        @media (max-height: 620px) {
            .modal-card {
                margin: 0.6rem auto;
                padding-top: 1.35rem;
                padding-bottom: 1.35rem;
                gap: 0.75rem;
            }
        }

        .modal-title {
            font-size: 1.35rem;
            font-weight: 850;
            color: var(--text-primary);
            letter-spacing: -0.02em;
        }

        /* Le texte explicatif d'un dialogue n'est pas décoratif : il porte
           l'instruction. En « secondary » il descendait sous le seuil AA
           dès que la carte laissait passer la page. Le fond est désormais
           fiable, on peut donc appuyer le texte sans risque de le rendre
           criard. */
        .modal-desc {
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.55;
        }

        [data-theme="dark"] .modal-desc {
            color: #b6c2d4;
        }

        .system-toggle-group {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.75rem;
            margin: 0.5rem 0;
        }

        .system-toggle-btn {
            background: var(--bg-filter);
            border: 1px solid var(--border-color);
            border-radius: 1rem;
            padding: 1.25rem 0.5rem;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            color: var(--text-secondary);
        }

        .system-toggle-btn:hover {
            border-color: var(--accent);
            background: var(--accent-light);
            color: var(--text-primary);
            transform: translateY(-2px);
        }

        .system-toggle-btn.active {
            background: var(--accent);
            border-color: var(--accent-hover);
            color: #fff !important;
            box-shadow: 0 4px 14px rgba(244, 63, 94, 0.3);
        }

        .system-toggle-btn.active .system-icon,
        .system-toggle-btn.active .system-name {
            color: #fff !important;
        }

        .system-icon {
            font-size: 1.5rem;
            transition: color 0.25s ease;
        }

        .system-name {
            font-size: 0.8rem;
            font-weight: 700;
            transition: color 0.25s ease;
        }

        .modal-confirm-btn {
            background: var(--accent);
            color: #fff;
            border: none;
            border-radius: 0.75rem;
            padding: 0.85rem;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(244, 63, 94, 0.2);
        }

        .modal-confirm-btn:hover:not(:disabled) {
            background: var(--accent-hover);
            box-shadow: 0 6px 16px rgba(244, 63, 94, 0.35);
        }

        .modal-confirm-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: var(--text-tertiary);
            box-shadow: none;
            color: var(--text-secondary);
        }

/* Logos locaux et sélection de langue commune aux deux présentations. */
#systemModal img.system-icon { display:block; width:28px; height:28px; object-fit:contain; flex:none; }
[data-theme=dark] #systemModal img[src$="macos.png"],
#systemModal .system-toggle-btn.active img[src$="macos.png"],
#systemModal.sp-more-embedded img[src$="macos.png"] { filter:invert(1); }
#systemModal .lang-toggle-group { padding:4px; border:1px solid var(--border-color); border-radius:17px; background:var(--bg-filter); }
#systemModal .lang-toggle-btn { flex:1; min-width:0; min-height:44px; padding:8px 10px; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--text-secondary); font:inherit; font-size:13px; font-weight:650; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:background-color .2s ease,border-color .2s ease,color .2s ease; }
#systemModal .lang-toggle-btn.active { background:rgba(232,29,83,.16)!important; border-color:rgba(232,29,83,.52)!important; color:var(--accent)!important; }
#systemModal .settings-lang-code { display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:7px; background:var(--bg-card); font-size:9px; font-weight:750; letter-spacing:.03em; }
#systemModal .lang-toggle-btn.active .settings-lang-code { background:#df184b; color:#fff; }
#systemModal .lang-toggle-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(prefers-reduced-motion:reduce) { #systemModal .lang-toggle-btn { transition:none; } }
@media(forced-colors:active) { #systemModal .lang-toggle-btn.active { color:HighlightText!important; background:Highlight!important; border-color:Highlight!important; } #systemModal .settings-lang-code { background:Canvas; color:CanvasText; } }