/* ============================================================
   LAOU — Page CATÉGORIE (liste d'articles d'une catégorie)
   Réutilise blog/page.css (.subnav, .nav-link, .btn, .grain,
   .article-grid/.article-card, .chip, .newsletter…) + tokens.
   N'ajoute QUE le spécifique catégorie.
   Teinte de la catégorie pilotée par --cat / --cat-deep / --cat-soft
   (posés sur .category-root). Ici : « Comment s'installer » = coral.
   ============================================================ */

.category-root { --cat: var(--coral); --cat-deep: var(--coral-deep); --cat-soft: var(--coral-soft); }

/* wrappers */
.cat-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ---- fil d'ariane ---- */
.cat-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: var(--text-body-sm); color: var(--gray-500); padding: 18px 0 10px; }
.cat-crumb a:hover { color: var(--cat-deep); text-decoration: underline; text-underline-offset: 3px; }
.cat-crumb .sep { color: var(--gray-300); }
.cat-crumb .current { color: var(--ink); }

/* ============================================================
   3 · MASTHEAD CATÉGORIE (aplat teinté + grain)
   ============================================================ */
.cat-masthead { position: relative; overflow: hidden; background: var(--cat); color: #fff; }
.cat-masthead .inner { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); padding: clamp(40px, 5vw, 64px) 0; }
.cat-masthead .picto { flex: none; width: clamp(76px, 9vw, 104px); height: clamp(76px, 9vw, 104px); }
.cat-masthead .picto img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.cat-masthead .kicker { font: var(--text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.92); margin: 0 0 12px; }
.cat-masthead h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; line-height: 1.04; font-size: clamp(2.1rem, 3.6vw, 2.7rem); color: #fff; margin: 0; text-wrap: balance; }
.cat-masthead .desc { font: var(--text-body-lg); color: rgba(255,255,255,.92); line-height: 1.5; margin: 16px 0 0; max-width: 52ch; }
.cat-count { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; background: #fff; color: var(--cat-deep); font-family: var(--font-display); font-weight: 500; font-size: 1rem; padding: 9px 16px; }
.cat-count .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat-deep); }

/* ============================================================
   4 · BANDE PARCOURS (stepper 3 étapes)
   ============================================================ */
.journey { background: #fff; border-bottom: 1px solid var(--gray-200); }
.journey .inner { padding: 48px 0 52px; }
.journey-head { margin-bottom: 28px; }
.journey-head .eyebrow { font: var(--text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--cat-deep); margin: 0 0 8px; }
.journey-head h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; line-height: 1.12; font-size: 1.5rem; color: var(--ink); margin: 0; }
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { position: relative; background: var(--gray-50, #f7f4ef); padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.step .step-top { display: flex; align-items: center; gap: 13px; }
.step .pastille { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--gray-300); color: var(--gray-500); font-family: var(--font-display); font-weight: 500; font-size: 1rem; }
.step .step-num { font: var(--text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-400); }
.step h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; line-height: 1.18; font-size: 1.22rem; color: var(--ink); margin: 0; }
.step p { font: var(--text-body-sm); color: var(--gray-600); line-height: 1.5; margin: 0; }
/* étape active */
.step.is-active { background: var(--cat-soft); }
.step.is-active .pastille { background: var(--cat-deep); border-color: var(--cat-deep); color: #fff; }
.step.is-active h3 { color: var(--cat-deep); }
.step .here { display: none; align-self: flex-start; margin-top: 2px; background: var(--cat-deep); color: #fff; font: var(--text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 5px 10px; }
.step.is-active .here { display: inline-block; }

/* ============================================================
   5 · BARRE D'OUTILS (chips sous-thèmes + tri)
   ============================================================ */
.catbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 40px 0 0; }
.subthemes { display: flex; flex-wrap: wrap; gap: 10px; }
.subthemes .chip { background: #fff; border: 1.5px solid var(--gray-300); color: var(--gray-700); }
.subthemes .chip:hover { border-color: var(--gray-500); transform: none; }
.subthemes .chip.is-active { background: var(--cat-deep); border-color: var(--cat-deep); color: #fff; }

/* tri dropdown */
.sort { position: relative; flex: none; }
.sort-btn { display: inline-flex; align-items: center; gap: 9px; font: var(--text-body-sm); font-weight: 700; color: var(--ink); background: #fff; border: 1.5px solid var(--gray-300); padding: 10px 16px; min-height: 44px; border-radius: 0; cursor: pointer; transition: border-color var(--dur) var(--ease-out); }
.sort-btn:hover { border-color: var(--gray-500); }
.sort-btn svg { width: 17px; height: 17px; stroke-width: 2; transition: transform var(--dur) var(--ease-out); }
.sort.is-open .sort-btn svg { transform: rotate(180deg); }
.sort-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: #fff; border: 1px solid var(--gray-200); box-shadow: var(--shadow-md); z-index: 20; display: none; }
.sort.is-open .sort-menu { display: block; }
.sort-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; font: var(--text-body-sm); color: var(--ink); padding: 12px 16px; cursor: pointer; transition: background var(--dur) var(--ease-out); }
.sort-menu button:hover { background: var(--cat-soft); }
.sort-menu button.is-active { font-weight: 700; color: var(--cat-deep); }

/* ============================================================
   6 · GRILLE (réutilise .article-grid/.article-card de page.css)
   ============================================================ */
.cat-list { padding: 28px 0 8px; }
/* l'eyebrow catégorie des cartes prend la teinte de la catégorie */
.cat-list .article-cat { color: var(--cat-deep); }
.cat-list .article-card:hover h3 { color: var(--cat-deep); }
.article-card.is-filtered { display: none; }

/* ============================================================
   7 · PAGINATION
   ============================================================ */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 40px 0 8px; }
.pager a, .pager span { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--ink); background: #fff; border: 1.5px solid var(--gray-300); border-radius: 0; cursor: pointer; transition: all var(--dur) var(--ease-out); }
.pager a:hover { border-color: var(--cat-deep); color: var(--cat-deep); }
.pager .is-active { background: var(--cat-deep); border-color: var(--cat-deep); color: #fff; cursor: default; }
.pager .gap { border: 0; background: none; cursor: default; min-width: 24px; color: var(--gray-400); }
.pager .next { gap: 8px; font-weight: 700; }
.pager .next svg { width: 17px; height: 17px; stroke-width: 2; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .cat-list .article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .cat-wrap { padding: 0 20px; }
  .cat-masthead .inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .stepper { grid-template-columns: 1fr; }
  .catbar { flex-direction: column; align-items: stretch; gap: 16px; }
  .subthemes { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .subthemes .chip { white-space: nowrap; }
  .sort { align-self: flex-end; }
  .cat-list .article-grid { grid-template-columns: 1fr; }
  .pager { flex-wrap: wrap; }
}