/* ==========================================================================
   Groupe « Blog » : blog (index), 4 articles publiés et 10 brouillons.
   Compléments de mise en page uniquement (préfixe g-blog-). Aucun composant
   partagé n'est redéfini : tout le reste vient de site.css.
   Chargé après site.css (extra_css) ; toutes les couleurs sont des variables.
   ========================================================================== */

/* Anneau de focus lisible sur la carte sombre « à la une » (.aside-card, non couverte par la règle globale
   de site.css qui traite déjà .page-hero et .article-cta). */
.g-blog-dark :focus-visible{outline-color:var(--cream)}

/* ---- Héros d'article ---- */
.g-blog-cat{margin-bottom:1.25rem}
/* Titres d'article : de vraies phrases, donc un corps un cran sous celui des titres de section */
.g-blog-title{font-size:clamp(2.1rem,1rem + 3.9vw,4rem);line-height:1.02}
.g-blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 2rem;margin-top:2rem}
.g-blog-byline{display:flex;align-items:center;gap:.9rem}
.g-blog-byline img{flex:none;width:3.25rem;height:3.25rem;object-fit:cover;object-position:50% 18%;border:2px solid var(--accent)}
.g-blog-byline strong{display:block;font-family:var(--font-head);font-weight:700;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;color:var(--cream)}
.g-blog-byline span{display:block;font-size:.95rem;line-height:1.4;color:var(--muted-dark)}
.g-blog-time{padding-left:2rem;border-left:1px solid rgba(239,238,233,.25);font-family:var(--font-head);font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark)}
@media (max-width:640px){.g-blog-time{padding-left:0;border-left:0}}

/* Fil d'Ariane : sur mobile, le titre de l'article (répété dans le h1) est tronqué visuellement */
@media (max-width:640px){
  .g-blog-crumbs ol{flex-wrap:nowrap}
  .g-blog-crumbs li{flex:none}
  .g-blog-crumbs li[aria-current]{display:block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .g-blog-crumbs li[aria-current]::before{display:inline-block;margin-right:.6rem}
}

/* ---- Texte d'article ---- */
.g-blog-prose>:first-child{margin-top:0}
.g-blog-prose>h2::before{content:"";display:block;width:48px;height:2px;margin-bottom:1rem;background:var(--accent-on-light)}
.g-blog-prose .callout{margin-block:2rem}
.g-blog-prose .steps{padding-left:0;gap:1.5rem}
.g-blog-prose .steps>li{padding-left:3.6rem}
.g-blog-prose .steps strong{display:block;font-family:var(--font-head);font-weight:700;font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}

/* ---- Index : liste d'articles et colonne latérale ---- */
.g-blog-aside h2{line-height:1.25}
.g-blog-list .post-card:target{box-shadow:0 0 0 2px var(--accent-on-light),0 6px 24px rgba(0,0,0,.12)}
.g-blog-featured{background:var(--ink-1);color:var(--text-dark);box-shadow:none}
.g-blog-featured h2{color:var(--head-dark)}
.g-blog-featured p{color:var(--muted-dark)}
.g-blog-featured .chip{margin-bottom:.9rem}
.g-blog-featured .post-card__date{display:block;margin-bottom:.7rem;color:var(--muted-dark)}
.g-blog-featured a{color:var(--accent-on-dark)}
.g-blog-featured .btn-link{margin-top:.6rem}

/* ---- Fin d'article : « À lire aussi » ---- */
.g-blog-next>li{display:flex}
.g-blog-next .card{flex:1}
.g-blog-next .card__title{font-size:1.25rem;letter-spacing:.06em}

/* Encart d'appel : titre resserré (le corps de texte a un interligne de 1,7) */
.g-blog-cta h2{line-height:1.15}
/* Encart d'appel sans titre (brouillons dont l'appel n'est qu'un lien) */
.g-blog-cta-solo .btn{margin-top:0}