/* Intégrations : clés d'API (Profil, Comptes) et webhooks d'un tableau (web/integrations.js). */
.integ p { margin: 0 0 10px; }
.integ-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; align-items: end; margin-bottom: 12px; }
.integ-form label.small { display: block; margin: 0 0 4px; font-weight: 600; color: var(--subtle); }
.integ-form .btn { margin-top: 0; }
.integ-form .integ-wide { grid-column: 1 / -1; }
.integ-keys code, .integ-hook code { font-size: 12px; word-break: break-all; }
.integ-keys td { vertical-align: middle; } .integ-keys .btn { margin-top: 0; }
.integ-fresh { border: 1px solid var(--warn); background: var(--tint-orange); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }
.integ-fresh .btn { margin-top: 6px; }
.integ-token { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.integ-token code { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; font-size: 12px; word-break: break-all; flex: 1; min-width: 200px; }
.integ-hook { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.integ-hook.off { opacity: .6; }
.integ-hook-hdr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.integ-spacer { flex: 1; }
.integ-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.integ-err { color: var(--danger); margin-top: 4px; }
.integ-dlv { padding: 2px 0; } .integ-dlv.ok { color: var(--success); } .integ-dlv.ko { color: var(--danger); }
.integ-sub { font-size: 14px; margin: 18px 0 8px; }
.integ-events { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 12px; margin-bottom: 10px; }
@media (max-width: 640px) { .integ-keys th:nth-child(4), .integ-keys td:nth-child(4) { display: none; } }