/* BASE */

/* 12 colonnes */
/*
:root {
  --grid-margin: 3.125vw;
  --grid-column-width: 6.38vw;
  --grid-gutter: 1.5625vw;
  --grid-column-color: rgba(255, 0, 0, 0.1);
}

html {
  background-image: linear-gradient(
      to right,
      transparent var(--grid-margin),
      var(--grid-column-color) var(--grid-margin),
      var(--grid-column-color)
        calc(var(--grid-margin) + var(--grid-column-width)),
      transparent calc(var(--grid-margin) + var(--grid-column-width)),
      transparent
        calc(var(--grid-margin) + var(--grid-column-width) + var(--grid-gutter)),
      var(--grid-column-color)
        calc(var(--grid-margin) + var(--grid-column-width) + var(--grid-gutter)),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 2 + var(--grid-gutter)
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 2 + var(--grid-gutter)
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 2 + var(--grid-gutter) *
            2
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 2 + var(--grid-gutter) *
            2
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 3 + var(--grid-gutter) *
            2
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 3 + var(--grid-gutter) *
            2
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 3 + var(--grid-gutter) *
            3
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 3 + var(--grid-gutter) *
            3
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 4 + var(--grid-gutter) *
            3
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 4 + var(--grid-gutter) *
            3
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 4 + var(--grid-gutter) *
            4
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 4 + var(--grid-gutter) *
            4
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 5 + var(--grid-gutter) *
            4
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 5 + var(--grid-gutter) *
            4
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 5 + var(--grid-gutter) *
            5
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 5 + var(--grid-gutter) *
            5
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 6 + var(--grid-gutter) *
            5
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 6 + var(--grid-gutter) *
            5
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 6 + var(--grid-gutter) *
            6
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 6 + var(--grid-gutter) *
            6
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 7 + var(--grid-gutter) *
            6
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 7 + var(--grid-gutter) *
            6
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 7 + var(--grid-gutter) *
            7
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 7 + var(--grid-gutter) *
            7
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 8 + var(--grid-gutter) *
            7
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 8 + var(--grid-gutter) *
            7
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 8 + var(--grid-gutter) *
            8
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 8 + var(--grid-gutter) *
            8
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 9 + var(--grid-gutter) *
            8
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 9 + var(--grid-gutter) *
            8
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 9 + var(--grid-gutter) *
            9
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 9 + var(--grid-gutter) *
            9
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 10 +
            var(--grid-gutter) * 9
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 10 +
            var(--grid-gutter) * 9
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 10 +
            var(--grid-gutter) * 10
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 10 +
            var(--grid-gutter) * 10
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 11 +
            var(--grid-gutter) * 10
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 11 +
            var(--grid-gutter) * 10
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 11 +
            var(--grid-gutter) * 11
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 11 +
            var(--grid-gutter) * 11
        ),
      var(--grid-column-color)
        calc(
          var(--grid-margin) + var(--grid-column-width) * 12 +
            var(--grid-gutter) * 11
        ),
      transparent
        calc(
          var(--grid-margin) + var(--grid-column-width) * 12 +
            var(--grid-gutter) * 11
        )
    ),
    linear-gradient(to bottom, transparent 0%, transparent 100%);
  background-size: 100% 100%;
  min-height: 100vh;
}
*/

html {
  background-color: #fff;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter_var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/*
:root {
  --font1: "Inter", sans-serif;
  --font2: "Antonio", sans-serif;
  --fontweight-regu: 400;
  --main-color1: #1f1f1f;
  --main-color2: #fe90ab;
  --main-color-error: #fe90ab;
  --main-bgcolor0: #fff;
  --main-bgcolor1: #1f1f1f;
  --main-bgcolor2: #fe90ab;
  --main-bgcolor3: #eae1e3;

  --padunit: 3.125vw;
  --pdlr-colbase: 1;
}
*/

:root {
  --font1: "Inter", sans-serif;
  --font2: "Inter", sans-serif;

  --fontsizeini: 20; /* body texte 1920 */

  --color-noir: #000;
  --color-bleu: #4898b9;
  --color-bleu-fonce: #325084;
  --color-gris: #939393;
  --color-error: #ff00c3;

  --column: 6.38vw; /* 110/1920 */
  --gutter: 1.5625vw; /* 40/1920 */
  --columngutter: 7.9425vw; /* 150/1920 */

  --margelr: 3.125vw; /* 60/1920 */

  --padunit: 3.125vw; /* 60/1920 */

  --padunitvert: 3.125vw; /* 60/1920 */
  --rvm: 2; /* 1.5 ration verti mob */

  --padbloc: 1.5625vw; /* 30/1920 */ /* contentbuilder */

  --borderradius: 0.2em;
}
@media (min-width: 900px) {
  :root {
    --rvm: 1;
  }
}

/* https://clamp.font-size.app/ */

.debug {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.65em;
  background-color: #ff00c3;
  color: #fff;
}
.debug::before {
  content: "debug ➔ ";
}

/*** RESET
  The new CSS reset - version 1.8.4 (last updated 14.2.2023)
  GitHub page: https://github.com/elad2412/the-new-css-reset
  ***/
*:where(
    :not(html, iframe, canvas, img, svg, video, audio, input):not(
        svg *,
        symbol *
      )
  ) {
  all: unset;
  display: revert;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
a,
button {
  cursor: revert;
}
ol,
ul,
menu {
  list-style: none;
}
img {
  max-inline-size: 100%;
  max-block-size: 100%;
}
table {
  border-collapse: collapse;
}
input,
textarea {
  -webkit-user-select: auto;
}
textarea {
  white-space: revert;
}
meter {
  -webkit-appearance: revert;
  appearance: revert;
}
:where(pre) {
  all: revert;
}
::marker {
  content: initial;
}
:where([hidden]) {
  display: none;
}
:where([contenteditable]:not([contenteditable="false"])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}
:where([draggable="true"]) {
  -webkit-user-drag: element;
}
:where(dialog:modal) {
  all: revert;
}
/* RESPONSIVE */
img,
video {
  max-inline-size: 100%;
  block-size: auto;
  inline-size: 100%;
  vertical-align: middle;
  /*width: 100%;*/
}
img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}
/*  */
strong {
  font-weight: 600;
}
/* SCROLLBAR */
/*
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--main-bgcolor0);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--main-color2);
    border-radius: 10px;
  }
  */

.pdlr {
  padding-left: var(--margelr);
  padding-right: var(--margelr);
}

.pt_05 {
  padding-top: calc(0.5 * var(--padunitvert) * var(--rvm));
}
.pt_025 {
  padding-top: calc(0.25 * var(--padunitvert) * var(--rvm));
}
.pb_05 {
  padding-bottom: calc(0.5 * var(--padunitvert) * var(--rvm));
}
.pt_1 {
  padding-top: calc(1 * var(--padunitvert) * var(--rvm));
}
.pb_1 {
  padding-bottom: calc(1 * var(--padunitvert) * var(--rvm));
}
.pt_2 {
  padding-top: calc(2 * var(--padunitvert) * var(--rvm));
}
.pb_2 {
  padding-bottom: calc(2 * var(--padunitvert) * var(--rvm));
}
.pt_3 {
  padding-top: calc(3 * var(--padunitvert) * var(--rvm));
}
.pt_4 {
  padding-top: calc(4 * var(--padunitvert) * var(--rvm));
}
.pt_5 {
  padding-top: calc(5 * var(--padunitvert) * var(--rvm));
}

.mw1140 {
  max-width: 1140px;
}
.centermlmr {
  margin-left: auto;
  margin-right: auto;
}

.bouton {
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background-color: var(--color-bleu-fonce);
  color: #fff;
  font: inherit;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-weight: 500;
  font-size: 0.8em;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  border: 2px solid var(--color-bleu-fonce);
  border-radius: 0.2em;
  text-transform: uppercase;
  padding: 0.5em 2em;
  margin-top: 2em;
  margin-bottom: 2em;
  transition: all ease 0.5s;
}
.bouton:hover {
  background-color: #fff;
  color: var(--color-bleu-fonce);
}

.bouton2 {
  position: relative;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  font: inherit;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-size: 0.8em;
  background-color: #fff;
  color: var(--color-noir);
  border-radius: 3em;
  padding: 1.5em 8em 1.5em 1.25em;
}
.bouton2 span {
  position: relative;
  z-index: 2;
  transition: color ease 0.25s;
  color: var(--color-noir);
}
.bouton2:hover span {
  color: #fff;
}
.bouton2::before {
  content: "";
  z-index: 0;
  position: absolute;

  right: 0.65em;
  top: 0.65em;
  width: 3em;
  height: 3em;
  /*aspect-ratio: 1;*/
  background-color: var(--color-bleu);
  transition: all ease 0.5s;
  border-radius: 3em;
}
.bouton2--2::before {
  background-color: var(--color-bleu-fonce);
}
.bouton2:hover::before {
  top: -1px;
  right: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}
.bouton2::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 4em;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 8.5H16M16 8.5L8.47059 1M16 8.5L8.47059 16' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 0.92em 0.85em;
  background-position: center center;
  background-repeat: no-repeat;
}
.bouton3 {
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  font: inherit;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-size: 0.72em;
  color: var(--color-noir);
  padding: 0.5em 0;
}
.bouton3::after {
  display: inline-block;
  padding-left: 0.25em;
  content: "→";
  transition: transform ease 0.5s;
}
.bouton3:hover::after {
  transform: translateX(0.25em);
}

.main__mt {
  padding-top: 8em;
}

html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font1);
  font-weight: 400;
  color: var(--color-noir);
  font-size: clamp(1rem, 0.8606rem + 0.595vw, 1.8125rem);
  /* 16px 375 / ??25px 1920 / 29px 2560 */
  /*
  font-size: clamp(
    0.875rem,
    0.7141rem + 0.6865vw,
    1.8125rem
  );*/
  line-height: normal;
  fill: currentColor;
}
/* /BASE */

.header__cont {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
}

@media (min-width: 1300px) {
  .header__cont {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transition: top ease 0.3s;
    /*height: calc(6.25vw + 3.91em);*/
    width: 100%;
  }
  .scrolling-down .header__cont {
    top: calc(-6.25vw - 3.91em);
  }

  .scrolling-up .header {
    padding-top: calc(0.25 * var(--padunit));
    padding-bottom: calc(0.25 * var(--padunit));
  }
  .scrolling-up .header__cont {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    background-color: #fff;
  }
  .scrolling-up .header__logo {
    font-size: 0.65em;
  }

  .scrolling-up.navblanc .header a,
  .navblanc.nav2_activ .header a {
    color: var(--color-noir);
  }
  .scrolling-up.navblanc .header a,
  .navblanc.nav2_activ .header a {
    color: var(--color-noir);
  }
  .scrolling-up.navblanc .header__nav__cont a {
    color: #fff;
  }
  .scrolling-up.navblanc .header__logo,
  .navblanc.nav2_activ .header__logo {
    background-image: url(../img/apro.svg);
  }
}

