/*   
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒██▓▓▓▓▓█▓██▓█▓▓█████▓███████████▓▓▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒█▓▓▓███▓█▓▓▓█▓▓▓█▓▓▓▓▓▓▓▓██▓▓█▓▓███▓▓▓▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░▒█████▓▓▓▓▓▓▓███▓▓█▓▓█▓▓████▓▓█▓██████▓█▓▓▓▒░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░▓██▓▓▓█▓▓██▓██▓▓▓▓██▓▓█▓█▓▓▓██████▓███▓███▓▓▓▒▒░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░███▓█▓██▓███▓██▓████████▓█▓▓█▓█▓███▓████████▓▓▓▓▒░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░███▓██▓████▓▓▓▓▓███▓▓▓█▓███▓▓▓▓▓▓▓▒▓▓▓▓▓▓█████▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░██▓██████▓█▓▓█▓▓██▓▓▓█▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▓▓▓████▓▓▓▓▓▓▓▒▓░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░▓█▓█████▓▓█▓██▓███▓▓▓▓▓▓▓▓▓▓▓▓▒▓▓▒░▒▒░▒▒▒▒▒▒▓███▓██▓▓▓█▒▒░▒░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░▓█▓██████▓▓██▓███▓▓▓▓▓▓▓▓▓▓▓▓▒▒▓▓░░░░░░░▒▒▒▒▒▓████████▓▓█▒░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░████████▓████▓██▓▒▒▓▓▓▒▓▓▓▓▒▒▒▒▒▒░░░░░░░░▒▒▒▒▒▓▓▓████▓██▓▓▓░▒░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░█▓█████████████▓▒▒▒▒▒▒▓▓▓▓▒▓▒░▒▒░░░░░░░░░▒▒▒▒▒▓▓▓████▓▓█▓▓▒▒░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░▒▓█▓██████████▓█▓▒▒▒▒▒▒▓▓▓▓▓▒▒▓▓▒▒░░░░░░░░░▒▒▒▒▓▓▓▓▓██████▓▓▓▓░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░▒█▓████████████▓▓▓▒▒▒▓▓█▓▒▒▒▒▓░░░░░░▒░░░░░░▒▒▒▒▒▒▓▓████████▓▒▓▓░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░▓▒░▓████████████▓▓▓▓▓▒▓█▓▓▒▓▓▒▒░░░░░░░░░░░░░░▒▒▒▒▒▒▓█████████▓▓▒▒▒░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░██████████████▓▓▓▒▓▒▓▓▓▓▓▒▒░░░░░░░░░░░░░░░░░▒▒▓▒▒▒▒▒█████████▓░░▒░▒░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░▒▓████████▓▓▓▓▓▓▓▓▓▓▒▒▒░░░░░░▒░░░░░░░░▒▒▓▓▓▓▓▓▓▓▒▓▒██████████▒▓░▒░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░▒░████████▓▓██▓▓▓▓▓▓▓▓▓▒▒▒▒░▒▒░░▒▒░▒▒▓█▓▓▓▓▒▒▓▒▒▒▒▒█████████▒░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░█▓███████▓▓▓▒▒▓▓▒▓▓▓▓▒▒▒▒▒▒▓▒▒░░░▒▒▒▒░░▒░▒░░▒▒▒▒▒▒▓███████▓▒▓░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░▓█████████▓▓▒▒▓▓▒▒░▓▒░▒▒▓▒▒▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░░▒▒▒▒█▓██████▓▓░▓░░░░░░░░░░░░░░░
░░░░░░░░░░░░░▒░▓████▓███████▓▒▓▒▒▒▒▒░░░▒▒▒▒▓▓▒▒▒░░░▒▒▒▒▒▒░░░░░░▒▒▒▒▒▓████████▓▒▓▒▒░░░░░░░░░░░░░
░░░░░░░░░░░▒▓█▓▓▒██▓▓███████▓▓▒▒▒▒▒▒▒▒▒░▒▒▒▒▒▒▒▒▒░░▒░▒▒░░░░░░▒░░░▒▒▒▓▓▓████████░▓▓░░░░░░░░░░░░░
░░░░░░░░░░░░░░░▓░▓▓▓████████▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░░▒░░░░░░░░░░░▒░▒▒▒▓▓▓█████▓▓█▓░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░▓▒▓▒▒▓███████▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒░░░░░░░░░░░░░░░▒▒▓▒▓▓▓▓▓▓▓▓██▒▒▒░░░░░░░░░░░░
░░░░░░░░░░░░░▒░▒▒▓▓▓▓████▓▓▓▓▓▓▒▒▒░▒▒▒░░░▒▓▒▒▒▒▒▒░▒▒▒▒░░░░░░░░░░░▒▒▒▒▓█▓▓▓▒░▒▒░▓▓░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░▒░░▓██▓▓▓▒▓▓▓▓▓▒▒▒▒░▒░░░░▒▒▒▒▒▒▒░░░░▒░░░░░░░░░░░▒▒▓▒▓▓▓▓▒▓░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░▒▒░▒█▓▓▓▓██▓▓▓▓▓▒▒▒░░░░▒▒▒▒▒▒▒░░░░░░▓▒▒▒▒░▒░░░▒░▒▒▓▓▓██▓▓▒░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░▓█▓▓▓███▓█▓▓▒▒▒▒▒▒▒▒▒▓▓▓█▓▓▓▒▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▓▓▒██░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░▒▓▓▓▓█▓▓█▓▓▓▒▒▓▒▒▒▓▓▓▓▓█▓▓▓▓█▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▓▓▓█▓█▒░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░▒▒▓▓▒▓▓▓█▓▓▒▒▓▓█▓▓▓▒▓▓▓▓▓▓▓▓█▓▓█▓▒▒▓▓▓▓▓▓▒▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░▒░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▓▓▓▒▒▒▓▓▓▓▓▓▓▓▓█░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒░▒▓▓▓▓▓▓▓▓▒▒▒▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░▓████▓▓▓█████▓▓▒▓▓▓▒▒▒▒▒▒▒▒▒▓▒▒▒▒▓▓▓██▓█▓█████▓░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░██████████▓▓▓▓█▓██████▓▓▓▒▓▓▓█▓▓▓▒▓▓▓▒▓▓█▓█▒█▓██████████████▒░░░░░░░░░░░░░░░░
░░░░░░░░░▒█████████████████▓▓▓▓▓▓██████▓██▓▓▓▓█▓█▓▓▒▓▒▓▓▓▓▓▓▓▓▓▓▓█████████████████░░░░░░░░░░░░░
░░░████████████████████████▓▒▓▒▒▓▓▓██▓▓█▓▓▓▓▓▓▓▓▒▓▓▒▓▒▒▒▒▒▒▒▒▓▓▓█████████████████████░░░░░░░░░░
▓██████████████████████████▒▒▒▒▒▒▒▓▓▓█▓▓▓▓▓▒▒▓▓▓▓▓▓▒▒▓▒▒▓░▓▓▓▓█████████████████████████████████
███████████████████████████▒▒▒▒▒▒▒▒▓▒▒▒▓▓▒▓▓▓▒▒▓▓▓▓▒▒▒▒▒▒▒▒▓▒██████████████████████████████████
███████████████████████████▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▒▒▒▓▒▓▒▒▒████████████████████████████████████
████████████████████████████▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓██████████████████████████████████████
█████████████████████████████▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓████████████████████████████████████████
██████████████████████████████▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓██████████████████████████████████████████
███████████████████████████████▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓█████████████████████████████████████████████
██████████████████████████████████▒▒▒▒▒▒▒▒▒▒▒▓▓████████████████████████████████████████████████
██████████████████████████████████████▓▓▓▓█████████████████████████████████████████████████████
███████████████████████████████████████████████████████████████████████████████████████████████
███████████████████████████████████████████████████████████████████████████████████████████████
███████████████████████████████████████████████████████████████████████████████████████████████
███████████████████████████████████████████████████████████████████████████████████████████████

*/

