/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO.CSS — Sud Web Project
   Le portfolio devient une galerie.

   Le principe est muséographique : dans une galerie, les œuvres ne
   sont pas alignées dans une grille. Elles sont ACCROCHÉES à une
   cimaise — une grande pièce, puis deux petites, puis une moyenne.
   C'est ce déséquilibre maîtrisé qui distingue une collection d'un
   catalogue.

   Aucune carte, aucun badge, aucun prix sur les œuvres.
   À CHARGER après breath.css, avant type.css.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1 · LA SALLE
   ─────────────────────────────────────────────────────────────── */
.portfolio {
    position: relative;
    overflow: hidden;
}

.pf-gallery {
    position: relative;
    margin-top: 2rem;
}

/* LA CIMAISE — un filet vertical qui descend toute la salle.
   C'est elle qui transforme huit images en une collection. */
.pf-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(147, 196, 253, .16) 8%,
            rgba(147, 196, 253, .16) 92%,
            transparent 100%);
    transform: scaleY(0);
    transform-origin: top;
    pointer-events: none;
}

/* LE COMPTEUR — une collection se compte, un catalogue s'empile */
.pf-count {
    position: sticky;
    top: 50vh;
    float: left;
    margin-left: -1.5rem;
    width: 0;
    height: 0;
    z-index: 3;
    font-family: var(--ff-body);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: #4E5A6C;
    white-space: nowrap;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.pf-count b {
    color: var(--blue-l);
    font-weight: 600;
}

/* ───────────────────────────────────────────────────────────────
   2 · L'ŒUVRE
   Accrochée alternativement à gauche et à droite de la cimaise.
   ─────────────────────────────────────────────────────────────── */
.pf-work {
    position: relative;
    display: block;
    margin-bottom: 11rem;
    max-width: 46%;
}

.pf-work:last-child {
    margin-bottom: 0;
}

.pf-work--left {
    margin-right: auto;
}

.pf-work--right {
    margin-left: auto;
}

/* Les pièces maîtresses traversent la cimaise */
.pf-work--wide {
    max-width: 100%;
    margin-inline: 0;
}

/* Les pièces mineures reculent : c'est l'échelle qui hiérarchise,
   jamais un badge */
.pf-work--small {
    max-width: 33%;
}

/* Le trait d'accroche, entre la cimaise et l'œuvre */
.pf-work::before {
    content: '';
    position: absolute;
    top: 3rem;
    height: 1px;
    width: 0;
    background: rgba(147, 196, 253, .2);
    transition: width .9s var(--ease) .15s;
}

.pf-work--left::before {
    left: 100%;
}

.pf-work--right::before {
    right: 100%;
}

.pf-work--left.is-hung::before,
.pf-work--right.is-hung::before {
    width: 3.5rem;
}

.pf-work--wide::before {
    display: none;
}

/* ── Le cadre ── */
.pf-frame {
    position: relative;
    display: block;
    overflow: hidden;
    /* Ratio natif des captures : aucune image n'est recadrée */
    aspect-ratio: 2.2 / 1;
    border-radius: 2px;
    background: var(--ink-3);
    box-shadow: var(--sh-2);
    text-decoration: none;
    transform-style: preserve-3d;
}

.pf-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.82) brightness(.86);
    transition: filter 1s var(--ease);
}

.pf-work:hover .pf-frame img {
    filter: saturate(1) brightness(1);
}

/* Le voile de salle : une lumière rasante, pas un assombrissement */
.pf-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(130deg, rgba(147, 196, 253, .1), transparent 45%),
        linear-gradient(to top, rgba(5, 8, 15, .38), transparent 45%);
    opacity: 1;
    transition: opacity .9s var(--ease);
}

.pf-work:hover .pf-frame::after {
    opacity: .35;
}

/* ── La pièce à venir ── */
.pf-work--soon .pf-frame img {
    filter: saturate(.35) brightness(.6);
}

.pf-work--soon:hover .pf-frame img {
    filter: saturate(.5) brightness(.7);
}

.pf-soon-tag {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 2;
    font-family: var(--ff-body);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #C3CDDB;
    background: rgba(5, 8, 15, .6);
    border: 1px solid rgba(147, 196, 253, .2);
    border-radius: 100px;
    padding: .4rem 1rem;
}

/* ───────────────────────────────────────────────────────────────
   3 · LE CARTEL
   Comme au musée : numéro, titre, provenance, technique.
   ─────────────────────────────────────────────────────────────── */
.pf-label {
    margin-top: 1.85rem;
    max-width: 40ch;
}

