/* ============================================================
   article.css — CTT Brunoy v2
   Page article.php : affichage complet d'un article
   ============================================================ */

.article-page {
  max-width: 820px;
  margin   : 0 auto;
  padding  : var(--espace-xl) var(--espace-sm) var(--espace-xl);
}

.article-retour {
  display      : inline-block;
  margin-bottom: var(--espace-md);
  font-family  : var(--font-sous-titre);
  font-size    : var(--taille-petit);
  color        : var(--bleu-bouton);
  font-weight  : 600;
}

.article-retour:hover {
  text-decoration: underline;
}

/* ============================================================
   1. EN-TÊTE
   ============================================================ */
.article-entete {
  text-align   : center;
  margin-bottom: var(--espace-lg);
}

.article-categorie-badge {
  display      : inline-block;
  padding      : 4px 14px;
  border-radius: 999px;
  background   : var(--gris-clair);
  color        : var(--bleu-titre);
  font-family  : var(--font-sous-titre);
  font-size    : 13px;
  font-weight  : 600;
  margin-bottom: var(--espace-sm);
}

.article-titre {
  font-family   : var(--font-titre);
  font-size     : var(--taille-h1);
  color         : var(--bleu-titre);
  letter-spacing: 1px;
  margin-bottom : var(--espace-xs);
  position      : relative;
  display       : inline-block;
}

/* .article-titre::after : voir global.css §10 (mutualisé avec les autres titres de page) */

.article-sous-titre {
  font-family: var(--font-sous-titre);
  font-size  : var(--taille-h3);
  color      : var(--gris-texte);
  margin-top : var(--espace-md);
}

.article-date {
  font-size : var(--taille-petit);
  color     : var(--gris-texte);
  margin-top: var(--espace-xs);
}

/* ============================================================
   2. CORPS DE L'ARTICLE (blocs ordonnés)
   ============================================================ */
.article-corps {
  display       : flex;
  flex-direction: column;
  gap           : var(--espace-md);
}

.article-bloc-sous-titre {
  font-family  : var(--font-sous-titre);
  font-size    : var(--taille-h3);
  color        : var(--bleu-titre);
  margin-top   : var(--espace-sm);
}

.article-bloc-paragraphe {
  color: var(--noir-texte);
}

.article-bloc-lien {
  align-self: flex-start;
}

/* --- Galerie (regroupement automatique des images consécutives) --- */
.article-galerie {
  display : grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap     : var(--espace-sm);
}

.article-galerie img {
  width        : 100%;
  height       : 260px;
  object-fit   : cover;
  border-radius: var(--rayon-md);
  box-shadow   : var(--ombre-carte);
}

.article-galerie--seule {
  grid-template-columns: 1fr;
}

.article-galerie--seule img {
  height   : auto;
  max-height: 480px;
}

/* ============================================================
   3. ARTICLE INTROUVABLE
   ============================================================ */
.article-introuvable {
  text-align: center;
  padding   : var(--espace-xl) 0;
}

.article-introuvable h1 {
  font-family : var(--font-titre);
  color       : var(--bleu-titre);
  margin-bottom: var(--espace-sm);
}

.article-introuvable p {
  color        : var(--gris-texte);
  margin-bottom: var(--espace-md);
}