/* Portfolio : composition éditoriale, visuels réels et interactions progressives. */
.page-portfolio{--pf-gold:#d7b783;--pf-line:#ffffff24;background:radial-gradient(ellipse at 85% 5%,#29344333,transparent 28%),#080b11}
.page-portfolio main{padding-top:28px}
.page-portfolio .cadre{max-width:1392px}
.page-portfolio h1,.page-portfolio h2,.page-portfolio h3{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 102,'wght' 500;letter-spacing:-.045em;text-wrap:balance}
.page-portfolio h2{border:0;padding:0;margin:0;line-height:1.1;font-size:clamp(30px,3.5vw,52px)}
.page-portfolio h3{font-size:25px;line-height:1.2}
.page-portfolio p{line-height:1.8}
.page-portfolio em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:var(--pf-gold);letter-spacing:-.055em}
.page-portfolio .pf-kicker{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pf-gold);display:flex;gap:12px;align-items:center;margin:0}
.page-portfolio .pf-mono{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em;color:#a3acbb;line-height:1.6}
.pf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.pf-intro{position:relative;padding:36px 0 64px}
.pf-intro-top,.pf-intro-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px}
.page-portfolio .pf-intro h1{font-size:clamp(66px,8.5vw,126px);line-height:.99;font-variation-settings:'wdth' 104,'wght' 500;letter-spacing:-.065em;margin:50px 0 38px;position:relative;max-width:1050px;text-wrap:initial}
.pf-star{font-size:clamp(140px,20vw,280px);color:var(--pf-gold);font-family:Georgia,serif;font-weight:400;line-height:1;position:absolute;right:0;top:28%;transform:rotate(-12deg);text-shadow:0 0 85px #cfa86724;animation:pf-star-in 1.4s cubic-bezier(.2,.7,.3,1) both}
.page-portfolio .pf-intro-bottom p{font-size:16px;line-height:1.75;margin:0;max-width:470px}
.pf-scroll{display:flex;align-items:center;gap:25px;font-size:12px;text-decoration:none}
.pf-scroll span{width:47px;height:47px;border:1px solid #cfa86766;border-radius:50%;display:grid;place-items:center;font-size:20px;color:var(--pf-gold);transition:transform .25s,background .25s}
.pf-scroll:hover span{transform:translateY(4px);background:#cfa86718}
.pf-selection{scroll-margin-top:150px}
.pf-selection-heading{border-top:1px solid var(--pf-line);padding:25px 0 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.pf-selection-heading p{margin:0}
.pf-selection-total{color:#858f9e}
.pf-filter-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 28px;min-height:44px}
.pf-filters{display:flex;gap:8px;flex-wrap:wrap}
.pf-filters[hidden],.pf-project[hidden]{display:none!important}
.pf-filters button{font:inherit;font-size:12px;padding:12px 16px;border:1px solid #ffffff25;border-radius:3px;background:transparent;color:#b9c1cc;cursor:pointer;display:flex;gap:16px;align-items:center;transition:background .2s,color .2s,border-color .2s}
.pf-filters button span{font-family:'IBM Plex Mono',monospace;font-size:9px;opacity:.65}
.pf-filters button:hover{border-color:#cfa86788;color:white}
.pf-filters button[aria-pressed=true]{background:var(--pf-gold);border-color:var(--pf-gold);color:#101318}
.page-portfolio .pf-count{font-family:'IBM Plex Mono',monospace;font-size:10px;white-space:nowrap;margin:0;color:#a3acbb}
.pf-projects{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;row-gap:58px}
.pf-project{min-width:0}
.pf-project:first-child{grid-column:1/-1}
.pf-project-link{display:block;text-decoration:none;color:inherit}
.pf-project-image{position:relative;overflow:hidden;border-radius:5px;background:#151b20;aspect-ratio:1.46;isolation:isolate}
.pf-project:first-child .pf-project-image{aspect-ratio:2.12}
.pf-project-image:after{content:'';position:absolute;inset:0;border:1px solid #ffffff20;border-radius:inherit;pointer-events:none}
.pf-project-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.3,1);object-position:center}
.pf-project:first-child .pf-project-image img{object-position:50% 52%}
.pf-saas .pf-project-image{background:radial-gradient(ellipse at 50% 30%,#74856755,transparent 70%),#1c2622;display:flex;align-items:center;padding:30px}
.pf-saas .pf-project-image img{height:auto;box-shadow:0 24px 55px #0005;border-radius:5px;transform:perspective(1500px) rotateY(-6deg) rotateZ(-3deg);width:100%}
.pf-project-link:hover .pf-project-image img{transform:scale(1.035)}
.pf-saas .pf-project-link:hover .pf-project-image img{transform:perspective(1500px) rotateY(0) rotateZ(0) scale(1.025)}
.pf-image-label{position:absolute;top:20px;left:20px;padding:8px 12px;background:#080b11de;border:1px solid #ffffff30;border-radius:3px;color:white;font-size:10px;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(12px)}
.pf-open{position:absolute;bottom:20px;right:20px;width:48px;height:48px;display:grid;place-items:center;background:#080b11d9;border:1px solid #ffffff50;border-radius:50%;color:white;font-size:24px;transition:background .25s,color .25s,transform .25s}
.pf-project-link:hover .pf-open{background:var(--pf-gold);color:#080b11;transform:rotate(45deg)}
.pf-project-meta{display:flex;justify-content:space-between;gap:20px;margin:22px 0 12px}
.pf-project-copy h2{transition:color .2s}
.page-portfolio .pf-project-copy h2{font-size:clamp(27px,3vw,42px);margin:0 0 12px}
.page-portfolio .pf-project-copy p{font-size:14px;max-width:52ch;margin:0}
.pf-project:first-child .pf-project-copy{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.pf-project-link:hover h2{color:var(--pf-gold)}
.pf-project-bottom{border-bottom:1px solid var(--pf-line);padding:22px 0;display:flex;gap:15px;align-items:center;justify-content:space-between}
.pf-tags{display:flex;gap:7px;flex-wrap:wrap}
.pf-tags span{font-size:9px;color:#aeb7c4;border:1px solid #ffffff20;border-radius:20px;padding:5px 9px}
.pf-discover{font-size:11px;color:#e6cfac;white-space:nowrap}
.pf-discover span{margin-left:10px}
.pf-project:not(:first-child) .pf-discover{display:none}
.pf-projects.pf-filtered .pf-project{grid-column:1/-1}
.pf-projects.pf-filtered .pf-project .pf-project-image{aspect-ratio:2.12}
.pf-projects.pf-filtered .pf-saas .pf-project-image img{width:85%;margin:auto}
.pf-projects.pf-filtered .pf-project .pf-discover{display:inline}
.pf-philosophy{display:grid;grid-template-columns:1.1fr 1fr;gap:20px 80px;margin:120px 0 90px;padding:55px 0;border-top:1px solid var(--pf-line)}
.pf-philosophy>.pf-kicker{grid-column:1/-1;margin-bottom:15px}
.page-portfolio .pf-philosophy p:not(.pf-kicker){font-size:15px}
.pf-link{display:inline-flex;align-items:center;gap:20px;font-size:13px;text-decoration:none;padding:10px 0;border-bottom:1px solid #ffffff50;color:#f3ece0}
.pf-link span[aria-hidden]{color:var(--pf-gold);transition:transform .25s}
.pf-link:hover span[aria-hidden]{transform:translate(3px,-3px)}
.page-portfolio .appel{margin-top:70px;background:radial-gradient(ellipse at 80% 100%,#cfa86720,transparent 65%),#10151d;padding:clamp(32px,6vw,84px);border-radius:5px}
.page-portfolio .appel h2{max-width:750px;font-size:clamp(36px,4.4vw,66px);margin:22px 0}
.page-portfolio .appel p:not(.eyebrow){max-width:580px;font-size:16px}
.page-portfolio .appel-note{display:block;margin-top:18px;color:#a3acbb;font-size:11px}
.pf-back{display:inline-block;color:#a3acbb;text-decoration:none;font-size:12px;margin:8px 0 50px}
.pf-case-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.pf-status{display:flex;align-items:center;gap:9px;color:#c6cbd4;font-size:10px;border:1px solid var(--pf-line);border-radius:20px;padding:8px 13px}
.page-portfolio .pf-case h1{font-size:clamp(65px,9vw,132px);line-height:.99;margin:30px 0 35px;letter-spacing:-.065em;max-width:1150px;text-wrap:balance}
.pf-title-dot{color:var(--pf-gold)}
.pf-case-heading{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-bottom:48px;align-items:start}
.page-portfolio .pf-case-heading h2{font-size:clamp(26px,3vw,42px);line-height:1.12;max-width:22ch}
.page-portfolio .pf-case-heading p{font-size:15px;margin:0}
.pf-actions{display:flex;gap:12px 28px;flex-wrap:wrap;align-items:center;margin-top:17px}
.pf-private{display:flex;gap:10px;align-items:center;color:#c1c8d3;font-size:12px;margin-top:10px}
.pf-cover{margin:0;border-radius:5px;overflow:hidden;background:#131921}
.pf-cover>img{width:100%;height:auto;max-height:740px;object-fit:cover;object-position:center;display:block}
.pf-saas .pf-cover{padding:clamp(20px,5vw,70px) clamp(16px,5vw,70px) 0;background:radial-gradient(ellipse at 55% 35%,#52644988,transparent 85%),#18251f}
.pf-saas .pf-cover>img{border-radius:5px;box-shadow:0 15px 50px #0005}
.pf-cover figcaption{display:flex;gap:15px;justify-content:space-between;padding:17px 22px;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.06em;color:#aeb7c2}
.page-portfolio .pf-facts{display:grid;grid-template-columns:1fr 1.3fr 1fr 1fr;padding:32px 0;border-bottom:1px solid var(--pf-line);gap:24px;margin:0}
.pf-facts>div+div{border-left:1px solid var(--pf-line);padding-left:24px}
.page-portfolio .pf-facts dt{font-size:9px;color:#949eae;letter-spacing:.1em;padding:0;margin-bottom:12px}
.page-portfolio .pf-facts dd{font-size:13px;color:#e7e8eb;line-height:1.65;margin:0}
.pf-chapters{display:flex;gap:30px;flex-wrap:wrap;padding:24px 0;border-bottom:1px solid var(--pf-line)}
.pf-chapters a{font-size:11px;text-decoration:none;color:#aeb7c2;transition:color .2s}
.pf-chapters a:hover,.pf-chapters a[aria-current]{color:var(--pf-gold)}
.pf-case section[id]{scroll-margin-top:150px}
.pf-story{display:grid;grid-template-columns:1fr 1fr;gap:90px;padding:95px 0 65px}
.pf-story .pf-kicker{margin-bottom:28px}
.page-portfolio .pf-story h2{max-width:18ch}
.page-portfolio .pf-story h3{font-size:18px;margin:25px 0 12px}
.page-portfolio .pf-story p:not(.pf-kicker){font-size:15px}
.pf-quote{margin:20px 0 95px;padding:48px clamp(25px,7vw,100px);text-align:center;border-top:1px solid #cfa86740;border-bottom:1px solid #cfa86740;background:radial-gradient(ellipse at 50% 100%,#cfa8670b,transparent 70%)}
.pf-quote>span{font:70px/.7 Georgia,serif;color:var(--pf-gold);display:block;margin-bottom:18px}
.page-portfolio .pf-quote p{font:italic clamp(27px,3.4vw,48px)/1.25 Georgia,serif;color:#e5d0ae;letter-spacing:-.035em;margin:0;text-wrap:balance}
.pf-section-heading{display:flex;justify-content:space-between;align-items:start;gap:30px;margin-bottom:42px}
.pf-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-bottom:80px}
.pf-features article{border-top:1px solid var(--pf-line);padding-top:25px}
.pf-features .pf-mono{color:var(--pf-gold)}
.page-portfolio .pf-features h3{font-size:24px;margin:23px 0 15px;letter-spacing:-.03em}
.page-portfolio .pf-features p{font-size:14px;margin:0}
.pf-gallery-heading{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-bottom:28px}
.page-portfolio .pf-gallery-heading h3{font-size:clamp(26px,3vw,40px);margin:0}
.page-portfolio .pf-gallery-heading p{font-size:14px;margin:0}
.pf-gallery-item{margin:0 0 35px}
.pf-gallery-item a{display:block;position:relative;overflow:hidden;border-radius:5px;background:#151b23}
.pf-gallery-item img{display:block;width:100%;height:auto}
.pf-zoom{position:absolute;bottom:20px;right:20px;padding:10px 16px;background:#080b11e8;border:1px solid #ffffff40;border-radius:24px;color:white;font-size:11px}
.pf-gallery-item figcaption{padding-top:13px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:#a3acbb;line-height:1.7}
.pf-process{display:grid;grid-template-columns:1fr 1fr;gap:90px;margin:100px 0}
.pf-process .pf-kicker{margin-bottom:25px}
.page-portfolio .pf-process>div>p:last-child{margin:25px 0 0;font-size:14px;max-width:300px}
.pf-process ol{list-style:none;padding:0;margin:0}
.pf-process li{display:flex;gap:24px;margin:0;padding:26px 0;border-top:1px solid var(--pf-line)}
.pf-step-number{font-family:'IBM Plex Mono',monospace;color:var(--pf-gold);font-size:14px;padding-top:3px}
.page-portfolio .pf-process h3{font-size:23px;margin:0 0 12px}
.page-portfolio .pf-process li p{font-size:14px;margin:0}
.pf-result{padding:50px 0 65px;border-top:1px solid var(--pf-line);display:grid;grid-template-columns:1fr 2fr;gap:65px}
.page-portfolio .pf-result h2{margin-bottom:24px;max-width:24ch}
.page-portfolio .pf-result p:not(.pf-kicker){font-size:15px;max-width:70ch}
.pf-next{display:grid;grid-template-columns:1fr .55fr;gap:40px;align-items:center;text-decoration:none;padding:40px 0;border-top:1px solid var(--pf-line);border-bottom:1px solid var(--pf-line)}
.page-portfolio .pf-next h2{margin:23px 0 16px;font-size:clamp(32px,4vw,58px);transition:color .2s}
.pf-next:hover h2{color:var(--pf-gold)}
.pf-next h2 span{display:inline-block;color:var(--pf-gold);transition:transform .25s}
.pf-next:hover h2 span{transform:translate(5px,-5px)}
.page-portfolio .pf-next p{font-size:13px;margin:0}
.pf-next-image{overflow:hidden;border-radius:4px;aspect-ratio:1.8}
.pf-next-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pf-next:hover img{transform:scale(1.05)}
.pf-lightbox{position:fixed;inset:0;padding:60px 22px 22px;background:#0b1018;color:white;border:1px solid #ffffff30;border-radius:6px;max-width:95vw;max-height:95dvh;width:1500px;overflow:auto}
.pf-lightbox::backdrop{background:#030509ed;backdrop-filter:blur(12px)}
.pf-lightbox figure{margin:0;text-align:center}
.pf-lightbox img{max-width:100%;max-height:75dvh;width:auto;height:auto;object-fit:contain}
.pf-lightbox figcaption{font-size:12px;line-height:1.6;color:#b4bdca;margin-top:12px}
.pf-lightbox-close{position:absolute;top:12px;right:16px;padding:8px 13px;background:transparent;color:white;border:1px solid #ffffff50;border-radius:4px;font:inherit;font-size:12px;cursor:pointer}
.pf-lightbox-close span{font-size:18px;margin-left:10px}
html.pf-modal-open{overflow:hidden}
@keyframes pf-star-in{from{opacity:0;transform:rotate(-70deg) scale(.75)}to{opacity:1;transform:rotate(-12deg) scale(1)}}
@media(max-width:900px){
 .pf-projects{column-gap:22px}.pf-star{right:-3%;font-size:170px}.pf-case-heading,.pf-story,.pf-process{gap:38px}.pf-features{gap:22px}.pf-gallery-heading{gap:35px}.pf-philosophy{gap:20px 35px}
 .pf-project-meta>.pf-mono:last-child{display:none}.pf-filter-row{align-items:start;flex-direction:column}.pf-result{gap:35px;grid-template-columns:.7fr 1.5fr}
 .page-portfolio .pf-facts{grid-template-columns:1fr 1fr;gap:25px}.pf-facts>div:nth-child(3){border:0;padding:0}
}
@media(max-width:620px){
 .page-portfolio main{padding-top:22px}.page-portfolio .fil{margin-bottom:15px}.page-portfolio .pf-intro{padding:20px 0 38px}
 .pf-intro-top>.pf-mono{display:none}.page-portfolio .pf-intro h1{font-size:clamp(54px,12.8vw,78px);margin:34px 0 28px}.pf-star{font-size:clamp(52px,16vw,78px);right:0;top:70%}
 .pf-intro-bottom{align-items:start;flex-direction:column;gap:23px}.page-portfolio .pf-intro-bottom p{font-size:14px}.pf-desktop{display:none}.pf-scroll span{width:37px;height:37px}.pf-scroll{font-size:11px;gap:18px}
 .pf-selection-heading{padding:22px 0;align-items:start}.pf-selection-heading>.pf-mono{max-width:125px;font-size:8px;text-align:right}.pf-filter-row{gap:14px}.pf-filters{gap:7px}.pf-filters button{font-size:11px;padding:11px 12px;gap:9px}
 .pf-projects{grid-template-columns:1fr;gap:34px}.pf-project:first-child .pf-project-image,.pf-projects.pf-filtered .pf-project .pf-project-image{aspect-ratio:1.4}.pf-project-image{aspect-ratio:1.4}.pf-project:first-child .pf-project-copy{display:block}.pf-project-image img{object-position:center}.pf-image-label{top:12px;left:12px;font-size:8px;padding:7px 10px}.pf-open{width:37px;height:37px;font-size:20px;bottom:12px;right:12px}
 .pf-project-meta{margin:17px 0 10px}.pf-project-meta>.pf-mono{font-size:8px}.pf-project-bottom{padding:16px 0;align-items:start;flex-direction:column;gap:15px}.pf-project:not(:first-child) .pf-discover{display:inline}.pf-tags span{font-size:8px}.pf-saas .pf-project-image{padding:18px}.pf-projects.pf-filtered .pf-saas .pf-project-image img{width:100%}
 .pf-philosophy{grid-template-columns:1fr;gap:24px;margin:65px 0 40px;padding:32px 0}.pf-philosophy>.pf-kicker{margin:0}.page-portfolio .pf-philosophy h2{font-size:36px}.page-portfolio .appel{margin-top:40px;padding:30px 22px}.page-portfolio .appel h2{font-size:37px}.page-portfolio .appel .eyebrow{font-size:8px}.page-portfolio .appel p:not(.eyebrow){font-size:14px}
 .pf-back{margin:5px 0 30px}.pf-case-top{align-items:start;flex-direction:column;gap:14px}.page-portfolio .pf-case h1{font-size:clamp(48px,12vw,74px);margin:24px 0}.pf-case-heading{grid-template-columns:1fr;gap:20px;margin-bottom:28px}.page-portfolio .pf-case-heading h2{font-size:30px;max-width:25ch}.page-portfolio .pf-case-heading p{font-size:14px}.pf-link{font-size:12px}
 .pf-cover figcaption{padding:13px 12px;font-size:8px}.pf-cover figcaption>span:last-child{display:none}.pf-cover>img{min-height:245px;object-fit:cover}.pf-saas .pf-cover>img{min-height:0}.page-portfolio .pf-facts{padding:24px 0;gap:22px 16px}.pf-facts>div+div{padding-left:16px}.page-portfolio .pf-facts dd{font-size:11px}.page-portfolio .pf-facts dt{font-size:8px;margin-bottom:8px}
 .pf-chapters{gap:14px 20px;padding:20px 0}.pf-chapters a{font-size:10px}.pf-case section[id],.pf-selection{scroll-margin-top:180px}.pf-story{grid-template-columns:1fr;gap:26px;padding:55px 0 30px}.pf-story .pf-kicker{margin-bottom:20px}.page-portfolio .pf-story h2{font-size:34px}.pf-quote{margin:10px 0 55px;padding:35px 14px}.pf-quote>span{font-size:50px}.page-portfolio .pf-quote p{font-size:29px}
 .pf-section-heading{flex-direction:column;gap:20px;margin-bottom:28px}.page-portfolio .pf-section-heading h2{font-size:36px}.pf-features{grid-template-columns:1fr;gap:26px;margin-bottom:45px}.pf-features article{padding-top:20px}.page-portfolio .pf-features h3{margin-top:14px;font-size:25px}.pf-gallery-heading{grid-template-columns:1fr;gap:18px}.page-portfolio .pf-gallery-heading h3{font-size:30px}.pf-gallery-item figcaption{font-size:9px}.pf-zoom{bottom:10px;right:10px;padding:7px 11px;font-size:10px}
 .pf-process{grid-template-columns:1fr;gap:30px;margin:60px 0}.page-portfolio .pf-process h2{font-size:36px}.pf-process li{gap:18px;padding:23px 0}.pf-result{grid-template-columns:1fr;gap:24px;padding:30px 0 40px}.page-portfolio .pf-result h2{font-size:34px}.pf-next{grid-template-columns:1fr .55fr;gap:18px;padding:26px 0}.pf-next .pf-kicker{font-size:8px}.page-portfolio .pf-next h2{font-size:28px;margin:16px 0 10px}.pf-next-image{aspect-ratio:.85}.page-portfolio .pf-next p{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.page-portfolio{scroll-behavior:auto}.page-portfolio *,.page-portfolio *:before,.page-portfolio *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.pf-star{transform:rotate(-12deg)}}
@media print{.pf-filters,.pf-chapters,.pf-back,.pf-lightbox,.pf-zoom{display:none!important}.pf-project[hidden]{display:block!important}.pf-project,.pf-features article{break-inside:avoid}.pf-projects{display:block}.pf-project{margin-bottom:30px}}
