/* ==========================================================================
   SERVICES.CSS — Phaneon Portfolio
   Contient : section services avec layout 2 colonnes sticky,
              cartes de service en liste verticale numérotée
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SECTION SERVICES — FOND LAVANDE CLAIR
   -------------------------------------------------------------------------- */
#services {
  background: var(--c-surface); /* Fond légèrement violet (#f5f4ff) */
}

/* --------------------------------------------------------------------------
   2. LAYOUT PRINCIPAL — 2 COLONNES
   Colonne gauche : titre + intro (sticky pour rester visible au scroll)
   Colonne droite : liste des services
   -------------------------------------------------------------------------- */
.services-layout {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Le texte prend 1/3, la liste 2/3 */
  gap: 5vw;
  align-items: start;
}

/* --------------------------------------------------------------------------
   3. COLONNE GAUCHE — TEXTE (STICKY)
   Reste visible pendant le scroll de la liste de droite.
   top: 7rem pour ne pas se cacher derrière la nav fixe.
   -------------------------------------------------------------------------- */
.services-head {
  position: sticky;
  top: 7rem;
}
.services-head h2 {
  margin-bottom: 1rem;
}
.services-head .section-intro {
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   4. LISTE DES SERVICES (colonne droite)
   Empilées verticalement avec un espacement régulier
   -------------------------------------------------------------------------- */
.services-stack {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* --------------------------------------------------------------------------
   5. CARTE DE SERVICE INDIVIDUELLE
   Chaque carte = numéro + texte + icône, sur fond blanc.
   Effet de glissement horizontal au hover pour indiquer l'interactivité.
   -------------------------------------------------------------------------- */
.service-row {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 2rem 2.2rem;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  transition: var(--transition);
}
.service-row:hover {
  transform: translateX(8px); /* Glisse vers la droite au survol */
  border-color: var(--c-accent);
  box-shadow: 0 4px 20px rgba(91, 91, 214, 0.1);
}

/* --------------------------------------------------------------------------
   6. NUMÉRO DU SERVICE ("01", "02"...)
   Badge violet avec fond teinté, flex-shrink pour rester compact
   -------------------------------------------------------------------------- */
.service-num {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--c-accent);
  background: rgba(91, 91, 214, 0.1);
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  letter-spacing: 1px;
  flex-shrink: 0; /* Ne se rétrécit pas */
}

/* --------------------------------------------------------------------------
   7. CORPS TEXTE DU SERVICE (titre + description)
   -------------------------------------------------------------------------- */
.service-body {
  flex: 1; /* Prend tout l'espace disponible entre le numéro et l'icône */
}
.service-body h3 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 0.3rem;
  color: var(--c-text);
}
.service-body p {
  font-size: 0.88rem;
  color: var(--c-muted);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   8. ICÔNE DÉCORATIVE (emoji à droite de la carte)
   -------------------------------------------------------------------------- */
.service-icon-big {
  font-size: 2rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .services-layout {
    grid-template-columns: 1fr; /* Une seule colonne sur mobile */
  }
  .services-head {
    position: static; /* Plus de sticky sur mobile */
  }
}