/**
 * Tarteaucitron, themed over its own stylesheet (tarteaucitron.min.css): the
 * acceptance banner and the management panel take the theme colors, fonts and
 * the shape of its .btn buttons. Most properties need !important, as the library
 * sets them so. Its JS shows and hides the banner through an inline display:
 * the banner's display is never set here.
 */

/* Fonts: Inter everywhere, Sora for titles and buttons (as .btn). */
#tarteaucitronRoot {
  font-family: var(--tz-font-body);

  button,
  .tarteaucitronH1,
  .tarteaucitronH3,
  #tarteaucitronMainLineOffset .tarteaucitronName {
    font-family: var(--tz-font-heading) !important;
  }
}

/* ---- Acceptance banner ---- */
/* On the container's width, as the header and the leaderboard banner. */
#tarteaucitronRoot #tarteaucitronAlertBig {
  box-sizing: border-box;
  width: 100% !important;
  padding: 2rem max(var(--space-gutter), calc((100% - 1360px) / 2 + var(--space-gutter))) !important;
  font-size: var(--fs-base) !important;
  text-align: left !important;
  background: var(--bs-body-color) !important;

  #tarteaucitronDisclaimerAlert {
    display: block;
    width: 100%;
    max-width: 62rem;
    padding: 0 !important;
    margin: 0 0 1.25rem !important;
    font-family: var(--tz-font-body) !important;
    font-size: var(--fs-base) !important;
    line-height: 1.6;
    color: #fff;

    p {
      color: #fff;
    }

    a {
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  /* Accept: filled, as .btn-primary. Decline, Personalize: light outline, as
     .btn-outline-light on the site's dark sections. */
  /* border-box: the library sets box-sizing: initial on all its elements,
     so a full-width button (Small devices) would overflow by its padding. */
  button {
    display: inline-block;
    box-sizing: border-box;
    margin: 0 0.75rem 0.75rem 0 !important;
    padding: 0.875rem 1.5rem !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    border-radius: var(--bs-border-radius) !important;
    background: transparent !important;
    font-size: 0.875rem !important;
    font-weight: 600;
    line-height: 1.2 !important;
    color: #fff !important;
    text-decoration: none;
    transition: background-color .15s, border-color .15s;

    &:hover {
      border-color: #fff !important;
    }
  }

  button#tarteaucitronPersonalize2 {
    border-color: var(--bs-primary) !important;
    background: var(--bs-primary) !important;

    &:hover {
      border-color: var(--bs-primary-text-emphasis) !important;
      background: var(--bs-primary-text-emphasis) !important;
    }
  }
}

/* ---- Management panel ---- */
#tarteaucitron {
  .tarteaucitronH1 {
    font-size: var(--fs-h4) !important;
    font-weight: 600;
  }

  .tarteaucitronH3 {
    font-weight: 600;
  }

  #tarteaucitronMainLineOffset .tarteaucitronName {
    font-weight: 600;
  }

  /* Category toggles ("+ Mandatory cookies"): as the .overline labels. */
  #tarteaucitronServices .tarteaucitronTitle button,
  .asCatToggleBtn {
    font-family: var(--tz-font-overline) !important;
    font-size: var(--fs-xs) !important;
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }

  #tarteaucitronServices .tarteaucitronMainLine,
  #tarteaucitronServices .tarteaucitronMainLine:hover,
  #tarteaucitronInfo,
  #tarteaucitronServices .tarteaucitronTitle button {
    background-color: var(--bs-body-color) !important;
  }

  #tarteaucitronInfo {
    text-align: left !important;

    p {
      color: #fff !important;
    }
  }

  #tarteaucitronServices {
    border-radius: 0;

    .tarteaucitronLine {
      background: var(--bs-secondary-bg);

      &:hover {
        background: var(--bs-border-color);
      }
    }

    /* Service description, shown on click (showDetailsOnClick). */
    .tarteaucitronTitle + [id^="tarteaucitronDetails"] {
      display: none;
      position: absolute;
      z-index: 2147483647;
      max-width: 270px;
      margin-top: 0;
      padding: 20px;
      font-size: var(--fs-xs);
      font-weight: 500;
      color: #fff;
      background: var(--bs-body-color);
    }
  }
}

/* Check and cross icons of the library: plain text buttons. */
#tarteaucitronRoot .tarteaucitronCheck,
#tarteaucitronRoot .tarteaucitronCross {
  display: none !important;
}

/* Panel buttons, as .btn. A choice reads at a glance: unselected = outlined
   (the only state reacting to hover), selected = filled (Allow: primary,
   Deny: dark on the light service lines, white on the dark line). The library
   marks "all services" choices with .tarteaucitronIsSelected only when every
   service has that answer; when mixed, both stay outlined. */
