/* @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-Regular.woff2'); } */
@font-face { font-family: 'DIN Pro'; src: url('fonts/DIN_Pro/DINPro.woff2'); font-display: swap; }
@font-face { font-family: 'Parisienne'; src: url('fonts/Parisienne/Parisienne-Regular.woff2'); font-display: swap; }
/* ---------- ---------- ---------- ---------- */
:root {
  --general-max-width: 1200px;

  --green-color: #F8F8F8;

  --light-background--lighter: rgb(250,250,250);
  --light-background: rgb(245,245,245);
  --light-background--darker: rgb(228,228,228);

  --dark-background--darker: #1A3B3E;
  --dark-background: #34757C;
  --dark-background--low_transparency: rgba(52,117,124,.8);
  --dark-background-alternative: #4ABB9E;
  --dark-color: var(--green-color);

  --green-background--darker: #1A3B3E;
  --green-background: #34757C;
  --green-background--low_transparency: rgba(52,117,124,.8);
  --green-background-alternative: #4ABB9E;

  --noscript-color: red;
  --noscript-height: 32px;

  /* --navy-background: #001F3F;
  --navy-background-low_transparency: rgba(0,31,63,0.85) ;  */
  --navy-color: #C0C0C0;

  --dark-background_main-color: var(--green-color);
  --light-background_main-color: #02535C;

  --body-font: 'DIN Pro';
  --qa-font: 'DIN Pro';
  /* --motivation-font: 'Courgette'; */
  --perso-font: 'Parisienne';

  --details-border: rgba(0,31,63,0.8);
  --details-background: rgba(4,139,154,1);

  --testimony-height: 16rem;
  --footer-height: 48px;

  --general-margin: 48px;
  --low-margin: 16px;
  --general-gap: 12px;

  --lateral-margin: 16%;

  --gradient: 90deg;

  --main-logo-height: 8rem;

  --transition-logos: .25s;
  /* --transition-logos: .5s; */
}
/* ---------- ---------- ---------- ---------- */
:root {
  --radius: 4px;
}
/* ---------- ---------- ---------- ---------- */
* {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
  font-family: var(--body-font),sans-serif;
  overflow-y: auto;
  background-color: var(--body-background);
  color: var(--body-color);
  word-break: keep-all;
}
::-webkit-scrollbar {
  display: none;
}
a {
  text-decoration: none;
  color: inherit;
}
/* ---------- ---------- ---------- ---------- */
button svg { width: 24px }
#courriel svg { width: 16px }
/* ---------- ---------- ---------- ---------- */
noscript {
  position: fixed;
  top: var(--nav-top-height);
  height: var(--noscript-height);
  left: 0;
  width: 100vw;
  display: flex;
}
#noscript-box {
  z-index: 80;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fefefe;
  display: flex;
}
#noscript-content {
  margin: auto;
  color: var(--noscript-color);
}
/* ---------- ---------- ---------- ---------- */
noscript ~ #content {
  padding-top: calc( var(--nav-top-height) + var(--noscript-height) ) !important;
}
/* ---------- ---------- ---------- ---------- */
