/* =====================================================================
   he-blog.css — Module blog HETERACTIS (peau he-v2)
   Consolidé depuis les maquettes _design/ (Orfèvre, 2026-06-19) :
   listing.html, carte-article.html, page-article.html.
   Palette STRICTEMENT he-v2 (nuit/bleu/orange — aucun violet).
   Effets : volet bleu nuit, débordement 3D, halo orange au survol,
   triangles low-poly, TOC sticky, encart auteur, CTA porte ouverte.
   Classes he-* (préfixe Heteractis). Commentaires FR, identifiants EN.
   ===================================================================== */

:root {
  --he-nuit:       #0a1228;
  --he-nuit2:      #141a34;
  --he-bleu:       #3d5297;
  --he-bleu2:      #4b62ad;
  --he-bleu3:      #86a6ec;
  --he-orange:     #f9962c;
  --he-or:         #f9c85e; /* doré du survol logo (préférence Seeb) */
  --he-gris-bg:    #F7F7F7;
  --he-texte:      #15213f;
  --he-texte-doux: #4a5568;
  --he-radius-panel: 26px;
}

/* a11y : contenu réservé aux lecteurs d'écran (labels masqués visuellement).
   Indépendant de Bootstrap (non chargé partout). Compatible classe Bootstrap
   .visually-hidden si elle est présente. */
.visually-hidden,
.he-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Le blog vit sur un fond gris clair (peau propre, lisible).
   he-blog.css n'est chargé QUE sur les pages blog (cf. header.php),
   donc cibler `body` directement n'affecte pas le reste du site. */
body {
  background: var(--he-gris-bg);
  color: var(--he-texte);
  -webkit-font-smoothing: antialiased;
}
/* Décale le contenu sous la nav fixe (h-20 du menu.php he-v2). */
main#main { padding-top: 5rem; }

/* Triangles low-poly : keyframes partagées (déclarées une seule fois). */
@keyframes he-fl1 { 0%,100%{transform:translateY(0) rotate(0)}    50%{transform:translateY(-13px) rotate(42deg)} }
@keyframes he-fl2 { 0%,100%{transform:translate(0,0) rotate(0)}    50%{transform:translate(9px,-11px) rotate(-34deg)} }
@keyframes he-fl3 { 0%,100%{transform:translateY(0) rotate(0)}     50%{transform:translateY(11px) rotate(26deg)} }

.he-poly,
.he-card-article__poly,
.he-featured__poly {
  position: absolute;
  background: linear-gradient(135deg, var(--he-bleu3), var(--he-bleu));
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  filter: drop-shadow(0 3px 5px rgba(61,82,151,.35));
  z-index: 1;
}

/* =====================================================================
   1. EN-TÊTE BLEU NUIT (listing + article) — dégradé he-v2
   ===================================================================== */
.he-listing-header,
.he-article-header {
  background: linear-gradient(160deg, var(--he-nuit) 0%, var(--he-nuit2) 55%, #1d2c5b 100%);
  position: relative;
  overflow: hidden;
}
.he-listing-header { padding: 4rem 2rem 3rem; }
.he-article-header { padding: 3.5rem 2rem 4rem; }

.he-listing-header::before,
.he-article-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 68% 30%, rgba(61,82,151,.45), transparent 60%);
  pointer-events: none;
}

.he-listing-header__inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 2; }
.he-article-header__inner { max-width: 860px;  margin: 0 auto; position: relative; z-index: 2; }

.he-listing-header__eyebrow,
.he-cta-article__eyebrow {
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  font-weight: 600;
  margin-bottom: .75rem;
}

.he-listing-header__h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: .9rem;
}

.he-listing-header__desc {
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(255,255,255,.60);
  max-width: 560px;
}

.he-article-header__h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 1.5rem;
  max-width: 680px;
}

/* Fil d'Ariane (sur fond sombre) */
.he-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  color: rgba(255,255,255,.5);
  margin-bottom: 1.5rem;
  list-style: none;
  padding: 0;
}
.he-breadcrumb li + li::before { content: '›'; opacity: .5; }
.he-breadcrumb a { color: rgba(255,255,255,.65); text-decoration: none; }
.he-breadcrumb a:hover { color: var(--he-orange); }

/* Badge catégorie (générique) */
.he-badge {
  display: inline-flex;
  align-items: center;
  background: var(--he-orange);
  /* a11y AA : texte bleu nuit sur orange (#15213f/#f9962c = 5.5:1).
     #fff/orange ne donnait que 2.6:1 -> échec contraste. */
  color: var(--he-texte);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(249,150,44,.30);
}

/* Ligne méta de l'en-tête article */
.he-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.5rem;
  font-size: .75rem;
  color: rgba(255,255,255,.6);
}
.he-article-meta__item { display: inline-flex; align-items: center; gap: .4rem; }
.he-article-meta__item svg { opacity: .7; }
.he-article-meta__sep { color: rgba(255,255,255,.55); font-size: .6rem; }

/* =====================================================================
   2. IMAGE HÉRO ARTICLE — volet bleu + débordement 3D + triangles
   ===================================================================== */
.he-article-hero { display: flex; justify-content: center; margin-top: 2.5rem; position: relative; }

