/* ---------- Pages cas client ---------- */
.case-hero{position:relative;padding:calc(110px + env(safe-area-inset-top,0px)) var(--gut) clamp(60px,7vw,100px);overflow:hidden}
.case-hero .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px}
.case-hero .crumbs a{color:var(--choco-2)}
.case-hero .crumbs a:hover{color:var(--tomato)}
.case-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(36px,5vw,80px);align-items:center}
.case-title{font-weight:900;text-transform:uppercase;font-stretch:72%;font-size:clamp(60px,10vw,168px);line-height:.84;letter-spacing:-.01em;margin:18px 0 22px;overflow-wrap:anywhere}
.case-title .accent{font-stretch:100%}
.case-hero .lead{font-size:clamp(18px,1.7vw,22px);color:var(--choco)}
.case-hero .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.case-hero .stamp{position:absolute;top:calc(100px + env(safe-area-inset-top,0px));right:var(--gut);width:96px;font-size:17px;z-index:5}
.case-hero .chip-prod{display:inline-block;margin-left:6px}
.case-hero .bg-word{position:absolute;right:-2vw;top:84px;font-weight:900;font-stretch:125%;font-size:min(26vw,380px);line-height:.8;color:rgba(58,34,25,.04);pointer-events:none;white-space:nowrap;text-transform:uppercase}
.concept-note{margin-top:18px;max-width:52ch;font-size:15px;color:var(--choco-2);padding:12px 16px;border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 1.5px rgba(229,81,43,.4)}

/* scène appareils */
.stage{position:relative;padding:20px 40px 40px 0}
.browser{position:relative;background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(58,34,25,.55),0 0 0 1px rgba(58,34,25,.08)}
.browser .bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:var(--paper-2)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:var(--choco-3);opacity:.45}
.browser .bar i:nth-child(1){background:var(--tomato);opacity:.8}.browser .bar i:nth-child(2){background:var(--sun);opacity:.9}.browser .bar i:nth-child(3){background:var(--sky);opacity:1}
.browser .bar span{margin-left:10px;flex:1;max-width:60%;height:22px;border-radius:999px;background:var(--white);font-family:var(--mono);font-size:11.5px;line-height:22px;padding:0 10px;color:var(--choco-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.browser .screen{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.browser .screen img,.browser .screen video{width:100%;height:100%;object-fit:cover;object-position:top center}
.phone{position:relative;width:100%;background:var(--choco);border-radius:clamp(28px,4vw,42px);padding:clamp(7px,.8vw,10px);box-shadow:0 30px 50px -24px rgba(58,34,25,.6)}
.phone .screen{position:relative;aspect-ratio:390/844;border-radius:clamp(22px,3.3vw,34px);overflow:hidden;background:var(--paper-2)}
.phone .screen::before{content:"";position:absolute;top:8px;left:50%;width:30%;height:clamp(14px,1.6vw,20px);margin-left:-15%;border-radius:999px;background:var(--choco);z-index:2}
.phone .screen img,.phone .screen video{width:100%;height:100%;object-fit:cover;object-position:top center}
.stage .browser{transform:rotate(-1.4deg)}
.stage .phone{position:absolute;right:0;bottom:-6px;width:clamp(120px,24%,210px);transform:rotate(4deg);z-index:3}
.stage .tape{top:-12px;left:20%;transform:rotate(-6deg);width:130px}
.stage .st{position:absolute;z-index:4}
@media(max-width:900px){
  .case-grid{grid-template-columns:1fr}
  .stage{padding:10px 24px 34px 0;margin-top:6px}
  .stage .phone{width:30%;right:0}
  .case-hero .stamp{top:auto;bottom:24px;width:80px;font-size:14px}
}

/* fiche */
.facts-card{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 28px;padding:clamp(26px,3vw,40px);background:var(--white);border-radius:6px;box-shadow:0 22px 40px -30px rgba(58,34,25,.6);transform:rotate(-.5deg)}
.facts-card::before,.facts-card::after{content:"";position:absolute;top:-14px;width:120px;height:32px;background:url(/assets/img/paper/tape-y1.webp) center/100% 100%;opacity:.9}
.facts-card::before{left:8%;transform:rotate(-5deg)}.facts-card::after{right:8%;transform:rotate(4deg);background-image:url(/assets/img/paper/scotch-2.webp)}
.facts-card dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--choco-2);margin-bottom:6px}
.facts-card dd{font-weight:800;font-size:clamp(17px,1.5vw,20px);line-height:1.25}
.facts-card .full{grid-column:1/-1}
.facts-card .pills .pill{font-size:14px;padding:7px 12px;white-space:normal;line-height:1.25}
@media(max-width:900px){.facts-card{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.facts-card{gap:16px 18px}}

/* récit */
.story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,5vw,80px)}
.story h2{margin-bottom:16px}
.story p{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--choco-2);font-weight:500;max-width:60ch}
.story p+p{margin-top:14px}
.story p b{color:var(--choco);font-weight:800}
@media(max-width:900px){.story{grid-template-columns:1fr}}

