:root{--accent:#ffb400;--link:#3498db;--link-hover:#1d6fa5;--primary-hover:#217dbb;--text:#333;--muted:#777;--dark:#111;--gray-bg:#ecf0f1;--line:rgb(0 0 0 / .1);--gutter:20px;--nav-height:80px;--radius:2px}*,*::before,*::after{box-sizing:border-box}html{background:var(--dark);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:77px;scrollbar-gutter:stable;&:has(dialog[open]) { overflow:hidden; }}body{position:relative;margin:0;background:var(--dark);color:var(--text);font:16px/1.5 poppins,helvetica neue,Helvetica,Arial,sans-serif}.no-anim *,.no-anim *::before,.no-anim *::after{transition:none!important;animation:none!important}h1,h2,h3,h4,h5{font-weight:500;line-height:1.1;& small { font-weight: normal; line-height: 1; color: var(--muted); }}h1,h2,h3{margin:24px 0 12px;& small { font-size: 65%; }}h4,h5{margin:12px 0;& small { font-size: 75%; }}h1{font-size:41px}h2{font-size:34px}h3{font-size:28px}h4{font-size:20px}h5{font-size:16px}p{margin:0 0 12px}ul{margin:0 0 12px;& ul { margin-bottom: 0; }}small{font-size:87%}hr{height:0;margin:48px 0;border:0;border-top:1px solid var(--line)}a{color:var(--link);text-decoration:none;&:hover,&:focus { color:var(--link-hover); text-decoration:underline; }}:focus:not(:focus-visible){outline:none}img{vertical-align:middle}button,input,textarea{margin:0;font:inherit;color:inherit}button{cursor:pointer}label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:500}.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:var(--muted)}.img-responsive{display:block;max-width:100%;height:auto}.img-circle{border-radius:50%}.spacer{height:40px}@media(min-width:768px){.xs-only{display:none}}@media(min-width:992px){.lt-md{display:none}}@media(max-width:991px){.md-up{display:none}}.container{margin-inline:auto;padding-inline:var(--gutter);@media(min-width:768px){width: 760px;}@media(min-width:992px){width: 980px;}@media(min-width:1200px){width: 1180px;}}.row{display:flex;flex-wrap:wrap;margin-inline:calc(-1 * var(--gutter));& > * { flex: 0 0 100%; min-width: 0; } & > hr { margin-top: 36px; }}[class*=" col-"],[class^=col-]{position:relative;min-height:1px;padding-inline:var(--gutter)}.col-sm-2{--sm:2}.col-sm-4{--sm:4}.col-sm-6{--sm:6}.col-sm-8{--sm:8}.col-sm-10{--sm:10}.col-md-4{--md:4}.col-md-6{--md:6}.col-lg-12{--lg:12}@media(min-width:768px){.row>[class*=col-sm-]{flex-basis:calc(var(--sm)/12 * 100%)}.col-sm-offset-2{margin-left:calc(2/12 * 100%)}}@media(min-width:992px){.row>[class*=col-md-]{flex-basis:calc(var(--md)/12 * 100%)}}@media(min-width:1200px){.row>[class*=col-lg-]{flex-basis:calc(var(--lg)/12 * 100%)}}.btn{display:inline-block;min-width:180px;padding:8px 12px;border:1px solid transparent;border-radius:var(--radius);font-size:16px;font-weight:500;line-height:1.5;text-align:center;vertical-align:middle;white-space:nowrap;cursor:pointer;user-select:none;touch-action:manipulation;&:hover,&:focus { text-decoration:none; } & .fas { margin-left:5px; }}.btn-primary{color:#fff;background:var(--link);border-color:#258cd1;&:hover,&:focus,&:active { color:#fff; background:var(--primary-hover); border-color:#1c699d; } &:active { box-shadow:inset 0 3px 5px rgb(0 0 0/.125); }}.btn-outline{color:#fff;background:0 0;border:2px solid #fff;transition:all 75ms;&:hover,&:focus,&:active { color:var(--accent); border-color:var(--accent); } &:active { scale:.95; }}@media(max-width:767px){.sm-block{display:block;width:100%}}.form-group{margin-bottom:15px}.form-extra{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.form-horizontal .form-group{display:flex;flex-wrap:wrap;margin-inline:calc(-1 * var(--gutter));& > * { flex: 0 0 100%; } @media (min-width: 768px) { & > [class*="col-sm-"] { flex-basis: calc(var(--sm) / 12 * 100%); } }}@media(min-width:768px){.form-horizontal .control-label{margin-bottom:0;padding-top:9px;text-align:right}}.form-control{display:block;width:100%;height:42px;padding:8px 12px;color:#555;background:#fff;border:1px solid #ccc;border-radius:var(--radius);box-shadow:inset 0 1px 1px rgb(0 0 0/.075);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;&:focus { border-color:#66afe9; outline:0; box-shadow:inset 0 1px 1px rgb(0 0 0/.075),0 0 8px rgb(102 175 233/.6); }}textarea.form-control{height:auto;overflow:auto}.navbar{--t:0;position:fixed;inset:0 0 auto;z-index:1030;min-height:var(--nav-height);margin-top:-3px;border-bottom:1px solid transparent;font-size:14px;font-weight:600;text-transform:uppercase;@media(min-width:768px){margin-top: calc(20px - var(--t) * 23px); &.solid{z-index:900;background:var(--dark);box-shadow:0 1px 5px rgb(17 17 17/.5)}}}.navbar-compact{--t:1}.navbar-header{display:flow-root;position:relative;z-index:2;.solid & { background: var(--dark); } @media (min-width: 768px) { float: left; }}.navbar .container>.navbar-header,.navbar .container>.navbar-collapse{margin-inline:calc(-1 * var(--gutter));@media(min-width:768px){margin-inline: 0;}}.navbar-brand{float:left;height:var(--nav-height);padding:28px 20px;line-height:24px;& > img { display: block; position: relative; top: -16px; margin-right: -50px; transform-origin: left center; scale: .8; } @media (min-width: 768px) { margin-left: -20px; & > img { scale: calc(1 - var(--t) * .2); } }}.navbar-toggle{position:relative;top:2px;float:right;margin:23px 20px 23px 0;padding:9px 10px;background:0 0;border:1px solid transparent;border-radius:var(--radius);&:hover,&:focus { background:rgb(255 255 255/.1); outline:0; } & .icon-bar { display:block; width:22px; height:2px; border-radius:1px; background:#fff; transition:all 300ms; & + .icon-bar { margin-top:4px; } } &[aria-expanded="true"] .icon-bar { &:nth-child(1) { position:relative; top:6px; rotate:45deg; } &:nth-child(2) { rotate:45deg; opacity:0; } &:nth-child(3) { position:relative; top:-6px; rotate:-45deg; } } @media (min-width:768px) { display:none; }}.navbar-collapse{position:relative;z-index:1;top:calc(-1 * var(--nav-height));margin-bottom:calc(-1 * var(--nav-height));padding-inline:var(--gutter);background:rgb(17 17 17/.9);transition:all 300ms;& .fas { width: 18px; margin: 0 4px 0 5px; font-size: 16px; text-align: center; } @media (max-width: 767px) { display: grid; grid-template-rows: 0fr; overflow: hidden; & > ul { min-height: 0; } &.open { grid-template-rows: 1fr; max-height: 340px; overflow-y: auto; box-shadow: 0 1px 8px rgb(0 0 0 / .4); } } @media (min-width: 768px) { top: 2px; margin-bottom: 0; padding-inline: 0; background: transparent; & .fas { display: none; } }}.navbar-nav{margin:0 -20px;padding:0;list-style:none;& > li > a { display: block; position: relative; padding: 10px 15px; line-height: 24px; color: rgb(255 255 255 / .66); border-top: 1px solid rgb(255 255 255 / .1); transition: all 100ms; &:hover, &:focus, &[aria-current] { color: #fff; text-decoration: none; } } @media (min-width: 768px) { display: flex; float: right; margin: 0 -10px 0 0; & > li > a { padding-block: 28px; border-top-color: transparent; } }}.fix-01{height:var(--nav-height);@media(min-width:768px){display: none;}}.bg-gray,.bg-white{padding-block:50px}.bg-gray{background:var(--gray-bg)}.navbar-compact-offset{padding-top:128px}.bg-white{position:relative;z-index:2;background:#fff;box-shadow:0 1px 5px rgb(17 17 17/.1)}h4.section>.fa-play{color:var(--accent)}.cover{--p:1;position:relative;z-index:2;height:100svh;min-height:448px;overflow:hidden;opacity:var(--p);background:radial-gradient(125% 115% at 80% 16%,#1b1739 0%,#14112c 22%,#0c0a1c 45%,#07060f 72%,#040309 100%);& h1 { font-size: 2.75em; font-weight: 300; letter-spacing: -2px; & small { line-height: 20px; letter-spacing: -1px; color: #fff; font-weight: 300; } @media (max-width: 767px) { margin-top: 40px; font-size: 30px; } }}#plexus{position:absolute;inset:0;& canvas { position: absolute; will-change: transform; }}.cover-layer{position:relative;z-index:1;height:100%;background:rgb(0 0 0/.2)}.cover-content{position:absolute;top:50%;width:100%;opacity:var(--p);color:#fff;text-align:center;translate:0 -50%;& p { max-width: 720px; margin: 0 auto; } @media (min-width: 1200px) { font-size: 1.3em; & p { max-width: 960px; } }}hr.pm{width:64px;height:2px;margin:30px auto;border:none;background:var(--accent)}.offer{display:flex;gap:10px;& img { flex: none; }}.tech-container{padding-bottom:15px;background:#fff}.carousel{--per-view:1;display:grid;grid-auto-flow:column;grid-auto-columns:calc(100%/var(--per-view));overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;&::-webkit-scrollbar { display:none; } & .item { scroll-snap-align:start; text-align:center; & img { width:60%; margin:0 auto 10px; } } @media (min-width:480px) { --per-view:2; } @media (min-width:769px) { --per-view:3; } @media (min-width:980px) { --per-view:4; } @media (min-width:1200px) { --per-view:5; }}#work{user-select:none;& .item { position: relative; margin-bottom: 40px; overflow: hidden; border-radius: var(--radius); box-shadow: 0 1px 4px rgb(0 0 0 / .5); cursor: pointer; transition: all 200ms; & img { transition: all 150ms; } & .desc { position: absolute; inset: 0; padding: 20px; color: #fff; background: rgb(0 0 0 / .75); text-shadow: 0 0 10px #000; translate: 0 -100%; transition: all 200ms; & .text-muted { color: #fff; opacity: .65; } } & a { color: #fff; text-decoration: none; &:hover { color: var(--accent); } } &.open { cursor: default; & img { filter: blur(4px); } & .desc { translate: 0; } } }}.contact-card{display:flex;flex-wrap:wrap;& > * { flex: 0 0 100%; padding-inline: var(--gutter); } & strong { font-weight: 600; } @media (min-width: 768px) { & > * { flex-basis: calc(2 / 3 * 100%); } }}.contact-photo{max-width:220px;margin-inline:auto;@media(min-width:768px){flex-basis: calc(1 / 3 * 100%); margin-inline: 0;}}#ambi{background:url(/assets/img/ambigram.png)50%/cover;transition:all 300ms;& img { transition: all 300ms; } &.open { animation: rot 4s infinite; & img { scale: 0; opacity: 0; } }}@keyframes rot{from,30%,70%{rotate:0}to{rotate:180deg}}#map{height:142px;border-radius:var(--radius);background:url(/assets/img/map-caen.png)0 0/cover}.contact-intro{margin-top:40px}#m{user-select:none;&::before { content:'arnaud'; }}.modal{width:auto;max-width:none;margin:10px;padding:0;overflow:visible;background:#fff;border:1px solid rgb(0 0 0/.2);border-radius:var(--radius);box-shadow:0 3px 9px rgb(0 0 0/.5);color:var(--text);&[open] { animation: modal-in .3s ease-out; } &::backdrop { background: rgb(0 0 0 / .5); animation: fade-in .15s linear; } @media (min-width: 768px) { width: 600px; margin: 30px auto auto; box-shadow: 0 5px 15px rgb(0 0 0 / .5); }}.modal-header,.modal-body,.modal-footer{padding:15px}.modal-header{overflow:hidden}.modal-body{padding-inline:20px}.modal-footer{text-align:center;& .btn { min-width: 80px; margin-bottom: 24px; }}.close{float:right;margin-top:-2px;padding:0;font-size:24px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;background:0 0;border:0;opacity:.2;&:hover,&:focus { opacity:.5; }}@keyframes modal-in{from{translate:0 -25%;opacity:0}}@keyframes fade-in{from{opacity:0}}.site-footer{margin-block:25px 10px;color:#888}.page{padding-block:40px;background:#fff}