.he-volet {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 3rem;       /* volet élargi pour accueillir une héro plus grande */
  border-radius: var(--he-radius-panel);
  background: linear-gradient(150deg, var(--he-nuit) 0%, var(--he-nuit2) 55%, #1d2c5b 100%);
  box-shadow: 0 36px 72px rgba(10,18,40,.42);
  overflow: visible;          /* débordement 3D */
}
.he-volet::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--he-radius-panel);
  background: radial-gradient(circle at 70% 28%, rgba(61,82,151,.5), transparent 58%);
  pointer-events: none;
  z-index: 1;
}
.he-volet__img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  /* Héro AGRANDIE : ~620px d'affichage (images natives 780px -> jamais sur-échelle,
     on reste sous le natif, donc aucun flou). min() borne la largeur en mobile. */
  max-width: min(620px, 86vw);
  height: auto;
  object-fit: contain;
  border-radius: 14px;        /* coins doux sur les vraies photos featured */
  filter: drop-shadow(0 26px 44px rgba(0,0,0,.50));
  margin-bottom: -64px;       /* l'illustration sort plus franchement vers le contenu */
  transition: filter .4s ease;
}
/* Illustration vectorielle de secours (SVG) : pas de coins arrondis, plafond propre. */
svg.he-volet__img { border-radius: 0; max-width: min(480px, 80vw); }

.he-volet:hover .he-volet__img {
  filter: drop-shadow(0 26px 44px rgba(0,0,0,.50))
          drop-shadow(0 0 36px rgba(249,150,44,.30)); /* halo orange */
}

/* Paliers responsive : on rétrécit le volet et le débordement avant le mobile. */
@media (max-width: 640px) {
  .he-volet { padding: 1.75rem 1.5rem; }
  .he-volet__img { margin-bottom: -40px; }
}

.he-poly.p1 { width:20px; height:20px; top:-6px;   left:6%;   opacity:.6;  animation:he-fl1 7.5s ease-in-out infinite; }
.he-poly.p2 { width:14px; height:14px; bottom:20%; right:-2%; opacity:.5;  animation:he-fl2 9s   ease-in-out infinite; }
.he-poly.p3 { width:11px; height:11px; top:34%;    right:7%;  opacity:.42; animation:he-fl3 8.2s ease-in-out infinite; }
.he-poly.p4 { width: 9px; height: 9px; bottom:-4px;left:22%;  opacity:.5;  animation:he-fl1 10s  ease-in-out infinite; }

/* =====================================================================
   3. CORPS ARTICLE + SOMMAIRE (TOC) STICKY
   ===================================================================== */
.he-article-layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 5rem 2rem 4rem;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) {
  .he-article-layout { grid-template-columns: 1fr; }
  .he-article-toc { display: none; }
}

.he-article-toc { position: sticky; top: 6rem; }
.he-article-toc__titre {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--he-bleu2);
  margin-bottom: .75rem;
}
.he-article-toc ol { list-style: none; display: flex; flex-direction: column; gap: .5rem; padding: 0; }
.he-article-toc a {
  font-size: .75rem;
  color: var(--he-texte-doux);
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  text-decoration: none;
  transition: color .25s;
}
.he-article-toc a::before {
  content: '';
  display: inline-block;
  width: 3px; min-width: 3px; height: 14px;
  background: #e2e6ee;
  border-radius: 2px;
  margin-top: 2px;
  transition: background .25s;
}
.he-article-toc a:hover { color: var(--he-bleu); }
.he-article-toc a:hover::before { background: var(--he-orange); }
.he-article-toc a.active { color: var(--he-bleu); font-weight: 600; }
.he-article-toc a.active::before { background: var(--he-orange); }

.he-article-corps { min-width: 0; }
.he-article-corps h2 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--he-texte);
  margin: 2.5rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid rgba(61,82,151,.12);
}
.he-article-corps h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--he-bleu);
  margin: 1.75rem 0 .6rem;
}
.he-article-corps p {
  font-size: .93rem;
  line-height: 1.8;
  color: var(--he-texte-doux);
  margin-bottom: 1.1rem;
}
.he-article-corps strong { color: var(--he-texte); font-weight: 700; }
.he-article-corps a { color: var(--he-bleu); text-decoration: underline; text-underline-offset: 2px; }
.he-article-corps a:hover { color: var(--he-orange); }
.he-article-corps ul,
.he-article-corps ol { padding-left: 1.5rem; margin-bottom: 1.1rem; }
.he-article-corps li {
  font-size: .93rem;
  line-height: 1.75;
  color: var(--he-texte-doux);
  margin-bottom: .3rem;
}
.he-article-corps blockquote {
  border-left: 3px solid var(--he-orange);
  padding: .75rem 1.25rem;
  background: rgba(61,82,151,.05);
  border-radius: 0 8px 8px 0;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--he-bleu);
  font-size: .9rem;
}
/* Toute image du corps est centrée par défaut (block + marges auto) — couvre
   les images inline hors figure, qui sinon resteraient collées à gauche. */
.he-article-corps img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: 10px; }
.he-article-corps figure { margin: 1.5rem auto; text-align: center; }
.he-article-corps figcaption {
  font-size: .72rem;
  color: var(--he-texte-doux);
  text-align: center;
  margin-top: .5rem;
}

/* =====================================================================
   3 bis. HERO PAGE AUTEUR (en-tête bleu : avatar + nom + rôle + bio)
   ===================================================================== */
.he-auteur-hero {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-top: 1.5rem;
}
@media (max-width: 640px) {
  .he-auteur-hero { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
}
.he-auteur-hero__avatar {
  width: 96px; height: 96px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--he-bleu) 0%, var(--he-nuit2) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800; color: #fff;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(10,18,40,.45);
  border: 2px solid rgba(134,166,236,.35);
}
.he-auteur-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.he-auteur-hero__role {
  font-size: .78rem;
  font-weight: 600;
  color: var(--he-bleu3);
  letter-spacing: .02em;
  margin-bottom: .75rem;
}
.he-auteur-hero__bio {
  font-size: .88rem;
  line-height: 1.7;
  color: rgba(255,255,255,.7);
  max-width: 620px;
}

