/*
Theme Name: Portfolio
Description: Thème Portfolio
Author: Rémi Sirol
Author URI: https://remisirol.com/
Template: oceanwp
Version: 1.0.1
*/
#site-header{display:none;}
body{font-size:16px; font-family: Satoshi, sans-serif;}
.modal-open {overflow: hidden !important;}
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
  outline: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #0B0B0B, 0 0 0 4px #2563EB !important;
}

.spacemono{font-family: SpaceMono, monospace;}


#top-bar-wrap{position: fixed; top:0; left:0; width: 100%; border:0;}
#topbar-template{width:100%; max-width: 1376px}
.nav-links a:after{content:""; display:block; width:18px; height:18px; margin-left:4px; background-image:url("../../uploads/arrow-right.svg"); background-size:18px 18px;background-position: -18px;
  background-repeat: no-repeat; opacity:0;}

.nav-mobile {backdrop-filter: blur(6px);background-color:#0000000D; transition: background .4s ease-in;}
.nav-mobile:hover, .nav-mobile:focus-visible{background-color:#FFFFFF0D;}

.nav-logo a{display: block;padding: 14px;backdrop-filter: blur(6px); border-radius: 8px;}
.nav-logo a:hover, .nav-logo a:focus-visible{background-color:#FFFFFF0D;}
.nav-links a{padding: 8px 12px 8px 16px; border-radius: 8px; transition: background .4s ease-in}  
.nav-links a span{margin-top: -2px;}
.nav-links a:hover, .nav-links a:focus-visible{background-color:#FFFFFF0D; backdrop-filter: blur(6px);}
.nav-links a:hover:after, .nav-links a:focus-visible:after{background-position: 0px; opacity:1; transition: all .3s ease-in-out;}

.nav-links,.nav-title {opacity: 1;}
.noevent .swiper-wrapper{pointer-events: none !important;}

#top-bar-wrap.scroll-down .nav-links,
#top-bar-wrap.scroll-down .nav-title {
  opacity: 0; transition: opacity 0.4s ease-in;
}

#top-bar-wrap.scroll-up .nav-links,
#top-bar-wrap.scroll-up .nav-title {
  opacity: 1; transition: opacity 0.8s ease-out;
}

#top-bar-wrap.scroll-up{background: linear-gradient(to bottom,rgba(11,11,11,0) 0%,rgba(11,11,11,0) 100%);}

#top-bar-wrap.scroll-up{background: linear-gradient(to bottom,#0B0B0B 0%,rgba(11,11,11,0) 100%);}

.hero-pp{overflow: hidden; animation: blob 5s infinite ease-in-out;}

@keyframes blob {
  0% {border-radius: 50% 50% 48% 52% / 52% 48% 52% 48%;}
  20% {border-radius: 52% 48% 55% 45% / 48% 52% 48% 52%;}
  40% {border-radius: 48% 52% 45% 55% / 55% 45% 52% 48%;}
  60% {border-radius: 55% 45% 52% 48% / 50% 55% 45% 50%;}
  80% {border-radius: 50% 55% 48% 52% / 52% 48% 55% 45%;}
  100% {border-radius: 50% 50% 48% 52% / 52% 48% 52% 48%;}
}


@media (pointer: fine) {#outer-wrap, #outer-wrap * {cursor: none !important;}}

.cursor{display: none;}

@media (pointer: fine) {
  .cursor {
    display: flex; position: fixed;
    top: 0; left: 0;
    width: 10px; height: 10px;
    box-shadow: 0 0 0 2px rgba(10,10,10,0.5);
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width .3s ease, height .3s ease;
    align-items: center;
    z-index: 999999;
  }
}

.cursor.active {width: 24px; height: 24px;}

.cursor-text {
  margin-left: 28px;
  margin-top: 28px;
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  pointer-events: none;
  color: #fff;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  will-change: opacity, transform;
  transform: translateZ(0);
}

.cursor.show-text .cursor-text {opacity: 1;}

.cursor::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: rgba(10,10,10,0.8);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity .2s ease, transform .2s ease;
}
	.cursor.active::after {opacity: 1; transform: translate(-50%, -50%) scale(1);}

.competence{display:flex; justify-content: center; align-items: center; gap: 10px; width: max-content; margin: auto; transition: gap .3s ease-in-out;padding: 10px; width:100%;}
.competence .rectangle{width: 0; height: 92px; border-radius: 8px; background:#202020BA; transition: width .3s ease-in-out; overflow: hidden; position: relative;}
.competence:hover .rectangle{width: 170px;} .competence:hover{gap: 20px;}

.contact-container .contact-arrow{background-position: -38px center; opacity:0; transition: all .3s ease-in-out;}
.contact-container:hover .contact-arrow{background-position: center center; opacity:1;}

.card-dribbble{height:350px !important;}
    .wrapper-dribbble{
      transform-style: preserve-3d;
      transform: 
      translateX(90px)
      translateY(30px)
      rotateX(45deg)
      rotateZ(45deg);
      display: grid; grid-template-columns: repeat(3, 0fr); gap: 20px; grid-auto-rows: minmax(100px, auto);
    }
    .wrapper-dribbble a.card{display:block; width:200px;border-radius: 4px; position: relative; height:150px;}
    .wrapper-dribbble .card img{transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
      width:200px; position: relative; border-radius: 8px;;
      box-shadow: 0 0 15px rgba(0,0,0,0);
    }
    .wrapper-dribbble .card .background{
      width: 100%; height: 100%;
      position: absolute; z-index:-1; top:0;
      filter: blur(8px); left:0;
      background: rgba(0, 0, 0, .2); 
      transition: all .6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .wrapper-dribbble .card:hover img{
      transform: translate(-30px, -30px);
    }
    .wrapper-dribbble .card:hover .background{
      top:0px; left: 0px; background: rgba(0,0,0,.45);
    }

.website-preview{max-height:80vh; overflow-y:scroll !important;}

header ul.elementor-icon-list-items{list-style-type: none; display: flex;}
header ul.elementor-icon-list-items li a{display: flex; align-items: center; gap: 6px;}

/*modal*/
#menu-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease;
}

#menu-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#menu-modal-inner {
  background: #171717;
  box-shadow: 0 0 100px rgba(0,0,0,0.5);
  border-radius: 12px;
  max-width: 910px;
  width: 90%;
  max-height: calc(100vh - 80pcx);
  overflow-y: auto;
  position: relative;
  transform: translateY(20px) scale(0.97);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#menu-modal.is-open #menu-modal-inner {
  transform: translateY(0) scale(1);
  opacity: 1;
}


@media (max-width: 600px) {
#menu-modal{margin-top:20px;}
  #menu-modal-inner {
    padding: 20px;
    width: 95%;
    border-radius: 12px;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes gradient-spin {to { --angle: 360deg; }}


.opentowork .elementor-button-icon svg{fill:#5CC495!important;}
.opentowork .elementor-button-icon {font-size:8px; position: relative;width:8px;height:8px;}
.opentowork .elementor-button-content-wrapper{align-items: center;}
.opentowork .elementor-button-icon::before {
  content: '';
  position: absolute;
  inset: 0; height:8px; width:8px;
  border-radius: 16px;
  background: rgba(19, 199, 145, 0.6);
  animation: live-pulse 2s ease-out infinite;
}

@keyframes live-pulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  70%  { transform: scale(2.75); opacity: 0; }
  100% { transform: scale(2.75); opacity: 0; }
}


.animated-border, .opentowork{
  position: relative;
  isolation: isolate;
  overflow: visible !important;
}

.opentowork::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  filter: blur(1px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
  border-radius: 50px;
  animation: 4s gradient-spin linear infinite;
  background-image: conic-gradient(
    from var(--angle),
    transparent 70%,
    rgba(30, 160, 100, 0.15),
    rgba(92, 196, 149, 0.30),
    rgba(30, 160, 100, 0.15),
    rgba(30, 255, 100, 0)
  ); transition: opacity .3s linear;
}

.animated-border::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 100%;
  filter: blur(2px);
  height: 100%;
  padding: 4px;
  box-sizing: content-box !important;
  transform: translate(-50%, -50%);
  border-radius: 9999999px;
  animation: 4s gradient-spin linear infinite;
  background-image: conic-gradient(
    from var(--angle),
    transparent 70%,
    rgba(200, 160, 230, 0.1),
    rgba(200, 180, 250, 0.2),
    rgba(200, 160, 230, 0.1),
    rgba(255, 255, 255, 0)
  ); transition: opacity .3s linear;
}

.rectangle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.competence:hover .rectangle-icon {opacity: 1;}

.card-study:active, .contact-container:active, #menu-modal-inner a:not(#menu-modal-close):active, .nav-logo a:active{transform: scale(0.97) !important;}
.card-study:hover .blur_img{opacity: .4;}
.blur_img{
  filter: blur(16px); opacity: 0; width:100%;
  transition: opacity 0.s ease-in-out !important;
}

.card-img::after{
	content: ""; z-index:5;
display: flex; justify-content: center; align-items: center;
width: 96px; height: 96px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 90px;
position: absolute; top: calc(50% - 96px / 2); left: calc(50% - 96px / 2);
backdrop-filter: blur(5px);
background-image:url(../../uploads/arrow-up-right.svg); background-repeat: no-repeat; background-size:42px; background-position: center center;
	transform:scale(0); opacity: 0;
	transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);;
}

.card-study:hover .card-img::after{
transform:scale(1); opacity: 1;
}

.card-header:hover .card-img::after{
transform:scale(.5); opacity: 1;
}

.gradient-blur-wrapper{
  position: relative;
  transition: opacity 0.5s ease-in-out; 
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  height: 114px; 
  pointer-events: none;
  z-index: 1;
}
  .gradient-blur-wrapper.scroll-down {opacity: 0; pointer-events: none;}
  .gradient-blur-wrapper.scroll-up {opacity: 1;}

.gradient-blur-wrapper>div {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  z-index: 1;
}

.gradient-blur-wrapper>div:nth-child(1) {
    backdrop-filter: blur(1.12px);
    mask-image: linear-gradient(to top, transparent 0, #000 20%, #000 40%, transparent 60%);
    z-index: 2;
}
.gradient-blur-wrapper>div:nth-child(2) {
    backdrop-filter: blur(2.2px);
    mask-image: linear-gradient(to top, transparent 20%, #000 40%, #000 60%, transparent 80%);
    z-index: 3;
}
.gradient-blur-wrapper>div:nth-child(3) {
    backdrop-filter: blur(4.5px);
    mask-image: linear-gradient(to top, transparent 40%, #000 60%, #000 80%, transparent 100%);
    z-index: 4;
}
.gradient-blur-wrapper>div:nth-child(4) {
    backdrop-filter: blur(10px);
    mask-image: linear-gradient(to top, transparent 60%, #000 80%, #000 100%);
    z-index: 5;
}

.gradient-blur-wrapper>div:nth-child(5) {
    backdrop-filter: blur(16px);
    mask-image: linear-gradient(to top, transparent 80%, #000 100%);
    z-index: 6;
}

.ignore-alt {pointer-events: none; user-select: none;}

/* svg */

svg .sign-1 {
  stroke-dashoffset: 174.632568359375px;
  stroke-dasharray: 174.632568359375px;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
          transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}

svg.active .sign-1 {
  stroke-dashoffset: 0;
}

svg .sign-2 {
  stroke-dashoffset: 391.626953125px;
  stroke-dasharray: 391.626953125px;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
          transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
}

svg.active .sign-2 {
  stroke-dashoffset: 0;
}

svg .sign-3 {
  stroke-dashoffset: 174.2208251953125px;
  stroke-dasharray: 174.2208251953125px;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s;
          transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s;
}

svg.active .sign-3 {
  stroke-dashoffset: 0;
}

svg .sign-4 {
  stroke-dashoffset: 34.82740783691406px;
  stroke-dasharray: 34.82740783691406px;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8999999999999999s;
          transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8999999999999999s;
}

svg.active .sign-4 {
  stroke-dashoffset: 0;
}

svg .sign-5 {
  stroke-dashoffset: 278.08721923828125px;
  stroke-dasharray: 278.08721923828125px;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.2s;
          transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.2s;
}

svg.active .sign-5 {
  stroke-dashoffset: 0;
}

svg .sign-6 {
  stroke-dashoffset: 105.44850158691406px;
  stroke-dasharray: 105.44850158691406px;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.5s;
          transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.5s;
}

svg.active .sign-6 {
  stroke-dashoffset: 0;
}

svg .sign-7 {
  stroke-dashoffset: 3.117989659309387px;
  stroke-dasharray: 3.117989659309387px;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.7999999999999998s;
          transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.7999999999999998s;
}

svg.active .sign-7 {
  stroke-dashoffset: 0;
}

svg .sign-8 {
  stroke-dashoffset: 746.4501953125px;
  stroke-dasharray: 746.4501953125px;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.1s;
          transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.1s;
}

svg.active .sign-8 {
  stroke-dashoffset: 0;
}

svg .sign-9 {
  stroke-dashoffset: 57.00019073486328px;
  stroke-dasharray: 57.00019073486328px;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.4s;
          transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.4s;
}

svg.active .sign-9 {
  stroke-dashoffset: 0;
}

svg .sign-10 {
  stroke-dashoffset: 3.2355486154556274px;
  stroke-dasharray: 3.2355486154556274px;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.6999999999999997s;
          transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.6999999999999997s;
}

svg.active .sign-10 {
  stroke-dashoffset: 0;
}

svg .sign-11 {
  stroke-dashoffset: 48.77912521362305px;
  stroke-dasharray: 48.77912521362305px;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3s;
          transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3s;
}

svg.active .sign-11 {
  stroke-dashoffset: 0;
}

svg .sign-12 {
  stroke-dashoffset: 30.542171478271484px;
  stroke-dasharray: 30.542171478271484px;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3.3s;
          transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3.3s;
}

svg.active .sign-12 {
  stroke-dashoffset: 0;
}

svg .sign-13 {
  stroke-dashoffset: 97.93755340576172px;
  stroke-dasharray: 97.93755340576172px;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3.5999999999999996s;
          transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3.5999999999999996s;
}

svg.active .sign-13 {
  stroke-dashoffset: 0;
}

svg .sign-14 {
  stroke-dashoffset: 317.40155029296875px;
  stroke-dasharray: 317.40155029296875px;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3.9s;
          transition: stroke-dashoffset 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3.9s;
}

svg.active .sign-14 {
  stroke-dashoffset: 0;
}

.logo-client *{transition-timing-function: linear !important;}
.logo-client .swiper-wrapper{transition-timing-function: linear; opacity:0.4; -webkit-user-select: none;
  -ms-user-select: none; user-select: none; pointer-events: none;}

.logo-client::before, .logo-client::after {
  content: "";
  display: block;
  width: 100px; height: 100%;
  position: absolute; z-index: 30;
}

.logo-client::after {
  top: 0;
  right: 0px;
  background: linear-gradient(-90deg, rgba(5,5,5,1) 0%, rgba(5,5,5,0) 100%);
}

.logo-client::before {
  top: 0;
  left: 0px;
  background: linear-gradient(-90deg, rgba(5,5,5,0) 0%, rgba(5,5,5,1) 100%);
}

a.screen-reader-text{background: #000 !important;color: #fff !important;
border-radius: 500px !important;
margin: 10px !important;}


/* Mode réduction des animations */
html.reduce-motion,
html.reduce-motion * {
  scroll-behavior: auto !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
}

/* Désactiver les animations d'apparition Elementor */
html.reduce-motion .elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
}

html.reduce-motion .animated,
html.reduce-motion [class*="elementor-animation-"] {
  animation: none !important;
  transition: none !important;
}

/* Arrêter les animations CSS de défilement */
html.reduce-motion .logo-client,
html.reduce-motion .logo-client * {
  animation-play-state: paused !important;
}