/* =========================================================
   CONSENT — BASE
========================================================= */

.cookie-consent,
.cookie-consent * {
  box-sizing: border-box;
}

.cookie-consent {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 9999;

  width: 100%;

  padding: 1.25rem 1.5rem;

  background: rgba(255, 255, 255, 0.96);

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  border-top: 1px solid rgba(0, 0, 0, 0.18);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}


/* =========================================================
   CONSENT — OPEN STATE
========================================================= */

.cookie-consent.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* =========================================================
   CONSENT — INNER
========================================================= */

.cookie-consent_inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: end;

  gap: 1.5rem 3rem;

  width: 100%;
}


/* =========================================================
   CONSENT — CONTENT
========================================================= */

.cookie-consent_content {
  display: flex;
  flex-direction: column;

  gap: 0.35rem;

  min-width: 0;
}

.cookie-consent_title {
  font-family: var(--_typographie-principale---font-family);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
}

.cookie-consent_text {
  max-width: 58rem;

  font-family: var(--_typographie-principale---font-family);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.45;

  opacity: 0.65;
}


/* =========================================================
   CONSENT — BUTTON
========================================================= */

.cookie-consent_button {
  appearance: none;
  -webkit-appearance: none;

  position: relative;

  display: inline-block;

  margin: 0;
  padding: 0 0 0.25rem;

  border: 0;
  border-radius: 0;

  background: transparent;
  color: #000;

  font-family: var(--_typographie-principale---font-family);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.2;

  cursor: pointer;
}

.cookie-consent_button::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background: currentColor;

  transform: scaleX(1);
  transform-origin: left center;

  transition:
    transform 220ms ease,
    opacity 220ms ease;
}

@media (hover: hover) {
  .cookie-consent_button:hover::after {
    transform: scaleX(0.75);
    opacity: 0.55;
  }
}

.cookie-consent_button:focus,
.cookie-consent_button:focus-visible {
  outline: none;
}


/* =========================================================
   CONSENT — MOBILE
========================================================= */

@media screen and (max-width: 767px) {
  .cookie-consent {
    padding:
      1rem
      1rem
      calc(1rem + env(safe-area-inset-bottom));
  }

  .cookie-consent_inner {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 1rem;
  }

  .cookie-consent_text {
    max-width: none;
  }

  .cookie-consent_button {
    justify-self: end;
  }
}

/* =========================================================
   COOKIE PREFERENCES — BASE
========================================================= */

.cookie-preferences,
.cookie-preferences * {
  box-sizing: border-box;
}

.cookie-preferences {
  position: fixed;
  inset: 0;

  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 1.5rem;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.cookie-preferences.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* =========================================================
   COOKIE PREFERENCES — BACKDROP
========================================================= */

.cookie-preferences_backdrop {
  position: absolute;
  inset: 0;

  background: rgba(255, 255, 255, 0.62);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}


/* =========================================================
   COOKIE PREFERENCES — PANEL
========================================================= */

.cookie-preferences_panel {
  position: relative;

  z-index: 1;

  width: min(38rem, 100%);

  padding: 1.5rem;

  background: rgba(255, 255, 255, 0.97);

  border-top: 1px solid rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid rgba(0, 0, 0, 0.22);

  font-family: var(--_typographie-principale---font-family);
}


/* =========================================================
   COOKIE PREFERENCES — HEADER
========================================================= */

.cookie-preferences_header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 2rem;

  margin-bottom: 1.5rem;
}

.cookie-preferences_title {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
}

.cookie-preferences_close {
  appearance: none;
  -webkit-appearance: none;

  flex: 0 0 auto;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;

  color: #000;

  font: inherit;
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;
}

.cookie-preferences_close:focus,
.cookie-preferences_close:focus-visible {
  outline: none;
}


/* =========================================================
   COOKIE PREFERENCES — INTRO
========================================================= */

.cookie-preferences_intro {
  margin-bottom: 2rem;

  max-width: 30rem;

  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.45;

  opacity: 0.65;
}


/* =========================================================
   COOKIE PREFERENCES — LIST
========================================================= */

.cookie-preferences_list {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.cookie-preferences_item {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 1.5rem 3rem;

  padding: 1.25rem 0;

  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.cookie-preferences_item-content {
  min-width: 0;
}

.cookie-preferences_item-title {
  margin-bottom: 0.3rem;

  font-size: 1rem;
  font-weight: 400;
}

.cookie-preferences_item-text {
  max-width: 27rem;

  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.45;

  opacity: 0.6;
}

.cookie-preferences_required {
  white-space: nowrap;

  font-size: 0.82rem;
  font-weight: 300;

  opacity: 0.5;
}


/* =========================================================
   COOKIE PREFERENCES — NOTE
========================================================= */

.cookie-preferences_note {
  padding-top: 1rem;

  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.4;

  opacity: 0.45;
}


/* =========================================================
   COOKIE PREFERENCES — ACTIONS
========================================================= */

.cookie-preferences_actions {
  display: flex;
  justify-content: flex-end;

  margin-top: 2rem;
}

.cookie-preferences_save {
  appearance: none;
  -webkit-appearance: none;

  position: relative;

  margin: 0;
  padding: 0 0 0.25rem;

  border: 0;
  border-radius: 0;

  background: transparent;
  color: #000;

  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;

  cursor: pointer;
}

.cookie-preferences_save::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;

  background: currentColor;

  transform: scaleX(1);
  transform-origin: center;

  transition:
    transform 220ms ease,
    opacity 220ms ease;
}

@media (hover: hover) {
  .cookie-preferences_save:hover::after {
    transform: scaleX(0.75);
    opacity: 0.55;
  }
}

.cookie-preferences_save:focus,
.cookie-preferences_save:focus-visible {
  outline: none;
}


/* =========================================================
   COOKIE PREFERENCES — MOBILE
========================================================= */

@media screen and (max-width: 767px) {

  .cookie-preferences {
    align-items: flex-end;

    padding:
      1rem
      1rem
      calc(1rem + env(safe-area-inset-bottom));
  }

  .cookie-preferences_panel {
    width: 100%;

    padding: 1.25rem 0;
  }

  .cookie-preferences_item {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 0.75rem;
  }

  .cookie-preferences_required {
    justify-self: start;
  }
}