/* =====================================================================
   4. ENCART AUTEUR
   ===================================================================== */
.he-auteur {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(61,82,151,.1);
  padding: 1.5rem;
  margin-top: 3rem;
  box-shadow: 0 4px 20px rgba(21,33,63,.06);
}
.he-auteur__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--he-bleu) 0%, var(--he-nuit2) 100%);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff; font-weight: 800;
  overflow: hidden;
}
.he-auteur__avatar img { width: 100%; height: 100%; object-fit: cover; }
.he-auteur__texte { flex: 1; }
.he-auteur__nom { font-size: .9rem; font-weight: 700; color: var(--he-texte); margin-bottom: .2rem; }
.he-auteur__nom a { color: inherit; text-decoration: none; }
.he-auteur__nom a:hover { color: var(--he-orange); }
/* Byline cliquable dans la ligne méta de l'en-tête (sur fond sombre). */
.he-article-meta__item a[rel="author"] { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.he-article-meta__item a[rel="author"]:hover { color: var(--he-orange); border-bottom-color: var(--he-orange); }
.he-auteur__role { font-size: .72rem; color: var(--he-bleu2); font-weight: 500; margin-bottom: .6rem; letter-spacing: .02em; }
.he-auteur__bio { font-size: .8rem; line-height: 1.65; color: var(--he-texte-doux); }

/* =====================================================================
   5. ARTICLES CONNEXES
   ===================================================================== */
.he-connexes { margin-top: 4rem; }
.he-connexes__titre {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--he-bleu2);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.he-connexes__titre::after { content: ''; flex: 1; height: 1px; background: rgba(61,82,151,.15); }
.he-connexes__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 700px) { .he-connexes__grille { grid-template-columns: 1fr; } }

.he-card-connexe {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(61,82,151,.08);
  box-shadow: 0 3px 14px rgba(21,33,63,.06);
  display: flex;
  flex-direction: column;
  transition: box-shadow .3s ease, transform .3s ease;
}
.he-card-connexe:hover { box-shadow: 0 10px 28px rgba(21,33,63,.12); transform: translateY(-3px); }
.he-card-connexe__volet {
  background: linear-gradient(150deg, var(--he-nuit) 0%, var(--he-nuit2) 60%, #1d2c5b 100%);
  height: 70px;
  position: relative;
}
.he-card-connexe__badge {
  position: absolute;
  bottom: -10px; left: .75rem;
  background: var(--he-orange);
  color: var(--he-texte); /* a11y AA : bleu nuit sur orange (5.5:1) */
  font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 20px;
}
.he-card-connexe__corps { padding: 1.1rem .9rem .9rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.he-card-connexe__titre a { font-size: .82rem; font-weight: 700; line-height: 1.35; color: var(--he-texte); letter-spacing: -.01em; text-decoration: none; }
.he-card-connexe__titre a:hover { color: var(--he-bleu); }
.he-card-connexe__meta { font-size: .67rem; color: var(--he-bleu2); font-weight: 500; }
.he-card-connexe__lien {
  font-size: .72rem; font-weight: 600; color: var(--he-bleu);
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: auto; position: relative; width: fit-content; text-decoration: none;
}
.he-card-connexe__lien::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--he-orange); transition: width .3s ease;
}
.he-card-connexe__lien:hover::after { width: 100%; }

/* =====================================================================
   6. CTA « PORTE OUVERTE » (invitation, jamais agressif)
   ===================================================================== */
.he-cta-article {
  background: linear-gradient(150deg, var(--he-nuit) 0%, var(--he-nuit2) 55%, #1d2c5b 100%);
  border-radius: 18px;
  padding: 3rem 2.5rem;
  margin-top: 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.he-cta-article::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 30%, rgba(61,82,151,.5), transparent 60%);
  pointer-events: none;
}
.he-cta-article__contenu { position: relative; z-index: 2; }
.he-cta-article__titre {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: .9rem;
  line-height: 1.15;
}
.he-cta-article__texte {
  font-size: .85rem;
  line-height: 1.7;
  color: rgba(255,255,255,.65);
  max-width: 480px;
  margin: 0 auto 1.75rem;
}
.he-cta-article__btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--he-orange);
  color: var(--he-texte); /* a11y AA : bleu nuit sur orange (5.5:1) */
  text-decoration: none;
  font-size: .85rem;
  font-weight: 700;
  padding: .8rem 1.75rem;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(249,150,44,.30);
  transition: background .25s, box-shadow .25s, transform .25s;
}
.he-cta-article__btn:hover {
  background: #e8871a;
  box-shadow: 0 12px 32px rgba(249,150,44,.40);
  transform: translateY(-2px);
  color: var(--he-texte); /* a11y AA : conserve le bleu nuit au survol (#15213f/#e8871a ~4.6:1) */
}
.he-cta-article__note { margin-top: 1rem; font-size: .68rem; color: rgba(255,255,255,.35); }

/* =====================================================================
   7. LISTING — filtres, featured, grille, pagination
   ===================================================================== */
.he-listing-main { max-width: 1080px; margin: 0 auto; padding: 0 2rem 1rem; }

.he-filtres {
  max-width: 1080px;
  margin: 2.5rem auto 0;
  padding: 0 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}
