/* ── Portfolio-specific styles ── */

/* Cursor blend override for portfolio */
#cursor { mix-blend-mode: difference; }

/* Filter bar */
.pf-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin: 2.5rem 0 3rem;
}
.pf-pill {
    padding: .45rem 1.1rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,.55);
    font-size: .82rem;
    font-family: inherit;
    cursor: pointer;
    transition: all .25s ease;
    letter-spacing: .02em;
}
.pf-pill:hover {
    border-color: rgba(var(--accent-rgb), .4);
    color: rgba(255,255,255,.85);
}
.pf-pill.active {
    background: rgba(var(--accent-rgb), .12);
    border-color: var(--accent);
    color: var(--accent);
}

/* Projects grid */
.pf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
@media (max-width: 1024px) { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pf-grid { grid-template-columns: 1fr; } }

/* Project card */
.pf-card {
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    transition: transform .35s ease, border-color .35s ease;
}
.pf-card.hidden { display: none; }
.pf-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--accent-rgb), .25);
}

/* Visuel réel : écran desktop + téléphone posé en bas à droite (mobile first) */
.pf-visuel {
    --pf-sortie: cubic-bezier(.16, 1, .3, 1);
    --pf-ombre: 0 2px 4px rgba(0,0,0,.3), 0 30px 60px -20px rgba(0,0,0,.7);
    position: relative;
    display: block;
    margin: 1.1rem 1.1rem 0;
    padding: 0 18% 12% 0;
    text-decoration: none;
}
.pf-ecran,
.pf-tel { display: block; }
.pf-ecran {
    border-radius: 8px;
    overflow: hidden;
    background: #111;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--pf-ombre);
    transition: transform .6s var(--pf-sortie);
}
.pf-ecran { position: relative; }
.pf-ecran video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .4s ease;
}
.pf-ecran video.is-playing { opacity: 1; }
.pf-ecran img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 900;
    object-fit: cover;
}
.pf-tel {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 27%;
    padding: 4px;
    border-radius: 1.1rem;
    background: #0c0c0e;
    box-shadow: var(--pf-ombre), inset 0 0 0 1px rgba(255,255,255,.18);
}
.pf-tel video {
    display: block;
    width: 100%;
    height: auto;
    background: #1a1a1a;
    aspect-ratio: 390 / 844;
    object-fit: cover;
    border-radius: calc(1.1rem - 4px);
}
.pf-card:hover .pf-ecran { transform: translateY(-4px); }

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .pf-tel {
            animation: pf-monte linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 60%;
        }
    }
}
@keyframes pf-monte { from { transform: translateY(8%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .pf-ecran { transition: none; }
    .pf-card:hover .pf-ecran { transform: none; }
}

/* Card body */
.pf-body { padding: 1.25rem 1.35rem 1.5rem; }
.pf-badge {
    display: inline-block;
    padding: .22rem .65rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(var(--accent-rgb), .1);
    color: var(--accent);
    margin-bottom: .75rem;
    border: 1px solid rgba(var(--accent-rgb), .2);
}
.pf-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .5rem;
    line-height: 1.3;
}
.pf-desc {
    font-size: .82rem;
    color: rgba(255,255,255,.5);
    line-height: 1.6;
    margin: 0 0 1rem;
}
.pf-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.pf-tag {
    padding: .18rem .6rem;
    border-radius: 4px;
    font-size: .7rem;
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.35);
    border: 1px solid rgba(255,255,255,.06);
}

/* Stats strip */
.pf-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.05);
    border-radius: 1rem;
    overflow: hidden;
    margin-top: 4rem;
}
@media (max-width: 768px) { .pf-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .pf-stats { grid-template-columns: 1fr; } }
.pf-stat {
    background: rgba(255,255,255,.02);
    padding: 2rem 1.5rem;
    text-align: center;
}
.pf-stat-n {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    display: block;
    margin-bottom: .35rem;
}
.pf-stat-l {
    font-size: .78rem;
    color: rgba(255,255,255,.4);
    letter-spacing: .04em;
}

/* Visit link on real projects */
.pf-visit {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .85rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--pf-visit-color, var(--accent));
    text-decoration: none;
    transition: gap .2s ease, opacity .2s ease;
    opacity: .8;
}
.pf-visit:hover { gap: .6rem; opacity: 1; }