/* ══════════════════════════════════════════════════════
   sections/services.css — Styles de la section #services
   Refonte en grille de cartes simples et lisibles.
   Dépend de variables.css.
   ══════════════════════════════════════════════════════ */

#services {
  background:
    radial-gradient(circle at top left, rgba(36, 111, 159, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.18)),
    #f4f6f8;
}

#services .section__header {
  max-width: 700px;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

#services .section__lede {
  max-width: none;
}

.services__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  counter-reset: service-counter;
}

@media (min-width: 700px) {
  .services__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

@media (min-width: 980px) {
  .services__layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }
}

.service-card {
  display: grid;
  gap: 1.15rem;
  padding: 1.35rem;
  border-radius: 22px;
  border: 1px solid rgba(28, 26, 27, 0.07);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,245,248,0.92));
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/* Numéro ordinal décoratif */
.service-card:not(.service-card--cta) {
  counter-increment: service-counter;
}

.service-card:not(.service-card--cta)::after {
  content: "0" counter(service-counter);
  position: absolute;
  top: 1.1rem;
  right: 1.35rem;
  font-family: var(--font-title);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(28, 26, 27, 0.1);
  transition: color var(--transition-base);
  pointer-events: none;
}

.service-card:not(.service-card--cta):hover::after {
  color: rgba(36, 111, 159, 0.3);
}

@media (min-width: 980px) {
  .service-card:nth-child(4) {
    grid-column: 1;
  }

  .service-card:nth-child(5) {
    grid-column: 2;
  }
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(36, 111, 159, 0.16);
  box-shadow: var(--shadow-hover);
}

@media (hover: none) and (pointer: coarse) {
  .service-card:active {
    transform: scale(0.98);
    box-shadow: var(--shadow-card);
    border-color: rgba(36, 111, 159, 0.2);
  }
}

/* ─────────────────────────────────────────
   MOBILE — animation d'entrée plus marquée
   Chaque card s'anime individuellement au scroll
   (cascade désactivé côté JS sur mobile).
───────────────────────────────────────── */
@media (max-width: 699px) {
  .service-card.reveal {
    transform: translateY(44px) scale(0.97);
  }

  .service-card.reveal.is-visible {
    transform: translateY(0) scale(1);
    transition:
      opacity 0.55s var(--ease-out),
      transform 0.55s var(--ease-out);
  }
}

.service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(36, 111, 159, 0.08);
}

.service-card__icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--color-accent);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card__body {
  display: grid;
  gap: 0.55rem;
}

.service-card__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.service-card__title {
  font-family: var(--font-title);
  font-size: clamp(1.18rem, 1.5vw, 1.35rem);
  line-height: 1.18;
  color: var(--color-dark);
}

.service-card__desc {
  font-size: 0.92rem;
  line-height: 1.64;
  color: var(--color-mid);
  max-width: 28ch;
}

/* ─────────────────────────────────────────
   CARD CTA — devis
───────────────────────────────────────── */
.service-card--cta {
  background: var(--color-dark);
  border-color: transparent;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.service-card--cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(36, 111, 159, 0.3), transparent 60%);
  pointer-events: none;
}

.service-card--cta:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 20px 48px rgba(28, 26, 27, 0.28);
}

.service-card--cta .service-card__eyebrow {
  color: var(--color-accent-2);
}

.service-card--cta .service-card__title {
  color: var(--color-white);
}

.service-card--cta .service-card__desc {
  color: rgba(255, 255, 255, 0.58);
}

.service-card__cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  flex-shrink: 0;
}

.service-card__cta-icon svg {
  width: 26px;
  height: 26px;
}

.service-card__cta-arrow {
  position: absolute;
  bottom: 1.35rem;
  right: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.service-card--cta:hover .service-card__cta-arrow {
  background: var(--color-accent);
  transform: translateX(3px);
}

.service-card__cta-arrow svg {
  width: 16px;
  height: 16px;
}