/* Osmora Studio, feuille de style unique */

@font-face{font-family:"Abril Fatface";src:url("../fonts/abril-fatface.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Abril Fatface";src:url("../fonts/abril-fatface-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --cream:#f4f1ec;
  --choc:#3c2415;
  --lime:#eff0be;
  --orange:#ff9a5a;
  --vermil:#ff6b3d;
  --lav:#c9b3e8;
  --pink:#ffd2b0;
  --serif:"Abril Fatface",Georgia,"Times New Roman",serif;
  --sans:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(16px,4vw,56px);
  --r:clamp(22px,2.4vw,34px);
  --r2:clamp(28px,4vw,56px);
  --off:0 18px 36px -22px rgba(60,36,21,.4);
  --soft:0 22px 44px -26px rgba(60,36,21,.38);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--choc);font-family:var(--sans);font-size:clamp(1rem,.95rem + .25vw,1.15rem);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit;border:0}
:focus-visible{outline:3px solid var(--vermil);outline-offset:3px;border-radius:6px}

h1,h2,h3,.marquee,.foot-tag{font-family:var(--serif);font-weight:400}
.manifest-text,.mail{font-family:var(--sans);font-weight:500}
h1,h2,h3{line-height:1.06;letter-spacing:-.01em;text-wrap:balance}

.wrap{width:min(1240px,100% - var(--gut)*2);margin-inline:auto}
.over{position:relative;z-index:2}
.skip{position:absolute;left:-999px;top:8px;background:var(--choc);color:var(--cream);padding:10px 16px;border-radius:99px;z-index:100}
.skip:focus{left:8px}

/* Canvas 3D */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.gl-ready #gl{opacity:1}
.a3d{position:absolute;aspect-ratio:1;pointer-events:none}

/* Navigation */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:fit-content;max-width:calc(100% - 24px);z-index:50;display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3.4vw,44px);padding:10px 12px 10px 26px;border-radius:99px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 10px 30px rgba(60,36,21,.08);color:var(--choc);transition:background .4s,color .4s}
.nav.on-dark{background:rgba(60,36,21,.7);color:var(--cream)}
.nav-logo{display:block;width:clamp(104px,12vw,136px)}
.nav-links{display:flex;align-items:center;gap:clamp(12px,2.4vw,30px);font-weight:500;font-size:.95rem}
.nav-links a{text-decoration:none;position:relative}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:not(.nav-cta):hover::after{transform:scaleX(1)}
.nav-cta{white-space:nowrap;background:var(--choc);color:var(--cream);padding:10px 20px;border-radius:99px;transition:transform .3s var(--ease),background .3s}
.nav.on-dark .nav-cta{background:var(--lime);color:var(--choc)}
.nav-cta:hover{transform:scale(1.05)}
@media (max-width:640px){.nav-links a:not(.nav-cta){display:none}}