:root {
  --f-0-min: 16;
  --f-0-max: 18;
  --step-0: calc(
    ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) *
      var(--fluid-bp)
  );

}



@font-face {
    font-family: 'Helvetica Now Micro ExtraBold';
    src: url('font/HelveticaNowMicro-ExtraBold.eot');
    src: local('Helvetica Now Micro Extra Bold'), local('HelveticaNowMicro-ExtraBold'),
        url('font/HelveticaNowMicro-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('font/HelveticaNowMicro-ExtraBold.woff2') format('woff2'),
        url('font/HelveticaNowMicro-ExtraBold.woff') format('woff'),
        url('font/HelveticaNowMicro-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Now Micro ExtrBita';
    src: url('font/HelveticaNowMicro-ExtBdIta.eot');
    src: local('font/Helvetica Now Micro ExtBd Ita'), local('HelveticaNowMicro-ExtBdIta'),
        url('font/HelveticaNowMicro-ExtBdIta.eot?#iefix') format('embedded-opentype'),
        url('font/HelveticaNowMicro-ExtBdIta.woff2') format('woff2'),
        url('font/HelveticaNowMicro-ExtBdIta.woff') format('woff'),
        url('font/HelveticaNowMicro-ExtBdIta.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}


@font-face {
    font-family: 'Helvetica Now Micro Bold';
    src: url('font/HelveticaNowMicro-Bold.eot');
    src: local('Helvetica Now Micro Bold'), local('HelveticaNowMicro-Bold'),
        url('font/HelveticaNowMicro-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/HelveticaNowMicro-Bold.woff2') format('woff2'),
        url('font/HelveticaNowMicro-Bold.woff') format('woff'),
        url('font/HelveticaNowMicro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Now Micro BoldIta';
    src: url('font/HelveticaNowMicro-BoldItalic.eot');
    src: local('Helvetica Now Micro Bold Italic'), local('HelveticaNowMicro-BoldItalic'),
        url('font/HelveticaNowMicro-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('font/HelveticaNowMicro-BoldItalic.woff2') format('woff2'),
        url('font/HelveticaNowMicro-BoldItalic.woff') format('woff'),
        url('font/HelveticaNowMicro-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}


@font-face {
font-family: 'Helvetica Now Micro Medium';
src: url(font/HelveticaNowMicro-Medium.eot?#iefix) format('embedded-opentype'),
url(font/HelveticaNowMicro-Medium.woff2) format('woff2'),
url(font/HelveticaNowMicro-Medium.woff) format('woff'),
url(font/HelveticaNowMicro-Medium.ttf) format('truetype'),
url(font/HelveticaNowMicro-Medium.otf) format('opentype'),
url(font/helveticanowmicro-medium-webfont.svg) format('svg');
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Helvetica Now Text Medium';
src: url(font/helveticanowtext-medium-webfont.eot?#iefix) format('embedded-opentype'),
url(font/helveticanowtext-medium-webfont.woff2) format('woff2'),
url(font/helveticanowtext-medium-webfont.woff) format('woff'),
url(font/helveticanowtext-medium-webfont.ttf) format('truetype'),
url(font/helveticanowtext-medium-webfont.otf) format('opentype'),
url(font/helveticanowtext-medium-webfont.svg) format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
    font-family: 'Helvetica Now Micro MedIta';
    src: url('font/HelveticaNowMicro-MedIta.eot');
    src: local('Helvetica Now Micro Med Ita'), local('HelveticaNowMicro-MedIta'),
        url('font/HelveticaNowMicro-MedIta.eot?#iefix') format('embedded-opentype'),
        url('font/HelveticaNowMicro-MedIta.woff2') format('woff2'),
        url('font/HelveticaNowMicro-MedIta.woff') format('woff'),
        url('font/HelveticaNowMicro-MedIta.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
font-family: 'Helvetica Now Text Reg';
src: url(font/HelveticaNowText-Regular.eot?#iefix) format('embedded-opentype'),
url(font/HelveticaNowText-Regular.woff2) format('woff2'),
url(font/HelveticaNowText-Regular.woff) format('woff'),
url(font/HelveticaNowText-Regular.ttf) format('truetype'),
url(font/HelveticaNowText-Regular.otf) format('opentype'),


url(font/helveticanowtext-regular-webfont.svg) format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Helvetica Now Micro Reg';
src: url(font/HelveticaNowMicro-Regular.eot?#iefix) format('embedded-opentype'),
url(font/HelveticaNowMicro-Regular.woff2) format('woff2'),
url(font/HelveticaNowMicro-Regular.woff) format('woff'),
url(font/HelveticaNowMicro-Regular.ttf) format('truetype'),
url(font/HelveticaNowMicro-Regular.otf) format('opentype'),
url(font/helveticanowmicro-regular-webfont.svg) format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}


@font-face {
    font-family: 'Helvetica Now Micro RegIta';
    src: url('font/HelveticaNowMicro-RegIta.eot');
    src: local('Helvetica Now Micro Reg Ita'), local('HelveticaNowMicro-RegIta'),
        url('font/HelveticaNowMicro-RegIta.eot?#iefix') format('embedded-opentype'),
        url('font/HelveticaNowMicro-RegIta.woff2') format('woff2'),
        url('font/HelveticaNowMicro-RegIta.woff') format('woff'),
        url('font/HelveticaNowMicro-RegIta.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
font-family: 'Helvetica Now Text Light';
src: url(font/HelveticaNowText-Light.eot?#iefix) format('embedded-opentype'),
url(font/HelveticaNowText-Light.woff2) format('woff2'),
url(font/HelveticaNowText-Light.woff) format('woff'),
url(font/HelveticaNowText-Light.ttf) format('truetype'),
url(font/HelveticaNowText-Light.otf) format('opentype'),
url(font/helveticanowtext-light-webfont.svg) format('svg');
font-weight: 300;
font-style: normal;
font-display: swap;
}

@font-face {
    font-family: 'Helvetica Now Micro LightIta';
    src: url('font/HelveticaNowMicro-LightItalic.eot');
    src: local('Helvetica Now Micro Light Ita'), local('HelveticaNowMicro-LightItalic'),
        url('font/HelveticaNowMicro-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('font/HelveticaNowMicro-LightItalic.woff2') format('woff2'),
        url('font/HelveticaNowMicro-LightItalic.woff') format('woff'),
        url('font/HelveticaNowMicro-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}



@font-face {
    font-family: 'Helvetica Now Micro ExtraLight';
    src: url('font/HelveticaNowMicro-ExtraLight.eot');
    src: local('Helvetica Now Micro Extra Light'), local('HelveticaNowMicro-ExtraLight'),
        url('font/HelveticaNowMicro-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('font/HelveticaNowMicro-ExtraLight.woff2') format('woff2'),
        url('font/HelveticaNowMicro-ExtraLight.woff') format('woff'),
        url('font/HelveticaNowMicro-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}



@font-face {
font-family: 'Helvetica Now Micro Italic';
src: url(font/HelveticaNowMicro-ExtLtIta.eot?#iefix) format('embedded-opentype'),
url(font/HelveticaNowMicro-ExtLtIta.woff2) format('woff2'),
url(font/HelveticaNowMicro-ExtLtIta.woff) format('woff'),
url(font/HelveticaNowMicro-ExtLtIta.ttf) format('truetype'),
url(font/HelveticaNowMicro-ExtLtIta.otf) format('opentype'),
url(font/helveticanowmicro-extralight-webfont.svg) format('svg');
font-weight: 100;
font-style: italic;
font-display: swap;
}







body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #000000;
  overscroll-behavior: none;  
  font-family: 'Helvetica Now Micro Reg', 'Helvetica', sans-serif;
  font-color : #ffffff;
  font-weight: 400;
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.45;
}

.containerload{
  display: flex;
}

.loader{
  width :100vw;
  height : 100vh;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position : fixed;
  top : 0;
  left : 0;
  z-index: 126;
}

.dot, .shadow{
  width : 4px;
  height: 4px;
  background-color: #ffffff;
  border-radius: 2px;
  margin : 0 30px;
}


.shadow{
  opacity: 0.3;
}

 h1 {
font: 2.375rem/2.65rem "Helvetica Now Micro ExtraBold", sans-serif;
color: #ffffff;
letter-spacing: -0.2rem;
}

.monnom{
  font: 4.375rem/1rem "Helvetica Now Micro ExtraBold", sans-serif;

letter-spacing: -0.4rem;

}
.remonteunpeu{
  margin-top:-30px;
  font: 1.875rem/2.65rem "Helvetica Now Micro ExtraLight", sans-serif;
  margin-bottom: 80px;
}

h2{
 font: 1.5rem/1.5rem "Helvetica Now Micro ExtraLight", sans-serif;

letter-spacing: -0.1rem;

}

.couleurrose{
  color:#e985b6;
}

.couleurverte{
  color: #96d3c1;
}


.couleurjaune{
  color: #e5e766;
}

.couleurbleue{
  color: #879cd0;
}
#bougetoi{
  margin-top: 70px;
}
p{
color : #ffffff;

 /* font: 1rem/0.8rem "Helvetica Now Micro Reg", sans-serif; */
  font: 0.9rem/0.8rem "Helvetica Now Micro ExtraLight", sans-serif;
 letter-spacing: -0.02rem;
}
#smooth_wrapper{
  z-index: 1;
}
 
.split{
  width : 50%;
  color : #ffffff;
  position : relative ;
  margin : 0 auto;
  opacity: 0 ;
  margin-bottom: 100px;

}

.contact{
  width : 50%;
  color : #ffffff;
  position : relative ;
  left : 20%;
  opacity: 1;
  height : 900px;
  padding-top: 250px;
}



.blocs_chapitres {

  width : 100vw;
  height : auto;
  background-color: #000000;
  position: relative;
  overflow: hidden;
  margin-bottom: 10vh;

}

.hoouicentremoi{

  width : 80vw;
  height : auto;  
  margin-left: auto;
  margin-right: auto;
}

.bloc_projet{
  box-sizing: border-box;
            border: 15px solid black;
  cursor:pointer;
  width : 50%;
  height :40vh;
  float :left;
  position : relative;
  display: block;
  overflow:hidden;
  background-color: #000000;
  transition: all 0.5s ease;
}
 


.bloc_projet:hover {
  border: 5px solid black; 
}

.bloc_projet .description{
  background-color: rgba(0, 0, 0, 0.5);
  padding : 5px 5px 5px 15px ;
  width : 60%;
  position :absolute;
  top : 50%;
  left : 50%;
   transform: translate(-50%, -50%);
 }

.bloc_projet .description h2{
      color : #ffffff;
     
      font: 2rem/1.8rem "Helvetica Now Micro Bold", sans-serif;
      letter-spacing: -0.2rem;
 }

.bloc_projet .description p{
      margin-top: -20px;
      color : #ffffff;
      font: 0.8rem/0.8rem "Helvetica Now Micro ExtraLight", sans-serif;
      letter-spacing: -0.02rem;
 }

.bloc_projedsfst:hover{ 
  width : 25vw;
  z-index: 199999;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  overflow: visible;
}


.comparisonSection {
  width : 100vw;
  height : 100vh;
  position: relative;
  overflow: hidden;
}

.comparisonImage {
  width: 100%;
  height: 100%;
  
}

.comparisonImage img {
  width: 100%;   
  aspect-ratio: auto;
  position: absolute;
  top: 0;
}




.comparisonImage .description_big{
  background-color: rgba(0, 0, 0, 0.5);  
  width : 30%;  
  height : 20%;
  min-height: 150px;
  position :absolute;
  top : 20%;
  left : 50%;
  transform: translate(-50%, -50%);   
 } 

.comparisonImage .description_big .desc_big_titre{
  overflow: hidden;  
  position : relative;
  display: block;
  height : 30%;
  width: 100%; 
  top : 0; 
  color : #000000;
  background-color: #ffffff;
}

.comparisonImage .description_big .desc_big_titre h2{
  font: 1.3rem/1.1rem "Helvetica Now Micro Bold", sans-serif;
  margin-top: 0;
  padding-top: 13px;
  padding-left: 10px;

}

.comparisonImage .description_big .desc_big_txt{
   display: block;
  position : relative;
  height : 70%;
  width: 100%; 
  color : #000000;
  background-color: #ffffff;
}

.comparisonImage .description_big .desc_big_txt p{
  font: 0.9rem/0.8rem "Helvetica Now Micro Reg", sans-serif;
  color : #000000;
  margin-top: 0;
  padding-top: 5px;
  padding-left: 10px;
}









.swiper-slide img{
    width: 100%;
   
  aspect-ratio: auto; 
}

/*                                                                     SLIDER      */

.gallery {
  width: 100%; 
  max-width: 80vw;
  margin: 40px auto;
}

.gallery-slider {
  width: 100%;
  height: auto;
  margin: 0 0 10px 0;
}

.gallery-slider .swiper-slide {
  
 
  height: 80vh;   width: auto;
}

.gallery-slider .swiper-slide img {
  display: block;
  width: auto;
  height: 100%;
  margin: 0 auto;
}

.gallery-slider .swiper-slide .letexte {
 
    
  width: 70%;
  height: 100%;
  display: table;
  margin: auto; 
  position: relative;
 
}
 
.gallery-slider .swiper-slide .letexte .centremongrostexte{
        display: table-cell;
        vertical-align: middle;
}

.gallery-slider .swiper-slide .letexte p{
 
 font: 1.2rem/1.3rem "Helvetica Now Text Light", sans-serif;
 letter-spacing: -0.02rem;
}


.gallery-thumbs {
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.gallery-thumbs .swiper-slide {
  width: 100px;
  height: 100px;
  text-align: center;
  overflow: hidden;
  opacity: 0.1;
}

.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}

.gallery-thumbs .swiper-slide img {
  width: auto;
  height: 100%;
}




/*                                                                      NAV      */
nav {
  position : fixed;
  top : 0px;
  z-index: 300;
  left : -7px;
  width: 300px;
  background: white;
  color: rgba(0, 0, 0, 0.87);
  -webkit-clip-path: circle(24px at 30px 24px);
  clip-path: circle(24px at 32px 24px);
  -webkit-transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
  transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
}

nav:hover {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-duration: 0.75s;
  transition-duration: 0.75s;
  -webkit-clip-path: circle(390px at 225px 24px);
  clip-path: circle(390px at 150px 24px);
}

a {

 font: 1rem/1rem "Helvetica Now Text Light", sans-serif;
 letter-spacing: -0.02rem;
  display: block;
  line-height: 25px;
  padding: 0 20px;
  color: inherit;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

a:hover { background: #ff00d8; color : #ffffff;  letter-spacing: 0rem;}

a:active { background: #ffca28; }

.navicon {
  padding: 23px 20px;
  cursor: pointer;
  -webkit-transform-origin: 32px 24px;
  -ms-transform-origin: 32px 24px;
  transform-origin: 32px 24px;
}

.navicon div {
  position: relative;
  width: 20px;
  height: 2px;
  background: rgba(0, 0, 0, 0.87);
}

.navicon div:before,
.navicon div:after {
  display: block;
  content: "";
  width: 20px;
  height: 2px;
  background: rgba(0, 0, 0, 0.87);
  position: absolute;
}

.navicon div:before { top: -7px; }

.navicon div:after { top: 7px; }


/*                                                                                 ECRANs      */

@media screen and (max-width: 1100px){

.remonteunpeu{
  margin-bottom: 10px;
}


  #bougetoi{
  margin-top: 0px;
}

.gallery-slider .swiper-slide .letexte p{
 
 font: 1rem/1rem "Helvetica Now Text Light", sans-serif;
 letter-spacing: -0.02rem;
}


.comparisonImage .description_big {
  top : 25%;
  min-width: 250px;
  min-height: 180px;
}

.hoouicentremoi{

  width : 100vw;
}

.bloc_projet .description{
  width : 70%;
}
  .bloc_projet img{
width: 100%;
    height: 100%;
    object-fit: cover;
}

.bloc_projet .description h2{
      color : #ffffff;
      word-break: normal;
      font: 1.3rem/1.3rem "Helvetica Now Micro Bold", sans-serif;
      letter-spacing: -0.1rem;
 }


.bloc_projet .description p{
      margin-top: -10px;
      color : #ffffff;
      font: 0.8rem/0.8rem "Helvetica Now Micro ExtraLight", sans-serif;
      letter-spacing: -0.02rem;
 }

 .comparisonImage img {
width: 100%;
    height: 100%;
    object-fit: cover;
  position: absolute;
  top: 0;

}


.gallery{
 
  
  max-width: 100vw;
}


        .swiper-container {
          align-self: center; 
          width : 100vw;
        }
        .gallery-slider  .swiper-slide img{
           position :relative;
          width:100%;  
          height : auto;
          align-content: center; 
          top : 50%;
          transform: translate(0, -50%);
          aspect-ratio: auto;
        }
        .letexte p{

        vertical-align: middle;
        }
}

@media screen and (min-width: 1101px){

  .bloc_projet img{
  width:100%;  
  aspect-ratio: auto;
}
}