/*
 * Styles propres à la page d'accueil 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.
 */

/* La homepage a un h1 plus grand que le défaut du design system (64px). */
.oif-home .hero h1{font-size:80px}

.oif-home .proof{grid-template-columns:1.1fr 1fr 1fr}

/* ───── Piliers ───── */
.oif-home .pillars-sec{padding:32px 48px 56px;position:relative}
.oif-home .pillars-head{
  display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:12px;
  border-bottom:1.5px dashed var(--ink-2);padding-bottom:18px;margin-bottom:32px;
}
.oif-home .pillars-head h2{
  font-family:'Fraunces',serif;font-weight:500;font-size:42px;
  letter-spacing:-.02em;margin:0;color:var(--ink);
}
.oif-home .pillars-head h2 em{font-family:'Caveat',cursive;font-style:normal;color:var(--terracotta);font-weight:700;font-size:48px;margin-left:8px}
.oif-home .pillars-head .h-note{
  font-family:'Caveat',cursive;font-size:18px;color:var(--ink-2);transform:rotate(-2deg);
}
.oif-home .pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.oif-home .pcard .cat{
  font-family:'Caveat',cursive;font-size:18px;color:var(--terracotta-d);
  display:inline-block;margin-bottom:10px;
}
.oif-home .pcard:nth-child(2) .cat{color:var(--sage-d)}
.oif-home .pcard:nth-child(4) .cat{color:#8B5A38}
.oif-home .pcard .read{
  font-family:Inter,sans-serif;font-size:13px;font-weight:600;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;
}

/* ───── Derniers articles ───── */
.oif-home .latest{padding:64px 48px 48px}
.oif-home .latest-head{
  display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin-bottom:32px;border-bottom:1.5px dashed var(--ink-2);padding-bottom:18px;
}
.oif-home .latest-head h2{font-family:'Fraunces',serif;font-weight:500;font-size:42px;letter-spacing:-.02em;margin:0;color:var(--ink)}
.oif-home .latest-head h2 em{font-family:'Caveat',cursive;font-style:normal;color:var(--sage-d);font-weight:700;font-size:48px}
.oif-home .latest-head a{font-family:Inter,sans-serif;font-size:13px;color:var(--ink-2);text-decoration:none}
.oif-home .latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.oif-home .latest-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;
}
.oif-home .lcard{position:relative}
.oif-home .lcard .img{
  aspect-ratio:16/9;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-home .lcard .img img{width:100%;height:100%;object-fit:cover;display:block}
.oif-home .lcard:hover .img{transform:translateY(-3px);box-shadow:3px 5px 0 var(--ink)}
.oif-home .lcard.etf .img{background:repeating-linear-gradient(135deg,#cfdccb 0 10px,#bccfb6 10px 20px)}
.oif-home .lcard.crypto .img{background:repeating-linear-gradient(135deg,#e6c9b6 0 10px,#d6b59b 10px 20px)}
.oif-home .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-home .lcard.fire .tag{color:var(--terracotta-d)}
.oif-home .lcard.etf .tag{color:var(--sage-d)}
.oif-home .lcard.crypto .tag{color:#8B5A38}
.oif-home .lcard h4{font-family:'Fraunces',serif;font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.01em;margin:0 0 8px}
.oif-home .lcard h4 a{color:var(--ink);text-decoration:none}
.oif-home .lcard p{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0 0 12px}
.oif-home .lcard .by{font-family:Inter,sans-serif;font-size:12px;color:var(--ink-2);display:flex;justify-content:space-between}

/* ───── Responsive ───── */
@media (max-width:1000px){
  .oif-home .hero h1{font-size:52px}
  .oif-home .proof{grid-template-columns:1fr}

  .oif-home .pillars-sec{padding:32px 24px 48px}
  .oif-home .pillars-grid{grid-template-columns:repeat(2,1fr)}

  .oif-home .latest{padding:48px 24px}
  .oif-home .latest-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .oif-home .hero h1{font-size:38px}
  .oif-home .pillars-grid{grid-template-columns:1fr}
  .oif-home .latest-grid{grid-template-columns:1fr}
}