.header__logo,
.footer__logo {
  display: block;
  background-image: url(../img/apro.svg);
  background-repeat: no-repeat;
  background-size: 9.6em 4.28em;
  width: 9.6em;
  height: 4.28em;
  text-indent: -999em;
  transition: all ease 0.3s;
}
.navblanc .header__logo,
.footer__logo {
  background-image: url(../img/apro-blanc.svg);
}
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: var(--padunit);
  padding-bottom: var(--padunit);
  align-items: center;
}
@media (min-width: 1300px) {
  .header {
    padding-top: calc(0.5 * var(--padunit));
    padding-bottom: calc(0.5 * var(--padunit));
    transition: all ease 0.3s;
  }
}
.header__navul {
  display: flex;
  flex-direction: column;
}

/*
@media (min-width: 900px) {
  .header {
    padding-top: calc(0.75 * var(--padunitvert));
    padding-bottom: calc(0.5 * var(--padunitvert));
  }
  .header a {
    color: var(--color-noir);
  }
  .navblanc .header,
  .navblanc .header a {
    color: #fff;
  }
  .header__nav__cont {
    display: flex;
    flex-direction: row;
  }
  .header__nav ul {
    flex-direction: row;
    justify-content: space-between;
  }
  .header__navli {
    position: relative;
    font-size: 16px;
    font-weight: 600;
    margin-left: 0.75em;
    margin-right: 0.75em;
  }
  .header__navli span::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--color-noir);
    transition: all 0.2s ease-in-out;
  }
  .navblanc .header__navli span::after {
    background-color: #fff;
  }
  .header__navli--lang span::after {
    display: none;
  }
  .header__navli span:hover::after {
    width: 100%;
    transition: all 0.2s ease-in-out;
  }
  .header__navli span .active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--color-noir);
    transition: all 0.2s ease-in-out;
  }
}
*/

/* BURGER BARRES */
.burger__barres {
  padding: 0.85em 0.5em;
  width: calc(60px + 0.5em * 2);
  height: calc(10px + 0.85em * 2);
}
.burger__barrespad {
  position: relative;
  width: 100%;
  height: 100%;
}
.burger__barres span {
  position: absolute;
  z-index: 100;
  left: 0;
  top: 11px;
  display: block;
  background-color: var(--color-noir);
  width: 100%;
  height: 3px;
  border-radius: 0;
  transition: all ease 0.3s;
}
.navblanc .burger__barres span {
  background-color: #fff;
}
.scrolling-up.navblanc .burger__barres span {
  background-color: var(--color-noir);
}
.burger__barres span:first-child {
  transform: translateY(0);
}
.burger__barres span:last-child {
  transform: translateY(0);
  top: auto;
}
body.nav_activ .burger__barres span {
  opacity: 0;
  top: 50%;
}
body.nav_activ .burger__barres span:first-child,
body.nav_activ .burger__barres span:last-child {
  opacity: 1;
  background-color: #fff;
}
body.nav_activ .burger__barres span:first-child {
  transform: rotate(-405deg);
}
body.nav_activ .burger__barres span:last-child {
  transform: rotate(405deg);
}

/* /BURGER */
/* burger desktop > supp @media (max-width...  */

.header__burger {
  position: fixed;
  z-index: 200;
  right: calc(1 * var(--padunitvert));
  /*mix-blend-mode: difference;*/
}
@media (min-width: 1300px) {
  .header__burger {
    position: relative;
    right: auto;
  }
  .nav_activ .header__burger {
    margin-top: 1.5em;
  }
}

.header__nav__cont {
  position: fixed;
  z-index: 100;
  top: var(--padunit);
  left: -100%;
  width: calc(100vw - 2 * var(--padunit));
  height: calc(100vh - 2 * var(--padunit));
  background-color: var(--color-bleu);
  border-radius: 0.2em;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  color: #fff;
}
@media (min-width: 900px) {
  .header__nav__cont {
    position: absolute;
    width: calc(50vw - var(--padunit));
  }
}
.header__nav--2 {
  margin-top: 2em;
}
.header__nav ul {
  flex-direction: column;
  width: 100%;
  align-items: start;
  justify-content: center;
}
.header__navli {
  font-size: 1.2em;
  font-weight: 500;
  padding-right: 1.2em;
  padding-left: 1.2em;
  gap: 1em;
}
.header__nav--2 .header__navli {
  font-size: 1em;
  font-weight: 400;
}
.header__nav--2 .header__navli--5 {
  margin-top: 2em;
}

.header__nava {
  display: inline-block;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  color: var(--color-noir);
}
.navblanc .header__nava {
  color: #fff;
}
.header__nav__cont .header__nava {
  color: #fff;
}
.burger__fermer {
  display: none;
  color: var(--color-noir);
}
body.nav_activ .header__nav__cont {
  left: auto;
  right: var(--padunit);
}
body.nav_activ .burger__menu {
  display: none;
}
body.nav_activ .burger__fermer {
  display: block;
}

.headernavlist {
  display: none;
}
@media (min-width: 1300px) {
  .headernavlist {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1;
  }
  .headernavlist .header__navul {
    flex-direction: row;
    justify-content: flex-end;
    padding-right: 1.5em;
  }
  .headernavlist .header__navli {
    font-size: 0.8em;
    font-weight: 500;
    padding-right: 0.6em;
    padding-left: 0.6em;
  }
}

.header__nav__lang {
  position: absolute;
  left: 1.2em;
  bottom: 1.2em;
}
.header__nav__langtxt {
  font-size: 0.8em;
  color: #fff;
}
.header__nav__langtxt a {
  color: #fff;
  text-decoration: underline;
}
.header__nav__langtxt a:hover {
  color: #fff;
  text-decoration: none;
}
.header__nav__reso {
  position: absolute;
  right: 1.2em;
  bottom: 1.2em;
  display: flex;
  gap: 0.5em;
}
.header__nav__reso__linkedin {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath class='b' d='M5,8.78v22.43c0,2.12,1.67,3.78,3.78,3.78h22.43c1.04,0,2.03-.5,2.66-1.13.68-.68,1.13-1.53,1.13-2.66V8.78c0-2.12-1.67-3.78-3.78-3.78H8.78c-1.13,0-1.98.45-2.66,1.13-.63.63-1.13,1.62-1.13,2.66ZM9.05,11.76c0-1.44,1.17-2.7,2.61-2.7s2.7,1.26,2.7,2.7-1.22,2.66-2.7,2.66-2.61-1.17-2.61-2.66ZM16.31,30.27v-13.74c0-.32.32-.59.54-.59h3.83c.54,0,.54.63.54,1.04,1.08-1.08,2.48-1.35,3.92-1.35,3.51,0,5.77,1.67,5.77,5.36v9.28c0,.32-.27.59-.54.59h-3.96c-.32,0-.54-.32-.54-.59v-8.38c0-1.4-.4-2.16-1.98-2.16-1.98,0-2.48,1.31-2.48,3.06v7.48c0,.32-.32.59-.63.59h-3.92c-.22,0-.54-.32-.54-.59h0ZM9.14,30.27v-13.74c0-.32.32-.59.54-.59h3.92c.36,0,.59.22.59.59v13.74c0,.32-.27.59-.59.59h-3.92c-.27,0-.54-.32-.54-.59Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1.6em 1.6em;
  width: 1.6em;
  height: 1.6em;
}
.header__nav__reso__youtube {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill:%23fff;%7D.c%7Bfill:%234898b9;%7D%3C/style%3E%3C/defs%3E%3Cpath class='b' d='M20.34,30.55c-.88,0-8.7-.02-10.93-.62-.83-.22-1.58-.66-2.19-1.27-.61-.61-1.04-1.37-1.26-2.2-.61-2.28-.62-6.73-.62-6.91s0-4.63.62-6.91c.22-.83.66-1.59,1.27-2.2s1.36-1.05,2.19-1.27c2.23-.6,10.05-.62,10.93-.62s8.7.02,10.93.62c.83.22,1.58.66,2.19,1.27.61.61,1.04,1.37,1.26,2.2h0c.61,2.28.61,6.73.61,6.91s0,4.63-.61,6.91c-.22.83-.66,1.59-1.27,2.2-.61.61-1.36,1.05-2.19,1.27-2.23.6-10.05.62-10.93.62Z'/%3E%3Cpath class='c' d='M17.09,24.08c-.2,0-.39-.08-.53-.22-.14-.14-.22-.33-.22-.54v-7.55c0-.13.03-.26.1-.38.07-.12.16-.21.28-.28.11-.07.25-.1.38-.1s.26.04.38.1l6.51,3.77c.11.07.21.16.28.28.07.12.1.25.1.38s-.03.26-.1.38c-.07.12-.16.21-.28.28l-6.51,3.77c-.11.07-.24.1-.38.1Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1.6em 1.6em;
  width: 1.6em;
  height: 1.6em;
}

.hero {
  /*position: relative;*/
  position: sticky;
  z-index: 0;
  top: 0;
}
.hero__img video,
.hero__img img {
  object-fit: cover;
  aspect-ratio: 0.78;
}
@media (min-width: 700px) {
  .hero__img video,
  .hero__img img {
    aspect-ratio: unset;
    max-height: 100vh;
  }
}
.hero__imgov {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.17);
}
.hero__txt {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 4;
  text-align: left;
  color: #fff;
  top: 50%;
  height: 50%;
  padding-bottom: var(--padunitvert);
}
.hero__txt--bt {
  top: auto;
  height: auto;
  bottom: var(--margelr);
  left: 0;
}
.hero__btn {
  flex-grow: 1;
}
.hero__txt1 {
  font-size: 10.5vw;
  font-weight: 500;
  line-height: 1;
}
@media screen and (min-width: 640px) {
  .hero__txt1 {
    font-size: 4.6875vw;
    max-width: 45vw;
  }
}
.main {
  position: relative;
  background-color: #fff;
}

