/* AGENTS · titre centré, six cartes blanches (icône, titre, texte), une ligne « sur mesure » */
.agents { padding-top: var(--gap); text-align: center; }
.agents h2 { max-width: 26ch; margin: 14px auto 48px; }
.grid6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: transform 300ms var(--ease), box-shadow 300ms ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(21, 20, 27, .28); }
.card .ico { margin-bottom: 6px; }
.card p { color: var(--soft); font-size: 15px; }
.card:nth-child(3n+2) { transition-delay: 60ms; }
.card:nth-child(3n) { transition-delay: 120ms; }
.custom { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(28px, 3.4vw, 44px); border-radius: 18px; background: var(--violet-deep); color: #fff; text-align: left; }
.custom h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.025em; }
.custom p { margin-top: 10px; max-width: 54ch; color: #DCD3F7; }
.custom .pill { flex: none; background: #fff; color: var(--violet-deep); }
.custom .pill:hover { background: var(--ink); color: #fff; }
@media (max-width: 760px) { .custom { flex-direction: column; align-items: flex-start; } }

@media (max-width: 900px) { .grid6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid6 { grid-template-columns: 1fr; } }

/* la carte large : un agent qui relie plusieurs services */
.card--wide { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: 18px; background: var(--violet-soft); border-color: transparent; }
.card--wide .ico { background: #fff; margin: 0; flex: none; }
.card--wide h3 { font-size: 20px; margin-bottom: 6px; }
.card--wide p { color: var(--text); max-width: 70ch; }
@media (max-width: 600px) { .card--wide { flex-direction: column; } }
.agents__sub { max-width: 40rem; margin: -32px auto 44px; color: var(--soft); font-size: 17px; }
@media (max-width: 760px) { .agents { text-align: left; } .agents h2 { margin: 12px 0 40px; } .agents__sub { margin: -24px 0 36px; font-size: 16px; } .custom .pill { width: 100%; } }
@media (max-width: 600px) {
  .grid6 { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 12px; scrollbar-width: none; }
  .grid6::-webkit-scrollbar { display: none; }
  .grid6 .card { flex: 0 0 80%; scroll-snap-align: start; scroll-margin-left: 16px; }
  /* la carte « plusieurs tâches » ferme le défilement, un peu plus large pour garder une hauteur proche des autres */
  .grid6 .card--wide { flex: 0 0 90%; flex-direction: column; gap: 10px; }
  .grid6 .card--wide h3 { font-size: 18px; margin-bottom: 0; }
  .grid6 .card--wide p { font-size: 15px; }
  .card:hover { transform: none; }
}
@media (max-width: 760px) { .card p { font-size: 16px; } }