/*
 * Styles propres à la page "Liste d'articles" (home.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.
 */

/* ───── En-tête + recherche ───── */
.oif-list .head{padding:56px 48px 8px;text-align:center}
.oif-list .head .k{
  font-family:'Caveat',cursive;font-size:22px;color:var(--terracotta);
  transform:rotate(-2deg);display:inline-block;margin-bottom:6px;
}
.oif-list .head h1{font-family:'Fraunces',serif;font-weight:500;font-size:48px;letter-spacing:-.02em;margin:0 0 18px;color:var(--ink)}
.oif-list .search-form{
  max-width:440px;margin:0 auto;display:flex;
  border:1.5px solid var(--ink);border-radius:999px;padding:6px;background:var(--bg);
}
.oif-list .search-form input{flex:1;border:0;outline:0;background:transparent;padding:12px 16px;font:inherit;font-size:15px;color:var(--ink)}
.oif-list .search-form button{
  border:0;background:var(--ink);color:var(--bg);border-radius:999px;
  padding:0 20px;font-family:Inter,sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:.2s;
}
.oif-list .search-form button:hover{background:var(--terracotta)}

/* ───── Filtres catégorie ───── */
.oif-list .filters{display:flex;gap:10px;justify-content:center;padding:28px 48px;flex-wrap:wrap}
.oif-list .filters span,.oif-list .filters a{
  font-family:Inter,sans-serif;font-size:13px;font-weight:500;padding:8px 16px;
  border-radius:999px;border:1px solid var(--ink);color:var(--ink);
  text-decoration:none;cursor:pointer;transition:.2s;
}
.oif-list .filters a:hover{background:var(--paper)}
.oif-list .filters span.active{background:var(--ink);color:var(--bg)}

/* ───── Grille d'articles (".lcard") ───── */
.oif-list .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:0 48px}
.oif-list .lcard{position:relative}
.oif-list .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-list .lcard .img img{width:100%;height:100%;object-fit:contain;display:block}
.oif-list .lcard:hover .img{transform:translateY(-3px);box-shadow:3px 5px 0 var(--ink)}
.oif-list .lcard.sage .img{background:repeating-linear-gradient(135deg,#cfdccb 0 10px,#bccfb6 10px 20px)}
.oif-list .lcard.terracotta .img{background:repeating-linear-gradient(135deg,#e6c9b6 0 10px,#d6b59b 10px 20px)}
.oif-list .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-list .lcard.terracotta .tag{color:var(--terracotta-d)}
.oif-list .lcard.sage .tag{color:var(--sage-d)}
.oif-list .lcard.brown .tag{color:#8B5A38}
.oif-list .lcard h4{font-family:'Fraunces',serif;font-weight:500;font-size:22px;line-height:1.2;letter-spacing:-.01em;margin:0 0 8px}
.oif-list .lcard h4 a{color:var(--ink);text-decoration:none}
.oif-list .lcard p{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0 0 12px}
.oif-list .lcard .by{font-family:Inter,sans-serif;font-size:12px;color:var(--ink-2);display:flex;justify-content:space-between}

.oif-list .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:0 48px;
}

/* ───── Pagination (rendu WordPress `paginate_links()`) ───── */
.oif-list .pagi{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:48px}
.oif-list .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-list .pagi a.page-numbers:hover{background:var(--paper)}
.oif-list .pagi .page-numbers.current{background:var(--ink);color:var(--bg)}
.oif-list .pagi .page-numbers.dots{border-color:transparent;background:transparent}

/* ───── Responsive ───── */
@media (max-width:1000px){
  .oif-list .head{padding:40px 24px 8px}
  .oif-list .filters{padding:24px 24px}
  .oif-list .grid{grid-template-columns:1fr 1fr;padding:0 24px;gap:20px}
  .oif-list .empty{margin:0 24px}
}
@media (max-width:640px){
  .oif-list .head h1{font-size:36px}
  .oif-list .grid{grid-template-columns:1fr}
}