/* Page Article — Résidence Majorelle
   Gabarit des articles du blog (dossier blog/) : titre et date, photo de
   couverture, puis une colonne de texte à la mesure de --width-prose. Une
   barre de progression de lecture court en haut de l'écran (js/progression.js).
   Les sous-titres ont leur propre échelle, comme sur les pages légales : les
   .section-title du reste du site montent à 50 px, trop pour dix parties. */

/* ── Barre de progression de lecture ─────────────────────── */
/* Au-dessus de l'en-tête collant (z-index 10). Elle s'allonge par
   transformation, sans recalcul de mise en page. */
.progression {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: 3px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ── Titre ───────────────────────────────────────────────── */

.article-head {
  max-width: var(--width-content);
  margin: 0 auto var(--space-12);
}
.article-head .eyebrow { margin-bottom: var(--space-5); }
.article-head__title {
  margin: 0 auto;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: var(--leading-tight);
  color: var(--heading-color);
}

.article-page__meta {
  margin-top: var(--space-6);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.article-page__lede { margin-top: var(--space-8); }

/* ── Photo de couverture ─────────────────────────────────── */
/* Même photo que la vignette de l'article sur le blog et l'accueil. Tant
   qu'elle n'est pas fournie, un aplat rayé (placeholders.css) tient sa place. */
.article-cover {
  max-width: var(--width-content);
  margin: 0 auto;
}
.article-cover .media,
.article-cover img {
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── Corps de l'article ──────────────────────────────────── */

.article-page {
  max-width: var(--width-prose);
  margin-inline: auto;
}
.article-page > * + * { margin-top: var(--space-5); }

.article-page h2 {
  margin: var(--space-12) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-h4);
  line-height: var(--leading-tight);
  color: var(--heading-color);
}
.article-page h3 {
  margin: var(--space-8) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-h5);
  line-height: var(--leading-tight);
  color: var(--heading-color);
}
.article-page h2 + *,
.article-page h3 + * { margin-top: var(--space-4); }

.article-page p,
.article-page li {
  font-size: 1.0625rem;
  line-height: var(--leading-loose);
  color: var(--text-secondary);
}
.article-page p { margin-bottom: 0; }
.article-page p { text-align: justify; hyphens: auto; hyphenate-limit-chars: 6 3 2; }

.article-page ul,
.article-page ol {
  margin-bottom: 0;
  padding-left: var(--space-5);
}
.article-page li::marker { color: var(--gold-400); }
.article-page li + li { margin-top: var(--space-2); }
.article-page strong { color: var(--text-primary); font-weight: var(--weight-medium); }

/* Phrase-clé mise en avant. */
.article-page .article-page__key {
  padding-left: var(--space-5);
  border-left: 2px solid var(--gold-400);
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  text-align: left;
}

/* Encadré d'appel à l'action (disponibilités, FAQ). */
.article-cta {
  margin-top: var(--space-8);
  padding: var(--space-8);
  background: var(--surface-accent);
}
.article-cta > * + * { margin-top: var(--space-4); }
.article-cta,
.article-page .article-cta p { text-align: center; }
.article-cta .article-cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-h5);
  color: var(--heading-color);
}
.article-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

/* Note de sources, en pied d'article. */
.article-page .article-page__note {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: left;
}

.article-page__back { margin-top: var(--space-12); }