/* COÛT · titre centré, trois colonnes avec une pastille de couleur et un mot clé */
.cout { padding-top: var(--gap); text-align: center; }
.cout h2 { max-width: 24ch; margin: 0 auto 48px; }
.cout__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.cout__cols > div { display: flex; flex-direction: column; gap: 10px; }
.tile { display: grid; place-items: center; height: 150px; border-radius: 14px; margin-bottom: 8px; }
.tile svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile--bleu { background: var(--bleu-soft); color: var(--bleu); }
.tile--rose { background: var(--rose-soft); color: var(--rose); }
.tile--violet { background: var(--violet-soft); color: var(--violet); }
.cout__lab { font-size: 14px; font-weight: 600; }
.cout__lab--bleu { color: var(--bleu); }
.cout__lab--rose { color: var(--rose); }
.cout__lab--violet { color: var(--violet); }
.cout__cols p:last-child { color: var(--text); }
.cout__cols > div:nth-child(2) { transition-delay: 80ms; }
.cout__cols > div:nth-child(3) { transition-delay: 160ms; }
@media (max-width: 760px) { .cout__cols { grid-template-columns: 1fr; gap: 28px; } .tile { height: 84px; } .tile svg { width: 32px; height: 32px; } }
@media (max-width: 760px) { .cout { text-align: left; } .cout h2 { margin: 0 0 32px; } }
@media (max-width: 760px) {
  .cout__cols > div { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; row-gap: 4px; align-items: start; }
  .cout__cols .tile { grid-row: span 2; width: 64px; height: 64px; margin: 0; border-radius: 14px; }
  .cout__cols .tile svg { width: 26px; height: 26px; }
  .cout__lab { margin-top: 4px; }
}
@media (max-width: 760px) { .cout__lab { font-size: 16px; } }