/* ==========================================================================
   SHORTCUTLY — CONTENU RÉSERVÉ À L'ABONNEMENT
   © Shortcutly

   Ces règles habillent les raccourcis Pro chez un utilisateur gratuit.

   À GARDER EN TÊTE
     Le flou n'est PAS le mécanisme de protection. Les combinaisons Pro ne
     sont pas dans la page : ce qui est flouté n'est qu'un décor (« ••• »),
     sans rapport avec la vraie touche. Retirer ce CSS ne révélerait rien.
     La protection est dans les données (voir app/js/19-pro-content.js) ;
     ce fichier ne fait que l'exprimer visuellement.

   L'INTENTION VISUELLE
     La carte reste entièrement lisible — titre, description, catégorie,
     systèmes compatibles. Seule la combinaison manque. On doit comprendre
     d'un coup d'œil ce que l'on gagne à s'abonner, sans que la liste
     devienne un mur de cadenas.
   ========================================================================== */

/* ---- La carte verrouillée ---------------------------------------------- */
.shortcut-card.is-pro-locked {
    position: relative;
}

/* Filet discret sur le bord : signale la carte sans crier. */
.shortcut-card.is-pro-locked::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid var(--accent-soft);
    pointer-events: none;
}

/* ---- La zone des touches ------------------------------------------------ */
.card-keys-zone.kz-locked {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* Les faux caractères. Le flou s'applique à un décor, pas à un secret. */
.kbd-key-blur {
    filter: blur(5px);
    opacity: 0.55;
    user-select: none;
    letter-spacing: 0.1em;
    /* Largeur figée : la longueur affichée ne doit rien laisser deviner
       de la vraie combinaison. */
    min-width: 3.2rem;
    text-align: center;
}

/* Sur une carte verrouillée, les touches ne réagissent pas au survol :
   rien ne doit suggérer qu'elles sont manipulables. */
.shortcut-card.is-pro-locked:hover .kbd-key {
    transform: none;
    box-shadow: var(--shadow-key);
}

.kbd-locked {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

/* ---- L'appel à l'abonnement, par-dessus la zone ------------------------- */
.kz-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem;
    text-align: center;
    background: linear-gradient(to bottom,
            transparent 0%,
            var(--bg-card, rgba(255, 255, 255, 0.72)) 45%,
            var(--bg-card, rgba(255, 255, 255, 0.92)) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
}

.kz-lock-icon {
    font-size: 0.95rem;
    line-height: 1;
    flex: none;
}

.kz-lock-text {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    /* La phrase peut être longue en anglais : on la laisse revenir à la ligne
       plutôt que déborder de la carte. */
    min-width: 0;
    line-height: 1.25;
}

.card-keys-zone.kz-locked:hover .kz-lock-text,
.card-keys-zone.kz-locked:focus-visible .kz-lock-text {
    text-decoration: underline;
}

.card-keys-zone.kz-locked:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Les boutons neutralisés ------------------------------------------- */
/* Ils restent visibles et cliquables — un clic explique pourquoi c'est
   verrouillé. Un bouton grisé qui ne répond pas laisserait croire à une
   panne. */
.card-act.is-pro-locked {
    opacity: 0.4;
    cursor: pointer;
}

.card-act.is-pro-locked:hover {
    opacity: 0.7;
}

/* ---- La mention « Pro » en pied de carte -------------------------------- */
.card-pro-cta {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-light);
    padding: 0.12rem 0.45rem;
    border-radius: 0.3rem;
}

/* ==========================================================================
   BANDEAU D'INVITATION, EN TÊTE DE LISTE
   ========================================================================== */
/* ==========================================================================
   BANDEAU D'ABONNEMENT

   CE QUI N'ALLAIT PAS
     Un rectangle d'une couleur pâle, un texte, un bouton. Il ne se
     distinguait pas d'un message d'erreur, et il s'étirait sur toute la
     hauteur disponible dès que son conteneur le laissait faire — d'où
     l'impression de bloc vide.

   CE QUI CHANGE
     • un fond dégradé et une lueur, qui le sortent du gris ambiant ;
     • une étiquette « Formule Pro » : on annonce ce dont il s'agit AVANT de
       le dire, ce qui évite l'effet publicité sauvage ;
     • trois arguments courts plutôt qu'une phrase — on les lit vraiment ;
     • une jauge qui montre la part accessible : le chiffre se comprend
       instantanément, sans être lu ;
     • une hauteur qui suit son contenu (align-self: start), et plus son
       conteneur.

   TROIS EMPLACEMENTS, deux formes : complète en tête de liste, compacte
   dans la colonne et en bas de page. Voir renderProBanner().
   ========================================================================== */
.pro-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    /* La hauteur suit le contenu. Sans cela, dans une colonne en grille, le
       bandeau s'etire sur toute la hauteur disponible et devient un grand
       rectangle presque vide — c'etait le defaut le plus visible. */
    align-self: start;
    margin: 0 0 1.1rem;
    padding: 1.15rem 1.3rem;
    border: 1px solid var(--accent-ring, rgba(225, 29, 72, .28));
    border-radius: 0.95rem;
    background:
        linear-gradient(135deg,
            var(--accent-soft, rgba(225, 29, 72, .10)) 0%,
            transparent 55%),
        var(--bg-card, rgba(255, 255, 255, .6));
}

