/* ========================================
   UTILITIES
======================================== */
.pointer-events-none {
  pointer-events: none;
}
/* Texte */

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.text-primary {
  color: var(--color-primary);
}
.text-secondary {
  color: var(--color-secondary);
}
.text-content-secondary {
  color: rgb(var(--neutral-60));
}
.text-muted {
  color: var(--color-text-light);
}
.text-white {
  color: white;
}
.typography-button-1 {
  font-family: var(--font-virage-narrow);
  font-size: var(--font-size-m-button-1);
  --tw-leading: var(--line-height-100);
  line-height: var(--line-height-100);
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--letter-spacing-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: uppercase;
  font-style: italic;
}
.uppercase {
  text-transform: uppercase;
}
@media (min-width: 64rem) {
  .md\:typography-button-1 {
    font-family: var(--font-virage-narrow);
    font-size: var(--font-size-m-button-1);
    --tw-leading: var(--line-height-100);
    line-height: var(--line-height-100);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--letter-spacing-normal);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: uppercase;
    font-style: italic;
  }
}
.text-dark-content-secondary {
  color: rgb(var(--neutral-20));
}
.text-content-primary-inverse,
.text-content-primary-inverse\/60 {
  color: rgb(var(--neutral-white));
}
.typography-overline-2 {
  font-family: var(--font-virage-narrow);
  font-size: var(--font-size-m-overline-2);
  --tw-leading: var(--line-height-100);
  line-height: var(--line-height-100);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: var(--letter-spacing-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: uppercase;
}
.typography-title-3 {
  font-family: var(--font-virage-condensed);
  font-size: var(--font-size-m-title-3);
  --tw-leading: var(--line-height-110);
  line-height: var(--line-height-110);
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--letter-spacing-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: uppercase;
  font-style: italic;

  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}
.typography-title-4 {
  font-family: var(--font-virage-condensed);
  font-size: var(--font-size-m-title-4);
  --tw-leading: var(--line-height-110);
  line-height: var(--line-height-110);
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--letter-spacing-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: uppercase;
  font-style: italic;
}
.typography-body-4-semibold {
  font-family: var(--font-virage);
  font-size: var(--font-size-m-body-4);
  --tw-leading: var(--line-height-130);
  line-height: var(--line-height-130);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: var(--letter-spacing-tight);
  letter-spacing: var(--letter-spacing-tight);
}
.typography-body-6 {
  font-family: var(--font-virage);
  font-size: var(--font-size-m-body-5);
  --tw-leading: var(--line-height-130);
  line-height: var(--line-height-130);
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  --tw-tracking: var(--letter-spacing-tight);
  letter-spacing: var(--letter-spacing-tight);
}
@media (min-width: 64rem) {
  .typography-overline-2 {
    font-size: var(--font-size-d-overline-2);
  }
  .typography-title-3 {
    font-size: var(--font-size-d-title-3);
  }
  @media (min-width: 64rem) {
    .typography-title-4 {
      font-size: var(--font-size-d-title-4);
    }
  }
  .typography-body-4-semibold {
    font-size: var(--font-size-d-body-4);
  }
}
.bg-background-tertiary,
.bg-background-tertiary\/60 {
  background-color: rgb(var(--neutral-40));
}
.mb-sm {
  margin-bottom: var(--spacing-sm);
}
/* Font */

.fw-normal {
  font-weight: var(--font-weight-normal);
}
.fw-medium {
  font-weight: var(--font-weight-medium);
}
.fw-bold {
  font-weight: var(--font-weight-bold);
}
.fw-black {
  font-weight: var(--font-weight-black);
}

/* Display */

.d-flex,
.flex {
  display: flex;
}
.d-grid {
  display: grid;
}
.d-block {
  display: block;
}
.d-none {
  display: none;
}
.d-inline {
  display: inline;
}

.flex-column,
flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-none {
  flex: none;
}

.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}

/* Gaps */

.gap-1 {
  gap: var(--spacing-1);
}
.gap-2 {
  gap: var(--spacing-2);
}
.gap-3 {
  gap: var(--spacing-3);
}
.gap-4 {
  gap: var(--spacing-4);
}

/* Marges */

.mt-1 {
  margin-top: var(--spacing-1);
}
.mt-2 {
  margin-top: var(--spacing-2);
}
.mt-3 {
  margin-top: var(--spacing-3);
}
.mt-4 {
  margin-top: var(--spacing-4);
}
.mt-5 {
  margin-top: var(--spacing-5);
}

@media (min-width: 64rem) {
  .md\:mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
}
.mb-1 {
  margin-bottom: var(--spacing-1);
}
.mb-2 {
  margin-bottom: var(--spacing-2);
}
.mb-3 {
  margin-bottom: var(--spacing-3);
}
.mb-4 {
  margin-bottom: var(--spacing-4);
}
.mb-5 {
  margin-bottom: var(--spacing-5);
}

/* Padding */

.p-1 {
  padding: var(--spacing-1);
}
.p-2 {
  padding: var(--spacing-2);
}
.p-3 {
  padding: var(--spacing-3);
}
.p-4 {
  padding: var(--spacing-4);
}
.pt-md {
  padding-top: var(--spacing-md);
}
.pb-0\.5 {
  padding-bottom: calc(var(--spacing) * 0.5);
}