@media screen and (min-width: 900px) {
  .bloctxtseul {
    width: calc(5 * var(--columngutter) + var(--column));
  }
}
.som__head {
  display: flex;
  flex-direction: row;
  gap: 1em;
}
.som__head1 {
  flex-grow: 1;
}
.som__btn {
  white-space: nowrap;
}
.som__tit {
  font-size: 1.2em;
  font-weight: 600;
}
.som__desc {
  padding-top: 0.75em;
  font-size: 0.64em;
  font-weight: 400;
  color: var(--color-gris);
}
.som__desc--noir {
  color: var(--color-noir);
}
@media screen and (min-width: 640px) {
  .som__desc {
    width: calc(6 * var(--columngutter) + var(--column));
  }
}
@media screen and (min-width: 1200px) {
  .som__desc {
    width: calc(4 * var(--columngutter) + var(--column));
  }
}
.som__desc--nowidth {
  width: auto;
}
.som__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: calc(var(--gutter));
  /*
  margin-left: calc(-1*var(--gutter)/2);
  margin-right: calc(-1*var(--gutter)/2);
  */
}

.som__item {
  position: relative;
  width: calc((100% - 1 * var(--gutter)) / 2);
}
.som__item img {
  border-radius: 0.2em;
}
.som__item__img {
  position: relative;
}
.som__imgov {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.2em;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0) 50%
  );
  background-blend-mode: multiply;
}
.som__item:hover .som__txt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' style='fill:%23fff'/%3E%3Cpath d='m25.08 16.26-1.34 1.48L28.42 22H17v2h11.42l-4.68 4.26 1.34 1.48L32.5 23l-7.42-6.74z' style='fill:%231d1d1b'/%3E%3C/svg%3E");
}
.som__txt {
  position: absolute;
  width: 100%;

  z-index: 2;
  bottom: 0;
  padding: 0.8em;
  padding-right: 3em;
  padding-top: 1em;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='a' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill:%23fff%7D%3C/style%3E%3C/defs%3E%3Cpath d='M24 48C10.77 48 0 37.23 0 24S10.77 0 24 0s24 10.77 24 24-10.77 24-24 24Zm0-46C11.87 2 2 11.87 2 24s9.87 22 22 22 22-9.87 22-22S36.13 2 24 2Z' class='b'/%3E%3Cpath d='m25.08 16.26-1.34 1.48L28.42 22H17v2h11.42l-4.68 4.26 1.34 1.48L32.5 23l-7.42-6.74z' class='b'/%3E%3C/svg%3E");
  background-size: 1.92em 1.92em;
  background-repeat: no-repeat;
  background-position: right 0.8em bottom 0.7em;
  transition: all ease 0.3s;
}
.som__titre {
  font-size: 0.8em;
  font-weight: 500;
  color: #fff;
}
.som__desc2 {
  margin-top: 0.75em;
  margin-bottom: 2em;
  font-size: 0.64em;
  color: var(--color-gris);
}
@media screen and (min-width: 700px) {
  .som__item {
    width: calc((100% - 2 * var(--gutter)) / 3);
  }
}
@media screen and (min-width: 1000px) {
  .som__item {
    width: calc((100% - 3 * var(--gutter)) / 4);
  }
}
@media screen and (min-width: 1300px) {
  .som__item {
    width: calc((100% - 4 * var(--gutter)) / 5);
  }
  .som__list--4 .som__item {
    width: calc((100% - 3 * var(--gutter)) / 4);
  }
  .som__list--3 .som__item {
    width: calc((100% - 2 * var(--gutter)) / 3);
  }
}

.reahom__2 {
  margin-top: 1.5em;
}
@media screen and (min-width: 900px) {
  .reahom {
    display: flex;
    flex-direction: row;
  }
  .reahom__1 {
    width: 32%;
  }
  .reahom__2 {
    margin-top: 0;
    padding-left: var(--gutter);
    width: 68%;
  }
}
@media screen and (min-width: 900px) {
  .reahom2 {
    width: 68%;
    padding-right: var(--gutter);
  }
}

.reasom__list {
  display: flex;
  flex-direction: column;
}
.reasom__list .reasom__item {
  margin-top: 1.5em;
}
@media screen and (min-width: 640px) {
  .reasom__list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: calc(var(--gutter));
  }
  .reasom__list .reasom__item {
    width: calc((100% - 1 * var(--gutter)) / 2);
  }
}
@media screen and (min-width: 900px) {
  .reasom__list .reasom__item {
    width: calc((100% - 2 * var(--gutter)) / 3);
  }
}

.reasom__img {
  position: relative;
  overflow: hidden;
  border-radius: 0.2em;
}
.reasom__img img {
  border-radius: 0.2em;
  transition: transform ease-in 0.5s;
}
.reasom__etiq {
  position: absolute;
  z-index: 10;
  left: 0.2em;
  bottom: 0.2em;
  display: inline-block;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M20,9.93c-.02-2.53-.98-5.07-2.93-7-1.89-1.89-4.4-2.93-7.07-2.93S4.82,1.04,2.93,2.93C1,4.87.02,7.4,0,9.93v.13c.02,2.53.98,5.07,2.93,7,1.89,1.89,4.4,2.93,7.07,2.93s5.18-1.04,7.07-2.93c1.93-1.93,2.91-4.47,2.93-7v-.13ZM16.64,15.89c-.6-.53-1.24-.98-1.93-1.36.31-1.2.51-2.56.56-3.98h3.6c-.11,1.91-.87,3.8-2.22,5.33ZM1.13,10.56h3.6c.04,1.44.24,2.78.56,3.98-.69.36-1.33.82-1.93,1.36-1.36-1.53-2.11-3.42-2.22-5.33ZM3.36,4.11c.6.53,1.24.98,1.93,1.36-.33,1.2-.51,2.53-.56,3.98H1.13c.11-1.91.87-3.8,2.22-5.33ZM9.44,5.51c-.96-.07-1.91-.27-2.82-.64.67-1.96,1.67-3.33,2.82-3.67v4.31ZM9.44,6.62v2.82h-3.6c.04-1.24.2-2.44.47-3.51,1,.4,2.07.62,3.13.69ZM9.44,10.56v2.82c-1.07.07-2.13.29-3.13.69-.27-1.07-.42-2.27-.47-3.51h3.6ZM9.44,14.49v4.31c-1.16-.33-2.16-1.73-2.82-3.67.91-.38,1.87-.58,2.82-.64ZM10.56,14.49c.96.07,1.91.27,2.82.64-.67,1.96-1.67,3.33-2.82,3.67v-4.31ZM10.56,13.38v-2.82h3.6c-.04,1.24-.2,2.44-.47,3.51-1-.4-2.07-.62-3.13-.69ZM10.56,9.44v-2.82c1.07-.07,2.13-.29,3.13-.69.27,1.07.42,2.27.47,3.51h-3.6ZM10.56,5.51V1.2c1.16.33,2.16,1.73,2.82,3.67-.91.38-1.87.58-2.82.64ZM12.89,1.6c1.09.38,2.09.96,2.98,1.73-.47.4-.96.76-1.47,1.04-.4-1.11-.91-2.07-1.51-2.78ZM5.62,4.38c-.51-.29-1.02-.64-1.47-1.04.89-.78,1.89-1.36,2.98-1.73-.62.71-1.13,1.67-1.51,2.78ZM5.62,15.62c.4,1.11.91,2.04,1.49,2.78-1.09-.38-2.09-.96-2.98-1.73.47-.4.96-.76,1.49-1.04ZM14.38,15.62c.51.29,1.02.64,1.47,1.04-.89.78-1.89,1.36-2.98,1.73.62-.71,1.13-1.67,1.51-2.78ZM15.27,9.44c-.04-1.44-.22-2.78-.56-3.98.69-.36,1.33-.82,1.93-1.36,1.36,1.53,2.09,3.42,2.22,5.33h-3.6Z'/%3E%3C/svg%3E");
  background-size: 0.8em 0.8em;
  background-position: left 0.4em center;
  background-repeat: no-repeat;
  border-radius: 0.2em;
  padding: 0.05em 0.5em 0.2em 1.5em;
  transition: all ease 0.5s;
}
/*
.reasom__item:hover .reasom__etiq {
  background-color: var(--color-noir);
  color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M20 9.93c-.02-2.53-.98-5.07-2.93-7C15.18 1.04 12.67 0 10 0S4.82 1.04 2.93 2.93a10.017 10.017 0 0 0-2.93 7v.13c.02 2.53.98 5.07 2.93 7 1.89 1.89 4.4 2.93 7.07 2.93s5.18-1.04 7.07-2.93a10 10 0 0 0 2.93-7v-.13Zm-3.36 5.96c-.6-.53-1.24-.98-1.93-1.36.31-1.2.51-2.56.56-3.98h3.6c-.11 1.91-.87 3.8-2.22 5.33ZM1.13 10.56h3.6c.04 1.44.24 2.78.56 3.98-.69.36-1.33.82-1.93 1.36a8.79 8.79 0 0 1-2.22-5.33Zm2.23-6.45c.6.53 1.24.98 1.93 1.36-.33 1.2-.51 2.53-.56 3.98h-3.6c.11-1.91.87-3.8 2.22-5.33Zm6.08 1.4c-.96-.07-1.91-.27-2.82-.64.67-1.96 1.67-3.33 2.82-3.67v4.31Zm0 1.11v2.82h-3.6c.04-1.24.2-2.44.47-3.51 1 .4 2.07.62 3.13.69Zm0 3.94v2.82c-1.07.07-2.13.29-3.13.69-.27-1.07-.42-2.27-.47-3.51h3.6Zm0 3.93v4.31c-1.16-.33-2.16-1.73-2.82-3.67.91-.38 1.87-.58 2.82-.64Zm1.12 0c.96.07 1.91.27 2.82.64-.67 1.96-1.67 3.33-2.82 3.67v-4.31Zm0-1.11v-2.82h3.6c-.04 1.24-.2 2.44-.47 3.51-1-.4-2.07-.62-3.13-.69Zm0-3.94V6.62c1.07-.07 2.13-.29 3.13-.69.27 1.07.42 2.27.47 3.51h-3.6Zm0-3.93V1.2c1.16.33 2.16 1.73 2.82 3.67-.91.38-1.87.58-2.82.64Zm2.33-3.91c1.09.38 2.09.96 2.98 1.73-.47.4-.96.76-1.47 1.04-.4-1.11-.91-2.07-1.51-2.78ZM5.62 4.38c-.51-.29-1.02-.64-1.47-1.04.89-.78 1.89-1.36 2.98-1.73-.62.71-1.13 1.67-1.51 2.78Zm0 11.24c.4 1.11.91 2.04 1.49 2.78a9.124 9.124 0 0 1-2.98-1.73c.47-.4.96-.76 1.49-1.04Zm8.76 0c.51.29 1.02.64 1.47 1.04-.89.78-1.89 1.36-2.98 1.73.62-.71 1.13-1.67 1.51-2.78Zm.89-6.18c-.04-1.44-.22-2.78-.56-3.98.69-.36 1.33-.82 1.93-1.36a8.91 8.91 0 0 1 2.22 5.33h-3.6Z' style='fill:%23fff'/%3E%3C/svg%3E");
}
*/
.reasom__item:hover .reasom__img img {
  transform: scale(1.05);
}
.reasom__etiq span {
  display: inline-block;
  font-size: 0.64em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
}
.reasom__txt {
  padding-top: 0.75em;
}
.reasom__tit {
  font-size: 0.92em;
}

