/* =========================================================
   YOMAX — BÊTA « ENVOL POUSSÉ À FOND »
   S'ajoute à style.css. Tous les effets sont coupés si
   l'appareil demande moins d'animations.
   ========================================================= */

/* ---------- barre de progression (flamme) ---------- */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:80;pointer-events:none}
.progress span{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--violet-2),var(--orange) 70%,var(--jaune));box-shadow:0 0 12px rgba(255,106,61,.6)}

/* ---------- halo qui suit la souris ---------- */
.glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle, rgba(170,130,240,.20), rgba(205,190,240,.08) 40%, transparent 68%);
  transform:translate3d(var(--gx,-999px),var(--gy,-999px),0);opacity:0;transition:opacity .4s}
.has-glow .glow{opacity:1}
@media (hover:none),(pointer:coarse){.glow{display:none}}

/* ---------- premier écran ---------- */
.hero{overflow:clip;isolation:isolate}
.hero__text{will-change:transform,opacity}
.envol{will-change:transform;perspective:1200px}
.envol__tilt{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}

/* titre : chaque ligne sort d'un masque */
.hero__title .line{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero__title .line>span{display:block}
@media (prefers-reduced-motion:no-preference){
  .js .hero__title .line{animation:none}
  .js .hero__title .line>span{animation:line-up 1s cubic-bezier(.2,.8,.1,1) both}
  .js .hero__title .line:nth-child(2)>span{animation-delay:.09s}
  .js .hero__title .line:nth-child(3)>span{animation-delay:.18s}
}
@keyframes line-up{from{transform:translateY(105%)}to{transform:none}}

.scroll-cue{position:absolute;left:50%;bottom:18px;width:28px;height:44px;margin-left:-14px;border-radius:999px;border:1.5px solid rgba(42,20,88,.35);z-index:3}
.scroll-cue span{position:absolute;left:50%;top:9px;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:var(--orange)}
@media (prefers-reduced-motion:no-preference){.scroll-cue span{animation:cue 1.8s ease-in-out 1.5s 3}}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}
@media (max-width:860px){.scroll-cue{display:none}}

/* ---------- boutons magnétiques ---------- */
.magnetic{transform:translate(var(--mx,0),var(--my,0))}
.magnetic:hover{transform:translate(var(--mx,0),calc(var(--my,0px) - 2px))}

/* ---------- bandeau géant ---------- */
.marquee{position:relative;padding-block:clamp(18px,3vw,36px);overflow:hidden;border-block:1px solid var(--ligne);
  background:linear-gradient(90deg,rgba(205,190,240,.18),rgba(255,201,74,.08),rgba(205,190,240,.18))}
.marquee__row{display:flex;gap:.5em;white-space:nowrap;width:max-content;
  font-weight:800;font-size:clamp(40px,7.4vw,118px);line-height:1.02;letter-spacing:-.045em;color:var(--violet);
  transform:translate3d(var(--mq,0px),0,0);will-change:transform}
.marquee__row .star{color:var(--orange);font-size:.5em;align-self:center}
.marquee__row--outline{color:transparent;-webkit-text-stroke:1.5px var(--violet-2);margin-left:-30vw}
.marquee__row--outline .star{-webkit-text-stroke:0;color:var(--lavande)}

