/* ===================================
   CHÂSSIS DES BLOCS
   Classes communes à tous les blocs : largeur, fond, espacement, visibilité.
   Jeu de valeurs fermé (aucun style saisi en backoffice).
   ================================== */

/* Pile de blocs d'une page : même rythme vertical que les anciennes pages
   .blog-page / .contact-page */
.page-blocks {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.block {
  min-width: 0;
}

/* Titre de page rendu par le premier bloc de contenu (ex-h1 des pages CMS),
   et titre propre d'un bloc en carte (corps d'article) */
.block--bg-card > h1,
.block-title {
  font-size: 32px;
  margin-bottom: 8px;
  color: var(--text-dark);
}

.block-heading {
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--text-dark);
}

/* --- Largeur --- */
.block--wide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.block--full {
  max-width: none;
  width: 100%;
}

/* --- Fond --- */
/* Carte blanche : reprend l'habillage historique de .content-page */
/* Carte centrée : comme l'ancienne .content-page, elle s'ajuste à son contenu
   (les marges automatiques d'un élément de pile flex donnent un ajustement au
   contenu, pas un étirement) */
.block--bg-card {
  background: var(--card);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-md);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  /* Englobe les images flottantes du contenu */
  display: flow-root;
}

/* Chapeau des pages éditoriales (ex-« .content-page > .muted ») */
.block--bg-card > .muted {
  font-size: 14px;
  margin-bottom: 28px;
  display: block;
}

.block--bg-soft {
  background: var(--bg);
  border-radius: 16px;
  padding: 24px;
}

.block--bg-accent {
  background: var(--accent);
  border-radius: 16px;
  padding: 24px;
}

/* Une carte large n'est plus bridée à 900px, mais reste ajustée à son contenu */
.block--bg-card.block--wide {
  max-width: 1200px;
  width: auto;
}

.block--bg-card.block--full {
  max-width: none;
  width: auto;
}

/* --- Espacement --- */
.block--space-sm {
  margin-top: -8px;
  margin-bottom: -8px;
}

.block--space-lg {
  margin-top: 16px;
  margin-bottom: 16px;
}

/* --- Visibilité --- */
@media (max-width: 680px) {
  .block--desktop-only {
    display: none;
  }

  .block--bg-card {
    padding: 20px;
  }

  .block--bg-card > h1,
  .block-title {
    font-size: 26px;
  }

  .block-heading {
    font-size: 18px;
  }
}

@media (min-width: 681px) {
  .block--mobile-only {
    display: none;
  }
}

/* --- Blocs de pied de page --- */
/* Les colonnes de liens sont les éléments de la rangée du footer, la ligne de
   marque occupe toute la largeur sous elles (cf. .footer-content) */
.block-link-column {
  flex: 0 0 auto;
}

.block-site-brand {
  flex-basis: 100%;
  color: var(--muted);
  text-align: center;
}