/* vidéos de défilement */
.motion{background:var(--sky);overflow:hidden}
.motion-grid{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:end}
.motion .phone{max-width:300px;margin-left:auto}
.motion .note{margin-top:18px;display:flex;gap:10px;align-items:center}
@media(max-width:900px){
  .motion-grid{grid-template-columns:1fr}
  .motion .phone{order:-1;max-width:260px;margin:0 auto;transform:rotate(-2deg)}
}

/* moments forts */
.hl .rail-track{--rail-gap:18px}
.hl-card{width:min(84vw,460px);display:flex;flex-direction:column;gap:14px}
.hl-card .polaroid .img{aspect-ratio:16/10}
.hl-card .polaroid .img.m{aspect-ratio:390/600}
.hl-card h3{font-size:clamp(22px,2vw,28px);font-weight:900;font-stretch:80%;text-transform:uppercase;line-height:1}
.hl-card p{font-size:16px;line-height:1.5;color:var(--choco-2);font-weight:500}
.hl-card .num{display:inline-block;margin-bottom:8px}

/* livrables */
.deliv{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:start}
.deliv ul{list-style:none;display:grid;gap:10px}
.deliv li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:var(--white);border-radius:14px;font-weight:700;font-size:17px;line-height:1.35;transform:rotate(var(--r,0deg));box-shadow:0 8px 16px -14px rgba(58,34,25,.5)}
.deliv li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:6px;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%233A2219' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
@media(max-width:900px){.deliv{grid-template-columns:1fr}}

/* palette */
.chips{display:flex;flex-wrap:wrap;gap:14px}
.chip-sw{width:clamp(130px,15vw,170px);background:var(--white);padding:8px 8px 14px;border-radius:10px;box-shadow:0 14px 22px -16px rgba(58,34,25,.55);transform:rotate(var(--r,0deg))}
.chip-sw i{display:block;aspect-ratio:1/1.05;border-radius:6px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(58,34,25,.12)}
.chip-sw b{display:block;margin-top:10px;font-weight:800;font-size:15px;line-height:1.2}
.chip-sw span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--choco-2)}
.chip-sw small{display:block;margin-top:4px;font-size:13px;color:var(--choco-2);line-height:1.35}
.typos{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
@media(max-width:600px){.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.chip-sw{width:auto;padding:6px 6px 10px}.chip-sw i{aspect-ratio:1/.8}.chip-sw b{font-size:13px;margin-top:7px}.chip-sw span{font-size:11px;letter-spacing:0}.chip-sw small{display:none}}

/* téléphones */
.phones .rail-track{--rail-gap:22px;align-items:flex-start}
.phones .phone{width:min(62vw,250px)}
.phones .phone:nth-child(odd){transform:rotate(-1.5deg)}.phones .phone:nth-child(even){transform:rotate(1.5deg) translateY(18px)}

/* blocs des anciens cas */
.blk{padding-block:clamp(56px,7vw,110px)}
.blk-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px clamp(30px,5vw,80px);align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.blk-head p{font-size:clamp(16.5px,1.4vw,19px);line-height:1.6;color:var(--choco-2);font-weight:500;max-width:58ch}
.blk-head p b{color:var(--choco);font-weight:800}
@media(max-width:900px){.blk-head{grid-template-columns:1fr}}
.fig{position:relative;background:var(--white);padding:10px;box-shadow:0 22px 34px -22px rgba(58,34,25,.5);transform:rotate(var(--r,0deg))}
.fig img,.fig video{width:100%;height:auto;display:block;background:var(--paper-2)}
.fig img.tape{width:118px;height:auto;background:none;}
.fig .tape{top:-15px;left:var(--tx,40%);transform:rotate(var(--tr,-5deg))}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
@media(max-width:700px){.grid-2{grid-template-columns:1fr}}
.gal .rail-track{--rail-gap:16px;align-items:center}
.gal .fig{flex:none;height:var(--h,clamp(300px,52vh,520px));width:auto}
.gal .fig img,.gal .fig video{height:100%;width:auto;max-width:none}
@media(max-width:600px){.gal .fig{height:var(--hm,56vh)}}

/* suivant */
.next{display:block;position:relative;overflow:hidden;background:var(--choco);color:var(--paper);padding:clamp(70px,9vw,130px) var(--gut)}
.next .mono{color:rgba(245,238,226,.7)}
.next .nm{display:block;max-width:calc(100% - clamp(170px,24vw,340px));font-weight:900;text-transform:uppercase;font-stretch:72%;font-size:clamp(60px,12vw,200px);line-height:.84;margin-top:14px;transition:color .3s,font-stretch .5s}
.next:hover .nm{color:var(--sky);font-stretch:90%}
.next .pola{position:absolute;right:var(--gut);top:50%;width:clamp(150px,22vw,320px);transform:translateY(-50%) rotate(5deg);transition:transform .6s var(--spring)}
.next:hover .pola{transform:translateY(-55%) rotate(0)}
@media(max-width:700px){.next .nm{max-width:none}.next .pola{position:relative;right:auto;top:auto;transform:rotate(3deg);margin-top:26px;width:70%}.next:hover .pola{transform:rotate(0)}}

/* bandeau CTA */
.cta-band{text-align:center}
.cta-band .h-l{max-width:16ch;margin-inline:auto}
.cta-band .row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
@media(max-width:600px){.cta-band .row .btn{width:100%;white-space:normal}}