/* Fond de page : reste sur body, mais scope a la route CMS pour
   ne pas repeindre le body d'une page Salient si ce fichier venait
   a etre charge ailleurs. */
body.cms-front-route,
body.cms-admin-route,
body.cms-admin {
  margin: 0;
  background-color: var(--color-bg);
}

/* Typographie du contenu CMS, confinee a <main>. */
.cms-front-route main,
.cms-admin-route main,
.cms-admin main {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

/* Pas de `color` par defaut ici : chaque composant CMS definit la
   couleur de ses titres (hero en blanc, blocs de contenu selon le
   theme). Imposer un noir global entrait en collision de specificite
   avec .category-hero__title et repeignait les titres du hero en noir.
   On ne garde que la mise en forme neutre. */
.cms-front-route main :is(h1, h2, h3, h4, h5, h6),
.cms-admin-route main :is(h1, h2, h3, h4, h5, h6),
.cms-admin main :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  line-height: var(--line-height-tight);
}

.cms-front-route main a,
.cms-admin-route main a,
.cms-admin main a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

.cms-front-route main a:hover,
.cms-admin-route main a:hover,
.cms-admin main a:hover {
  color: inherit;
}

/* ------------------------------------------------------------
   Classes utilitaires : deja portees par une classe, aucun
   risque de fuite, laissees telles quelles.
   ------------------------------------------------------------ */
.text-center {
  text-align: center;
}

.section {
  padding: var(--spacing-xxl) 0;
}

.section_centered {
  max-width: var(--max-width-container);
  margin: 0 auto;
  padding: var(--spacing-xxl) var(--spacing-lg);
}

.max-width-container {
  max-width: var(--max-width-container);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.max-width-content {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.title-2 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  font-family: var(--font-accent);
  margin-bottom: var(--spacing-lg);
  color: var(--color-text-dark);
}

.tighted-text {
  font-size: var(--font-size-lg);
  font-weight: 400;
  margin-bottom: var(--spacing-lg);
  color: var(--color-text-light);
}

.quote {
  font-size: var(--font-size-lg);
  font-weight: 500;
  font-family: var(--font-accent);
  font-style: italic;
  letter-spacing: -1px;
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.btn-outline {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  margin: auto;
  background: var(--color-secondary);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
  border-radius: 0;
  transition: all var(--transition-base);
}

.btn-outline svg {
  width: 16px;
}

.btn-outline:hover {
  transform: translateY(-2px);
}