.atelier{background:var(--ink);color:var(--cream);padding:64px max(6%,24px) 56px;overflow:hidden;text-align:center}
.atelier-inner{max-width:1380px;margin:auto}
.atelier .eyebrow{color:var(--yellow);font-size:clamp(12px,1.25vw,19px);letter-spacing:.24em;margin:0 0 22px}
.atelier h2{font:400 clamp(30px,3.4vw,54px)/1.18 Anton,Impact,sans-serif;text-transform:uppercase;margin:0;letter-spacing:.01em}
.atelier h2 span{display:block}
.atelier-rule{display:block;width:115px;height:5px;margin:21px auto;background:var(--yellow);border-radius:60% 30% 40% 20%;transform:rotate(-1deg)}
.atelier-intro{font-size:clamp(16px,1.55vw,23px);line-height:1.55;margin:0 auto 42px;max-width:1100px;text-wrap:balance}
.atelier-demo{display:grid;grid-template-columns:27% 10% 63%;align-items:center;text-align:center;margin:0 auto 38px;max-width:1190px}
.atelier figure{margin:0;min-width:0}
.atelier-identity{padding:0 4%}
.atelier-board{aspect-ratio:.9;background:var(--cream);color:var(--ink);border-radius:5px;position:relative;text-align:left;padding:7% 10%;overflow:hidden}
.atelier-aa{font:400 clamp(60px,10vw,156px)/1 Anton,Impact,sans-serif;letter-spacing:-.06em}
.atelier-board img{width:80%;height:53%;object-fit:contain;position:absolute;bottom:17%;right:7%;transform:rotate(-6deg)}
.atelier-swatches{position:absolute;left:11%;bottom:7%;display:flex;gap:12px}
.atelier-swatches i{width:clamp(18px,2.5vw,35px);aspect-ratio:1;background:var(--ink);border-radius:5px}
.atelier-swatches i:nth-child(2){background:var(--yellow)}.atelier-swatches i:nth-child(3){background:var(--pink)}
.atelier-arrow{width:100%;height:auto;align-self:center;margin-top:-55px;color:var(--pink);overflow:visible}
.atelier-arrow path{stroke:currentColor;stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.atelier-site{position:relative;padding:0 7% 0 0}
.atelier-browser{background:var(--cream);color:var(--ink);aspect-ratio:1.8;border-radius:10px;padding:2.4%;position:relative;text-align:left;overflow:hidden}
.atelier-chrome{height:28px;background:var(--ink);border-radius:5px;display:flex;align-items:center;gap:7px;padding:0 13px;position:relative;z-index:2}
.atelier-chrome i{width:8px;height:8px;border-radius:50%;background:var(--cream)}
.atelier-chrome::after{content:'';margin-left:auto;width:20px;height:8px;border-block:2px solid var(--cream)}
.atelier-page{height:calc(100% - 28px);position:relative;padding:8% 2%}
.atelier-page strong{position:relative;z-index:2;display:block;font:400 clamp(19px,3.7vw,58px)/1.05 Anton,Impact,sans-serif;white-space:nowrap}
.atelier-lines{position:relative;z-index:2;width:42%;margin-top:6%}
.atelier-lines i{display:block;height:7px;margin:10px 0;background:var(--ink)}.atelier-lines i:nth-child(2){width:75%}.atelier-lines i:nth-child(3){width:50%;height:3px}
.atelier-faux-button{display:block;width:25%;height:23px;border-radius:15px;background:var(--yellow);margin-top:6%;position:relative;z-index:2}
.atelier-art{position:absolute;inset:9% -3% -9% 43%;background:var(--pink);clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}
.atelier-art img{width:116%;height:100%;object-fit:contain;position:absolute;right:-3%;bottom:-3%;transform:rotate(-8deg)}
.atelier-phone{position:absolute;width:20%;aspect-ratio:.49;background:var(--cream);border:3px solid var(--ink);outline:3px solid var(--cream);border-radius:22px;right:0;bottom:10%;padding:23px 8px 8px;text-align:left;overflow:hidden}
.atelier-phone::before{content:'';position:absolute;top:8px;left:32%;width:36%;height:8px;background:var(--ink);border-radius:9px}
.atelier-phone strong{display:block;position:relative;z-index:2;color:var(--ink);font:400 clamp(11px,1.7vw,24px)/1.15 Anton,Impact,sans-serif}
.atelier-phone .atelier-lines{width:75%;margin-top:12%}.atelier-phone .atelier-lines i{height:3px;margin:6px 0}.atelier-phone .atelier-faux-button{width:50%;height:12px}
.atelier-phone .atelier-art{inset:55% -18% -6% 2%;z-index:0}.atelier-phone .atelier-art img{right:-4%;width:130%}
.atelier figcaption{padding-top:21px;font-size:clamp(14px,1.5vw,22px);line-height:1.5}
.atelier figcaption strong{display:block;font-size:clamp(22px,2.4vw,34px);color:var(--yellow);margin-bottom:1px}
.atelier-cta{display:inline-flex;align-items:center;justify-content:center;gap:22px;background:var(--yellow);color:var(--ink);border-radius:100px;padding:18px 32px;font-weight:800;font-size:clamp(17px,1.65vw,24px);border:2px solid transparent;transition:background .2s,transform .2s}
.atelier-cta:hover{background:var(--cream);transform:translateY(-2px)}.atelier-cta:focus-visible{outline-color:var(--cream)}
@media(min-width:1700px){.atelier{padding-top:85px;padding-bottom:75px}}
@media(max-width:700px){.atelier{padding:48px 22px}.atelier .eyebrow{letter-spacing:.14em;margin-bottom:20px}.atelier h2{font-size:clamp(27px,6vw,40px)}.atelier-intro{margin-bottom:30px}.atelier-demo{grid-template-columns:1fr;gap:20px;max-width:480px;margin-bottom:30px}.atelier-identity{width:60%;max-width:235px;margin:auto!important;padding:0}.atelier-aa{font-size:100px}.atelier-arrow{width:75px;height:50px;transform:rotate(75deg);margin:-8px auto}.atelier-site{width:100%;padding-right:8%}.atelier-page strong{font-size:clamp(24px,7vw,36px)}.atelier-chrome{height:20px;gap:5px;padding:0 8px}.atelier-chrome i{width:5px;height:5px}.atelier-page{height:calc(100% - 20px)}.atelier-lines i{height:4px;margin:7px 0}.atelier-faux-button{height:16px}.atelier-phone{border-radius:16px;bottom:15%;padding-top:20px}.atelier-phone strong{font-size:clamp(12px,3.3vw,19px)}.atelier figcaption{padding-top:16px;font-size:16px}.atelier figcaption strong{font-size:26px}.atelier-cta{padding:17px 24px;max-width:100%;font-size:17px}}
@media(prefers-reduced-motion:no-preference){.atelier.motion-ready .atelier-identity,.atelier.motion-ready .atelier-browser,.atelier.motion-ready .atelier-phone{opacity:0;transform:translateY(16px)}.atelier.motion-ready .atelier-arrow path{stroke-dasharray:150;stroke-dashoffset:150}.atelier.motion-ready.is-visible .atelier-identity{animation:atelier-enter .6s ease-out both}.atelier.motion-ready.is-visible .atelier-arrow path{animation:atelier-draw .55s .35s ease-out both}.atelier.motion-ready.is-visible .atelier-browser{animation:atelier-enter .65s .65s ease-out both}.atelier.motion-ready.is-visible .atelier-phone{animation:atelier-enter .6s 1s ease-out both}@keyframes atelier-enter{to{opacity:1;transform:translateY(0)}}@keyframes atelier-draw{to{stroke-dashoffset:0}}}
@media(prefers-reduced-motion:reduce){.atelier-cta{transition:none}.atelier-cta:hover{transform:none}}

/* A compact first service slide, sized to the viewport. */
#identite{padding:3dvh 5%;display:flex;align-items:center;justify-content:center}#identite .atelier-inner{width:100%;max-width:1200px}#identite .eyebrow{margin-bottom:1dvh}#identite h2{font-size:clamp(26px,5dvh,50px)}#identite h2 span{display:inline}#identite h2 span+span:before{content:' '}#identite .atelier-rule{margin:1.5dvh auto}#identite .atelier-intro{margin-bottom:2dvh}#identite .atelier-demo{max-width:min(1100px,120dvh);margin-bottom:2dvh}#identite .atelier-art img{transform:none;object-fit:contain;width:100%;height:100%;right:0;bottom:0}#identite .atelier-art{clip-path:none;background:var(--pink);inset:9% -3% -9% 48%}#identite .atelier-phone .atelier-art{inset:48% -10% 0 0}#identite .atelier-cta{padding:12px 24px;font-size:17px}
@media(max-width:700px){#identite .atelier-demo{grid-template-columns:28% 10% 62%;gap:0;margin:4dvh auto}#identite .atelier-identity{width:100%;padding:0}#identite .atelier-aa{font-size:15vw}#identite .atelier-arrow{transform:none;width:100%;height:auto;margin:0}#identite .atelier-site{width:100%}#identite .atelier-page strong{font-size:3.8vw}#identite .atelier-phone strong{font-size:2vw}#identite figcaption{font-size:11px;padding-top:12px}#identite figcaption strong{font-size:16px}#identite .atelier-swatches{gap:4px}#identite .atelier-swatches i{width:12px}#identite .atelier-phone{padding:13px 3px 3px;border-radius:9px}#identite .atelier-phone:before{top:5px;height:4px}#identite .atelier-phone .atelier-lines,#identite .atelier-phone .atelier-faux-button{display:none}}

/* Readable mini-sites: typography follows the device width, artwork breaks its frame. */
#identite .atelier-inner{max-width:1280px}
#identite #atelier-title{font:800 clamp(20px,2vw,30px)/1.2 Arial,sans-serif;letter-spacing:.24em;color:var(--yellow);margin:0 0 clamp(48px,9dvh,100px)}
#identite .atelier-demo{max-width:min(1200px,145dvh);margin:0 auto;grid-template-columns:25% 10% 65%}
#identite .atelier-browser{container-type:inline-size;overflow:visible;aspect-ratio:1.75;isolation:isolate}
#identite .atelier-page{padding:7% 2%;isolation:isolate}
#identite .atelier-page strong{width:53%;font-size:8cqw;line-height:1.1;white-space:normal;letter-spacing:0;z-index:4}
#identite .atelier-page strong span,#identite .atelier-phone strong span{display:block}
#identite .atelier-page .atelier-lines{width:38%;margin-top:5%}
#identite .atelier-page .atelier-faux-button{margin-top:4%}
#identite .atelier-page .atelier-art{inset:10% 0 -1% 58%;overflow:visible;z-index:3;background:var(--pink);border-radius:2px}
#identite .atelier-page .atelier-art img{max-width:none;width:118%;height:145%;object-fit:contain;object-position:center bottom;right:-8%;bottom:0}
#identite .atelier-phone{container-type:inline-size;width:23%;z-index:5;bottom:9%;padding:24px 6px 6px;aspect-ratio:.49}
#identite .atelier-phone strong{font-size:15cqw;line-height:1.18;letter-spacing:0;white-space:normal;width:100%}
#identite .atelier-phone .atelier-art{inset:46% 0 0;overflow:hidden;border-radius:0 0 15px 15px}
#identite .atelier-phone .atelier-art img{width:100%;height:100%;object-fit:cover;object-position:top center}
#identite .atelier-site figcaption{padding-right:10%}
@media(max-width:700px){
 #identite{padding:4dvh 6%}
 #identite #atelier-title{font-size:22px;margin-bottom:6dvh}
 #identite .atelier-demo{grid-template-columns:1fr;gap:2dvh;max-width:440px}
 #identite .atelier-identity{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;max-width:none}
 #identite .atelier-board{width:26%;flex-shrink:0;padding:2% 3%}
 #identite .atelier-aa{font-size:13vw}
 #identite .atelier-identity figcaption{text-align:left;padding-top:0;max-width:170px;font-size:13px}
 #identite .atelier-arrow{display:none}
 #identite .atelier-site{margin-top:4dvh;width:100%;padding-right:10%}
 #identite .atelier-page strong{font-size:8cqw}
 #identite .atelier-phone{width:24%;padding:14px 4px 4px;border-radius:12px}
 #identite .atelier-phone strong{font-size:15cqw}
 #identite .atelier-site figcaption{padding-top:18px;font-size:14px}
}
@media(max-width:700px) and (max-height:650px){#identite #atelier-title{margin-bottom:3dvh}#identite .atelier-demo{max-width:350px}#identite .atelier-board{width:22%}#identite .atelier-site{margin-top:2dvh}}