.he-filtre {
  display: inline-flex;
  align-items: center;
  padding: .4rem 1rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  transition: background .25s, color .25s, box-shadow .25s, border-color .25s;
  border: 1.5px solid rgba(61,82,151,.2);
  background: #fff;
  color: var(--he-texte-doux);
  text-decoration: none;
}
.he-filtre:hover { background: var(--he-bleu); color: #fff; border-color: var(--he-bleu); box-shadow: 0 4px 14px rgba(61,82,151,.20); }
.he-filtre.actif { background: var(--he-nuit2); color: #fff; border-color: var(--he-nuit2); }
.he-filtre__compteur {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(61,82,151,.12);
  font-size: .58rem; margin-left: .4rem; font-weight: 700;
}
.he-filtre.actif .he-filtre__compteur,
.he-filtre:hover .he-filtre__compteur { background: rgba(255,255,255,.2); }

/* --- Featured --- */
.he-featured {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 6px 28px rgba(21,33,63,.09);
  border: 1px solid rgba(61,82,151,.08);
  margin: 2.5rem 0 3rem;
  transition: box-shadow .35s ease, transform .35s ease;
}
.he-featured:hover { box-shadow: 0 18px 48px rgba(21,33,63,.15); transform: translateY(-4px); }
@media (max-width: 720px) { .he-featured { grid-template-columns: 1fr; } }

.he-featured__volet {
  background: linear-gradient(150deg, var(--he-nuit) 0%, var(--he-nuit2) 55%, #1d2c5b 100%);
  display: flex; align-items: center; justify-content: center;
  /* Fenêtre photo : on borne le ratio pour que l'image héro (1200×686 ≈ 16:9)
     remplisse vraiment la cellule. min-height garde un volet présent même quand
     la colonne de texte est plus haute. */
  min-height: 320px;
  position: relative; overflow: hidden;
}
.he-featured__volet::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 28%, rgba(61,82,151,.5), transparent 58%);
  pointer-events: none; z-index: 1;
}
/* PHOTO réelle (.webp) : remplit toute la fenêtre en cover, présence forte.
   Voile bleu nuit au bord interne pour fondre l'image dans la carte + halo au survol. */
img.he-featured__img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .5s ease, filter .4s ease;
}
.he-featured:hover img.he-featured__img { transform: scale(1.04); }
/* Dégradé de liaison sur le bord interne (vers la colonne texte) : l'image
   « entre » dans la carte au lieu d'être coupée net. Halo orange au survol. */
.he-featured__volet::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(105deg, transparent 60%, rgba(10,18,40,.20) 100%);
  pointer-events: none;
  box-shadow: inset 0 0 0 0 rgba(249,150,44,0);
  transition: box-shadow .4s ease;
}
.he-featured:hover .he-featured__volet::after {
  box-shadow: inset 0 0 60px -10px rgba(249,150,44,.40);
}
/* Illustration vectorielle de secours (SVG) : pas de cover (déformerait le tracé),
   on garde un symbole détouré flottant, centré, avec halo au survol. */
svg.he-featured__img {
  position: relative; z-index: 3; display: block;
  max-width: 200px; height: auto; object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.50));
  transition: filter .4s ease;
}
.he-featured:hover svg.he-featured__img {
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.50)) drop-shadow(0 0 24px rgba(249,150,44,.25));
}
/* Triangles low-poly : décor flottant AU-DESSUS de la photo (z-index:3). */
.he-featured__poly { z-index: 3; }
.he-featured__poly.p1 { width:18px; height:18px; top:12px; left:8%;  opacity:.55; animation:he-fl1 7.5s ease-in-out infinite; }
.he-featured__poly.p2 { width:12px; height:12px; bottom:25%; right:10%; opacity:.4; animation:he-fl2 9s ease-in-out infinite; }
.he-featured__poly.p3 { width:9px;  height:9px;  top:45%;   right:15%; opacity:.38; animation:he-fl3 8.2s ease-in-out infinite; }

.he-featured__corps { padding: 2.5rem 2rem; display: flex; flex-direction: column; justify-content: center; gap: .9rem; }
.he-featured__eyebrow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.he-featured__meta { font-size: .7rem; color: var(--he-bleu2); font-weight: 500; }
.he-featured__titre a { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; color: var(--he-texte); text-decoration: none; }
.he-featured__titre a:hover { color: var(--he-bleu); }
.he-featured__extrait { font-size: .85rem; line-height: 1.7; color: var(--he-texte-doux); }
.he-featured__lien {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 700; color: var(--he-bleu);
  position: relative; width: fit-content; text-decoration: none;
}
.he-featured__lien::after {
  content: ''; position: absolute; left: 0; bottom: -3px; height: 1.5px; width: 0;
  background: var(--he-orange); transition: width .35s ease;
}
.he-featured__lien:hover::after { width: 100%; }
.he-featured__lien svg { transition: transform .3s ease; }
.he-featured__lien:hover svg { transform: translateX(4px); }

/* --- Grille --- */
.he-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-bottom: 3rem; }
@media (max-width: 900px) { .he-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .he-grille { grid-template-columns: 1fr; } }

