/* =========================================================
   PORTFOLIO PAGE — WHITE PREMIUM VERSION
   Web projects use a browser-style preview.
========================================================= */

.portfolio-page-white{
    --portfolio-bg:#f7f8fa;
    --portfolio-card:#ffffff;
    --portfolio-border:#dfe4e9;
    --portfolio-text:#10151a;
    --portfolio-muted:#6e7781;
    --portfolio-gold:var(--gold,#f5aa12);
    min-height:100vh;
    padding:155px 0 95px;
    color:var(--portfolio-text);
    background:
        radial-gradient(circle at 88% 8%, rgba(245,170,18,.055), transparent 25%),
        linear-gradient(180deg,#fbfcfd 0%,#f6f7f9 100%);
}

.portfolio-page-white .portfolio-intro{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:55px;
}

.portfolio-page-white .portfolio-intro-copy{max-width:760px;}

.portfolio-page-white .portfolio-eyebrow{
    margin:0 0 18px;
    display:flex;
    align-items:center;
    gap:11px;
    color:var(--portfolio-gold);
    font-size:12px;
    font-weight:800;
    letter-spacing:.45px;
    text-transform:uppercase;
}

.portfolio-page-white .portfolio-eyebrow span{
    width:9px;height:9px;flex:0 0 9px;border-radius:50%;
    background:var(--portfolio-gold);
    box-shadow:0 0 0 5px rgba(245,170,18,.08);
}

.portfolio-page-white .portfolio-intro h1{
    margin:0;
    color:#11161b;
    font-family:"ClashDisplay",Manrope,sans-serif;
    font-size:clamp(54px,6.2vw,88px);
    font-weight:500;
    line-height:.96;
    letter-spacing:-3.6px;
}

.portfolio-page-white .portfolio-intro h1 strong{
    display:inline-block;color:var(--portfolio-gold);font-weight:700;
}

.portfolio-page-white .portfolio-lead{
    max-width:650px;
    margin:25px 0 0;
    color:#66707a;
    font-size:14px;
    line-height:1.85;
}

.portfolio-page-white .portfolio-total{
    min-width:205px;
    padding-bottom:20px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:15px;
}

.portfolio-page-white .portfolio-total strong{
    color:var(--portfolio-gold);
    font-family:"ClashDisplay",Manrope,sans-serif;
    font-size:64px;font-weight:600;line-height:.9;
}

.portfolio-page-white .portfolio-total span{
    color:#3f4851;font-size:11px;font-weight:800;line-height:1.45;
    letter-spacing:.65px;text-transform:uppercase;
}

.portfolio-page-white .portfolio-filter-bar{
    margin:48px 0 32px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.portfolio-page-white .portfolio-filter-button{
    min-height:44px;
    padding:0 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid #d8dde3;
    border-radius:999px;
    color:#171c21;
    background:#fff;
    box-shadow:0 2px 10px rgba(12,20,28,.025);
    font-size:11px;
    font-weight:800;
    transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}

.portfolio-page-white .portfolio-filter-button span{
    min-width:23px;height:23px;padding:0 6px;display:grid;place-items:center;
    border-radius:999px;color:#a76c00;background:#fff2d2;font-size:9px;font-weight:800;
}

.portfolio-page-white .portfolio-filter-button:hover{
    border-color:rgba(245,170,18,.72);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(12,20,28,.07);
}

.portfolio-page-white .portfolio-filter-button.active{
    color:#11161b;border-color:var(--portfolio-gold);background:var(--portfolio-gold);
    box-shadow:0 8px 24px rgba(245,170,18,.16);
}

.portfolio-page-white .portfolio-filter-button.active span{
    color:#11161b;background:rgba(255,255,255,.5);
}

.portfolio-page-white .portfolio-page-grid{align-items:stretch;}
.portfolio-page-white .portfolio-page-item{opacity:1;transform:translateY(0);transition:opacity .22s ease,transform .22s ease;}
.portfolio-page-white .portfolio-page-item.is-hidden{display:none;}

.portfolio-page-white .portfolio-project-card{
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid var(--portfolio-border);
    border-radius:16px;
    background:var(--portfolio-card);
    box-shadow:0 14px 35px rgba(16,25,34,.065);
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}

.portfolio-page-white .portfolio-project-card:hover{
    transform:translateY(-7px);
    border-color:rgba(245,170,18,.52);
    box-shadow:0 24px 48px rgba(16,25,34,.12);
}

.portfolio-page-white .portfolio-project-image{
    position:relative;
    height:260px;
    overflow:hidden;
    background:#eef1f4;
}

.portfolio-page-white .portfolio-media-frame{
    position:relative;
    width:100%;height:100%;overflow:hidden;
}

.portfolio-page-white .portfolio-project-image img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .35s ease;
}

.portfolio-page-white .portfolio-project-card:hover .portfolio-project-image img{transform:scale(1.035);}

/* Web cards: show the screenshot like a real browser window (photo 1 style). */
.portfolio-page-white .portfolio-project-image-web{
    height:260px;
    padding:10px 10px 0;
    display:flex;
    flex-direction:column;
    background:#f3f5f7;
}

.portfolio-page-white .portfolio-project-image-web .portfolio-browser-bar{
    height:36px;
    flex:0 0 36px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 10px;
    border:1px solid #dfe4e9;
    border-bottom:0;
    border-radius:11px 11px 0 0;
    background:#fff;
}

.portfolio-page-white .browser-dots{display:flex;gap:5px;flex:0 0 auto;}
.portfolio-page-white .browser-dots i{width:7px;height:7px;border-radius:50%;display:block;}
.portfolio-page-white .browser-dots i:nth-child(1){background:#ff5f57;}
.portfolio-page-white .browser-dots i:nth-child(2){background:#ffbd2e;}
.portfolio-page-white .browser-dots i:nth-child(3){background:#28c840;}

.portfolio-page-white .browser-address{
    min-width:0;height:22px;flex:1;display:flex;align-items:center;gap:6px;
    padding:0 10px;border:1px solid #e2e6ea;border-radius:999px;
    color:#8a929a;background:#fafbfc;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.portfolio-page-white .browser-address i{font-size:7px;color:#86b98c;}

.portfolio-page-white .portfolio-project-image-web .portfolio-media-frame{
    flex:1;height:auto;border:1px solid #dfe4e9;border-top:0;background:#fff;
}
.portfolio-page-white .portfolio-project-image-web img{object-fit:cover;object-position:top center;}

.portfolio-page-white .portfolio-image-category{
    position:absolute;z-index:2;left:16px;top:16px;max-width:calc(100% - 32px);
    padding:7px 11px;overflow:hidden;border:1px solid rgba(0,0,0,.08);border-radius:999px;
    color:#151a1f;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
    box-shadow:0 5px 15px rgba(16,25,34,.08);
    font-size:9px;font-weight:800;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;
}

.portfolio-page-white .portfolio-project-image-web .portfolio-image-category{top:12px;left:12px;}

.portfolio-page-white .portfolio-play-button{
    position:absolute;z-index:3;left:50%;top:50%;width:54px;height:54px;display:grid;place-items:center;
    border:1.5px solid rgba(255,255,255,.95);border-radius:50%;color:#fff;background:rgba(3,6,8,.45);
    backdrop-filter:blur(5px);transform:translate(-50%,-50%);box-shadow:0 8px 22px rgba(0,0,0,.24);
}
.portfolio-page-white .portfolio-play-button i{margin-left:3px;font-size:17px;}

.portfolio-page-white .portfolio-project-body{flex:1;padding:18px 18px 19px;background:#fff;}
.portfolio-page-white .portfolio-project-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;color:#7c858e;font-size:10px;}
.portfolio-page-white .portfolio-project-meta span:first-child{overflow:hidden;color:#e89a00;font-weight:800;text-overflow:ellipsis;white-space:nowrap;}
.portfolio-page-white .portfolio-project-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;}
.portfolio-page-white .portfolio-project-title-row>div{min-width:0;}
.portfolio-page-white .portfolio-project-body h2{margin:0;color:#151a1f;font-family:"ClashDisplay",Manrope,sans-serif;font-size:20px;font-weight:500;line-height:1.25;}
.portfolio-page-white .portfolio-project-body p{margin:7px 0 0;color:#98a0a8;font-size:10px;font-weight:600;}

.portfolio-page-white .portfolio-project-link{
    width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;
    border:1px solid #d9dfe4;border-radius:50%;color:#e89a00;background:#fff;
    box-shadow:0 4px 12px rgba(16,25,34,.04);
    transition:background .22s ease,color .22s ease,transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.portfolio-page-white .portfolio-project-link:hover{color:#11161b;border-color:var(--portfolio-gold);background:var(--portfolio-gold);transform:translateY(-2px) rotate(5deg);box-shadow:0 8px 18px rgba(245,170,18,.18);}

.portfolio-page-white .portfolio-empty-state{
    margin-top:30px;padding:35px;border:1px dashed #d7dde2;border-radius:16px;color:#7e8790;background:#fff;text-align:center;
}

@media(max-width:1199px){
    .portfolio-page-white .portfolio-project-image,.portfolio-page-white .portfolio-project-image-web{height:245px;}
}

@media(max-width:991px){
    .portfolio-page-white{padding-top:125px;}
    .portfolio-page-white .portfolio-intro{align-items:flex-start;flex-direction:column;gap:28px;}
    .portfolio-page-white .portfolio-total{min-width:0;padding-bottom:0;justify-content:flex-start;}
}

@media(max-width:767px){
    .portfolio-page-white{padding:112px 0 65px;}
    .portfolio-page-white .portfolio-intro h1{font-size:clamp(42px,13vw,58px);letter-spacing:-2.2px;}
    .portfolio-page-white .portfolio-lead{font-size:13px;}
    .portfolio-page-white .portfolio-total strong{font-size:52px;}
    .portfolio-page-white .portfolio-filter-bar{margin:34px -12px 25px;padding:0 12px 8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
    .portfolio-page-white .portfolio-filter-bar::-webkit-scrollbar{display:none;}
    .portfolio-page-white .portfolio-filter-button{min-width:max-content;min-height:42px;}
    .portfolio-page-white .portfolio-project-image,.portfolio-page-white .portfolio-project-image-web{height:230px;}
}

@media(max-width:480px){
    .portfolio-page-white .portfolio-intro h1{font-size:42px;}
    .portfolio-page-white .portfolio-project-image,.portfolio-page-white .portfolio-project-image-web{height:215px;}
    .portfolio-page-white .portfolio-project-body{padding:16px;}
    .portfolio-page-white .portfolio-project-body h2{font-size:18px;}
}

@media(prefers-reduced-motion:reduce){
    .portfolio-page-white *,
    .portfolio-page-white *::before,
    .portfolio-page-white *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important;}
}

/* Portfolio video player modal */
.portfolio-page-white .portfolio-media-frame.portfolio-video-trigger{
    width:100%;padding:0;border:0;appearance:none;text-align:left;cursor:pointer;background:#111;
}
.portfolio-page-white .portfolio-video-trigger:focus-visible{
    outline:3px solid rgba(245,170,18,.6);outline-offset:3px;
}
.portfolio-page-white .portfolio-video-trigger:hover .portfolio-play-button{
    color:#111;background:var(--portfolio-gold);border-color:var(--portfolio-gold);transform:translate(-50%,-50%) scale(1.08);
}
.portfolio-page-white .portfolio-play-button{transition:transform .22s ease,background .22s ease,color .22s ease,border-color .22s ease;}
.portfolio-page-white .portfolio-project-link.portfolio-video-trigger{padding:0;cursor:pointer;}

.portfolio-video-modal[hidden]{display:none!important;}
.portfolio-video-modal{
    position:fixed;z-index:99999;inset:0;display:grid;place-items:center;padding:24px;
}
.portfolio-video-backdrop{
    position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(3,7,11,.88);backdrop-filter:blur(9px);cursor:pointer;
}
.portfolio-video-dialog{
    position:relative;z-index:1;width:min(1100px,94vw);overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:22px;
    background:#090d11;box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.portfolio-video-player-wrap{width:100%;aspect-ratio:16/9;background:#000;}
.portfolio-video-player-wrap video{display:block;width:100%;height:100%;object-fit:contain;background:#000;}
.portfolio-video-close{
    position:absolute;z-index:3;right:14px;top:14px;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);
    border-radius:50%;color:#fff;background:rgba(0,0,0,.58);backdrop-filter:blur(8px);cursor:pointer;transition:.2s ease;
}
.portfolio-video-close:hover{color:#111;background:var(--portfolio-gold);border-color:var(--portfolio-gold);transform:rotate(6deg);}
.portfolio-video-caption{display:flex;align-items:center;gap:18px;padding:18px 22px 20px;color:#fff;}
.portfolio-video-caption span{padding:7px 11px;border-radius:999px;color:#111;background:var(--portfolio-gold);font-size:10px;font-weight:900;text-transform:uppercase;}
.portfolio-video-caption h2{margin:0;color:#fff;font-family:"ClashDisplay",Manrope,sans-serif;font-size:20px;font-weight:600;}
body.portfolio-video-open{overflow:hidden;}
@media(max-width:767px){
    .portfolio-video-modal{padding:12px;}
    .portfolio-video-dialog{width:100%;border-radius:15px;}
    .portfolio-video-close{right:9px;top:9px;width:38px;height:38px;}
    .portfolio-video-caption{padding:14px 16px 16px;}
    .portfolio-video-caption h2{font-size:17px;}
}


/* V4 - vidéo directement visible à la place de la photo */
.portfolio-page-white .portfolio-inline-video-trigger{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
    border:0;
    padding:0;
    background:#000;
    cursor:pointer;
}
.portfolio-page-white .portfolio-inline-video{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#000;
    pointer-events:none;
}

/* =========================================================
   V5 — PHOTO D'ABORD, VIDEO AU CLIC DANS LA MEME CARTE
========================================================= */
.portfolio-page-white .portfolio-inline-player{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
}

.portfolio-page-white .portfolio-inline-poster,
.portfolio-page-white .portfolio-inline-video{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#000;
}

.portfolio-page-white .portfolio-inline-poster[hidden],
.portfolio-page-white .portfolio-inline-video[hidden],
.portfolio-page-white .portfolio-inline-play[hidden]{
    display:none !important;
}

.portfolio-page-white .portfolio-inline-play{
    margin:0;
    padding:0;
    cursor:pointer;
    appearance:none;
}

.portfolio-page-white .portfolio-inline-play:hover{
    color:#111;
    background:var(--portfolio-gold);
    border-color:var(--portfolio-gold);
    transform:translate(-50%,-50%) scale(1.08);
}

.portfolio-page-white .portfolio-inline-play:focus-visible{
    outline:3px solid rgba(245,170,18,.7);
    outline-offset:4px;
}

/* Quand la vidéo joue, elle occupe exactement la place de la photo. */
.portfolio-page-white .portfolio-inline-player.is-playing .portfolio-inline-video{
    position:absolute;
    inset:0;
    z-index:2;
}

/* La catégorie reste lisible au-dessus de la vidéo. */
.portfolio-page-white .portfolio-inline-player.is-playing .portfolio-image-category{
    z-index:4;
}

/* Le bouton Play du bas déclenche lui aussi la vidéo dans la carte. */
.portfolio-page-white .portfolio-inline-card-play{
    padding:0;
    cursor:pointer;
}
.portfolio-page-white .portfolio-inline-player .portfolio-inline-video{
    pointer-events:auto;
}