:root {
  --vitrine-black-color: rgba(0, 0, 0, 1);
  --vitrine-black-color-2: rgba(0, 0, 0, 0.87);
  --vitrine-white-color: rgba(255, 255, 255, 1);
  --vitrine-white-alpha-color: rgba(255, 255, 255, 0.85);
  --vitrine-blue-color: rgb(19, 1, 233);
  --vitrine-mocassin-color: #fff7ae;
  --vitrine-blue-alpha-color: rgba(1, 1, 190, 0.85);
  --vitrine-yellow-color: rgb(229, 255, 0);
  --vitrine-lemon-color: rgb(188, 255, 61);
  --vitrine-lemon-alpha-color: rgba(188, 255, 61, 0.85);
  --vitrine-red-color: rgb(254, 0, 0);
  --vitrine-communist-color: rgb(204, 1, 0);
  --vitrine-pink-color: rgb(255, 87, 146);
  --vitrine-pink-alpha-color: rgba(255, 87, 146, 0.85);
  --vitrine-base-color: rgb(247, 248, 243);
  --vitrine-gray-color: #f2f2f2;
  --vitrine-white-transparent-color: rgba(255, 255, 255, 0.5);
}

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
fieldset {
  border: none;
}
html {
  font:
    16px/1.5 -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: var(--vitrine-base-color);
  color: var(--vitrine-black-color);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

button {
  min-width: 44px;
  min-height: 44px;
  outline: none;
  border: none;
  background: none;
}
button:hover {
  cursor: pointer;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

.container-fluid-vitrine {
  --vitrine-gutter-x: 1.5rem;
  --vitrine-gutter-y: 0;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
}
.container-vitrine {
  display: flex;
  min-height: calc(95dvh - 94px);
  max-width: 2560px;
  margin-left: auto;
  margin-right: auto;
}

.page-content {
  position: relative;
  height: calc(100% - 84px);
}

.hero {
  display: flex;
  flex-direction: column;
  height: calc(95lvh - 33px);
  transition: height 0.2s ease-out;
}

.dynamic-dialog {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  z-index: 998;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--vitrine-black-color);
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
}
body:has(.dynamic-dialog) {
  overflow: hidden;
}

@media screen and (min-width: 1024px) {
  .page-content {
    padding: 0 20px 20px;
  }
  .container-fluid-vitrine {
    padding-right: calc(var(--vitrine-gutter-x) * 0.5);
    padding-left: calc(var(--vitrine-gutter-x) * 0.5);
  }
  .hero {
    height: calc(95vh - 53px);
  }
}