.he-card-article {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(21,33,63,.07);
  border: 1px solid rgba(61,82,151,.07);
  display: flex;
  flex-direction: column;
  transition: box-shadow .35s ease, transform .35s ease;
}
.he-card-article:hover { box-shadow: 0 14px 38px rgba(21,33,63,.14); transform: translateY(-4px); }
.he-card-article__volet {
  position: relative;
  background: linear-gradient(150deg, var(--he-nuit) 0%, var(--he-nuit2) 55%, #1d2c5b 100%);
  display: flex; align-items: center; justify-content: center;
  /* Bandeau photo : ratio 16:9 (comme les héros 1200×686), l'image REMPLIT
     toute la largeur de la carte au lieu d'une vignette flottante. */
  aspect-ratio: 16 / 9;
  min-height: 168px;
  overflow: hidden;
}
.he-card-article__volet::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 28%, rgba(61,82,151,.45), transparent 58%);
  pointer-events: none; z-index: 1;
}
/* PHOTO réelle (.webp) : remplit le bandeau en cover, zoom doux au survol. */
img.he-card-article__img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .45s ease;
}
.he-card-article:hover img.he-card-article__img { transform: scale(1.05); }
/* Halo orange + léger assombrissement bas pour asseoir le badge. */
.he-card-article__volet::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, transparent 55%, rgba(10,18,40,.30) 100%);
  pointer-events: none;
  box-shadow: inset 0 0 0 0 rgba(249,150,44,0);
  transition: box-shadow .35s ease;
}
.he-card-article:hover .he-card-article__volet::after {
  box-shadow: inset 0 0 40px -8px rgba(249,150,44,.38);
}
/* Illustration vectorielle de secours (SVG) : symbole détouré flottant (contain). */
svg.he-card-article__img {
  position: relative; z-index: 3; display: block;
  max-width: 130px; height: auto; object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.40));
  transition: filter .35s ease;
}
.he-card-article:hover svg.he-card-article__img {
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.40)) drop-shadow(0 0 14px rgba(249,150,44,.28));
}
/* Triangles low-poly : décor flottant AU-DESSUS de la photo. */
.he-card-article__poly { z-index: 3; }
.he-card-article__poly.p1 { width:12px; height:12px; top:8px;   left:8%;  opacity:.52; animation:he-fl1 7.5s ease-in-out infinite; }
.he-card-article__poly.p2 { width:8px;  height:8px;  bottom:30%;right:6%; opacity:.42; animation:he-fl2 9s   ease-in-out infinite; }
/* Badge catégorie posé SUR le bandeau photo (en haut-gauche, lisible sur image). */
.he-card-article__badge {
  position: absolute; top: .75rem; left: .75rem; z-index: 4;
  display: inline-flex; align-items: center;
  background: var(--he-orange); color: var(--he-texte); /* a11y AA : bleu nuit sur orange (5.5:1) */
  font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .65rem; border-radius: 20px;
  box-shadow: 0 4px 12px rgba(10,18,40,.35);
  text-decoration: none;
}
.he-card-article__badge:hover { background: var(--he-or); }
.he-card-article__corps { padding: 1.5rem 1.1rem 1.1rem; flex: 1; display: flex; flex-direction: column; gap: .65rem; }
.he-card-article__meta { font-size: .67rem; color: var(--he-bleu2); font-weight: 500; display: flex; align-items: center; gap: .45rem; }
.he-card-article__meta::before { content: ''; display: inline-block; width: 14px; height: 1.5px; background: var(--he-orange); border-radius: 2px; }
.he-card-article__titre { margin: 0; }
.he-card-article__titre a { font-size: .93rem; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; color: var(--he-texte); text-decoration: none; }
.he-card-article__titre a:hover { color: var(--he-bleu); }
.he-card-article__extrait {
  font-size: .78rem; line-height: 1.65; color: var(--he-texte-doux);
  flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.he-card-article__lien {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .74rem; font-weight: 600; color: var(--he-bleu);
  position: relative; width: fit-content; text-decoration: none;
}
.he-card-article__lien::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--he-orange); transition: width .3s ease;
}
.he-card-article__lien:hover::after { width: 100%; }
.he-card-article__lien svg { transition: transform .3s ease; }
.he-card-article__lien:hover svg { transform: translateX(3px); }

