@-webkit-keyframes beat {
  to {
    transform: scale(0.7); } }
*:last-child:not(.modal-dialog) {
  margin-bottom: 0; }

html {
  font-size: 16px;
  color: #454545;
  -webkit-font-smoothing: antialiased;
  background-color: #454545;
  scroll-behavior: auto !important; }
  html body {
    font-family: 'Montserrat';
    width: 100%;
    position: fixed;
    overflow-y: scroll;
    background-color: #fff;
    line-height: 1.5; }
    @media (max-width: 767px) {
      html body #mainNav {
        -webkit-transition: all 0.2s ease;
        transition: all 1s ease;
        top: -100px; } }
    html body .zone-loading {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100svh;
      background-color: #fff;
      z-index: 99;
      pointer-events: none;
      text-align: center; }
      html body .zone-loading .content-loading {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); }
        html body .zone-loading .content-loading .logo-loading {
          position: relative;
          width: 50px;
          height: auto;
          transform-origin: center;
          -webkit-transition: all 0.6s ease;
          transition: all 0.6s ease;
          animation: beat 0.5s infinite alternate; }
    html body.ready {
      position: static; }
      @media (max-width: 767px) {
        html body.ready #mainNav {
          top: 0; } }
      html body.ready .zone-loading .content-loading .logo-loading {
        width: 20px;
        opacity: 0; }
    html body.modal-open #mainNav .mainNavContent {
      padding-right: 17px; }
  html img {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem; }
  html p {
    color: #454545;
    font-size: 1rem; }
  html a {
    color: #3aafe2; }
  html ul li {
    color: #454545; }

h1, h2, h3, h4 {
  line-height: 1.5; }

h2 {
  font-weight: 200;
  font-size: 1.8rem;
  margin-bottom: 4rem;
  color: #454545; }
  @media (min-width: 576px) {
    h2 {
      font-size: 2.2rem; } }

h3 {
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #454545; }

h4 {
  font-size: 1.2rem;
  color: #454545;
  font-weight: 700;
  margin-bottom: 0; }

.container-xl {
  max-width: calc(1140px + 3rem);
  --bs-gutter-x: 3rem;
  --bs-gutter-y: 3rem; }

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem; }
  .row.g-0 {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0; }
  .row.g-thin {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem; }
  .row.g-mobile-large {
    --bs-gutter-y: 3rem; }

.container-image {
  Display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */ }

table {
  width: 100%; }
  table tr td {
    color: #454545;
    padding: 6px;
    font-size: 1rem; }
    table tr td:first-child {
      padding-left: 0; }
    table tr td:last-child {
      padding-right: 0; }

button {
  color: #454545;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  background-color: #ededed;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  margin: 0 4px 10px; }
  button:hover {
    background-color: #d5d5d5; }
  button.categorie-active {
    background-color: #3aafe2;
    color: #fff; }

.button-transparent {
  color: #454545;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  background-color: white;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin: 0 4px 10px;
  display: inline-block; }
  .button-transparent:hover {
    background-color: rgba(255, 255, 255, 0.6); }

.button-blue {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  background-color: #3aafe2;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  margin: 0 4px 10px;
  display: inline-block; }
  .button-blue:hover {
    background-color: rgba(47, 144, 187, 0.7); }

#site-wrapper {
  width: 100%;
  min-height: 100vh; }

.section-site {
  width: 100%;
  padding: 5rem 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }

.shadow-inset {
  position: relative; }
  .shadow-inset:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-image: url("../images/ombre-interne.png");
    background-repeat: repeat-x;
    z-index: 1;
    opacity: 1; }
  .shadow-inset:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: scaleY(-1);
    height: 30px;
    background-image: url("../images/ombre-interne.png");
    background-repeat: repeat-x;
    z-index: 1;
    opacity: 1; }

.text-medium {
  font-size: 1.25rem; }
  @media (min-width: 576px) {
    .text-medium {
      font-size: 1.5rem; } }

.width-medium {
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto; }

.paragraph-intro {
  margin-bottom: 80px; }

.maj {
  text-transform: uppercase; }

.background-blue {
  background-image: url("../images/degrade-bleu.png");
  background-size: contain;
  background-repeat: repeat-y; }

.background-violet {
  background-image: url("../images/degrade-violet.png");
  background-size: contain;
  background-repeat: repeat-y; }

.background-grey-light {
  background-color: #f8f8f8; }

.background-grey-light2 {
  background-color: #ededed; }

.background-grey-medium2 {
  background-color: #b0b0b0; }

.background-white {
  background-color: #fff; }

.margin-bottom-5 {
  margin-bottom: 5rem; }

.margin-bottom-4 {
  margin-bottom: 4rem; }

.margin-bottom-3 {
  margin-bottom: 3rem; }

.margin-bottom-2 {
  margin-bottom: 2rem; }

.cadre-image {
  border: 1px solid #d5d5d5; }

.video-content {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin-bottom: 1.5rem; }
  .video-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.video-container {
  width: 100%;
  margin-bottom: 1.5rem; }
  .video-container video {
    display: block;
    width: 100%;
    height: auto; }

.modal {
  margin-left: 0;
  margin-right: 0;
  padding: 0 1rem !important;
  --bs-modal-width: 800px;
  --bs-modal-margin: 1.5rem; }
  @media (min-width: 576px) {
    .modal {
      padding: 0 1.5rem;
      --bs-modal-width: 800px;
      --bs-modal-margin: 2.5rem; } }
  .modal .modal-dialog {
    margin-left: auto;
    margin-right: auto; }
  .modal .modal-header {
    border-bottom: none; }
    @media (max-width: 767px) {
      .modal .modal-header {
        padding-bottom: 0; } }
  @media (min-width: 576px) {
    .modal .modal-body {
      padding: 0 1.5rem 1.5rem; } }
  .modal .modal-body .realisation-illustration {
    margin-top: 2rem; }
  .modal .modal-footer {
    padding: 1rem;
    border-top: none; }
    @media (min-width: 576px) {
      .modal .modal-footer {
        padding: 1.5rem; } }
    .modal .modal-footer button {
      margin: 0; }
  .modal .btn-close:focus {
    box-shadow: none; }
  .modal .btn-close:hover {
    background-color: #d5d5d5; }

.fade-in {
  opacity: 0;
  -webkit-transition: all 1.5s ease;
  transition: all 1.5s ease; }
  .fade-in.active {
    opacity: 100; }

.slide-up {
  position: relative;
  transform: translate(0, 60px);
  -webkit-transition: all 1.5s ease;
  transition: all 1.5s ease; }
  .slide-up.active {
    transform: translate(0, 0); }

#mainNav a {
  position: relative;
  padding: 0.5rem 0;
  font-size: 1rem;
  font-weight: 400;
  color: #b0b0b0;
  text-decoration: none;
  color: #454545;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  #mainNav a:after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background-color: #d5d5d5;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; }
  #mainNav a.focused:after {
    background-color: #3aafe2;
    width: 100%; }
@media (max-width: 767px) {
  #mainNav {
    z-index: 10;
    position: fixed;
    width: 100%; }
    #mainNav .background-nav-open {
      display: none; }
    #mainNav .mainNavContent {
      position: relative;
      padding: 12px 0 13px;
      background-color: #fff;
      filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.09));
      height: 49px; }
      #mainNav .mainNavContent .mainNavWrapper {
        text-align: right;
        padding: 0 2rem; }
        #mainNav .mainNavContent .mainNavWrapper .logo-site-subNav {
          display: block;
          position: absolute;
          width: 42px;
          height: 42px;
          top: 50%;
          transform: translate(0, -50%);
          left: 1rem;
          -webkit-user-select: none;
          /* Safari */
          -ms-user-select: none;
          /* IE 10 and IE 11 */
          user-select: none;
          /* Standard syntax */
          display: none; }
        #mainNav .mainNavContent .mainNavWrapper ul {
          position: fixed;
          z-index: -1;
          list-style: none;
          padding: 1rem;
          width: 100%;
          left: 0;
          top: 48px;
          text-align: center;
          background-color: #fff;
          height: auto;
          overflow: hidden;
          transform: translateY(calc(-100% - 50px));
          -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
          opacity: 1; }
          #mainNav .mainNavContent .mainNavWrapper ul li {
            padding: 1rem; }
    #mainNav .burger {
      width: 35px;
      height: 24px;
      position: absolute;
      left: 50%;
      top: 51%;
      padding: 0;
      background-color: #fff;
      border-radius: 0;
      margin: 0;
      transform: translate(-50%, -50%);
      -webkit-user-select: none;
      /* Safari */
      -ms-user-select: none;
      /* IE 10 and IE 11 */
      user-select: none;
      /* Standard syntax */
      z-index: 2; }
      #mainNav .burger span {
        display: block;
        width: 100%;
        height: 4px;
        background-color: #d5d5d5;
        border-radius: 2px;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease; }
      #mainNav .burger .burger-line1 {
        position: absolute;
        top: 0;
        left: 0; }
      #mainNav .burger .burger-line2 {
        position: absolute;
        top: 10px;
        left: 0; }
      #mainNav .burger .burger-line3 {
        position: absolute;
        bottom: 0;
        left: 0; } }
    @media (max-width: 767px) and (min-width: 768px) {
      #mainNav .burger {
        displya: none; } }
