/*
 * Styles propres à la page "Catégorie" (category.php) uniquement. Le socle
 * commun (nav, hero, cartes ".pcard", proof, newsletter, footer) vit dans
 * assets/css/base.css, chargé avant celui-ci sur toutes les pages.
 */

/* ───── Chips catégories ───── */
.oif-cat .chips{display:flex;gap:10px;padding:24px 48px;border-bottom:1.5px dashed var(--ink-2);flex-wrap:wrap}
.oif-cat .chips span,.oif-cat .chips a{
  font-family:Inter,sans-serif;font-size:13px;font-weight:500;padding:7px 15px;
  border-radius:999px;border:1px solid var(--ink);color:var(--ink);
  text-decoration:none;cursor:pointer;transition:.2s;
}
.oif-cat .chips a:hover{background:var(--paper)}
.oif-cat .chips span.active{background:var(--sage);color:#fff;border-color:var(--sage)}

/* ───── En-tête de catégorie ───── */
.oif-cat .catehead{display:flex;align-items:center;gap:22px;padding:40px 48px;background:var(--paper)}
.oif-cat .catehead .icon{
  width:64px;height:64px;border-radius:50%;background:var(--sage);color:#fff;
  display:grid;place-items:center;font-family:'Fraunces',serif;font-size:24px;
  flex:none;transform:rotate(-4deg);
}
.oif-cat .catehead h1{font-family:'Fraunces',serif;font-weight:500;font-size:38px;letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
.oif-cat .catehead p{font-size:15px;color:var(--ink-2);margin:0;max-width:520px;line-height:1.5}

/* ───── Toolbar (nombre d'articles + tri) ───── */
.oif-cat .toolbar{display:flex;justify-content:space-between;padding:24px 48px 4px;font-family:Inter,sans-serif;font-size:13px;color:var(--ink-2)}

/* ───── Grille d'articles (".lcard") ───── */
.oif-cat .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:20px 48px 8px}
.oif-cat .lcard{position:relative}
.oif-cat .lcard .img{
  aspect-ratio:4/3;border-radius:12px;border:1px solid var(--ink);
  background:repeating-linear-gradient(135deg,#dcd0bb 0 10px,#cfc1a8 10px 20px);
  margin-bottom:14px;position:relative;overflow:hidden;transition:.25s;display:block;
}
.oif-cat .lcard .img img{width:100%;height:100%;object-fit:contain;display:block}
.oif-cat .lcard:hover .img{transform:translateY(-3px);box-shadow:3px 5px 0 var(--ink)}
.oif-cat .lcard.sage .img{background:repeating-linear-gradient(135deg,#cfdccb 0 10px,#bccfb6 10px 20px)}
.oif-cat .lcard.terracotta .img{background:repeating-linear-gradient(135deg,#e6c9b6 0 10px,#d6b59b 10px 20px)}
.oif-cat .lcard .tag{
  position:absolute;top:12px;left:12px;
  font-family:'Caveat',cursive;font-size:18px;font-weight:700;
  background:var(--bg);padding:2px 12px;border-radius:999px;border:1px solid var(--ink);
  transform:rotate(-3deg);
}
.oif-cat .lcard.terracotta .tag{color:var(--terracotta-d)}
.oif-cat .lcard.sage .tag{color:var(--sage-d)}
.oif-cat .lcard.brown .tag{color:#8B5A38}
.oif-cat .lcard h4{font-family:'Fraunces',serif;font-weight:500;font-size:22px;line-height:1.2;letter-spacing:-.01em;margin:0 0 8px}
.oif-cat .lcard h4 a{color:var(--ink);text-decoration:none}
.oif-cat .lcard p{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0 0 12px}
.oif-cat .lcard .by{font-family:Inter,sans-serif;font-size:12px;color:var(--ink-2);display:flex;justify-content:space-between}

.oif-cat .empty{
  font-family:'Caveat',cursive;font-size:22px;color:var(--ink-2);
  background:var(--paper);border:1.5px dashed var(--ink);border-radius:16px;
  padding:32px;text-align:center;margin:20px 48px 0;
}

/* ───── Pagination (rendu WordPress `paginate_links()`) ───── */
.oif-cat .pagi{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:48px}
.oif-cat .pagi .page-numbers{
  min-width:36px;height:36px;padding:0 6px;border:1px solid var(--ink);border-radius:999px;
  display:grid;place-items:center;font-family:Inter,sans-serif;font-size:13px;
  color:var(--ink);background:var(--bg);text-decoration:none;transition:.2s;
}
.oif-cat .pagi a.page-numbers:hover{background:var(--paper)}
.oif-cat .pagi .page-numbers.current{background:var(--ink);color:var(--bg)}
.oif-cat .pagi .page-numbers.dots{border-color:transparent;background:transparent}

/* ───── Responsive ───── */
@media (max-width:1000px){
  .oif-cat .chips{padding:20px 24px}
  .oif-cat .catehead{padding:32px 24px;gap:16px}
  .oif-cat .catehead h1{font-size:30px}
  .oif-cat .toolbar{padding:20px 24px 4px;flex-wrap:wrap;gap:8px}
  .oif-cat .grid{grid-template-columns:1fr 1fr;padding:16px 24px 8px;gap:20px}
  .oif-cat .empty{margin:16px 24px 0}
}
@media (max-width:640px){
  .oif-cat .catehead{flex-direction:column;align-items:flex-start;text-align:left}
  .oif-cat .grid{grid-template-columns:1fr}
}