/* services.css — la page Services et les deux pages de famille.
   Le bloc est celui du gabarit (`services_1`) : des cartes qui se recouvrent
   au défilement, l'image d'un côté, le contenu de l'autre, et l'ordre qui
   s'inverse une fois sur deux. */

/* ======================================================================= */
/* En-tête                                                                  */
/* ======================================================================= */
.services_head { display: flex; flex-direction: column; }
.items_head { display: flex; justify-content: space-between; align-items: flex-end; }
.services_heading-wrap {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  max-width: 23.125rem;
}

/* ======================================================================= */
/* La liste de services                                                     */
/* ======================================================================= */
.services_list-v2 { display: flex; flex-direction: column; gap: var(--size--size-4); }

/* Chaque bloc reste collé sous la barre pendant que le suivant vient le
   recouvrir. C'est du CSS, pas un `pin` GSAP — comme la section « méthode »
   de l'accueil (SPEC §6). */
.services_item {
  position: sticky; top: var(--size--size-15);
  display: flex; flex-direction: row; justify-content: flex-start;
  place-items: center stretch;
  gap: var(--size--size-4);
}
.services_item:nth-child(2n) { flex-direction: row-reverse; }

/* Sur la page d'entrée, chaque bloc se termine par un bouton : l'empilement
   le recouvrirait. Les deux métiers se suivent donc simplement. */
.services_list-v2.is-plain { gap: var(--size--size-15); }
.services_list-v2.is-plain .services_item { position: static; }

.services_content {
  /* La carte prend la hauteur de l'image : le titre se cale en haut et la
     liste en bas, et les deux moitiés du bloc se lisent comme une paire. */
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  gap: var(--size--size-17);
  width: 50%;
  padding: var(--size--size-19);
  border-radius: var(--border-radius--small);
  background-color: var(--_colors---primary--white);
}
.service_head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--size--size-6); }
.services_label-wrap { display: flex; justify-content: center; align-items: center; gap: var(--size--size-2); }

/* Les lignes de la liste : un filet sous chacune, comme dans les blocs de
   tarifs. Rien d'autre — pas de puce, pas d'icône. */
.services_list-items { width: 100%; }
.services_list-items ul { padding-left: 0; list-style: none; }
.services_list-items li { padding-bottom: var(--size--size-5); border-bottom: 1px solid var(--_colors---bleu--150); }
.services_list-items li + li { padding-top: var(--size--size-5); }

/* Étapes détaillées (bloc « Avant » de la page Méthode) : numéro en mono,
   titre, une ligne. Mêmes filets que la liste simple. */
.services_steps li { display: grid; grid-template-columns: 2rem 1fr; column-gap: var(--size--size-10); align-items: baseline; }
.services_step-num { font-family: var(--_typography---font-family--detail); font-size: var(--size--size-7); color: var(--_colors---bleu--275); letter-spacing: .04em; }
.services_step-texts { display: flex; flex-direction: column; gap: var(--size--size-2); }
.services_step-title { font-weight: var(--_typography---font-weight--medium); letter-spacing: -.01em; }
.services_step-text { margin: 0; color: var(--_colors---bleu--500); font-size: var(--size--size-8); line-height: 1.4; }

/* Sur la page Méthode, c'est le texte qui donne sa hauteur à la carte, pas
   l'image carrée : sans cela, la colonne se creusait de deux grands vides.
   L'image s'étire à la hauteur du texte et se recadre. */
@media (min-width: 992px) {
  .services_list-v2.is-plain .services_image-wrap { aspect-ratio: auto; align-self: stretch; min-height: 30rem; }
}

.services_image-wrap {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  width: 50%; aspect-ratio: 1;
  border-radius: var(--border-radius--small);
  overflow: clip;
}
.services_image { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; }

/* ======================================================================= */
/* Bandeau sombre de fin                                                    */
/* ======================================================================= */
.section_items-dark { background-color: var(--_colors---grey--800); }
.items-dark_component { display: flex; flex-direction: column; gap: var(--size--size-29); }
.items-dark_head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--size--size-19); }
.items-dark_heading-wrap { max-width: 48.125rem; }

/* ======================================================================= */
/* Adaptations                                                              */
/* ======================================================================= */
@media (max-width: 991px) {
  /* Les cartes cessent de se recouvrir : à cette largeur, l'image et le texte
     passent l'un sous l'autre et le collage n'a plus de sens. */
  .services_item, .services_item:nth-child(2n) { position: static; flex-direction: column; }
  .services_content, .services_image-wrap { width: 100%; }
  .services_content { padding: var(--size--size-15); gap: var(--size--size-22); }
  .items-dark_head { flex-direction: column; align-items: flex-start; gap: var(--size--size-15); }
}

@media (max-width: 767px) {
  .services_content { padding: var(--size--size-13); }
  .services_image-wrap { aspect-ratio: 3 / 2; }
}