/* La lueur : un halo diffus dans l'angle, qui donne du relief sans peser. */
.pro-banner-glow {
    position: absolute;
    z-index: -1;
    top: -70%;
    right: -12%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle,
            var(--accent-soft, rgba(225, 29, 72, .16)),
            transparent 68%);
    pointer-events: none;
}

.pro-banner-corps {
    flex: 1 1 auto;
    /* Indispensable en conteneur flex : sans lui, un texte long pousse le
       bandeau au-dela de la largeur de la page. */
    min-width: 0;
}

.pro-banner-etiquette {
    display: inline-block;
    margin-bottom: 0.45rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    border-radius: 100px;
}

.pro-banner-titre {
    margin: 0 0 0.25rem;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--text-primary, inherit);
}

.pro-banner-sous {
    margin: 0 0 0.6rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-secondary, inherit);
}

.pro-banner-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pro-banner-points li {
    position: relative;
    padding-left: 1.05rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, inherit);
}

/* La coche est dessinee en CSS : pas de glyphe a charger, et elle suit la
   couleur d'accent dans les deux themes. */
.pro-banner-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.38em;
    width: 0.42rem;
    height: 0.24rem;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}

.pro-banner-action {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    min-width: 9.5rem;
}

/* --- La jauge ---------------------------------------------------------- */
.pro-jauge {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pro-jauge-fond {
    display: block;
    height: 5px;
    border-radius: 5px;
    background: var(--bg-surface-2, rgba(148, 163, 184, .25));
    overflow: hidden;
}

.pro-jauge-part {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
}

.pro-jauge-txt {
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-secondary, inherit);
    font-variant-numeric: tabular-nums;
}

/* --- Le bouton --------------------------------------------------------- */
.pro-banner-cta {
    flex: none;
    display: inline-block;
    padding: 0.55rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    border: none;
    border-radius: 0.55rem;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 16px -6px var(--accent);
    transition: transform .18s ease, box-shadow .18s ease;
}

.pro-banner-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px var(--accent);
    color: #fff;
}

/* --- Version compacte (colonne, bas de liste) -------------------------- */
.pro-banner-mini {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    padding: 0.95rem 1rem;
}

.pro-banner-mini .pro-banner-titre {
    font-size: 0.9rem;
    margin: 0;
}

/* --- Telephone ---------------------------------------------------------
   La colonne d'action passe SOUS le texte : cote a cote, il resterait moins
   de 8 rem au texte, et chaque argument tiendrait sur trois lignes. */
@media (max-width: 680px) {
    .pro-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.9rem;
        padding: 1rem;
    }

    .pro-banner-action {
        min-width: 0;
    }

    .pro-banner-points {
        gap: 0.3rem 0.85rem;
    }

    .pro-banner-points li {
        font-size: 0.76rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pro-banner-cta {
        transition: none;
    }

    .pro-banner-cta:hover {
        transform: none;
    }
}

/* ==========================================================================
   FONCTIONNALITÉS RÉSERVÉES (Détecteur, Entraînement)
   ========================================================================== */