/* ---------- chiffres ---------- */
.stats{padding-block:clamp(48px,7vw,96px)}
.stats__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.stat{padding:clamp(20px,2.4vw,32px);border-radius:var(--radius-lg);background:var(--verre);border:1px solid var(--verre-bord);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 22px 50px -36px rgba(42,20,88,.5)}
.stat strong{display:block;font-size:clamp(48px,6vw,88px);font-weight:800;letter-spacing:-.05em;line-height:1.08;padding-bottom:.08em;
  background:linear-gradient(135deg,var(--violet) 30%,#7a4fe0 70%,var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat strong b{font-weight:800}
.stat strong .stat__dash{font-style:normal;margin:0 .06em;align-self:center;color:#7a4fe0}
.stat strong small{font-size:.42em;letter-spacing:-.01em;margin-left:.15em;padding-bottom:.18em;color:#5a34c4}
@media (max-width:860px){.stats__grid{grid-template-columns:1fr}}

/* compteur à rouleaux */
.stat.is-odo strong{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#5a34c4}
.stat{position:relative;overflow:hidden}
.stat strong{display:flex;align-items:flex-end}
.odo{display:inline-block;height:1.08em;overflow:hidden;line-height:1.08;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.odo__col{display:flex;flex-direction:column;transform:translate3d(0,0,0);
  transition:transform 2.4s cubic-bezier(.16,1,.3,1) var(--delay,0s), filter 2.4s ease var(--delay,0s);filter:blur(3px)}
.odo__col span{display:block;height:1.08em;
  background:linear-gradient(135deg,var(--violet) 30%,#7a4fe0 70%,var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.is-rolling .odo__col{transform:translate3d(0,calc(var(--stop) * -1.08em),0);filter:blur(0)}
/* la carte s'allume quand le chiffre se pose */
.stat.is-odo::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--violet-2),var(--orange),var(--jaune));transition:transform 2.4s cubic-bezier(.16,1,.3,1) .2s}
.stat.is-rolling::before{transform:scaleX(1)}
.stat.is-odo strong{transition:transform .5s var(--ease) 2.2s}
.stat.is-rolling strong{animation:odo-pop .6s var(--ease) 2.3s both}
@keyframes odo-pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
.stat > span{display:block;margin-top:10px;color:var(--texte-doux);font-weight:600;font-size:.98rem;max-width:30ch}

/* ---------- réalisations : défilement horizontal épinglé ---------- */
.works{position:relative}
.works__sticky{padding-block:clamp(32px,5vh,56px) clamp(40px,6vh,72px)}
.works__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(20px,3vh,36px)}
.works__meter{display:flex;align-items:center;gap:16px;padding-bottom:.6em}
.works__count{font-weight:700;color:var(--texte-doux);font-variant-numeric:tabular-nums}
.works__count b{color:var(--violet)}
.works__bar{position:relative;width:clamp(80px,12vw,180px);height:4px;border-radius:4px;background:rgba(42,20,88,.1);overflow:hidden}
.works__bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--wp,.125));background:linear-gradient(90deg,var(--violet-2),var(--orange))}
.works__track{display:flex;flex-direction:column;gap:clamp(20px,3vw,32px);padding-inline:var(--gutter)}

.panel{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(20px,3vw,48px);align-items:center;
  border-radius:clamp(24px,3vw,40px);padding:clamp(24px,3.6vw,56px);overflow:hidden;isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 40px 80px -50px rgba(42,20,88,.6)}
.panel::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(140deg,rgba(255,255,255,.5),rgba(255,255,255,0) 45%)}
.panel__num{position:absolute;right:clamp(16px,2.5vw,36px);top:clamp(4px,1vw,12px);z-index:-1;
  font-size:clamp(110px,16vw,240px);font-weight:800;letter-spacing:-.07em;line-height:1;color:rgba(255,255,255,.38);pointer-events:none}
.panel__cat{font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-2)}
.panel__name{margin-top:10px;font-size:clamp(34px,4vw,60px);line-height:.98;letter-spacing:-.045em}
.panel__where{margin-top:10px;color:var(--texte-doux);font-weight:600}
.status-chip{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:6px 12px;border-radius:999px;font-size:.84rem;font-weight:700;
  background:rgba(255,255,255,.7);color:var(--violet)}
.status-chip i{width:8px;height:8px;border-radius:50%;background:#2fbf71;box-shadow:0 0 0 4px rgba(47,191,113,.2)}
.status-chip--soon i{background:var(--orange);box-shadow:0 0 0 4px rgba(255,106,61,.22)}
.status-chip--done i{background:var(--violet-2);box-shadow:0 0 0 4px rgba(91,74,133,.2)}
.panel__desc{margin-top:18px;color:#3d2c66;max-width:46ch}
.panel__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.panel__tags li{padding:6px 12px;border-radius:999px;font-size:.84rem;font-weight:600;background:rgba(42,20,88,.07);color:var(--violet)}
.panel__link{display:inline-flex;align-items:center;gap:8px;min-height:48px;margin-top:22px;padding:0 22px;border-radius:999px;
  background:var(--violet);color:var(--creme);font-weight:700;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s}
.panel__link::after{content:"↗";color:var(--jaune)}
.panel__link:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(42,20,88,.7)}

.panel__visual{position:relative;padding-bottom:clamp(20px,3vw,40px)}
.panel .device--desktop{border-radius:14px;box-shadow:0 40px 70px -30px rgba(42,20,88,.6);transform:perspective(1400px) rotateY(-7deg) rotateX(3deg);transform-origin:left center}
.panel .device--phone{right:-2%;bottom:0;width:clamp(80px,22%,170px)}
.panel__visual--phones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.4vw,18px);align-items:center;padding:0}
.panel__visual--phones img{border-radius:clamp(14px,1.6vw,24px);box-shadow:0 30px 60px -28px rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.14)}
.panel__visual--phones img:nth-child(1){transform:rotate(-5deg) translateY(4%)}
.panel__visual--phones img:nth-child(2){transform:translateY(-6%) scale(1.06);z-index:1}
.panel__visual--phones img:nth-child(3){transform:rotate(5deg) translateY(4%)}