.reasom__list .reasom__tit {
  font-size: 0.8em;
}
.reamap {
  position: relative;
  aspect-ratio: 2 / 1;
}
@media screen and (max-width: 800px) {
  .reamap {
    aspect-ratio: 1 / 1;
  }
}
.reamap > a {
  position: absolute;
  top: 2em;
  right: 2.2em;
  color: #ffffff;
  font-size: 0.75em;
}
.somactu {
  display: flex;
  flex-direction: column;
  gap: 3em;
}
.somactu__item {
  width: 100%;
}
.somactu__item .reasom__etiq {
  background: none;
  background-color: #fff;
  padding-left: 0.5em;
  transition: all ease 0.5s;
}
.somactu__item:hover .reasom__etiq {
  background-color: var(--color-noir);
  color: #fff;
}
.somactu__txt {
  padding-top: 0.1em;
}
.somactu__date {
  text-transform: uppercase;
  font-size: 0.64em;
}
.somactu__tit {
  padding-top: 0.25em;
  font-size: 0.8em;
}
@media screen and (min-width: 640px) {
  .somactu {
    flex-direction: row;
    flex-wrap: wrap;
    gap: calc(2 * var(--gutter)) var(--gutter);
    justify-content: space-between;
  }
  .somactu__item {
    width: calc(50% - var(--gutter) / 2);
  }
}
@media screen and (min-width: 900px) {
  .somactu--3 .somactu__item {
    width: calc(33% - var(--gutter) / 2);
  }
}
.global {
  position: relative;
  z-index: 1;
  background-color: #fff;
  padding-bottom: calc(var(--padunitvert) * 2 * var(--rvm));
}

/* PRODUITS */
.prodhero__img {
  position: relative;
}
.prodhero__over {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(72, 152, 185, 0.9);
}
.prodhero__txt {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 12em;
  padding-bottom: var(--margelr);
  color: #fff;
}
.prodhero__img img {
  object-fit: cover;
  aspect-ratio: 0.78;
}
.prodhero__tit1 {
  display: none;
}
.prodhero__tit1,
.prodhero__tit2 {
  font-size: 10.5vw;
  font-weight: 500;
  line-height: 1;
}
@media screen and (min-width: 640px) {
  .prodhero__txt {
    padding-top: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: calc(2 * var(--columngutter));
  }
  .prodhero__tit1 {
    display: block;
    font-size: 4.6875vw;
  }
}
@media screen and (min-width: 640px) {
  .prodhero__tit2 {
    display: block;
    font-weight: 400;
    font-size: 1.2em;
  }
}
.prodhero__btn {
  display: none;
}
@media screen and (min-width: 640px) {
  .prodhero__btn {
    display: block;
    position: absolute;
    z-index: 2;
    right: var(--margelr);
    bottom: var(--margelr);
    color: #fff;
    font-size: 0.72em;
    font-weight: 500;
  }
}
.prodhero__btn::after {
  content: "↓";
}
@media screen and (min-width: 900px) {
  .prodhero__img img {
    height: 100vh;
  }
}
.blocrub {
  display: flex;
  flex-direction: column;
}
.blocrub__2 {
  order: 1;
}
.blocrub__1 {
  margin-top: 3em;
  order: 2;
}
@media screen and (min-width: 900px) {
  .blocrub {
    flex-direction: row;
  }
  .blocrub__1 {
    margin-top: 0.5em;
    order: 1;
    width: 16.9%;
    padding-right: calc(2 * var(--gutter));
  }
  .blocrub__2 {
    order: 2;
    width: 83.1%;
  }
}
.navsecond {
  position: sticky;
  top: calc(var(--margelr) - 0.5em);
  left: var(--margelr);
  transition: top ease 0.3s;
}
@media screen and (min-width: 1030px) {
  .scrolling-up .navsecond {
    top: calc(4.28em + 0.25em + var(--padunit));
  }
}
.navsecond__list {
  font-size: 0.72em;
  font-weight: 600;
}
.navsecond__list--gris {
  font-weight: 400;
}
.navsecond__lien {
  display: flex;
  padding: 0.5em 0;
  border-top: 1px solid var(--color-gris);
  gap: 0.5em;
  align-items: center;
}
.navsecond__list--gris .navsecond__lien {
  color: var(--color-gris);
  transition: color ease 0.3s;
}
.navsecond__item:last-child .navsecond__lien {
  border-bottom: 1px solid var(--color-gris);
}
.navsecond__list2 {
  /*font-size: .72em;*/
  font-weight: 400;
  color: var(--color-gris);
  margin-bottom: 0.75em;
}
.navsecond__lien2 {
  display: block;
  padding: 0.5em 0;
  color: var(--color-gris);
  transition: color ease 0.3s;
}
.navsecond__lien2:hover,
.navsecond__lien2.activ {
  color: var(--color-noir);
}
.navsecond__list--gris .navsecond__lien:hover,
.navsecond__list--gris .navsecond__lien.activ {
  color: var(--color-noir);
}
.navsecond__list--gris .navsecond__lien.activ {
  font-weight: 600;
}
@media screen and (min-width: 900px) {
  .prodcat__tit__cont {
    max-width: calc(35.4em + 5em);
    margin-right: 5em;
  }
}
.prodcat__tit {
  font-size: 1.5em;
  font-weight: 500;
}
@media screen and (min-width: 900px) {
  .prodcat__tit {
    font-size: 2.4em;
  }
}
.prodfich__img img {
  border-radius: var(--borderradius);
}
.prodfich__plusbloc {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}
.prodfich__plusbloc__1 {
  padding: 1.2em;
  background-color: var(--color-bleu);
  color: #fff;
  font-weight: 500;
  border-radius: var(--borderradius);
}
.prodfich__plusbloc__1 span {
  font-size: 0.8em;
}
.prodfich__plusbloc__1 ul {
  padding-top: 0.75em;
  list-style: disc;
  margin-left: 1em;
}
.prodfich__plusbloc__2 {
  padding: 1.2em;
  border-radius: var(--borderradius);
  color: var(--color-bleu-fonce);
  font-weight: 500;
  border: 1px solid var(--color-bleu-fonce);
}
.prodfich__plusbloc__2 span {
  font-size: 0.8em;
}

@media screen and (min-width: 700px) {
  .prodfich__plusbloc {
    flex-direction: row;
    gap: var(--gutter);
  }
  .prodfich__plusbloc__1 {
    width: calc(50% - var(--gutter) / 2);
  }
  .prodfich__plusbloc__2 {
    width: calc(50% - var(--gutter) / 2);
  }
}
.prodfich__doc {
  text-align: center;
  margin: 1em 0;
}
.prodfich__doc .bouton {
  margin: 0;
}
.prodfich__docbtn {
  margin-top: 1.5em;
  text-align: center;
}
.prodfich__docbtn a {
  color: var(--color-bleu-fonce);
  border-bottom: 1px solid var(--color-bleu-fonce);
}
.prodfich__contact {
  text-align: center;
  color: var(--color-bleu-fonce);
  padding-left: calc(1 * var(--columngutter));
  padding-right: calc(1 * var(--columngutter));
}
@media screen and (min-width: 700px) {
  .prodfich__contact {
    padding-left: calc(2 * var(--columngutter));
    padding-right: calc(2 * var(--columngutter));
  }
}
.prodfich__contacttit {
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 0.75em;
}

/* ACTU */
.actudet__date {
  text-transform: uppercase;
  font-size: 0.64em;
  font-weight: 500;
  color: var(--color-gris);
}
.actudet__img img {
  border-radius: 0.2em;
}
.partage {
  text-align: center;
  font-size: 0.8em;
  font-weight: 600;
}
.partage a {
  border-bottom: 1px solid var(--color-noir);
}
.partage a:hover {
  border-bottom-color: #fff;
}

