@charset "UTF-8";
body[data-couleur="vert"] {
  --cc: #005F4B;
  --bg: #33FF95; }

body[data-couleur="rouge"] {
  --cc: #4a0000;
  --bg: #ff594a; }

body[data-couleur="bleu"] {
  --cc: #004c5b;
  --bg: #66daff; }

body[data-couleur="jaune"] {
  --cc: #5b5b00;
  --bg: #fffb66; }

body[data-couleur="blanc"] {
  --cc: #333333;
  --bg: white; }

body[data-couleur="vert-sombre"] {
  --cc: #33FF95;
  --bg: #005F4B; }

body[data-couleur="rouge-sombre"] {
  --cc: #ff594a;
  --bg: #4a0000; }

body[data-couleur="bleu-sombre"] {
  --cc: #66daff;
  --bg: #004c5b; }

body[data-couleur="jaune-sombre"] {
  --cc: #fffb66;
  --bg: #5b5b00; }

body[data-couleur="noir"] {
  --cc: white;
  --bg: #333333; }

body[data-couleur$="-sombre"] {
  --dk: var(--bg); }

body:not([data-couleur$="-sombre"]) {
  --dk: var(--cc); }

@media (prefers-color-scheme: dark) {
  body[data-couleur="vert"] {
    --cc: #33FF95;
    --bg: #005F4B; }
  body[data-couleur="rouge"] {
    --cc: #ff594a;
    --bg: #4a0000; }
  body[data-couleur="bleu"] {
    --cc: #66daff;
    --bg: #004c5b; }
  body[data-couleur="jaune"] {
    --cc: #fffb66;
    --bg: #5b5b00; }
  body[data-couleur="blanc"] {
    --cc: white;
    --bg: #333333; }
  body {
    --dk: var(--bg); } }

html {
  font-size: 100%; }

@media (min-width: 1921px) and (-webkit-device-pixel-ratio: 1) {
  html {
    font-size: 150%; } }

body {
  font-size: 18px;
  line-height: 1.25rem;
  font-family: "Clash Grotesk", sans-serif;
  font-weight: 400;
  color: var(--cc);
  /*}
  @supports (font-variation-settings : normal){
    font-family: $font-1v;
    font-variation-settings: "wght" 300;
  }*/ }
  @media print {
    body {
      font-size: 13px; } }

/* desktop */
/*  bordures  */
/*  autre */
::selection, ::-moz-selection {
  background: var(--cc);
  color: var(--bg); }

/* mixin for multiline */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0; }

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em; }

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none; }

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none; }

html {
  box-sizing: border-box;
  text-decoration-skip-ink: auto; }

body, html {
  max-width: 100vw;
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px; }

*, *:before, *:after {
  margin: 0;
  padding: 0;
  position: relative;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-smooth: never;
  -moz-font-smooth: never; }

em {
  font-style: italic; }

button {
  border: none;
  outline: none; }

a {
  text-decoration: none;
  color: currentColor; }

a:hover {
  text-decoration: none; }

ul {
  list-style-type: none;
  list-style-position: inside; }

*:focus {
  outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  /* added line */
  border: 0; }

html, body {
  overflow-x: hidden; }

body {
  padding-left: 25px;
  padding-right: 25px;
  background-color: var(--bg);
  /*@include for-size(desktop){ 
    margin-left: $unite*4;
    margin-right: $unite*4;
  }*/ }

/*

// Settings
:root {
  --offset: 1.5rem;
  --max_width: 72rem;
  --columns: 2;
  --gutter: .5rem;
  --baseline: 15px;
  --baseline-shift: 2rem;
  --color: hsla(204, 80%, 72%, 0.25);
  --media-query: 'base';
}

// Helper variables
:root {
  --repeating-width: calc(100% / var(--columns));
  --column-width: calc((100% / var(--columns)) - var(--gutter));
  --background-width: calc(100% + var(--gutter));
  --background-columns: repeating-linear-gradient(
    to right,
    var(--color),
    var(--color) var(--column-width),
    transparent var(--column-width),
    transparent var(--repeating-width)
  );
  --background-baseline: repeating-linear-gradient(
    to bottom,
    black,
    var(--color) 1px,
    transparent 1px,
    transparent var(--baseline)
  );
}
*/
#topbar {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  height: 1.875rem; }
  #topbar svg {
    height: 3.125rem;
    width: 3.125rem; }
  #topbar nav {
    z-index: 5; }

body#section #topbar .logo, body#info #topbar .logo {
  width: 37.5px;
  height: 37.5px; }
  body#section #topbar .logo:before, body#info #topbar .logo:before {
    content: "";
    position: absolute;
    background: var(--bg);
    border-radius: 50%;
    left: -7px;
    top: -11px;
    width: 100%;
    height: 100%; }

body > footer {
  color: var(--cc);
  color: var(--dk); }
  body > footer:before {
    content: "";
    position: absolute;
    left: -25px;
    top: 0;
    width: 120%;
    width: calc(100% + 50px);
    height: 100%;
    background: white; }
  body > footer .description, body > footer .contact {
    font-family: "Clash Grotesk", sans-serif;
    font-weight: 400;
    /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
    font-size: 0.75rem;
    line-height: 0.9375rem;
    letter-spacing: 0px;
    color: currentColor; }
  body > footer .contact {
    width: 100%; }
    body > footer .contact:before {
      content: "Contactez-nous\2009!";
      font-weight: 600;
      position: absolute;
      top: -1.25rem; }
    body > footer .contact > li {
      width: 50%;
      width: calc(50% - 12.5px); }
      body > footer .contact > li:nth-of-type(3) {
        position: absolute;
        margin-left: 50%;
        margin-left: calc(50% + 12.5px);
        top: 0; }
  body > footer svg {
    width: 100%;
    max-height: 3.125rem; }
  @media (max-width: 700px) {
    body > footer {
      padding: 1.25rem 0; }
      body > footer .description {
        max-width: 200px;
        margin-bottom: 1.25rem; }
      body > footer .contact {
        margin: 2.5rem 0; } }
  @media (min-width: 700px) {
    body > footer {
      padding: 1.25rem 0;
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: repeat(8, 1fr);
      -ms-template-rows: 6.5rem;
      -ms-grid-gap: 1.25rem 12.5px;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 6.5rem;
      grid-gap: 1.25rem 12.5px; }
      body > footer svg {
        -ms-grid-column: 1 / 2;
        grid-column: 1 / 2; }
      body > footer .description {
        -ms-grid-column: 2 / span 2;
        grid-column: 2 / span 2; }
      body > footer .contact {
        -ms-grid-column: 6 / 9;
        grid-column: 6 / 9;
        margin: 1.25rem 0; } }
  @media (min-width: 1400px) {
    body > footer .description {
      -ms-grid-column: 2 / span 1;
      grid-column: 2 / span 1; }
    body > footer .contact {
      -ms-grid-column: 7 / 9;
      grid-column: 7 / 9; } }

/*
    On Off
            */
input.on-off {
  position: relative;
  width: 3em;
  height: 1.25em;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  outline: none;
  border-radius: 1em;
  box-shadow: inset 0 0 0.5 gray;
  transition: all 0.25s ease-in-out;
  border: 1px solid currentColor;
  cursor: pointer; }

input.on-off::before {
  content: "";
  position: absolute;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: var(--bg);
  top: -.125em;
  left: 52%;
  left: calc(50% + 2px);
  transition: all 0.25s ease-in-out;
  transform: scale(1.1);
  border: 1px solid currentColor; }

input.on-off:checked::before {
  left: 0; }

/*
  Drop Down
            */
nav.dropdown {
  position: relative; }
  nav.dropdown:hover ul.dropdown__menu, nav.dropdown:focus-within ul.dropdown__menu {
    opacity: 1;
    transform: rotateX(0) translateX(-50%);
    visibility: visible; }
    nav.dropdown:hover ul.dropdown__menu a, nav.dropdown:focus-within ul.dropdown__menu a {
      opacity: 1; }
  nav.dropdown button.dropdown__title {
    display: inline-block;
    cursor: pointer;
    font-family: "Clash Grotesk", sans-serif;
    font-weight: 600;
    /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: 0px;
    color: var(--cc);
    text-align: center;
    text-decoration: none;
    color: var(--cc);
    background-color: transparent;
    border: none;
    padding: 4px 1.5rem 4px 0;
    border-top: 3px solid transparent;
    transition: 280ms all 120ms ease-out; }
    nav.dropdown button.dropdown__title:hover, nav.dropdown button.dropdown__title:focus {
      border-top-color: var(--bg); }
    nav.dropdown button.dropdown__title svg {
      position: absolute;
      top: -40%;
      right: 0;
      width: 1rem !important; }
  nav.dropdown ul.dropdown__menu {
    position: absolute;
    width: 100%;
    left: 50%;
    transition: 280ms all 120ms ease-out;
    transform: rotateX(-33deg) translateX(-50%);
    transform-origin: top center;
    visibility: hidden;
    opacity: 0.3;
    margin: 0.625rem 0;
    padding-right: 25px;
    background-color: var(--bg); }
    @media (max-width: 700px) {
      nav.dropdown ul.dropdown__menu {
        border-left: 0.5px solid var(--cc);
        border-bottom: 0.5px solid var(--cc); } }
    nav.dropdown ul.dropdown__menu li {
      font-family: "Clash Grotesk", sans-serif;
      font-weight: 300;
      /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
      font-size: 1rem;
      line-height: 1.25rem;
      letter-spacing: 0px;
      color: var(--cc); }
      nav.dropdown ul.dropdown__menu li a {
        display: block;
        transition: 280ms all 120ms ease-out;
        opacity: 0;
        padding: 0 12.5px 0.625rem 12.5px;
        text-transform: capitalize; }
        nav.dropdown ul.dropdown__menu li a:hover {
          text-decoration: underline;
          text-decoration-skip-ink: auto; }

body#index main {
  /* 
				cover
								*/
  /* 
				Reclame
								*/
  /* 
				Sections
								*/ }
  body#index main #cover {
    padding: 5rem 0 0 0; }
    @media (min-width: 1200px) {
      body#index main #cover {
        display: -webkit-box;
        /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;
        /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;
        /* TWEENER - IE 10 */
        display: -webkit-flex;
        /* NEW - Chrome */
        display: flex;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: space-evenly;
        -moz-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
        -webkit-justify-content: space-evenly;
        justify-content: space-evenly;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        min-height: calc(100vh - 5rem);
        padding: 0 0 10vh 0;
        box-sizing: border-box; } }
    body#index main #cover h1 {
      font-family: "Clash Grotesk", sans-serif;
      font-weight: 600;
      /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
      font-size: 10rem;
      line-height: 10rem;
      letter-spacing: 0px;
      color: var(--cc);
      text-transform: uppercase;
      font-size: 15vw;
      font-size: clamp(50px, 15vw, 9.5rem);
      line-height: 80%;
      letter-spacing: -.1vw;
      height: auto;
      display: inline-block; }
      @supports (-webkit-text-stroke: 1px var(--cc)) {
        body#index main #cover h1 {
          color: var(--bg);
          -webkit-text-stroke: 1px var(--cc); } }
      body#index main #cover h1 svg {
        color: var(--cc);
        width: clamp(100px, 33%, 500px);
        position: absolute;
        bottom: 0;
        right: 0;
        transform: translateY(50%); }
    body#index main #cover .second {
      margin: 5rem 0;
      max-width: 400px;
      max-width: 22rem;
      width: 100%; }
      @media (min-width: 1200px) {
        body#index main #cover .second {
          margin-left: auto;
          margin-right: auto;
          padding: 0 25px; } }
      body#index main #cover .second > * {
        margin-bottom: 0.625rem; }
      body#index main #cover .second h2 {
        font-family: "Clash Grotesk", sans-serif;
        font-weight: 600;
        /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
        font-size: 1rem;
        line-height: 1.25rem;
        letter-spacing: 0px;
        color: var(--cc); }
      body#index main #cover .second p {
        font-family: "Clash Grotesk", sans-serif;
        font-weight: 400;
        /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
        font-size: 1rem;
        line-height: 1.25rem;
        letter-spacing: 0px;
        color: var(--cc); }
      body#index main #cover .second > a:last-of-type {
        font-family: "Clash Grotesk", sans-serif;
        font-weight: 600;
        /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
        font-size: 1rem;
        line-height: 1.25rem;
        letter-spacing: 0px;
        color: var(--cc);
        text-decoration: underline;
        text-decoration-skip-ink: auto; }
        body#index main #cover .second > a:last-of-type:before {
          content: "→";
          overflow-x: hidden;
          display: inline-block;
          width: 0;
          top: 5px;
          transition: .25s ease-in-out; }
        body#index main #cover .second > a:last-of-type:hover:before {
          width: 25px; }
    body#index main #cover #to-sections {
      text-align: center;
      position: absolute;
      bottom: 1.5625rem;
      padding: 0.3125rem 12.5px;
      margin: 0.625rem 0;
      display: none; }
      @media (min-width: 1200px) {
        body#index main #cover #to-sections {
          display: inline-block; } }
      body#index main #cover #to-sections p {
        font-family: "Clash Grotesk", sans-serif;
        font-weight: 400;
        /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
        font-size: 0.75rem;
        line-height: 0.9375rem;
        letter-spacing: 0px;
        color: var(--cc);
        font-weight: 600;
        margin: 0.3125rem 0;
        max-width: 5rem; }
      body#index main #cover #to-sections .mouse {
        margin: 0 auto;
        display: block;
        border-radius: 40%;
        border: 1px solid currentColor;
        height: 30px;
        width: 17px;
        position: relative; }
      body#index main #cover #to-sections .move {
        position: absolute;
        background-color: currentColor;
        height: 3.125px;
        width: 3.125px;
        border-radius: 50%;
        left: 50%;
        transform: translateX(-50%);
        animation: move 1.5s linear infinite; }