#tarteaucitron {
  button.tarteaucitronAllow,
  button.tarteaucitronDeny,
  #tarteaucitronClosePanel,
  #tarteaucitronSaveButton {
    margin-left: 0.5rem;
    padding: 0.5rem 1rem !important;
    border: 1px solid var(--tz-border-2) !important;
    border-radius: var(--bs-border-radius) !important;
    background: transparent !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--bs-body-color) !important;
    opacity: 1 !important;
    transition: background-color .15s, border-color .15s, color .15s;
  }

  /* Unselected choice, light service lines. */
  .tarteaucitronLine:not(.tarteaucitronIsAllowed) button.tarteaucitronAllow:hover,
  .tarteaucitronLine:not(.tarteaucitronIsDenied) button.tarteaucitronDeny:hover {
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
  }

  /* Dark parts: "Preference for all services" line, Close. */
  #tarteaucitronMainLineOffset button,
  #tarteaucitronClosePanel {
    border-color: rgba(255, 255, 255, .4) !important;
    color: #fff !important;
  }

  #tarteaucitronMainLineOffset button:not(.tarteaucitronIsSelected):hover,
  #tarteaucitronClosePanel:hover {
    border-color: #fff !important;
    color: #fff !important;
  }

  /* Selected Allow, Save: filled primary. */
  #tarteaucitronAllAllowed.tarteaucitronIsSelected,
  .tarteaucitronLine.tarteaucitronIsAllowed button.tarteaucitronAllow,
  #tarteaucitronServices_mandatory .tarteaucitronLine button.tarteaucitronAllow,
  #tarteaucitronSaveButton {
    border-color: var(--bs-primary) !important;
    background: var(--bs-primary) !important;
    color: #fff !important;
  }

  #tarteaucitronSaveButton {
    padding: 0.875rem 1.5rem !important;

    &:hover {
      border-color: var(--bs-primary-text-emphasis) !important;
      background: var(--bs-primary-text-emphasis) !important;
    }
  }

  /* Selected Deny: dark on the light service lines, white on the dark line. */
  .tarteaucitronLine.tarteaucitronIsDenied button.tarteaucitronDeny {
    border-color: var(--bs-body-color) !important;
    background: var(--bs-body-color) !important;
    color: #fff !important;
  }

  #tarteaucitronAllDenied.tarteaucitronIsSelected {
    border-color: #fff !important;
    background: #fff !important;
    color: var(--bs-body-color) !important;
  }

  /* The Close tab sits on top of the panel, flush right. */
  #tarteaucitronClosePanel {
    right: 0 !important;
    width: auto;
    padding: 0.375rem 0.875rem !important;
    border-bottom: 0 !important;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
    font-size: var(--fs-xs) !important;
    background: var(--bs-body-color) !important;
  }
}

/* White text on the panel's dark parts. */
#tarteaucitronRoot .tarteaucitronH1,
#tarteaucitronRoot .tarteaucitronH2,
#tarteaucitron #tarteaucitronInfo,
#tarteaucitron #tarteaucitronServices .tarteaucitronDetails,
#tarteaucitron #tarteaucitronServices .tarteaucitronTitle button,
#tarteaucitronRoot .asCatToggleBtn,
#tarteaucitronRoot .tarteaucitronPlus::before,
#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronClosePanelCookie {
  color: #fff !important;
}

#tarteaucitronRoot .tarteaucitronStatusInfo {
  display: block;
}

html body #tarteaucitronRoot div#tarteaucitronSave {
  background: var(--bs-body-color);
}

/* No floating cookie icon (showIcon is off). */
.tarteaucitronSelfLink {
  display: none !important;
}

/* ---- Service placeholders (hCaptcha before consent) ---- */
.tac_activate {
  width: auto !important;
  margin: unset !important;
  font-size: 1em !important;
  text-align: unset !important;
  background: unset !important;
}

.h-captcha .tac_activate {
  color: black !important;
}

.tac_float {
  text-align: unset !important;

  button {
    min-width: 150px !important;
    margin-left: 1em;
    padding: 1em 2em !important;
    border: 1px solid var(--bs-primary) !important;
    border-radius: var(--bs-border-radius) !important;
    font-size: 0.875rem !important;
    font-weight: 600;
    background-color: var(--bs-primary) !important;

    &::after {
      content: unset !important;
    }
  }
}

/* hCaptcha is required (needConsent: false, tarteaucitron.init.js): no
   choice is offered. Its buttons stay in the DOM, the init script answers
   through #hcaptchaAllowed. The ids outweigh the panel button rules. */
#tarteaucitron #tarteaucitronServices button#hcaptchaAllowed,
#tarteaucitron #tarteaucitronServices button#hcaptchaDenied {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---- Small devices ---- */
@media (max-width: 575.98px) {
  /* Stacked full-width buttons rather than ragged widths. */
  #tarteaucitronRoot #tarteaucitronAlertBig button {
    display: block;
    width: 100%;
    margin: 0 0 0.75rem !important;
  }
}