@media (max-width: 767px) {
    #mainNav .background-white-mobile {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background-color: #fff;
      z-index: 1; }
    #mainNav.nav-mobile-open .background-nav-open {
      display: block;
      position: fixed;
      width: 100%;
      height: 100vh;
      background-color: transparent;
      z-index: -1; }
    #mainNav.nav-mobile-open .burger span {
      background-color: #454545; }
    #mainNav.nav-mobile-open .burger .burger-line1 {
      transform: rotate(45deg);
      top: 10px; }
    #mainNav.nav-mobile-open .burger .burger-line2 {
      opacity: 0; }
    #mainNav.nav-mobile-open .burger .burger-line3 {
      transform: rotate(-45deg);
      bottom: 10px; }
    #mainNav.nav-mobile-open .mainNavWrapper ul {
      height: auto;
      opacity: 1;
      transform: translateY(0); } }
@media (min-width: 768px) {
  #mainNav {
    position: relative;
    width: 100%;
    top: 8%; }
    #mainNav .background-nav-open {
      display: none; }
    #mainNav .burger {
      display: none; }
    #mainNav .background-white-mobile {
      display: none; }
    #mainNav .mainNavContent {
      top: 0;
      position: relative;
      -webkit-transition: top 0.3s ease;
      transition: top 0.3s ease; }
      #mainNav .mainNavContent .logo-site-subNav {
        display: none; }
    #mainNav .mainNavWrapper {
      position: relative;
      margin: 0 auto;
      text-align: center;
      padding: 0;
      max-width: 1140px; }
      #mainNav .mainNavWrapper ul {
        padding: 0; }
        #mainNav .mainNavWrapper ul li {
          display: inline-block;
          padding: 0rem 2.5rem; }
          #mainNav .mainNavWrapper ul li a {
            color: #b0b0b0; }
            #mainNav .mainNavWrapper ul li a:hover {
              color: #454545; }
              #mainNav .mainNavWrapper ul li a:hover:after {
                width: 100%; }
    #mainNav.subNav {
      z-index: 99;
      top: -60px;
      position: fixed; }
      #mainNav.subNav.subNavVisible .mainNavContent {
        top: 60px; }
      #mainNav.subNav .mainNavContent {
        padding: 12px 0 13px;
        background-color: #fff;
        filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.09)); }
        #mainNav.subNav .mainNavContent .mainNavWrapper {
          text-align: right;
          max-width: calc(1140px + 3rem);
          padding: 0 1.5rem; }
          #mainNav.subNav .mainNavContent .mainNavWrapper .logo-site-subNav {
            display: block;
            position: absolute;
            width: 42px;
            height: 42px;
            top: 50%;
            transform: translate(0, -50%);
            left: 2rem;
            -webkit-user-select: none;
            /* Safari */
            -ms-user-select: none;
            /* IE 10 and IE 11 */
            user-select: none;
            /* Standard syntax */ }
          #mainNav.subNav .mainNavContent .mainNavWrapper ul li {
            padding: 0 1rem; }
            #mainNav.subNav .mainNavContent .mainNavWrapper ul li:last-child {
              padding-right: 0; }
            #mainNav.subNav .mainNavContent .mainNavWrapper ul li a {
              color: #454545; } }

