/* Sevania — portfolio à envoyer : index en grille éditoriale ou liste, pages projet, curseur, transitions entre pages. */
::view-transition-group(*){animation-duration:.65s;animation-timing-function:cubic-bezier(.7,0,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}
body.folio{background:var(--bg)}
.folio main{padding:0 var(--pad)}
.folio section{padding-left:0;padding-right:0}

/* Barre */
.fbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;padding:14px var(--pad);background:rgba(244,248,255,.82);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.fbar.is-scrolled{border-bottom-color:var(--line)}
.fbar__crumb{padding:7px 14px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:600;text-decoration:none;color:var(--ink-2)}
.fbar__crumb::before{content:"/";margin-right:8px;color:var(--muted);font-weight:400}
.fbar .switch{margin-left:auto}
@media (max-width:520px){.fbar__crumb{display:none}}

/* Curseur */
.cursor{position:fixed;left:0;top:0;z-index:90;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--blue);pointer-events:none;
  display:grid;place-items:center;transform:translate3d(-100px,-100px,0);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background-color .3s,opacity .3s}
.cursor__label{font:600 13px var(--body);color:#fff;opacity:0;transition:opacity .2s;white-space:nowrap}
.cursor.is-big{width:86px;height:86px;margin:-43px 0 0 -43px;background:rgba(26,100,214,.92)}
.cursor.is-big .cursor__label{opacity:1}
.cursor.is-hidden{opacity:0}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
@media (hover:hover) and (pointer:fine){.folio [data-cursor]{cursor:none}}

/* Accueil du portfolio */
.fhero{max-width:1400px;margin:0 auto;padding-top:clamp(40px,6vw,90px)!important;padding-bottom:clamp(30px,4vw,50px)!important}
.fhero__title{display:flex;align-items:flex-start;margin:0;font:600 clamp(78px,17.5vw,280px)/.82 var(--display);letter-spacing:-.065em;color:var(--ink)}
.fhero__word{display:inline-flex;overflow:hidden;padding-bottom:.06em}
.fhero__word span{display:inline-block;transform:translateY(105%);animation:up 1s var(--ease) forwards;animation-delay:calc(var(--d) * 45ms + 100ms)}
.fhero__word span:nth-child(n+6){color:var(--blue)}
.fhero__title sup{margin:.18em 0 0 .12em;font-size:.16em;letter-spacing:-.02em;color:var(--blue);font-weight:500}
@keyframes up{to{transform:none}}
.fhero__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 60px;margin-top:clamp(20px,3vw,36px)}
.fhero__lede{max-width:46ch;margin:0;font-size:clamp(17px,1.5vw,20px);color:var(--ink-2)}
.fhero__stats{display:flex;gap:clamp(22px,4vw,48px);list-style:none;margin:0;padding:0;color:var(--muted);font-size:14px}
.fhero__stats b{display:block;font:600 clamp(30px,3.2vw,44px)/1 var(--display);color:var(--ink);letter-spacing:-.03em}