.logo{width:100%;height:auto;display:block;overflow:visible}
.logo .cls-1{fill:currentColor}
.logo .cls-2{fill:var(--lime)}
.nav:not(.on-dark) .logo .cls-2{fill:#d4d68a}

/* Boutons et pastilles : ombre décalée */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:14px 26px;border-radius:99px;font-weight:600;text-decoration:none;box-shadow:var(--soft);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .3s,color .3s;cursor:pointer;background:#fff}
.btn:hover{transform:translate(3px,3px)}
.btn:active{transform:none}
.btn-dark{background:var(--choc);color:var(--cream);box-shadow:none}
.btn-dark:hover{box-shadow:none}
.btn-line{background:#fff}
.pill{display:inline-block;background:#fff;padding:7px 18px;border-radius:99px;font-weight:600;font-size:.9rem;max-width:100%}
.arr{display:inline-block;flex:none;width:1.5em;height:1.5em;border-radius:50%;background:var(--choc);position:relative}
.arr::before{content:"";position:absolute;left:50%;top:50%;width:.5em;height:.5em;border-top:2px solid var(--cream);border-right:2px solid var(--cream);transform:translate(-65%,-50%) rotate(45deg)}
.btn-dark .arr,.btn-send .arr{background:var(--lime)}
.btn-dark .arr::before,.btn-send .arr::before{border-color:var(--choc)}

/* Accroche */
.hero{position:relative;padding:14px 14px 0}
.hero-panel{position:relative;max-width:1500px;margin-inline:auto;min-height:calc(100svh - 28px);border-radius:var(--r2);overflow:hidden;background:#faf7f1;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(104px,15vh,150px) clamp(16px,4vw,56px) clamp(190px,27vh,260px);isolation:isolate;--mx:0;--my:0;--cx:50%;--cy:40%}
.gblob{position:absolute;z-index:-1;border-radius:50%;filter:blur(72px);pointer-events:none;will-change:translate}
.g1{width:min(38vw,540px);aspect-ratio:1.2;left:-9%;top:-10%;background:var(--orange);opacity:.72;translate:calc(var(--mx)*46px) calc(var(--my)*36px)}
.g2{width:min(42vw,600px);aspect-ratio:1.2;right:-11%;top:14%;background:var(--lav);opacity:.82;translate:calc(var(--mx)*-52px) calc(var(--my)*-40px)}
.g3{width:min(32vw,460px);aspect-ratio:1.5;left:30%;top:-20%;background:#ffd2b0;opacity:.6;translate:calc(var(--mx)*34px) calc(var(--my)*26px)}
.spark{position:absolute;z-index:-1;pointer-events:none}
.sk1{left:10%;top:64%;width:30px;fill:var(--vermil)}
.sk2{right:19%;top:30%;width:20px;fill:var(--choc)}
.hero-text{display:flex;flex-direction:column;align-items:center;max-width:70rem}
.hero .pill{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 10px;font-weight:500;font-size:.88rem;box-shadow:0 6px 20px rgba(60,36,21,.06)}
.dot-l{width:22px;height:22px;border-radius:50%;background:var(--lime)}
.dot-o{width:9px;height:9px;border-radius:50%;background:var(--vermil);margin-left:4px}
.hero h1{font-size:clamp(2.2rem,6.4vw,6.4rem);line-height:1.1;margin:clamp(18px,3vh,30px) 0 clamp(16px,2.6vh,26px);max-width:12.5em}
.hero h1 em{font-style:normal;color:var(--vermil)}
.hero h1 .nw{white-space:nowrap}
.hero h1 .ph{display:inline-block;vertical-align:middle;width:1.55em;height:1.55em;border-radius:50%;object-fit:cover;object-position:50% 16%;margin:-.34em .1em -.2em;background:var(--lav);transform:translate(calc(var(--mx)*14px),calc(var(--my)*10px));animation:headpop 1s cubic-bezier(.3,1.6,.5,1) .6s both,headbob 5.5s ease-in-out 1.7s infinite}
@keyframes headpop{from{scale:.2;opacity:0}to{scale:1;opacity:1}}
@keyframes headbob{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 -.09em;rotate:4deg}}
.lead{max-width:31em;font-size:clamp(1rem,.95rem + .3vw,1.2rem);color:#5a4636}
.lead strong{color:var(--choc);font-weight:700}
.hs{width:clamp(80px,10.5vw,160px)}
.hs1{left:clamp(8px,4vw,80px);top:60%}
.hs2{right:clamp(8px,6.5vw,120px);top:15%}
.hs3{right:clamp(30px,13vw,230px);top:56%;width:clamp(70px,8.5vw,130px)}

/* Pastilles des compétences : chute puis rangement en bas de l'écran */
.pile{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-wrap:wrap-reverse;align-content:flex-start;justify-content:center;gap:8px 10px;width:min(720px,100% - 24px);margin-inline:auto;padding:0 0 clamp(16px,3.4vh,34px)}
.pl{--bg:var(--lime);--fg:var(--choc);display:inline-block;padding:14px 26px;border-radius:99px;background:var(--bg);color:var(--fg);font-weight:700;font-size:clamp(.95rem,1.3vw,1.18rem);line-height:1.2;text-decoration:none;white-space:nowrap;box-shadow:0 8px 22px rgba(60,36,21,.12);rotate:var(--r);transition:rotate .6s var(--ease),box-shadow .3s}
.pl:hover,.pl:focus-visible{box-shadow:0 14px 28px rgba(60,36,21,.2)}
.js .pile .pl{opacity:0}
.js .pile.drop .pl{opacity:1;animation:drop 1.15s both;animation-delay:calc(var(--i)*.34s + .15s)}
@keyframes drop{
  0%{translate:0 -105vh;rotate:calc(var(--r)*-5);animation-timing-function:cubic-bezier(.55,0,.9,.55)}
  56%{translate:0 0;rotate:var(--r);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  70%{translate:0 -24px;animation-timing-function:cubic-bezier(.6,0,.9,.5)}
  83%{translate:0 0;animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  91%{translate:0 -7px;animation-timing-function:cubic-bezier(.6,0,.9,.5)}
  100%{translate:0 0}
}

@media (max-width:640px){
  .pl{padding:11px 18px;font-size:.95rem}
  .hs{width:84px}
  .hs1{top:68%;left:7%}
  .hs2{top:67%;right:7%}
  .hs3{display:none}
  .sk1,.sk2{display:none}
  .hero-panel{padding-top:110px}
}

/* Bandeau */
.marquee{position:relative;background:var(--lime);overflow:hidden;white-space:nowrap;padding:16px 0;font-size:clamp(1.3rem,2.6vw,2.2rem);margin-top:clamp(28px,4vw,56px)}
.marquee-track{display:inline-flex;animation:marq 38s linear infinite}
.marquee-track span{padding-right:.6em}
@keyframes marq{to{transform:translateX(-50%)}}

/* Présentation */
.manifest{padding:clamp(80px,14vw,200px) 0 clamp(60px,8vw,110px);position:relative}
.manifest-text{font-size:clamp(1.35rem,2.5vw,2.35rem);line-height:1.3;letter-spacing:-.01em;max-width:30em;font-weight:400}
.manifest-text .mw.b{font-weight:700}
.js .manifest-text .mw{opacity:.16;transition:opacity .45s}
.js .manifest-text .mw.on{opacity:1}
.bento{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(12px,1.6vw,22px);align-items:end;margin-top:clamp(40px,6vw,80px)}
.bc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--r2);padding:clamp(22px,2.4vw,34px)}
.bc h3{font-size:clamp(1.6rem,2.5vw,2.4rem);line-height:1.05;margin-bottom:10px}
.bc p{max-width:19em;font-weight:500}
.go{position:absolute;right:clamp(16px,1.8vw,26px);top:clamp(16px,1.8vw,26px);width:30px;height:30px}
.go::after{content:"";position:absolute;inset:0;background:var(--vermil);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:spin 9s linear infinite}
.bc3 .go::after{background:var(--choc)}
@keyframes spin{to{rotate:360deg}}
.bc1{background:#e4d9f3;height:clamp(250px,24vw,340px)}
@property --sq{syntax:"<number>";inherits:true;initial-value:1}
.bc2w{--bh:clamp(250px,21vw,300px);--sq:1;--H:max(calc(var(--bh)*var(--sq)),215px);position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:clamp(340px,31vw,440px)}
.bc2{background:var(--lime);height:var(--H);overflow:hidden;justify-content:flex-start;padding-top:clamp(22px,2.4vw,34px)}
.tags{position:absolute;inset:0;pointer-events:none;z-index:2}
.tags li{position:absolute;left:50%;margin-left:var(--dx);bottom:calc(var(--H) + var(--k)*54px - 8px);transform:translateX(-50%);rotate:var(--r);padding:11px 22px;border-radius:99px;background:var(--bg);font-weight:700;font-size:clamp(.95rem,1.1vw,1.1rem);white-space:nowrap;box-shadow:0 8px 20px rgba(60,36,21,.12)}
.js .bc2w:not(.in) .tags li{opacity:0}
.js .bc2w.in{animation:squash 3.6s both}
.js .bc2w.in .tags li{animation:pdrop .9s both;animation-delay:calc(var(--k)*1s + .2s)}
@keyframes pdrop{0%{translate:0 -460px;opacity:0}6%{opacity:1}70%{translate:0 0;animation-timing-function:ease-out}82%{translate:0 -10px;animation-timing-function:ease-in}100%{translate:0 0;opacity:1}}
@keyframes squash{0%,22%{--sq:1}24%{--sq:.86}30%{--sq:.92}50%{--sq:.92}52%{--sq:.82}58%{--sq:.87}78%{--sq:.87}80%{--sq:.76}86%{--sq:.8}100%{--sq:.8}}
@media (prefers-reduced-motion:reduce){.js .bc2w.in{animation:none}.js .bc2w:not(.in) .tags li{opacity:1}}
.bc3{background:#fff;height:clamp(230px,21vw,310px)}
@media (max-width:860px){.bento{grid-template-columns:1fr;align-items:stretch}.bc1,.bc3{height:auto;min-height:210px}.bc2w{height:380px}}
.where-band{margin-top:clamp(40px,6vw,80px);display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px}
.where-band p{max-width:22em;font-size:clamp(1.05rem,1.2vw + .6rem,1.45rem);font-weight:500;line-height:1.3}
.zones{display:flex;flex-wrap:wrap;gap:10px}
.zones li{padding:10px 22px;border-radius:99px;font-weight:700;font-size:clamp(.95rem,1.2vw,1.2rem)}
.z1{background:var(--lime);rotate:-2deg}.z2{background:var(--orange);rotate:2deg}.z3{background:var(--lav);rotate:-1deg}.z4{background:#fff;rotate:2deg}

/* En-têtes de section */
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:16px 24px;align-items:end;margin-bottom:clamp(28px,5vw,60px)}
.sec-head h2{grid-column:1 / span 7;font-size:clamp(2.2rem,5.4vw,5.2rem)}
.sec-head p{grid-column:9 / span 4;max-width:30em}
@media (max-width:860px){.sec-head h2,.sec-head p{grid-column:1 / -1}}

/* Compétences : boîtes à gauche, visuel à droite */
.skills{position:relative;height:480vh}
.skills-sticky{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:5fr 6fr;gap:clamp(20px,4vw,64px);align-items:center;padding:92px var(--gut) 32px;max-width:1360px;margin-inline:auto}
.skills-left h2{font-size:clamp(2.2rem,4.4vw,4.2rem);margin-bottom:clamp(14px,3vh,28px)}
.sk-list{display:grid;gap:clamp(8px,1.4vh,14px)}
.sk-item{border-radius:22px;background:rgba(255,255,255,.5);transition:background .4s,box-shadow .4s var(--ease),transform .5s var(--ease)}
.sk-item.is-active{background:var(--acc);box-shadow:var(--soft);transform:translate(-3px,-3px)}
.sk-btn{display:flex;align-items:center;gap:14px;width:100%;padding:clamp(10px,1.8vh,16px) 20px;background:none;border:0;text-align:left;cursor:pointer;font-weight:700;font-size:clamp(1.02rem,1.3vw,1.3rem)}
.sk-num{font-family:var(--sans);font-weight:700;font-size:.95rem;width:2.4em;height:2.4em;display:grid;place-items:center;border-radius:50%;background:var(--cream);flex:none}
.sk-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.sk-more>p{overflow:hidden;min-height:0;padding:0 22px 0 22px;opacity:0;transition:opacity .4s,padding .4s}
.sk-item.is-active .sk-more{grid-template-rows:1fr}
.sk-item.is-active .sk-more>p{opacity:1;padding:0 22px 18px 22px}

.skills-visual{position:relative;height:min(74vh,640px)}
.sk-vis{position:absolute;inset:0;border-radius:var(--r);box-shadow:var(--soft);overflow:hidden;opacity:0;transform:translateY(24px) scale(.985);transition:opacity .6s var(--ease),transform .8s var(--ease);pointer-events:none}
.sk-vis.is-active{opacity:1;transform:none;pointer-events:auto}
.sk-shape{left:50%;top:50%;width:min(38%,250px);translate:-50% -50%}
.stickers li{position:absolute;max-width:58%;padding:clamp(12px,1.2vw,18px) clamp(20px,2vw,32px);border-radius:99px;background:var(--cream);color:var(--choc);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.6rem);line-height:1.2;text-align:center;box-shadow:0 8px 20px rgba(60,36,21,.1)}
.stickers li:nth-child(1){left:6%;top:7%;rotate:-5deg}
.stickers li:nth-child(2){right:6%;top:15%;rotate:4deg}
.stickers li:nth-child(3){left:6%;bottom:24%;rotate:3deg}
.stickers li:nth-child(4){right:6%;bottom:6%;rotate:-4deg}
.sk-text{display:none}
.k-a{background:radial-gradient(70% 60% at 85% 12%,var(--lav) 0,transparent 70%),radial-gradient(60% 55% at 12% 90%,var(--orange) 0,transparent 72%),radial-gradient(50% 45% at 80% 80%,#ffd2a8 0,transparent 70%),#f6d9c4}
.k-b{background:radial-gradient(70% 60% at 80% 10%,#ffffff 0,transparent 70%),radial-gradient(60% 60% at 10% 100%,var(--lav) 0,transparent 72%),var(--lime)}
.k-c{background:radial-gradient(70% 60% at 80% 10%,#ffd9b8 0,transparent 70%),radial-gradient(60% 55% at 10% 100%,var(--vermil) 0,transparent 72%),var(--orange)}
.k-d{background:radial-gradient(70% 60% at 85% 10%,#ffffff 0,transparent 70%),radial-gradient(60% 55% at 10% 100%,#9f86d9 0,transparent 72%),var(--lav)}
.k-e{background:radial-gradient(70% 60% at 85% 10%,rgba(255,154,90,.7) 0,transparent 70%),radial-gradient(60% 55% at 10% 100%,rgba(201,179,232,.7) 0,transparent 72%),#4a2d1c;color:var(--cream)}
@media (max-height:800px) and (min-width:861px){
  .skills-sticky{padding-top:84px}
  .skills-left h2{font-size:2.3rem;margin-bottom:12px}
  .sk-btn{padding:8px 16px;font-size:1rem}
  .sk-more>p{font-size:.92rem}
  .sk-item.is-active .sk-more>p{padding-bottom:12px}
}
@media (max-width:860px){
  .skills{height:440vh}
  .skills-sticky{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start;gap:12px;padding:80px 0 20px}
  .skills-left{padding-inline:var(--gut);min-width:0}
  .skills-left h2{font-size:2.1rem;margin-bottom:10px}
  .sk-list{display:flex;overflow-x:auto;gap:8px;margin-inline:calc(var(--gut)*-1);padding:2px var(--gut) 8px;scrollbar-width:none}
  .sk-list::-webkit-scrollbar{display:none}
  .sk-item{flex:none;border-radius:99px}
  .sk-item.is-active{transform:none}
  .sk-btn{padding:6px 16px 6px 6px;font-size:.88rem;white-space:nowrap;gap:8px}
  .sk-more{display:none}
  .skills-visual{height:min(64vh,540px);margin-inline:var(--gut)}
  .sk-vis{}
  .sk-shape{top:40%;width:min(50%,200px)}
  .stickers li{background:#fff;font-size:.98rem;padding:10px 17px;max-width:64%;box-shadow:0 6px 16px rgba(60,36,21,.12)}
  .stickers li:nth-child(1){left:4%;top:3%}
  .stickers li:nth-child(2){right:4%;top:11%;bottom:auto}
  .stickers li:nth-child(3){left:4%;top:auto;bottom:158px}
  .stickers li:nth-child(4){right:4%;top:auto;bottom:200px}
  .sk-text{display:block;position:absolute;left:20px;right:20px;bottom:20px;padding:16px;border-radius:20px;background:var(--cream);color:var(--choc);}
  .sk-text h3{font-size:clamp(1.4rem,6vw,1.9rem);margin-bottom:6px}
  .sk-text p{font-size:.95rem}
}

/* Méthode : quatre tuiles */
.method{padding:clamp(60px,8vw,120px) 0;position:relative}
.steps{display:flex;justify-content:center;padding:20px 0 30px}
.step{position:relative;flex:0 1 300px;min-height:clamp(340px,28vw,390px);display:flex;flex-direction:column;gap:6px;padding:26px;border-radius:44px;background:#fff;margin-left:-22px;box-shadow:0 24px 44px -28px rgba(60,36,21,.35)}
.step:first-child{margin-left:0}
.js .step.tile-in{transition:opacity .9s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s),rotate .55s var(--ease),translate .55s var(--ease),box-shadow .4s}
.steps .step:hover,.steps .step:focus-within{rotate:0deg;translate:0 -16px;box-shadow:0 36px 56px -28px rgba(60,36,21,.45)}
.step:nth-child(1){rotate:-2.5deg;translate:0 12px}.step:nth-child(2){rotate:1.5deg;translate:0 -6px}.step:nth-child(3){rotate:-1.5deg;translate:0 8px}.step:nth-child(4){rotate:2.5deg;translate:0 -4px}
.st-tag{align-self:flex-start;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-weight:700;font-size:1.05rem;background:var(--bg)}
.step .art{position:relative;flex:1;min-height:150px;display:block}
.step .art .a3d{left:50%;top:50%;width:min(62%,170px);translate:-50% -50%}
.step h3{font-size:clamp(1.4rem,1.8vw,1.6rem)}
.step p{font-size:.93rem;font-weight:500;line-height:1.4}
@media (max-width:980px){.steps{flex-wrap:wrap;gap:18px}.step{flex:0 1 calc(50% - 12px);margin-left:0;rotate:0deg!important;translate:none!important}.steps .step:hover{translate:0 -8px!important}}
@media (max-width:560px){.step{flex-basis:100%;min-height:0}.step .art{min-height:120px}}

/* Réalisations : cartes hautes avec bulles */
.work{padding:clamp(60px,8vw,120px) 0;position:relative}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,22px)}
.case{position:relative;overflow:hidden;border-radius:var(--r);padding:clamp(18px,2vw,30px);display:flex;flex-direction:column;gap:16px;isolation:isolate;will-change:transform}
.case::before,.case::after{content:"";position:absolute;z-index:-1;background:rgba(255,255,255,.38)}
.case::before{width:70%;aspect-ratio:1;right:-22%;top:18%;border-radius:62% 38% 55% 45% / 45% 58% 42% 55%}
.case::after{width:42%;aspect-ratio:1;left:-12%;bottom:-8%;border-radius:45% 55% 38% 62% / 58% 42% 55% 45%;background:rgba(255,255,255,.22)}
.case h3{font-size:clamp(1.6rem,2.6vw,2.6rem);max-width:12em}
.bubble{align-self:flex-start;display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:6px 14px;border-radius:99px;background:#fff;font-weight:700;font-size:.85rem}
.bubble i{width:.7em;height:.7em;border-radius:50%;background:var(--vermil)}
.bubble .grp{font-weight:600;font-size:.78rem;padding:2px 9px;border-radius:99px;background:var(--lime)}
.shots{position:relative;aspect-ratio:16/10;margin:4px 0 14px}
.shot{position:absolute;display:block;object-fit:cover;border-radius:22px;background:#fff}
.shot.a{left:0;top:0;width:72%;height:88%}
.shot.b.land{right:0;bottom:0;width:48%;height:58%;rotate:3deg}
.shot.b.tall{right:3%;bottom:-4%;width:25%;height:96%;rotate:3deg;object-fit:cover;object-position:top;border-radius:18px}
.bubbles{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.bubbles li{padding:7px 14px;border-radius:99px;background:var(--cream);font-weight:600;font-size:.88rem;line-height:1.2}
.bubbles li:nth-child(odd){rotate:-2deg}.bubbles li:nth-child(even){rotate:2deg}
.bubbles li:nth-child(3n){background:var(--lime)}
.k-x1{background:linear-gradient(165deg,#ffd0b0,var(--orange) 55%,#ff7f4a)}
.k-x2{background:linear-gradient(165deg,#e9dcf8,var(--lav) 55%,#a98bdc)}
.k-x3{background:linear-gradient(165deg,#f8f8d6,var(--lime) 50%,#d6e29a)}
.k-x4{background:linear-gradient(165deg,#ffe6d2,var(--pink) 50%,#ffa66d)}
.k-x1 .bubble i{background:var(--choc)}.k-x2 .bubble i{background:var(--orange)}.k-x3 .bubble i{background:var(--lav)}
@media (max-width:760px){.cases{grid-template-columns:1fr}.shot.a{width:78%}}

/* Contact */
.contact{position:relative;background:var(--choc);color:var(--cream);padding:clamp(80px,11vw,150px) 0 calc(var(--r2) + clamp(50px,7vw,90px));border-radius:var(--r2) var(--r2) 0 0;overflow:clip}
.contact-glow{position:absolute;inset:auto -10% -30% 30%;height:80%;background:radial-gradient(circle at 60% 50%,rgba(255,107,61,.45),rgba(201,179,232,.28) 45%,transparent 70%);filter:blur(60px);pointer-events:none}
.contact-grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:40px 24px}
.contact-copy{grid-column:1 / span 6}
.contact-copy h2{font-size:clamp(2.5rem,5.8vw,5.8rem);color:var(--lime);margin-bottom:24px;max-width:8em}
.contact-copy>p{max-width:28em;margin-bottom:34px}
.mail{font-weight:700;display:inline-block;font-size:clamp(1.4rem,3vw,2.7rem);text-decoration:none;background:linear-gradient(var(--lime),var(--lime)) 0 100% / 100% 3px no-repeat;padding-bottom:4px;transition:background-size .4s var(--ease),color .3s;word-break:break-word}
.mail:hover{background-size:100% 100%;color:var(--choc)}
.phones{display:flex;flex-wrap:wrap;gap:12px 36px;margin:34px 0 20px}
.phones li{display:flex;flex-direction:column}
.phones span{font-size:.88rem;opacity:.7}
.phones a{font-weight:600;font-size:1.25rem;text-decoration:none}
.phones a:hover{text-decoration:underline}
.where{max-width:26em;opacity:.85;font-size:.98rem}

.form{grid-column:7 / span 6;background:var(--cream);color:var(--choc);border-radius:var(--r);box-shadow:var(--soft);padding:clamp(20px,3vw,40px);display:grid;gap:18px;align-self:start}
.form-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1}
.hp{position:absolute;left:-9999px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:7px;border:0;min-width:0}
.field label,.field legend{font-weight:700;font-size:.9rem}
.field input[type=text],.field input[type=email],.field textarea{width:100%;padding:13px 18px;border-radius:18px;background:#fff;transition:box-shadow .25s,transform .25s var(--ease)}
.field textarea{resize:vertical;min-height:130px}
.field input::placeholder,.field textarea::placeholder{color:rgba(60,36,21,.45)}
.field input:focus,.field textarea:focus{outline:none;transform:translate(-2px,-2px)}
.need-list{display:flex;flex-wrap:wrap;gap:8px}
.need-list label{position:relative;cursor:pointer}
.need-list input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.need-list span{display:inline-block;padding:8px 16px;border-radius:99px;background:#fff;font-weight:600;font-size:.9rem;transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.need-list label:hover span{transform:translateY(-2px)}
.need-list input:checked+span{background:var(--lime);transform:translate(-1px,-1px)}
.need-list input:focus-visible+span{outline:3px solid var(--vermil);outline-offset:2px}
.btn-send{justify-self:start;background:var(--vermil);color:var(--choc);font-size:1.05rem;padding:15px 26px}
.btn-send:disabled{opacity:.6;cursor:wait}
.form-note{min-height:1.4em;font-weight:600}
@media (max-width:900px){
  .contact-copy,.form{grid-column:1 / -1}
}
@media (max-width:520px){.row2{grid-template-columns:1fr}}

/* Pied de page */
.foot{position:relative;background:var(--lime);color:var(--choc);margin-top:calc(var(--r2)*-1);border-radius:var(--r2) var(--r2) 0 0;padding-top:clamp(50px,7vw,100px);overflow:clip}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1.2fr;gap:36px clamp(20px,3vw,48px)}
.foot-tag{font-size:clamp(1.6rem,2.8vw,2.6rem);line-height:1.05;letter-spacing:-.02em;max-width:11em;margin-bottom:22px}
.foot-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.foot-col h2{font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.04em;opacity:.6;margin-bottom:6px;text-transform:none}
.foot-col a{text-decoration:none;font-weight:600;font-size:1.05rem;background:linear-gradient(currentColor,currentColor) 0 100% / 0 2px no-repeat;transition:background-size .35s var(--ease)}
.foot-col a:hover{background-size:100% 2px}
.foot-col p{max-width:17em}
.foot-logo{display:block;width:min(1180px,100% - var(--gut)*2);margin:clamp(40px,7vw,100px) auto 0}
.foot-logo .logo .cls-2{fill:var(--vermil)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:clamp(24px,3vw,40px) 0;font-size:.92rem}
.foot-bottom a{font-weight:600}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1 / -1}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* Mentions légales */
.legal-top{display:flex;justify-content:space-between;align-items:center;padding:20px var(--gut)}
.legal-top .nav-logo{width:140px}
.legal{width:min(820px,100% - var(--gut)*2);margin:clamp(30px,6vw,80px) auto clamp(60px,9vw,120px)}
.legal h1{font-size:clamp(2.4rem,6vw,4.6rem);margin-bottom:clamp(24px,4vw,48px)}
.legal h2{font-size:clamp(1.4rem,2.4vw,2rem);margin:clamp(28px,4vw,48px) 0 12px}
.legal p,.legal li{margin-bottom:10px;max-width:42em}
.legal ul{list-style:disc;padding-left:1.3em}
.legal a{text-underline-offset:3px}
.todo{background:var(--lime);padding:1px 8px;border-radius:8px;font-weight:600}

/* Animations d'apparition (uniquement si le script est actif) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.js [data-split] .wi{display:inline-block;transform:translateY(112%) rotate(4deg);transform-origin:0 100%;transition:transform 1s var(--ease);transition-delay:calc(var(--i,0)*70ms + var(--d0,0ms))}
.js [data-split].in .wi{transform:none}
.js .tile-in{opacity:0;transform:translateY(60px) scale(.94);transition:opacity .9s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.js .tile-in.in{opacity:1;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.js .tile-in.in.tilting{transition:transform .12s linear}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .reveal,.js .tile-in,.js [data-split] .wi{opacity:1;transform:none}
  .js .manifest-text .mw{opacity:1}
  .marquee-track{transform:none}
}