#hero {
  width: 100%;
  height: 100svh;
  min-height: 650px;
  max-height: 1400px;
  position: relative; }
  #hero img {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */ }
  #hero .logo-site {
    display: block;
    width: 220px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6); }
    #hero .logo-site.active {
      transform: translate(-50%, -50%); }
    @media (min-width: 576px) {
      #hero .logo-site {
        width: 285px; } }
    #hero .logo-site img {
      width: 100%;
      height: auto; }
  #hero h1 {
    text-align: center;
    position: absolute;
    margin: 0;
    width: 100%;
    padding: 0 1.5rem;
    top: 78%;
    left: 50%;
    transform: translate(-50%, 40px); }
    #hero h1.active {
      transform: translate(-50%, -50%); }
    #hero h1 .name {
      display: block;
      font-size: 1.8rem;
      font-weight: 200;
      color: #454545; }
      @media screen and (min-width: 376px) {
        #hero h1 .name {
          font-size: 2rem; } }
      @media screen and (min-width: 415px) {
        #hero h1 .name {
          font-size: 2.2rem; } }
      @media screen and (min-width: 460px) {
        #hero h1 .name {
          font-size: 2.4rem; } }
      @media (min-width: 576px) {
        #hero h1 .name {
          font-size: 2.8rem; } }
    #hero h1 .activity {
      display: block;
      font-size: 0.85rem;
      font-weight: 400;
      color: #b0b0b0; }
      @media screen and (min-width: 415px) {
        #hero h1 .activity {
          font-size: 0.9rem; } }
      @media screen and (min-width: 460px) {
        #hero h1 .activity {
          font-size: 1rem; } }