/* Barre de filtres */
.ctrl{position:sticky;top:70px;z-index:30;max-width:1400px;margin:0 auto 26px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px;border-radius:99px;
  background:rgba(255,255,255,.86);border:1px solid var(--line);box-shadow:0 10px 30px -18px rgba(11,31,58,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ctrl__filters{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.ctrl__filters::-webkit-scrollbar{display:none}
.fchip{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:0 15px;border-radius:99px;font-size:14px;font-weight:600;color:var(--ink-2);transition:background-color .3s,color .3s}
.fchip sup{font-size:10px;color:var(--muted)}
.fchip:hover{background:var(--sky-2)}
.fchip[aria-pressed="true"]{background:var(--blue);color:#fff}
.fchip[aria-pressed="true"] sup{color:var(--sky)}
.fchip[data-f="apps"]{color:var(--ai)}
.fchip[data-f="apps"][aria-pressed="true"]{background:var(--ai-grad);color:#fff}
.ctrl__views{flex:none;display:flex;padding:3px;border-radius:99px;background:var(--bg-2)}
.ctrl__views button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border-radius:99px;font-size:13px;font-weight:600;color:var(--muted);transition:background-color .3s,color .3s}
.ctrl__views svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ctrl__views button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(11,31,58,.12)}
@media (max-width:700px){.ctrl{top:64px;border-radius:22px;flex-wrap:wrap}.ctrl__filters{width:100%}.ctrl__views{margin-left:auto}.ctrl__views span{display:none}}

/* Grille éditoriale */
.fgrid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px) clamp(16px,2vw,28px);align-items:start}
.fcard{grid-column:span var(--span,6);display:block;text-decoration:none;color:inherit}
.fcard[hidden]{display:none}
.fmedia{position:relative;display:block;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:var(--sky-2);box-shadow:0 1px 2px rgba(11,31,58,.06)}
.fmedia img,.fmedia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),opacity .45s}
.fmedia video{opacity:0}
.is-playing > video,.fmedia--hero video{opacity:1}
.fcard:hover .fmedia img,.fcard:hover .fmedia video{transform:scale(1.04)}
.fcard__meta{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:4px 14px;padding:14px 4px 0}
.fcard__n{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.fcard__name{font:600 clamp(20px,1.9vw,28px)/1.1 var(--display);letter-spacing:-.025em;transition:color .3s}
.fcard__type{grid-column:2;font-size:14px;color:var(--muted)}
.fcard__go{grid-row:1/span 2;grid-column:3;align-self:center;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;
  transition:background-color .3s,color .3s,transform .5s var(--ease)}
.fcard:hover .fcard__name{color:var(--blue)}
.fcard:hover .fcard__go{background:var(--blue);border-color:var(--blue);color:#fff;transform:rotate(45deg)}
.fcard[data-cat="apps"] .fmedia{box-shadow:0 0 0 1px #DFE2FB,0 24px 50px -30px rgba(91,91,246,.55)}
.fcard[data-cat="apps"]:hover .fcard__name{color:var(--ai)}
.fcard[data-cat="apps"]:hover .fcard__go{background:var(--ai);border-color:var(--ai)}
.js .fcard.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .fcard.reveal.in{opacity:1;transform:none}
@media (max-width:980px){.fcard{grid-column:span 6}}
@media (max-width:640px){.fcard{grid-column:span 12}}

/* Liste */
.flist{max-width:1400px;margin:0 auto;list-style:none;padding:0;border-top:1px solid var(--line)}
.flist li{border-bottom:1px solid var(--line)}
.flist li[hidden]{display:none}
.frow{display:grid;grid-template-columns:56px 1fr auto auto 44px;align-items:center;gap:20px;padding:20px 4px;text-decoration:none;transition:opacity .3s}
.frow__n{font-size:14px;color:var(--muted)}
.frow__name{font:600 clamp(32px,5.4vw,78px)/1 var(--display);letter-spacing:-.045em;transition:transform .55s var(--ease),color .3s}
.frow__type,.frow__cat{font-size:14px;color:var(--muted)}
.frow__go{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);transition:background-color .3s,color .3s,transform .5s var(--ease)}
@media (hover:hover){
  .flist:hover .frow{opacity:.35}
  .flist .frow:hover{opacity:1}
  .frow:hover .frow__name{transform:translateX(16px);color:var(--blue)}
  .frow:hover .frow__go{background:var(--blue);border-color:var(--blue);color:#fff;transform:rotate(45deg)}
}
@media (max-width:760px){.frow{grid-template-columns:1fr auto;gap:6px 14px}.frow__n,.frow__cat{display:none}.frow__type{grid-row:2}.frow__go{grid-row:1/span 2;grid-column:2}}
.fpeek{position:fixed;left:0;top:0;z-index:35;width:min(420px,32vw);aspect-ratio:16/10;border-radius:16px;overflow:hidden;pointer-events:none;opacity:0;
  transform:translate3d(-999px,0,0);box-shadow:0 40px 80px -30px rgba(11,31,58,.55);background:var(--sky-2);transition:opacity .3s}
.fpeek.on{opacity:1}
.fpeek video{width:100%;height:100%;object-fit:cover}
@media (hover:none),(max-width:760px){.fpeek{display:none}}

/* Page projet */
.crumbs{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 0}
.crumbs__back{font-weight:600;font-size:15px;text-decoration:none;color:var(--ink-2)}
.crumbs__back:hover{color:var(--blue)}
.crumbs__count{font:500 14px var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.crumbs__nav{display:flex;gap:8px}
.crumbs__nav a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);text-decoration:none;transition:background-color .3s,color .3s,border-color .3s}
.crumbs__nav a:hover{background:var(--c);border-color:var(--c);color:#fff}
.chero{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 40px;padding-top:clamp(30px,5vw,70px)!important;padding-bottom:clamp(30px,4vw,50px)!important}
.chero .kicker{grid-column:1/-1;margin:0;color:var(--c)}
.chero__title{grid-column:1/-1;margin:0;font:600 clamp(60px,12vw,190px)/.86 var(--display);letter-spacing:-.06em;animation:rise 1s var(--ease) both}
.chero__sub{margin:6px 0 0;font:500 clamp(20px,2.2vw,30px)/1.2 var(--display);color:var(--c);animation:rise 1s .1s var(--ease) both}
.chero__visit{grid-column:2;grid-row:3/span 2;align-self:end;animation:rise 1s .2s var(--ease) both}
.case .chero__visit{background:var(--c);box-shadow:0 14px 30px -14px var(--c)}
.cmeta{grid-column:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:22px 0 0;animation:rise 1s .15s var(--ease) both}
.cmeta div{padding-top:12px;border-top:1px solid var(--line)}
.cmeta dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cmeta dd{margin:4px 0 0;font-weight:600}
@keyframes rise{from{opacity:0;transform:translateY(30px)}}
@media (max-width:860px){.chero{grid-template-columns:1fr}.chero__visit{grid-column:1;grid-row:auto;justify-self:start;margin-top:10px}.cmeta{grid-template-columns:repeat(2,1fr)}}
.cmedia{max-width:1400px;margin:0 auto}
.cmedia .browser{border-radius:22px;box-shadow:0 50px 100px -50px rgba(11,31,58,.55)}
.fmedia--hero{border-radius:0}
.cbody{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:30px 60px;padding-top:clamp(70px,9vw,130px)!important;padding-bottom:clamp(50px,6vw,90px)!important}
.cbody__label{margin:0;font:600 14px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.cbody__lead{margin:0;font:500 clamp(24px,2.8vw,40px)/1.22 var(--display);letter-spacing:-.025em}
.cbody__note{margin:16px 0 0;font-size:14px;color:var(--muted)}
.cbody__cols{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;margin-top:clamp(36px,4vw,56px)}
.cbody__cols h3{margin:0 0 12px;font:600 13px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cbody__cols p{margin:0;font-size:17px;color:var(--ink-2)}
.inter{list-style:none;margin:0;padding:0}
.inter li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.inter li:first-child{padding-top:0}
.inter span{font:600 13px var(--display);color:var(--c);padding-top:3px}
@media (max-width:860px){.cbody{grid-template-columns:1fr}.cbody__cols{grid-template-columns:1fr;gap:28px}}

/* Galerie */
.cgal{max-width:1400px;margin:0 auto;display:grid;gap:clamp(16px,2vw,28px);padding-top:0!important}
.shot{margin:0;border-radius:20px;overflow:hidden;background:var(--sky-2);box-shadow:0 30px 70px -45px rgba(11,31,58,.6)}
.shot img{width:100%;height:auto;transform:scale(1.06);transition:transform 1.4s var(--ease)}
.shot.in img{transform:scale(1)}
.cgal__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.cmobile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;padding:clamp(28px,4vw,60px);border-radius:28px;
  background:radial-gradient(60% 80% at 80% 50%,color-mix(in srgb,var(--c) 18%,#fff),#fff 70%);border:1px solid var(--line)}
.cmobile__text{max-width:40ch}
.cmobile__text p,.cgal__text p{margin:14px 0 0;color:var(--muted)}
.cmobile .dev{width:clamp(200px,22vw,290px);filter:drop-shadow(0 40px 50px rgba(11,31,58,.28))}
@media (max-width:640px){.cgal__pair{grid-template-columns:1fr}.cmobile{grid-template-columns:1fr;justify-items:center;text-align:center}}
.cgal--app{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);align-items:center;gap:40px}
.live{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#1BC47D;box-shadow:0 0 0 4px rgba(27,196,125,.2);vertical-align:middle;animation:live 1.6s ease-in-out infinite}
.cgal__text .kicker{color:var(--c)}
.cstage{position:relative;min-height:clamp(420px,44vw,620px);border-radius:28px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(70% 70% at 70% 30%,color-mix(in srgb,var(--c) 22%,#fff),#fff 75%)}
.cstage .dev{position:absolute}
.cstage.rig--set .dev--macbook{left:4%;top:10%;width:80%}
.cstage.rig--set .dev--iphone{right:5%;bottom:5%;width:19%;filter:drop-shadow(0 30px 40px rgba(11,31,58,.3))}
.cstage.rig--duo .dev--iphone{top:8%;width:25%}
.cstage.rig--duo .dev--iphone:nth-of-type(1){left:21%;transform:rotate(-4deg)}
.cstage.rig--duo .dev--iphone:nth-of-type(2){left:53%;top:12%;transform:rotate(3deg)}
@media (max-width:860px){
  .cgal--app{grid-template-columns:1fr}
  .cstage{min-height:clamp(360px,90vw,560px)}
  .cstage.rig--set .dev--macbook{left:3%;top:14%;width:94%}
  .cstage.rig--set .dev--iphone{width:36%}
  .cstage.rig--duo .dev--iphone{width:42%}
  .cstage.rig--duo .dev--iphone:nth-of-type(1){left:5%}
  .cstage.rig--duo .dev--iphone:nth-of-type(2){left:52%}
}

/* Projet suivant */
.cnext{max-width:1400px;margin:clamp(70px,9vw,130px) auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto 1fr auto;gap:8px 50px;
  padding:clamp(24px,3vw,40px);border-radius:30px;background:#fff;border:1px solid var(--line);text-decoration:none;box-shadow:var(--shadow);transition:box-shadow .5s,transform .6s var(--ease)}
.cnext:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.cnext__label{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.cnext__label i{font-style:normal;display:inline-block;transition:transform .4s var(--ease)}
.cnext:hover .cnext__label i{transform:translateX(6px)}
.cnext__name{align-self:center;font:600 clamp(48px,7vw,110px)/.9 var(--display);letter-spacing:-.055em;transition:color .3s}
.cnext:hover .cnext__name{color:var(--blue)}
.cnext__type{color:var(--muted)}
.cnext__media{grid-column:2;grid-row:1/span 3}
.cnext:hover .cnext__media img{transform:scale(1.05)}
@media (max-width:760px){.cnext{grid-template-columns:1fr}.cnext__media{grid-column:1;grid-row:auto;order:-1}}

/* Appel final */
.fcta{padding:clamp(70px,9vw,130px) var(--pad) 0!important}
.fcta__card{max-width:1400px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(22px,4vw,56px);border-radius:36px;text-align:center;color:#fff;
  background:radial-gradient(600px 400px at 90% 0%,rgba(255,255,255,.25),transparent 60%),linear-gradient(135deg,var(--blue-2),var(--blue-d) 60%,#3B3BC4)}
.fcta__title{max-width:16ch;margin:0 auto;font:600 clamp(38px,5.6vw,80px)/.98 var(--display);letter-spacing:-.045em}
.fcta__lede{max-width:46ch;margin:18px auto 0;font-size:clamp(16px,1.5vw,19px);color:#DCE9FF}
.fcta .btn{margin-top:30px}
.fcta__or{margin:18px 0 0;font-size:14px;color:#DCE9FF}
.fcta__or a{color:#fff;font-weight:600}
.folio .foot{margin-top:clamp(50px,6vw,80px)}
@media (prefers-reduced-motion:reduce){
  .fhero__word span,.chero__title,.chero__sub,.cmeta,.chero__visit{animation:none;transform:none}
  .js .fcard.reveal{opacity:1;transform:none}
  .shot img{transform:none}
}
.fgrid[hidden],.flist[hidden]{display:none}

/* Bascule entre les deux portfolios */
.fswitch{display:flex;gap:2px;padding:3px;border-radius:99px;background:#fff;border:1px solid var(--line)}
.fswitch a{padding:7px 14px;border-radius:99px;font-size:14px;font-weight:600;text-decoration:none;color:var(--ink-2);transition:background-color .3s,color .3s}
.fswitch a:hover{color:var(--blue)}
.fswitch a[aria-current="page"]{background:var(--blue);color:#fff}
.folio--ia .fswitch a[aria-current="page"]{background:var(--ai-grad)}
@media (max-width:620px){.fswitch a{padding:7px 10px;font-size:13px}.fbar .btn--sm{display:none}}