/* =====================================================
   CONSEIL SNDGK — Ajustements propres à la page Services

   Fichier AUTONOME, chargé uniquement par services.html et services-en.html :
   ne modifie ni premium.css, ni premium-themes.css, ni composants.css.

   CE QU'IL FAIT — il compacte la liste des six étapes du //03.

   Le composant .steps de premium.css est calibré pour les QUATRE étapes de
   l'accueil : chaque étape porte padding: clamp(1.6rem, 3.5vw, 2.6rem) 0,
   soit 41,6 px de chaque côté à 1280 px. Avec six étapes, cela faisait
   500 px de rembourrage pur sur 1082 px de liste, et une section de 1625 px
   — 1,8 écran de défilement pour une section d'appui.

   Deux leviers, mesurés à 1280 px :
     rembourrage 41,6 px -> 22 px      economise ~230 px
     une colonne -> deux colonnes      divise la hauteur restante par deux
   Résultat visé : la section tient sur un écran.

   POURQUOI DEUX COLONNES NE CASSE PAS LA SÉQUENCE. Les étapes restent
   numérotées 01 à 06 et la grille se remplit par RANGÉES (01 02 / 03 04 /
   05 06) : l'ordre de lecture naturel est aussi l'ordre du parcours. Le
   remplissage par colonnes donnerait 01 04 / 02 05 / 03 06 — à proscrire.

   POURQUOI UNE CLASSE SUR LE BODY. Une règle de même spécificité placée plus
   bas suffirait à l'emporter, mais elle ne tiendrait que par l'ordre de
   chargement des <link> : déplacer une ligne dans l'en-tête casserait tout en
   silence. .page-services fait passer la règle à (0,3,1) contre (0,1,0) —
   elle gagne sur la spécificité, quel que soit l'ordre des feuilles.
===================================================== */

@media (min-width: 901px) {
  body.page-services .steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Remplissage par rangées : 01 02 / 03 04 / 05 06. C'est le défaut de
       CSS grid, écrit ici pour que l'intention soit explicite. */
    grid-auto-flow: row;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }

  /* Le filet vertical de composants.css longe le bord gauche de la liste.
     Sur deux colonnes il ne marquerait que la colonne de gauche, ce qui
     suggérerait à tort que la droite est autre chose. On le retire : les
     numéros et les filets horizontaux de chaque étape portent déjà la
     structure. */
  body.page-services .steps { padding-left: 0; }
  body.page-services .steps::before { display: none; }

  body.page-services .steps .step {
    /* Le réglage qui compte. Le reste du composant est inchangé. */
    padding: 1.35rem 0;
    /* La colonne du numéro passe de 90 px à 56 px : dans une demi-largeur,
       90 px prenaient une part visible de la ligne de texte. */
    grid-template-columns: 56px 1fr;
    gap: clamp(0.8rem, 2vw, 1.6rem);
  }

  /* premium.css pose un filet sous CHAQUE étape. Sur deux colonnes, les deux
     dernières (05 et 06) ferment la liste : leur filet doublerait celui de la
     section suivante. */
  body.page-services .steps .step:nth-last-child(-n+2) { border-bottom: none; }

  /* 52ch était calibré sur la pleine largeur ; en demi-largeur la mesure
     naturelle est plus courte et la contrainte devient inutile. */
  body.page-services .steps .step .body p { max-width: none; }
}

/* =====================================================
   Les deux liens du //02

   premium.css pose .card-link en var(--fg). Dans les cartes, la couleur
   sombre convient : le lien est le dernier element d'un bloc deja delimite.
   Dans le //02, les deux liens flottent en fin de paragraphe sans cadre
   autour d'eux, et rien ne les designe comme cliquables. Le rouge le fait.

   La regle vise .split .card-link et non .card-link : les liens du //05
   vivent dans des .card et gardent leur traitement. Le seul .split de la
   page hors du //02 est l'ouverture, qui ne contient aucun .card-link. */

body.page-services .split .card-link {
  color: var(--red);
}

/* premium.css anime la fleche au survol de la CARTE (.card:hover .card-link
   .ar). Hors carte, ce declencheur n'existe pas : on le remplace par le
   survol du lien lui-meme, pour que ces deux liens se comportent comme les
   autres du site. */
body.page-services .split .card-link:hover .ar {
  transform: translateX(4px);
}