/* HF Article Hero — styles de base (scopés) */
.hf-hero {
  background: var(--hf-card-bg, #f4f6ff);
  border-radius: var(--hf-radius, 18px);
  padding: var(--hf-padding, 24px);
  margin: clamp(12px, 2vw, 24px) 0;
  box-shadow: 0 14px 30px -20px rgba(16,24,40,.25);
}

.hf-hero-inner {
  max-width: min(1200px, 96vw);
  margin: 0 auto;
}


.hf-hero-figure {
  margin: 0 0 12px;
  display: block;
}

.hf-hero-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--hf-radius, 18px) - 6px);
}

.hf-hero-excerpt {
  margin: 8px 0 0;
  font-size: clamp(0.98rem, 1.4vw, 1.08rem);
  line-height: 1.5;
  color: #334155;
}

/* --- Mode "avant la page" (entre header et contenu) --- */
.hf-hero-before-page {
  max-width: min(1200px, 96vw);
  margin: clamp(10px, 2vw, 24px) auto;
  padding: 0 8px;
}

/* Optionnel : plein écran / full-bleed
   Active si tu veux que le fond s'étende bord à bord
.hf-hero-before-page .hf-hero {
  border-radius: 0;
  max-width: 100%;
}
*/

/* --- Anti-chevauchement avec header sticky --- */
/* Ajuste la marge haute du wrapper "avant la page".
   Modifie la valeur si ton header est plus/moins haut. */
:root{
  --hf-hero-offset: 150px;         /* desktop */
  --hf-hero-offset-mobile: 120px;  /* mobile */
}

.hf-hero-before-page{
  position: relative;
  z-index: 1;
  margin-top: var(--hf-hero-offset);
}

@media (max-width: 782px){
  .hf-hero-before-page{
    margin-top: var(--hf-hero-offset-mobile);
  }
}

/* --- Réduire l’espace sous le hero --- */
/* On resserre la marge basse du bloc et les espacements internes */
.hf-hero{
  /* avant: margin: clamp(12px, 2vw, 24px) 0; */
  margin: 0 0 -150px;
}

.hf-hero-figure{ margin: 0 0 10px; }
.hf-hero-excerpt{ margin-top: 6px; }


/* === HERO TITLE — style maquette (ajusté) === */
.hf-hero-title {
  text-align: center;
  font-family: 'Poppins', sans-serif;   /* police Poppins */
  font-size: 32px !important;                      /* taille fixe */
  font-weight: 600;                     /* semi-bold */
  line-height: 1.3;
  margin: 0 auto 18px;                  /* auto = centre horizontal */
  letter-spacing: -0.015em;
  color: #000 !important;
  max-width: 1000px;                     /* limite largeur */
  padding: 0 12px;                      /* réduit espace gauche/droite */
}


/* === Responsive Title (tablette & mobile) === */

/* Tablette : largeur ≤ 991px */
@media (max-width: 991px) {
  .hf-hero-title {
    font-size: 26px !important;   /* un peu plus petit */
    max-width: 90%;              /* moins large */
    padding: 0 10px;
  }
}

@media (max-width: 600px) {
  .hf-hero-title {
    font-size: 16px !important;
    line-height: 1.1;             /* compresse encore plus les lignes */
    margin: 0 auto 8px;           /* réduit l’espace dessous */
    max-width: 95%;
    padding: 0 4px;
    word-break: break-word;
  }
}


/* === HERO PHOTO — Desktop (qualité préservée) === */
@media (min-width: 1024px){
  .hf-hero-figure{
    margin: 0 0 14px;
    border-radius: 26px;
    overflow: hidden;
    background: #eaeef9;
    border: 1px solid rgba(15,23,42,.06);
    box-shadow: 0 24px 60px -32px rgba(2,6,23,.35);
  }

  .hf-hero-image{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 6;   /* format bandeau large */
    height: auto;           /* conserve la résolution native */
    object-fit: cover;      /* recadre sans déformer */
    object-position: 60% center; /* ajuste le cadrage (60% = un peu à droite) */
    border-radius: 26px;
  }
}


/* === HERO PHOTO — Tablette (600px à 1023px) === */
@media (min-width: 600px) and (max-width: 1023px){
  .hf-hero-figure{
    margin: 0 0 12px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 40px -28px rgba(15,23,42,.25);
  }

  .hf-hero-image{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;     /* format un peu plus haut qu’en desktop */
    height: auto;
    object-fit: cover;        /* recadre proprement */
    object-position: center;  /* centré sur tablette */
    border-radius: 22px;
  }
}



/* === HERO EXCERPT — style maquette (Poppins, centré) === */
.hf-hero-excerpt{
  font-family: 'Poppins', sans-serif;
  font-weight: 500;                 /* semi-bold comme la maquette */
  font-size: 16px;                  /* desktop */
  line-height: 1.55;                /* lisible mais compact */
  color: black;                   /* texte plus foncé */
  text-align: center;
  max-width: 1000px;                 /* largeur de lecture contrôlée */
  margin: 12px auto 0;              /* centré + petit espace au-dessus */
  padding: 0 12px;                  /* sécurité latérale */
  letter-spacing: 0;                /* propre avec Poppins */
}

/* Tablette : 600–991px */
@media (max-width: 991px){
  .hf-hero-excerpt{
    font-size: 15px;
    line-height: 1.5;
    max-width: 98%;
    padding: 0 10px;
    margin-top: 10px;
  }
}

/* Mobile : ≤ 600px */
@media (max-width: 600px){
  .hf-hero-excerpt{
    font-size: 14px;
    line-height: 1.45;              /* resserré pour éviter les “trous” */
    max-width: 98%;
    padding: 0 8px;
    margin-top: 8px;
  }
}


.hf-hero-excerpt {
  color: #000 !important;
}