.pf-num {
    display: block;
    font-family: var(--ff-body);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .2em;
    color: #4E5A6C;
    margin-bottom: .85rem;
    font-variant-numeric: tabular-nums;
}

.pf-name {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.2vw, 2.25rem);
    line-height: 1.12;
    letter-spacing: -.012em;
    margin: 0 0 .45rem;
}

.pf-work--wide .pf-name {
    font-size: clamp(2rem, 3.4vw, 3.4rem);
}

.pf-name a {
    position: relative;
    color: #E9EEF6;
    text-decoration: none;
    transition: color .4s var(--ease);
}

.pf-name a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.12em;
    height: 1px;
    background: var(--blue-l);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--ease);
}

.pf-work:hover .pf-name a {
    color: #fff;
}

.pf-work:hover .pf-name a::after {
    transform: scaleX(1);
}

.pf-name span {
    color: #E9EEF6;
}

/* Provenance : métier — ville */
.pf-origin {
    font-family: var(--ff-body);
    font-size: .84rem;
    color: #8B98AB;
    margin: 0 0 1.15rem;
}

/* Technique : les trois éléments, comme « huile sur toile, 1897 » */
.pf-tech {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .85rem;
    font-family: var(--ff-body);
    font-size: .76rem;
    color: #6E7C90;
    margin: 0 0 1.35rem;
    padding: 0;
    list-style: none;
}

.pf-tech li {
    position: relative;
}

.pf-tech li+li::before {
    content: '';
    position: absolute;
    left: -.48rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background: rgba(147, 196, 253, .18);
}

/* Pied de cartel : la formule, puis la démo */
.pf-foot-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.1rem;
    font-family: var(--ff-body);
    font-size: .76rem;
}

.pf-tier {
    position: relative;
    color: #B7C6DA;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    border-bottom: 1px solid rgba(147, 196, 253, .28);
    padding-bottom: 1px;
    transition: color .3s var(--ease), border-color .3s var(--ease);
}

.pf-tier:hover {
    color: #fff;
    border-bottom-color: var(--blue-l);
}

.pf-demo {
    position: relative;
    color: #6E7C90;
    text-decoration: none;
    transition: color .3s var(--ease);
}

.pf-demo:hover {
    color: var(--blue-l);
}

.pf-demo::before {
    content: '';
    position: absolute;
    left: -.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background: rgba(147, 196, 253, .18);
}

.pf-await {
    position: relative;
    color: #4E5A6C;
    font-style: italic;
}

.pf-await::before {
    content: '';
    position: absolute;
    left: -.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background: rgba(147, 196, 253, .18);
}

/* Cartel des pièces maîtresses : posé sur l'œuvre */
.pf-work--wide .pf-label {
    position: absolute;
    left: 2.75rem;
    bottom: 2.5rem;
    z-index: 2;
    margin-top: 0;
    max-width: 34ch;
}

.pf-work--wide .pf-frame::after {
    background:
        linear-gradient(130deg, rgba(147, 196, 253, .08), transparent 45%),
        linear-gradient(to top, rgba(5, 8, 15, .85) 0%, rgba(5, 8, 15, .25) 45%, transparent 70%);
}

/* ───────────────────────────────────────────────────────────────
   4 · LA LÉGENDE DE COLLECTION
   Les tarifs, une seule fois, en pied de salle.
   ─────────────────────────────────────────────────────────────── */
.pf-legend {
    margin-top: 7rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: .6rem 2.25rem;
    font-family: var(--ff-body);
    font-size: .8rem;
    color: #6E7C90;
}

.pf-legend b {
    color: #B7C6DA;
    font-weight: 600;
}

.pf-legend a {
    color: var(--blue-l);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease);
}

.pf-legend a:hover {
    border-bottom-color: var(--blue-l);
}

/* ───────────────────────────────────────────────────────────────
   5 · LE CURSEUR « VOIR »
   Sur une œuvre, la croix fine devient un cercle porteur de mot.
   ─────────────────────────────────────────────────────────────── */
#pf-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 950;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(59, 130, 246, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-body);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.5);
    transition: opacity .35s var(--ease), scale .45s var(--ease);
    will-change: transform;
}

#pf-cursor.is-on {
    opacity: 1;
    scale: 1;
}

/* Le curseur natif du site s'efface au-dessus d'une œuvre */
body.pf-hovering .cursor {
    opacity: 0;
    transition: opacity .3s ease;
}

/* ───────────────────────────────────────────────────────────────
   6 · REPLI — l'ancienne grille
   ─────────────────────────────────────────────────────────────── */
.pf-grid,
.pf-card,
.pf-badge,
.pf-price-clean,
.pf-tags {
    display: none !important;
}