@keyframes move {
  0% {
    transform: translate(-50%, 5px);
    opacity: 0; }
  50% {
    transform: translate(-50% 15px);
    opacity: 1; }
  100% {
    transform: translate(-50%, 25px);
    opacity: 0; } }
  body#index main #reclame {
    background: white;
    padding: 0.625rem 0;
    border: 1px solid var(--cc);
    position: absolute;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    z-index: 5; }
    body#index main #reclame p {
      font-family: "Clash Grotesk", sans-serif;
      font-weight: 600;
      /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
      font-size: 1.4rem;
      line-height: 1.875rem;
      letter-spacing: 0px;
      color: var(--cc);
      width: 5000px;
      transform: translateX(0);
      animation: 30s linear infinite alternate reclame; }
    @media (prefers-reduced-motion: reduce) {
      body#index main #reclame p {
        animation: none; } }

@keyframes reclame {
  from {
    transform: translateX(0%); }
  to {
    transform: translateX(-15%); } }
  body#index main #sections {
    min-height: calc(100rem - 5rem);
    min-height: calc(min(100vh - 5rem, 80rem - 5rem));
    padding-top: 2.5rem; }
    body#index main #sections ul li {
      display: inline-block;
      width: 100%;
      height: calc(60vh - 2.5rem);
      max-height: 40rem;
      margin-top: -4px;
      /* Responsive Masonry */ }
      body#index main #sections ul li a {
        padding: 2.5rem 0;
        box-sizing: border-box;
        display: inline-block;
        height: 100%;
        width: 100%; }
      body#index main #sections ul li h2 {
        font-family: "Clash Grotesk", sans-serif;
        font-weight: 600;
        /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
        font-size: 4rem;
        line-height: 4.375rem;
        letter-spacing: 0px;
        color: var(--cc);
        line-height: 80%;
        text-transform: uppercase;
        text-align: center;
        width: 100%;
        height: 100%;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        position: absolute;
        overflow: hidden; }
        @supports (-webkit-text-stroke: 1px var(--cc)) {
          body#index main #sections ul li h2 {
            color: var(--bg);
            -webkit-text-stroke: 1px var(--cc); } }
        body#index main #sections ul li h2 span {
          display: block;
          transition: .66s ease;
          transform: translateX(100%); }
          body#index main #sections ul li h2 span:nth-of-type(2n) {
            transform: translateX(-150%); }
      body#index main #sections ul li figure {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        overflow: hidden; }
        body#index main #sections ul li figure img {
          object-fit: cover;
          width: 100%;
          height: 100%;
          left: 50%;
          transform: translateX(-50%) scale(1.025);
          transition: .1s ease-in-out; }
      body#index main #sections ul li:hover {
        background: var(--bg); }
        body#index main #sections ul li:hover h2 span {
          transition: 0.33s cubic-bezier(0.68, -0.55, 0.27, 1.55);
          transform: translateX(0); }
        body#index main #sections ul li:hover img {
          transform: translateX(-50%) scale(1);
          transition: 2s .25s ease-in; }
      @media (max-width: 43.7499rem) {
        body#index main #sections ul li {
          border-bottom: 0.5px solid var(--cc); }
          body#index main #sections ul li figure, body#index main #sections ul li h2 {
            width: calc(100% + 50px); }
          body#index main #sections ul li figure {
            left: -25px; }
          body#index main #sections ul li h2 {
            left: calc(50% - 12.5px); } }
      @media (min-width: 43.75rem) {
        body#index main #sections ul li:after {
          content: "";
          position: absolute;
          border-bottom: 0.5px solid var(--cc);
          bottom: 0;
          height: 1px;
          width: calc(100% - 5rem);
          right: 0;
          margin: 0 2.5rem; } }
      @media (min-width: 43.75rem) and (max-width: 56.2499rem) {
        body#index main #sections ul li {
          width: 49%;
          width: calc(50% - 0px);
          /* Spécifique */
          /* Débord sur les marges */ }
          body#index main #sections ul li:nth-of-type(2n):before {
            content: "";
            position: absolute;
            border-left: 0.5px solid var(--cc);
            left: 0;
            height: calc(100% - 5rem);
            width: 1px;
            margin: 2.5rem 0; }
          body#index main #sections ul li:last-of-type::after, body#index main #sections ul li:nth-last-of-type(2)::after {
            content: inherit; }
          body#index main #sections ul li:nth-of-type(2n-1) figure, body#index main #sections ul li:nth-of-type(2n-1) h2, body#index main #sections ul li:nth-of-type(2n) figure, body#index main #sections ul li:nth-of-type(2n) h2 {
            width: calc(100% + 25px); }
          body#index main #sections ul li:nth-of-type(2n-1) figure {
            left: -25px; }
          body#index main #sections ul li:nth-of-type(2n-1) h2 {
            left: calc(50% - 12.5px); }
          body#index main #sections ul li:nth-of-type(2n) h2 {
            left: calc(50% + 12.5px); } }
      @media (min-width: 56.25rem) and (max-width: 74.999rem) {
        body#index main #sections ul li {
          width: 33%;
          width: calc(33.333% - 0px);
          /* Spécifique */
          /* Débord sur les marges */ }
          body#index main #sections ul li:nth-of-type(3n):before, body#index main #sections ul li:nth-of-type(3n-1):before {
            content: "";
            position: absolute;
            border-left: 0.5px solid var(--cc);
            left: 0;
            height: calc(100% - 5rem);
            width: 1px;
            margin: 2.5rem 0; }
          body#index main #sections ul li:last-of-type::after {
            content: inherit; }
          body#index main #sections ul li:nth-of-type(3n-2) figure, body#index main #sections ul li:nth-of-type(3n-2) h2, body#index main #sections ul li:nth-of-type(3n) figure, body#index main #sections ul li:nth-of-type(3n) h2 {
            width: calc(100% + 25px); }
          body#index main #sections ul li:nth-of-type(3n-2) figure {
            left: -25px; }
          body#index main #sections ul li:nth-of-type(3n-2) h2 {
            left: calc(50% - 12.5px); }
          body#index main #sections ul li:nth-of-type(3n) h2 {
            left: calc(50% + 12.5px); } }
      @media (min-width: 75rem) and (max-width: 87.499rem) {
        body#index main #sections ul li {
          width: 24.5%;
          width: calc(25% - 0px);
          /* Spécifique */
          /* Débord sur les marges */ }
          body#index main #sections ul li:nth-of-type(4n):before, body#index main #sections ul li:nth-of-type(4n-1):before, body#index main #sections ul li:nth-of-type(4n-2):before {
            content: "";
            position: absolute;
            border-left: 0.5px solid var(--cc);
            left: 0;
            height: calc(100% - 5rem);
            width: 1px;
            margin: 2.5rem 0; }
          body#index main #sections ul li:last-of-type::after, body#index main #sections ul li:nth-last-of-type(2)::after {
            content: inherit; }
          body#index main #sections ul li:nth-of-type(4n-3) figure, body#index main #sections ul li:nth-of-type(4n-3) h2, body#index main #sections ul li:nth-of-type(4n) figure, body#index main #sections ul li:nth-of-type(4n) h2 {
            width: calc(100% + 25px); }
          body#index main #sections ul li:nth-of-type(4n-3) figure {
            left: -25px; }
          body#index main #sections ul li:nth-of-type(4n-3) h2 {
            left: calc(50% - 12.5px); }
          body#index main #sections ul li:nth-of-type(4n) h2 {
            left: calc(50% + 12.5px); } }
      @media (min-width: 87.5rem) {
        body#index main #sections ul li {
          width: 19.5%;
          width: calc(20% - 0px);
          /* Spécifique */
          /* Débord sur les marges */ }
          body#index main #sections ul li:nth-of-type(5n):before, body#index main #sections ul li:nth-of-type(5n-1):before, body#index main #sections ul li:nth-of-type(5n-2):before, body#index main #sections ul li:nth-of-type(5n-3):before {
            content: "";
            position: absolute;
            border-left: 0.5px solid var(--cc);
            left: 0;
            height: calc(100% - 5rem);
            width: 1px;
            margin: 2.5rem 0; }
          body#index main #sections ul li:nth-last-child(-n+5)::after {
            content: inherit; }
          body#index main #sections ul li:nth-of-type(5n-4) figure, body#index main #sections ul li:nth-of-type(5n-4) h2, body#index main #sections ul li:nth-of-type(5n) figure, body#index main #sections ul li:nth-of-type(5n) h2 {
            width: calc(100% + 25px); }
          body#index main #sections ul li:nth-of-type(5n-4) figure {
            left: -25px; }
          body#index main #sections ul li:nth-of-type(5n-4) h2 {
            left: calc(50% - 12.5px); }
          body#index main #sections ul li:nth-of-type(5n) h2 {
            left: calc(50% + 12.5px); } }
  @media screen and (prefers-reduced-motion: reduce) {
    body#index main #reclame:hover p,
    body#index main #sections ul li:hover h2 span,
    body#index main #sections ul li:hover img {
      transform: none !important; } }

