/* Intégrations : hub animé (le G au centre, cinq connecteurs reliés) et liste des connecteurs.
 * Logos : Simple Icons (CC0), marques de leurs propriétaires respectifs, colorés par jetons. */
:root { --logo-github: #181717; --logo-gitlab: #FC6D26; --logo-discord: #5865F2; --logo-claude: #D97757; --logo-mcp: #1A1625; }
:root[data-theme="dark"] { --logo-github: #F5F3FF; --logo-discord: #8891F2; --logo-mcp: #F5F3FF; }
.logo-github { fill: var(--logo-github); } .logo-gitlab { fill: var(--logo-gitlab); } .logo-discord { fill: var(--logo-discord); }
.logo-claude { fill: var(--logo-claude); } .logo-mcp { fill: var(--logo-mcp); }

.integr-grille { display: grid; gap: 48px; align-items: center; margin-top: 48px; }
.hub { position: relative; width: 100%; max-width: 460px; aspect-ratio: 460 / 420; margin-inline: auto; }
.hub-fils { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-n { position: absolute; width: 14.8%; height: 16.2%; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--trait); border-radius: 18px; box-shadow: var(--ombre-douce); }
.hub-n svg { width: 46%; height: auto; }
.hub-c { position: absolute; left: 41.3%; top: 40.5%; width: 17.4%; height: 19%; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1.5px solid var(--marque); border-radius: 22px; box-shadow: var(--ombre); }
.hub-c svg { width: 52%; height: auto; }
.h1 { left: 42.6%; top: 6.2%; } .h2 { left: 77.8%; top: 31%; } .h3 { left: 64.3%; top: 70.7%; } .h4 { left: 20.9%; top: 70.7%; } .h5 { left: 7.4%; top: 31%; }

.connecteurs { display: grid; gap: 0; }
.connecteurs li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; border-top: 1px solid var(--trait); }
.connecteurs li:last-child { border-bottom: 1px solid var(--trait); }
.connecteurs svg { width: 32px; height: 32px; margin-top: 2px; }
.connecteurs h3 { font-size: 1.125rem; }
.connecteurs p { margin-top: 4px; color: var(--texte-attenue); font-size: 0.9375rem; }
@media (min-width: 960px) { .integr-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }

@media (prefers-reduced-motion: no-preference) {
  .hub-fils .fil { stroke-dasharray: 100; animation: trace-fil 900ms ease-out both; }
  .hub-fils .impulsion { visibility: visible; animation: circule 2.6s linear infinite; }
  .hub-fils .impulsion:nth-of-type(2n) { animation-duration: 2.9s; } .hub-fils .impulsion:nth-of-type(3n) { animation-duration: 3.2s; }
  .hub-n { transition: translate 250ms, border-color 250ms; animation: flotte 6s ease-in-out infinite; }
  .h2 { animation-delay: 1.2s; } .h3 { animation-delay: 2.4s; } .h4 { animation-delay: 3.6s; } .h5 { animation-delay: 4.8s; }
  .hub-n:hover { border-color: var(--marque); }
}