/* Portfolio page (/portfolio/). Loaded after site.css; every class is pf- prefixed so nothing collides with the home page styles. */
html{scroll-padding-top:76px}
.pf{background:var(--pf-ink);color:var(--pf-bone)}
.pf img{display:block;max-width:100%;height:auto}
.pf .pf-w92{width:92%}.pf .pf-w74{width:74%}.pf .pf-w51{width:51%}
@media (prefers-reduced-motion:reduce){.pf *{transition:none!important}}

/* Layout: dossier de développeur solo. Bandeau d'ouverture sur l'image de The Refuge, puis une section par vitrine (Steam, Fab, Fortnite, web), colonne 1180px. Thème sombre unique, choix de marque (rouge et noir). */
.pf{
  --pf-ink:#0c0a0a;
  --pf-panel:#151211;
  --pf-panel-2:#1d1817;
  --pf-line:rgba(236,226,214,.13);
  --pf-bone:#ece7df;
  --pf-ash:#a39a91;
  --pf-blood:#a8160f;
  --pf-ember:#e2473a;
  --pf-display:"Oswald","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --pf-body:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --pf-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  
}
a{color:inherit}
img{display:block;max-width:100%}
.pf-wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}


/* barre */

/* ouverture */
.pf-hero{position:relative;isolation:isolate;border-bottom:1px solid var(--pf-line);overflow:hidden}
.pf-hero img.pf-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(.75)}
.pf-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,10,10,.96) 0%,rgba(12,10,10,.82) 45%,rgba(12,10,10,.35) 100%),linear-gradient(0deg,var(--pf-ink) 0%,transparent 40%)}
.pf-hero .pf-wrap{padding-block:88px 64px}
.pf-eyebrow{font:500 13px/1.2 var(--pf-display);letter-spacing:.24em;text-transform:uppercase;color:var(--pf-ember);display:flex;align-items:center;gap:12px}
.pf-eyebrow::before{content:"";width:28px;height:3px;background:var(--pf-blood)}
.pf-hero h1{font:700 clamp(48px,9vw,112px)/.92 var(--pf-display);text-transform:uppercase;letter-spacing:.01em;margin:18px 0 22px;text-wrap:balance}
.pf-hero h1 span{color:var(--pf-ember)}
.pf-hero p.pf-lead{max-width:56ch;font-size:clamp(17px,2vw,19px);color:#d6cfc6;margin:0}

/* chiffres */
.pf-facts{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--pf-line)}
.pf-facts div{padding:22px 16px 20px;border-right:1px solid var(--pf-line);min-width:0}
.pf-facts div:last-child{border-right:0}
.pf-facts strong{display:block;font:700 34px/1 var(--pf-display);font-variant-numeric:tabular-nums}
.pf-facts small{display:block;margin-top:6px;font:500 12px/1.3 var(--pf-display);letter-spacing:.14em;text-transform:uppercase;color:var(--pf-ash)}
@media (max-width:820px){.pf-facts{grid-template-columns:repeat(2,1fr)}.pf-facts div{border-bottom:1px solid var(--pf-line)}.pf-facts div:nth-child(2n){border-right:0}.pf-facts div:last-child{grid-column:1/-1;border-bottom:0}}

