/* Spécificités du thème WordPress « leslyanoo ».
   Tout le reste vient du design system partagé (/assets/css/). */

/* Largeur de lecture du corps d'article : ~65 caractères par ligne. */
.article__corps { max-width: 65ch; }

/* La photo d'illustration en haut d'article (.bandeau-photo, partagée avec
   les pages service) est trop haute ici : ariane + surtitre + h1 + méta la
   précèdent déjà, et son ratio 21/9 plein écran repoussait tout l'article
   sous la ligne de flottaison sur un écran de laptop courant. Bande plus
   basse et marge resserrée, pour que le début du texte reste visible. */
article .bandeau-photo { aspect-ratio: 4 / 1; margin-top: var(--sp-3); }

/* Page article : la colonne de lecture (65ch, .article__corps) laissait tout
   le reste de l'écran vide sur les grands écrans, sans rien y placer. Une
   colonne latérale avec un rappel de contact utilise cet espace au lieu de
   le perdre, sans élargir le texte au-delà de sa largeur de lecture. */
.article-grille {
  display: grid; grid-template-columns: minmax(0, 720px) 1fr;
  gap: var(--sp-7); align-items: start;
}
.article-aside { position: sticky; top: calc(76px + var(--sp-5)); }
@media (max-width: 960px) {
  .article-grille { grid-template-columns: minmax(0, 1fr); }
  .article-aside { position: static; max-width: 480px; }
}

/* Liste des articles (page d'accueil du blog) : l'intro (titre + paragraphe +
   recherche + filtres) prenait à elle seule près de 600px de haut avant la
   première carte d'article, sur un écran de laptop courant — on ne voyait
   aucun article sans défiler. Resserré, sans toucher aux classes partagées
   (.entete-section, .blog-filtres) utilisées ailleurs sur le site. */
/* .entete-section et .blog-filtres n'existent que sur ce gabarit (accueil du
   blog, archives de catégorie/étiquette, recherche) : pas besoin de préfixer
   par une classe body, qui diffère justement selon ces contextes. */
/* Le plafond global de .entete-section (62ch, pensé pour un intro-texte
   isolé) faisait passer le H1 sur deux lignes et laissait toute la moitié
   droite de l'écran vide sur cette page : rien ne l'occupait. Élargi pour
   cette page précisément (recherche/filtres compris), sans toucher au
   plafond utilisé ailleurs sur le site pour un vrai texte à lire. */
.entete-section:has(+ .blog-filtres) { max-width: 880px; margin-bottom: var(--sp-4); }
.blog-filtres { max-width: 880px; padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); }

/* Neutralise les marges d'alignement Gutenberg dans le corps d'article. */
.article__corps .alignwide,
.article__corps .alignfull {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.article__corps img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Pagination générée par WordPress (paginate_links). */
.pagination ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  padding: 0;
  margin: var(--sp-6) 0 0;
}

.pagination a,
.pagination .current,
.pagination .dots {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--brume);
  text-decoration: none;
  font-size: var(--t-sm);
}

.pagination .current {
  background: var(--puy);
  border-color: var(--puy);
  color: var(--blanc);
}

/* Écran de connexion et contenus techniques éventuels. */
.article__corps > *:first-child {
  margin-top: 0;
}