/* Le blog — index et article. Charte v4.
   Le hero réutilise .hf-page-hero, déjà défini par la feuille de fidélité :
   fond navy, cercle décoratif, em doré. On n'ajoute ici que ses dimensions. */

.hf-blog,.hf-article,.hf-blog-hero{
  --g-navy:var(--e-global-color-primary,#1B2140);
  --g-or:var(--e-global-color-secondary,#C9A96E);
  --g-texte:var(--e-global-color-text,#4A4F63);
  --g-accent:var(--e-global-color-accent,#2F8F86);
  --g-sable:var(--e-global-color-hfsable,#F6F1E7);
  --g-creme:var(--e-global-color-hfcreme,#FBF6EC);
  --g-or-fonce:var(--e-global-color-hforfon,#A9884D);
  font-family:"DM Sans",Arial,sans-serif;
}
.hf-blog *,.hf-article *,.hf-blog-hero *{box-sizing:border-box}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hf-blog-hero,.hf-article__hero{padding:80px 0 72px}
.hf-blog-hero > div,.hf-article__hero > div{
  width:min(1280px, calc(100% - 3rem));margin:0 auto;max-width:1280px;
}
.hf-blog-hero__fil{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-size:12.5px;margin-bottom:28px;
}
.hf-blog-hero__fil a{text-decoration:none}
.hf-blog-hero__fil a:hover{text-decoration:underline}
.hf-blog-hero__surtitre{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:18px;
}
.hf-blog-hero h1,.hf-article__hero h1{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;
  font-size:clamp(36px,4.4vw,64px);line-height:.98;letter-spacing:-.035em;
  margin:0 0 18px;max-width:20ch;
}
.hf-article__hero h1{max-width:24ch}
.hf-blog-hero p,.hf-article__hero p{
  margin:0;font-size:17px;line-height:1.5;max-width:66ch;
}
.hf-article__meta{
  display:flex;gap:10px;align-items:center;margin-top:22px !important;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  opacity:.72;
}

/* ── Index ───────────────────────────────────────────────────────────────── */
.hf-blog{background:#fff;padding:72px 0 96px;color:var(--g-navy)}
.hf-blog__cadre{width:min(1280px, calc(100% - 3rem));margin:0 auto}

.hf-blog__filtres{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.hf-blog__filtre{
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 16px;border:1px solid rgba(27,33,64,.2);color:var(--g-navy);
  text-decoration:none;transition:background .2s ease,color .2s ease;
}
.hf-blog__filtre:hover{background:var(--g-sable)}
/* La feuille de fidélité colore tous les liens de la zone Elementor en navy,
   à une spécificité supérieure : sur le filtre actif, navy sur navy, le libellé
   disparaissait. D'où le préfixe, qui remet la règle au même niveau. */
body .elementor.elementor.elementor.elementor .hf-blog__filtre.est-actif{
  background:var(--g-navy);color:#fff;border-color:var(--g-navy);
}

.hf-blog__grille{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;
}
.hf-blog__vide{padding:60px 0;text-align:center;color:var(--g-texte)}

/* ── Cartes ──────────────────────────────────────────────────────────────── */
.hf-carte{display:flex;flex-direction:column;background:#fff;min-width:0}
.hf-carte__image{
  display:block;aspect-ratio:16/10;background-size:cover;background-position:center;
  background-color:var(--g-sable);margin-bottom:18px;
}
.hf-carte__corps{display:flex;flex-direction:column;gap:10px;flex:1}
.hf-carte__ligne{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  font-size:12px;color:var(--g-texte);
}
/* Or plutôt que turquoise : le turquoise est réservé aux accents rares. */
.hf-carte__etiquette{
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:11px;
  padding:4px 9px;background:var(--g-or);color:var(--g-navy);
}
.hf-carte__duree{margin-left:auto;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.hf-carte__titre{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;
  font-size:clamp(20px,2vw,26px);line-height:1.12;letter-spacing:-.02em;margin:0;
}
.hf-carte__titre a{color:inherit;text-decoration:none}
.hf-carte__titre a:hover{color:var(--g-or-fonce)}
.hf-carte__extrait{margin:0;font-size:15px;line-height:1.5;color:var(--g-texte)}
.hf-carte__lien{
  margin-top:auto;padding-top:6px;font-size:13px;font-weight:600;
  border-bottom:1px solid currentColor;align-self:flex-start;
}

/* L'article à la une occupe toute la largeur, image à gauche. */
.hf-carte--une{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:44px;align-items:center;margin-bottom:56px;
  padding-bottom:56px;border-bottom:1px solid rgba(27,33,64,.14);
}
.hf-carte--une .hf-carte__image{aspect-ratio:16/11;margin:0;box-shadow:10px 12px 0 var(--g-or)}
.hf-carte--une .hf-carte__titre{font-size:clamp(28px,3vw,42px);line-height:1.02}
.hf-carte--une .hf-carte__extrait{font-size:17px}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.hf-blog__pages{display:flex;gap:8px;margin-top:48px}
.hf-blog__page{
  min-width:40px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(27,33,64,.2);font-size:14px;color:var(--g-navy);text-decoration:none;
}
.hf-blog__page.est-actif{background:var(--g-navy);color:#fff;border-color:var(--g-navy)}

/* ── Article ─────────────────────────────────────────────────────────────── */
.hf-article__visuel{margin:0;background:var(--g-sable)}
.hf-article__visuel img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover}

.hf-article__corps{
  width:min(760px, calc(100% - 3rem));margin:0 auto;padding:64px 0 72px;
  color:var(--g-texte);font-size:17.5px;line-height:1.72;
}
.hf-article__corps > *:first-child{margin-top:0}
.hf-article__corps h2{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;color:var(--g-navy);
  font-size:clamp(26px,2.6vw,34px);line-height:1.08;letter-spacing:-.025em;
  margin:52px 0 16px;
}
.hf-article__corps h3{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;color:var(--g-navy);
  font-size:22px;line-height:1.2;margin:36px 0 12px;
}
.hf-article__corps p{margin:0 0 20px}
.hf-article__corps ul,.hf-article__corps ol{margin:0 0 24px;padding-left:22px}
.hf-article__corps li{margin-bottom:10px}
.hf-article__corps li::marker{color:var(--g-or)}
.hf-article__corps a{color:var(--g-navy);text-decoration:underline;text-underline-offset:3px}
.hf-article__corps a:hover{color:var(--g-or-fonce)}
.hf-article__corps strong{color:var(--g-navy)}
.hf-article__corps blockquote{
  margin:32px 0;padding:22px 26px;background:var(--g-sable);
  border-left:3px solid var(--g-or);font-size:18px;color:var(--g-navy);
}
.hf-article__corps blockquote p:last-child{margin:0}

.hf-article__sources{
  margin-top:52px;padding:24px 26px;background:var(--g-creme);
  border:1px solid rgba(27,33,64,.14);
}
.hf-article__sources h2{
  font-size:11.5px !important;font-family:"DM Sans",Arial,sans-serif !important;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--g-or-fonce) !important;margin:0 0 12px !important;
}
.hf-article__sources ul{margin:0;padding-left:18px;font-size:14px;line-height:1.55}
.hf-article__sources li{margin-bottom:6px}

/* ── Formations liées, appel, suite ──────────────────────────────────────── */
.hf-article__cadre{width:min(1280px, calc(100% - 3rem));margin:0 auto}
.hf-article__formations{background:var(--g-sable);padding:72px 0;color:var(--g-navy)}
.hf-article__surtitre{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g-or-fonce);margin-bottom:14px;
}
.hf-article__formations h2,.hf-article__appel h2{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;
  font-size:clamp(26px,2.8vw,38px);line-height:1.05;letter-spacing:-.03em;margin:0 0 32px;
}
.hf-article__cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hf-article__carte{
  display:flex;flex-direction:column;gap:10px;padding:26px 24px;background:#fff;
  border:1px solid rgba(27,33,64,.12);color:var(--g-navy);text-decoration:none;
  transition:transform .22s ease,box-shadow .22s ease;
}
.hf-article__carte:hover{transform:translateY(-4px);box-shadow:6px 7px 0 var(--g-or)}
.hf-article__duree{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g-or-fonce);
}
.hf-article__carte strong{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;font-size:22px;line-height:1.12;
}
.hf-article__voir{margin-top:auto;font-size:13px;font-weight:600;border-bottom:1px solid currentColor;align-self:flex-start}

.hf-article__appel{background:var(--g-navy);color:#fff;padding:80px 0;text-align:center}
/* Le thème colore les titres en navy : sur fond navy il faut le contredire. */
.hf-article__appel h2{margin-bottom:14px;color:#fff}
.hf-article__formations h2{color:var(--g-navy)}
.hf-article__appel p{margin:0 auto 28px;max-width:60ch;color:rgba(251,246,236,.8);font-size:17px}
.hf-article__bouton{
  display:inline-flex;align-items:center;gap:12px;padding:16px 34px;
  background:var(--g-or);color:var(--g-navy);text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.hf-article__bouton:hover{background:#fff}

.hf-article__suite{background:#fff;padding:72px 0}

/* ── Adaptation ──────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .hf-blog__grille,.hf-article__cartes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-carte--une{grid-template-columns:1fr;gap:24px}
}
@media (max-width:720px){
  .hf-blog-hero,.hf-article__hero{padding:56px 0 48px}
  .hf-blog-hero > div,.hf-article__hero > div,.hf-blog__cadre,.hf-article__cadre{width:calc(100% - 32px)}
  .hf-article__corps{width:calc(100% - 32px);padding:44px 0 52px;font-size:16.5px}
  .hf-blog{padding:48px 0 64px}
  .hf-blog__grille,.hf-article__cartes{grid-template-columns:1fr}
  .hf-carte--une{margin-bottom:36px;padding-bottom:36px}
  .hf-article__formations,.hf-article__appel,.hf-article__suite{padding:52px 0}
}