.chiff {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}
.chiff__item {
  border: 1px solid var(--color-gris);
  border-radius: 0.2em;
  padding: 1.2em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.chiff__item__1 {
  font-size: 0.8em;
  color: var(--color-bleu-fonce);
  font-weight: 500;
}
.chiff__item__2 {
  /*font-size: 3.2em;*/
  font-size: 10vw;
  color: var(--color-bleu);
  font-weight: 600;
  line-height: 1;
  padding-top: 1em;
}
@media screen and (min-width: 480px) {
  .chiff {
    flex-direction: row;
  }
  .chiff__item {
    flex-grow: 1;
  }
  .chiff__item__2 {
    font-size: 4vw;
  }
}

.blocdoc {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 480px) {
  .blocdoc {
    position: relative;
    flex-direction: row;
  }
  .blocdoc__1 {
    width: 40.8%;
    padding-right: var(--gutter);
  }
  .blocdoc__2 {
    width: 59.2%;
  }
  .sticky_top {
    position: sticky;
    top: var(--margelr);
  }
}

.doc__list {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.6em;
  margin-right: -0.6em;
}
.doc__item {
  width: 50%;
  padding: 0.6em;
}
.doc__item:hover img {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.doc__img img {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: all ease.5s;
}
.doc__typ {
  padding-top: 0.15em;
  font-size: 0.72em;
  color: var(--color-gris);
}
.doc__tit {
  padding-top: 0.2em;
  font-size: 0.8em;
}
@media screen and (min-width: 640px) {
  .doc__item {
    width: 33.3333%;
  }
}

/* FOOTER */
.foot__cont {
  position: sticky;
  z-index: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-bleu);
  color: #fff;
}
.foot__cont a {
  color: #fff;
}
.foot {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.foot__1 {
  width: 100%;
}
.foot__2 {
  width: 60%;
  padding-right: var(--gutter);
  margin-top: 1.5em;
}
.foot__3 {
  width: 40%;
  padding-left: var(--gutter);
  margin-top: 1.5em;
}
.foot__4 {
  width: 100%;
  margin-top: 1.5em;
}
@media (min-width: 640px) {
  .foot__1 {
    width: 100%;
  }
  .foot__2 {
    margin-top: 1.5em;
    width: 37.5%;
    padding-right: var(--gutter);
  }
  .foot__3 {
    padding-left: 0;
    margin-top: 1.5em;
    width: 25%;
    padding-right: var(--gutter);
  }
  .foot__4 {
    margin-top: 1.5em;
    width: 37.5%;
  }
}
@media (min-width: 900px) {
  .foot__1 {
    width: 30%;
    padding-right: var(--gutter);
  }
  .foot__2 {
    margin-top: 0;
    width: 25%;
    padding-right: var(--gutter);
  }
  .foot__3 {
    margin-top: 0;
    width: 20%;
    padding-right: var(--gutter);
  }
  .foot__4 {
    margin-top: 0;
    width: 25%;
  }
}
@media (min-width: 1200px) {
  .foot__1 {
    width: 25%;
  }
  .foot__3 {
    width: 25%;
  }
}
.foot2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  font-size: 0.8em;
}
.foot2__1 {
  width: 100%;
  margin-bottom: 1.5em;
  margin-top: 1.5em;
}
.foot2__2 {
  width: 33.3333%;
}
.foot2__3 {
  width: 33.3333%;
}
.foot2__4 {
  width: 33.3333%;
}
.foot__txt2 a {
  opacity: 0.6;
  transition: opacity ease 0.3s;
}
.foot__txt2:hover a {
  opacity: 1;
}
.foot__txt3 {
  font-size: 1.2em;
}
.foot__txt3 a:hover {
  border-bottom: 2px solid #fff;
}

@media (min-width: 640px) {
  .foot2__1 {
    margin-top: 0;
    margin-bottom: 0;
    width: 25%;
    padding-right: var(--gutter);
  }
  .foot2__2 {
    width: 25%;
    padding-right: var(--gutter);
  }
  .foot2__3 {
    width: 25%;
    padding-right: var(--gutter);
  }
  .foot2__4 {
    width: 25%;
    text-align: right;
  }
}
.foot__nav ul {
  list-style: none;
}
@media (max-width: 639px) {
  .foot__nav ul {
    column-count: 2;
    column-gap: var(--gutter);
  }
}
.foot__nav a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-size: 1.2em;
  padding: 0.1em 0;
}
@media (max-width: 639px) {
  .foot__nav a {
    font-size: 0.8em;
    padding: 0.25em 0;
  }
}
.foot__nav ul a {
  transition: color ease 0.3s;
}
.foot__nav ul:has(:hover) :not(:hover) {
  color: rgba(255, 255, 255, 0.3);
}

/* POPUP */
.popup__cont {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}
.popup__cont.show {
  display: block;
}
.popup {
  opacity: 0;
  position: absolute;
  z-index: 1100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 960px;
  width: 90%;
  max-height: 90%;
  background-color: var(--main-bgcolor0);
  padding: calc(1 * var(--padunit));
  padding-top: calc(1 * var(--padunit));
  transition: opacity 0.5s ease;
  overflow-y: auto;
  border-radius: var(--border-radius-media);
}
@media (min-width: 800px) {
  .popup {
    min-width: 50%;
    padding: calc(1 * var(--padunit));
  }
}
.popup.show {
  opacity: 1;
}
.popup__txt {
  font-size: 0.85em;
  font-weight: 400;
}
.popup__text1 {
  padding-bottom: 0.75em;
}
.popup__tit {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.14;
  padding-bottom: 0.75em;
}
.popup__btn {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  padding: 0.5em;
  cursor: pointer;
}
.popup__btn svg path {
  fill: var(--color-noir);
  transition: fill ease 0.3s;
}
.popup__btn:hover svg path {
  fill: var(--color-noir);
}
.popup__btn svg {
  width: 1.5em;
  height: 1.5em;
}

/* FILTRES */
.filtre {
  margin-top: 0;
  margin-bottom: 0.5em;
}
.filt__list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.filt__item {
  padding: 0.25em;
}
.filt__btn {
  text-transform: uppercase;
  font-size: 0.5em;
  font-weight: 700;
  text-decoration: none;
  padding: 0.5em 0.75em;
  color: #fff;
  background-color: #777777;
  transition: background-color ease 0.3s;
}
.filt__btn.active {
  background-color: var(--color-noir);
}
.filt__btn:hover {
  background-color: var(--color-noir);
}
@media (min-width: 700px) {
  .filt__list {
    justify-content: flex-end;
  }
}
@media (min-width: 1300px) {
  .filtre {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* PAGINATION */
.pagination {
  padding: 5em 0;
  text-align: center;
}
.pagination li {
  display: inline-block;
  font-size: 1.2em;
  line-height: 1;
  font-weight: 700;
  color: #d2d2d2;
  padding-left: 0.25em;
  padding-right: 0.25em;
}
.pagination li a,
.pagination__activ {
  border: #d2d2d2 2px solid;
  color: #d2d2d2;
  text-decoration: none;
  padding-left: 0.6em;
  padding-right: 0.6em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  transition: 0.3s ease border-color, 0.3s ease color;
}
.pagination__activ,
.pagination li a:hover {
  border-color: var(--color-noir);
  color: var(--color-noir);
}

/* EFFECT */
.imgeffect_1 {
  background: repeating-radial-gradient(
    circle at 0 -25%,
    #fff,
    #333 0.125em,
    #fff 0.15em
  );
  filter: contrast(400%);
}
.imgeffect_1 img {
  mix-blend-mode: hard-light;
  filter: grayscale(1) brightness(90%) contrast(150%) blur(3px);
}

/*CONTACT FORM */
.formtit {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.33;
}
.qu {
  margin-top: 1.5em;
}
.qu__intitule {
  font-weight: 700;
  display: block;
  font-size: 1.1em;
  line-height: 1.1;
  padding-bottom: 0.5em;
}

.qu__radioin {
  position: absolute;
  left: -999em;
  visibility: hidden;
  height: 0;
  width: 0;
  transform: scale(0);
}
.qu__radiolab {
  position: relative;
  display: inline-block;
  font-size: 0.8em;
  font-weight: 400;
  cursor: pointer;
  color: #0d181c;
  padding: 0.5em 0.75em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-right: 0.5em;
  margin-bottom: 1em;
  border: 1px solid #777777;
}
.qu__radiolab:hover {
}
.qu__radioin:checked + label:after {
  transform: scale(1);
}
.qu__radioin:checked + label {
  color: #fff;
  background-color: #044563;
}
.qu__radiolab:hover:not(:checked) + label {
  color: #fff;
  border-color: #fff;
}

.qu__select {
  margin: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  border: 2px solid #aaaaaa;
  font-size: 1em;
  padding: 0.75em 1.25em;
  /*margin-top: 1em;*/
}
.form__lab {
  font-size: 0.8em;
  line-height: 1.3;
  display: block;
  margin-bottom: 0.25em;
}
.form__lab--block {
  display: block;
  font-size: 0.8em;
}
.requis::after {
  content: " *";
  color: var(--color-bleu);
}
.form__chp {
  font-family: var(--font1);
  -moz-appearance: none;
  -webkit-appearance: none;
  font-size: 1em;
  font-weight: 500;
  border: none;
  border-bottom: 2px solid var(--color-gris);
  width: 100%;
  margin-top: 0;
  margin-bottom: 0.5em;
  padding: 0.25em 0;
  outline: none;
  transition: border ease 0.3s;
}
.form__chp::placeholder {
  color: var(--color-gris);
}
@media (min-width: 700px) {
  .form__chp {
    font-size: 0.8em;
  }
}
.form__chp:focus {
  color: var(--color-noir);
}
.inputlab {
  margin-top: 1em;
  position: relative;
}
.inputlab input {
  position: relative;
  padding-left: 0;
  padding-right: 0;
}
.inputlab .form__lab {
  position: absolute;
  top: 0.35em;
  left: 0.25em;
  transition: transform 100ms ease;
  transform: translateY(0);
  pointer-events: none;
}
.inputlab input.form__chp--full + label,
.inputlab input:focus + label {
  transform: translateY(-1.5em);
  font-size: 0.65em;
  font-weight: 700;
  color: #044563;
}
.inputlab input:focus {
  border-bottom-color: #044563;
}
.form__chp--area {
  height: 6em;
  border: 2px solid #707070;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.formselect__cont {
  position: relative;
}
.formselect__cont::before {
  content: "▼";
  color: #30055e;
  position: absolute;
  z-index: 10;
  top: calc(50% - 0.2em);
  right: 1em;
}
.formselect__cont--2::before {
  top: calc(50% - 0.55em);
}
.error .form__lab::before {
  content: "⌦ ";
  color: var(color-error);
}
.error .form__chp {
  border-bottom-color: var(--color-error);
}
.error.quradio::before {
  content: "⌦ Choisissez";
  color: var(--color-error);
  display: block;
  padding-bottom: 0.5em;
}
@media (min-width: 700px) {
  .form__2col {
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
  }
  .form__2col__item {
    width: 50%;
  }
  .form__2col__item:nth-child(2n) {
    padding-left: 3.125%;
  }
  .form__2col__item:nth-child(2n + 1) {
    padding-right: 3.125%;
  }
}
.form__info {
  position: relative;
  max-width: 20em;
  font-size: 0.85em;
  line-height: 1.2;
  font-weight: 400;
  text-align: center;
  color: #fff;
  background-color: var(--color-error);
  border-radius: 1.5em;
  padding: 1em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  animation: 0.3s shake;
  animation-delay: 1s;
}
.form__info::after {
  position: absolute;
  content: "";
  display: block;
  background: var(--color-error);
  height: 1em;
  width: 1em;
  transform: rotate(45deg);
  bottom: -0.4em;
  left: 50%;
}
.form_alert {
  display: none;
}
.form_alert.go {
  font-weight: 700;
  display: inline-block;
  padding: 0.5em;
  color: #fff;
  background-color: var(--color-error);
}
.shakeit {
  animation: 0.3s shake;
}
@keyframes shake {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }
  10%,
  50%,
  90% {
    transform: translate3d(-0.5em, 0, 0);
  }
  20%,
  60% {
    transform: translate3d(0.5em, 0, 0);
  }
}
.form__chpfichier__cont {
  position: relative;
}
.form__chpfichier {
  opacity: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
}
.form__labfichier {
  position: relative;
  z-index: 2;
  font-size: 0.8em;
  line-height: 1.1;
  margin-bottom: 0.5em;
  display: inline-block;
  padding: 0.75em 2em;
  padding-left: 3.5em;
  position: relative;
  border: 1px solid #0d181c;
  color: #0d181c;
  background-color: #fff;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
}
.form__labfichier:hover {
  background-color: #044563;
  color: #fff;
  border-color: #fff;
}
.form__labfichier svg {
  position: absolute;
  left: 1em;
  top: 0.85em;
  text-decoration: underline;
  width: 1.4em;
  height: 1em;
}
.form__labfichier svg path {
  fill: #044563;
}
.form__labfichier:hover svg path {
  fill: #fff;
}
.form__chpfichier__restric {
  font-size: 0.72em;
  color: #777777;
}
.form__group {
  margin-top: 0.25em;
}
.form__group--captcha {
  margin-top: 1.5em;
}
.g-recaptcha {
  max-width: 305px;
  margin: 0 auto;
}
.accept__cont.error:before {
  content: "⌦ merci de cocher la case";
  color: var(--color-error);
  font-weight: 700;
  font-size: 0.87em;
}
.form__boutoncont {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.form__mention__cont {
  margin-top: 1em;
}
.form__mention {
  color: #777777;
  font-size: 0.72em;
}
.form__mention a {
  color: #777777;
  border-bottom: 1px solid #777777;
}
.boutonsub__cont {
  text-align: center;
}

/* EDITOR */
.editor p:empty {
  display: none;
}
.editor p,
.editor ul,
.editor ol {
  font-size: 0.8em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  line-height: 1.5;
}
.editor ul {
  list-style: disc;
  padding-left: 1em;
}
.editor a:not(.bouton) {
  border-bottom: 1px solid var(--color-noir);
  transition: border-color ease 0.3s;
}
.editor a:not(.bouton):hover {
  border-bottom-color: transparent;
}
.editor strong,
.editor b {
  font-weight: 600;
}
.editor h2 {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--color-bleu);
  padding-top: 0.75em;
  padding-bottom: 0.25em;
  line-height: normal;
}
.editor h3 {
  font-size: 1em;
  font-weight: 600;
  padding-top: 0.75em;
  padding-bottom: 0.25em;
  line-height: normal;
}
/* chapeau */
.editor .chapeau {
  font-size: 1.25em;
  font-weight: 400;
}
/* table */
.editor table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  margin-top: 4em;
  margin-bottom: 3em;
}
.editor table th {
  padding: 0.75em;
  background-color: #f0f0f0;
  border-bottom: 2px solid var(--color-noir);
  text-align: left;
  font-weight: 700;
}
.editor table tr:nth-child(2n) {
  background-color: #fff;
}
.editor table tr:nth-child(2n + 1) {
  background-color: #f8f8f8;
}
.editor table td {
  border-bottom: 2px solid var(--color-noir);
  padding: 0.75em;
  color: var(--color-noir);
}
/* exergue */
.editor .exergue {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 4em;
  margin-bottom: 3em;
  color: var(--color-noir);
  padding-left: 1.5em;
  border-left: 6px solid var(--color-noir);
  font-weight: 700;
}
/* blockquote */
.editor blockquote {
  position: relative;
  font-family: var(--font2);
  width: 95%;
  padding-top: 1.5em;
  margin-top: 3em;
  margin-bottom: 4em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  line-height: 1.2;
}
.editor blockquote p {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  word-break: break-word;
  padding: 0.15em 0.5em;
  font-size: 1.5em;
  font-weight: 400;
  font-style: italic;
}
.editor blockquote:before {
  left: 0;
  top: 0;
  content: "\201C";
  position: absolute;
  font-size: 7em;
  line-height: 0.49;
}
@media (min-width: 540px) {
  .editor blockquote:before {
    font-size: 9em;
  }
  .editor blockquote {
    padding-top: 0;
    padding-left: 4em;
  }
}
@media (min-width: 1300px) {
  .editor blockquote:before {
    font-size: 8em;
  }
}
.editor--30 p,
.editor--30 ul {
  font-size: 0.9em;
  font-weight: 600;
}
.editor--regul p,
.editor--regul ul {
  font-weight: 400;
}
@media (min-width: 700px) {
  .editor--30 p,
  .editor--30 ul {
    font-size: 1em;
  }
}

