:root {
            --app-bg: #eef0f3;
            --app-panel: #ffffff;
            --app-border: #e1e4e8;
            --app-text: #1f2328;
            --app-text-muted: #57606a;
            --app-accent: #2f5fdb;
            --app-accent-contrast: #ffffff;
            --app-shadow: 0 1px 3px rgba(20, 20, 30, 0.08);
        }
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) {
                --app-bg: #101216;
                --app-panel: #1a1d22;
                --app-border: #2c3037;
                --app-text: #ecedee;
                --app-text-muted: #9aa1ab;
                --app-accent: #6d93ff;
                --app-accent-contrast: #0b0d10;
                --app-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
            }
        }
        :root[data-theme="dark"] {
            --app-bg: #101216;
            --app-panel: #1a1d22;
            --app-border: #2c3037;
            --app-text: #ecedee;
            --app-text-muted: #9aa1ab;
            --app-accent: #6d93ff;
            --app-accent-contrast: #0b0d10;
            --app-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
        }

        * { box-sizing: border-box; }
        html, body {
            margin: 0;
            min-height: 100%;
            background: var(--app-bg);
            color: var(--app-text);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        body { display: flex; flex-direction: column; }

        a { color: var(--app-accent); text-decoration: none; }
        a:hover { text-decoration: underline; }

        header.app-header {
            position: sticky;
            top: 0;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 20px;
            background: var(--app-panel);
            border-bottom: 1px solid var(--app-border);
            box-shadow: var(--app-shadow);
        }
        .app-brand {
            display: flex;
            align-items: center;
            gap: 9px;
            font-weight: 800;
            font-size: 16px;
            letter-spacing: -0.2px;
            color: var(--app-text);
        }
        .app-brand .emoji { font-size: 20px; line-height: 1; }
        .app-brand small {
            display: block;
            font-size: 10.5px;
            font-weight: 600;
            color: var(--app-text-muted);
            letter-spacing: 0.2px;
        }

        nav.app-nav { display: flex; gap: 4px; flex-wrap: wrap; }
        .app-header-right { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 10px; }
        header.app-header { flex-wrap: wrap; }
        nav.app-nav a,
        nav.app-nav .nav-current {
            color: var(--app-text-muted);
            font-size: 13px;
            font-weight: 600;
            padding: 7px 12px;
            border-radius: 7px;
            text-decoration: none;
        }
        nav.app-nav a:hover { background: var(--app-bg); color: var(--app-text); }
        /* Page en cours : un <span> sans lien (ni clic, ni tabulation), pas un bouton qu'on peut encore activer. */
        nav.app-nav .nav-current {
            background: var(--app-accent);
            color: var(--app-accent-contrast);
            cursor: default;
            user-select: none;
        }
        /* Téléphone : l'en-tête ne reste plus collé en haut (il prenait ~130 px d'écran) et se compacte. */
        @media (max-width: 640px) {
            header.app-header { position: static; padding: 8px 12px; gap: 6px 10px; }
            .app-brand small { display: none; }
            .app-header-right { width: 100%; justify-content: space-between; gap: 6px 8px; }
            nav.app-nav a,
            nav.app-nav .nav-current { padding: 6px 9px; font-size: 12.5px; }
        }

        .theme-toggle {
            border: 1px solid var(--app-border);
            background: var(--app-bg);
            color: var(--app-text);
            border-radius: 999px;
            width: 30px;
            height: 30px;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .theme-toggle:hover { background: var(--app-accent); color: var(--app-accent-contrast); }

        .account-chip {
            display: flex; align-items: center; gap: 8px;
            font-size: 12.5px; color: var(--app-text-muted); white-space: nowrap;
        }
        .account-chip .account-name { color: var(--app-text); font-weight: 600; }
        .account-chip a, .account-login {
            color: var(--app-text-muted); text-decoration: none;
            border: 1px solid var(--app-border); border-radius: 7px; padding: 6px 10px; font-size: 12.5px;
        }
        .account-chip a:hover, .account-login:hover { background: var(--app-bg); color: var(--app-text); text-decoration: none; }
        .account-login { font-weight: 600; color: var(--app-accent) !important; }

        main.app-main { flex: 1 0 auto; }

        .app-flashes {
            max-width: 1080px;
            margin: 14px auto 0;
            padding: 0 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .app-flash {
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 13px;
            font-weight: 600;
            border: 1px solid var(--app-border);
            background: var(--app-panel);
            box-shadow: var(--app-shadow);
        }
        .app-flash.success { border-color: #1a9c4a; color: #14803c; }
        .app-flash.error   { border-color: #e03131; color: #c92a2a; }
        .app-flash.warning { border-color: #d9a441; color: #a86c00; }
        .app-flash.info    { border-color: var(--app-accent); color: var(--app-accent); }

        footer.app-footer {
            flex-shrink: 0;
            text-align: center;
            padding: 18px 16px 26px;
            color: var(--app-text-muted);
            font-size: 11.5px;
        }

       .bar a, .brand, .word{ text-decoration: none; }
       .tool-block a{ text-decoration: none; }
       .site-nav a{ text-decoration: none; }

       main.hero, .hero-ctas a{ text-decoration: none; }
       /* footer.site .foot-grid a, .brand span .word{ text-decoration: none; } */