/* ───────────────────────────────────────────────────────────────
   6 bis · L'ACCROCHAGE EMBOÎTÉ (29/09)
   Chaque œuvre s'accroche à mi-hauteur de la précédente, de l'autre
   côté de la cimaise : la salle se lit en quinconce, sans mur vide.
   Les captures gardent leurs vraies couleurs ; le voile ne fait plus
   qu'effleurer le bas de l'image.
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 1101px) {
    .pf-work {
        margin-bottom: 5rem;
    }

    .pf-work--wide {
        margin-bottom: 7rem;
    }

    .pf-work--left+.pf-work--right,
    .pf-work--right+.pf-work--left {
        margin-top: -17rem;
    }
}

.pf-frame img {
    filter: saturate(.96) brightness(.96);
}

.pf-frame::after {
    background:
        linear-gradient(130deg, rgba(147, 196, 253, .06), transparent 40%),
        linear-gradient(to top, rgba(5, 8, 15, .22), transparent 35%);
}

/* LE BLEU SWP : au repos, chaque capture est ramenée dans le bleu nuit de la
   maison (le calque garde la lumière de l'image et lui impose la teinte).
   Au survol, ou au centre de l'écran sur téléphone, le projet révèle ses
   vraies couleurs : l'univers du client apparaît dans celui de SWP. */
.pf-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: #26395C;
    mix-blend-mode: color;
    opacity: 1;
    transition: opacity 1.1s var(--ease);
}

.pf-frame img {
    filter: brightness(.78) contrast(1.08);
}

.pf-work:hover .pf-frame::before,
.pf-work:focus-within .pf-frame::before {
    opacity: 0;
}

.pf-work:hover .pf-frame img,
.pf-work:focus-within .pf-frame img {
    filter: brightness(1) contrast(1);
}

@media (hover: none) {
    .pf-work.is-lit .pf-frame::before {
        opacity: 0;
    }

    .pf-work.is-lit .pf-frame img {
        filter: brightness(1) contrast(1);
    }
}

/* La pièce maîtresse garde son dégradé : son cartel est posé sur l'image */
.pf-work--wide .pf-frame::after {
    background: linear-gradient(90deg, rgba(5, 8, 15, .78) 0%, rgba(5, 8, 15, .35) 42%, transparent 70%);
}

/* ───────────────────────────────────────────────────────────────
   7 · RESPONSIVE
   La cimaise se déplace à gauche : les œuvres s'y accrochent
   toutes du même côté, comme un accrochage de couloir.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .pf-rail {
        left: 0;
    }

    .pf-work,
    .pf-work--small {
        max-width: 88%;
        margin-left: 2.5rem;
        margin-right: 0;
        margin-bottom: 7rem;
    }

    .pf-work--wide {
        max-width: 100%;
        margin-left: 0;
    }

    .pf-work::before {
        left: auto;
        right: 100%;
        top: 2.5rem;
    }

    .pf-work--left.is-hung::before,
    .pf-work--right.is-hung::before {
        width: 2.5rem;
    }

    .pf-count {
        display: none;
    }

    .pf-work--wide .pf-label {
        left: 2rem;
        bottom: 2rem;
    }
}

@media (max-width: 768px) {
    .pf-rail {
        display: none;
    }

    .pf-work,
    .pf-work--small,
    .pf-work--wide {
        max-width: 100%;
        margin-left: 0;
        margin-bottom: 4.5rem;
    }

    .pf-work::before {
        display: none;
    }

    /* Sur mobile, le cartel des pièces maîtresses redescend sous
       l'image : posé dessus, il deviendrait illisible */
    .pf-work--wide .pf-label {
        position: static;
        margin-top: 1.5rem;
        max-width: none;
    }

    .pf-work--wide .pf-name {
        font-size: 1.7rem;
    }

    /* Cartel sous l'image : plus besoin d'assombrir la capture */
    .pf-work--wide .pf-frame::after {
        background: linear-gradient(to top, rgba(5, 8, 15, .22), transparent 35%);
    }

    .pf-label {
        margin-top: 1.35rem;
        max-width: none;
    }

    .pf-name {
        font-size: 1.42rem;
    }

    .pf-origin {
        font-size: .8rem;
        margin-bottom: .9rem;
    }

    .pf-tech {
        font-size: .72rem;
        margin-bottom: 1.1rem;
    }

    .pf-legend {
        margin-top: 4rem;
        padding-top: 2rem;
        flex-direction: column;
        align-items: flex-start;
        gap: .7rem;
        text-align: left;
    }

    #pf-cursor {
        display: none !important;
    }

    .pf-frame img {
        filter: saturate(.95) brightness(.95);
    }
}