body#index footer {
  margin-top: -5px; }

body#section main {
  min-height: 100vh;
  min-height: calc(100vh - 4.375rem);
  /* 
				Header
							*/
  /* 
				Content
								*/
  /* 
				Figure
								*/ }
  body#section main header h1 {
    font-family: "Clash Grotesk", sans-serif;
    font-weight: 600;
    /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
    font-size: 10rem;
    line-height: 10rem;
    letter-spacing: 0px;
    color: var(--cc);
    text-transform: uppercase;
    font-size: 10vw;
    font-size: clamp(60px, 10vw, 100px);
    line-height: 80%;
    letter-spacing: -.1vw;
    height: auto;
    max-width: 800px;
    max-width: 50rem;
    display: inline-block; }
    @supports (-webkit-text-stroke: 1px var(--cc)) {
      body#section main header h1 {
        color: var(--bg);
        -webkit-text-stroke: 1px var(--cc); } }
    body#section main header h1 svg {
      color: var(--cc);
      height: 3.75rem;
      height: calc(clamp(2.5rem, 100%, 3.75rem));
      position: absolute;
      top: -1.25rem;
      left: -.5rem;
      transform: translateX(0%) translateY(0%); }
  body#section main header ul {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 1.25rem 0 2.5rem 0;
    width: 100%; }
    body#section main header ul li {
      min-width: 125px;
      width: 33%;
      font-family: "Clash Grotesk", sans-serif;
      font-weight: 400;
      /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
      font-size: 1rem;
      line-height: 1.25rem;
      letter-spacing: 0px;
      color: var(--cc); }
      body#section main header ul li.adhérent {
        font-family: "Clash Grotesk", sans-serif;
        font-weight: 600;
        /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
        font-size: 1rem;
        line-height: 1.25rem;
        letter-spacing: 0px;
        color: var(--cc); }
  body#section main #content {
    /* 
					Aside
								*/ }
    body#section main #content:before {
      content: "";
      position: absolute;
      top: -12.5px;
      left: -12.5px;
      width: calc(100% + 25px);
      height: calc(100% + 25px);
      background: var(--bg);
      opacity: .9;
      z-index: 0; }
    body#section main #content .text {
      max-width: 600px;
      max-width: 37.5rem;
      margin-bottom: 2.5rem; }
      body#section main #content .text, body#section main #content .text * {
        font-family: "Clash Grotesk", sans-serif;
        font-weight: 400;
        /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
        font-size: 1rem;
        line-height: 1.25rem;
        letter-spacing: 0px;
        color: var(--cc); }
      body#section main #content .text h1, body#section main #content .text h2, body#section main #content .text h3 {
        font-weight: 600;
        margin-top: 1.25rem; }
      body#section main #content .text a {
        text-decoration: underline;
        text-decoration-skip-ink: auto; }
    body#section main #content aside #logo {
      width: 6.25rem;
      height: 6.25rem;
      object-fit: contain;
      object-position: left;
      box-sizing: border-box;
      margin-bottom: 1.25rem;
      padding: 0; }
    body#section main #content aside ul:not(#social) {
      margin-left: 6.5rem;
      margin-bottom: 2.5rem;
      font-style: normal; }
      body#section main #content aside ul:not(#social) li[aria-label="adresse"] {
        margin-top: 0.625rem; }
      body#section main #content aside ul:not(#social) em {
        font-family: "Clash Grotesk", sans-serif;
        font-weight: 600;
        /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
        font-size: 1rem;
        line-height: 1.25rem;
        letter-spacing: 0px;
        color: var(--cc);
        font-style: normal;
        position: absolute;
        left: -6.5rem; }
    body#section main #content aside #social {
      width: 100%;
      margin-bottom: 2.5rem; }
      body#section main #content aside #social svg {
        height: 1.25rem;
        padding: 5px; }
  body#section main figure {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(clamp(500px, 35vw, 1000px));
    height: 100vh;
    z-index: -1; }
    body#section main figure img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: right; }

