/* ============================================================
   HOOP N'FIT — BLOG CSS
   Styles de la liste du blog (page-blog.php, archive.php) et de la page
   article (single.php), chargés avec home.css sur ces pages seulement.
   home.css fournit la base (.hnf-home, titres, boutons, appel final) ;
   ici : .bl- pour la liste et les cartes, .ar- pour l'article.
   ============================================================ */

/* --- liste : en-tête, catégories et recherche (même boîte large que le header) --- */
.hnf-home .bl-top { padding: 160px var(--hnf-edge) 0; background: var(--hnf-black); }
.bl-top__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: end; }
.bl-top__head > p { color: var(--hnf-muted); font-size: 20px; max-width: 26em; }
.bl-tools { display: flex; justify-content: space-between; align-items: center; gap: 18px 24px; flex-wrap: wrap; margin-top: 44px; padding-block: 20px; border-top: 1px solid var(--hnf-line); border-bottom: 1px solid var(--hnf-line); }
.bl-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.hnf-home .bl-cats a { font-family: var(--font); text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; font-weight: 700; line-height: 1; color: var(--hnf-muted); padding: 10px 16px; border: 1px solid var(--hnf-line); border-radius: 999px; }
.hnf-home .bl-cats a:hover { color: var(--hnf-white); }
.hnf-home .bl-cats a.active { color: var(--hnf-white); border-color: var(--orange); }
.bl-search { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(244, 246, 248, 0.35); padding: 6px 2px; flex: 0 1 320px; }
.bl-search:focus-within { border-color: var(--orange); }
.bl-search input[type="search"] { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--hnf-white); font-family: var(--hnf-fb); font-size: 17px; outline: none; appearance: none; }
.bl-search input::placeholder { color: var(--hnf-muted); }
.bl-search button { flex: none; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.bl-search button::before { content: ""; position: absolute; left: 6px; top: 6px; width: 13px; height: 13px; border: 2px solid var(--hnf-muted); border-radius: 50%; }
.bl-search button::after { content: ""; position: absolute; left: 20px; top: 21px; width: 8px; height: 2px; background: var(--hnf-muted); transform: rotate(45deg); }
.bl-search button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* --- ligne d'infos d'un article : catégorie, date, auteur, temps de lecture --- */
.bl-meta { font-family: var(--font); text-transform: uppercase; letter-spacing: 0.12em; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--hnf-muted); }
.bl-meta b { color: var(--orange); font-weight: 700; }
.bl-meta i { font-style: normal; margin-inline: 8px; opacity: 0.6; }
.hnf-home .bl-link { display: inline-block; margin-top: 18px; font-family: var(--font); text-transform: uppercase; letter-spacing: 0.1em; font-size: 15px; font-weight: 700; color: var(--orange); border-bottom: 1px solid currentColor; }
.bl-ex { color: var(--hnf-muted); margin-top: 14px; max-width: 36em; }

/* --- la liste : le dernier article en grand, puis la grille --- */
.hnf-home .bl-list { padding: 44px var(--hnf-edge) 96px; background: var(--hnf-black); }
.bl-state { color: var(--hnf-muted); margin-bottom: 28px; }
.hnf-home .bl-state a, .hnf-home .bl-empty a { color: var(--orange); border-bottom: 1px solid currentColor; }
.bl-empty { color: var(--hnf-muted); font-size: 20px; padding-block: 40px; }
.bl-feat { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 48px; align-items: center; margin-bottom: 64px; }
.bl-feat figure, .bl-card figure { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--hnf-black2); }
.bl-feat figure img, .bl-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.bl-feat:hover figure img, .bl-card:hover figure img { transform: scale(1.03); }
.hnf-home .bl-feat h2 { font-size: clamp(30px, 3.5vw, 46px); margin-top: 14px; }
.bl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 44px; }
.bl-card { display: block; }
.bl-card .bl-meta { margin-top: 18px; }
.hnf-home .bl-card h3 { font-size: 28px; line-height: 1; margin-top: 10px; }
.bl-card .bl-ex { font-size: 17px; margin-top: 10px; }
.hnf-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 64px; font-family: var(--font); font-weight: 700; font-size: 17px; }
.hnf-home .hnf-pagination .page-numbers { min-width: 42px; padding: 9px 12px; text-align: center; line-height: 1; border: 1px solid var(--hnf-line); color: var(--hnf-muted); }
.hnf-home .hnf-pagination .page-numbers.current, .hnf-home .hnf-pagination a.page-numbers:hover { color: var(--hnf-white); border-color: var(--orange); }

