/* =========================================================
   Page réalisations — showcase
========================================================= */

.portfolio-showcase{
  min-height:calc(100vh - var(--nav-h));
  padding-top:calc(var(--nav-h) + clamp(42px, 7vw, 88px));
  padding-bottom:clamp(70px, 9vw, 120px);
  overflow:hidden;
}

.portfolio-showcase__grid{
  display:grid;
  grid-template-columns:minmax(280px, .62fr) minmax(0, 1.38fr);
  gap:clamp(34px, 7vw, 88px);
  align-items:center;
  min-height:calc(100vh - var(--nav-h) - 80px);
}

.portfolio-showcase__intro{
  position:relative;
  top:auto;
  align-self:center;
}

.portfolio-stack-stage{
  position:relative;

  min-height:620px;

  display:flex;
  align-items:center;
  justify-content:center;

  perspective:1500px;
  isolation:isolate;
  outline:none;
  align-self:center;
}

.portfolio-showcase__intro .section__title{
  font-size:clamp(30px, 4vw, 50px);
}

.portfolio-controls{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;

  margin-top:30px;
}

.portfolio-control{
  min-width:42px;
  height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(88,241,211,.18);

  display:inline-grid;
  place-items:center;

  color:var(--text-strong);
  background:rgba(20,25,36,.42);

  font:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;

  transition:
    transform .18s ease,
    border-color .2s ease,
    background .2s ease,
    opacity .2s ease;
}

.portfolio-control:hover{
  transform:translateY(-1px);
  border-color:rgba(88,241,211,.34);
  background:rgba(20,25,36,.62);
}

.portfolio-counter{
  color:rgba(244,250,255,.82);
  font-size:12px;
  font-weight:750;
  letter-spacing:.14em;
}

.portfolio-dots{
  display:flex;
  gap:8px;
  margin-top:18px;
}

.portfolio-dots button{
  width:30px;
  height:4px;
  padding:0;
  border:0;
  border-radius:999px;

  background:rgba(88,241,211,.16);
  cursor:pointer;

  transition:
    width .2s ease,
    background .2s ease;
}

.portfolio-dots button.is-active{
  width:46px;
  background:var(--gradient-line);
}

/* =========================================================
   Stack d'écrans
========================================================= */

.portfolio-stack-stage::before{
  content:"";
  position:absolute;
  inset:4% -8% 2% 2%;
  z-index:-3;

  background:
    radial-gradient(580px 340px at 16% 22%, rgba(88,241,211,.08), transparent 66%),
    radial-gradient(680px 420px at 78% 40%, rgba(106,51,216,.14), transparent 68%),
    radial-gradient(540px 340px at 48% 82%, rgba(26,81,166,.12), transparent 70%);

  filter:blur(20px);
  opacity:.9;
}

.portfolio-stack-glow{
  position:absolute;
  z-index:-1;
  border-radius:999px;
  pointer-events:none;
}

/* Sécurité : masque l'ancien point vert si le span est encore dans le HTML */
.portfolio-stack-glow--one{
  display:none;
}

.portfolio-stack-glow--two{
  right:5%;
  bottom:10%;

  width:220px;
  height:220px;

  background:radial-gradient(circle, rgba(106,51,216,.13), transparent 68%);
  filter:blur(18px);
}

.portfolio-stack{
  position:relative;

  width:min(100%, 920px);
  height:min(680px, 76vh);
  min-height:580px;

  transform-style:preserve-3d;
  transform:translateY(-60px);
}

