/* --- POLICE INTER AUTO-HEBERGEE (woff2 local) --- */
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('/fonts/Inter-400-latin.woff2') format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('/fonts/Inter-400-latin-ext.woff2') format('woff2');
            unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 500;
            font-display: swap;
            src: url('/fonts/Inter-500-latin.woff2') format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 500;
            font-display: swap;
            src: url('/fonts/Inter-500-latin-ext.woff2') format('woff2');
            unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 600;
            font-display: swap;
            src: url('/fonts/Inter-600-latin.woff2') format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 600;
            font-display: swap;
            src: url('/fonts/Inter-600-latin-ext.woff2') format('woff2');
            unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 700;
            font-display: swap;
            src: url('/fonts/Inter-700-latin.woff2') format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 700;
            font-display: swap;
            src: url('/fonts/Inter-700-latin-ext.woff2') format('woff2');
            unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 800;
            font-display: swap;
            src: url('/fonts/Inter-800-latin.woff2') format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 800;
            font-display: swap;
            src: url('/fonts/Inter-800-latin-ext.woff2') format('woff2');
            unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }

        /* --- POLICE NOTO SANS DEVANAGARI AUTO-HEBERGEE (hindi, woff2 variable) --- */
        /* Police variable : un seul fichier couvre les graisses 400 a 800. */
        /* unicode-range = devanagari : telechargee uniquement quand du hindi s'affiche. */
        @font-face {
            font-family: 'Noto Sans Devanagari';
            font-style: normal;
            font-weight: 400 800;
            font-display: swap;
            src: url('/fonts/NotoSansDevanagari.woff2') format('woff2');
            unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
        }

        /* --- INTER : sous-ensembles VIETNAMIEN + CYRILLIQUE (auto-heberges, woff2 variable) --- */
        /* Meme famille 'Inter' (choisie par unicode-range) ; telechargees seulement si ces caracteres s'affichent. */
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400 800;
            font-display: swap;
            src: url('/fonts/Inter-vietnamese.woff2') format('woff2');
            unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400 800;
            font-display: swap;
            src: url('/fonts/Inter-cyrillic.woff2') format('woff2');
            unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
        }

        /* [31/07] POLICE MATHEMATIQUE — repare l'affichage des lettres stylisees ACCENTUEES sur Android.
           Mesure du 31/07 sur Galaxy Tab (Chrome) : `𝐚` seul s'affiche, `𝐚` + un accent devient un CARRE.
           Chrome cherche UNE police couvrant la lettre ET sa marque ensemble ; aucune police d'Android ne
           les a toutes deux, alors il abandonne la lettre. Windows s'en sort grace a Cambria Math, iOS et
           WhatsApp composent aussi -> Android est le seul cas defaillant.
           STIX Two Math (licence SIL Open Font, redistribuable) couvre les 996 lettres mathematiques ET
           toutes les marques, barre longue U+0336 comprise -- contrairement a Noto Sans Math, ecartee pour
           cette seule absence (elle aurait laisse L-barre, D-barre, H-barre casses = correctif partiel).
           REDUITE VOLONTAIREMENT au bloc mathematique + marques : elle ne contient AUCUNE lettre latine
           ordinaire (verifie = 0), elle ne peut donc PAS s'emparer du texte courant ni de l'interface.
           `font-display: block` : on prefere un bref delai a un affichage en carres puis corrige.
           PAS dans les listes du Service Worker : le Cache First la garde a sa 1re utilisation, donc
           un utilisateur iOS ou desktop ne la telecharge JAMAIS (0 Ko). */
        @font-face {
            font-family: 'ETeextMath';
            font-style: normal;
            font-weight: 400;
            font-display: block;
            src: url('/fonts/ETeextMath.woff2') format('woff2');
            unicode-range: U+0300-036F, U+1D400-1D7FF;
        }

        /* --- VARIABLES ET THÈME (DARK MODE) --- */
        :root {
            --primary: #7C3AED;
            --primary-hover: #6D28D9;
            --secondary: #EC4899;
            --blue: #3B82F6;
            --indigo: #4F46E5;
            --bg-body: #0B0F19;
            --bg-surface: #1A1F2E;
            --text-main: #FFFFFF;
            --text-muted: #9CA3AF;
            --border-color: #374151;
            --radius: 16px;
            --font-family: 'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif;
        }

        /* Zone centrale de l'en-tête corrigée */
        .header-center {
            flex: 1;
            text-align: center;
            padding: 0 15px;
            min-width: 0; /* CRUCIAL : Autorise le texte à se couper au lieu de casser l'interface */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header-title-text {
            font-size: 0.85rem;
            font-weight: 800;
            white-space: nowrap; /* Interdit formellement le retour à la ligne */
            overflow: hidden;
            text-overflow: ellipsis; /* Ajoute des "..." si l'écran rétrécit */
            width: 100%;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body { font-family: var(--font-family); background-color: var(--bg-body); color: var(--text-main); line-height: 1.5; font-size: 14px; }
        a { text-decoration: none; color: inherit; }

        /* --- EN-TÊTE (HEADER) --- */
        header { background-color: var(--bg-surface); padding-top: max(2px, env(safe-area-inset-top)); padding-right: max(10px, env(safe-area-inset-right)); padding-bottom: 2px; padding-left: max(10px, env(safe-area-inset-left)); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; }

        .header-left {
          display: flex;
          align-items: center;
          width: 100%;
          max-width: 85rem;
          margin: 0 auto;
          flex-wrap: wrap; /* Autorise le retour à la ligne si manque de place */
          column-gap: 10px;
          row-gap: 8px;
        }

        .advanced-tools {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-left: 30px; /* Écarte le groupe du badge PRO */
        }

        .header-controls { display: flex; align-items: center; gap: 10px; margin-left: auto; }
        .logo-section { display: flex; align-items: center; gap: 6px; color: var(--text-main); }
        .logo-text-group { display: flex; flex-direction: column; justify-content: center; }
        .logo-title-row { display: flex; align-items: center; gap: 6px; font-size: 1.2rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
        .header-subtitle { font-size: 0.55rem; color: var(--text-muted); font-weight: 600; line-height: 1.2; white-space: nowrap; }

        .badge-pro { background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%); color: white; padding: 2px 8px; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
        /* État FREE : pilule grisée (le style PRO .badge-pro reste inchangé) */
        .badge-pro.badge-free { background: #4B5563; color: #D1D5DB; }
        /* Jours restants d'essai (3G) : permanent dans .acct-desktop (>576px) + ligne popover */
        .trial-indicator { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; cursor: pointer; transition: color 0.12s; }
        .trial-indicator:hover { color: var(--text-main); text-decoration: underline; text-underline-offset: 2px; }
        .acct-menu-trial { font-size: 0.78rem; color: var(--text-muted); padding-top: 4px; }
        /* Connexion Google (bouton social clair) + séparateur "OU" */
        .btn.auth-google-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 600; }
        .btn.auth-google-btn:hover { background: #f7f8f8; opacity: 1; }
        .auth-google-btn .google-g { flex-shrink: 0; }
        .auth-separator { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--text-muted); font-size: 0.8rem; }
        .auth-separator::before, .auth-separator::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }

        /* --- SÉLECTEUR DE LANGUE --- */
        .lang-selector { appearance: none; -webkit-appearance: none; padding: 4px 28px 4px 8px; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--bg-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A78BFA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; background-size: 14px; color: var(--text-main); font-size: 0.8rem; cursor: pointer; outline: none; font-weight: 600; transition: border-color 0.2s; }
        .lang-selector:focus { border-color: #A78BFA; }
        /* --- Sélecteur de langue (menu maison, remplace le <select> ; piloté par données LANGS) --- */
        .lang-menu-btn { display: inline-flex; align-items: center; gap: 6px; background-color: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 8px; padding: 5px 9px; color: var(--text-main); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s; }
        .lang-menu-btn:hover, .lang-menu-btn:focus-visible { border-color: #A78BFA; outline: none; }
        .lang-globe { width: 16px; height: 16px; flex-shrink: 0; }
        .lang-menu-chev { width: 13px; height: 13px; flex-shrink: 0; }
        .lang-menu { min-width: 210px; padding: 6px; }
        .lang-search-input { width: 100%; box-sizing: border-box; background-color: var(--bg-body); border: 1px solid var(--border-color); border-radius: 8px; padding: 7px 10px; margin-bottom: 4px; color: var(--text-main); font-size: 14px; outline: none; }
        .lang-search-input:focus { border-color: #A78BFA; }
        .lang-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: none; border: none; border-radius: 7px; padding: 8px 10px; color: var(--text-main); font-size: 14px; cursor: pointer; text-align: left; box-sizing: border-box; }
        .lang-item:hover, .lang-item:focus-visible { background-color: rgba(255,255,255,0.06); outline: none; }
        .lang-item.is-current { background-color: rgba(167,139,250,0.16); }
        .lang-item-en { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
        .lang-item-check { width: 16px; height: 16px; color: #A78BFA; flex-shrink: 0; }
        .lang-item[dir="rtl"] { flex-direction: row-reverse; text-align: right; }

        @media (max-width: 900px) { .header-subtitle { display: none; } }

        @media (max-width: 576px) {
            .hide-mobile { display: none !important; }
            header { padding-top: max(2px, env(safe-area-inset-top)); padding-bottom: 6px; } /* Ajusté pour la 2ème ligne */
            .header-left { justify-content: space-between; }
            .logo-section { margin-right: 0; order: 1; }
            .account-zone { order: 1; margin-right: auto; } /* zone compte juste après le logo ; pousse les contrôles à droite */
            .header-controls { order: 2; gap: 8px; }

            /* On force les outils avancés sur une 2ème ligne avec un bel espacement */
            .advanced-tools {
                margin-left: 0;
                margin-right: 0;
                gap: 8px;
                order: 3;
                width: 100%;
                justify-content: space-between;
                padding-top: 6px;
                border-top: 1px solid rgba(255,255,255,0.05);
            }
            .logo-title-row { font-size: 0.9rem; gap: 4px; }
            .badge-pro { font-size: 0.55rem; padding: 1px 4px; }
            .lang-selector { font-size: 16px !important; padding: 2px 24px 2px 4px; background-position: right 4px center; }
            .lang-menu-code, .lang-menu-chev { display: none; }   /* mobile : globe seul (gain de place) */
            .lang-menu-btn { padding: 6px 7px; }
            .form-input { font-size: 16px !important; }
            .btn { height: 30px; font-size: 0.75rem !important; padding: 0 0.4rem; }
            h1.nk-block-title { font-size: 0.6rem !important; margin-top: 5px !important; margin-bottom: 0px !important; }
            .editor-footer { flex-wrap: wrap !important; column-gap: clamp(6px, 2.2vw, 12px) !important; padding: 4px 8px !important; row-gap: 2px !important; }
            .editor-footer .btn { flex: 1 1 auto; min-width: 0; padding: 0 clamp(0.3rem, 1.4vw, 0.55rem); height: 42px; }   /* barre mobile : les 6 boutons remplissent la largeur + cible tactile 42px */
            .char-count { font-size: 0.65rem; padding-top: 2px; flex: 0 0 100%; text-align: right; }   /* compteur toujours en 2e ligne, aligne a droite */
            .result-card .btn-copy { height: 34px !important; font-size: 0.72rem !important; padding: 0 14px !important; }   /* anti fat-finger : cible "Copier" des cartes 18->34px sur mobile */
            .btn-toolbar { padding: 4px !important; gap: 2px !important; }
            .toolbar-btn { min-width: 32px !important; height: 32px !important; font-size: 15px !important; padding: 0 2px !important; }
            textarea.form-control { font-size: 16px !important; min-height: 25vh; max-height: 60vh; overflow-y: auto; resize: none; padding: 0.4rem 0.6rem !important; }
            .nk-content { padding-left: max(2px, env(safe-area-inset-left)) !important; padding-right: max(2px, env(safe-area-inset-right)) !important; }

            /* Correction des infobulles sur mobile pour éviter les débordements */
            .tooltip-text { width: max-content !important; max-width: 85vw !important; left: 0 !important; transform: none; }
            .tooltip-text::after { left: 16px; margin-left: -5px; }
            /* Le « ? » du Mode Securite est tout a droite : on ancre la bulle a DROITE pour qu'elle
               s'ouvre vers la gauche (ou il y a la place) + largeur bornee -> ne deborde plus jamais,
               quelle que soit la langue. Selecteur descendant (.tooltip-container .safe-mode-tooltip)
               pour l'emporter sur la regle de base .safe-mode-tooltip. */
            .tooltip-container .safe-mode-tooltip { left: auto !important; right: -6px !important; transform: none !important; width: max-content !important; max-width: min(260px, calc(100vw - 28px)) !important; }
            .tooltip-container .safe-mode-tooltip::after { left: auto !important; right: 12px !important; margin-left: 0 !important; }
            /* Compteur + ⓘ groupes sur leur PROPRE ligne pleine largeur (DETERMINISTE : ne se glisse jamais sur
               la rangee des boutons -> boutons pas retrecis, ⓘ colle au compteur a droite, bulle ouvre a gauche).
               Remplace l'ancien .char-count{flex:0 1 auto; margin-left:auto} (v142) qui rendait la mise en page
               INSTABLE : OK en simulateur mais KO sur vrai iPhone (le compteur se glissait sur la rangee des
               boutons + ejectait le ⓘ). Le span .char-count etait en flex 0 0 100% (ligne 245) -> neutralise ici. */
            .char-count-line { flex: 0 0 100%; justify-content: flex-end; }
            .char-count-line .char-count { flex: 0 1 auto; }
            /* CORRECTIF ALERTE ⚠️ */
            .warning-tooltip { left: -5px !important; right: auto !important; }
            .warning-tooltip::after { left: 15px !important; right: auto !important; margin-left: 0 !important; }
            /* CORRECTIF infobulle Clé API : recentrer sous le « ? » + largeur bornée (evite le debordement
               a gauche de la modale sur petit ecran, quelle que soit la langue). */
            .tooltip-container .api-tooltip { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: 160px !important; max-width: calc(100vw - 20px) !important; }
            .tooltip-container .api-tooltip::after { left: 50% !important; right: auto !important; margin-left: -5px !important; }

            .overlay-dropdown.active { background: rgba(11, 15, 25, 0.6); backdrop-filter: blur(2px); z-index: 1900 !important; }
            .dropdown-menu { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; margin: 0 !important; width: 85vw !important; max-width: 320px !important; max-height: 70vh !important; max-height: 70dvh !important; transform: translate(-50%, -50%) scale(0.95) !important; z-index: 2000 !important; padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; }
            .dropdown-menu.active { transform: translate(-50%, -50%) scale(1) !important; }
            /* Menu de LANGUES (13 items) : ancre en HAUT + hauteur bornee a la zone visible (dvh) au lieu
               d'un centrage (que iOS place mal) -> tient toujours dans l'ecran ET defile pour atteindre le
               dernier choix (russe). Scope au lang-menu ; les autres menus (moins d'items) restent centres. */
            .dropdown-menu.lang-menu { top: calc(env(safe-area-inset-top, 0px) + 54px) !important; bottom: auto !important; max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 54px - max(16px, env(safe-area-inset-bottom, 0px))) !important; transform: translateX(-50%) scale(0.95) !important; }
            .dropdown-menu.lang-menu.active { transform: translateX(-50%) scale(1) !important; }
            /* Le header (sticky z-index 100) piège ses menus. On le passe entre l'overlay flou (1900)
               et les modales de base (2000) -> le popover compte reste NET, mais les modales restent au-dessus du header. */
            header { z-index: 1950; }
            .menu-item { padding: 12px 16px !important; font-size: 14px !important; }
            .modal-content-notes { padding: 1rem !important; }
            .toolbar-divider { display: block; margin: 0 4px; height: 20px; } /* Toujours visible mais plus compacte sur mobile */
        }

        .nk-content { padding: 2px 10px 10px; max-width: 85rem; margin: 0 auto; }
        .row { display: flex; flex-wrap: wrap; margin: -10px; }
        .col-left { flex: 0 0 58%; max-width: 58%; padding: 2px 10px 8px 10px; }
        .col-right { flex: 0 0 42%; max-width: 42%; padding: 2px 10px 8px 10px; }

        .card { background-color: var(--bg-surface); border-radius: var(--radius); border: 1px solid var(--border-color); margin-bottom: 0.5rem; overflow: hidden; box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3); }

        @media (max-width: 992px) {
            .col-left, .col-right { flex: 0 0 100%; max-width: 100%; }
            .col-left { padding-bottom: 0px; }
            .col-right { padding-top: 0px; }
            .card { margin-bottom: 0px !important; }
            .header-center { display: none !important; } /* Masque le grand titre plus tôt sur tablette */
        }

        .nk-block-head { margin-bottom: 2px; padding: 0; }
        .nk-block-title { font-size: 0.95rem; font-weight: 800; color: var(--text-main); margin: 0 0 2px 0; }

        .toggle-switch { position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .toggle-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4b5563; transition: .3s; border-radius: 18px; }
        .toggle-switch .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; }
        .toggle-switch input:checked + .slider { background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%); }
        .toggle-switch input:checked + .slider:before { transform: translateX(14px); }

        /* ZONES TACTILES (22/07) — le logo et le bouton de connexion mesuraient 33 et 29 px de haut,
   sous le minimum de 44 px recommande par Apple, et collés au bord supérieur de l'écran : sur
   iPhone, un doigt qui vise cette bande rate souvent (Denis, Safari iPhone 14+).
   On agrandit UNIQUEMENT la surface tactile, via un pseudo-element invisible centré : aucune
   couleur, aucune taille, aucune position visible ne change. L'extension est VERTICALE seulement
   — horizontalement le bouton est déjà large (114 et 101 px).
   NB : les boutons de la barre d'outils (32x32) ne sont PAS traités ici : il n'y a que 2 px entre
   eux, une zone élargie déborderait sur le voisin et provoquerait des appuis à côté. Leur cas
   demande une vraie décision de mise en page, pas un rustine. */
.logo-section, #authSignInBtn { position: relative; }
.logo-section::after, #authSignInBtn::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
}

.tooltip-container { position: relative; display: inline-flex; align-items: center; }
        .tooltip-text { visibility: hidden; width: 340px; background-color: #1A1F2E; color: #fff; border: 1px solid var(--border-color); text-align: left; border-radius: 8px; padding: 12px; position: absolute; z-index: 1000; top: calc(100% + 10px); left: -10px; transform: none; opacity: 0; transition: opacity 0.3s; font-size: 0.6rem; line-height: 1.4; font-weight: normal; box-shadow: 0 4px 6px rgba(0,0,0,0.5); pointer-events: none; }
        .tooltip-text::after { content: ""; position: absolute; bottom: 100%; top: auto; left: 16px; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #1A1F2E transparent; }
        .tooltip-text::before { content: ""; position: absolute; bottom: 100%; top: auto; left: 0; right: 0; height: 10px; }
        .tooltip-container:hover .tooltip-text, .tooltip-container:focus-within .tooltip-text { visibility: visible; opacity: 1; pointer-events: auto; }

        .safe-mode-tooltip { width: max-content !important; left: -6.5rem !important; }
        .safe-mode-tooltip::after { left: 7rem !important; margin-left: 0 !important; }

        /* Compteur : icone en BAS de l'editeur -> bulle ouverte vers le HAUT (sinon coupee sous l'ecran sur mobile). Positionnement uniquement. */
        .count-tooltip { top: auto !important; bottom: calc(100% + 10px) !important; left: auto !important; right: -6px !important; max-width: min(340px, calc(100vw - 24px)) !important; }
        .count-tooltip::after { top: 100% !important; bottom: auto !important; left: auto !important; right: 12px !important; margin-left: 0 !important; border-color: #1A1F2E transparent transparent transparent !important; }
        .count-tooltip::before { top: 100% !important; bottom: auto !important; }

        /* Lien « En savoir plus » de la bulle du compteur -> FAQ de la vitrine. ELEMENT NOUVEAU :
           n'altere aucune regle existante. Meme bleu que le lien de la bulle Mode Securite. */
        .count-tooltip-more { display: inline-block; margin-top: 6px; color: #93c5fd; text-decoration: underline; }

        .api-tooltip { left: auto !important; right: -10px !important; width: 240px !important; max-width: 85vw !important; background-color: #1e3a8a !important; border: 1px solid #3b82f6 !important; box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.6) !important; padding: 14px 16px !important; font-size: 0.8rem !important; text-align: center !important; z-index: 3100 !important; }
        .api-tooltip::after { left: auto !important; right: 16px !important; margin-left: 0 !important; border-color: transparent transparent #1e3a8a transparent !important; }

        /* Pied de version (modale Paramètres) : indice de clic sur le numéro de version */
        #app-version-text:hover, #app-version-text:focus { text-decoration: underline; }

        .warning-badge { font-size: 0.46rem; font-weight: normal; background-color: rgba(245, 158, 11, 0.1); color: #fcd34d; padding: 1px 4px; border-radius: 4px; border: 1px solid #f59e0b; display: inline-flex; align-items: center; cursor: help; }
        .warning-tooltip { border-color: #f59e0b; color: #fcd34d; font-size: 0.55rem; background-color: var(--bg-surface); text-align: center; width: max-content !important; max-width: 90vw; }

        .editor-container { border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-surface); overflow: visible; position: relative; box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3); }
        .editor-alert { position: absolute; top: 55px; left: 50%; transform: translateX(-50%) translateY(-10px); background-color: #ef4444; color: white; padding: 8px 20px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; opacity: 0; pointer-events: none; transition: all 0.3s ease; z-index: 10; box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.4); }
        .editor-alert.show { opacity: 1; transform: translateX(-50%) translateY(0); }

        .btn-toolbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 4px 8px; background-color: rgba(255,255,255,0.15); border-bottom: 1px solid var(--border-color); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }

        .toolbar-btn { background: rgba(124, 58, 237, 0.25); border: 1px solid rgba(167, 139, 250, 0.6); color: #E5E7EB; padding: 0 6px; border-radius: 8px; font-size: 17px; cursor: pointer; min-width: 36px; height: 36px; text-align: center; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
        .toolbar-btn:hover, .toolbar-btn.active { background: rgba(249, 212, 35, 0.2); color: var(--text-main); border-color: rgba(249, 212, 35, 0.4); }
        .toolbar-btn.active svg, .toolbar-btn:hover svg { color: var(--text-main) !important; }
        .toolbar-btn.active span.typo-icon, .toolbar-btn:hover span.typo-icon { color: var(--text-main) !important; }
        .toolbar-btn.active span.underline-icon, .toolbar-btn:hover span.underline-icon { color: var(--text-main) !important; text-decoration-color: var(--text-main) !important; }
        .toolbar-btn.active span.fantaisie-icon, .toolbar-btn:hover span.fantaisie-icon { color: var(--text-main) !important; }
        .toolbar-btn.active span.zalgo-icon, .toolbar-btn:hover span.zalgo-icon { color: var(--text-main) !important; }

        /* Le séparateur vertical pour l'Assistant IA */
        .toolbar-divider { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.15); margin: 0 10px; align-self: center; }

        textarea.form-control { width: 100%; height: 240px; border: none; padding: 0.5rem 1rem 1rem 1rem; font-size: 1rem; font-family: var(--font-family); resize: vertical; color: #111827; background: #FFFFFF; transition: opacity 0.3s; }
        textarea.form-control:focus { outline: none; }
        textarea.form-control:disabled { opacity: 0.5; cursor: not-allowed; background: #e5e7eb; }

        /* Tablette/desktop : le textarea s'AGRANDIT avec son contenu (comme <=576), au lieu de reserver
           60vh meme vide -- ce qui poussait la barre du bas hors champ en paysage sur tablette compacte
           (photos MediaPad, 16/07). Principe (voir memoire principe-zone-affichage-pwa) : ne pas reserver
           de vertical qu'on n'a pas. Cap en dvh (hauteur DYNAMIQUE, tient compte de la barre d'adresse du
           navigateur), pas vh ; fallback vh pour les vieux moteurs. autoGrow() (app.js) fixe la hauteur au
           contenu ; min/max l'encadrent, defilement interne au-dela. */
        @media (min-width: 577px) {
            textarea.form-control {
                height: auto;
                min-height: clamp(180px, 55vh, 560px);
                min-height: clamp(180px, 55dvh, 560px);
                max-height: 60vh;
                max-height: 60dvh;
                overflow-y: auto;
                resize: none;
            }
        }

        /* [TEST 16/07 — TRICHE Android] Sur Android, la barre de selection native (Copier/Coller...) se
           place au-dessus de la selection et recouvre la barre de style quand on selectionne la 1re ligne.
           On aere le haut du textarea pour pousser la 1re ligne plus bas : la barre native tombe alors
           dans cette bande vide, sous nos boutons. Gate `body.is-android` (posee en JS via /Android/),
           donc iOS/desktop intacts. Ne regle QUE ce cas (pas le defilement).
           Valeur AFFINEE sur Samsung Tab (16/07) : 72px marchait mais un peu genereux -> 60px.
           Si un bouton se fait regratter -> remonter a 64px ; si encore trop -> 56px. */
        body.is-android textarea.form-control { padding-top: 60px !important; }

        /* [31/07] La police mathematique n'est activee QUE sur Android, et QUE sur les deux surfaces qui
           affichent le texte de l'utilisateur : la zone de saisie et les cartes d'apercu. L'interface
           (`body`) et les champs de reglages ne sont PAS touches -- ils gardent `--font-family` a
           l'identique. Meme interrupteur `is-android` que la regle ci-dessus, pose en JS depuis le 16/07.
           Consequence voulue : iOS, iPad, Mac, Windows et Linux ne voient AUCUN changement, ni d'aspect
           ni de poids -- la regle ne s'y applique jamais, donc le fichier n'y est jamais demande.
           `.card-inner` n'avait AUCUNE declaration de police : elle heritait de `body`. On la nomme donc
           explicitement ici, sinon les apercus resteraient casses alors que la saisie serait reparee.
           ORDRE : la police math est en TETE, mais la mesure du 31/07 (banc 2, ligne 03) montre qu'en
           derniere position le rendu est identique -- Chrome resout la grappe entiere, la position ne
           tranche pas. On la met devant par lisibilite d'intention, pas par necessite technique. */
        body.is-android textarea.form-control,
        body.is-android .result-card .card-inner { font-family: 'ETeextMath', var(--font-family); }

        .editor-footer { padding: 5px 10px; border-top: 1px solid var(--border-color); display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 14px; background: rgba(255,255,255,0.02); }
        /* Barre d'actions (5 boutons) : padding horizontal homogène en desktop/tablette pour tenir 1 ligne ; mobile (<=576) géré par la media-query dédiée. */
        /* Tablette/desktop : les boutons s'etalent sur la largeur (meme regle que <=576, qui la prouvait deja).
           MESURE (2026-07-16, 800/1333/1920px) : la barre fait TOUJOURS ~765px quel que soit l'ecran, car
           .nk-content plafonne a 85rem puis .col-left a 58%. Donc max-width:140px ne mord que sur 'Copier' ;
           les boutons secondaires plafonnent d'eux-memes vers 90px. On le garde comme garde-fou au cas ou la
           colonne s'elargirait un jour -- ne pas croire qu'il fait plus que ca.
           #footerMessage : sans margin-left:auto il retomberait contre les boutons, a gauche (le defaut
           signale). Le auto est donne au SEUL message : si .char-count gardait le sien, CSS partagerait
           l'espace libre entre les deux autos et laisserait un trou entre eux. Le !important bat le
           margin-left:5px pose en style direct dans les 13 pages (index.html:265).
           EFFET DE BORD ASSUME (choix Denis) : les boutons etales ne laissent plus d'amortisseur, donc
           l'apparition du message les fait retrecir ~35px pendant 3s. MESURE en pire cas (6 boutons quand
           navigator.share existe + le plus long des 13 messages, pt "Copiado para a area de clipboard!" =
           209px). Structurel, pas un reglage : etaler et ne pas bouger sont incompatibles, la place n'existe
           pas. Baisser le plafond ne le corrige PAS (teste : 80px->22px, 90->34, 100->42). */
        @media (min-width: 577px) {
            .editor-footer .btn { flex: 1 1 auto; max-width: 140px; padding: 0 0.7rem; }
            #footerMessage { margin-left: auto !important; }
            .char-count    { margin-left: 0; }
        }
        .editor-footer .btn .hide-mobile { display: none; }   /* Solution A : icones seules pour les boutons secondaires du footer ; 'Copier' garde son libelle (pas de .hide-mobile) */
        .char-count { font-family: monospace; color: var(--text-muted); font-size: 0.65rem; margin-left: auto; flex-shrink: 0; white-space: nowrap; }
        .char-count-line { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }   /* groupe compteur + ⓘ (une seule unite dans le footer) */
        .char-count-line .char-count { margin-left: 0; }   /* le wrapper gere la position ; pas de double marge */

        .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 1rem; height: 36px; font-weight: 600; border-radius: 9999px; cursor: pointer; border: 1px solid transparent; font-size: 0.85rem; transition: opacity 0.2s, transform 0.2s; }
        .btn:hover { opacity: 0.9; transform: translateY(-1px); }
        .btn-primary { background: linear-gradient(90deg, #6C3CFF 0%, #FF3CAC 40%, #FF8C42 75%, #F9D423 100%); color: white; border: none; box-shadow: 0 4px 10px rgba(108, 60, 255, 0.2); }
        .btn-outline-light { background-color: transparent; border: 1px solid var(--text-muted); color: var(--text-main); }
        /* Boutons de formule PRO (modale d'abonnement) : style clair, coins doux. CIBLÉ via .pro-plans -> .btn-primary global intact.
           L'annuel est mis en avant (bordure violette + remise « (-25 %) » en violet). */
        .pro-plans .pro-plan-btn { background: #ffffff; color: #1a1a2e; border: 1px solid #d7d9e3; border-radius: 8px; box-shadow: none; }
        .pro-plans .pro-plan-btn--featured { border: 2px solid #6C3CFF; }
        .pro-plan-accent { color: #6C3CFF; }
        .btn-danger-outline { background-color: transparent; border: 1px solid #ef4444; color: #ef4444; }
        .install-cta { background: #ffffff; color: #1A1F2E; border: 1.5px solid #7C3AED; }   /* bouton « Installer l'application » des Réglages : fond clair démarqué */
        .install-cta:hover { background: #F5F3FF; opacity: 1; }
        .btn-danger-outline:hover { background-color: rgba(239, 68, 68, 0.1); }
        .btn-icon { padding: 0; width: 36px; }

        .btn .hide-mobile { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

        .grid-results { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 0px; }
        @media (max-width: 576px) { .grid-results { grid-template-columns: 1fr; } }

        .result-card { border-radius: 6px; overflow: hidden; color: white; display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
        .result-card .card-header { padding: 2px 8px; display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.05); font-weight: 600; font-size: 0.65rem; border-bottom: 1px solid var(--border-color); }
        .result-card .card-inner { padding: 4px 8px; font-size: 0.85rem; min-height: 32px; word-wrap: break-word; white-space: pre-wrap; flex-grow: 1; color: var(--text-main); }

        .result-card .btn-copy { background: #E5E7EB; border: none; color: #111827; font-size: 0.60rem; padding: 0 6px; height: 18px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s; font-weight: 600; }
        .result-card .btn-copy:hover { background: #D1D5DB; }

        .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(11, 15, 25, 0.8); backdrop-filter: blur(4px); align-items: center; justify-content: center; }
        .modal.show { display: flex; }
        .emoji-modal-content { background-color: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius); width: 460px; max-width: 95%; height: auto; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.5); padding: 0; overflow: hidden; }
        .emoji-tabs { display: flex; flex-wrap: wrap; justify-content: center; border-bottom: 1px solid var(--border-color); background: rgba(255,255,255,0.02); }
        .emoji-tab { padding: 10px 12px; cursor: pointer; color: var(--text-muted); border-bottom: 3px solid transparent; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
        .emoji-tab svg { width: 18px; height: 18px; }
        .emoji-tab:hover, .emoji-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
        .emoji-grid-container { padding: 12px; overflow-y: auto; flex-grow: 1; }
        .emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 4px; }
        .symbol-btn { color: var(--text-main); font-family: "Twemoji Mozilla", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-size: 1.4rem; padding: 0; height: 40px; width: 100%; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 8px; cursor: pointer; transition: transform 0.1s, background-color 0.1s; }
        .symbol-btn:hover { background: rgba(255,255,255,0.1); transform: scale(1.15); }

        .modal-content-notes { background-color: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius); width: 90%; max-width: 600px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
        .modal-content-settings { background-color: var(--bg-body); border: 1px solid var(--border-color); border-radius: var(--radius); width: 90%; max-width: 500px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0,0,0,0.5); overflow: hidden; }
        .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 15px;}
        .close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: background 0.2s; }
        .close-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-main); }

        .ios-list-group { background: var(--bg-surface); border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); margin-bottom: 20px; }
        .ios-list-group > div { border-bottom: 1px solid var(--border-color); }
        .ios-list-group > div:last-child { border-bottom: none; }
        .ios-list-item { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
        .ios-list-item-col { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }

        .toggle-switch-ios { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
        .toggle-switch-ios input { opacity: 0; width: 0; height: 0; }
        .toggle-switch-ios .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4b5563; transition: .3s; border-radius: 26px; }
        .toggle-switch-ios .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        .toggle-switch-ios input:checked + .slider { background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%); }
        .toggle-switch-ios input:checked + .slider:before { transform: translateX(20px); }

        .symbols-container { overflow-y: auto; display: flex; flex-direction: column; gap: 15px; padding-right: 5px; }
        .notes-list { list-style: none; display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; padding-right: 5px;}
        .note-item { background: rgba(255,255,255,0.02); border: 1px solid var(--border-color); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px;}
        .note-item-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 5px;}
        .note-date { font-size: 0.8rem; color: var(--text-muted); font-weight: 600;}
        .note-text { font-size: 0.95rem; color: var(--text-main); white-space: pre-wrap; word-break: break-word; max-height: 80px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
        .note-actions { display: flex; gap: 5px; justify-content: flex-end; }
        .empty-notes { text-align: center; color: var(--text-muted); font-style: italic; padding: 20px 0; }

        .form-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-main); margin-bottom: 6px; }
        .form-input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: rgba(0,0,0,0.2); color: var(--text-main); font-family: var(--font-family); font-size: 0.9rem; transition: border-color 0.2s; }
        .form-input:focus { outline: none; border-color: var(--primary); background: rgba(0,0,0,0.4); }
        #customPromptInput::placeholder { font-size: 0.85em; line-height: 1.4; }

        .toast { position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); right: max(20px, env(safe-area-inset-right)); background: var(--bg-surface); color: white; border: 1px solid var(--border-color); padding: 10px 20px; border-radius: 30px; font-weight: 500; opacity: 0; transform: translateY(20px); transition: all 0.3s; z-index: 3000; pointer-events: none; box-shadow: 0 0 20px rgba(124, 58, 237, 0.3); }
        .toast.show { opacity: 1; transform: translateY(0); }

        .dropdown-wrapper { position: relative; display: inline-block; text-align: left; }
        .overlay-dropdown { display: none; position: fixed; inset: 0; z-index: 30; }
        .overlay-dropdown.active { display: block; }
        .dropdown-menu { transition: opacity 0.15s ease-out, transform 0.15s ease-out; opacity: 0; transform: scale(0.95); pointer-events: none; position: absolute; z-index: 50; top: 100%; margin-top: 4px; width: max-content; border-radius: 12px; background-color: var(--bg-surface); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); border: 1px solid var(--border-color); max-height: min(80vh, 32rem); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; transform-origin: top center; }
        .dropdown-menu.active { opacity: 1; transform: scale(1); pointer-events: auto; }
        .dropdown-menu.align-right { left: auto; right: 0; }
        .dropdown-menu.align-left { left: 0; right: auto; }
        .dropdown-menu::-webkit-scrollbar { width: 6px; }
        .dropdown-menu::-webkit-scrollbar-track { background: var(--bg-surface); border-radius: 4px; }
        .dropdown-menu::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
        .dropdown-menu::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
        .menu-item { display: flex; align-items: center; width: 100%; padding: 8px 16px; font-size: 13px; line-height: 1.25; color: var(--text-main); white-space: nowrap; text-decoration: none; box-sizing: border-box; transition: background-color 0.1s ease, color 0.1s ease; border-bottom: 1px solid rgba(255,255,255,0.05); }
        .menu-item:last-child { border-bottom: none; }
        .menu-item:hover { background-color: rgba(255,255,255,0.05); color: #fff; }
        /* Sous-menu Zalgo : espacement ASYMÉTRIQUE (haut/bas) selon où les marques de chaque mode débordent */
        #zalgoMenuContainer .menu-item { line-height: 1.4; }
        #zalgoMenuContainer .menu-item[data-entry-id="eclat"]        { padding-top: 5px  !important; padding-bottom: 5px  !important; }
        #zalgoMenuContainer .menu-item[data-entry-id="zalgoLight"]   { padding-top: 6px  !important; padding-bottom: 6px  !important; }
        #zalgoMenuContainer .menu-item[data-entry-id="zalgoBase"]    { padding-top: 9px  !important; padding-bottom: 9px  !important; }
        #zalgoMenuContainer .menu-item[data-entry-id="zalgoIntense"] { padding-top: 13px !important; padding-bottom: 13px !important; }
        #zalgoMenuContainer .menu-item[data-entry-id="zRain"]        { padding-top: 12px !important; padding-bottom: 13px !important; }
        #zalgoMenuContainer .menu-item[data-entry-id="zCrown"]       { padding-top: 11px !important; padding-bottom: 3px  !important; }
        #zalgoMenuContainer .menu-item[data-entry-id="zStrike"]      { padding-top: 2px  !important; padding-bottom: 2px  !important; }
        #zalgoMenuContainer .menu-item[data-entry-id="zBoucle"]      { padding-top: 2px  !important; padding-bottom: 2px  !important; }
        #zalgoMenuContainer .menu-item[data-entry-id="zProgressive"] { padding-top: 6px  !important; padding-bottom: 9px  !important; }
        #zalgoMenuContainer .menu-item[data-entry-id="zSeeded"]      { padding-top: 8px  !important; padding-bottom: 10px !important; }
        #zalgoMenuContainer .menu-item[data-entry-id="zTotal"]       { padding-top: 12px !important; padding-bottom: 14px !important; }

        .gw-overlay { position: fixed; inset: 0; z-index: 2999; background: rgba(11, 15, 25, 0.8); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease-out; }
        .gw-overlay.show { opacity: 1; pointer-events: auto; }

        .gw-widget { position: fixed; z-index: 3000; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); width: 90%; max-width: 450px; max-height: 85vh; background-color: var(--bg-body); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: 0 20px 40px rgba(0,0,0,0.5); display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: transform 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.2s ease-out; }
        .gw-widget.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

        .gw-action-btn { width: 100%; padding: 12px; background: transparent; border: none; color: var(--blue); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
        .gw-action-btn:hover { background: rgba(255,255,255,0.05); }
        .gw-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .gw-btn-danger { color: #ef4444; }

        .gw-status-box { padding: 12px; border-radius: 8px; margin-bottom: 16px; font-size: 0.85rem; line-height: 1.4; animation: fadeIn 0.3s ease-in-out; }
        .gw-status-error { background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; color: #fca5a5; }
        .gw-status-success { background: rgba(16, 185, 129, 0.1); border: 1px solid #10b981; color: #6ee7b7; }

        .gw-status-badge { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 600; background: rgba(255,255,255,0.05); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border-color); }
        .gw-dot { width: 8px; height: 8px; border-radius: 50%; }
        .dot-disconnected { background-color: #9ca3af; }
        .dot-connected { background-color: #10b981; }
        .text-disconnected { color: #9ca3af; }
        .text-connected { color: #10b981; }

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

        /* --- ANIMATION SPINNER GEMINI --- */
        @keyframes gemini-sparkle {
            0% { transform: scale(0.8) rotate(0deg); filter: drop-shadow(0 0 2px #EC4899); }
            50% { transform: scale(1.2) rotate(180deg); filter: drop-shadow(0 0 8px #7C3AED); }
            100% { transform: scale(0.8) rotate(360deg); filter: drop-shadow(0 0 2px #EC4899); }
        }
        .gemini-spinner {
            display: inline-block;
            animation: gemini-sparkle 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 1.2rem;
            line-height: 1;
        }

        html, body { overflow-x: hidden; width: 100%; }
        .text-gradient { background: linear-gradient(90deg, #6C3CFF 0%, #FF3CAC 40%, #FF8C42 75%, #F9D423 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text; }

        /* 👇 VÉRIFIEZ QUE CE BLOC EST BIEN PRÉSENT 👇 */
        .text-gradient-header {
            background: linear-gradient(90deg, #00F2FE 0%, #4FACFE 40%, #7C3AED 75%, #0575E6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* --- Bandeau de mise à jour du Service Worker --- */
        #sw-update-banner {
            display: none;
            position: fixed;
            left: 50%;
            bottom: max(12px, env(safe-area-inset-bottom));
            transform: translateX(-50%);
            z-index: 3500;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 14px;
            max-width: 92vw;
            background: var(--bg-surface);
            color: var(--text-main);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 10px 14px;
            font-size: 0.85rem;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }
        #sw-update-banner.show { display: flex; }
        .sw-version { font-size: 0.7rem; color: var(--text-muted); }
        /* Lien "Voir les nouveautés" : sa propre ligne (centrée) sous le message + bouton */
        #sw-update-changelog { order: 10; flex-basis: 100%; text-align: center; margin-top: 2px; }
        #sw-update-button {
            flex-shrink: 0;
            background: linear-gradient(90deg, #6C3CFF 0%, #FF3CAC 100%);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 6px 14px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }

        /* --- Bannière d'incitation anonyme (Freemium 3F) : bas centre, discrète, refermable --- */
        #anon-banner {
            display: none;
            position: fixed;
            left: 50%;
            bottom: max(12px, env(safe-area-inset-bottom));
            transform: translateX(-50%);
            z-index: 1500;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            max-width: min(92vw, 480px);
            background: var(--bg-surface);
            color: var(--text-main);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 10px 14px;
            font-size: 0.85rem;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }
        #anon-banner.show { display: flex; }
        #anon-banner .anon-text { flex: 1 1 200px; line-height: 1.3; }
        #anon-banner .anon-cta { flex-shrink: 0; padding: 5px 12px; font-size: 0.8rem; height: auto; white-space: nowrap; }
        #anon-banner .anon-close { flex-shrink: 0; background: none; border: none; color: var(--text-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 4px; }

        /* --- ZONE COMPTE (Freemium) : bouton de connexion près du logo --- */
        .account-zone { display: flex; align-items: center; }
        .account-signin-btn { font-size: 0.7rem; padding: 4px 10px; height: auto; white-space: nowrap; }

        /* --- ZONE COMPTE : états connecté / déconnecté (Freemium 2C-2) --- */
        .acct-connected { display: none; align-items: center; gap: 6px; }
        .account-zone.is-signed-in #authSignInBtn { display: none; }
        .account-zone.is-signed-in .acct-connected { display: flex; }
        .acct-desktop { display: flex; align-items: center; gap: 6px; }
        .acct-mobile { display: none; }
        .acct-email-short { font-size: 0.7rem; color: var(--text-muted); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .acct-icon-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; transition: color 0.15s, background-color 0.15s; }
        .acct-icon-btn:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.06); }
        .acct-chip { width: 28px; height: 28px; border-radius: 50%; border: none; background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%); color: #fff; font-weight: 700; font-size: 0.8rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; }
        #acctMenu { min-width: 200px; padding: 0; }
        .acct-menu-info { padding: 10px 12px; border-bottom: 1px solid var(--border-color); }
        .acct-menu-label { font-size: 0.72rem; color: var(--text-muted); }
        .acct-menu-email { font-size: 0.8rem; color: var(--text-main); font-weight: 600; word-break: break-all; }
        .acct-menu-signout { display: block; width: 100%; text-align: left; padding: 10px 12px; background: transparent; border: none; color: #F87171; font-weight: 600; font-size: 0.85rem; cursor: pointer; }
        .acct-menu-signout:hover { background: rgba(248, 113, 113, 0.12); }
        .acct-menu-go-pro { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 11px 12px; border: none; border-bottom: 1px solid var(--border-color); background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%); color: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
        .acct-menu-go-pro:hover { filter: brightness(1.06); }

        @media (max-width: 768px) {
            .account-signin-btn { font-size: 0.7rem; padding: 7px 12px; }
        }
        /* Bascule compte desktop->mobile au MÊME seuil que le popover centré plein écran (576px) */
        @media (max-width: 576px) {
            .acct-desktop { display: none; }
            .acct-mobile { display: flex; }
        }

        /* --- GATE FREEMIUM : élément PRO verrouillé en mode FREE (visible mais grisé) --- */
        .is-locked { opacity: 0.4; filter: grayscale(1); cursor: not-allowed; }

        /* Modale d'incitation PRO : toujours au-dessus de toute autre modale/overlay
           (Paramètres .gw-widget 3000, bandeau MAJ 3500, tooltip 3100, etc.) */
        #proModal { z-index: 4000; }

        /* Modale de confirmation de déconnexion (3G-3) : au-dessus du popover compte (2000) et des Paramètres (3000) */
        #logoutModal { z-index: 4000; }
        .logout-actions { display: flex; gap: 10px; margin-top: 16px; }
        .logout-actions .btn { flex: 1; }
        .btn.logout-yes { background: #EF4444; color: #fff; border: none; }
        .btn.logout-yes:hover { background: #dc2626; opacity: 1; }
        #welcomeModal { z-index: 4000; }
        #trialEndingModal { z-index: 4000; }
        #trialExpiredModal { z-index: 4000; }
        /* Invite d'installation iOS (Temps 1) : bulle blanche non-modale, bec vers le bas, ancrée en bas, z-index sous les modales (4000) */
        .install-ios { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); width: min(360px, calc(100vw - 32px)); background: #fff; color: #1a1a2e; border: 1.5px solid #4b5563; border-radius: 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); padding: 14px 18px; z-index: 1600; display: none; }
        .install-ios.show { display: block; }
        .install-ios-text { font-size: 0.9rem; line-height: 1.5; padding-right: 18px; }
        .install-ios-text strong { font-weight: 700; }
        .install-ios-text svg { width: 1em; height: 1em; vertical-align: -0.15em; }
        .install-ios::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -12px; border: 11px solid transparent; border-top-color: #4b5563; }
        .install-ios::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -9px; border: 10px solid transparent; border-top-color: #fff; }
        .install-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: #e5e7eb; border: none; color: #1a1a2e; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        /* Variante iPad : bouton Partager Safari en haut-droite → bulle ancrée en haut-droite, bec vers le HAUT */
        .install-ios--top { top: calc(14px + env(safe-area-inset-top)); bottom: auto; left: auto; right: 12px; transform: none; }
        .install-ios--top::before { top: -12px; bottom: auto; left: auto; right: 28px; transform: none; border-top-color: transparent; border-bottom-color: #4b5563; }
        .install-ios--top::after  { top: -9px;  bottom: auto; left: auto; right: 29px; transform: none; border-top-color: transparent; border-bottom-color: #fff; }
        /* Variante sans bec (contexte 'other') */
        .install-ios--nobec::before, .install-ios--nobec::after { display: none; }
        /* Icône « installer » dans l'en-tête (desktop) */
        .install-header-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; color: #34d399; }
        /* Invite native (#install-prompt) : reutilise .install-ios ; contenu titre + benefice + bouton */
        .install-prompt-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; padding-right: 18px; }
        .install-prompt-benefit { font-size: 0.85rem; line-height: 1.4; margin-bottom: 12px; }
        .install-prompt-btn { display: inline-block; background: linear-gradient(90deg, #6C3CFF, #FF3CAC); color: #fff; border: none; border-radius: 9999px; padding: 8px 18px; font-weight: 600; cursor: pointer; }
        .welcome-actions { display: flex; margin-top: 16px; }
        .welcome-actions .btn { flex: 1; }