:root {
  --font-body: -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

:root {
  --border-color: #BFBEBE;
  --bg-main-color: rgb(248 250 240);
  --bg-main-color-dark: rgb(17 20 14);
  --bg-header: #F3F3F3;
  --bg-header-modal: #1e88e5;
  --s-color: rgb(86 98 75);
  --s-light-color: #92d4ef;
  --s-dark-color: #2c748c;
  --p-color: rgb(70 103 48);
  --p-light-color: #6ab7ff;
  --p-dark-color: #005cb2;
  --warn-color: #b90909;
  --warn-dark-color: #810000;
  --text-p: #ffffff;
  --text-index: #1e88e5;
  --back-card: #FFFFFF;
  --color-title: #33475b;
  --header-titre: #1e88e5;
  --header-sous-titre: #000;
}

/* Icon Color */
@layer demo {
  .highlighted-text-shadow {
    text-shadow: 0 0.15ch 15px var(--shadow), 0 -2px 0 var(--highlight);
  }
}
@layer demo.support {
  :root {
    --hue: 96	; /* change me */
    --bg: oklch(89.6% 5% var(--hue));
    --text: oklch(85% .1 var(--hue));
    --shadow: oklch(25% .2 var(--hue));
    --highlight: oklch(98% .05 var(--hue));
  }
}
h1 {
  font-size: 10vi;
  letter-spacing: -0.15ch;
  line-height: 0.75;
  color: var(--text);
  margin: 0;
}

html {
  font-size: 100%;
  height: 100%;
  font-family: var(--font-body);
}
html body {
  font-size: 0.8em;
  margin: 0px;
  height: 100%;
  overflow: hidden;
  background: var(--bg-main-color);
}
html body > section {
  display: flex;
  height: 100vh;
}
html body > section > article {
  width: 50%;
  box-sizing: border-box;
  padding: 10px;
  position: relative;
}
html body > section > article:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
html body > section > article:first-child > .logo {
  text-align: center;
}
html body > section > article:first-child > .logo img {
  width: 50%;
}
html body > section > article:first-child > .copy {
  position: absolute;
  width: 100%;
  bottom: 10px;
  text-align: center;
  color: black;
}
html body > section > article:first-child > .dlogin {
  font-size: 1.2em;
  margin-bottom: 70px;
  margin-top: 40px;
  padding: 40px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028), 12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07);
}
html body > section > article:first-child > .dlogin label {
  display: block;
  color: var(--p-color);
  font-size: 0.8em;
  margin-bottom: 5px;
}
html body > section > article:first-child > .dlogin input {
  width: 200px;
  padding: 10px;
  border: thin solid var(--border-color);
  border-radius: 5px;
  outline: 0;
}
html body > section > article:first-child > .dlogin button {
  width: 100%;
  padding: 10px;
  margin-top: 15px;
  background-color: var(--p-color);
  color: var(--text-p);
  border: none;
  font-family: var(--font-body);
  border-radius: 4px;
  cursor: pointer;
}
html body > section > article:first-child > .dlogin button:hover {
  background-color: #abd28f;
  color: var(--p-color);
}
html body > section > article:last-child {
  background-image: url(/images/login1.jpg);
  box-shadow: 4px 4px 25px #000;
}
html body > section > article .sous-titre {
  font-size: 1.3em;
  color: var(--p-color);
}