.editor--firstchildmarg *:first-child {
  padding-top: 0;
}

.editor--bas p,
.editor--bas ul,
.editor--bas ol {
  font-size: 0.8em;
  color: var(--color-gris);
}
.editor--bas h2 {
  color: var(--color-noir);
}
.editor--bas h3 {
  font-size: 0.8em;
  font-weight: 500;
  color: #232323;
}
.editor--mw900 {
  max-width: 900px;
}
@media (min-width: 900px) {
  .editor--h2left.closecontent h2 {
    /*padding-right: 59.3%;*/
    padding-right: 40%;
  }
  .editor--h2left p,
  .editor--h2left ul,
  .editor--h2left ol,
  .editor--h2left h3,
  .editor--h2left h4 {
    margin-left: calc(40.7% + var(--gutter));
    max-width: 60%;
  }
}
@media (min-width: 640px) {
  .editor--contenth2left {
    display: grid;
    grid-template-columns: 1fr 1.53fr;
    grid-gap: 0 var(--gutter);
  }
  .editor--contenth2left h2 {
    padding-top: 0.2em;
    grid-column: 1;
    padding-right: 1em;
  }
  .editor--contenth2left p,
  .editor--contenth2left a,
  .editor--contenth2left ul,
  .editor--contenth2left h3,
  .editor--contenth2left h4 {
    grid-column: 2;
    margin-top: 0;
  }
  .editor--contenth2left--imgfull .imgmultiins {
    grid-column: 1 / 3;
  }
  .editor--contenth2left--imgfull .imgmultiins.imgmultiins--2 {
    grid-column: 2;
  }
  .editor--contenth2left h2 + h2 {
    margin-top: 1.5em;
  }
}

@media (min-width: 1200px) {
  .editor--actudet p,
  .editor--actudet ul,
  .editor--actudet ol,
  .editor--actudet h2,
  .editor--actudet h3,
  .editor--actudet h4 {
    margin-left: 40.9%;
  }
  .editor--actudet img,
  .editor--actudet .video__cont {
    padding-left: var(--columngutter);
    padding-right: var(--columngutter);
  }
  .editor--actudet .embed-youtube {
    margin-left: var(--columngutter);
    margin-right: var(--columngutter);
  }

  .editor--foot a:not(.bouton) {
    color: #fff;
    border-color: #fff;
  }
  .editor--foot {
    line-height: 1.5;
  }
}
.hidden {
  display: none;
}

.closecontent h2 {
  position: relative;
  cursor: pointer;
  border-top: 1px solid var(--color-noir);
  padding-top: 0.5em;
  margin-top: 0.5em;
  padding-right: 3em;
  padding-bottom: 1em;
}
.closecontent h2.closed {
  padding-bottom: 0;
}

.closecontent h2::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0.75em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 15' fill='none'%3E%3Cpath d='M22 1L12 11.9998L2 1' stroke='%23232323' stroke-width='3'/%3E%3C/svg%3E");
  background-size: 0.96em 0.6em;
  background-repeat: no-repeat;
  width: 0.96em;
  height: 0.6em;
  transform: rotate(180deg);
  transition: transform ease 0.3s;
}
.closecontent h2.closed::after {
  transform: rotate(0);
}
.closecontent {
  padding-bottom: 1em;
  border-bottom: 1px solid var(--color-noir);
}

