.telegram-connect-page { max-width:1140px; margin:0 auto; }
.tg-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.tg-heading h1 { margin:6px 0 8px; }
.tg-heading p { color:var(--muted); margin:0; line-height:1.6; }
.tg-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:20px; align-items:start; }
.tg-accounts { display:flex; flex-direction:column; gap:8px; }
.tg-account { display:flex; align-items:center; gap:12px; text-align:left; width:100%; padding:16px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); cursor:pointer; }
.tg-account.selected { border-color:#78c7ef; background:#edf8ff; box-shadow:inset 3px 0 #159bd6; }
.tg-account > span:nth-child(2) { flex:1; min-width:0; }
.tg-account b, .tg-account small { display:block; overflow-wrap:anywhere; }
.tg-account b { font-size:13px; line-height:1.4; }
.tg-account small { font-size:11px; color:var(--muted); margin-top:4px; }
.tg-account-icon { color:#168dca; background:#dff2fc; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:21px; flex:none; }
.tg-connection-dot { height:7px; width:7px; border-radius:50%; background:#b8c7d3; flex:none; }
.tg-connection-dot.online { background:#2d9b73; }
.tg-connection-dot.reconnecting { background:#d39b2c; }
.tg-detail { padding:28px; min-width:0; margin:0; }
.tg-detail-header { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.tg-detail-header h2 { font-size:21px; margin:6px 0 0; overflow-wrap:anywhere; }
.tg-detail-header .badge { flex:none; }
.tg-detail h3 { font-size:18px; margin:0 0 10px; }
.tg-description { color:var(--muted); line-height:1.8; margin:16px 0 20px; }
.tg-methods { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.tg-detail .f input { width:100%; max-width:380px; }
/* Tunnel d'installation : la page n'a qu'un sujet, le code a scanner. Pas de liste a un
   element, pas d'en-tete qui repete un nom deja connu — le carre blanc et les instructions,
   et c'est tout. */
.telegram-connect-setup { padding-top:4px; }
.tg-layout-setup { display:block; }
.tg-layout-setup .tg-detail { max-width:none; }
.tg-layout-setup .tg-qr-layout { gap:34px; align-items:center; }
.tg-layout-setup .tg-qr-frame { width:260px; height:260px; }
.tg-layout-setup .tg-qr-frame img { width:224px; height:224px; }
.tg-layout-setup .tg-methods { margin-bottom:22px; }

/* Saisie du numero de telephone. Un champ nu en pleine largeur, c'est ce qu'on remplit le
   moins volontiers : on lui donne la largeur d'un numero, un indicatif annonce et une aide
   qui dit par ou le code arrive — c'est la question la plus posee a cette etape. */
.tg-phone-field { margin:16px 0 4px; }
.tg-phone-field label { display:block; font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:#52708c; margin-bottom:7px; }
.tg-phone-input { display:flex; align-items:center; gap:10px; max-width:340px; padding:0 14px; background:#fff; border:1px solid #d7e3ee; border-radius:10px; transition:border-color .12s, box-shadow .12s; }
.tg-phone-input:focus-within { border-color:#2aabee; outline:2px solid #2aabee; outline-offset:-2px; box-shadow:none; }
.tg-phone-icon { flex:none; color:#8fa6ba; }
.tg-phone-input:focus-within .tg-phone-icon { color:#2aabee; }
.tg-phone-input input { flex:1; min-width:0; border:0; outline:0; background:none; padding:14px 0; font:inherit; font-size:17px; letter-spacing:.6px; color:#172d40; }
.tg-phone-input input::placeholder { color:#a7b8c9; letter-spacing:.4px; }
.tg-phone-hint { max-width:420px; margin:9px 0 0; font-size:12px; line-height:1.65; color:var(--muted); }
.tg-phone-hint b { color:#52708c; font-weight:600; }

.tg-consent { display:flex; align-items:flex-start; gap:12px; line-height:1.7; font-size:12px; background:#f2f8fd; border:1px solid #e0edf6; padding:15px; border-radius:9px; margin:20px 0; cursor:pointer; }
.tg-consent input { width:17px; height:17px; margin:3px 0 0; flex:none; accent-color:#159bd6; }
.tg-consent b { display:block; font-weight:600; }
.tg-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:20px; }
.tg-qr-layout { display:grid; grid-template-columns:248px minmax(0,1fr); gap:24px; align-items:center; }
.tg-qr-frame { width:248px; height:248px; padding:12px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:#fff; }
.tg-qr-frame img { width:224px; height:224px; display:block; }
.tg-qr-frame [hidden], .tg-detail [hidden] { display:none; }
.tg-steps { padding-left:22px; margin:12px 0; color:var(--muted); }
.tg-steps li { padding:5px 0 5px 4px; line-height:1.7; }
.tg-steps li::marker { color:#168dca; font-weight:600; }
.tg-steps b { color:var(--ink); }
.tg-confirm-profile { display:flex; align-items:center; gap:15px; padding:18px; background:#f5faff; border-radius:10px; }
.tg-profile-avatar { width:56px; height:56px; display:grid; place-items:center; flex:none; border-radius:50%; background:#ccecff; color:#0879ac; font-size:25px; }
.tg-confirm-profile h3 { margin:6px 0 4px; overflow-wrap:anywhere; }
.tg-confirm-profile p { color:var(--muted); margin:0; overflow-wrap:anywhere; }
.tg-connected { display:flex; align-items:center; gap:15px; }
.tg-connected-icon { display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:50%; color:#228b67; background:#e0f4eb; font-size:24px; }
.tg-reconnecting .tg-connected-icon { color:#9a6a12; background:#fbf0d9; }
.tg-login-required { margin:0 0 16px; }
.tg-connected h3 { margin-bottom:6px; }
.tg-connected p { color:var(--muted); margin:0; overflow-wrap:anywhere; }
.tg-connected-footer { display:flex; justify-content:space-between; align-items:center; gap:15px; padding-top:20px; margin-top:24px; border-top:1px solid var(--line); }
.tg-history { margin-top:24px; padding:18px; background:#f5faff; border-radius:10px; }
.tg-history:empty { display:none; }
.tg-history h4 { margin:0 0 9px; font-size:13px; }
.tg-history p { line-height:1.8; }
.tg-history-counts { color:#2276a1; }
.tg-disconnect { color:#a44848; }
.tg-disconnect:hover { background:#fff1f1; border-color:#e5b8b8; }
.tg-demo { display:flex; align-items:flex-start; gap:12px; padding:16px; background:#fff9ea; border-radius:9px; }
.tg-demo > span { font-size:23px; }
.tg-demo p { color:var(--muted); line-height:1.7; margin:5px 0 0; }
.tg-demo-retry { margin-top:20px; }
.tg-demo-retry summary { color:#1685b7; cursor:pointer; font-size:12px; }
.tg-demo-retry[open] summary { margin-bottom:15px; }
.tg-empty-state, .tg-wait { padding:20px 8px; text-align:center; }
.tg-empty-state > span { display:block; font-size:32px; margin-bottom:15px; }
.tg-empty-state p, .tg-wait p { color:var(--muted); line-height:1.8; max-width:470px; margin:10px auto 20px; }
.tg-wait-dot { display:block; width:24px; height:24px; border:3px solid #d5edf9; border-top-color:#159bd6; border-radius:50%; margin:0 auto 18px; animation:tg-spin 1s linear infinite; }
.tg-terminal { margin-bottom:20px; }
.tg-terminal p { line-height:1.7; }
.tg-sharing { display:flex; align-items:flex-start; gap:12px; margin:24px 0; padding:0 4px; color:var(--muted); }
.tg-sharing > span { font-size:20px; }
.tg-sharing b { color:var(--ink); font-size:12px; }
.tg-sharing p { font-size:12px; line-height:1.8; margin:5px 0 0; max-width:850px; }
.tg-dialog-error { color:#a44848; line-height:1.7; margin-bottom:15px; }
#tg-disconnect-dialog > p { line-height:1.8; color:var(--muted); }
@keyframes tg-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .tg-wait-dot { animation:none; } }
@media (max-width:1100px) { .tg-layout { grid-template-columns:210px minmax(0,1fr); } .tg-qr-layout { grid-template-columns:1fr; } .tg-qr-frame { margin:0 auto; } }
@media (max-width:720px) { .tg-layout { grid-template-columns:1fr; } .tg-accounts { flex-direction:row; flex-wrap:wrap; } .tg-account { width:auto; flex:1 1 180px; } .tg-detail { padding:20px; } .tg-heading { align-items:flex-start; } .tg-detail-header { align-items:flex-start; } .tg-detail-header h2 { font-size:19px; } .tg-connected-footer { flex-wrap:wrap; } }

/* Pictogrammes dessines plutot que des emojis : un emoji s'affiche en carre vide partout ou
   sa police manque, ce qu'un navigateur sans polices emoji montre tout de suite. */
.tg-ico { flex:none; color:#8fa6ba; }
.tg-sharing .tg-ico { color:#c08a2e; }
.tg-account-icon .tg-ico { color:#2aabee; }