@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap') layer(fonts);@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap') layer(fonts);@import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap') layer(fonts);@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css') layer(fonts);@import url('/fonts/l/ligaturesymbols/font.css') layer(fonts);@import url('/css/photography/reset.css') layer(reset);@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/dark.min.css') layer(utilities);@import url('https://cdn.jsdelivr.net/npm/@bossone0013/nu-cookie-consent-banner@1.0.3/css/cookie-consent.min.css') layer(utilities);@import url('/css/w2ui.min.css') layer(utilities);@import url('/css/avatar.min.css');@import url('/css/rpi.min.css');@import url('/css/udoo.min.css');@import url('/css/properties.min.css');@import url('/css/keyframes.min.css');@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}:root{--color-red:red;--color-green:#7cb342;--color-orange:#f0581c;--color-blue:#4481db;--primary-color:#373c40;--secondary-color:#8c8b77;--primary-text-color:#373c40;--primary-shaded-text-color:#454a4e;--secondary-text-color:#fff;--secondary-shaded-text-color:#b7b7b7;--accent-color:var(--color-orange);--shaded-color:hsl(from var(--primary-color) h s 50%);--background-color:hsl(from var(--secondary-color) h s 85%);--alt-background-color:var(--primary-color);--text-color:var(--primary-shaded-text-color);--alt-text-color:var(--secondary-shaded-text-color);--title-text-color:var(--primary-text-color);--title-alt-text-color:var(--secondary-text-color);--border-color:var(--secondary-color);--alt-border-color:var(--primary-color);--small-space:1rem;--medium-space:3rem;--large-space:6rem;--largest-space:10rem;--button-height:48px;--ccb-font-sm:1rem;--ccb-font-base:1.125rem;--ccb-font-lg:1.25rem;--ccb-font-xl:1.5rem;--ccb-font-2xl:2rem;--ccb-primary-color:var(--accent-color);--ccb-primary-hover:hsl(from var(--accent-color) h s 85%);--ccb-bg-primary:var(--alt-background-color);--ccb-text-primary:var(--alt-text-color);--ccb-bg-secondary:hsl(from var(--alt-background-color) h s 25%);--ccb-border-color:var(--border-color)}::selection{background-color:var(--shaded-color);color:var(--alt-text-color)}:focus-visible{outline-color:var(--accent-color);outline-style:solid}::view-transition-old(root){animation-name:slide-out}::view-transition-new(root){animation-name:slide-in}html:not([lang="fr"]) .lang_fr{display:none !important}html[lang="fr"] .lang_en{display:none !important}*{scroll-behavior:smooth;border-color:var(--border-color);accent-color:var(--shaded-color);interpolate-size:allow-keywords}body{font-family:"Roboto",sans-serif;text-rendering:optimizeLegibility;text-align:center;background-color:var(--background-color);color:var(--text-color);overflow-x:hidden;font-smooth:always;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;gap:0;justify-content:flex-start;min-height:100svh}main{overflow-x:clip}h1,h2,h3,h4,h5,h6{font-family:'Bebas Neue',sans-serif;color:var(--title-text-color);letter-spacing:-0.05ch}p,li{line-height:1.6;max-width:80ch;font-size:1.5rem}button,.button,nav a{letter-spacing:.25ch}hr{border:0;border-top:1px solid var(--secondary-color);margin:2.5rem auto;width:55%;opacity:.18;background:0;height:0}.flag::before{width:21px;height:14px}.flag-en::before{content:url(/images/flags/en.png)}.flag-fr::before{content:url(/images/flags/fr.png)}.big-title{font-size:4rem;font-weight:900}.medium-title{font-size:2.5rem;font-weight:700}h3.big-title{font-size:8rem;margin:0 0 var(--medium-space) 0;line-height:1;min-height:8rem}@media(prefers-reduced-motion:no-preference){h3.big-title>span{position:relative;display:flex;justify-content:center;overflow:hidden}h3.big-title>span span{opacity:0;position:relative;min-width:.25ch}h3[data-animated="true"].big-title span span{animation:char-popup 500ms ease-in-out forwards}}h4.big-title{font-size:6rem}body>hr,main>hr{display:none}img{transition:opacity linear .5s}img:not([src]){opacity:0}.w2ui-reset{font-family:"Roboto",sans-serif;color:var(--text-color)}.w2ui-reset input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]),.w2ui-reset textarea{background-color:var(--background-color)}a{color:hsl(from var(--text-color) h 30% 25%);user-select:none}.articles h2{font-size:3.5rem;margin-bottom:var(--large-space);color:var(--title-text-color);text-transform:uppercase;letter-spacing:.1em;position:relative;display:inline-block}.articles h2::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:60px;height:3px;background:linear-gradient(90deg,var(--accent-color),var(--color-blue));border-radius:2px}.article-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:var(--medium-space)}.article-summary{background:linear-gradient(135deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05));border:1px solid rgba(255,255,255,0.1);border-radius:15px;padding:var(--medium-space);transition:all .3s ease;position:relative;overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.article-summary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transition:left .5s ease}.article-summary:hover::before{left:100%}.article-summary:hover{transform:translateY(-8px);box-shadow:0 15px 35px rgba(0,0,0,0.15);border-color:var(--accent-color)}.article-summary .title{color:var(--title-text-color);text-decoration:none;font-size:1.3rem;font-weight:600;line-height:1.4;display:block;margin-bottom:var(--small-space);transition:color .3s ease}.article-summary:hover .title{color:var(--accent-color)}.article-summary .date{color:var(--primary-text-color);font-size:1.1rem;font-style:italic;opacity:.8;display:flex;align-items:center;gap:.5rem}.article-summary .date::before{content:'📅';font-size:1.1rem}@media(max-width:768px){.list-view{padding:var(--small-space)}.articles h2{font-size:2.5rem;margin-bottom:var(--medium-space)}.article-list{grid-template-columns:1fr;gap:var(--small-space)}.article-summary{padding:var(--small-space)}.article-summary .title{font-size:1.1rem}}.article-summary:hover{background:linear-gradient(135deg,rgba(68,129,219,0.1),rgba(255,0,0,0.05))}a.button,a.hire_me_button{position:relative;z-index:+1;display:inline-grid;justify-content:center;align-items:center;font-family:"Roboto",sans-serif;border:1px solid var(--alt-border-color);background-color:hsl(from var(--alt-background-color) h s 40%);color:var(--title-alt-text-color);padding:2px 40px;margin-block:var(--large-space) var(--medium-space);border-radius:0;height:var(--button-height);background-image:none;box-shadow:none;text-transform:uppercase;text-decoration:none;font-weight:600;transition:all ease-in-out .25s}a.hire_me_button{background-color:var(--accent-color);border-color:hsl(from var(--accent-color) h s 55%)}a.button:hover,a.hire_me_button:hover{border:1px solid var(--border-color);background-color:var(--background-color);color:var(--text-color);cursor:pointer}@media(prefers-reduced-motion:no-preference){a.button:hover,a.hire_me_button:hover{box-shadow:2px 2px 6px 1px var(--alt-background-color);transform:translateY(-4px)}}a.hire_me_button:hover{background-color:hsl(from var(--accent-color) h s 55%);color:var(--title-alt-text-color);border-color:var(--accent-color)}a.previous span::before{content:'<';margin-right:1ch;font-size:1.5em}a.next span::after{content:'>';margin-left:1ch;font-size:1.5em}a.home span{display:none}a.home::after{font-size:1.5em}a.brand{color:hsl(from var(--accent-color) calc(h + 180) s l);transition:color ease-in-out .25s}a.brand:hover{color:hsl(from var(--accent-color) calc(h + 180) s 80%)}a.brand::before{font-family:"Font Awesome 6 Brands";margin-right:.5ch}a[title="facebook"].brand::before{content:'\f09a'}a[title="instagram"].brand::before{content:'\e055'}a[title="twitter"].brand::before{content:'\e61a'}a[title="flickr"].brand::before{content:'\f16e'}a[title="500px"].brand::before{content:'\f26e'}div.images-grid{display:grid;grid-auto-flow:column;gap:var(--small-space)}div.images-grid.logos{margin:var(--large-space) var(--medium-space);position:relative;justify-items:center;z-index:+1;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);.logo{filter:drop-shadow(2px 4px 6px hsl(from var(--alt-background-color) h s 5% / .5));& img{width:max(4svw,28px);min-height:max(4svw,28px)}&:nth-child(1){grid-column:1}&:nth-child(2){grid-column:2}&:nth-child(3){grid-column:3}&:nth-child(4){grid-column:4}}.logo::after{content:attr(data-title);display:block;text-align:center;font-weight:600}.tool_notes{grid-area:text;display:none}}div.images-grid.nfts{position:relative;grid-auto-flow:dense;grid-template-columns:repeat(5,1fr);margin-inline:var(--small-space);margin-top:var(--medium-space);& h4{grid-column:1/-1}.nft{width:calc(15svw + var(--small-space) * 2);aspect-ratio:1;.nft-front{border-radius:50%}.nft-back{font-size:calc((15svw + var(--small-space) * 2) / 10);font-weight:700;& span{display:block}& span:nth-child(2){font-size:calc((12svw + var(--small-space) * 2) / 10)}}}}div.images-grid.portofolio{position:relative;z-index:+1;justify-content:center;margin-block:var(--large-space);padding-left:40%;gap:0;.photo{grid-column:span 2;grid-row:span 1;width:15rem;aspect-ratio:1;filter:drop-shadow(2px 4px 6px hsl(from var(--alt-background-color) h s 5% / .5));margin-left:calc(-20% * var(--i));& img{background-color:var(--alt-background-color);background-image:url(/images/camera.png);background-size:cover;clip-path:polygon(20% 20%,100% 20%,80% 80%,0 80%);object-fit:cover;width:200%;height:200%;transition:clip-path .5s ease}}.photo:hover{& img{clip-path:polygon(0 10%,100% 10%,100% 90%,0 90%)}}.photo:hover+.photo{filter:none;& img{clip-path:polygon(20% 20%,100% 20%,80% 80%,20% 80%)}}}pre>code{display:block;text-align:left;white-space:pre;position:relative;padding:var(--medium-space) var(--small-space);margin:var(--medium-space) auto;overflow:auto;border-radius:8px;--code-bg-color:hsl(from var(--alt-background-color) h s 20%);background-color:var(--code-bg-color);border:solid 8px var(--code-bg-color);color:var(--alt-text-color);max-width:90%;box-shadow:2px 2px 6px 1px var(--alt-background-color);font-size:1.2rem;line-height:1.4;scrollbar-width:thin;scrollbar-color:var(--shaded-color) var(--alt-background-color)}.copy-code-button{position:absolute;top:8px;right:36px;background:transparent;color:var(--title-alt-text-color);border:0;padding:0;font-size:1.5rem;border-radius:0;cursor:pointer;opacity:.95;transition:transform .12s ease,opacity .12s ease;z-index:20}.copy-code-button:hover{transform:translateY(-2px)}.copy-code-button:active{transform:translateY(0)}.copy-code-button.copied{background:var(--color-green)}.modal-container{display:none;position:fixed;z-index:999;padding-block:10%;left:0;top:0;width:100%;height:100%;overflow:hidden;background-color:#000000;background-color:rgba(0,0,0,0.4);align-content:center;backdrop-filter:blur(4px);.modal{box-shadow:8px 8px 8px 0 #0005;margin:auto;max-width:80%;width:fit-content;height:fit-content;animation-name:zoom-reveal;animation-duration:.6s;display:flex;flex-direction:column;align-items:center;background-color:hsl(from var(--primary-color) h s 20%);border-radius:4px 4px 0 0;.modal-caption{flex-grow:1;padding-left:8px}.modal-toolbar{display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:var(--alt-background-color);border-radius:4px 4px 0 0;justify-items:center;padding-top:4px;color:var(--alt-text-color);width:100%;span.close{display:block;width:24px;height:24px;align-content:center;cursor:pointer;justify-self:end;overflow:hidden;transition:all ease .2s}span.close:hover{font-size:1.6em;margin-block:-0.2em .2em}}.modal-content{display:block;border:2px solid var(--alt-background-color)}}}@media(prefers-reduced-motion:no-preference){div.images-grid.nfts{.nft{width:calc(20svw + var(--small-space) * 2);position:relative;transform-style:preserve-3d;perspective:1000px;--medal-color:gold;.nft-front,.nft-back{border-radius:50%;position:absolute;width:20svw;inset:var(--small-space);transition:transform linear 1s;transform-style:preserve-3d;backface-visibility:hidden;border:1px solid var(--medal-color);box-shadow:0 0 6px 0 var(--alt-background-color),inset 0 0 4px 0 var(--medal-color)}.nft-front{transform:rotate3d(0,1,0,0)}.nft-back{display:flex;flex-direction:column;justify-content:center;align-items:center;background:repeating-radial-gradient(circle at center,#0000 2px,hsl(from #000 h s l / .05) 3px,hsl(from #000 h s l / .05) 5px),linear-gradient(-45deg,hsl(from #000 h s l / .1),var(--medal-color),hsl(from #000 h s l / .1)),linear-gradient(45deg,hsl(from var(--medal-color) h s 30%),var(--medal-color) 50%,hsl(from var(--medal-color) h s 30%) 100%);color:#0000006f;text-shadow:1px 1px var(--medal-color);transform:rotate3d(0,1,0,-180deg);font-size:calc((20svw + var(--small-space) * 2) / 10)}&:hover .nft-front{transform:rotate3d(0,1,0,180deg)}&:hover .nft-back{transform:rotate3d(0,1,0,0)}&:hover{animation:zIndexFix 1s linear;z-index:5 !important}}.nft:nth-of-type(1){left:calc(100% + var(--small-space)*2);scale:.75}.nft:nth-of-type(2){left:calc(50% + var(--small-space));scale:.85}.nft:nth-of-type(3){z-index:2}.nft:nth-of-type(4){left:calc(-50% - var(--small-space));scale:.85;z-index:1}.nft:nth-of-type(5){left:calc(-100% - var(--small-space)*2);scale:.75;z-index:0}}}#mainToolbar{position:absolute;top:0;left:0;right:0;padding:var(--small-space);background:transparent;.w2ui-tb-button{border:0;color:var(--alt-text-color);&:hover{cursor:pointer}}.w2ui-tb-button:hover,.w2ui-tb-button.checked{background-color:hsl(from var(--alt-background-color) h s l / .25)}.w2ui-tb-text{color:var(--alt-text-color)}.w2ui-tb-text::after{content:'\25BC';font-size:10px;color:var(--alt-text-color);padding-left:var(--small-space)}}#mainHead{z-index:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;background-color:var(--alt-background-color);background-size:cover;padding-top:50px;padding-bottom:200px;--spot-x-position:calc(max(300px, 40vw) * cos(calc(1deg * var(--animated-hue))));--spot-y-position:calc(max(300px, 40vw) * sin(calc(1deg * var(--animated-hue))));background:radial-gradient(circle at calc(50% + var(--spot-x-position)) calc(50% + var(--spot-y-position)), hsl(from var(--accent-color) calc(h + var(--animated-hue)) 100% l / .25), hsl(from var(--accent-color) h 100% l / .05)), radial-gradient(circle at calc(50% - var(--spot-x-position)) calc(50% - var(--spot-y-position)), hsl(from var(--accent-color) calc(h + var(--animated-hue) + 180) 100% l / .25), hsl(from var(--accent-color) h 100% l / .05)), radial-gradient(circle at bottom, var(--alt-background-color), hsl(from var(--alt-background-color) h s l / 0.25) 90%), linear-gradient(0deg, hsl(from var(--alt-background-color) h s l /.4) 1px, #0000 1px 45px) 50% 50% / 45px 45px, linear-gradient(90deg, hsl(from var(--alt-background-color) h s l /.4) 1px, #0000 1px 45px) 50% 50% / 45px 45px, linear-gradient(0.5turn, black, var(--alt-background-color));color:var(--alt-text-color);view-transition-name:header;&[data-animated="true"]{animation:color-spotlight 60s linear infinite;@media(prefers-reduced-motion:reduce){animation:none}}& h1 span,& h2 span{color:var(--title-alt-text-color)}& h1 span{font-weight:900;font-size:12rem;text-transform:uppercase;line-height:1.1}& h2.big-title{padding-inline:var(--medium-space)}& em{font-family:"Tangerine",cursive;font-size:clamp(3rem,2.5svw,4rem)}& nav{margin-top:2rem;width:calc(100% - var(--medium-space) * 2);margin-inline:var(--medium-space)}& nav ol{display:flex;gap:10px;list-style-type:none;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600;padding:0}& a{text-decoration:none;display:inline-block;color:var(--alt-text-color)}& nav a{display:flex;justify-content:center;align-items:center;height:var(--button-height);border:1px solid var(--alt-border-color);background-color:hsl(from var(--alt-background-color) h s l / .35);padding:2px 40px;margin-top:4px;margin-bottom:4px;transition:all ease-in-out .5s;&:hover{border:1px solid var(--border-color);background-color:hsl(from var(--background-color) h s l / .85);color:var(--text-color)}}}@media(prefers-reduced-motion:no-preference){#mainHead nav a:hover{box-shadow:2px 2px 6px 1px hsl(from var(--alt-background-color) h s 5% / .5);transform:translateY(-4px)}}.onwork{#body{text-transform:uppercase;font-weight:bold;font-size:6em;font-family:'Montserrat'}main footer p{margin:auto}}main>section{min-height:100svh;--inline-padding:max(calc(50svw - 570px), 0px);padding:var(--largest-space) var(--inline-padding) var(--large-space);margin:0;flex-grow:1;background-color:var(--background-color)}main>section>p{padding-inline:var(--small-space)}main>article{text-align:start;--inline-padding:max(calc(50svw - 570px), var(--small-space));padding:var(--medium-space) var(--inline-padding) var(--large-space);section{margin-inline:auto;max-width:80ch;img{cursor:pointer}}section.md{p:has(>img:first-child){text-align:center;img{max-height:480px}}}header{position:relative;top:calc(0px - var(--medium-space));left:calc(0px - var(--inline-padding));width:100vw;right:calc(0px - var(--inline-padding));background-position:center;background-size:cover;background-repeat:no-repeat}header.visible{aspect-ratio:32/9}footer{margin:var(--medium-space);margin-bottom:var(--small-space);.toolbar{display:flex;justify-content:end;align-items:baseline;gap:var(--small-space)}.article-date{font-style:italic;font-weight:600}.share-buttons{display:flex;justify-content:flex-end;margin-bottom:1.5rem;gap:1rem}.share-buttons button{background:var(--accent-color);color:var(--title-alt-text-color);border:0;border-radius:4px;padding:.5em 1.2em;font-size:1em;cursor:pointer;display:flex;align-items:center;gap:.5em;transition:background .2s}.share-buttons button:hover{background:var(--color-blue)}.share-buttons i{font-size:1.2em}}}main>figure{background-color:var(--alt-background-color);color:var(--alt-text-color);position:relative;display:grid;justify-items:center;overflow:clip;& img{transition:scale 5s cubic-bezier(0,0.5,1,1)}& figcaption{opacity:0;position:absolute;bottom:var(--small-space);border:1px solid var(--border-color);box-shadow:2px 2px 6px 1px var(--alt-background-color);align-items:center;align-content:center;background:hsl(from var(--alt-background-color) h s l / .75);padding:var(--small-space) 2ch;font-style:italic;font-weight:600;backdrop-filter:blur(2px);transition:opacity .5s ease-in-out;& q::before,& q::after{content:''}}&:hover figcaption{opacity:1}&:hover img{scale:1.2;transition:scale 5s cubic-bezier(1,0.6,0.35,1.15)}}.bubble{background-color:var(--alt-background-color);background-image:radial-gradient(circle at bottom right,hsl(from var(--shaded-color) h s 15%),var(--alt-background-color));width:65%;padding:var(--medium-space) var(--medium-space) var(--large-space) var(--medium-space);color:var(--alt-text-color);border:1px solid var(--border-color);box-shadow:2px 2px 6px 1px var(--alt-background-color),10px 10px 0 2px hsl(from var(--shaded-color) h s l / .75);text-align:left;translate:-25%;& h3,& h4,& h5,& h6{color:var(--title-alt-text-color);font-family:'Bebas Neue';font-size:3rem;line-height:1.2}&.right-bubble{translate:175%;width:440px}}#sommaire+ol{display:flex;flex-direction:column;flex-wrap:wrap;gap:var(--small-space) var(--medium-space);align-content:space-between;max-height:320px;padding:var(--small-space) var(--medium-space);margin:0;color:var(--alt-text-color);background:var(--alt-background-color);li{flex-grow:0;max-width:30%}a{color:var(--accent-color);text-decoration:none}a:focus,a:focus-visible,a:hover{text-decoration:underline}}#online-presence{background-image:radial-gradient(circle at center,hsl(from var(--alt-background-color) h s 30%),var(--alt-background-color));background-color:var(--alt-background-color);& h3.big-title{color:var(--title-alt-text-color)}& ul{display:grid;gap:0;grid-template-columns:repeat(3,1fr);list-style-type:none;padding:0;& li{aspect-ratio:320 / 200;position:relative;display:inline-block;max-width:none}}}.site{aspect-ratio:320 / 200;width:100%;position:relative;display:inline-block;border:1px solid var(--alt-border-color);background-color:var(--alt-background-color);color:hsl(from var(--alt-text-color) h s 90%);text-decoration:none;padding:8px;vertical-align:bottom;transition:ease-in-out .5s;margin:0;overflow:hidden;background-size:cover;background-repeat:no-repeat;background-position:center center;opacity:.75;& span{position:absolute;display:block;align-content:center;background-color:hsl(from var(--alt-background-color) h s l / .5);z-index:9999;transition:all ease-in-out 1s;width:calc(100% - 16px);height:fit-content;top:8px;left:8px;right:8px;bottom:auto}& span.highlight{width:100%;height:100%;top:0;left:0;bottom:0;right:0;background-color:var(--accent-color);color:var(--title-alt-text-color);font-weight:500;font-size:2rem}&:hover{opacity:1}&::after{content:'';position:absolute;inset:0;display:block;background-size:cover;background-repeat:no-repeat;background-position:center center;transition:ease-in-out .5s;backdrop-filter:grayscale(1)}&:hover::after{backdrop-filter:grayscale(0)}}.lsf,.lsf-icon::before,.lsf-big-icon::after{font-family:'LigatureSymbols';text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-font-smoothing:grayscale;-webkit-font-feature-settings:"liga" 1,"dlig" 1;-moz-font-feature-settings:"liga" 1,"dlig" 1;font-feature-settings:"liga" 1,"dlig" 1;text-transform:none}.lsf-icon::before{content:attr(title);margin-right:.3em;font-size:112%;font-style:normal}.lsf-big-icon::after{content:attr(title);margin-left:.3em;font-size:112%;font-style:normal}a.lsf-big-icon{text-decoration:none !important;font-style:normal}a.lsf-big-icon:hover{text-decoration:none !important}#development{position:relative;padding-bottom:0;border-bottom:1px solid hsl(from var(--alt-border-color) h s l / .75);&::after{content:'';aspect-ratio:1073/590;width:800px;background-color:var(--shaded-color);mask-image:url(/images/smartphone_mask.svg);mask-repeat:no-repeat;mask-size:cover;mask-mode:luminance;position:absolute;transform:translateY(var(--bg-phone-y-position));top:0;left:40%;opacity:.25;transition:none;animation:move-phone linear forwards;animation-timeline:view()}.bubble.right-bubble{ol{position:relative;list-style-type:none;font-weight:500;font-size:1.75rem;li{position:relative;transition:all ease-in-out .75s;border:1px solid transparent}li.highlight{z-index:+1;scale:1.5;border:1px solid;background:var(--alt-background-color);padding-inline:.5rem;box-shadow:2px 2px 6px 1px var(--alt-background-color)}}}}.customers-container{margin-top:var(--large-space);padding-block:var(--medium-space);position:relative;z-index:+1;width:100svw;left:calc(0px - var(--inline-padding));right:calc(0px - var(--inline-padding));background-color:var(--alt-background-color);color:var(--alt-text-color);& h4{color:var(--title-alt-text-color)}}#customers figcaption{display:none}.scroller{--scroller-speed:30s;position:relative;max-width:1024px;margin-inline:auto;margin-top:var(--medium-space);& ul{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;padding-inline:0;gap:16px;& li{display:flex;justify-content:center;align-items:center;list-style-type:none;width:100px;padding-inline:0;& img{object-fit:contain;max-height:50px;max-width:100px;transition:all ease-in-out .5s;background-color:var(--alt-background-color)}}}&[data-animated="true"]{overflow:hidden;mask:linear-gradient(.25turn,#0000,#fff 64px,#fff calc(100% - 64px), #0000);& ul{position:relative;width:fit-content;height:80px;animation:marquee var(--scroller-speed) linear infinite}}&[data-animated="true"]:hover ul{animation-play-state:paused}}@media(prefers-reduced-motion:no-preference){.scroller ul li img:hover{max-width:calc(120px + 4rem);max-height:calc(50px + 2rem);scale:1.2;z-index:+1;padding:.5rem 2rem;mask:linear-gradient(.25turn,#0000,#fff 1rem calc(100% - 1rem), #0000)}}#timelapse{position:sticky;top:0;z-index:-1;height:45svh;min-height:auto;& video{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}}#site_1>.site{background-image:url(/images/HTML5VirtualPiano.png)}#site_2>.site{background-image:url(/images/l1info.fr.jpg)}#site_3{grid-column:2/4;grid-row:4/6}#site_3>.site{background-image:url(/images/cv_2025.png);background-position:top center}#site_5>.site{background-image:url(/images/ambiantlight.jpg)}#site_6>.site{background-image:url(/images/tetedelit_small.jpg)}#site_7{grid-column:1/3;grid-row:1/3}#site_7>.site{background-image:url(/images/pygenpres.png);&::after{background-image:url(/images/pygenpres.webp);opacity:0}&:hover::after{opacity:1}}#site_8>.site{background-image:url(/images/backgrounds/0001.jpg)}#pixel_avatar{position:absolute;inset:-90px -20px;&::after{scale:5.2}&:hover{inset:-100px -40px}&:hover::after{scale:7.5}}#pixel_udoo:after{opacity:.5}#youtubechan{position:absolute;height:100%;width:100%;padding:0;top:0;left:0;right:0;bottom:0}#github>.site{background-color:var(--background-color);color:var(--text-color);font-size:8em;transition:all ease-in-out .5s;& span{font-size:16%;color:hsl(from var(--alt-text-color) h s 90%)}&::after{margin-left:0;font-size:160%}&:hover{background-color:var(--alt-background-color);color:var(--alt-text-color)}}#social-networks{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:var(--large-space);& p{font-size:1.2em;margin-top:var(--medium-space)}& a{text-decoration:none}& em{display:inline-block}.bubble{margin-bottom:var(--large-space)}.world-container{display:flex;position:relative;justify-content:center;align-items:center;transform-style:preserve-3d;width:20svw;height:20svh;& *{padding:0}}.world-container>div{aspect-ratio:1;border:1px solid var(--alt-background-color);border-radius:50%;position:absolute}div.world{width:10svw}div.orbit{transform-style:preserve-3d;width:calc(10svw * 1.2)}div.orbit:nth-child(2){transform:rotate3d(1,1,0,80deg)}div.orbit:nth-child(3){transform:rotate3d(-1,1,0,80deg)}div.orbit:nth-child(4){transform:rotate3d(-1,0,0,76deg)}div.satellite{width:1svw;height:1svw;background:var(--alt-background-color);position:absolute;border-radius:50%;--sat-x-position:calc(5.5svw + 10svw * 1.2 / 2 * cos(calc(1deg * var(--animated-sat))));--sat-y-position:calc(5.5svw + 10svw * 1.2 / 2 * sin(calc(1deg * var(--animated-sat))));left:var(--sat-x-position);top:var(--sat-y-position);transform:rotate3d(0,1,0,calc(1deg * var(--animated-sat)))}}@media(prefers-reduced-motion:no-preference){div.world-container[data-animated="true"]{animation:animated-satellite 5s linear infinite}}#photography{position:relative;background:radial-gradient(circle at top,var(--alt-background-color),transparent 90%),linear-gradient(0,hsl(from var(--alt-background-color) h s l /.2) 1px,#0000 1px 45px) 50% 50% / 45px 45px,linear-gradient(90deg,hsl(from var(--alt-background-color) h s l /.2) 1px,#0000 1px 45px) 50% 50% / 45px 45px,linear-gradient(0,black,var(--alt-background-color));& h3.big-title{color:var(--title-alt-text-color)}&::before{content:'';position:absolute;width:128px;height:128px;background-image:url(/images/logo_128_white.png);background-repeat:no-repeat;background-position:center center;inset:15% 80%;opacity:.5}&::after{content:'';aspect-ratio:320/200;width:800px;background-color:var(--shaded-color);opacity:.25;position:absolute;mask-image:url(/images/camera_mask.svg);mask-repeat:no-repeat;mask-size:cover;mask-mode:luminance;inset:20% 50%}.logo::after{transition:color .5s ease}.logo:hover::after{color:var(--alt-text-color)}}#videos{.bubble{margin-bottom:var(--large-space)}.video-list{list-style-type:none;padding:0;& li{width:100%;max-width:100%;height:96px;background:var(--alt-background-color);position:relative;overflow:clip;transition:height ease-in-out .5s;& span{position:absolute;inset:0;z-index:+1;text-align:left;align-content:center;font-size:48px;color:#fff;text-transform:uppercase;text-shadow:2px 2px var(--alt-background-color);padding-inline:var(--small-space);background:hsl(from var(--alt-background-color) h s l / .8);backdrop-filter:grayscale(1);font-family:'Bebas Neue';font-size:3rem;line-height:1.2;transition:opacity ease-in-out .5s}}& li:hover{height:fit-content;& span{opacity:0}}}& video{object-fit:cover}}#flickr-showcase{position:relative;translate:100%;margin-top:var(--medium-space);display:inline-block;z-index:+1;border:1px solid var(--border-color);box-shadow:2px 2px 6px 1px var(--alt-background-color),10px 10px 0 2px hsl(from var(--shaded-color) h s l / .75);&>a{background-image:url(/images/camera.png);background-size:cover;display:block;width:100%;height:100%;&>img{opacity:0}}&::after{content:'';position:absolute;width:128px;height:128px;background-image:url(/images/logo_128_white.png);background-repeat:no-repeat;background-position:center center;inset:-75% 30%;opacity:.5}}#contact{position:relative;min-height:auto;&::after{content:'';aspect-ratio:320/200;width:800px;background-color:var(--shaded-color);opacity:.25;position:absolute;mask-image:url(/images/vintage_phone_mask.svg);mask-repeat:no-repeat;mask-size:cover;mask-mode:luminance;inset:0 50%}& h3{color:var(--title-alt-text-color)}.w2ui-form{background:transparent;border:0;color:var(--alt-text-color)}.w2ui-form .w2ui-page{overflow:inherit}.w2ui-column{display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:flex-start}.w2ui-field>label{font-family:"Roboto",sans-serif;text-align:left;color:var(--alt-text-color)}.w2ui-input{width:300px}& textarea.w2ui-input{height:60px;resize:none;padding:6px}.w2ui-buttons{background:transparent;border:0;text-align:left}.w2ui-btn{font-family:"Roboto",sans-serif;border:1px solid var(--alt-border-color);background-color:hsl(from var(--alt-background-color) h s 40%);color:var(--alt-text-color);padding:2px 40px;margin-top:4px;margin-bottom:4px;border-radius:0;height:var(--button-height);background-image:none;box-shadow:none;text-transform:uppercase;font-weight:600;transition:all ease-in-out .5s}.w2ui-btn:hover{border:1px solid var(--border-color);background-color:var(--background-color);color:var(--text-color);cursor:pointer;box-shadow:2px 2px 6px 1px hsl(from var(--alt-background-color) h s 5%);transform:translateY(-4px)}}.pixel-preview{min-height:300px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--small-space);& img{width:fit-content;height:fit-content}}body>footer{display:flex;justify-content:center;align-items:center;height:5rem;background-color:hsl(from var(--alt-background-color) h s 5%);gap:10px;color:var(--alt-text-color);& a{color:hsl(from var(--text-color) h s 80%)}}#backtotop{position:fixed;bottom:var(--large-space);right:var(--medium-space);margin-bottom:0;z-index:999;display:inline-grid;justify-content:center;align-items:center;height:var(--button-height);aspect-ratio:1;color:var(--alt-text-color);background:var(--alt-background-color);box-shadow:2px 2px 6px 1px var(--alt-background-color);border:1px solid var(--border-color);transition:ease-in-out .5s;opacity:0;padding:2px;&:hover{background-color:var(--background-color);color:var(--text-color);cursor:pointer}&.visible{opacity:1}}.grecaptcha-badge{bottom:var(--large-space) !important}.slidein-notification{min-width:240px !important;max-width:320px !important;min-height:64px !important;max-height:128px !important;display:flex;flex-direction:row;justify-content:center;align-items:center;align-self:flex-end;place-self:flex-end center;padding:8px 8px 8px 16px !important;border-left:4px solid var(--color-green);box-shadow:2px 2px 6px 1px var(--alt-background-color);margin-right:16px;animation-duration:1s,1s;animation-delay:0s,10s;animation-name:right-slidein,right-slideout;animation-timing-function:ease-in-out,ease-in-out;animation-fill-mode:forwards;position:fixed;bottom:var(--medium-space)}.slidein-notification.error{border-left:4px solid var(--color-red)}.slidein-notification span{display:flex;position:initial !important}.slidein-notification span:first-child{flex-grow:1;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word}.related-articles{color:var(--accent-color)}.ccb-modal{h1,h2,h3,h4,h5,h6{color:var(--ccb-text-primary);font-family:"Roboto",sans-serif}a{color:var(--ccb-primary-color)}a:hover{color:var(--ccb-primary-hover)}}.ccb-banner{max-width:32vw}.ccb-management__content{max-width:40vw}.ccb-policy__content{max-width:48vw}.ccb-policy__body{text-align:start;h2{font-size:var(--ccb-font-2xl)}h3{font-size:var(--ccb-font-xl)}}.ccb-btn--reject{color:var(--primary-text-color)}.ccb-toggle-slider{top:.1rem}.ccb-link{text-decoration:none}#share-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;z-index:9999}#share-modal .share-modal-box{background:var(--background-color,#fff);padding:2rem 2.5rem;border-radius:10px;box-shadow:0 4px 24px 0 rgba(0,0,0,0.15);text-align:center;min-width:260px}#share-modal .share-modal-title{margin-bottom:1.5rem}#share-modal .share-modal-list{display:flex;flex-direction:row;justify-content:center;gap:1.5rem;margin-bottom:1.5rem}#share-modal .share-modal-list button{border:0;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:1.6em;cursor:pointer;transition:background .2s;letter-spacing:0}#share-modal .share-modal-list button:hover{background:var(--accent-color,#f0581c);color:var(--title-alt-text-color,#fff)}#share-modal .share-modal-list i{font-size:1.2em}#share-modal .share-modal-close{background:var(--accent-color,#f0581c);color:var(--title-alt-text-color,#fff);border:0;border-radius:4px;padding:.5em 1.5em;font-size:1em;cursor:pointer;margin-top:.5rem}@media(prefers-reduced-motion:reduce){#development::after{animation:none}.scroller ul{justify-content:center;flex-wrap:wrap;& li img{position:relative}}.video{display:none}}@media(max-width:1440px){.bubble{translate:-10%}#online-presence .bubble{translate:60%}}@media(max-width:1320px){.bubble{translate:0;margin-bottom:var(--medium-space)}.bubble.right-bubble{translate:170%}}@media(max-width:1024px){.bubble{translate:5%;margin-bottom:var(--medium-space)}.bubble.right-bubble{translate:115%}#online-presence ul{grid-template-columns:repeat(2,1fr)}#site_3,#site_7{grid-column:auto;grid-row:auto}#flickr-showcase{translate:70%;&::after{inset:-75% 45%}}}@media(max-width:800px){.bubble.right-bubble{translate:60%}div.images-grid.logos{grid-template-columns:repeat(4,1fr);grid-auto-flow:dense}#development::after,#photography::after,#contact::after{width:400px}#development::after{animation:none}#social-networks em{padding-inline:var(--small-space)}#social-networks h3.big-title.lang_en{min-height:16rem}#social-networks h3.big-title.lang_fr{min-height:24rem}#social-networks h3.big-title>span{flex-wrap:wrap;.space{flex-grow:1;flex-shrink:0;flex-basis:100%;height:0}}#photography{&::before{inset:0 calc(50% - 64px)}}#flickr-showcase{translate:40%;&::after{inset:-75% 60%}}}@media(max-width:640px){#mainHead nav{width:calc(100% - var(--small-space) * 2);margin-inline:var(--small-space)}#mainHead nav ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}.bubble,.bubble.right-bubble{translate:1svw;width:90svw}#development .bubble.right-bubble ol li.highlight{scale:1.2}#online-presence ul{grid-template-columns:repeat(1,1fr)}#flickr-showcase{translate:0;&::after{inset:-30% 35%}}}@media(max-width:480px){#sommaire+ol{max-height:60vh}}.nowayout{color:transparent !important;overflow:clip !important;height:0 !important;width:0 !important;background:transparent !important;position:absolute !important;z-index:-100 !important}