.portfolio-monitor{
  --stack-x:0px;
  --stack-y:0px;
  --stack-depth:0px;
  --stack-scale:1;
  --stack-rotate:0deg;
  --stack-order:10;
  --stack-opacity:1;
  --stack-blur:0px;

  --monitor-top-h:54px;
  --monitor-info-h:80px;
  --monitor-screen-pad:0px;
  --monitor-preview-ratio:16 / 9;

  position:absolute;
  left:50%;
  top:50%;
  z-index:var(--stack-order);

  width:min(92%, 800px);
  height:auto;

  color:inherit;
  text-decoration:none;

  opacity:var(--stack-opacity);
  filter:blur(var(--stack-blur));

  transform:
    translate(-50%, -50%)
    translate3d(var(--stack-x), var(--stack-y), var(--stack-depth))
    rotateZ(var(--stack-rotate))
    scale(var(--stack-scale));

  transform-origin:center;
  transform-style:preserve-3d;

  transition:
    transform 1.34s cubic-bezier(.18,.92,.18,1),
    opacity .82s ease,
    filter .82s ease;

  will-change:transform, opacity, filter;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.portfolio-stack.is-animating .portfolio-monitor:not(.is-stack-looping){
  transition:
    transform 1.38s cubic-bezier(.18,.92,.18,1),
    opacity .86s ease,
    filter .86s ease;
}

.portfolio-stack.is-settling .portfolio-monitor,
.portfolio-stack.is-settling .portfolio-monitor__frame{
  transition:none !important;
}

.portfolio-monitor__frame,
.portfolio-monitor__top,
.portfolio-monitor__info,
.monitor-site{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.portfolio-monitor__frame{
  transform:translateZ(0);
}

.portfolio-monitor.is-stack-looping{
  z-index:150 !important;
  pointer-events:none;

  animation-duration:1.5s;
  animation-timing-function:linear;
  animation-fill-mode:both;
}

.portfolio-monitor.is-stack-looping.is-stack-behind{
  z-index:1 !important;
}

.portfolio-monitor.is-stack-loop-prev.is-stack-looping{
  z-index:1 !important;
}

.portfolio-monitor.is-stack-loop-prev.is-stack-front{
  z-index:150 !important;
}

.portfolio-monitor.is-stack-loop-next{
  animation-name:portfolioStackOrbitNext;
}

.portfolio-monitor.is-stack-loop-prev{
  animation-name:portfolioStackOrbitPrev;
}

.portfolio-monitor.is-stack-looping .portfolio-monitor__frame{
  border-color:rgba(88,241,211,.38);

  box-shadow:
    0 44px 130px rgba(0,0,0,.48),
    0 0 52px rgba(88,241,211,.11),
    0 0 0 1px rgba(255,255,255,.05) inset;
}

@keyframes portfolioStackOrbitNext{
  0%{
    opacity:1;
    transform:translate(-50%, -50%)
      translate3d(var(--loop-start-x), var(--loop-start-y), var(--loop-start-depth))
      rotateZ(var(--loop-start-rotate))
      rotateY(0deg)
      scale(var(--loop-start-scale));
  }

  25%{
    opacity:.98;
    transform:translate(-50%, -50%)
      translate3d(
        calc(var(--loop-start-x) - var(--loop-clear-x) * .55),
        calc(var(--loop-start-y) + var(--loop-clear-y) * .28),
        var(--loop-front-depth)
      )
      rotateZ(calc(var(--loop-start-rotate) - 2deg))
      rotateY(46deg)
      scale(calc(var(--loop-start-scale) + .025));
  }

  50%{
    opacity:.88;
    transform:translate(-50%, -50%)
      translate3d(
        calc((var(--loop-start-x) + var(--loop-end-x)) / 2 - var(--loop-clear-x) * .92),
        calc((var(--loop-start-y) + var(--loop-end-y)) / 2 + var(--loop-clear-y) * .78),
        var(--loop-side-depth)
      )
      rotateZ(calc((var(--loop-start-rotate) + var(--loop-end-rotate)) / 2 - 4deg))
      rotateY(64deg)
      scale(calc((var(--loop-start-scale) + var(--loop-end-scale)) / 2 + .02));
  }

  75%{
    opacity:var(--loop-end-opacity);
    transform:translate(-50%, -50%)
      translate3d(
        calc(var(--loop-end-x) - var(--loop-clear-x) * .50),
        calc(var(--loop-end-y) + var(--loop-clear-y) * .28),
        calc(var(--loop-end-depth) - 20px)
      )
      rotateZ(calc(var(--loop-end-rotate) - 2deg))
      rotateY(42deg)
      scale(calc(var(--loop-end-scale) + .01));
  }

  100%{
    opacity:var(--loop-end-opacity);
    transform:translate(-50%, -50%)
      translate3d(var(--loop-end-x), var(--loop-end-y), var(--loop-end-depth))
      rotateZ(var(--loop-end-rotate))
      rotateY(0deg)
      scale(var(--loop-end-scale));
  }
}

@keyframes portfolioStackOrbitPrev{
  0%{
    opacity:var(--loop-start-opacity);
    transform:translate(-50%, -50%)
      translate3d(var(--loop-start-x), var(--loop-start-y), var(--loop-start-depth))
      rotateZ(var(--loop-start-rotate))
      rotateY(0deg)
      scale(var(--loop-start-scale));
  }

  25%{
    opacity:.78;
    transform:translate(-50%, -50%)
      translate3d(
        calc(var(--loop-start-x) - var(--loop-clear-x) * .50),
        calc(var(--loop-start-y) + var(--loop-clear-y) * .28),
        calc(var(--loop-start-depth) - 20px)
      )
      rotateZ(calc(var(--loop-start-rotate) - 2deg))
      rotateY(-42deg)
      scale(calc(var(--loop-start-scale) + .01));
  }

  50%{
    opacity:.88;
    transform:translate(-50%, -50%)
      translate3d(
        calc((var(--loop-start-x) + var(--loop-end-x)) / 2 - var(--loop-clear-x) * .92),
        calc((var(--loop-start-y) + var(--loop-end-y)) / 2 + var(--loop-clear-y) * .78),
        var(--loop-side-depth)
      )
      rotateZ(calc((var(--loop-start-rotate) + var(--loop-end-rotate)) / 2 - 4deg))
      rotateY(-64deg)
      scale(calc((var(--loop-start-scale) + var(--loop-end-scale)) / 2 + .02));
  }

  75%{
    opacity:.98;
    transform:translate(-50%, -50%)
      translate3d(
        calc(var(--loop-end-x) - var(--loop-clear-x) * .55),
        calc(var(--loop-end-y) + var(--loop-clear-y) * .28),
        var(--loop-front-depth)
      )
      rotateZ(calc(var(--loop-end-rotate) - 2deg))
      rotateY(-46deg)
      scale(calc(var(--loop-end-scale) + .025));
  }

  100%{
    opacity:1;
    transform:translate(-50%, -50%)
      translate3d(var(--loop-end-x), var(--loop-end-y), var(--loop-end-depth))
      rotateZ(var(--loop-end-rotate))
      rotateY(0deg)
      scale(var(--loop-end-scale));
  }
}

/* =========================================================
   Écran / frame
========================================================= */

.portfolio-monitor__frame{
  position:relative;

  height:auto;
  border-radius:28px;
  border:1px solid rgba(88,241,211,.16);

  display:grid;
  grid-template-rows:
    var(--monitor-top-h)
    auto
    var(--monitor-info-h);

  background:
    radial-gradient(680px 280px at 20% 0%, rgba(88,241,211,.08), transparent 60%),
    radial-gradient(620px 320px at 96% 10%, rgba(106,51,216,.12), transparent 64%),
    linear-gradient(180deg, rgba(20,25,36,.94), rgba(11,17,30,.96));

  box-shadow:
    0 34px 100px rgba(0,0,0,.36),
    0 0 0 1px rgba(255,255,255,.025) inset;

  overflow:hidden;

  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}

.portfolio-monitor.is-active .portfolio-monitor__frame,
.portfolio-monitor:hover .portfolio-monitor__frame{
  border-color:rgba(88,241,211,.36);

  box-shadow:
    0 38px 120px rgba(0,0,0,.44),
    0 0 42px rgba(88,241,211,.08),
    0 0 0 1px rgba(255,255,255,.04) inset;
}

.portfolio-monitor__frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;

  background:
    linear-gradient(rgba(88,241,211,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88,241,211,.022) 1px, transparent 1px);
  background-size:42px 42px;

  opacity:.28;
  pointer-events:none;
}

.portfolio-monitor__top{
  position:relative;
  z-index:3;

  height:var(--monitor-top-h);
  padding:0 16px;
  border-bottom:1px solid rgba(88,241,211,.09);

  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:13px;

  background:rgba(11,17,30,.58);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.portfolio-monitor__dots{
  display:flex;
  gap:7px;
}

.portfolio-monitor__dots i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(218,231,242,.28);
}

.portfolio-monitor__dots i:nth-child(2){
  background:rgba(26,81,166,.78);
}

.portfolio-monitor__dots i:nth-child(3){
  background:rgba(88,241,211,.72);
}

.portfolio-monitor__top strong{
  min-width:0;

  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(88,241,211,.11);

  color:rgba(244,250,255,.72);
  background:rgba(244,250,255,.035);

  font-size:12px;
  font-weight:600;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.portfolio-monitor__top em{
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(88,241,211,.14);

  color:rgba(88,241,211,.88);
  background:rgba(88,241,211,.045);

  font-size:10px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.portfolio-monitor__screen{
  position:relative;
  z-index:2;

  min-height:0;
  padding:0;

  overflow:hidden;
}

.portfolio-monitor__preview{
  position:relative;

  width:100%;
  aspect-ratio:var(--monitor-preview-ratio);

  border:0;
  border-radius:0;

  background:rgba(11,17,30,.58);
  overflow:hidden;
}

.portfolio-monitor__preview::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    linear-gradient(to bottom, rgba(8,12,20,.03), transparent 16%, transparent 84%, rgba(8,12,20,.14));

  opacity:.42;
}

.portfolio-monitor__preview img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:top center;

  transform:scale(1.001);
  transition:transform .45s ease;
}

.portfolio-monitor.is-active .portfolio-monitor__preview img,
.portfolio-monitor:hover .portfolio-monitor__preview img{
  transform:scale(1.012);
}

/* =========================================================
   Mini site dans l'écran
========================================================= */

.monitor-site{
  position:relative;

  height:100%;
  border-radius:22px;
  border:1px solid rgba(88,241,211,.10);

  background:
    radial-gradient(440px 260px at 78% 28%, rgba(88,241,211,.10), transparent 64%),
    radial-gradient(420px 260px at 94% 92%, rgba(106,51,216,.12), transparent 66%),
    rgba(11,17,30,.58);

  overflow:hidden;
}

.monitor-site::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(rgba(244,250,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,250,255,.021) 1px, transparent 1px);
  background-size:28px 28px;

  mask-image:radial-gradient(circle at 60% 45%, #000, transparent 82%);
  opacity:.54;
  pointer-events:none;
}

.monitor-site__nav{
  position:relative;
  z-index:2;

  height:42px;
  padding:0 16px;

  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;

  color:rgba(218,231,242,.54);
  font-size:11px;
  font-weight:700;
}

.monitor-site__nav strong{
  margin-right:auto;

  color:rgba(244,250,255,.92);
  font-size:14px;
  letter-spacing:-.025em;
}

.monitor-site__nav strong::before{
  content:"";
  display:inline-block;

  width:7px;
  height:7px;
  margin-right:7px;
  border-radius:50%;

  background:var(--gradient-main);
  box-shadow:0 0 14px rgba(88,241,211,.28);
}

.monitor-site__hero{
  position:relative;
  z-index:2;

  height:calc(100% - 106px);
  padding:20px 22px 10px;

  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(160px, .78fr);
  gap:22px;
  align-items:center;
}

.monitor-site__copy{
  min-width:0;
}

.monitor-site__kicker{
  display:inline-flex;

  margin-bottom:12px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(88,241,211,.16);

  color:rgba(88,241,211,.90);
  background:rgba(88,241,211,.045);

  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.monitor-site__copy h3{
  margin:0;
  max-width:420px;

  color:var(--text-strong);
  font-size:clamp(24px, 2.7vw, 40px);
  font-weight:680;
  line-height:1.02;
  letter-spacing:-.065em;
}

.monitor-site__copy p{
  margin:12px 0 0;
  max-width:340px;

  color:rgba(218,231,242,.64);
  font-size:12px;
  line-height:1.55;
}

.monitor-site__actions{
  display:flex;
  gap:10px;
  align-items:center;

  margin-top:18px;
}

.monitor-site__actions span,
.monitor-site__actions small{
  display:block;
  border-radius:999px;
}

.monitor-site__actions span{
  width:112px;
  height:30px;
  background:var(--gradient-main);
}

.monitor-site__actions small{
  width:74px;
  height:9px;
  background:rgba(244,250,255,.16);
}

.monitor-site__visual{
  position:relative;

  min-height:190px;
  border-radius:26px;
  border:1px solid rgba(88,241,211,.13);

  background:
    radial-gradient(170px 130px at 38% 28%, rgba(88,241,211,.16), transparent 64%),
    radial-gradient(220px 160px at 76% 78%, rgba(106,51,216,.22), transparent 66%),
    rgba(20,25,36,.66);

  overflow:hidden;
}

.monitor-site__visual::before{
  content:"";
  position:absolute;
  inset:16px;

  border-radius:20px;
  border:1px solid rgba(244,250,255,.07);

  background:
    linear-gradient(rgba(244,250,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,250,255,.03) 1px, transparent 1px);
  background-size:22px 22px;
}

.monitor-site__visual i{
  position:absolute;
  left:50%;
  top:50%;

  width:42%;
  aspect-ratio:1;
  border-radius:34% 66% 48% 52% / 45% 36% 64% 55%;

  background:linear-gradient(135deg, rgba(88,241,211,.62), rgba(26,81,166,.76), rgba(106,51,216,.82));

  transform:translate(-50%, -50%);
}

.monitor-site__visual b{
  position:absolute;
  right:18px;
  top:18px;

  width:92px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(88,241,211,.13);

  background:rgba(11,17,30,.62);
}

.monitor-site__cards{
  position:relative;
  z-index:2;

  height:64px;
  padding:0 22px 18px;

  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.monitor-site__cards span{
  border-radius:16px;
  border:1px solid rgba(88,241,211,.10);

  background:
    radial-gradient(160px 80px at 0% 0%, rgba(88,241,211,.055), transparent 62%),
    rgba(244,250,255,.035);
}

.monitor-site--app{
  background:
    radial-gradient(440px 260px at 74% 28%, rgba(26,81,166,.13), transparent 64%),
    radial-gradient(420px 260px at 94% 92%, rgba(88,241,211,.10), transparent 66%),
    rgba(11,17,30,.58);
}

.monitor-site--landing{
  background:
    radial-gradient(440px 260px at 74% 28%, rgba(106,51,216,.16), transparent 64%),
    radial-gradient(420px 260px at 94% 92%, rgba(88,241,211,.09), transparent 66%),
    rgba(11,17,30,.58);
}

.monitor-site--custom{
  background:
    radial-gradient(440px 260px at 74% 28%, rgba(88,241,211,.11), transparent 64%),
    radial-gradient(420px 260px at 94% 92%, rgba(26,81,166,.15), transparent 66%),
    rgba(11,17,30,.58);
}

/* =========================================================
   Infos sous l'écran
========================================================= */

.portfolio-monitor__info{
  position:relative;
  z-index:3;

  height:var(--monitor-info-h);
  padding:0 24px 12px;

  display:flex;
  align-items:flex-end;
  gap:14px;
}

.portfolio-monitor__info > span{
  margin-bottom:7px;

  color:var(--accent);
  font-size:13px;
  font-weight:800;
  letter-spacing:.10em;
}

.portfolio-monitor__info h3{
  margin:0;

  color:var(--text-strong);
  font-family:var(--font-title);
  font-size:clamp(21px, 2.3vw, 30px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.05em;
}

.portfolio-monitor__info p{
  margin:6px 0 0;

  color:rgba(218,231,242,.62);
  font-size:13px;
  font-weight:650;
}

.portfolio-monitor::after{
  content:"Ouvrir le site";
  position:absolute;
  right:24px;
  bottom:24px;
  z-index:5;

  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(88,241,211,.18);

  color:rgba(244,250,255,.82);
  background:rgba(11,17,30,.70);

  font-size:11px;
  font-weight:750;

  opacity:0;
  transform:translateY(6px);

  transition:
    opacity .2s ease,
    transform .2s ease;
}

.portfolio-monitor.is-active::after,
.portfolio-monitor:hover::after{
  opacity:1;
  transform:translateY(0);
}

.portfolio-monitor__stand{
  position:absolute;
  left:50%;
  bottom:-46px;
  z-index:-1;

  width:36%;
  height:46px;

  transform:translateX(-50%);
  opacity:.34;

  pointer-events:none;
}

.portfolio-monitor__stand::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;

  width:28%;
  height:34px;
  border-radius:0 0 16px 16px;

  background:linear-gradient(180deg, rgba(88,241,211,.14), rgba(88,241,211,.035));
  transform:translateX(-50%);
}

.portfolio-monitor__stand::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height:14px;
  border-radius:999px;

  background:linear-gradient(90deg, transparent, rgba(88,241,211,.16), transparent);
}

.portfolio-monitor.is-active .portfolio-monitor__stand{
  opacity:.62;
}

/* =========================================================
   Responsive
========================================================= */

@media(max-width: 1100px){
  .portfolio-showcase{
    padding-top:calc(var(--nav-h) + 42px);
  }

  .portfolio-showcase__grid{
    grid-template-columns:1fr;
  }

  .portfolio-showcase__intro{
    position:relative;
    top:auto;
  }

  .portfolio-stack-stage{
    margin-top:34px;
  }
}

@media (max-width: 760px){
  .portfolio-showcase{
    padding-top:calc(var(--nav-h) + 34px);
  }

  .portfolio-controls{
    margin-top:24px;
  }

  .portfolio-stack-stage{
    min-height:610px;
  }

  .portfolio-stack{
    width:100%;
    height:560px;
    min-height:560px;
  }

  .portfolio-monitor{
    width:91%;
    height:430px;
  }

  .portfolio-monitor__frame{
    border-radius:22px;
  }

  .portfolio-monitor__top{
    height:48px;
    padding-inline:12px;
  }

  .portfolio-monitor__top em{
    display:none;
  }

  .monitor-site{
    border-radius:18px;
  }

  .monitor-site__nav{
    height:38px;
    padding-inline:12px;
    gap:10px;
  }

  .monitor-site__nav span:nth-of-type(2){
    display:none;
  }

  .monitor-site__hero{
    height:calc(100% - 88px);
    grid-template-columns:1fr;
    gap:12px;
    padding:14px;
  }

  .monitor-site__copy h3{
    font-size:clamp(24px, 8vw, 34px);
  }

  .monitor-site__copy p{
    display:none;
  }

  .monitor-site__visual{
    min-height:128px;
  }

  .monitor-site__cards{
    height:50px;
    padding:0 14px 14px;
    gap:7px;
  }

  .portfolio-monitor__info{
    height:74px;
    padding:0 18px 18px;
  }

  .portfolio-monitor__info h3{
    font-size:22px;
  }

  .portfolio-monitor::after{
    right:18px;
    bottom:18px;
  }

  .portfolio-monitor__stand{
    bottom:-38px;
    height:38px;
  }
}

@media (prefers-reduced-motion: reduce){
  .portfolio-monitor{
    transition:none !important;
  }
}


@media (max-width: 760px){
  .portfolio-monitor{
    width:91%;

    --monitor-top-h:48px;
    --monitor-info-h:74px;
    --monitor-screen-pad:0px;
    --monitor-preview-ratio:4 / 3;
  }

  .portfolio-monitor__frame{
    border-radius:22px;
  }

  .portfolio-monitor__top{
    height:var(--monitor-top-h);
    padding-inline:12px;
  }

  .portfolio-monitor__top em{
    display:none;
  }

  .portfolio-monitor__preview{
    border-radius:0px;
  }

  .portfolio-monitor__info{
    height:var(--monitor-info-h);
    padding:0 18px 18px;
  }

  .portfolio-monitor__info h3{
    font-size:22px;
  }

  .portfolio-monitor::after{
    right:18px;
    bottom:18px;
  }

  .portfolio-monitor__stand{
    bottom:-38px;
    height:38px;
  }
}

.portfolio-monitor__stand{
  display:none !important;
}



/* =========================================================
   Réalisations mobile — correction nav sous les frames
   + frame smartphone plus propre
========================================================= */

@media (max-width: 760px){

  .portfolio-showcase{
    padding-top:calc(var(--nav-h) + 34px);
    padding-bottom:76px;
  }

  .portfolio-showcase__grid{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;

    min-height:auto;
  }

  /*
    On garde le HTML actuel, mais on sort visuellement les enfants
    de .portfolio-showcase__intro pour pouvoir placer :
    titre → texte → frames → flèches → dots
  */
  .portfolio-showcase__intro{
    display:contents;
  }

  .portfolio-showcase__intro .eyebrow{
    order:1;
    text-align:center;
    margin-inline:auto;
  }

  .portfolio-showcase__intro .section__title{
    order:2;

    max-width:13ch;
    margin-inline:auto;

    text-align:center;
    font-size:clamp(28px, 8vw, 38px);
  }

  .portfolio-showcase__intro .section__desc{
    order:3;

    max-width:34ch;
    margin-inline:auto;

    text-align:center;
  }

  .portfolio-stack-stage{
    order:4;

    min-height:565px;
    margin-top:28px;

    display:flex;
    align-items:center;
    justify-content:center;
  }

  .portfolio-stack{
    width:100%;
    height:520px;
    min-height:520px;

    transform:translateY(-4px);
  }

  /*
    Les contrôles restent dans le HTML de l’intro,
    mais ils passent réellement sous la frame.
  */
  .portfolio-showcase__intro .portfolio-controls{
    order:5;

    position:relative;
    left:auto;
    bottom:auto;
    z-index:30;

    width:100%;
    margin:10px 0 0;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    transform:none;
  }

  .portfolio-showcase__intro .portfolio-dots{
    order:6;

    position:relative;
    left:auto;
    bottom:auto;
    z-index:30;

    margin:14px 0 0;

    display:flex;
    justify-content:center;
    gap:8px;

    transform:none;
  }

  .portfolio-control{
    min-width:40px;
    height:40px;
    padding:0 13px;
  }

  .portfolio-counter{
    font-size:11px;
  }

  .portfolio-dots button{
    width:24px;
    height:4px;
  }

  .portfolio-dots button.is-active{
    width:38px;
  }

  /* =========================
     Frame smartphone mobile
  ========================= */

  .portfolio-monitor{
    width:min(74vw, 245px);
    height:auto;

    --monitor-top-h:54px;
    --monitor-info-h:72px;
    --monitor-screen-pad:0px;
    --monitor-preview-ratio:9 / 18.8;
  }

  .portfolio-monitor__frame{
    position:relative;

    display:grid;
    grid-template-rows:
      var(--monitor-top-h)
      auto
      var(--monitor-info-h);

    padding:8px;
    border-radius:36px;
    border:1px solid rgba(88,241,211,.18);

    background:
      radial-gradient(220px 140px at 28% 0%, rgba(88,241,211,.12), transparent 62%),
      radial-gradient(260px 180px at 92% 12%, rgba(106,51,216,.18), transparent 66%),
      linear-gradient(180deg, rgba(20,25,36,.96), rgba(7,11,20,.98));

    box-shadow:
      0 28px 82px rgba(0,0,0,.42),
      0 0 0 1px rgba(255,255,255,.04) inset;

    overflow:hidden;
  }

  .portfolio-monitor.is-active .portfolio-monitor__frame,
  .portfolio-monitor:hover .portfolio-monitor__frame{
    border-color:rgba(88,241,211,.38);

    box-shadow:
      0 34px 96px rgba(0,0,0,.48),
      0 0 36px rgba(88,241,211,.10),
      0 0 0 1px rgba(255,255,255,.055) inset;
  }

  /*
    Reflet subtil sur le téléphone.
    On garde le ::after seulement pour la lumière,
    et on évite qu’il gêne l’URL.
  */
  .portfolio-monitor__frame::after{
    content:"";
    position:absolute;
    inset:1px;
    z-index:2;

    border-radius:inherit;

    background:
      linear-gradient(
        115deg,
        rgba(255,255,255,.10),
        transparent 24%,
        transparent 74%,
        rgba(88,241,211,.045)
      );

    opacity:.28;
    pointer-events:none;
  }

  .portfolio-monitor__top{
    position:relative;
    z-index:6;

    height:var(--monitor-top-h);
    padding:8px 9px 7px;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    border-bottom:0;
    background:transparent;

    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .portfolio-monitor__dots,
  .portfolio-monitor__top em{
    display:none;
  }

  /*
    Nouvelle barre URL mobile.
  */
  .portfolio-monitor__top strong{
    position:relative;

    width:100%;
    min-width:0;
    max-width:100%;

    height:30px;
    padding:0 10px 0 24px;
    border-radius:999px;
    border:1px solid rgba(88,241,211,.12);

    display:flex;
    align-items:center;
    justify-content:center;

    color:rgba(244,250,255,.66);
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
      rgba(3,7,14,.72);

    box-shadow:
      0 8px 20px rgba(0,0,0,.22),
      0 0 0 1px rgba(255,255,255,.025) inset;

    font-size:9.2px;
    font-weight:700;
    line-height:1;
    letter-spacing:-.01em;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .portfolio-monitor__top strong::before{
    content:"";
    position:absolute;
    left:10px;
    top:50%;

    width:7px;
    height:7px;
    border-radius:50%;

    background:rgba(88,241,211,.86);
    box-shadow:0 0 10px rgba(88,241,211,.24);

    transform:translateY(-50%);
  }

  .portfolio-monitor__screen{
    position:relative;
    z-index:4;

    padding:0;
    border-radius:27px;
    border:1px solid rgba(88,241,211,.12);

    background:rgba(3,7,14,.88);
    overflow:hidden;
  }

  .portfolio-monitor__preview{
    width:100%;
    aspect-ratio:var(--monitor-preview-ratio);

    border-radius:0;
    background:rgba(11,17,30,.80);
    overflow:hidden;
  }

  .portfolio-monitor__preview picture{
    display:block;
    width:100%;
    height:100%;
  }

  .portfolio-monitor__preview img{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:top center;

    transform:scale(1.001);
  }

  .portfolio-monitor.is-active .portfolio-monitor__preview img,
  .portfolio-monitor:hover .portfolio-monitor__preview img{
    transform:scale(1.014);
  }

  .portfolio-monitor__info{
    position:relative;
    z-index:5;

    height:var(--monitor-info-h);
    padding:11px 8px 8px;

    display:flex;
    align-items:flex-start;
    justify-content:center;

    text-align:center;
  }

  .portfolio-monitor__info::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:11px;

    width:64px;
    height:4px;
    border-radius:999px;

    background:rgba(244,250,255,.20);
    transform:translateX(-50%);
  }

  .portfolio-monitor__info h3{
    margin:0;

    font-size:18px;
    line-height:1.05;
    letter-spacing:-.05em;
  }

  .portfolio-monitor__info p{
    margin:5px 0 0;

    font-size:10.5px;
    font-weight:650;
  }

  .portfolio-monitor::after,
  .portfolio-monitor__stand{
    display:none !important;
  }
}

@media (max-width: 420px){
  .portfolio-stack-stage{
    min-height:535px;
    margin-top:24px;
  }

  .portfolio-stack{
    height:492px;
    min-height:492px;
  }

  .portfolio-monitor{
    width:min(76vw, 228px);
  }

  .portfolio-showcase__intro .portfolio-controls{
    margin-top:6px;
  }
}

/* Réalisations mobile — descendre les flèches sous les cards */

@media (max-width: 760px){
  .portfolio-showcase__intro .portfolio-controls{
    margin-top:55px;
  }

  .portfolio-showcase__intro .portfolio-dots{
    margin-top:14px;
  }
}

@media (max-width: 420px){
  .portfolio-showcase__intro .portfolio-controls{
    margin-top:55px;
  }
}

/* Réalisations mobile — réduire la hauteur des frames sans réduire leur largeur */

@media (max-width: 760px){
  .portfolio-stack-stage{
    min-height:500px;
  }

  .portfolio-stack{
    height:455px;
    min-height:455px;
  }

  .portfolio-monitor{
    width:min(74vw, 245px); /* on garde la largeur */
    --monitor-preview-ratio:9 / 16.4; /* avant 9 / 18.8 */
    --monitor-top-h:50px;
    --monitor-info-h:66px;
  }

  .portfolio-monitor__info{
    padding-top:9px;
  }
}

@media (max-width: 420px){
  .portfolio-stack-stage{
    min-height:478px;
  }

  .portfolio-stack{
    height:438px;
    min-height:438px;
  }

  .portfolio-monitor{
    width:min(76vw, 228px); /* on garde la largeur petit mobile */
    --monitor-preview-ratio:9 / 16.2;
    --monitor-top-h:48px;
    --monitor-info-h:64px;
  }
}

/* Réalisations mobile — image sans angles arrondis */

@media (max-width: 760px){
  .portfolio-monitor__screen{
    border-radius:0;
  }

  .portfolio-monitor__preview,
  .portfolio-monitor__preview picture,
  .portfolio-monitor__preview img{
    border-radius:0;
  }
}








/* CSS Page temporaire - en développement */


.under-construction__logo{
  width:min(300px, 70vw);
  height:auto;
  max-width:none;

  display:block;
  object-fit:contain;

  margin-left:-35px;
}

/* =========================================================
   Mobile — version centrée
========================================================= */

@media (max-width: 900px){
  .under-construction{
    min-height:auto;
    padding:52px 0 64px;
  }

  .under-construction__wrap{
    width:min(100% - 40px, 620px);
  }

  .under-construction__panel{
    text-align:center;
  }

  .under-construction__badge{
    --logo-w:min(300px, 82vw);
    --logo-shift:0px;

    width:max-content;
    max-width:100%;
    margin:0 auto 8px;

    align-items:center;
    text-align:center;
    gap:10px;
  }

  .under-construction__badge img{
    width:var(--logo-w);
    margin-left:0;
    margin-inline:auto;
  }

  .under-construction__badge span{
    font-size:19px;
    text-align:center;
  }

  .under-construction .eyebrow{
    margin:0 auto 30px;

    font-size:11px;
    letter-spacing:.20em;
    text-align:center;
  }

  .under-construction__title{
    max-width:11.5ch;
    margin-inline:auto;

    font-size:clamp(36px, 10.6vw, 54px);
    line-height:1;
    letter-spacing:-.07em;
    text-align:center;
  }

  .under-construction__text{
    max-width:34ch;
    margin:24px auto 0;

    font-size:16px;
    line-height:1.68;
    text-align:center;
  }

  .under-construction__actions{
    width:100%;
    max-width:360px;
    margin:26px auto 0;

    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .under-construction__actions .btn{
    width:100%;
    min-height:52px;

    font-size:14px;
  }
}

/* =========================================================
   Petits mobiles
========================================================= */

@media (max-width: 420px){
  .under-construction__wrap{
    width:min(100% - 32px, 620px);
  }

  .under-construction__badge{
    --logo-w:min(270px, 84vw);
    --logo-shift:0px;
  }

  .under-construction__badge img{
    margin-left:0;
    margin-inline:auto;
  }

  .under-construction__badge span{
    font-size:18px;
  }

  .under-construction__title{
    font-size:clamp(34px, 10.2vw, 48px);
  }

  .under-construction__text{
    font-size:15.4px;
  }
}

/* Mobile — centrage réel du logo */

@media (max-width: 900px){
  .under-construction__badge{
    --mobile-logo-nudge:0px;

    width:100% !important;
    max-width:none !important;
    margin:0 auto 8px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;
  }

  .under-construction__logo{
    width:min(300px, 82vw) !important;
    height:auto !important;
    max-width:100% !important;

    display:block !important;

    margin-left:auto !important;
    margin-right:auto !important;

    transform:translateX(var(--mobile-logo-nudge)) !important;
  }

  .under-construction__badge span{
    width:100%;
    display:block;
    text-align:center;
  }
}

@media (max-width: 420px){
  .under-construction__badge img{
    width:min(270px, 84vw) !important;
  }
}