#presentation {
  padding-bottom: 0; }
  #presentation .text-presentation {
    margin-bottom: 60px; }

.pieChart-wrapper {
  position: relative;
  width: 250px;
  height: 248px;
  margin: 0 auto; }
  @media (min-width: 992px) {
    .pieChart-wrapper {
      margin: 0 auto 30px; } }
  @media (min-width: 992px) {
    .pieChart-wrapper:after {
      content: "";
      display: block;
      position: absolute;
      top: 215px;
      left: 50%;
      transform: translate(-50%, 0);
      width: 300px;
      height: 140px;
      background-image: url("../images/reflet-competences.png");
      background-size: cover;
      background-repeat: no-repeat;
      z-index: 1;
      opacity: 0; } }
  .pieChart-wrapper.active:after {
    opacity: 1;
    -webkit-transition: all 2s ease 0.7s;
    transition: all 2s ease 0.7s; }
  .pieChart-wrapper .title-chart {
    position: absolute;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    width: 190px;
    top: 51%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .pieChart-wrapper .pieChart {
    position: relative;
    z-index: 2; }

@media (min-width: 992px) {
  #competences-detaillees {
    padding-bottom: 0; } }
#competences-detaillees .gr-vesse-regard-gauche {
  display: none; }
  @media (min-width: 992px) {
    #competences-detaillees .gr-vesse-regard-gauche {
      display: block; } }
#competences-detaillees .vesse-regard-gauche {
  max-width: 380px; }
  @media (min-width: 992px) {
    #competences-detaillees .vesse-regard-gauche {
      display: block;
      float: right; } }

#competence-table {
  position: relative; }
  @media (min-width: 992px) {
    #competence-table {
      top: 50%;
      transform: translateY(-50%) translateY(-45px); } }
  #competence-table table thead tr td {
    color: #3aafe2; }
  #competence-table table tr td:first-child {
    width: 150px;
    font-weight: 700; }
  #competence-table table tr td .box-percentage {
    display: block;
    width: 100%;
    height: 8px;
    background-color: #ededed; }
    #competence-table table tr td .box-percentage .value-percentage {
      display: block;
      width: 0;
      height: 8px;
      background-color: #3aafe2;
      -webkit-transition: all 1s ease 0.3s;
      transition: all 1s ease 0.3s; }
      #competence-table table tr td .box-percentage .value-percentage.active.val100 {
        width: 100%; }
      #competence-table table tr td .box-percentage .value-percentage.active.val90 {
        width: 90%; }
      #competence-table table tr td .box-percentage .value-percentage.active.val80 {
        width: 80%; }
      #competence-table table tr td .box-percentage .value-percentage.active.val70 {
        width: 70%; }
      #competence-table table tr td .box-percentage .value-percentage.active.val60 {
        width: 60%; }
      #competence-table table tr td .box-percentage .value-percentage.active.val50 {
        width: 50%; }
      #competence-table table tr td .box-percentage .value-percentage.active.val40 {
        width: 40%; }
      #competence-table table tr td .box-percentage .value-percentage.active.val30 {
        width: 30%; }

