/*
 * Styles propres à la page "à propos" uniquement. Le socle commun (nav, hero,
 * cartes ".pcard", proof, newsletter, footer) vit dans assets/css/base.css,
 * chargé avant celui-ci.
 */

.oif-about .proof{grid-template-columns:repeat(3,1fr)}

/* ───── Mon parcours, en 4 étapes ───── */
.oif-about .steps{padding:8px 48px 8px}
.oif-about .steps h2{font-family:'Fraunces',serif;font-weight:500;font-size:36px;letter-spacing:-.02em;margin:0 0 24px;color:var(--ink)}
.oif-about .steps h2 em{font-family:'Caveat',cursive;font-style:normal;color:var(--sage-d);font-weight:700;font-size:42px}
.oif-about .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.oif-about .pcard .yr{font-family:'Caveat',cursive;font-size:24px;color:var(--terracotta-d);font-weight:700;display:block;margin-bottom:6px}

/* ───── Mes outils & ressources ───── */
.oif-about .tools{padding:48px 48px 8px}
.oif-about .tools h2{font-family:'Fraunces',serif;font-weight:500;font-size:36px;letter-spacing:-.02em;margin:0 0 24px;color:var(--ink)}
.oif-about .tools h2 em{font-family:'Caveat',cursive;font-style:normal;color:var(--terracotta);font-weight:700;font-size:42px}
.oif-about .tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.oif-about .tcard{background:var(--bg);border:1px solid var(--ink);border-radius:14px;padding:22px;text-align:center;box-shadow:3px 3px 0 var(--ink);transition:.2s}
.oif-about .tcard:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.oif-about .tcard .ico{width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--ink);display:grid;place-items:center;margin:0 auto 12px;font-family:'Fraunces',serif}
.oif-about .tcard b{font-family:Inter,sans-serif;font-size:14px;display:block;margin-bottom:4px}
.oif-about .tcard span{font-size:12px;color:var(--ink-2)}

/* ───── Responsive ───── */
@media (max-width:1000px){
  .oif-about .proof{grid-template-columns:1fr}
  .oif-about .steps{padding:8px 24px}
  .oif-about .steps-grid{grid-template-columns:repeat(2,1fr)}
  .oif-about .tools{padding:32px 24px 8px}
  .oif-about .tools-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .oif-about .steps-grid{grid-template-columns:1fr}
  .oif-about .tools-grid{grid-template-columns:1fr}
}