.pt-0\.75 {
  padding-top: calc(var(--spacing) * 0.75);
}
.px-xs {
  padding-inline: var(--spacing-xs);
}
/* Largeurs */
.w-4 {
  width: calc(var(--spacing) * 4);
}
.h-4 {
  height: calc(var(--spacing) * 4);
}
.w-8 {
  width: calc(var(--spacing) * 8);
}
.h-8 {
  height: calc(var(--spacing) * 8);
}
.w-\[220px\] {
  width: 220px;
}
.grow-1 {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.min-w-0 {
  min-width: 0;
}
@media (min-width: 64rem) {
  .md\:w-\[293px\] {
    width: 293px;
  }
}
.w-100 {
  width: 100%;
}
.max-w-600 {
  max-width: 600px;
}
.max-w-800 {
  max-width: 800px;
}

/* Radius */

.rounded-sm {
  border-radius: var(--radius-sm);
}
.rounded-md {
  border-radius: var(--radius-md);
}
.rounded-lg {
  border-radius: var(--radius-lg);
}
.rounded-full {
  border-radius: var(--radius-full);
}

/* Ombres */

.shadow-sm {
  box-shadow: var(--shadow-sm);
}
.shadow-md {
  box-shadow: var(--shadow-md);
}

/* Background */

.bg-white {
  background: white;
}
.bg-alt {
  background: var(--color-background-alt);
}
.bg-primary {
  background: var(--color-primary);
}
.bg-secondary {
  background: var(--color-secondary);
}

.animate-reveal-text-vertical {
  animation: var(--animate-reveal-text-vertical);
}

/* Responsive */

@media (max-width: 767px) {
  .hidden-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden-desktop {
    display: none !important;
  }
}

/* Alignements complémentaires */

.mx-auto {
  margin-inline: auto;
}

.mb-0 {
  margin-bottom: 0;
}
.top-0 {
  top: 0;
}
.bottom-0 {
  bottom: 0;
}
.left-0 {
  left: 0;
}
.right-0 {
  right: 0;
}
.justify-end {
  justify-content: flex-end;
}

.items-start {
  align-items: flex-start;
}
.self-stretch {
  align-self: stretch;
}

/* grid */
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.gap-y-2xl {
  row-gap: var(--spacing-2);
}
.gap-x-md {
  column-gap: var(--spacing-md);
}
.gap-md {
  gap: var(--spacing-md);
}
.gap-sm {
  gap: var(--spacing-sm);
}
.gap-xs {
  gap: var(--spacing-xs);
}
.gap-lg {
  gap: var(--spacing-lg);
}

.gap-x-2 {
  column-gap: calc(var(--spacing) * 2);
}

.gap-x-2xl {
  column-gap: var(--spacing-2xl);
}

.gap-x-5xl {
  column-gap: var(--spacing-5xl);
}

.gap-x-lg {
  column-gap: var(--spacing-lg);
}

.gap-x-md {
  column-gap: var(--spacing-md);
}
.col-span-12 {
  grid-column: span 12 / span 12;
}
.col-span-6 {
  grid-column: span 6 / span 6;
}
.p-lg {
  padding: var(--spacing-lg);
}

@media (min-width: 80rem) {
  .lg\:p-xl {
    padding: var(--spacing-xl);
  }
}
@media (min-width: 64rem) {
  .md\:gap-2xl {
    gap: var(--spacing-2xl);
  }
  .md\:gap-x-2xl {
    column-gap: var(--spacing-2xl);
  }
  .md\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .md\:sticky {
    position: sticky;
  }
  .md\:p-2xl {
    padding: var(--spacing-2xl);
  }
}
.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inset-0 {
  inset: calc(var(--spacing) * 0);
}
.opacity-0 {
  opacity: 0;
}
.animate-fade-in {
  animation: var(--animate-fade-in);
}
.animate-slide-in-fade-up {
  animation: var(--animate-slide-in-fade-up);
}
.animate-image-scale-in {
  animation: var(--animate-image-scale-in);
}

.object-cover {
  object-fit: cover;
}
.overflow-hidden {
  overflow: hidden;
}

.aspect-square {
  aspect-ratio: 1;
}

.ease-standard {
  --tw-ease: var(--ease-standard);
  animation-timing-function: cubic-bezier(0.3, 0, 0, 1);
  transition-timing-function: var(--ease-standard);
}
.ease-in {
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  --tw-ease: var(--ease-in);
  transition-timing-function: var(--ease-in);
}
.duration-300 {
  animation-duration: 0.3s;
  --tw-duration: 0.3s;
  transition-duration: 0.3s;
}
.duration-medium-1 {
  --tw-duration: var(--duration-medium-1);
  transition-duration: var(--duration-medium-1);
  animation-duration: var(--duration-medium-1);
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(
    --tw-ease,
    var(--default-transition-timing-function)
  );
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.scale-100 {
  --tw-scale-x: 100%;
  --tw-scale-y: 100%;
  --tw-scale-z: 100%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.h-5 {
  height: calc(var(--spacing) * 5);
}

@media (hover: hover) {
  .group-hover\:scale-105:is(:where(.group):hover *) {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
}
@media (hover: hover) {
  .hover\:scale-110:hover {
    scale: 110% 110%;
  }
}
@media (min-width: 64rem) {
  @media (hover: hover) {
    .md\:hover\:scale-110:hover {
      scale: 110% 110%;
    }
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes image-scale-in {
  0% {
    transform: scale(1.1) translate(-25px, -25px);
  }
  20% {
    transform: scale(1.1) translate(-25px, -25px);
  }
  100% {
    transform: scale(1) translate(0);
  }
}

@keyframes slide-in-fade-up {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  30% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}