/* ==========================================================================
   Systomap — page Portfolio
   Études de cas plein écran, galerie de captures, rythme alterné.
   ========================================================================== */

.sm-pf{
  --pf-ink:#08091C; --pf-ink2:#12142D; --pf-ink3:#20223F;
  --pf-rule:#2C2F4A; --pf-muted:#595C72; --pf-dim:#9B9DAE;
  --pf-line:#E3E4EB; --pf-paper:#F5F6FC; --pf-white:#FDFDFF;
  --pf-deep:#41409F; --pf-brand:#5E60CD; --pf-lift:#8A92FC; --pf-soft:#CAD1FF;
  --pf-e:cubic-bezier(.16,1,.3,1);
  font-family:inherit;
}
.sm-pf *,.sm-pf *::before,.sm-pf *::after{box-sizing:border-box}
.sm-pf__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- INTRO */
.sm-pf__intro{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--pf-ink);color:var(--pf-paper);
  padding:clamp(140px,17vh,220px) clamp(20px,5vw,72px) clamp(60px,7vh,96px);
}
.sm-pf__intro::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;z-index:0;
  background:radial-gradient(60% 60% at 26% 42%,rgba(65,64,159,.60),transparent 68%),
             radial-gradient(50% 50% at 82% 12%,rgba(94,96,205,.30),transparent 70%);
  filter:blur(30px);
}
.sm-pf__intro > *{position:relative;z-index:1}
.sm-pf__wrap{max-width:1500px;margin:0 auto;width:100%}

.sm-pf__kicker{
  display:flex;align-items:center;gap:12px;margin:0 0 24px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--pf-lift);
}
.sm-pf__kicker::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--pf-rule),transparent);max-width:280px}

.sm-pf__h1{
  margin:0 0 28px;font-size:clamp(2.6rem,7vw,6rem);line-height:.96;
  letter-spacing:-.042em;font-weight:700;color:var(--pf-white);
}
.sm-pf__h1 em{font-style:normal;color:var(--pf-lift)}

.sm-pf__lead{
  margin:0;max-width:62ch;font-size:clamp(1rem,1.15vw,1.15rem);
  line-height:1.66;color:var(--pf-dim);
}

.sm-pf__meta{
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,72px);
  margin-top:clamp(40px,5vh,64px);padding-top:26px;border-top:1px solid var(--pf-rule);
}
.sm-pf__meta div{display:flex;flex-direction:column;gap:6px}
.sm-pf__meta b{font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:700;letter-spacing:-.03em;color:var(--pf-white);line-height:1}
.sm-pf__meta span{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--pf-dim)}

/* ---------------------------------------------------------------- PROJETS */
.sm-case{
  position:relative;
  padding:clamp(72px,10vh,132px) clamp(20px,5vw,72px);
  border-bottom:1px solid var(--pf-line);
}
.sm-case--light{background:var(--pf-paper);color:var(--pf-ink2)}
.sm-case--dark{background:var(--pf-ink);color:var(--pf-paper);border-bottom-color:var(--pf-rule)}

.sm-case__grid{
  max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,4.5vw,80px);align-items:start;
}
.sm-case--flip .sm-case__grid{direction:rtl}
.sm-case--flip .sm-case__grid > *{direction:ltr}

/* --- colonne texte --- */
.sm-case__col{position:sticky;top:120px}
@media (max-width:1024px){.sm-case__col{position:static}}

.sm-case__num{
  display:block;font-size:clamp(3.2rem,6vw,5rem);line-height:1;font-weight:700;
  letter-spacing:-.05em;margin:0 0 8px;
  color:transparent;-webkit-text-stroke:1.3px var(--pf-brand);
  opacity:.55;
}
.sm-case--dark .sm-case__num{-webkit-text-stroke-color:var(--pf-lift);opacity:.45}

.sm-case__name{
  margin:0 0 6px;font-size:clamp(1.9rem,3.1vw,2.9rem);line-height:1.04;
  letter-spacing:-.035em;font-weight:700;
}
.sm-case--light .sm-case__name{color:var(--pf-ink)}
.sm-case--dark  .sm-case__name{color:var(--pf-white)}

.sm-case__tag{
  margin:0 0 20px;font-size:clamp(.98rem,1.2vw,1.1rem);font-weight:500;
  color:var(--pf-brand);
}
.sm-case--dark .sm-case__tag{color:var(--pf-lift)}

