/* ═══════════════════════════════════════════
   ScorlyBoard — migration.css
   La modale « ScorlyBoard a déménagé »
   (common/migration.js).

   Bâtie sur la modale d'info du menu :
   .modal-overlay, .info-modal et ses parties
   viennent de menu.css. Ici, seulement le
   contenu, et rien que des variables de
   thème : aucune surcharge claire à prévoir
   dans themes/light/light.css.
   ═══════════════════════════════════════════ */

.mig-modal { max-height: 88vh; }

.mig-body { padding: 16px 20px 0; }

.mig-intro {
    font-size: 0.86rem;
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: 16px;
}
.mig-intro strong { color: var(--text); font-weight: 600; }

/* ── Étapes ── */
.mig-step {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    background: var(--glass-subtle);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;
}
.mig-num {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.82rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.mig-step-body { flex: 1; min-width: 0; }
.mig-step-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    margin: 3px 0 10px;
    line-height: 1.35;
}
.mig-step-title strong { font-weight: 700; }
.mig-step-text {
    font-size: 0.83rem;
    color: var(--muted);
    line-height: 1.6;
}
.mig-step-text strong { color: var(--text); font-weight: 600; white-space: nowrap; }

/* ── Boutons ── */
.mig-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: var(--accent);
    color: var(--on-accent);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.mig-btn:active { transform: scale(0.97); }
.mig-btn--second {
    background: var(--glass);
    border-color: var(--border);
    color: var(--text);
}
.mig-btn--second:active { background: var(--glass-hover); }

/* L'adresse, en clair : on peut aussi la sélectionner d'un appui long.
   Le reste du style vient de input[type="text"] (style.css). */
.mig-url {
    width: 100%;
    margin-bottom: 8px;
    text-align: center;
    font-weight: 600;
}

.mig-ok {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text);
    line-height: 1.45;
    word-break: break-all;
}

.mig-note {
    margin: 4px 2px 0;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.5;
}