/*
	Responsive
							*/
@media (min-width: 700px) {
  body#section main header ul {
    width: 33%;
    min-width: 28rem; } }

@media (min-width: 1200px) {
  body#section main {
    min-height: calc(100vh - 4.375rem - clamp(2.5rem, 20vh, 12.5rem) + 1.25rem); }
    body#section main header, body#section main #content {
      margin-left: 33.333%; }
    body#section main header {
      /* fallback */
      margin-top: 12.5rem;
      margin-top: calc(clamp(2.5rem, 20vh, 12.5rem)); }
    body#section main #content {
      display: -webkit-box;
      /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;
      /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox;
      /* TWEENER - IE 10 */
      display: -webkit-flex;
      /* NEW - Chrome */
      display: flex;
      /* NEW, Spec - Opera 12.1, Firefox 20+ */
      -webkit-box-direction: normal;
      -webkit-box-orient: horizontal;
      -webkit-flex-direction: row;
      -moz-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-pack: justify;
      -moz-box-pack: justify;
      -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      gap: 0 25px;
      padding-right: 7vw; }
      body#section main #content .text {
        width: 50%;
        margin-bottom: 8.75rem; }
    body#section main aside #logo {
      position: absolute;
      top: 0;
      left: 0;
      transform: translateY(calc(-100% - 1.25rem)); } }

