/* portfolio.css : le pied commun posé sous chaque template du portfolio (Ruben, 08/10/2026 10:50).
   Injecté par outils/construire-site.py, jamais écrit dans les reproduction.html.
   Chaque page donne ses couleurs : --pf-fond, --pf-texte, --pf-doux, --pf-accent, --pf-ligne. */
.pf{background:var(--pf-fond);color:var(--pf-texte);font-family:'Inter Tight',system-ui,sans-serif;padding:72px 0 40px;-webkit-font-smoothing:antialiased}
.pf *{box-sizing:border-box;margin:0;padding:0}
/* Les règles des templates (h2, p, a) visent l'élément : on redonne couleur et police à chaque élément du pied. */
.pf h2,.pf p,.pf a,.pf span,.pf strong{font-family:'Inter Tight',system-ui,sans-serif;color:inherit;text-transform:none}
.pf a{color:inherit;text-decoration:none}
.pf-wrap{width:min(1080px,100% - 40px);margin-inline:auto}
.pf .pf-sur{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--pf-doux)}
.pf-voir{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:48px;margin-top:22px;border:1px solid var(--pf-ligne);border-radius:14px;overflow:hidden;transition:border-color .3s}
.pf-voir:hover{border-color:var(--pf-accent)}
.pf-mini{height:320px;overflow:hidden;position:relative;background:#111}
.pf-mini img{width:100%;display:block;transition:transform 2.4s cubic-bezier(.16,1,.3,1)}
.pf-voir:hover .pf-mini img{transform:translateY(-18%)}
.pf-mini::after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,var(--pf-fond))}
.pf-texte{padding:32px 40px 32px 0}
.pf .pf-texte h2{color:var(--pf-texte);font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.03em}
.pf .pf-texte p{color:var(--pf-doux);font-size:15px;line-height:1.6;margin-top:14px;max-width:380px}
.pf .pf-btn{display:inline-flex;align-items:center;gap:12px;margin-top:26px;height:48px;padding:0 22px;border-radius:999px;background:var(--pf-accent);color:var(--pf-sur-accent,#fff);font-size:14px;font-weight:500}
.pf-btn i{font-style:normal;transition:transform .3s}
.pf-voir:hover .pf-btn i{transform:translate(3px,-3px)}
.pf-bas{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:56px;padding-top:28px;border-top:1px solid var(--pf-ligne)}
.pf-retour{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border:1px solid var(--pf-ligne);border-radius:999px;font-size:14px;transition:border-color .3s,background .3s}
.pf-retour:hover{border-color:var(--pf-accent)}
.pf-retour i{font-style:normal;transition:transform .3s}
.pf-retour:hover i{transform:translateX(-3px)}
.pf .pf-credit{text-align:right;font-size:13px;line-height:1.5;color:var(--pf-doux)}
.pf .pf-credit strong{display:block;color:var(--pf-texte);font-weight:500;font-size:15px}
@media (max-width:820px){
  .pf-voir{grid-template-columns:1fr;gap:0}
  .pf-mini{height:220px}
  .pf-texte{padding:26px 22px 28px}
  .pf-bas{flex-direction:column-reverse;align-items:center;text-align:center}
  .pf .pf-credit{text-align:center}
}