/* sections */
section.pf-block{padding-block:84px 8px}
.pf-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin-bottom:30px}
.pf-head h2{font:700 clamp(32px,5vw,52px)/1 var(--pf-display);text-transform:uppercase;margin:10px 0 0;text-wrap:balance}
.pf-head p{margin:0;max-width:48ch;color:var(--pf-ash)}
.pf-out{font:500 13px/1 var(--pf-display);letter-spacing:.14em;text-transform:uppercase;color:var(--pf-bone);text-decoration:none;border:1px solid rgba(236,231,223,.4);padding:11px 16px;border-radius:3px;white-space:nowrap}
.pf-out:hover,.pf-out:focus-visible{background:rgba(168,22,15,.35);border-color:var(--pf-ember)}
.pf-out.pf-primary{background:var(--pf-blood);border-color:var(--pf-blood);color:#fff}
.pf-out.pf-primary:hover,.pf-out.pf-primary:focus-visible{background:var(--pf-ember);border-color:var(--pf-ember)}
.pf-chips{display:flex;flex-wrap:wrap;gap:6px}
.pf-chip{font:500 11px/1 var(--pf-display);letter-spacing:.14em;text-transform:uppercase;color:var(--pf-ash);border:1px solid var(--pf-line);padding:6px 8px;border-radius:2px}
.pf-chip.pf-hot{color:#fff;background:var(--pf-blood);border-color:var(--pf-blood)}

/* jeu phare */
.pf-feature{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);background:var(--pf-panel);border:1px solid var(--pf-line);border-radius:6px;overflow:hidden}
.pf-feature .pf-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--pf-ink)}
.pf-feature .pf-shots img{width:100%;aspect-ratio:16/9;object-fit:cover}
.pf-feature .pf-shots img:first-child{grid-column:1/-1}
.pf-feature .pf-txt{padding:30px 30px 28px;display:flex;flex-direction:column;gap:16px;min-width:0}
.pf-feature h3{font:700 40px/1 var(--pf-display);text-transform:uppercase;margin:0}
.pf-feature .pf-tag{font:500 15px/1.3 var(--pf-display);letter-spacing:.08em;text-transform:uppercase;color:var(--pf-ember);margin:0}
.pf-feature p{margin:0;color:#d6cfc6}
.pf-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:4px 0 0;font-size:14px}
.pf-meta dt{font:500 11px/1.9 var(--pf-display);letter-spacing:.16em;text-transform:uppercase;color:var(--pf-ash)}
.pf-meta dd{margin:0}
.pf-feature .pf-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:900px){.pf-feature{grid-template-columns:1fr}}