.video__cont {
  margin: 2em 0;
}
.embed-container {
  margin: 0 0;
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.embed-youtube {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  /*aspect-ratio: 1.861;*/
  background-color: #000;
  color: #fff;
  margin-top: 2em;
  margin-bottom: 2em;
}
.embed-youtube a::after {
  content: "►";
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
  line-height: 1;
  padding: 0.85em 0.75em 0.75em 0.85em;
  z-index: 10;
  color: var(--color-noir);
  pointer-events: none;
  transition: all ease 0.3s;
  background-color: #fff;
}
.embed-youtube a:hover::after {
  background-color: var(--color-noir);
  color: #fff;
}
.embed-youtube--1-6 {
  aspect-ratio: 1.6;
}
.embed-youtube iframe,
.embed-youtube a {
  position: absolute;
  width: 100%;
  height: 100%;
}
.embed-youtube img {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imgmultiins {
  margin-top: 2em;
  margin-bottom: 2em;
}
.imgmultiins img {
  border-radius: 0.2em;
}
.imgmultiins__figcaption {
  font-size: 0.8em;
  color: #aaaaaa;
  margin-top: 0.75em;
}
@media (min-width: 900px) {
  .imgmultiins {
    margin-left: 0;
    margin-right: 0;
  }
}
/*ACCORDION*/
*:not(.accordion) + .accordion {
  margin-top: 4em;
}
.accordion + *:not(.accordion) {
  margin-top: 3em;
}
.accordion {
  border-top: 2px solid var(--color-noir);
  border-bottom: 2px solid var(--color-noir);
}
.accordion + .accordion {
  border-top-width: 0;
}
.accordion__btn,
.editor h2.accordion__btn {
  display: block;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  background-color: #fff;
  color: var(--color-noir);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='36' height='21'%3E%3Cpath d='M0 2.821 2.8 0 18 15.352 33.2 0 36 2.821 20.8 18.175 18 21Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 0.75em 0.44em;
  background-position: right 1.15em;
  padding-right: 1.5em;
  padding-top: 0.7em;
  padding-bottom: 0;
}
/*
.accordion__btn:hover {
  background-color: #fff
}
*/
.accordion__btn.active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='36' height='21'%3E%3Cpath d='M36 18.179 33.2 21 18 5.648 2.8 21 0 18.179 15.2 2.825 18 0Z'/%3E%3C/svg%3E");
}
.accordion__contenu {
  padding-top: 1em;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.5s ease-out;
  transition: max-height 0.5s ease-out;
  font-size: 1em;
  line-height: 1.5;
}
.accordion__contenu::after {
  content: "-";
  opacity: 0;
}
/* CONTENTBUILDER */
.contentbuild {
  overflow-x: hidden;
  font-size: 1em;
}
.contentbuild .row {
  width: 100%;
}
.contentbuild .column {
  width: 100%;
}
.bloc {
  display: flex;
  flex-direction: column;
  padding-left: var(--margelr);
  padding-right: var(--margelr);
}
.bloc--full {
  padding-left: 0;
  padding-right: 0;
}
.bloc--bg {
  padding-top: calc(var(--padunitvert) * var(--rvm));
  padding-bottom: calc(var(--padunitvert) * var(--rvm));
  margin-top: 2em;
}
.bloc__item {
  margin-top: 2em;
  margin-bottom: 2em;
}
@media (min-width: 760px) {
  .bloc {
    flex-direction: row;
    /*
    padding-left: calc(var(--pdlr-colbase) * var(--padunit));
    padding-right: calc(var(--pdlr-colbase) * var(--padunit));
    */
    margin-left: calc(-1 * var(--padbloc));
    margin-right: calc(-1 * var(--padbloc));
    margin-top: calc(var(--padunitvert) * var(--rvm));
  }
  .bloc__item {
    margin-top: 0;
    width: 100%;
    padding: var(--padbloc);
  }
  .bloc__item--center {
    margin-left: auto;
    margin-right: auto;
  }
  .bloc__item--30 {
    width: 28.125%;
  }
  .bloc__item--35 {
    width: 34.375%;
  }
  .bloc__item--40 {
    width: 40.625%;
  }
  .bloc__item--50 {
    width: 50%;
  }
  .bloc__item--60 {
    width: 59.375%;
  }
  .bloc__item--65 {
    width: 65.625%;
  }
  .bloc__item--70 {
    width: 71.875%;
  }
}
.contentbuild .embed-container {
  margin: 0 0;
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background-color: #a1a1a1;
}
.contentbuild .embed-container--carre {
  aspect-ratio: 1;
}
.contentbuild .embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.contentbuild h2 {
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 0.5em;
}
.contentbuild h3 {
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: 0.5em;
}
.contentbuild .bloc--bg h2,
.contentbuild .bloc--bg h3 {
  color: #fff;
}

/* FILTRES IMAGES */
.image__monotone {
  background: var(--colorduotone_bg);
  position: relative;
}
.image__monotone img {
  /*mix-blend-mode: screen;*/
  mix-blend-mode: luminosity;
  filter: grayscale(100%) contrast(150%);
  opacity: 0.5;
}

.image__duotone {
  position: relative;
  background-color: var(--colorduotone_fg);
}
.image__duotone img {
  filter: grayscale(100%) contrast(110%);
  /*mix-blend-mode: multiply;*/
  mix-blend-mode: luminosity;
  opacity: 0.85;
  position: relative;
  width: 100%;
}
.image__duotone::before {
  content: "";
  position: absolute;
  z-index: 1;
  background-color: var(--colorduotone_bg);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: lighten;
  /*mix-blend-mode: difference;*/
}

/* ANIMATIONS */
.lineParent {
  overflow: hidden;
}
/*
.animtxt1 .lineChild {
  transform: translateY(100%);
  transition: transform .75s cubic-bezier(0.000, 0.940, 0.450, 0.890);
}
.animtxt1--go .lineChild {
  transform: translateY(0);
}
*/
.animate-in {
  -webkit-animation: fadeIn 0.7s ease-in;
  animation: fadeIn 0.7s ease-in;
}
.animate-out {
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.js .animscroll.animscroll__animtxt1 .lineChild {
  transform: translateY(100%);
  transition: transform 1s cubic-bezier(0.44, 0.05, 0, 0.98);
}
.js .animscroll--go.animscroll__animtxt1 .lineChild {
  transform: translateY(0);
}

.js .animscroll.effecttoimg1 img,
.js .effecttoimg1 img {
  border-radius: 0;
  transition: all ease 0.75s;
}
.js .animscroll--go.effecttoimg1 img {
  border-radius: 1.2em;
  transform: matrix(1, 0, 0, 1, 0, 0);
}
.js .animscroll.imgeffect1,
.js .imgeffect1 {
  position: relative;
  overflow: hidden;
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 1.5s ease;
}
.js .animscroll--go.imgeffect1 {
  transform: scale(1);
}
.js .animscroll.imgeffect1 img {
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 1.5s ease;
}
.js .animscroll--go.imgeffect1 img {
  transform: scale(1);
}
.js .animscroll.animscroll_fadeandup {
  transform: matrix(1, 0, 0, 1, 0, 60);
  opacity: 0;
  transition: all ease 1s;
}
.js .animscroll.animscroll_fadeandup--delay {
  transition-delay: 1s;
}
.js .animscroll--go.animscroll_fadeandup {
  transform: matrix(1, 0, 0, 1, 0, 0);
  opacity: 1;
}

/* Realisations */
.hero_map {
  width: 100%;
  height: 90vh;
  position: relative;
  margin-bottom: var(--padunitvert);
}
.hero_map .hero__cta {
  position: absolute;
  bottom: 25px;
  right: 25px;
  color: #ffffff;
  font-size: 0.75em;
}
/* Only the map - not markers */
#gmap .gm-style > div > div:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.map__point {
  position: relative;
  transition: filter 0.25s;
}
.point__pin {
  cursor: pointer;
  transition: scale 0.25s;
}
.map__point:not(.open):hover .point__pin {
  scale: 1.2;
}

.point__card {
  position: absolute;
  top: 0;
  left: calc(100% + 15px);
  max-width: 80vw;

  font-family: var(--font1);
  border-radius: 5px;
  background-color: #ffffff;
  cursor: initial;

  pointer-events: none;
  opacity: 0;

  transition: opacity 0.25s;
}
.point__card[data-change-x-pos] {
  right: calc(100% + 15px);
  left: unset;
}
.card_open .map__point {
  filter: grayscale() brightness(0.25);
}
.map__point.open,
.map__point:hover {
  filter: none;
}
.map__point.open .point__card {
  pointer-events: all;
  opacity: 1;
}

.point__card header {
  position: relative;
  display: flex;
  width: clamp(300px, 20rem, 80vw);
}
.point__card header *:not(.card__closer) {
  width: 100%;
  display: block;
}
.point__card header .card__img img {
  border-radius: 5px;
}
.point__card header .card__closer {
  position: absolute;
  top: 5px;
  right: 5px;

  display: grid;
  place-content: center;

  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: 30px;
  height: auto;

  transition: scale 0.15s;

  cursor: pointer;
  background-color: #ffffff;
}
.point__card header .card__closer:hover {
  scale: 1.15;
}
.point__card .card__tit {
  font-size: 1.5em;
  width: max-content;
}

.point__card main {
  display: grid;
  gap: 15px;
  margin-top: 10px;
  padding: calc(var(--padunitvert) / 2) calc(var(--padunit) / 2.5);
}

.point__card .card__data {
  display: grid;
  grid: auto / repeat(2, 1fr);
  gap: 1em;

  text-transform: uppercase;
}
.point__card .card__data > * {
  width: 100%;
}
.card__data .data__name {
  color: #939393;
}
.card__data .category .data__value {
  font-weight: 700;
  text-decoration: underline;
  color: var(--color);
}

.point__card footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.card__details {
  font-weight: 500;
}

@media screen and (max-width: 800px) {
  .point__card {
    font-size: 0.5em;
  }
}

/* google maps things */
#gmap {
  height: 100%;
  width: 100%;
}
/* .gm-style > div:first-of-type {
  touch-action: auto;
} */
[class*="marker-view"]:has(.open),
[class*="marker-view"]:has(.map__point:hover) {
  z-index: 5;
}

/* Asided Content */

.main__asided {
  display: grid;
  grid: 1fr / calc(2 * var(--column) + var(--gutter)) 1fr;
  gap: var(--gutter);
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.main__asided aside {
  position: sticky;
  top: calc(var(--margelr) - 0.5em);
  left: 0;
  margin-top: 0.5em;
  height: fit-content;
  font-size: 0.72em;
  padding-right: var(--gutter);

  transition: top ease 0.3s;
}
.scrolling-up .main__asided aside {
  top: calc(6.25em + var(--padunit));
}

.asided__content {
  display: grid;
  gap: calc(var(--padunitvert) * var(--rvm));
}
.asided__content .intro {
  /*width: calc(6 * var(--column) + 5 * var(--gutter));*/
  max-width: 35.4em;
  font-weight: 600;
  line-height: 1.75em;
  translate: 0 calc(-0.75em / 2);
}
/*
@media screen and (max-width: 1200px) {
  .asided__content .intro {
    width: 100%;
  }
}
  */
@media screen and (max-width: 900px) {
  .main__asided {
    display: flex;
    flex-direction: column-reverse;
  }
  .main__asided aside {
    position: static;
  }
  .aside_mask_mob .main__asided aside {
    display: none;
  }
}

/* Liste des réalisations */

.rea__list {
  list-style: none;
  display: grid;
  grid: auto / repeat(3, 1fr);
  gap: calc(2 * var(--gutter)) var(--gutter);
}
@media screen and (max-width: 1200px) {
  .rea__list {
    grid: auto / repeat(2, 1fr);
  }
}
@media screen and (max-width: 700px) {
  .rea__list {
    grid: auto / 1fr;
  }
}
.rea__list li,
.rea__list a {
  width: 100%;
}
.rea__card {
  width: 100%;
  aspect-ratio: 3 / 1.5;
  font-size: 0.75em;
}
.rea__img {
  --border-radius: 10px;
  position: relative;
  margin-bottom: 5px;
  overflow: hidden;
  border-radius: var(--border-radius);
}
.rea__card .rea__img img {
  transition: scale 0.25s ease-in-out;
}
.rea__card:hover .rea__img img {
  scale: 1.05;
}
.rea__country {
  position: absolute;
  bottom: calc(var(--border-radius) / 1.5);
  left: calc(var(--border-radius) / 1.5);
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 5px 10px;
  border-radius: calc(var(--border-radius) * 0.75);

  background-color: #ffffff;
  color: var(--color-noir);
  text-transform: uppercase;
}

/* Aside content catégories de réalisations */
.real_categories {
  --icon-width: 25px;
}
.real_categories li {
  border: 0 solid rgba(147, 147, 147, 0.6);
  border-width: 1px 0 0 0;
  padding: 8px 0;
  color: var(--color-gris);
  opacity: 0.5;
  transition: padding 0.15s, color 0.15s, opacity 0.15s;
}
.real_categories li:last-of-type {
  border-bottom-width: 1px;
}
.real_categories li:has(a:hover),
.real_categories li.selected {
  opacity: 1;
  color: var(--theme);
}
.real_categories li.selected {
  font-weight: 600;
}
.real_categories .category {
  display: flex;
  align-items: center;
  gap: 10px;
}
.real_categories .category .icon {
  width: var(--icon-width);
}

/* Realisation - single */
.rea__single aside {
  margin-top: 25px;
}
.rea__header .rea__country {
  position: static;
  background-color: transparent;
  opacity: 0.5;
  font-size: 0.7em;
  scale: 0.85;
  transform-origin: left center;
  padding-left: 0;
}

.rea__header .icon {
  position: absolute;
  top: 15px;
  right: 0;
  width: 4em;
  aspect-ratio: 1 / 1;
  > svg {
    width: 100%;
    height: 100%;
  }
}
/*
.rea__slider {
  position: relative;
  display: grid;
  width: 100%;
}
.rea__slider #slider {
  overflow-x: hidden;
  margin-top: var(--gutter);
  aspect-ratio: 2 / 1;
  margin-right: calc(-1 * var(--padunit));
}
.rea__slider .swiper-slide {
  height: 100%;
}
.rea__slider .swiper-slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.rea__slider .slider__controls {
  position: absolute;
  bottom: calc(100% + 5px);
  right: 0;

  display: flex;
  align-items: center;
  gap: 1em;
}
.rea__slider .slider__controls > .swiper-button {
  cursor: pointer;
}
*/
.rea__slider {
  position: relative;
  width: 100%;
}
.rea__slider #slider {
  overflow-x: hidden;
  margin-top: var(--gutter);
  margin-right: calc(-1 * var(--padunit));
}
.rea__slider_img {
  height: 75vh;
  width: auto;
  border-radius: 0.2em;
}
/*
@media screen and (max-width: 640px) {
  .rea__slider_img {
    height: 60vw;
  } 
}
*/
@media (orientation: portrait) {
  .rea__slider_img {
    height: 60vw;
  }
}