/* --- article : le titre sur le noir, la lecture sur le clair --- */
.hnf-home .ar-top { padding: 160px 0 180px; background: var(--hnf-black); }
.ar-wrap { max-width: 900px; margin: 0 auto; padding-inline: 40px; position: relative; }
.hnf-home .ar-back { display: inline-block; font-family: var(--font); text-transform: uppercase; letter-spacing: 0.12em; font-size: 14px; font-weight: 700; color: var(--hnf-muted); margin-bottom: 26px; }
.ar-back::before { content: ""; display: inline-block; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: 10px; vertical-align: 1px; }
.hnf-home .ar-back:hover { color: var(--hnf-white); }
.hnf-home .ar-top h1 { font-size: clamp(36px, 4.8vw, 62px); line-height: 0.98; margin-top: 14px; }
.ar-top h1 + .bl-meta { margin-top: 22px; }
.hnf-home .ar-body { background: #F4F6F8; color: #2B3A4D; padding-bottom: 72px; }
/* un article sans image : le texte démarre sous le noir, sans chevauchement */
.ar-body--plain .ar-content { margin-top: 0; padding-top: 56px; }
.ar-cover { max-width: 1040px; margin: 0 auto -8px; padding-inline: 40px; transform: translateY(-130px); }
.ar-cover img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; box-shadow: 0 30px 60px rgba(11, 15, 20, 0.35); }
.ar-content { max-width: 720px; margin: -86px auto 0; padding-inline: 20px; font-size: 19px; line-height: 1.7; }
.ar-content::after { content: ""; display: block; clear: both; }
.hnf-home .ar-content h2 { font-family: var(--font); font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: 0; text-transform: uppercase; color: #142434; margin: 48px 0 16px; }
.hnf-home .ar-content h3, .hnf-home .ar-content h4 { font-family: var(--font); font-size: 25px; font-weight: 700; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; color: #142434; margin: 36px 0 12px; }
.ar-content h2 strong, .ar-content h3 strong, .ar-content h4 strong { font-weight: inherit; color: inherit; }
.ar-content p { margin: 0 0 20px; }
.ar-content strong { color: #142434; font-weight: 600; }
.ar-content ul, .ar-content ol { margin: 0 0 22px; padding: 0 0 0 22px; }
.ar-content ul { list-style: disc; }
.ar-content ol { list-style: decimal; }
.ar-content li { margin-bottom: 6px; padding-left: 4px; }
.ar-content li::marker { color: #8A96A5; }
.hnf-home .ar-content a, .hnf-home .ar-author a { color: #C92D0E; text-decoration: underline; text-underline-offset: 3px; }
.ar-content figure { margin: 30px 0; }
/* WordPress écrit une largeur en dur sur les images redimensionnées : on la remet à la colonne.
   Ne pas toucher à aspect-ratio : il vient des attributs width/height et tient la hauteur avant le chargement.
   Les émojis, que WordPress remplace par de petites images, gardent leur taille de caractère. */
.ar-content img:not(.emoji) { width: 100% !important; height: auto !important; }
.ar-content figcaption { font-size: 15px; color: #55637A; margin-top: 8px; }
.hnf-home .ar-content .alignright { float: right; width: 42%; margin: 6px 0 18px 30px; }
.hnf-home .ar-content .alignleft { float: left; width: 42%; margin: 6px 30px 18px 0; }
.ar-content .wp-block-group { border-left: 3px solid var(--orange); padding: 2px 0 2px 18px; margin: 0 0 22px; }
.ar-content .wp-block-group p { margin: 0; font-size: 21px; }
.ar-content blockquote { border-left: 3px solid var(--orange); margin: 0 0 22px; padding: 2px 0 2px 18px; font-size: 21px; }
.ar-author { max-width: 720px; margin: 44px auto 0; padding-inline: 20px; }
.ar-author__in { border-top: 1px solid #D6DCE4; padding-top: 26px; display: grid; grid-template-columns: 76px 1fr; gap: 20px; align-items: center; }
.ar-author img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.ar-author small { display: block; font-family: var(--font); text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; font-weight: 700; color: #55637A; }
.ar-author b { display: block; font-family: var(--font); text-transform: uppercase; font-size: 24px; font-weight: 700; line-height: 1.1; color: #142434; margin-top: 2px; }
.ar-author span { display: block; color: #55637A; font-size: 16px; line-height: 1.45; margin-top: 4px; }

/* --- à lire aussi --- */
.hnf-home .ar-more { padding-block: 80px; background: var(--hnf-black2); }
.ar-more__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.ar-more .bl-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hnf-home .ar-more .bl-card h3 { font-size: 23px; }

/* --- étroit --- */
@media (max-width: 900px) {
  .hnf-home .bl-top { padding: 124px 20px 0; }
  .bl-top__head { grid-template-columns: 1fr; gap: 14px; }
  .bl-top__head > p { font-size: 18px; }
  .bl-tools { margin-top: 26px; padding-block: 16px; }
  .bl-search { flex: 1 1 100%; }
  .hnf-home .bl-list { padding: 28px 20px 56px; }
  .bl-feat { grid-template-columns: 1fr; gap: 18px; margin-bottom: 40px; }
  .bl-grid { grid-template-columns: 1fr; gap: 40px; }
  .hnf-home .bl-card h3 { font-size: 25px; }
  .hnf-pagination { margin-top: 44px; }
  .hnf-home .ar-top { padding: 124px 0 96px; }
  .ar-wrap { padding-inline: 20px; }
  .ar-cover { padding-inline: 20px; transform: translateY(-70px); }
  .ar-cover img { aspect-ratio: 3 / 2; }
  .ar-content { margin-top: -44px; font-size: 18px; }
  .ar-body--plain .ar-content { padding-top: 36px; }
  .hnf-home .ar-content h2 { font-size: 28px; margin-top: 38px; }
  .hnf-home .ar-content h3, .hnf-home .ar-content h4 { font-size: 22px; }
  .hnf-home .ar-content .alignright, .hnf-home .ar-content .alignleft { float: none; width: 100%; margin: 24px 0; }
  .hnf-home .ar-body { padding-bottom: 48px; }
  .hnf-home .ar-more { padding-block: 48px; }
  .ar-more .bl-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-feat figure img, .bl-card figure img { transition: none; }
}