/* =====================================================================
   LTC Group — Refine layer, lot A
   ---------------------------------------------------------------------
   Pages: /services (+ 5 sous-pages), /a-propos, /pourquoi-nous,
   /temoignages, /cas-pratique/*.
   Loaded after css/refine.css, site-wide — selectors below only target
   components that live in these pages (verified against src/pages/*).
   Does not touch css/refine.css / css/style.css / src/partials.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. SERVICE BENTO CARDS (.service-card) — services hub + sub-pages,
      a-propos, pourquoi-nous, temoignages ("Ce qui nous distingue" /
      "Les principes" / "Pourquoi nous choisir" grids).
      Was: liquid glass (blur) + decorative purple/blue radial gradient
      on the featured card + pill-shaped tag + large dead gap caused
      by flex-grow pushing the CTA to the very bottom of a tall card.
--------------------------------------------------------------------- */
.service-card {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.service-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--line-strong) !important;
}
.service-card--featured {
  background: var(--primary-50) !important;
  border-color: rgba(32, 32, 204, 0.16) !important;
}
.service-card--featured:hover { border-color: rgba(32, 32, 204, 0.3) !important; }

/* Quiet, sober badge instead of a bubble pill */
.service-card__tag {
  border-radius: 6px !important;
}

/* Let content flow naturally instead of stretching the description and
   slamming the CTA to the card's bottom edge — any leftover height from
   the equal-row bento layout now settles as calm bottom whitespace
   instead of a gap in the middle of the card. */
.service-card--featured .service-card__desc { flex-grow: 0; }
.service-card--featured .service-card__cta { margin-top: 0.5rem; }

/* ---------------------------------------------------------------------
   2. "PROOF" HERO SHOWPIECE (.proof) — right-column card on the hero
      of /services, /a-propos, /pourquoi-nous, /temoignages
      ("Votre parcours IA", "LTC Group · Belgique", "Votre contact",
      "Notre approche · Par métier"). Was: green pulsing-glow status dot,
      green pill badge ("À votre rythme" / "RGPD · CONFORME" /
      "JOIGNABLE" / "SUR MESURE"), green tinted icon circle — all
      against the "une seule teinte d'accent" rule.
--------------------------------------------------------------------- */
.proof__dot {
  background: var(--primary);
  box-shadow: none;
}
.proof__pill {
  color: var(--primary);
  background: var(--primary-50);
  border-radius: 6px;
}
.proof__ic--ok {
  background: var(--primary-50);
  color: var(--primary);
}

/* ---------------------------------------------------------------------
   3. PHASE GRID — featured step card ("Quatre étapes", "Trois temps",
      "Les principes", etc.) on /services + sub-pages, /a-propos,
      /pourquoi-nous, /temoignages. Was a diagonal gradient; flattened
      to the single accent tint used everywhere else.
--------------------------------------------------------------------- */
.phase-card--featured {
  background: var(--primary-50);
}
.phase-duration {
  border-radius: 6px;
}