#intro-realisations {
  padding-bottom: 0;
  overflow: hidden; }
  #intro-realisations .ipad-anim {
    margin: 0 -15%; }
    #intro-realisations .ipad-anim .ipad-container {
      position: relative;
      width: 100%;
      max-width: 750px;
      margin: 0 auto;
      transform: translateY(100%);
      -webkit-transition: all 2s ease;
      transition: all 2s ease; }
      #intro-realisations .ipad-anim .ipad-container .image-ipad {
        margin: 0; }
      #intro-realisations .ipad-anim .ipad-container .video-container {
        position: absolute;
        top: 34%;
        left: 15%;
        margin: 0 auto;
        width: 70%; }
        #intro-realisations .ipad-anim .ipad-container .video-container video {
          width: 100%;
          height: auto; }
    #intro-realisations .ipad-anim.active .ipad-container {
      transform: translateY(0); }

.liste-cv {
  list-style-type: none;
  padding: 0; }
  .liste-cv .item-liste-cv {
    margin-bottom: 1rem; }
    .liste-cv .item-liste-cv:last-child {
      margin-bottom: 0; }
  .liste-cv .titre-experience {
    font-size: 1rem;
    margin-bottom: 0;
    line-height: 1.5;
    font-weight: 700; }
    .liste-cv .titre-experience .cv-date {
      display: block; }
    .liste-cv .titre-experience .cv-job {
      display: block;
      color: #3aafe2; }
    .liste-cv .titre-experience .cv-entreprise {
      display: block; }
  .liste-cv ul {
    padding-left: 1rem;
    list-style-type: initial; }

.section-video-background {
  overflow: hidden;
  position: relative;
  z-index: 1;
  min-height: 800px; }
  @media screen and (min-width: 1200px) {
    .section-video-background {
      min-height: 850px; } }
  @media screen and (min-width: 1650px) {
    .section-video-background {
      min-height: 950px; } }
  .section-video-background .video-background {
    height: 100%;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); }
    .section-video-background .video-background .gradient-video {
      position: absolute;
      width: 100%;
      height: 500px;
      top: -1px;
      left: 0;
      background-image: linear-gradient(#f8f8f8, rgba(248, 248, 248, 0));
      z-index: 2; }
    .section-video-background .video-background video, .section-video-background .video-background img {
      width: auto;
      height: 112%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -46%);
      z-index: 1; }
      @media screen and (min-width: 600px) {
        .section-video-background .video-background video, .section-video-background .video-background img {
          height: 105%;
          transform: translate(-50%, -48%);
          transform: translate(-50%, -49.5%); } }
      @media screen and (min-width: 1200px) {
        .section-video-background .video-background video, .section-video-background .video-background img {
          transform: translate(-50%, -49.5%); } }
      @media screen and (min-width: 1600px) {
        .section-video-background .video-background video, .section-video-background .video-background img {
          width: 103%;
          height: auto;
          transform: translate(-50%, -50%); } }
      @media screen and (min-width: 1700px) {
        .section-video-background .video-background video, .section-video-background .video-background img {
          width: 103%;
          height: auto;
          transform: translate(-50%, -52%); } }
      @media screen and (min-width: 1800px) {
        .section-video-background .video-background video, .section-video-background .video-background img {
          width: 100%;
          height: auto;
          transform: translate(-50%, -53%); } }
  .section-video-background .layer-video {
    position: relative;
    z-index: 2; }

/*# sourceMappingURL=styles.css.map */