/* --- Pagination sobre --- */
.he-pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 0 4rem; flex-wrap: wrap; list-style: none; margin: 0; }
.he-pagination__btn,
.he-pagination__nav {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--he-texte-doux);
  background: #fff; border: 1px solid rgba(61,82,151,.12);
  text-decoration: none;
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.he-pagination__btn { width: 38px; height: 38px; border-radius: 8px; font-size: .8rem; }
.he-pagination__nav { gap: .4rem; padding: 0 .9rem; height: 38px; border-radius: 8px; font-size: .75rem; color: var(--he-bleu); }
.he-pagination__btn:hover,
.he-pagination__nav:hover { background: var(--he-bleu); color: #fff; border-color: var(--he-bleu); box-shadow: 0 4px 12px rgba(61,82,151,.20); }
.he-pagination__btn.actif { background: var(--he-nuit2); color: #fff; border-color: var(--he-nuit2); }
.he-listing-compte { text-align: center; color: var(--he-texte-doux); font-size: .75rem; padding-bottom: 2.5rem; }

/* =====================================================================
   7 bis. FILTRES PROÉMINENTS + CHARGEMENT PROGRESSIF (JS he-blog-listing.js)
   ===================================================================== */

/* Filtres : on les rend plus présents (pastilles plus charnues, état actif
   bleu nuit/orange marqué) et accessibles au clavier (focus visible). */
.he-filtres { gap: .55rem .6rem; }
.he-filtre {
  padding: .5rem 1.05rem;
  font-size: .74rem;
  cursor: pointer;
}
/* État actif : socle bleu nuit + filet orange (palette he-v2). */
.he-filtre.actif {
  background: var(--he-nuit2);
  color: #fff;
  border-color: var(--he-orange);
  box-shadow: 0 4px 16px rgba(10,18,40,.22);
}
.he-filtre.actif .he-filtre__compteur { background: var(--he-orange); color: var(--he-texte); }
/* Accessibilité : anneau de focus net au clavier sur les chips. */
.he-filtre:focus-visible {
  outline: 2px solid var(--he-orange);
  outline-offset: 2px;
}

/* Masquage progressif : actif UNIQUEMENT quand le JS a armé la grille
   (attribut data-he-init posé sur <html>). Sans JS, rien n'est masqué :
   toutes les cartes (donc tous les liens) restent visibles et crawlables. */
.he-card-article[hidden] { display: none; }
/* Apparition douce des cartes révélées par lot / filtre. */
html[data-he-init] .he-card-article {
  animation: he-card-in .45s ease both;
}
@keyframes he-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Message « aucun article dans cette catégorie » (piloté par le JS). */
.he-listing-vide {
  text-align: center;
  color: var(--he-texte-doux);
  font-size: .85rem;
  padding: 3rem 0 1rem;
}

/* Bloc « Charger plus » : centré, bouton bleu nuit -> orange au survol. */
.he-charger-plus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  padding: .5rem 0 3.5rem;
}
.he-charger-plus__btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(150deg, var(--he-nuit) 0%, var(--he-nuit2) 60%, #1d2c5b 100%);
  border: 1.5px solid rgba(61,82,151,.35);
  border-radius: 12px;
  padding: .85rem 1.75rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(10,18,40,.18);
  transition: background .25s, box-shadow .25s, transform .25s, border-color .25s;
}
.he-charger-plus__btn:hover {
  background: var(--he-orange);
  color: var(--he-texte); /* a11y AA : bleu nuit sur orange (5.5:1) */
  border-color: var(--he-orange);
  box-shadow: 0 12px 30px rgba(249,150,44,.30);
  transform: translateY(-2px);
}
.he-charger-plus__btn:focus-visible {
  outline: 2px solid var(--he-orange);
  outline-offset: 3px;
}
.he-charger-plus__btn[disabled] { opacity: .5; cursor: default; transform: none; }
.he-charger-plus__compte {
  font-size: .72rem;
  color: var(--he-texte-doux);
  margin: 0;
}

/* =====================================================================
   8. WIDGETS ÉDITORIAUX (he-w-*) — figure, parcours, calc, simulateur,
      sondage, checklist. Auto-initialisés par he-blog-widgets.js.
      Palette STRICTEMENT he-v2 (nuit/bleu/orange — aucun violet).
   ===================================================================== */

/* Tous les widgets vivent dans la colonne de lecture de l'article : on leur
   donne de l'air vertical homogène. (Le corps borne la largeur à 820px.) */
.he-article-corps .he-w-figure,
.he-article-corps .he-w-parcours,
.he-article-corps .he-w-calc,
.he-article-corps .he-w-simulateur,
.he-article-corps .he-w-sondage,
.he-article-corps .he-w-checklist { margin: 2.25rem 0; }

/* --- 8.1 FIGURE image légendée (grandes images inline) --------------- */
/* La figure est CENTRÉE dans la colonne de lecture via margin-inline:auto :
   fiable quel que soit le contexte (le corps est une grid-cell, l'ancienne
   technique margin-left:50%+translateX débordait hors écran à gauche). */
.he-w-figure {
  margin: 2.25rem auto;
  text-align: center;
}
.he-w-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;          /* centre l'image même si plus étroite que la figure */
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(21,33,63,.14);
  border: 1px solid rgba(61,82,151,.10);
}
.he-w-figure figcaption {
  font-size: .74rem;
  color: var(--he-texte-doux);
  margin-top: .65rem;
  line-height: 1.5;
}
.he-w-figure figcaption strong { color: var(--he-bleu); }
/* Tailles : large tient dans la lecture ; pleine respire un peu plus large,
   mais reste centrée dans la colonne (jamais de débordement sous la TOC).
   --wide : image déco plus large que la colonne, parfaitement centrée.
   Technique : marges négatives SYMÉTRIQUES + width compensatoire — le
   centrage est mathématiquement garanti (gauche = droite). Borne à
   calc(100vw - 2rem) pour ne jamais déborder de l'écran en mobile. */
.he-w-figure--large  { max-width: 100%; }
.he-w-figure--pleine { max-width: min(820px, 100%); }
.he-w-figure--wide {
  margin-inline: -3rem;
  width: calc(100% + 6rem);
  max-width: min(1000px, calc(100vw - 2rem));
}
/* Sur mobile (colonne unique, pas de TOC) : on réduit le débordement. */
@media (max-width: 640px) {
  .he-w-figure--wide {
    margin-inline: -1rem;
    width: calc(100% + 2rem);
    max-width: calc(100vw - 1rem);
  }
}

/* --- 8.2 PARCOURS (timeline numérotée) ------------------------------- */
.he-w-parcours {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0;
  position: relative;
}
/* Ligne verticale de liaison (sous les pastilles). */
.he-w-parcours::before {
  content: '';
  position: absolute;
  left: 21px; top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--he-bleu) 0%, rgba(61,82,151,.15) 100%);
  border-radius: 2px;
}
.he-w-parcours__item {
  position: relative;
  display: flex;
  gap: 1.1rem;
  padding: .35rem 0 1.6rem;
}
.he-w-parcours__item:last-child { padding-bottom: 0; }
/* Révélation au scroll : masquée UNIQUEMENT si le JS a armé l'animation
   (--anime). Sans JS / sans IntersectionObserver, l'item reste visible. */
.he-w-parcours--anime .he-w-parcours__item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.he-w-parcours--anime .he-w-parcours__item.is-in { opacity: 1; transform: none; }
.he-w-parcours__pastille {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--he-bleu) 0%, var(--he-nuit2) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(61,82,151,.30);
  border: 2px solid #fff;
}
.he-w-parcours__num {
  position: absolute;
  bottom: -4px; right: -4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--he-orange);
  color: var(--he-texte); /* a11y AA : chiffre bleu nuit sur orange (5.5:1) */
  font-size: .62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(249,150,44,.35);
}
.he-w-parcours__corps { padding-top: .15rem; min-width: 0; }
.he-w-parcours__label {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--he-bleu2);
  margin-bottom: .3rem;
}
.he-w-parcours__texte { font-size: .9rem; line-height: 1.7; color: var(--he-texte-doux); }
.he-w-parcours__texte strong { color: var(--he-texte); }

