html,
body {
  background: var(--color-950);
  position: relative;
}

body.navIsActive {
  overflow: hidden;
}

/***** officiel *****/
#officiel {
  font-family: "medium";
  font-size: var(--font-size-300);
  display: flex;
  align-items: center;
  gap: var(--espace-050);
}

#officiel img {
  width: calc(var(--size-icon) * 1.2);
  height: calc(var(--size-icon) * 1.2);
}

/***** nav *****/
.nav-link {
  padding: 5pt 0;
  position: relative;
  height: max-content;
  transition: all var(--transition-ease);
}

.nav-link .border {
  display: grid;
  height: var(--stroke-width);
  transition: all var(--transition-ease);
  position: absolute;
  margin: 0 auto;
  bottom: 0;
  width: 0;
  border-radius: var(--radius-100);
  background: var(--color-960);
}

.nav-link.active .border,
.nav-link:hover .border {
  width: 50%;
}

/***** header *****/
#header {
  position: fixed;
  top: 0;
  background: var(--bg-000-AA);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-200);
  padding: var(--espace-050) var(--espace-200);
  z-index: 1000;
  transition: all var(--transition-ease);
}

#header.hidden {
  transform: translateY(-100%);
}

#header.change {
  margin: var(--espace-200);
  border-radius: var(--radius-100);
}

@media screen and (max-width: 600px) {
  #header #nav {
    display: none;
  }
}

@media screen and (min-width: 601px) {
  #header #nav {
    display: flex;
  }
}

#header #nav {
  align-items: center;
  gap: var(--espace-100);
}

#header #nav .nav-link {
  color: var(--color-500);
}

#header #nav .nav-link:hover,
#header #nav .nav-link.active {
  color: var(--color-100);
}

#header  #buttonNav {
  display: none;
  width: var(--size-icon);
  height: var(--size-icon);
  transition: all var(--transition-ease);
}

body.navIsActive #header #buttonNav {
  height: 1pt;
}

@media screen and (max-width: 600px) {
  #header #buttonNav {
    display: block;
  }
}

#header #buttonNav .line {
  display: block;
  width: 100%;
  height: 2pt;
  background: var(--color-100);
  transition: all var(--transition-ease);
}

body.navIsActive #header #buttonNav .line {
  height: 1pt;
}

#header #buttonNav .line.l2 {
  transform: translateY(10pt);
}

body.navIsActive #header #buttonNav .line.l2 {
  transform: translateY(0);
}

body #navSection {
  opacity: 0;
  position: fixed;
  left: var(--espace-100);
  right: var(--espace-100);
  height: 0;
  z-index: -1;
  background: var(--color-925);
  overflow: hidden;
  transition: all var(--transition-ease);
}

body.navIsActive #navSection {
  z-index: 999;
  height: max-content;
  bottom: 0;
  opacity: 1;
  border-radius: var(--radius-050);
}

body #navSection #nav {
  display: grid;
  gap: var(--espace-100);
  padding: var(--espace-100);
}

body #navSection #nav .nav-link {
  width: max-content;
}

/***** footer *****/
#footer {
  margin: var(--espace-050) var(--espace-200) var(--espace-200);
  padding: var(--espace-100) var(--espace-100) 0;
  background: var(--bg-000-AA);
  border: var(--stroke-width) solid var(--bg-000);
  border-radius: var(--radius-050);
}

#footer #topFoot {
  display: grid;
  justify-content: center;
  gap: var(--espace-100);
}

@media screen and (max-width: 600px) {
  #footer #topFoot {
    grid-template-columns: 1fr;
    gap: var(--espace-200);
  }
}

@media screen and (min-width: 601px) {
  #footer #topFoot {
    grid-template-columns: repeat(4, 1fr);
    align-items: flex-start;
  }
}

#footer #topFoot .part.one {
  display: grid;
  gap: var(--espace-050);
}

#footer #topFoot .part .title {
  font-family: "medium";
}

#footer #topFoot .part .body {
  display: grid;
  gap: 7pt;
  margin-top: var(--espace-050);
}

#footer #bottomFoot {
  border-top: var(--stroke-width) solid var(--color-100);
  padding: var(--espace-100) 0;
  margin-top: var(--espace-100);
  color: var(--color-100);
}

@media screen and (max-width: 600px) {
  #footer #bottomFoot {
    display: grid;
    justify-content: center;
    gap: var(--espace-100);
  }
}

@media screen and (min-width: 601px) {
  #footer #bottomFoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

#footer #bottomFoot #rezo {
  display: flex;
  flex-wrap: wrap; 
  align-items: center;
  gap: var(--espace-050);
}

#footer #bottomFoot #rezo a {
  flex: 0 0 calc(var(--size-icon) * 2);
  display: grid;
  place-content: center;
  width: calc(var(--size-icon) * 2);
  height: calc(var(--size-icon) * 2);
  border: var(--stroke-width) solid var(--color-100);
  border-radius: 50%;
}

/***** data button style *****/
[data-button-style] {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: var(--height-button-000);
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-050);
}

/* background */
[data-button-style][data-color="000"] {
  background: transparent;
  color: var(--color-100);
}

[data-button-style][data-color="100"] {
  background: var(--color-100);
  color: var(--color-950);
}

[data-button-style][data-color="900"] {
  background: var(--color-900);
  color: var(--color-100);
}

[data-button-style][data-color="925"] {
  background: var(--color-925);
  color: var(--color-100);
}

[data-button-style][data-color="960"] {
  background: var(--color-960);
  color: var(--color-100);
}

/* svg */
[data-button-style][data-color="000"] svg {
  stroke: var(--color-100);
}

[data-button-style][data-color="100"] svg {
  fill: var(--color-950);
}

[data-button-style][data-color="925"] .svg {
  stroke: var(--color-100);
}

/* loader */
[data-button-style][data-color="000"] .theLoader {
  border: var(--stroke-width) solid var(--color-100);
}

[data-button-style][data-color="925"] .theLoader {
  border: var(--stroke-width) solid var(--color-100);
}

[data-button-style][data-color="960"] .theLoader {
  border: var(--stroke-width) solid var(--color-100);
}

/* child */
[data-button-style] .child {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-1);
  opacity: 0;
  z-index: -1;
  width: 0;
  height: 0;
}

[data-button-style][data-state="normal"] .text {
  opacity: 1;
  z-index: 1;
  width: 100%;
  height: 100%;
}

[data-button-style][data-state="loading"] .loader {
  opacity: 1;
  z-index: 1;
  width: 100%;
  height: 100%;
}

[data-button-style][data-state="error"] .error {
  opacity: 1;
  z-index: 1;
  width: 100%;
  height: 100%;
}

[data-button-style][data-state="waiting"] .waiting {
  opacity: 1;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* ripple */
[data-button-style] .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  animation: ripple-animation 0.6s linear;
}

[data-button-style][data-color="100"] .ripple {
  background-color: rgba(128, 128, 128, 0.6);
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dots {

  0%,
  80%,
  100% {
    transform: scale(0.8);
  }

  40% {
    transform: scale(1.2);
  }
}