/* ═══════════════════════════════════════════════════════════════════
   Section « intégrations » — alignée sur la grammaire des sections
   voisines.

   LE SCHÉMA EST UNE IFRAME
   `assets/integrations/logos-animation.html`. Odoo, Pipedrive et
   HubSpot y ont été retirés, et les cinq logos restants redistribués
   pour ne pas laisser une moitié d'anneau vide. Contours et coins des
   cartes de logo sont repris là-bas : une feuille extérieure n'atteint
   pas l'intérieur d'une iframe.

   CE QUI CHANGE ICI
   Le fond vert pâle et le rayon de 48 px sur les seuls coins hauts
   disparaissent — les sections voisines reposent sur le fond de page.
   Et la grille reçoit un écart : elle déclarait `48% 52%` sans `gap`,
   les deux colonnes se touchaient bord à bord. Le même défaut que la
   section « prospection responsable », masqué par le même moyen — un
   fond coloré qui faisait lire l'ensemble comme un bloc.
   ═══════════════════════════════════════════════════════════════════ */

.integrations {
  background: transparent !important;
  border-radius: 0 !important;
  min-height: 0 !important;

  /* Fractions plutôt que pourcentages : avec un `gap`, 48 % + 52 % plus
     l'espace dépasse la largeur et la seconde colonne déborde. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
  gap: 56px !important;
}

@media (max-width: 900px) {
  .integrations {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* ── Les pastilles d'outils ─────────────────────────────────────────
   Leur contour était à `rgba(73,162,94,.16)` — un vert à 16 %
   d'opacité, soit 1,2:1 sur blanc. Invisible. On reprend le filet net
   des tuiles voisines. */
.tool-list { gap: 10px !important; margin: 24px 0 !important; }
.tool-list span {
  background: #fff !important;
  border: 1.5px solid #0B3B2C !important;
  border-radius: 999px !important;
  padding: 9px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  /* #0B2418 : 16,41:1 sur blanc. Le #315B3F d'origine passait déjà,
     mais l'encre du site est plus franche à cette taille. */
  color: #0B2418 !important;
}

/* ── Le texte ───────────────────────────────────────────────────────
   `--muted` vaut #5a6d64 : 5,52:1 sur blanc, ce qui passe. On le pose
   explicitement pour ne pas dépendre d'une variable que les couches
   suivantes redéfinissent. */
.integration-copy > p { color: #476154 !important; }
.integration-copy .eyebrow { color: #316D3F !important; }

/* Le lien de bas de section reprend le vert lisible des voisines. */
.integrations .text-link { color: #316D3F !important; }

@media (prefers-reduced-motion: reduce) {
  .integrations .text-link span { transition: none !important; }
}

@media (prefers-contrast: more) {
  .tool-list span { border-width: 2px !important; }
  .integration-copy > p { color: #2A3B33 !important; }
}

/* ── Le halo vert derrière l'anneau ─────────────────────────────────
   `.integration-animation:before` posait un dégradé radial — blanc au
   centre, `rgba(16,163,110,.08)` à mi-parcours — adouci d'un flou de
   2 px. Une troisième texture après le fond de section et les cercles
   de l'orbite, pour une seule séparation à faire.

   Les filtres de flou du SVG lui-même ne sont plus référencés depuis
   le retrait des ombres portées : ils ne dessinent plus rien. */
.integration-animation::before { display: none !important; }

/* Le fond de section portait aussi un dégradé vertical, blanc vers
   #F3FAF5. Neutralisé plus haut par `background: transparent`, on le
   redit ici pour que la règle reste lisible d'un seul tenant. */
.integrations { background-image: none !important; }