/* thèmes par projet (couleurs inspirées de chaque marque) */
.panel--warm{background:linear-gradient(150deg,#F1E6FB 0%,#E2D2F6 40%,#F8D6BC 100%)}
.panel--sun{background:linear-gradient(150deg,#EFE6FB 0%,#DCCDF5 45%,#FFE0A3 100%)}
.panel--blue{background:linear-gradient(150deg,#ECE6FB 0%,#D3C8F2 50%,#C6D9F5 100%)}
.panel--night{background:linear-gradient(150deg,#4A3A75 0%,#2A1458 55%,#1A0D38 100%);color:var(--creme)}
.panel--ocean{background:linear-gradient(150deg,#EEE8FB 0%,#D6D7F4 45%,#FFD7BF 100%)}
.panel--violet{background:radial-gradient(70% 80% at 85% 20%,rgba(124,82,214,.55),transparent 70%),linear-gradient(150deg,#3A2470,#2A1458 60%,#1E0E42);color:var(--creme)}
.panel--midnight{background:radial-gradient(60% 70% at 80% 30%,rgba(160,130,240,.35),transparent 70%),linear-gradient(150deg,#2B2440,#1C1730 60%,#141022);color:var(--creme)}
.panel--glass{background:linear-gradient(150deg,#EAE3FB 0%,#DCE6FA 50%,#E3F2EA 100%)}
.panel--night .panel__cat,.panel--violet .panel__cat,.panel--midnight .panel__cat{color:var(--lavande)}
.panel--night .panel__where,.panel--violet .panel__where,.panel--midnight .panel__where{color:#d9ccff}
.panel--night .panel__desc,.panel--violet .panel__desc,.panel--midnight .panel__desc{color:#ece4ff}
.panel--night .panel__tags li,.panel--violet .panel__tags li,.panel--midnight .panel__tags li{background:rgba(255,255,255,.1);color:var(--creme)}
.panel--night .panel__num,.panel--violet .panel__num,.panel--midnight .panel__num{color:rgba(255,255,255,.08)}
.panel--night .panel__link,.panel--violet .panel__link,.panel--midnight .panel__link{background:var(--creme);color:var(--violet)}
.panel--night .status-chip,.panel--violet .status-chip,.panel--midnight .status-chip{background:rgba(255,255,255,.12);color:var(--creme)}

/* mode horizontal (ordinateur, animations autorisées, JS actif) */
@media (min-width:1024px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
  .js .works.is-h{height:var(--works-h,600vh)}
  .js .works.is-h .works__sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-block:clamp(70px,10vh,96px) clamp(16px,3vh,32px)}
  .js .works.is-h .works__track{flex-direction:row;width:max-content;gap:clamp(24px,2.4vw,40px);padding-inline:var(--gutter) 22vw;
    transform:translate3d(var(--wx,0px),0,0);will-change:transform}
  .js .works.is-h .panel{width:min(1180px,78vw);height:min(660px,calc(100svh - 230px));flex:none}
  .js .works.is-h .panel .panel__visual img{max-height:calc(100svh - 330px);object-fit:cover;object-position:top}
  .js .works.is-h .panel__visual--phones img{max-height:calc(100svh - 300px);width:auto;justify-self:center}
}

/* ---------- cartes à halo (expertises) ---------- */
.spot{position:relative;overflow:hidden}
.spot::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%), rgba(255,140,80,.18), rgba(170,130,240,.14) 40%, transparent 70%)}
.spot:hover::after{opacity:1}

/* ---------- méthode : la fusée suit la trajectoire ---------- */
.flight{position:relative}
.flight__line{position:relative;height:4px;margin:10px 24px 34px;border-radius:4px;background:rgba(42,20,88,.1)}
.flight__line i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--fp,0));border-radius:4px;
  background:linear-gradient(90deg,var(--lavande),var(--violet-2) 50%,var(--orange))}
.flight__line img{position:absolute;top:50%;left:calc(var(--fp,0) * 100%);width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:14px;
  transform:rotate(calc(32deg - var(--fp,0) * 4deg));box-shadow:0 14px 26px -10px rgba(42,20,88,.6)}
.flight__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.flight__step{padding:28px 24px 30px;border-radius:var(--radius-md);background:#fff;border:1px solid rgba(42,20,88,.07);box-shadow:0 18px 40px -32px rgba(42,20,88,.5);transition:transform .4s var(--ease),box-shadow .4s}
.flight__step.is-lit{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(42,20,88,.55)}
.flight__step .step__num{display:block;font-weight:800;font-size:2.4rem;letter-spacing:-.04em;line-height:1;margin-bottom:18px;
  background:linear-gradient(135deg,var(--violet-2),var(--lavande));-webkit-background-clip:text;background-clip:text;color:transparent}
.flight__step.is-lit .step__num{background:linear-gradient(135deg,var(--orange),var(--jaune));-webkit-background-clip:text;background-clip:text}
.flight__step h3{font-size:1.2rem;margin-bottom:10px}
.flight__step p{color:#47366f;font-size:.98rem}
.method2{padding-top:clamp(40px,6vw,80px)}

/* ---------- contact : grand final ---------- */
.contact__big{font-size:clamp(44px,7vw,108px)!important;line-height:.95!important;letter-spacing:-.05em!important}
.contact__big span{background:linear-gradient(90deg,var(--lavande),var(--jaune) 60%,var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- adaptations ---------- */
@media (max-width:1100px){.flight__steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .panel{grid-template-columns:1fr}
  .panel__visual{order:-1}
  .panel__num{font-size:120px}
  .works__head{flex-direction:column;align-items:flex-start}
  .works__meter{display:none}
  .marquee__row--outline{margin-left:-60vw}
  .flight__line{display:none}
}
@media (max-width:560px){
  .stats__grid,.flight__steps{grid-template-columns:1fr}
  .panel{padding:22px 18px 26px}
  .panel .device--desktop{transform:none}
  .panel__link{width:100%;justify-content:center}
}

/* mouvement réduit : tout est fixe */
@media (prefers-reduced-motion:reduce){
  .glow,.progress{display:none}
  .marquee__row,.works__track,.envol,.envol__tilt,.hero__text,.magnetic{transform:none!important}
}

/* =========================================================
   Sites (3 + Voir plus) · Logiciels · Nos projets
   ========================================================= */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);align-items:stretch}
.panel--stack{grid-template-columns:1fr;align-content:start;gap:clamp(18px,2vw,28px)}
.panel--stack .panel__visual{order:-1}
.panel--stack .panel__num{font-size:clamp(90px,10vw,160px)}
.panel--stack .panel__name{font-size:clamp(30px,3vw,46px)}
.panel--stack .device--desktop{transform:none}
.soft,.ours{padding-top:clamp(56px,7vw,104px)}
.more-sites{padding-top:clamp(24px,3vw,40px)}
.more-sites[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.more-sites.is-open .panel{animation:rise .8s var(--ease) both}.more-sites.is-open .panel+.panel{animation-delay:.12s}}

/* case « Voir plus » */
.panel--more{background:radial-gradient(60% 70% at 80% 20%,rgba(255,201,74,.35),transparent 70%),linear-gradient(150deg,#F3ECFC 0%,#E1D3F7 50%,#FBE3D2 100%)}
.panel--more .panel__name{font-size:clamp(34px,4vw,58px)}
.more-btn{border:0;cursor:pointer;font:inherit;font-weight:700;font-size:1.02rem;padding:0 26px}
.more-btn::after{content:"↓"!important}
.more-btn[aria-expanded="true"]::after{content:"↑"!important}
.more-thumbs{display:grid;grid-template-columns:1fr;gap:16px;padding:0;width:min(100%,500px);justify-self:center}
.more-thumbs img{border-radius:14px;box-shadow:0 26px 50px -26px rgba(42,20,88,.55);border:1px solid rgba(255,255,255,.6)}
.more-thumbs img:first-child{transform:rotate(-2.5deg) translateX(-4%)}
.more-thumbs img:last-child{transform:rotate(2deg) translateX(6%);margin-top:-14%}
.panel--more:hover .more-thumbs img:first-child{transform:rotate(-4deg) translateX(-6%)}
.more-thumbs img{transition:transform .5s var(--ease)}

/* AI Clip Studio : schéma vidéo longue → clips verticaux (en attendant les captures) */
.panel--clip{background:radial-gradient(60% 70% at 85% 15%,rgba(255,106,61,.35),transparent 70%),linear-gradient(150deg,#2A1E46,#1B1430 60%,#120D22);color:var(--creme)}
.panel--clip .panel__cat{color:var(--lavande)}.panel--clip .panel__where{color:#d9ccff}.panel--clip .panel__desc{color:#ece4ff}
.panel--clip .panel__tags li{background:rgba(255,255,255,.1);color:var(--creme)}.panel--clip .panel__num{color:rgba(255,255,255,.08)}
.panel--clip .status-chip{background:rgba(255,255,255,.12);color:var(--creme)}
.clip-visual{display:grid;grid-template-columns:1.25fr auto 1fr;align-items:center;gap:clamp(10px,1.6vw,22px);padding:0;min-height:clamp(180px,20vw,280px)}
.clip-visual__wide{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,#3b2a66,#5b3fa8 50%,#ff6a3d);box-shadow:0 26px 50px -24px rgba(0,0,0,.6)}
.clip-visual__play{position:absolute;left:50%;top:42%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.9)}
.clip-visual__play::after{content:"";position:absolute;left:17px;top:13px;border:9px solid transparent;border-left:14px solid var(--violet)}
.clip-visual__wave{position:absolute;left:8%;right:8%;bottom:12%;height:22px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 3px,transparent 3px 7px);
  -webkit-mask:linear-gradient(0deg,#000,#000) ,radial-gradient(circle,#000,transparent);
  clip-path:polygon(0 60%,5% 30%,10% 70%,15% 20%,20% 55%,25% 10%,30% 65%,35% 35%,40% 80%,45% 25%,50% 60%,55% 15%,60% 70%,65% 40%,70% 85%,75% 30%,80% 60%,85% 20%,90% 70%,95% 40%,100% 60%,100% 100%,0 100%)}
.clip-visual__arrow{width:clamp(26px,3vw,44px);height:4px;border-radius:4px;background:linear-gradient(90deg,var(--lavande),var(--orange));position:relative}
.clip-visual__arrow::after{content:"";position:absolute;right:-2px;top:-6px;border:8px solid transparent;border-left:12px solid var(--orange)}
.clip-visual__phones{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.clip-visual__phones span{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg,#5b3fa8,#ff6a3d)}
.clip-visual__phones span:nth-child(2){background:linear-gradient(180deg,#7a4fe0,#ffc94a);transform:translateY(-10%)}
.clip-visual__phones span:nth-child(3){background:linear-gradient(180deg,#3b2a66,#cdbef0)}
.clip-visual__phones b{position:absolute;left:8%;right:8%;bottom:10%;padding:4px 0;border-radius:6px;font-size:.62rem;text-align:center;background:rgba(0,0,0,.45);color:#fff}

@media (min-width:1024px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
  .js .works.is-h .panel--more .more-thumbs img{max-height:none}
}
@media (max-width:960px){.duo{grid-template-columns:1fr}}
@media (max-width:560px){.clip-visual{grid-template-columns:1fr;justify-items:center}.clip-visual__arrow{transform:rotate(90deg)}.clip-visual__wide{width:100%}.clip-visual__phones{width:80%}}

/* « Voir plus » à 3 miniatures + grille des autres sites */
.more-thumbs--3 img:nth-child(1){transform:rotate(-3deg) translateX(-6%)}
.more-thumbs--3 img:nth-child(2){transform:rotate(1.5deg) translateX(8%);margin-top:-18%}
.more-thumbs--3 img:nth-child(3){transform:rotate(-1deg) translateX(-2%);margin-top:-18%}
.panel--more:hover .more-thumbs--3 img:nth-child(1){transform:rotate(-5deg) translateX(-9%)}
.panel--more:hover .more-thumbs--3 img:nth-child(3){transform:rotate(1deg) translateX(2%)}
.duo--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.duo--3 .panel__name{font-size:clamp(26px,2.4vw,38px)}
.duo--3 .panel{padding:clamp(20px,2.4vw,34px)}
@media (max-width:1180px){.duo--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.duo--3{grid-template-columns:1fr}}
.more-thumbs--3{width:min(100%,420px)}
.more-thumbs--3 img:nth-child(2),.more-thumbs--3 img:nth-child(3){margin-top:-28%}