a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
display:block}

body{
line-height:1}

ol,ul{
list-style:none}

blockquote,q{
quotes:none}

blockquote:after,blockquote:before,q:after,q:before{
content:"";
content:none}

table{
border-collapse:collapse;
border-spacing:0}

a{text-decoration:none}

html{
font-size:18px;
font-family:robotoregular;
line-height:1.5rem;
color:#484848;
background:#f4f4f4}

body,html{
height:100%}

#wrapper{
min-height:100%;
position:relative;
overflow:hidden}

h1{
font-size:48px;
line-height:3rem}

h1,h2{
font-family:firamonobold}

h2{
font-size:36px}

h3{
font-family:firamonobold;
font-size:24px}
h4,h5,h6{
font-family:robotoregular}
h6{
font-size:.75rem}

p{
font-family:robotoregular;
font-size:1rem;
line-height:1.5rem;
margin-bottom:.75rem}

@font-face{
font-family:firamonobold;
src:url(../font/fira-mono.bold.otf);
font-weight:400;
font-style:normal}

@font-face{
font-family:firamonoregular;
src:url(../font/fira-mono.regular.otf);
font-weight:400;
font-style:normal}
@font-face{
font-family:firasansbold;
src:url(../font/fira-sans.bold.ttf);
src:url(../font/FiraSans-Bold.eot?#iefix) format("embedded-opentype"),url(../font/FiraSans-Bold.woff) format("woff"),url(../font/fira-sans.bold.ttf) format("truetype");
font-weight:400;
font-style:normal}

@font-face{
font-family:firasansmedium;
src:url(../font/FiraSans-Medium.eot);
src:url(../font/FiraSans-Medium.eot?#iefix) format("embedded-opentype"),url(../font/FiraSans-Medium.woff) format("woff"),url(../font/fira-sans.medium.ttf) format("truetype");font-weight:400;font-style:normal}

@font-face{
font-family:robotoregular;
src:url(../font/roboto-regular-webfont.eot);
src:url(../font/Roboto-Regular-webfont.eot?#iefix) format("embedded-opentype"),url(../font/Roboto-Regular-webfont.woff) format("woff"),url(../font/Roboto-Regular.ttf) format("truetype"),url(../font/Roboto-Regular-webfont.svg#robotoregular) format("svg");font-weight:400;font-style:normal}

@font-face{
font-family:robotobold;
src:url(../font/Roboto-Bold-webfont.eot);
src:url(../font/Roboto-Bold-webfont.eot?#iefix) format("embedded-opentype"),url(../font/Roboto-Bold-webfont.woff) format("woff"),url(../font/Roboto-Bold.ttf) format("truetype"),url(../font/Roboto-Bold-webfont.svg#robotobold) format("svg");
font-weight:400;
font-style:normal}

.padding{
padding-bottom:150px}

.center-block{
margin:auto;
max-width:750px;
padding-left:1rem;
padding-right:1rem}

.page-title{
margin-bottom:2rem}

.topmargin{margin-top:2em}

.push-right{
margin-left:auto!important}

header{
padding:50px 7%;
height:73px;
display:flex}
header *{
z-index:1}
header #logo{
width:73px;
height:64px;
margin-top:9px}

header #logo a{
display:block;
width:100%;
height:100%;
border:0}

header .header_link{
font-family:robotobold;
font-size:20px;
align-self:flex-end;
margin-left:50px;
border-bottom:0;
transition:background .1s cubic-bezier(.33,.66,.66,1)}

header .header_link:hover{
background:#01ffc7}
header .header_link.push-right{
  position:fixed;
  top:20px;
  right:7%;
  z-index:100}

/* Mobile nav - light UI */
.mobile-nav-toggle{
  position: fixed;
  right: 7%;
  top: 28px;
  width: 40px;
  height: 40px;
  background: rgba(244,244,244,.85);
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  z-index: 110;
}
.mobile-nav-toggle .bar{
  display: block;
  width: 22px;
  height: 2px;
  background: #112c58;
  margin: 0;
  transition: transform .2s ease, opacity .2s ease;
  transform-origin: 50% 50%;
  border-radius: 2px;
}
.mobile-nav-toggle.is-open{ gap: 0; overflow: hidden; }
/* Superposer parfaitement les deux barres visibles au centre */
.mobile-nav-toggle.is-open .bar{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  margin: 0;
  transform-origin: 50% 50%;
}
.mobile-nav-toggle.is-open .bar:nth-child(1){
  transform: translate(-50%, -50%) rotate(45deg);
}
.mobile-nav-toggle.is-open .bar:nth-child(2){ opacity: 0; }
.mobile-nav-toggle.is-open .bar:nth-child(3){
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-menu{
  position: fixed;
  inset: 0;
  background: rgba(244,244,244,.96);
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  display: none;
  z-index: 105;
}
.mobile-menu .mobile-menu_list{
  max-width: 750px;
  margin: 120px auto 0 auto;
  padding: 0 1rem;
}
.mobile-menu .mobile-menu_list li{ margin-bottom: 18px; }
.mobile-menu .mobile-menu_list a{
  display: inline-block;
  font-family: firamonobold;
  font-size: 24px;
  border-bottom: 3px solid #01ffc7;
}

.mobile-menu.is-open{ display: block; }

/* Responsive rules */
@media (max-width:873px){
  /* masquer le lien portfolio fixe en mobile pour éviter les conflits */
  header .header_link.push-right{ display:none }
  .mobile-nav-toggle{ display:flex }
}
@media (min-width:0px) and (max-width:873px){header{
max-width:750px;
margin:auto;
padding:50px 1rem}}
footer{
width:100%;
height:108px;
position:absolute;
bottom:0}
footer nav{
border-top:1px solid #d8d8d8;
width:90%;
max-width:750px;
height:100%;
margin:auto;
display:flex;
justify-content:center}

footer nav div{
width:33%;
max-width:180px;
align-self:center;
text-align:center}

a{
color:#484848}

.link,.post a{
border-bottom:3px solid #01ffc7;
color:inherit;
transition:background .1s cubic-bezier(.33,.66,.66,1)}
.link:hover,.post a:hover{
background:#01ffc7}

code{
color:#f4f4f4;
background:#484848;
font-size:.9rem}

.highlight,code{
font-family:firamonoregular}

.highlight{
margin:15px 0;
padding:1rem 0;
overflow:auto}

.homepage header a{
color:#fff}
.homepage .bg-wrapper{
width:100%;
height:100%;
position:fixed;
top:0;
background:url(../img/home/monkeyflip@0.5x.jpg) 65% 90%;
background-size:cover;
display:flex}

.homepage #blurb{
color:#fff;
align-self:center;
padding-left:7%}

.homepage footer a{
color:#fff}

@media (max-width:599px){

.home{
background:url(../img/home/monkeyflip@0.2x.jpg)65% 90%;
background-size:cover}

#blurb h1{font-size:2rem;line-height:3rem}}

@media (min-width:600px) and (max-width:1000px){
#blurb h1{font-size:2.5rem;line-height:3.75rem}}

@media (min-width:1001px){
#blurb h1{font-size:3.5rem;line-height:5rem}}

svg{padding-top:1px}

#logo :hover .logo{
animation:a 2.5s 1;
transition:fill ease
}

#logo :hover .circle{
animation:b 2.5s 1}

.logo{
fill:#01ffc7;
stroke:#01ffc7;
stroke-width:3px;
stroke-dasharray:3115px}

 /* Logo styles */
 .logo-wrap {
  max-width: 65px;
  padding-top: 8px;
  width: 100%;
  left: 25px;
  top:-5px;
  z-index: 100;
}
.logo-wrap .logo2 {
  position: fixed;
  display: block;
  animation: logoIn .45s ease-out .2s backwards;
  left: 45px;
  top: 45px;
  z-index: 100
}

.shade {
  transition: transform 0.3s ease-out; /* Transition plus rapide pour suivre la souris */
}
.shade {
  position: absolute;
  left: -35px;
  top: 40%;
  transform: translateY(-50%);
  width: 65px;
  height: 65px;
}
.shade .stroke-path {
    stroke-width: 2.5px;
  }

  .shade {
    transition: transform 0.3s ease-out; /* Transition plus rapide pour suivre la souris */
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    will-change: transform;
    /* Supprimer l'animation: animation: gentleFloat 4s ease-in-out infinite; */
    transform-style: preserve-3d;
  }
    

  .stroke-poly {
    fill: none;
    color: #7f00e0;
    stroke: var(--line);
    stroke-width: 2.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    vector-effect: non-scaling-stroke;
  }
@keyframes a{
0%{stroke-dashoffset:3115;
fill:transparent}50%{stroke-dashoffset:0;fill:transparent}to{fill:#01ffc7}}

.circle{fill:#01ffc7;stroke-dasharray:80px}@keyframes b{0%{fill:transparent}50%{fill:transparent}to{fill:#01ffc7}}

.videoWrapper{
position:relative;
padding-bottom:56.25%;
padding-top:25px;
height:0;
margin-bottom:50px}
.videoWrapper iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%}

img.full{
max-height:calc(100vh - 50px);
max-width:100%}

.personal-brand-img{
max-width: 100%;
}

img.browser{
width:100%;
margin-top:2em;
box-shadow:0 10px 25px #484848;
border-radius:10px}

.sidebyside{display:flex}

.filters{
max-width:1260px;
margin:1rem auto;
padding:0 1rem}

.filters button{
margin-right:.25rem;
font-size:1rem;
font-family:firamonoregular;
color:#112c58;
background:#f4f4f4;
border:1px solid #112c58;
border-radius:10px;
transition:all .25s;
outline:none}

.filters button.active{
color:#f4f4f4;
background:#112c58}

.portfolio{
max-width:1260px;
margin:2rem auto;
padding-left:1rem;
padding-right:1rem}

.portfolio_item{
background-size:cover!important;
margin-bottom:1rem;
width:calc(100% - 2rem)}
.portfolio_item.std{
height:250px}
.portfolio_item.poster{
height:386px}
.portfolio_item a{
display:block;
position:relative;
height:100%;
color:transparent;
transition:all .3s;
font-size:36px;
line-height:45px;
font-family:firamonobold}
.portfolio_item a:hover{
color:#fff;
background:rgba(17,44,88,.8)}
.portfolio_item a span{
position:absolute;
top:1rem;
left:1rem;
right:.5rem}
@media (min-width:525px){
.portfolio_item{width:235px}}
.post-list{margin:auto}
.post-list .post{
margin-bottom:120px}
.post-list h2 a{
line-height:50px}
.readmore{
font-size:16px;
font-family:firasansmedium}
.post{
max-width:750px;
width:100%}
.post .date{
margin-top:14px;
margin-bottom:30px;
color:#9b9b9b;
font-size:14px;
font-family:firasansbold}

.post h2{
margin-top:1.5rem;
margin-bottom:1.5rem}

.post h3{margin-top:1rem;margin-bottom:1rem}
.post ol,.post ul{
margin-bottom:.75rem;
line-height:1.5rem;
margin-left:1.5rem}
.post ol li,.post ul li{
margin-top:1rem}
.post ol{
list-style:decimal}
.post ul{list-style:disc}