.rea__slider_figcaption {
  color: var(--color-gris);
  padding-top: 0.5em;
  font-size: 0.75em;
}
.rea__slider .slider__controls {
  position: absolute;
  bottom: 100%;
  right: 0;

  display: flex;
  align-items: center;
  gap: 0.25em;
}
@media screen and (max-width: 900px) {
  .rea__slider .slider__controls {
    display: none;
  }
}
.rea__slider .swiper-button {
  font-family: var(--font1);
  opacity: 1;
  background-color: rgba(0, 0, 0, 0);
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
}
.rea__slider .swiper-button:not(.swiper-button-disabled):hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.rea__slider .slider__controls > .swiper-button {
  cursor: pointer;
}
.rea__slider .swiper-button-disabled {
  opacity: 0.25;
}
.rea__slider .swiper-slide {
  cursor: grab;
  width: auto;
}

.rea__single .intro p {
  font-size: 1.2em !important ;
}
.rea__content h2,
.rea__content h3,
.rea__content h4,
.rea__content h5,
.rea__content h6 {
  color: var(--theme);
}

.rea__footer h2 {
  font-size: 1.2em;
  font-weight: 600;
}
.rea__footer .rea__assoc {
  display: grid;
  grid: auto / calc(4 * var(--column) + 3 * var(--gutter)) 1fr;
  gap: var(--gutter);
}
.rea__footer .rea__assoc ul {
  width: 100%;
  display: grid;
  grid: auto / repeat(3, 1fr);
  direction: rtl;
  text-align: left;
  gap: 1em;
}
.rea__related .related__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rea__related .related__head a {
  font-size: 0.65em;
}

@media screen and (max-width: 650px) {
  .rea__header h1 {
    max-width: calc(9 * var(--column) + 8 * var(--gutter));
  }
  .rea__footer .rea__assoc {
    grid: unset;
  }
}

/* Singleton header */
header.base {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}
header.base h1 {
  max-width: calc(6 * var(--column) + 5 * var(--gutter));
}
header.base .intro p {
  font-size: 1.2em !important;
  font-weight: 400;
}

/* Contact */
.contactform__hero {
  display: grid;
}
@media screen and (min-width: 850px) {
  .contactform__hero {
    grid: 1fr / repeat(2, 1fr);
    gap: calc(2 * var(--gutter) + var(--column));
  }
}
.contactform__hero header {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.contactform__hero header .intro:first-of-type {
  flex-grow: 1;
}
.contactform__hero header .intro {
  font-size: 0.65em;
}

.contact__form .form__coord {
  display: grid;
}
@media screen and (min-width: 500px) {
  .contact__form .form__coord {
    gap: var(--gutter);
    grid: 1fr / repeat(2, 1fr);
  }
}
.contact__form #demande {
  resize: vertical;
  min-height: 100px;
}

.contact__form footer {
  display: grid;
  grid: auto / repeat(2, 1fr);
}

.contact__form .rgpd {
  font-size: 0.5em;
  color: var(--color-gris);
}

.contact__form .rgpd > input {
  float: left;
  width: 1em;
  aspect-ratio: 1 / 1;
}
.contact__form .rgpd > *:not(input) {
  margin-left: 2em;
  display: block;
  margin-bottom: 0.5em;
}
.contact__form footer > button {
  justify-self: right;
  align-self: center;

  cursor: pointer;
  background-color: var(--color-noir);
  color: #ffffff;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 0.5em 1em;
  height: fit-content;
}

@media screen and (min-width: 850px) {
  .contactform__others .contact {
    display: grid;
    grid: 1fr / calc(3 * var(--column) + 2 * var(--gutter)) 1fr;
  }
}
.contactform__others .contact__name {
  font-weight: 600;
  margin-top: 2em;
}
@media screen and (max-width: 850px) {
  .contactform__others .contact__name {
    font-size: 1.25em;
  }
}

/* autocomplete */
.search-autocomplete {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.search-autocomplete .toggler {
  position: absolute;
  top: 50%;
  right: 0;
  translate: -50% -50%;
  cursor: pointer;
  transition: 0.5s;
  height: 65%;
  width: unset;
  aspect-ratio: 1 / 1;

  z-index: 1;
}

.search-autocomplete.mobile .toggler,
.search-autocomplete.laptop:has(input:focus) .toggler {
  right: 100%;
}
.navblanc .search-autocomplete.laptop .toggler path {
  fill: #ffffff;
}

.search-autocomplete input {
  opacity: 0;
  border: none;
  font-family: inherit;
  padding: 0.5em;
  font-size: 0.75em;
  border-bottom: 2px solid var(--color-gris);
  outline: none;
  font-family: inherit;

  transition: 0.5s;
}
.navblanc .search-autocomplete input,
.search-autocomplete.mobile input {
  border-bottom: unset;
}
.search-autocomplete input:focus,
.search-autocomplete.mobile input {
  opacity: 1;
}
.search-autocomplete.laptop input:not(:focus) {
  pointer-events: none;
}

.search-autocomplete.laptop .autoComplete_wrapper {
  position: relative;
}
.autoComplete_wrapper ul {
  position: absolute;
  top: 100%;
  left: 0;

  background-color: var(--color-bleu);
  color: #fff;

  padding: 0.5em;
  border-radius: 0 1em 1em 1em;
  text-wrap: nowrap;

  display: block;

  pointer-events: none;
  opacity: 0;
  font-size: 0.65em;

  z-index: 5;

  transition: opacity 0.25s;
}
.navblanc .autoComplete_wrapper ul,
.search-autocomplete.mobile .autoComplete_wrapper ul {
  color: #000;
  background-color: #ffffff;
}

.autoComplete_wrapper ul:not([hidden]) {
  opacity: 1;
  pointer-events: unset;
}

.autoComplete_wrapper li.info {
  font-weight: 700;
}
.navblanc .autoComplete_wrapper li.info {
  color: var(--color-bleu);
}
.autoComplete_wrapper li.info + li {
  margin-top: 0.5em;
}
.autoComplete_wrapper li:not(.info) a {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 3em;
  background-color: transparent;
  padding: 0.25em 0.15em;

  border-radius: 0.5em;

  transition: background-color 0.25s;
}

.autoComplete_wrapper li:not(.info) .match {
  display: flex;
  align-items: center;
  gap: 0.5em;

  svg path {
    fill: var(--color-bleu-fonce);
  }
}
.autoComplete_wrapper li .autoComplete__cat {
  opacity: 0;
  font-size: 0.5em;
  text-transform: uppercase;

  transition: opacity 0.25s;
}

.autoComplete_wrapper li:not(.info) a:hover {
  background-color: rgba(0, 0, 0, 0.17);
  span {
    opacity: 1;
  }
}
/* mobile */

.search-autocomplete.mobile {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 1em 1.5em;
  gap: 1em;
}
.search-autocomplete.mobile .toggler {
  position: static;
  translate: unset;
}

.search-autocomplete.mobile input {
  opacity: 1;
  font-size: 16px;
  z-index: 1;
  width: 100%;
  background-color: transparent;
  color: #fff;
}
.search-autocomplete.mobile input:not(:focus)::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.search-overlay::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: var(--color-bleu-fonce);
  opacity: 0;

  backdrop-filter: blur(5px);

  pointer-events: none;

  transition: opacity 0.25s;
}
.search-autocomplete.mobile .autoComplete_wrapper {
  width: 75%;
}
.search-autocomplete.mobile .autoComplete_wrapper ul {
  width: 100%;
  border-radius: 0 0 0.2em 0.2em;

  svg path {
    fill: var(--color-bleu-fonce);
  }
}

.nav_activ .search-overlay:has(input:focus)::before,
.nav_activ .search-overlay:has(.autoComplete_wrapper ul:not([hidden]))::before {
  opacity: 0.75;
  pointer-events: unset;
}
.nav_activ .search-overlay:has(input:focus) .search-autocomplete,
.nav_activ
  .search-overlay:has(.autoComplete_wrapper ul:not([hidden]))
  .search-autocomplete {
  background-color: #ffffff;

  .toggler path {
    fill: var(--color-noir);
  }

  input {
    color: var(--color-noir);
  }
}

.autoComplete_wrapper li:not(.info) div p {
  max-width: 40vw;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* Only on mobile phone */
@media screen and (hover: none) {
  .autoComplete_wrapper li:not(.info) div p {
    max-width: unset;
  }
  .autoComplete_wrapper li:not(.info) span {
    display: none;
  }
}

/* Legend cases */
p:has(> .case) {
  --case-size: 1em;
  padding-top: calc(var(--case-size) / 2);
  padding-left: calc(var(--case-size) + 0.5em);

  position: relative;
}
span.case {
  width: var(--case-size);
  position: absolute;
  top: calc(0.25em + var(--case-size) / 2);
  left: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-noir);
}
span.case.full {
  background-color: var(--case-color-0, transparent);
}
span.case.lined {
  background-image: repeating-linear-gradient(
    to var(--case-param-0, left),
    var(--case-gradient, transparent),
    var(--case-gradient, transparent)
  );
}
span.case.tiled {
  --size: var(--case-param-0, 50%);
  background-image: repeating-conic-gradient(
    var(--case-color-0, black) 0 25%,
    var(--case-color-1, transparent) 25% 50%
  );
  background-size: var(--size) var(--size);
  background-position: 0 0, repeat(2, calc(var(--size) / 2));
  background-color: var(--case-color-1);
}