/* --- 8.3 CALCULATEUR ------------------------------------------------- */
.he-w-calc,
.he-w-simulateur,
.he-w-sondage {
  background: #fff;
  border: 1px solid rgba(61,82,151,.12);
  border-radius: 16px;
  padding: 1.6rem 1.5rem;
  box-shadow: 0 8px 28px rgba(21,33,63,.07);
}
.he-w-calc__titre,
.he-w-sim__titre,
.he-w-sondage__titre,
[data-titre].he-w-calc::before { /* secours si pas de <h*> */ }
.he-w-calc[data-titre]::before,
.he-w-simulateur[data-titre]::before,
.he-w-sondage[data-titre]::before {
  content: attr(data-titre);
  display: block;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--he-texte);
  margin-bottom: 1rem;
}
.he-w-calc label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--he-texte);
  margin-bottom: .9rem;
}
.he-w-calc label.he-w-calc__check {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 500; color: var(--he-texte-doux);
  cursor: pointer;
}
.he-w-calc input[type="number"],
.he-w-calc input[type="range"],
.he-w-calc select {
  display: block;
  width: 100%;
  margin-top: .4rem;
  padding: .55rem .7rem;
  font-size: .85rem;
  color: var(--he-texte);
  background: var(--he-gris-bg);
  border: 1.5px solid rgba(61,82,151,.18);
  border-radius: 9px;
  transition: border-color .2s, box-shadow .2s;
}
.he-w-calc input[type="range"] { padding: 0; accent-color: var(--he-orange); }
.he-w-calc input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--he-orange); margin: 0; }
.he-w-calc input:focus,
.he-w-calc select:focus {
  outline: none;
  border-color: var(--he-bleu);
  box-shadow: 0 0 0 3px rgba(61,82,151,.15);
}
.he-w-calc__resultat {
  margin-top: 1.1rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(150deg, var(--he-nuit) 0%, var(--he-nuit2) 60%, #1d2c5b 100%);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: .25rem;
}
.he-w-calc__resultat-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.he-w-calc__resultat-valeur {
  font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1;
}
.he-w-calc__unite { font-size: 1rem; font-weight: 600; color: var(--he-orange); }

/* --- 8.4 SIMULATEUR -------------------------------------------------- */
.he-w-sim__progress {
  height: 5px;
  background: rgba(61,82,151,.12);
  border-radius: 4px;
  margin-bottom: 1.4rem;
  overflow: hidden;
}
.he-w-sim__progress-bar {
  display: block; height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--he-bleu), var(--he-orange));
  border-radius: 4px;
  transition: width .35s ease;
}
.he-w-sim__intitule {
  font-size: 1rem; font-weight: 700; color: var(--he-texte);
  margin: 0 0 1rem; letter-spacing: -.02em;
}
.he-w-sim__choix { display: flex; flex-direction: column; gap: .6rem; }
.he-w-sim__btn {
  text-align: left;
  padding: .85rem 1.1rem;
  font-size: .85rem; font-weight: 600;
  color: var(--he-texte);
  background: var(--he-gris-bg);
  border: 1.5px solid rgba(61,82,151,.16);
  border-radius: 11px;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.he-w-sim__btn:hover,
.he-w-sim__btn:focus-visible {
  background: var(--he-bleu); color: #fff; border-color: var(--he-bleu);
  transform: translateX(3px);
  box-shadow: 0 6px 18px rgba(61,82,151,.22);
  outline: none;
}
.he-w-sim__sortie {
  padding-top: .25rem;
}
.he-w-sim__sortie-eyebrow {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--he-bleu2);
}
.he-w-sim__sortie-titre {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--he-texte); margin: .35rem 0 .6rem;
}
.he-w-sim__sortie-texte { font-size: .88rem; line-height: 1.7; color: var(--he-texte-doux); }
.he-w-sim__rejouer {
  margin-top: 1rem;
  font-size: .75rem; font-weight: 700;
  color: var(--he-bleu);
  background: none; border: none; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 3px;
}
.he-w-sim__rejouer:hover { color: var(--he-orange); }