body#info main {
  min-height: 100vh;
  min-height: calc(100vh - 4.375rem);
  /* 
				Content
								*/
  /* 
				Aside
								*/
  /* 
				Figure
								*/ }
  body#info main:before {
    position: absolute;
    top: -12.5px;
    left: -12.5px;
    width: calc(100% + 25px);
    height: calc(100% + 25px);
    background: var(--bg);
    opacity: .9;
    z-index: 0; }
  body#info main #content, body#info main aside {
    left: 0; }
  body#info main #content {
    /* fallback */
    margin-top: 12.5rem;
    margin-top: calc(clamp(2.5rem, 20vh, 12.5rem));
    font-family: "Clash Grotesk", sans-serif;
    font-weight: 400;
    /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: 0px;
    color: var(--cc);
    max-width: 600px;
    margin-bottom: 2.5rem; }
    body#info main #content .signature {
      font-family: "Clash Grotesk", sans-serif;
      font-weight: 400;
      /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
      font-size: 1rem;
      line-height: 1.25rem;
      letter-spacing: 0px;
      color: var(--cc);
      margin: 2.5rem 0; }
      body#info main #content .signature em {
        font-family: "Clash Grotesk", sans-serif;
        font-weight: 600;
        /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
        font-size: 1rem;
        line-height: 1.25rem;
        letter-spacing: 0px;
        color: var(--cc);
        font-style: normal;
        display: block; }
  body#info main aside ul {
    margin-left: 100px;
    margin-bottom: 2.5rem; }
    body#info main aside ul em {
      font-family: "Clash Grotesk", sans-serif;
      font-weight: 600;
      /*}
    @supports (font-variation-settings : normal){
      font-family: $font-1v;
      font-variation-settings: "wght" $w;
    }*/
      font-size: 1rem;
      line-height: 1.25rem;
      letter-spacing: 0px;
      color: var(--cc);
      font-style: normal;
      position: absolute;
      left: -6.5rem; }
  body#info main figure {
    position: fixed;
    right: 0;
    bottom: 0;
    width: calc(clamp(350px, 50%, 37.5rem));
    height: 66vh;
    z-index: -1; }
    body#info main figure img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: bottom;
      transform: scaleX(-1); }

/*
	Responsive
							*/
@media (max-width: 1199px) {
  body#info main:before {
    content: ""; } }

@media (min-width: 1200px) {
  body#info main {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: baseline;
    -moz-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
    -webkit-box-pack: space-evenly;
    -moz-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    -webkit-justify-content: space-evenly;
    justify-content: space-evenly;
    gap: 25px; } }