.pro-feature-lock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.pro-feature-lock .pfl-icon {
    font-size: 2rem;
    line-height: 1;
}

.pro-feature-lock .pfl-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary, inherit);
}

.pro-feature-lock .pfl-body {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary, inherit);
    max-width: 34ch;
}

/* ---- La modale d'explication -------------------------------------------- */
.pro-modal-card {
    max-width: 26rem;
}

.pro-modal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.35rem;
}

.pro-modal-close, .pro-modal-activate {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, inherit);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.45rem;
    cursor: pointer;
}

.pro-modal-close:hover, .pro-modal-activate:hover {
    background: var(--bg-key);
}

/* ---- Cadenas dans les suggestions de recherche -------------------------- */
.suggestion-key-locked {
    color: var(--accent);
    background: var(--accent-light);
    border-color: var(--accent-soft);
    font-weight: 800;
    white-space: nowrap;
}

/* ---- Pastille « Pro » sur les lanceurs verrouillés ---------------------- */
.launcher-pro-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

#detectorLaunch.is-pro-locked,
#quizLaunch.is-pro-locked {
    position: relative;
}

/* ==========================================================================
   ADAPTATION MOBILE
   Sur un écran étroit, le bandeau passe en colonne et le bouton prend toute
   la largeur — plus facile à atteindre au pouce.
   ========================================================================== */
@media (max-width: 560px) {
    .pro-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .pro-banner-cta {
        width: 100%;
        text-align: center;
    }

    .kz-lock-text {
        font-size: 0.72rem;
    }
}

/* ==========================================================================
   RETOUR D'ACTIVATION ET GESTION DES ACCÈS  (js/22-activation-ui.js)

   Reprend les jetons et les proportions de la modale Pro ci-dessus : c'est
   la même famille de dialogues, l'utilisateur ne doit pas avoir l'impression
   de changer d'application entre les deux.
   ========================================================================== */

.act-modal-card {
    max-width: 28rem;
}

/* #sysDialog (04-core-dom-theme.js, spConfirm) réutilise cette même carte
   pour remplacer window.confirm()/window.alert(). Certaines modales de l'app
   (bienvenue, clavier, détecteur, entraînement) portent un z-index RELEVÉ EN
   LIGNE dans index.html (9999), au-dessus du 100 de base de .modal-overlay.
   Un dialogue système doit pouvoir s'ouvrir PAR-DESSUS n'importe laquelle
   d'entre elles — c'est le sens même d'un confirm(). */
#sysDialog {
    z-index: 10000;
}

.act-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.act-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.act-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary, inherit);
}

/* La carte a désormais un fond opaque (--modal-surface) : le texte peut
   donc être posé en pleine couleur, sans voile d'opacité. Ce voile était
   une rustine contre un fond qui transparaissait — la cause a disparu, la
   rustine aussi, et le contraste y gagne. */
.act-body {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    font-weight: 500;
    color: var(--text-primary, inherit);
    max-width: 40ch;
}

/* Le symbole d'en-tête dit d'un coup d'œil si l'on est devant une réussite
   ou un refus. En gris, les deux se ressemblaient. */