/* --- 8.5 SONDAGE (poll) ---------------------------------------------- */
.he-w-sondage__intitule {
  font-size: 1rem; font-weight: 700; color: var(--he-texte);
  margin: 0 0 1rem; letter-spacing: -.02em;
}
.he-w-sondage__options { display: flex; flex-direction: column; gap: .55rem; }
.he-w-sondage__btn {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding: .8rem 1.1rem;
  font-size: .85rem; font-weight: 600;
  color: var(--he-texte);
  background: var(--he-gris-bg);
  border: 1.5px solid rgba(61,82,151,.16);
  border-radius: 11px;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.he-w-sondage__btn:hover,
.he-w-sondage__btn:focus-visible {
  background: var(--he-bleu); color: #fff; border-color: var(--he-bleu); outline: none;
}
/* Mode résultat : jauge de fond proportionnelle (--pct) + libellé/% */
.he-w-sondage__btn--resultat {
  display: flex; align-items: center; justify-content: space-between;
  cursor: default;
  background: #fff; color: var(--he-texte);
}
.he-w-sondage__btn--resultat:hover { background: #fff; color: var(--he-texte); }
.he-w-sondage__btn--resultat::before {
  content: '';
  position: absolute; inset: 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, rgba(61,82,151,.16), rgba(61,82,151,.08));
  transition: width .5s ease;
  z-index: 0;
}
.he-w-sondage__btn--resultat.is-mine { border-color: var(--he-orange); }
.he-w-sondage__btn--resultat.is-mine::before {
  background: linear-gradient(90deg, rgba(249,150,44,.22), rgba(249,150,44,.10));
}
.he-w-sondage__btn-label,
.he-w-sondage__btn-pct { position: relative; z-index: 1; }
.he-w-sondage__btn-pct { font-weight: 800; color: var(--he-bleu); }
.he-w-sondage__btn--resultat.is-mine .he-w-sondage__btn-pct { color: var(--he-orange); }
.he-w-sondage__note { font-size: .68rem; color: var(--he-texte-doux); margin: .75rem 0 0; }

/* --- 8.6 CHECKLIST / ÉTAPES cliquable -------------------------------- */
.he-w-checklist {
  background: #fff;
  border: 1px solid rgba(61,82,151,.12);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 8px 28px rgba(21,33,63,.07);
}
.he-w-checklist__head {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.he-w-checklist__titre {
  font-size: .95rem; font-weight: 800; letter-spacing: -.02em; color: var(--he-texte);
}
.he-w-checklist__compteur {
  font-size: .7rem; font-weight: 700; color: var(--he-bleu2);
  margin-left: auto;
}
.he-w-checklist__barre {
  flex-basis: 100%;
  height: 5px; border-radius: 4px;
  background: rgba(61,82,151,.12); overflow: hidden;
}
.he-w-checklist__jauge {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--he-bleu), var(--he-orange));
  border-radius: 4px; transition: width .35s ease;
}
.he-w-checklist ul { list-style: none; padding: 0; margin: 0; }
.he-w-checklist__item { margin: 0; }
.he-w-checklist__toggle {
  display: flex; align-items: flex-start; gap: .7rem;
  width: 100%; text-align: left;
  padding: .6rem .25rem;
  background: none; border: none; cursor: pointer;
  font: inherit; color: var(--he-texte-doux);
  border-bottom: 1px solid rgba(61,82,151,.08);
}
.he-w-checklist__item:last-child .he-w-checklist__toggle { border-bottom: none; }
.he-w-checklist__case {
  flex-shrink: 0;
  width: 20px; height: 20px; margin-top: 1px;
  border-radius: 6px;
  border: 2px solid rgba(61,82,151,.30);
  position: relative;
  transition: background .2s, border-color .2s;
}
.he-w-checklist__case::after {
  content: ''; position: absolute;
  left: 5px; top: 1px; width: 6px; height: 11px;
  border: solid var(--he-texte); border-width: 0 2px 2px 0; /* a11y : coche bleu nuit sur case orange (5.5:1) */
  transform: rotate(45deg) scale(0);
  transition: transform .18s ease;
}
.he-w-checklist__label { font-size: .88rem; line-height: 1.55; }
.he-w-checklist__toggle:hover .he-w-checklist__case { border-color: var(--he-bleu); }
.he-w-checklist__toggle:focus-visible { outline: 2px solid var(--he-bleu); outline-offset: 2px; border-radius: 6px; }
.he-w-checklist__item.is-done .he-w-checklist__case {
  background: var(--he-orange); border-color: var(--he-orange);
}
.he-w-checklist__item.is-done .he-w-checklist__case::after { transform: rotate(45deg) scale(1); }
.he-w-checklist__item.is-done .he-w-checklist__label {
  /* a11y AA : on marque l'item « fait » par le barré + une teinte grise lisible.
     L'ancien opacity:.65 ramenait le contraste à ~1.5:1 (illisible). On garde
     --he-texte-doux pleine opacité (#4a5568/#fff = 5.9:1). */
  color: var(--he-texte-doux); text-decoration: line-through;
}

/* =====================================================================
   8bis. BLOC RÉDACTIONNEL DE CATÉGORIE (hub SEO sous la grille)
   Carte blanche centrée, calée sur la largeur du listing, séparée de la
   grille par un filet. La typo (h2/h3/p/a) est héritée de .he-article-corps.
   ===================================================================== */
.he-cat-intro {
  max-width: 1080px;
  margin: 3.5rem auto 0;
  padding: 0 2rem 2rem;
}
.he-cat-intro__inner {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(61,82,151,.12);
  border-top: 4px solid var(--he-orange);
  border-radius: var(--he-radius-panel);
  padding: 2.5rem 2.75rem 2.25rem;
  box-shadow: 0 18px 40px -28px rgba(10,18,40,.45);
}
/* Premier titre du bloc : pas de marge haute superflue dans la carte. */
.he-cat-intro__inner.he-article-corps > h2:first-child { margin-top: .25rem; }

@media (max-width: 600px) {
  .he-cat-intro { padding: 0 1rem 1.5rem; margin-top: 2.5rem; }
  .he-cat-intro__inner { padding: 1.75rem 1.4rem 1.5rem; }
}

/* =====================================================================
   9. Préférences mouvement réduit
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .he-poly, .he-card-article__poly, .he-featured__poly { animation: none; }
  .he-card-article, .he-featured, .he-volet__img,
  .he-cta-article__btn, .he-card-connexe,
  .he-card-article__lien svg, .he-featured__lien svg { transition: none; }
  /* Listing modernisé : pas d'apparition différée des cartes ni de zoom image. */
  html[data-he-init] .he-card-article { animation: none; }
  img.he-card-article__img, img.he-featured__img { transition: none; }
  .he-card-article:hover img.he-card-article__img,
  .he-featured:hover img.he-featured__img { transform: none; }
  .he-charger-plus__btn { transition: none; }
  /* Widgets : pas d'apparition différée ni de transitions animées. */
  .he-w-parcours--anime .he-w-parcours__item { opacity: 1; transform: none; transition: none; }
  .he-w-sim__btn, .he-w-sim__progress-bar, .he-w-checklist__jauge,
  .he-w-checklist__case, .he-w-checklist__case::after,
  .he-w-sondage__btn--resultat::before { transition: none; }
}