@import"./styles/reset.css";@import"./styles/variables.css";@import"./styles/animations.css";@import"./styles/lib.css";.link{border-radius:.6rem}body{position:relative;min-height:100dvh;background:linear-gradient(180deg,hsl(from var(--clr-light) h s l / .6),transparent 10% 90%,hsl(from var(--clr-light) h s l / .6))}body>header{position:relative;aside{position:fixed;z-index:100;inset:1rem 1rem auto auto;@media(width<40rem){flex-direction:column}.link{padding:1rem .6rem;display:flex}.link img{@media(width<40rem){display:none}}}h1{padding:1rem;width:fit-content;@media(width>40rem){padding:1rem 4rem}}}body>main{margin:1rem auto;>*{margin:1rem auto;width:min(80rem,calc(100% - 1rem))}}body>footer{margin-top:2rem;padding:.2rem 2rem}.cta .link{display:block;margin-block:2rem;padding:2rem;width:100%;text-align:center;font-size:2rem;transition:all .2s;@media(hover){&:hover{font-style:italic}}}.description{margin-block:2rem;padding-inline:2rem;p{font-size:1.2rem;&:first-of-type{text-indent:2rem}}}.exemples{h4{cursor:unset}>div.grid{margin-block:1rem;cursor:pointer;a{position:relative;display:block;width:100%;height:400px;text-decoration:none;color:#000;background:var(--art-img) no-repeat;background-size:cover;background-position:center;@media(width>40rem){background-size:60% 100%;background-position:left}div{position:absolute;inset:auto 0 0;width:100%;flex-direction:column;background:var(--clr-light);text-align:center;@media(width>40rem){padding-inline:6rem 0;inset:0 0 0 auto;width:70%;clip-path:polygon(0 0,100% 0,100% 100%,30% 100%);background:linear-gradient(90deg,transparent,var(--clr-light) 40%)}}div>*{width:80%}div h4{border-radius:.6rem;background:conic-gradient(from 270deg at 10% 50%,var(--clr-dark),transparent,var(--clr-dark))}}}>div.grid:nth-of-type(2n){a{@media(width>40rem){background-size:60% 100%;background-position:right}}div{@media(width>40rem){padding-inline:0 6rem;inset:0 auto 0 0;clip-path:polygon(0 0,100% 0,70% 100%,0 100%);background:linear-gradient(270deg,transparent,var(--clr-light) 40%)}}div h4{border-radius:.6rem;background:conic-gradient(from 90deg at 90% 50%,var(--clr-dark),transparent,var(--clr-dark))}}}#contact{margin-block:2rem;+p{text-align:right}.flex{flex-wrap:wrap}li{border:.2rem solid var(--clr-dark);border-radius:.6rem;transition:all .2s;@media(hover){&:hover{rotate:30deg}}}}