.act-head[data-tone="error"] .act-icon {
    color: var(--danger, #e11d48);
}

.act-head[data-tone="success"] .act-icon {
    color: #16a34a;
}

/* --- Liste des appareils ouverts --------------------------------------- */

.act-seats {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.act-seat {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border, rgba(148, 163, 184, 0.28));
    border-radius: 0.55rem;
    background: var(--surface-2, rgba(148, 163, 184, 0.06));
}

.act-seat-icon {
    font-size: 1.1rem;
    line-height: 1;
    flex: none;
}

.act-seat-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.act-seat-name {
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--text-primary, inherit);
    /* Un libellé d'appareil peut être long : on coupe plutôt que de pousser
       le bouton « Fermer » hors de la carte. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.act-seat-name em {
    font-style: normal;
    font-weight: 500;
    color: var(--accent);
}

.act-seat-date {
    font-size: 0.72rem;
    color: var(--text-tertiary, var(--text-secondary, inherit));
}

/* --- Boutons ----------------------------------------------------------- */

.act-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.act-btn {
    display: inline-block;
    padding: 0.45rem 0.95rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 0.45rem;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.act-btn-primary {
    color: #fff;
    background: var(--accent);
}

/* « Fermer » est souvent le SEUL bouton de la carte : transparent et gris,
   il ne se voyait pas comme un bouton. Il porte donc une vraie surface et
   une bordure franche — sans pour autant rivaliser avec l'action principale,
   qui reste seule en rouge plein. */
.act-btn-ghost {
    color: var(--text-primary, inherit);
    font-weight: 650;
    background: var(--bg-surface-2, rgba(148, 163, 184, 0.14));
    border-color: var(--border, rgba(148, 163, 184, 0.55));
}

.act-btn-ghost:hover {
    background: var(--bg-surface-3, rgba(148, 163, 184, 0.24));
    border-color: var(--text-tertiary, rgba(148, 163, 184, 0.8));
}

.act-btn-small {
    flex: none;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    color: var(--text-secondary, inherit);
    background: transparent;
    border-color: var(--border, rgba(148, 163, 184, 0.35));
}

.act-btn-small:hover:not(:disabled) {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.act-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.act-error {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    text-align: center;
    color: var(--danger, #e11d48);
}

/* Marche à suivre sous la liste des appareils.

   L'écran ne propose plus de fermer l'accès d'un autre appareil — une place
   ne se rend que depuis celui qui l'occupe. Il faut donc DIRE comment faire,
   sinon l'utilisateur reste devant une liste sans issue. Ce texte occupe la
   place qu'occupaient les boutons : c'est lui, désormais, l'action. */
.act-hint {
    margin: 0.85rem 0 0;
    padding: 0.7rem 0.8rem;
    font-size: 0.8rem;
    line-height: 1.5;
    border-radius: 0.55rem;
    border: 1px solid var(--border, rgba(148, 163, 184, 0.28));
    background: var(--surface-2, rgba(148, 163, 184, 0.06));
    color: var(--text-2, #64748b);
}

@media (max-width: 30rem) {
    .act-seat {
        flex-wrap: wrap;
    }

    .act-btn-small {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   ÉTAT D'ACTIVATION DU PRODUIT (modale Paramètres)

   Deux états, deux couleurs, lisibles d'un coup d'œil : vert quand
   l'abonnement est actif, neutre en version gratuite. Pas de rouge — être
   en version gratuite n'est pas une anomalie, c'est une offre.
   ========================================================================== */
.activation-state {
    text-align: left;
    padding: 0.85rem 1rem;
    margin: 0 0 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    /* PAS --bg-card (verre à 28/35 %) : depuis que #systemModal .modal-card
       est lui-même translucide (voir 13-autocomplete-highlight-systemmodal-
       touch.css), empiler deux fonds incertains l'un sur l'autre repro-
       duisait le badge « Pro » vert illisible que --modal-surface avait
       justement corrigé — mesuré sous 2,7:1 de contraste dans le pire cas.
       Un fond quasi opaque et déterministe, indépendant de ce qu'il y a
       dessous, garde ce texte coloré lisible quel que soit l'écran ouvert
       derrière la modale. */
    background: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"] .activation-state {
    background: rgba(23, 30, 46, 0.92);
}

.activation-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.activation-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-tertiary, #94a3b8);
}

.activation-state[data-state="pro"] .activation-dot {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
}

.activation-label {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
}

.activation-badge {
    margin-left: auto;
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-surface-2, rgba(148, 163, 184, 0.12));
}

.activation-state[data-state="pro"] .activation-badge {
    color: #16a34a;
    background: rgba(22, 163, 74, 0.12);
}

.activation-detail {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.activation-cta {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--accent, #e11d48);
    text-decoration: none;
}

.activation-cta:hover {
    text-decoration: underline;
}

.activation-cta[hidden] {
    display: none;
}

/* --- QUITTER / SE DÉCONNECTER -------------------------------------------

   Discret par construction. C'est une sortie, pas une action qu'on cherche
   à provoquer : la mettre en avant au même titre que « Valider » ferait
   cliquer dessus par erreur, et en Pro l'erreur coûte une réactivation.
   Le rouge n'apparaît qu'au survol, quand l'intention est déjà là. */
.activation-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.7rem 1rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.activation-logout svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.activation-logout:hover {
    color: var(--danger, #e11d48);
    border-color: var(--danger-border, rgba(225, 29, 72, .3));
    background: var(--danger-soft, rgba(225, 29, 72, .08));
}

.activation-logout:disabled {
    opacity: .6;
    cursor: default;
}


/* ==========================================================================
   BARRE D'ACTIVITE  (app/js/23-progress.js)

   Fine, en haut de la fenetre, au-dessus de tout — y compris des modales,
   puisqu'une activation se declenche precisement depuis une modale.

   Elle n'annonce pas une progression mesuree : voir la note du module.
   ========================================================================== */
.sp-activity {
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.sp-activity.is-on {
    opacity: 1;
}

.sp-activity-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    box-shadow: 0 0 10px -1px var(--accent);
    transition: width .45s cubic-bezier(.15, .85, .35, 1);
}

/* La fermeture est plus vive que la montee : on veut sentir que c'est fini,
   pas regarder la barre finir tranquillement son parcours. */
.sp-activity.is-done .sp-activity-fill {
    transition: width .18s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .sp-activity-fill {
        transition: none;
    }
}

/* Invitation Pro compacte et centrée, commune à tous ses lanceurs. */
#proModal { display:grid; place-items:center; padding:16px; z-index:10001; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
#proModal .pro-modal-card { position:relative; isolation:isolate; width:100%; max-width:340px; min-height:0; height:auto; max-height:calc(100dvh - 32px); margin:0; padding:20px; gap:0; border-radius:22px; overflow:auto; background:transparent; border-color:rgba(255,255,255,.34); box-shadow:0 18px 48px rgba(25,32,53,.2),0 3px 10px rgba(25,32,53,.09); --text-primary:#f4f6fb; --text-secondary:#e0e5ef; --border-color:rgba(230,240,255,.23); }
#proModal .pro-modal-card::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background:linear-gradient(165deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 44%,rgba(10,15,29,.10)),rgba(24,31,47,.70); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); box-shadow:inset 0 2px 2px rgba(255,255,255,.20); }
#proModal .pro-modal-card::after { content:""; position:absolute; inset:2px; z-index:-1; pointer-events:none; border-radius:inherit; border-top:1px solid rgba(255,255,255,.24); border-bottom:1px solid rgba(255,255,255,.16); background:radial-gradient(ellipse at 12% 0%,rgba(255,255,255,.10),transparent 48%); }
[data-theme=dark] #proModal .pro-modal-card::before { background:linear-gradient(165deg,rgba(169,183,215,.12),rgba(255,255,255,.025) 45%,rgba(10,15,29,.12)),rgba(31,36,49,.52); }
[data-theme=dark] #proModal .pro-modal-card { border-color:rgba(214,225,250,.26); box-shadow:0 18px 48px #0005,0 3px 10px #0003; }
#proModal .pro-feature-lock { padding:0; gap:12px; }
#proModal .pfl-icon { font-size:24px; }
#proModal .pfl-title { margin:0; font-size:16px; line-height:1.35; }
#proModal .pfl-body { margin:0; font-size:13px; line-height:1.5; max-width:none; }
#proModal .pro-modal-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; width:100%; gap:8px; margin:2px 0 0; }
#proModal :is(.pro-banner-cta,.pro-modal-close,.pro-modal-activate) { width:auto; min-width:0; min-height:44px; padding:10px 12px; font-size:12px; display:flex; align-items:center; justify-content:center; border-radius:12px; }
#proModal .pro-modal-activate { grid-column:1/-1; grid-row:2; }
#proModal :is(a,button):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(prefers-reduced-transparency:reduce) { #proModal .pro-modal-card::before,[data-theme=dark] #proModal .pro-modal-card::before { backdrop-filter:none; -webkit-backdrop-filter:none; background:#18202f; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { #proModal .pro-modal-card::before,[data-theme=dark] #proModal .pro-modal-card::before { background:#18202f; } }
@media(forced-colors:active) { #proModal .pro-modal-card { background:Canvas; border-color:CanvasText; --text-primary:CanvasText; --text-secondary:CanvasText; --border-color:CanvasText; } #proModal .pro-modal-card::before,#proModal .pro-modal-card::after { display:none; } }