/* autres jeux */
.pf-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.pf-game{display:flex;flex-direction:column;background:var(--pf-panel);border:1px solid var(--pf-line);border-radius:6px;overflow:hidden;text-decoration:none;transition:border-color .15s,transform .15s}
.pf-game:hover,.pf-game:focus-visible{border-color:var(--pf-ember);transform:translateY(-2px)}
.pf-game img{width:100%;aspect-ratio:460/215;object-fit:cover}
.pf-game .pf-in{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.pf-game h3{font:700 22px/1.1 var(--pf-display);text-transform:uppercase;margin:0}
.pf-game .pf-date{font:500 12px/1 var(--pf-mono);color:var(--pf-ash)}
.pf-game p{margin:0;font-size:15px;color:#cfc8bf}
.pf-game .pf-go{margin-top:auto;font:500 12px/1 var(--pf-display);letter-spacing:.16em;text-transform:uppercase;color:var(--pf-ember)}
@media (max-width:900px){.pf-games{grid-template-columns:1fr}.pf-game{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr)}.pf-game img{height:100%}}
@media (max-width:560px){.pf-game{display:flex}}

/* filtres */
.pf-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.pf-filters button{all:unset;cursor:pointer;font:500 12px/1 var(--pf-display);letter-spacing:.14em;text-transform:uppercase;color:var(--pf-ash);border:1px solid var(--pf-line);padding:9px 12px;border-radius:3px}
.pf-filters button:hover{color:var(--pf-bone);border-color:rgba(236,231,223,.4)}
.pf-filters button[aria-pressed="true"]{color:#fff;background:var(--pf-blood);border-color:var(--pf-blood)}
.pf-filters button:focus-visible{outline:2px solid var(--pf-ember);outline-offset:2px}
.pf-filters em{font-style:normal;font-family:var(--pf-mono);opacity:.7;margin-left:4px}

/* grilles produits / îles */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:16px}
.pf-card{display:flex;flex-direction:column;background:var(--pf-panel);border:1px solid var(--pf-line);border-radius:5px;overflow:hidden;text-decoration:none;transition:border-color .15s}
.pf-card:hover,.pf-card:focus-within{border-color:var(--pf-ember)}
.pf-card .pf-pic{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--pf-panel-2)}
.pf-card .pf-pic img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.pf-card:hover .pf-pic img{transform:scale(1.04)}
.pf-card .pf-in{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pf-card h3{font:500 17px/1.2 var(--pf-display);letter-spacing:.02em;margin:0}
.pf-card h3 a{text-decoration:none}
.pf-card h3 a:hover{color:var(--pf-ember)}
.pf-card .pf-row{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13px;color:var(--pf-ash)}
.pf-stars{color:var(--pf-bone);font-variant-numeric:tabular-nums}
.pf-code{display:flex;align-items:center;gap:8px}
.pf-code span{font:500 13px/1 var(--pf-mono);color:var(--pf-bone);letter-spacing:.04em}
.pf-code button{all:unset;cursor:pointer;font:500 10px/1 var(--pf-display);letter-spacing:.14em;text-transform:uppercase;color:var(--pf-ash);border:1px solid var(--pf-line);padding:5px 7px;border-radius:2px}
.pf-code button:hover{color:var(--pf-bone);border-color:var(--pf-ember)}
.pf-code button:focus-visible{outline:2px solid var(--pf-ember);outline-offset:2px}
.pf-stat{font-variant-numeric:tabular-nums}
.pf-stat b{color:var(--pf-bone);font-weight:500}
.pf-note{margin:18px 0 0;font-size:13px;color:var(--pf-ash)}
.pf-card.pf-top{grid-column:span 2}
.pf-card.pf-top h3{font-size:22px}
@media (max-width:620px){.pf-card.pf-top{grid-column:auto}}

.pf-past{margin:44px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px}
.pf-past h3{font:700 24px/1.1 var(--pf-display);text-transform:uppercase;margin:0}
.pf-past p{margin:0;color:var(--pf-ash);max-width:70ch}
.pf-chip.pf-off{color:var(--pf-bone);border-color:rgba(236,231,223,.35)}
.pf-game img{filter:saturate(.7)}
.pf-game:hover img{filter:none}
/* sites */
.pf-sites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pf-site{display:flex;flex-direction:column;background:var(--pf-panel);border:1px solid var(--pf-line);border-radius:6px;overflow:hidden;text-decoration:none;transition:border-color .15s}
.pf-site:hover,.pf-site:focus-visible{border-color:var(--pf-ember)}
.pf-site .pf-pic{aspect-ratio:1.9/1;overflow:hidden;background:var(--pf-panel-2)}
.pf-site .pf-pic img{width:100%;height:100%;object-fit:cover}
.pf-site .pf-in{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.pf-site h3{font:700 22px/1.1 var(--pf-display);text-transform:uppercase;margin:0}
.pf-site .pf-url{font:500 12px/1.2 var(--pf-mono);color:var(--pf-ember);word-break:break-all}
.pf-site p{margin:0;font-size:15px;color:#cfc8bf}
.pf-quiz{height:100%;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:22px 24px;background:radial-gradient(120% 120% at 100% 0%,rgba(168,22,15,.35),transparent 60%),var(--pf-panel-2)}
.pf-quiz strong{font:700 30px/1.05 var(--pf-display);text-transform:uppercase}
.pf-quiz .pf-bars{display:grid;gap:6px}
.pf-quiz .pf-bars i{display:block;height:8px;border-radius:2px;background:var(--pf-line)}
.pf-quiz .pf-bars i b{display:block;height:100%;border-radius:2px;background:var(--pf-ember)}
.pf-quiz small{font:500 12px/1 var(--pf-mono);color:var(--pf-ash)}
@media (max-width:900px){.pf-sites{grid-template-columns:1fr}}

/* contact */
.pf-contact{margin-top:96px;border-top:1px solid var(--pf-line);background:linear-gradient(180deg,var(--pf-panel),var(--pf-ink))}
.pf-contact .pf-wrap{padding-block:64px 56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.pf-contact h2{font:700 clamp(32px,5vw,52px)/1 var(--pf-display);text-transform:uppercase;margin:10px 0 14px}
.pf-contact p{margin:0;color:var(--pf-ash);max-width:46ch}
.pf-links{display:grid;gap:8px}
.pf-links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--pf-line);border-radius:4px;text-decoration:none;background:var(--pf-ink)}
.pf-links a:hover,.pf-links a:focus-visible{border-color:var(--pf-ember)}
.pf-links a span{font:500 15px/1.2 var(--pf-display);letter-spacing:.08em;text-transform:uppercase}
.pf-links a small{font:500 12px/1.2 var(--pf-mono);color:var(--pf-ash);text-align:right;min-width:0;overflow-wrap:anywhere}
@media (max-width:820px){.pf-contact .pf-wrap{grid-template-columns:1fr}}
footer{border-top:1px solid var(--pf-line)}
footer .pf-wrap{padding-block:22px;font-size:13px;color:var(--pf-ash);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
a:focus-visible{outline:2px solid var(--pf-ember);outline-offset:2px}

.pf .pf-hero .pf-wrap{padding-block:150px 64px}
.pf .pf-wrap{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}