/* Zen & minimaliste : peu de contraste, beaucoup d'espace, aucune décoration.
   Homepage ne documente pas de variables CSS : ces sélecteurs ciblent la page
   de façon large pour limiter la casse lors des mises à jour (relire après une MR Renovate). */

:root {
  --zen-text: rgba(231, 229, 228, 0.82);
  --zen-muted: rgba(231, 229, 228, 0.45);
  --zen-line: rgba(231, 229, 228, 0.08);
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--zen-text);
}

/* Respiration : marges larges, contenu centré et étroit */
#page_container,
main {
  max-width: 1100px;
  margin-inline: auto;
}

/* Cartes : ni ombre, ni fond marqué, juste un filet discret */
.service-card,
.bookmark-text,
[class*="service-card"] {
  background: transparent !important;
  box-shadow: none !important;
  border: 1px solid var(--zen-line);
  border-radius: 10px;
}

/* Titres de groupes : petits, espacés, en retrait */
.service-group-name,
h2 {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--zen-muted);
}

/* Libellés secondaires plus discrets */
.service-description,
.text-xs {
  color: var(--zen-muted);
}

/* Transitions douces au survol, sans effet de zoom */
a, .service-card {
  transition: border-color 0.4s ease, opacity 0.4s ease;
}
.service-card:hover {
  border-color: rgba(231, 229, 228, 0.18);
}