.sm-case__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.sm-case__chips li{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  padding:6px 12px;border-radius:99px;border:1px solid var(--pf-line);color:var(--pf-muted);
}
.sm-case--dark .sm-case__chips li{border-color:var(--pf-rule);color:var(--pf-dim)}
.sm-case__chips li.is-live{
  color:#1E7F5C;border-color:rgba(30,127,92,.34);
  display:flex;align-items:center;gap:7px;
}
.sm-case--dark .sm-case__chips li.is-live{color:#5FD3A6;border-color:rgba(95,211,166,.34)}
.sm-case__chips li.is-live::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  animation:sm-pf-pulse 2.6s var(--pf-e) infinite;
}
@keyframes sm-pf-pulse{0%{box-shadow:0 0 0 0 currentColor;opacity:1}70%,100%{box-shadow:0 0 0 7px transparent;opacity:.65}}

.sm-case__desc{
  margin:0 0 26px;max-width:52ch;font-size:clamp(.95rem,1.05vw,1.03rem);
  line-height:1.68;color:var(--pf-muted);
}
.sm-case--dark .sm-case__desc{color:var(--pf-dim)}

.sm-case__feats{margin:0 0 26px;padding:0;list-style:none;display:grid;gap:9px}
.sm-case__feats li{
  position:relative;padding-left:26px;font-size:.93rem;line-height:1.5;color:var(--pf-ink2);
}
.sm-case--dark .sm-case__feats li{color:var(--pf-soft)}
.sm-case__feats li::before{
  content:"";position:absolute;left:0;top:.42em;width:13px;height:8px;
  border-left:1.8px solid var(--pf-brand);border-bottom:1.8px solid var(--pf-brand);
  transform:rotate(-45deg);
}
.sm-case--dark .sm-case__feats li::before{border-color:var(--pf-lift)}

.sm-case__stack{border-top:1px solid var(--pf-line);padding-top:18px}
.sm-case--dark .sm-case__stack{border-top-color:var(--pf-rule)}
.sm-case__stack strong{
  display:block;font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--pf-dim);font-weight:600;margin-bottom:10px;
}
.sm-case__stack ul{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.sm-case__stack li{
  font-size:12px;font-weight:600;letter-spacing:.01em;padding:5px 11px;border-radius:7px;
  background:rgba(94,96,205,.09);color:var(--pf-brand);
}
.sm-case--dark .sm-case__stack li{background:rgba(138,146,252,.13);color:var(--pf-lift)}

/* --- galerie --- */
.sm-shot{
  position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--pf-line);background:var(--pf-white);
  box-shadow:0 40px 80px -44px rgba(16,17,39,.44);
}
.sm-case--dark .sm-shot{border-color:var(--pf-rule);background:var(--pf-ink2);
  box-shadow:0 46px 90px -46px rgba(0,0,0,.9)}

.sm-shot__bar{
  display:flex;align-items:center;gap:7px;
  padding:11px 14px;border-bottom:1px solid var(--pf-line);
  background:linear-gradient(180deg,rgba(94,96,205,.05),transparent);
}
.sm-case--dark .sm-shot__bar{border-bottom-color:var(--pf-rule);background:linear-gradient(180deg,rgba(138,146,252,.07),transparent)}
.sm-shot__bar i{width:9px;height:9px;border-radius:50%;background:var(--pf-line);flex:none}
.sm-case--dark .sm-shot__bar i{background:var(--pf-rule)}
.sm-shot__bar i:first-child{background:var(--pf-brand);opacity:.55}
.sm-shot__url{
  margin-left:10px;font-size:11px;letter-spacing:.04em;color:var(--pf-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.sm-shot__stage{position:relative;aspect-ratio:1600/783;background:var(--pf-paper)}
.sm-case--dark .sm-shot__stage{background:var(--pf-ink3)}
.sm-shot__stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transform:scale(1.012);
  transition:opacity .62s var(--pf-e),transform .9s var(--pf-e);
}
.sm-shot__stage img.is-active{opacity:1;transform:none}

.sm-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.sm-thumbs button{
  position:relative;flex:1 1 0;min-width:96px;max-width:190px;
  padding:0;border:1px solid var(--pf-line);background:none;border-radius:10px;
  overflow:hidden;cursor:pointer;line-height:0;
  transition:border-color .35s var(--pf-e),transform .45s var(--pf-e),box-shadow .45s var(--pf-e);
}
.sm-case--dark .sm-thumbs button{border-color:var(--pf-rule)}
.sm-thumbs button img{width:100%;height:auto;display:block;opacity:.62;transition:opacity .35s var(--pf-e)}
.sm-thumbs button:hover{transform:translateY(-3px)}
.sm-thumbs button:hover img{opacity:.9}
.sm-thumbs button[aria-selected="true"]{
  border-color:var(--pf-brand);
  box-shadow:0 0 0 2px rgba(94,96,205,.22);
}
.sm-case--dark .sm-thumbs button[aria-selected="true"]{
  border-color:var(--pf-lift);box-shadow:0 0 0 2px rgba(138,146,252,.26);
}
.sm-thumbs button[aria-selected="true"] img{opacity:1}
.sm-thumbs span{
  position:absolute;left:0;right:0;bottom:0;padding:5px 8px;
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  color:#fff;background:linear-gradient(180deg,transparent,rgba(8,9,28,.86));
  line-height:1.25;text-align:left;
}

/* --- aperçu conçu (projet sans capture) --- */
.sm-mock{padding:clamp(26px,3vw,44px);display:grid;gap:16px}
.sm-mock__row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;border-radius:12px;background:rgba(138,146,252,.07);
  border:1px solid var(--pf-rule);
}
.sm-mock__row b{font-size:.92rem;font-weight:600;color:var(--pf-paper)}
.sm-mock__row small{display:block;font-size:11px;color:var(--pf-dim);margin-top:3px}
.sm-mock__score{
  display:flex;align-items:baseline;gap:3px;font-weight:700;letter-spacing:-.03em;color:var(--pf-lift);
}
.sm-mock__score b{font-size:1.9rem;color:var(--pf-lift)}
.sm-mock__score i{font-style:normal;font-size:.8rem;color:var(--pf-dim)}
.sm-mock__bar{height:6px;border-radius:99px;background:var(--pf-ink3);overflow:hidden;margin-top:9px}
.sm-mock__bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pf-brand),var(--pf-lift));
  width:0;transition:width 1.5s var(--pf-e)}
