/* =====================================================================
   06 — Nos services (#services)
   Deux cartes de poids visuel inégal : la carte « Diagnostic » domine
   (colonne plus large, typographie plus affirmée, ombre portée, filigrane
   du symbole), la carte « Intelligence décisionnelle » reste sobre
   (fond brume, sans bordure). Mobile first ; tokens uniquement.
   ===================================================================== */

/* ---------- Grille asymétrique 7/5 (≥ 900 px) ---------- */
.services__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
@media (min-width: 900px) {
  .services__grille {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-6);
  }
}
@media (min-width: 1200px) {
  .services__grille { gap: var(--space-7); }
}

/* ---------- Carte commune ---------- */
.services__carte {
  gap: var(--space-5);
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden; /* le filigrane est rogné par la carte */
}
.services__carte p { max-width: none; }

.services__entete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3) var(--space-4);
}
.services__badge {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  line-height: var(--leading-snug);
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

.services__texte { color: var(--color-text); }

/* Libellés « Ce que nous examinons : » / « Résultat : » */
.services__libelle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--color-heading);
  margin-bottom: var(--space-3);
}
.services__liste { color: var(--color-text); }
.services__liste .icon-list__item { line-height: 1.5; }

/* Résultat : encadré à filet or */
.services__resultat {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--color-surface-alt);
}
.services__resultat .services__libelle { margin-bottom: var(--space-2); }
.services__resultat-texte {
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-heading);
}

/* Pied de carte : le bouton peut passer sur deux lignes sur petit écran */
.services__pied .btn { white-space: normal; }
@media (max-width: 639.98px) {
  .services__pied .btn { width: 100%; }
}

/* ---------- Carte 1 : principale ---------- */
.services__carte--principale {
  box-shadow: var(--shadow-sm);
  border-color: transparent;
  border-top-color: var(--color-accent);
}
.services__carte--principale:focus-within { box-shadow: var(--shadow); }

.services__icone { width: var(--space-7); height: var(--space-7); }
.services__icone svg { width: var(--space-5); height: var(--space-5); }

.services__carte--principale .services__titre {
  font-size: var(--text-2xl);
  max-width: 26ch;
}
/* Filet directeur sous le titre : le rayon du symbole */
.services__carte--principale .services__titre::after {
  content: "";
  display: block;
  width: var(--rule-width);
  height: var(--rule-height);
  margin-top: var(--space-4);
  background: var(--color-accent);
}
.services__carte--principale .services__texte {
  font-size: var(--text-base);
  line-height: var(--leading-body);
}
.services__carte--principale .services__resultat-texte { font-size: var(--text-base); }

/* Filigrane : symbole Lucidian en trait fin, croisement des axes repoussé dans le coin */
.services__filigrane {
  position: absolute;
  top: -3rem;
  right: -3rem;
  width: clamp(7rem, 12vw, 10rem);
  height: auto;
  color: var(--color-accent);
  opacity: 0.16;
  pointer-events: none;
}
@media (max-width: 639.98px) {
  .services__filigrane { top: -2.5rem; right: -2.5rem; width: 6rem; }
}
.services__carte--principale > :not(.services__filigrane) { position: relative; }

/* ---------- Carte 2 : complémentaire ---------- */
.services__carte--complementaire .services__resultat { background: var(--color-surface); }
.services__carte--complementaire .services__titre { font-size: var(--text-2xl); }
.services__carte--complementaire { border-top: var(--rule-height) solid var(--color-mist-deep); }
.services__pied { padding-top: var(--space-4); }
.services__pied .btn { min-height: var(--space-7); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .services__carte--principale:hover { box-shadow: var(--shadow); }
}