/*
 * Hero des articles du blog, aligne sur celui des pages principales
 * (comprendre.html, quisommesnous.html, recrutement.html : .vision-hero).
 *
 * Chargee APRES le <style> inline de chaque article : a specificite egale,
 * c'est la derniere declaration qui gagne, donc ce fichier redefinit le hero
 * sans qu'il faille toucher au bloc inline de chacune des pages.
 *
 * Le markup d'un hero d'article n'a pas de .hero-inner : la colonne de 760px
 * est reconstituee en donnant a chaque enfant direct la meme largeur maximale
 * et des marges automatiques. Le texte reste donc cale a gauche dans un bloc
 * centre, comme sur les pages principales.
 */

/* Le fond n'est pas declare ici : nav.css l'impose en !important a tous les
   heros du site (.page-hero, .blog-hero, .article-hero, .vision-hero) et c'est
   lui qui garantit deja un fond identique partout. Ce fichier ne reprend que
   la mise en page et la typographie. */
.article-hero {
  color: #fff;
  padding: 96px 24px 74px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
  position: relative;
  overflow: hidden;
}

.article-hero > * {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.article-category {
  display: block;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* Les pages principales portent des titres de trois mots et montent a 4.2rem.
   Un titre d'article fait 50 a 80 signes : meme graisse, meme interlettrage,
   meme interligne serre, mais un palier plus bas pour rester sur 2 ou 3 lignes. */
.article-title {
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 700;
  margin-bottom: 22px;
}

.article-meta {
  color: rgba(255,255,255,.6);
  font-size: .95rem;
  line-height: 1.78;
}

@media (max-width: 640px) {
  .article-hero { padding: 76px 20px 58px; }
}