.sm-mock.is-in .sm-mock__bar i{width:var(--w)}

/* ---------------------------------------------------------------- CHIFFRES */
.sm-pf__stats{
  background:var(--pf-ink);color:var(--pf-paper);
  padding:clamp(56px,8vh,96px) clamp(20px,5vw,72px);
}
.sm-pf__stats .sm-pf__wrap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(24px,3vw,52px);
}
.sm-pf__stat b{
  display:block;font-size:clamp(2rem,3.4vw,3rem);font-weight:700;
  letter-spacing:-.04em;line-height:1;color:var(--pf-lift);margin-bottom:9px;
}
.sm-pf__stat span{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--pf-dim)}

/* ---------------------------------------------------------------- APPEL */
.sm-pf__cta{
  background:var(--pf-paper);
  padding:clamp(64px,9vh,116px) clamp(20px,5vw,72px);
  text-align:center;
}
.sm-pf__cta h2{
  margin:0 0 14px;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.06;
  letter-spacing:-.035em;font-weight:700;color:var(--pf-ink);
}
.sm-pf__cta p{margin:0 auto 30px;max-width:52ch;color:var(--pf-muted);line-height:1.62}
.sm-pf__cta a{
  display:inline-flex;align-items:center;gap:10px;position:relative;overflow:hidden;
  padding:16px 32px;border-radius:99px;background:var(--pf-brand);color:#fff;
  font-weight:600;font-size:15px;text-decoration:none;
  transition:transform .5s var(--pf-e),box-shadow .5s var(--pf-e),background-color .3s var(--pf-e);
}
.sm-pf__cta a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--pf-e)}
.sm-pf__cta a:hover{background:var(--pf-deep);transform:translateY(-3px);
  box-shadow:0 16px 34px -14px rgba(94,96,205,.8)}
.sm-pf__cta a:hover svg{transform:translateX(4px)}

/* ---------------------------------------------------------------- RÉVÉLATION */
.sm-rev{opacity:0;transform:translateY(28px)}
.sm-rev.is-in{opacity:1;transform:none;
  transition:opacity .85s var(--pf-e) var(--d,0s),transform .95s var(--pf-e) var(--d,0s)}

/* ---------------------------------------------------------------- RESPONSIVE */
@media (max-width:1024px){
  .sm-case__grid{grid-template-columns:1fr;gap:34px}
  .sm-case--flip .sm-case__grid{direction:ltr}
}
@media (max-width:640px){
  .sm-thumbs button{min-width:72px}
  .sm-thumbs span{display:none}
  .sm-pf__meta{gap:20px}
}
@media (prefers-reduced-motion:reduce){
  .sm-pf *{animation:none!important;transition:none!important}
  .sm-rev{opacity:1;transform:none}
  .sm-mock__bar i{width:var(--w)}
}