/* ============================================================
   category-archive.css — Archives de catégories / sous-catégories
   + index du blog, Signal Alpha.
   Basé sur le CSS de production du handoff, avec :
   - neutralisation du conteneur Astra (display:flex ≥922px)
   - jetons texte assombris pour WCAG AA (contrastes calculés)
   - focus-visible, line-clamp des extraits, fallback impression
   Déployé dans /wp-content/uploads/sa-category-archive/ et chargé
   UNIQUEMENT sur les catégories + blog par le mu-plugin.
   ============================================================ */

/* ---------- Neutralisation du conteneur Astra ----------
   !important requis : le CSS Customizer du site pose déjà
   `.ast-container { max-width: 1364px !important }` (shim homepage). */
body.category #content .ast-container,
body.blog #content .ast-container,
body.tag #content .ast-container {
  display: block !important;
  max-width: none !important;
  padding: 0 !important;
}
body.category .sar-main,
body.blog .sar-main,
body.tag .sar-main { width: 100%; }

/* ---------- Scope général ---------- */
.sar-main { font-family: 'DM Sans', sans-serif; color: #42413E; font-size: 17px; line-height: 1.6; background: #fff; }
.sar-main a { text-decoration: none; }
.cat-section { padding: 52px 0 56px; }
.cat-h2 { font-size: 26px; margin: 0; }
.cat-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.cat-sec-count { font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #80694B; white-space: nowrap; }

/* Focus clavier (WCAG 2.4.7) */
.sar-main a:focus-visible,
.sar-main .cat-chip:focus-visible,
.sar-main .page-numbers:focus-visible {
  outline: 2px solid #A64E2D;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Hero (fond beige #FCF9F2) ---------- */
.cat-hero { background: #FCF9F2; padding-top: 34px; }
/* padding-left 3px : alignement optique du fil d'Ariane sur l'encre du H1
   (les grandes lettres portent plus de blanc dans leur glyphe) — Henri 2026-07-03. */
.cat-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-left: 3px; }
/* 700 : seules les graisses Poppins 500/700 sont chargées ; 600 rend la
   graisse 500 ici, plus fine que le fil d'Ariane des pages annexes. */
.cat-crumb a, .cat-crumb [aria-current] { font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #3A798F; transition: color .15s; }
.cat-crumb a:hover { color: #A64E2D; }
.cat-crumb .cat-crumb-sep { color: #3A798F; font-weight: 700; }
/* padding-top 24px : même distance fil d'Ariane → H1 que sur les
   sous-catégories (retour Henri 2026-07-04). */
.cat-hero-main { display: flex; align-items: center; gap: 48px; padding: 24px 0 26px; }
.cat-hero-text { flex: 1; }
/* padding-bottom .08em : sans lui, background-clip:text coupe les
   descendantes (le « g » de « Livrets d'épargne ») — même garde que
   .axp-title sur les pages annexes. */
.cat-title { font-size: 48px; font-weight: 700; line-height: 1.15; margin: 0 0 14px; padding-bottom: .08em; background-image: linear-gradient(90deg, rgb(211, 109, 76) 0%, rgb(58, 121, 143) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; }
.cat-lead { font-size: 18.5px; color: #6E665B; line-height: 1.6; max-width: 660px; margin: 0; text-wrap: pretty; }
.cat-stats { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #A05E12; }
.cat-stats .cat-dot { color: #E0C9A0; }
.cat-hero-icon { width: 150px; height: 150px; flex-shrink: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .6); border: 1px solid rgba(184, 88, 50, .1); border-radius: 50%; box-shadow: 0 10px 30px rgba(178, 88, 18, .1); }
.cat-hero-icon img { width: 98px; height: 98px; }

/* Pilules de sous-catégories */
.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 0 32px; margin: 0; }
.cat-chip { display: inline-flex; align-items: baseline; gap: 8px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: #42413E; background: #fff; border: none; border-radius: 999px; padding: 10px 18px; box-shadow: 0 2px 10px rgba(178, 88, 18, .06); transition: color .15s, box-shadow .2s, transform .2s; }
.cat-chip:hover { color: #A64E2D; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(178, 88, 18, .12); }
.cat-chip-n { font-size: 12.5px; font-weight: 600; color: #80694B; }
.cat-chip.is-active { background: transparent; border: 2px solid #A64E2D; color: #A64E2D; padding: 8px 16px; box-shadow: none; }
.cat-chip.is-active .cat-chip-n { color: #A64E2D; }
.cat-chip-back { background: transparent; border: 1px dashed rgba(184, 88, 50, .45); box-shadow: none; color: #6E665B; }

/* Deux rangées de pilules sur le blog : types de contenu puis catégories */
.cat-chips--types { padding-bottom: 4px; }

/* Mobile : bande à glisser sur UNE ligne (variante B choisie par Henri
   2026-07-04) — la section Comparatifs & avis reste haute sur téléphone.
   La bande fuit vers le bord droit de l'écran (annule le padding du wrap). */
@media (max-width: 760px) {
  .cat-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 22px; margin-right: -32px; padding-right: 32px; }
  .cat-chips::-webkit-scrollbar { display: none; }
  .cat-chips .cat-chip { white-space: nowrap; flex-shrink: 0; }
  .cat-chips--types { padding-bottom: 8px; }
}

/* Hero compact des sous-catégories */
.cat-hero-sub .cat-title { font-size: 40px; }
.cat-hero-sub .cat-lead { font-size: 17.5px; }
.cat-hero-sub .cat-hero-main { padding: 24px 0 22px; gap: 40px; } /* top aligné avec le hub */
.cat-hero-sub .cat-hero-icon { width: 124px; height: 124px; }
.cat-hero-sub .cat-hero-icon img { width: 80px; height: 80px; }

/* ---------- Comparatifs & avis (fond rosé #FAF2EE) ---------- */
.cat-compare { background: #FAF2EE; }
.cat-compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 26px; }
.cat-avis-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.cat-avis-label { font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #7C6749; margin-right: 4px; }
/* Poppins 500 : seule vraie graisse « medium » chargée (DM Sans n'existe
   qu'en 400) — rend les titres nettement plus épais, comme demandé. */
.cat-avis-chip { display: inline-flex; align-items: center; gap: 12px; font-family: 'Poppins', sans-serif; font-size: 14.5px; font-weight: 500; color: #42413E; background: #FFFEFB; border-radius: 14px; padding: 14px 20px; box-shadow: 0 4px 18px rgba(178, 88, 18, .07); transition: transform .2s, box-shadow .2s; }
.cat-avis-chip span { color: #B85832; font-weight: 700; }
.cat-avis-chip:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(178, 88, 18, .12); }

/* ---------- Guides (fond beige #FCF9F2) ---------- */
.cat-guides { background: #FCF9F2; }
.cat-guides-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; }
.cat-guide { position: relative; display: flex; flex-direction: column; gap: 10px; background: #FFFEFB; border: none; border-radius: 16px; padding: 26px 28px 22px; box-shadow: 0 4px 18px rgba(178, 88, 18, .07); transition: transform .2s, box-shadow .2s; }
.cat-guide:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(178, 88, 18, .13); }
.cat-guide h3 { font-size: 17.5px; font-weight: 600; color: #42413E; line-height: 1.35; margin: 0; }
.cat-guide p { font-size: 14px; color: #6E665B; line-height: 1.5; margin: 0; }
.cat-guide-go { margin-top: auto; padding-top: 8px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: #B85832; }

/* Bannière « guide de référence » (sous-catégories) */
.cat-guide-banner { display: flex; align-items: center; gap: 24px; background: #FFFEFB; border: none; border-radius: 16px; padding: 26px 30px; box-shadow: 0 4px 18px rgba(178, 88, 18, .07); margin-top: 26px; }
.cat-guide-banner img { width: 68px; height: 68px; flex-shrink: 0; }
.cat-guide-banner-text { flex: 1; }
.cat-guide-banner-text h3 { font-size: 21px; font-weight: 600; color: #42413E; margin: 0 0 6px; }
.cat-guide-banner-text p { font-size: 15px; color: #6E665B; line-height: 1.55; margin: 0; }
.cat-guide-banner .sar-btn { white-space: nowrap; font-size: 15px; padding: 11px 22px; }

/* ---------- À la une (fond blanc) ---------- */
.cat-vedette-sec { padding-bottom: 64px; }
.cat-vedette { display: grid; grid-template-columns: 1.15fr 1fr; background: #FFFEFB; border: none; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 18px rgba(178, 88, 18, .07); margin-top: 22px; }
.cat-vedette-img { position: relative; display: block; min-height: 380px; }
.cat-vedette-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-vedette-img.cat-img-placeholder { display: grid; place-items: center; background: #FCF9F2; }
.cat-vedette-img.cat-img-placeholder img { position: static; width: 98px; height: 98px; object-fit: contain; }
.cat-vedette-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 15px; padding: 40px 42px; }
.cat-vedette-body h2 { font-size: 27px; font-weight: 700; line-height: 1.3; margin: 0; }
.cat-vedette-body h2 a { color: #42413E; transition: color .15s; }
.cat-vedette-body h2 a:hover { color: #A64E2D; }
.cat-vedette-body .cat-excerpt { font-size: 16px; }
.cat-vedette .cat-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cat-vedette-btn { margin-top: 8px; font-size: 15px; padding: 11px 22px; }

/* Étiquette sous-catégorie + méta */
.cat-tag { display: inline-flex; width: fit-content; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; color: #8F5417; background: rgba(209, 127, 38, .12); border-radius: 999px; padding: 4px 12px; }
a.cat-tag:hover { background: rgba(209, 127, 38, .2); }
.cat-meta { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #6E665B; }

/* ---------- Flux d'articles ----------
   Catégories : sable #FAF6EC (état approuvé).
   Blog + filtres : rosé #FAF2EE (2e bandeau — essai Henri 2026-07-04). */
.cat-feed { background: #FAF6EC; }
body.blog .cat-feed,
body.tag .cat-feed { background: #FAF2EE; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cat-card { position: relative; display: flex; flex-direction: column; background: #FFFEFB; border: none; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 18px rgba(178, 88, 18, .07); transition: transform .2s, box-shadow .2s; }
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(178, 88, 18, .14); }
.cat-card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.cat-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.cat-card:hover .cat-card-img img { transform: scale(1.04); }
.cat-card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; padding: 20px 22px 22px; }
.cat-card h3 { font-size: 18px; font-weight: 600; line-height: 1.38; margin: 0; }
.cat-card h3 a { color: #42413E; transition: color .15s; }
.cat-card h3 a::after { content: ""; position: absolute; inset: 0; }
.cat-card:hover h3 a { color: #A64E2D; }
.cat-card .cat-tag { position: relative; z-index: 1; }
.cat-excerpt { font-size: 14.5px; color: #6E665B; line-height: 1.55; margin: 0; }
.cat-card .cat-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-card .cat-meta { margin-top: auto; padding-top: 4px; }
.cat-empty { color: #6E665B; }

/* ---------- Pagination (style CTA « fantôme ») ----------
   Markup WordPress : nav.pagination.cat-pages > .nav-links > .page-numbers */
.cat-pages { margin-top: 46px; }
.cat-pages .nav-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
/* Scope .sar-main + !important : le CSS Customizer du site pose
   `.category .page-numbers.current { … !important }` (3 classes, imprimé
   après cette feuille) — il faut 4 classes ET !important pour gagner. */
.sar-main .cat-pages .page-numbers { min-width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 10px !important; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: #A64E2D !important; background: transparent !important; border: 2px solid #A64E2D; transition: background .15s, transform .15s; }
.sar-main .cat-pages a.page-numbers:hover { background: rgba(184, 88, 50, .07) !important; transform: translateY(-1px); }
.sar-main .cat-pages .page-numbers.current { background: #B85832 !important; border-color: #B85832; color: #fff !important; }
.sar-main .cat-pages .page-numbers.dots { background: transparent !important; border: none; color: #80694B !important; min-width: 24px; }
.cat-pages .page-numbers.prev, .cat-pages .page-numbers.next { width: auto; padding: 0 18px; }
.cat-pages .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Continuer d'explorer (fond sable #F8F2E6) ---------- */
.cat-explore { background: #F8F2E6; padding: 44px 0 52px; }
.cat-explore-row { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 22px 26px; margin-top: 26px; background: #FFFEFB; border-radius: 16px; box-shadow: 0 4px 18px rgba(178, 88, 18, .07); padding: 30px 26px; }
.cat-explore-chip { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: #42413E; line-height: 1.3; white-space: nowrap; transition: color .15s; }
.cat-explore-chip img { width: 46px; height: 46px; transition: transform .2s; }
.cat-explore-chip:hover { color: #A64E2D; }
.cat-explore-chip:hover img { transform: translateY(-4px); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-vedette { grid-template-columns: 1fr; }
  .cat-vedette-img { min-height: 0; aspect-ratio: 16 / 8; }
  .cat-hero-icon { width: 120px; height: 120px; }
  .cat-hero-icon img { width: 78px; height: 78px; }
}
@media (max-width: 760px) {
  .cat-title { font-size: 34px; }
  .cat-hero-main,
  .cat-hero-sub .cat-hero-main { padding: 22px 0 20px; gap: 0; }
  .cat-hero-icon { display: none; }
  .cat-guides-grid, .cat-grid, .cat-compare-grid { grid-template-columns: 1fr; }
  .cat-vedette-body { padding: 24px 22px; }
  .cat-guide-banner { flex-direction: column; align-items: flex-start; }
  .cat-guide-banner .sar-btn { white-space: normal; }
  .cat-sec-head { flex-direction: column; gap: 6px; }
  .cat-stats { flex-wrap: wrap; row-gap: 6px; }
  .cat-explore-chip { white-space: normal; }
}

/* ---------- Impression : les titres en dégradé redeviennent lisibles ---------- */
@media print {
  .cat-title, .sar-h2 {
    background: none;
    -webkit-text-fill-color: initial;
    color: #42413E;
  }
}

/* ============================================================
   Rappels — règles déjà déployées par le CSS de la homepage.
   SCOPÉES sous .sar-main : le CSS Customizer (wp-custom-css) est
   imprimé APRÈS cette feuille, donc ses règles `.sar-*` nues
   gagneraient toute égalité de spécificité. Le scope garantit que
   les variantes de ce template (ghost, overline AA) s'appliquent.
   ============================================================ */
.sar-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.sar-main .sar-overline { display: block; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #A05E12; margin-bottom: 10px; }
.sar-main .sar-h2 { font-size: 32px; font-weight: 700; line-height: 1.25; margin: 0 0 14px; padding-bottom: .08em; background-image: linear-gradient(90deg, rgb(211, 109, 76) 0%, rgb(58, 121, 143) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; }
.sar-main .sar-btn { display: inline-flex; align-items: center; gap: 10px; background: #B85832; color: #fff !important; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; padding: 14px 26px; border-radius: 10px; transition: background .2s, transform .2s; }
.sar-main .sar-btn:hover { background: #A64E2D; transform: translateY(-1px); }
/* !important : wp-custom-css pose `.sar-btn { background: var(--sar-terra); color:#fff !important }` */
.sar-main .sar-btn-ghost { background: transparent !important; color: #A64E2D !important; border: 2px solid #A64E2D; }
.sar-main .sar-btn-ghost:hover { background: rgba(184, 88, 50, .07) !important; }
.sar-main .sar-compare-card { display: flex; align-items: center; gap: 16px; background: #FFFEFB; border-radius: 14px; padding: 18px 20px; border: none; box-shadow: 0 4px 18px rgba(178, 88, 18, .07); transition: transform .2s, box-shadow .2s; }
.sar-main .sar-compare-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(178, 88, 18, .12); }
.sar-main .sar-compare-card img { width: 44px; height: 44px; flex-shrink: 0; }
.sar-main .sar-compare-card span { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; color: #42413E; line-height: 1.35; }
.sar-main .sar-compare-card .sar-go { margin-left: auto; color: #B85832; font-weight: 700; }