/* tarteaucitron — okcharlo palette overrides */
#tarteaucitronRoot,
#tarteaucitronRoot *,
#tarteaucitron {
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Suppress initial banner on pages where the user must read before
   consenting (e.g. /politique-confidentialite). The "Personnaliser" panel
   still opens via the footer button — only the auto-shown alertBig and its
   Sheet overlay are hidden. The class is set by consent.js based on
   window.location.pathname. */
html.tac-suppress-initial-banner #tarteaucitronAlertBig,
html.tac-suppress-initial-banner #tarteaucitronRoot.tarteaucitronBeforeVisible::before {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   Consent modal — centered popup with hero image + okcharlo tokens
   ─────────────────────────────────────────────────────────────
   Two overlay states (the lib toggles these classes itself):
   1. .tarteaucitronBeforeVisible on #tarteaucitronRoot → consent modal shown
   2. body.tarteaucitron-modal-open → "Personnaliser" settings panel open
   The pseudo is removed automatically when the user accepts/refuses/saves. */

/* Sheet-pattern overlay — light + blur. Lighter than Dialog (5% black + 4px
   blur) since the modal already commands attention via centered layout +
   hero image. */
html div#tarteaucitronRoot.tarteaucitronBeforeVisible::before {
  content: " " !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(12, 15, 15, 0.05) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  opacity: 1 !important;
  z-index: 9998 !important;
  pointer-events: auto !important;
}

/* "Personnaliser" settings panel keeps the strong dark backdrop —
   it's a focused destination, deliberate full-stop interaction. */
html body.tarteaucitron-modal-open div#tarteaucitronRoot::before {
  content: " " !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(12, 15, 15, 0.7) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  z-index: 9998 !important;
  pointer-events: auto !important;
}

/* Backdrop click-to-close: dark sheet that covers the page when the
   settings panel opens. The lib renders a "Fermer" label on this button
   that visually duplicates the panel's own close button — hide the text
   (and any background image variants) while keeping the button clickable.
   z-index: tarteaucitron.css (vendored) sets this to 2147483646, which
   buries the panel underneath its own backdrop — we pin our stack with
   panel (2147483647) > backdrop (2147483645) > initial alertBig modal
   (2147483644). */
#tarteaucitronRoot button#tarteaucitronBack {
  background: rgba(12, 15, 15, 0.7) !important;
  background-image: none !important;
  opacity: 1 !important;
  font-size: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  z-index: 2147483645 !important;
}

/* Centered modal — okcharlo tokens (creme bg, noir fg, indigo primary).
   The lib applies class `tarteaucitronAlertBigMiddle` on the popup.
   Layout strategy: column flex. Hero image at top (::before), then the
   disclaimer text, then a single CTA row anchored at bottom. */
#tarteaucitronAlertBig {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: calc(100vw - 32px) !important;
  max-width: 512px !important;
  background: #F5F1E9 !important;
  color: #0C0F0F !important;
  border: 1px solid #DDD5C5 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 2147483644 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  max-height: calc(100vh - 32px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

/* Hero image — donkey + cookie. WebP with PNG fallback (multi-bg trick:
   browser uses the first one it can decode). order: -1 keeps it on top
   regardless of source order. */
#tarteaucitronAlertBig::before {
  content: "" !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 200px !important;
  background-image: url('/assets/cookie-donkey.webp'), url('/assets/cookie-donkey.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  order: -1 !important;
  margin: 0 !important;
}

/* Disclaimer text — full-width row. 24px horizontal padding ensures the
   text never butts against the modal edge. */
#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
  flex: 0 0 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 24px 24px 16px !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #4A4A4A !important;
}
#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong {
  color: #0C0F0F !important;
  font-weight: 600 !important;
}

/* Privacy link inside the disclaimer + standalone privacy buttons */
#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert a,
#tarteaucitronPrivacyUrlDialog {
  color: #1F2BCC !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-weight: 400 !important;
}
#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert a:hover,
#tarteaucitronPrivacyUrlDialog:hover {
  color: #2D3AE5 !important;
  text-decoration-thickness: 2px !important;
}

/* In the `highPrivacy + AcceptAllCta` branch (tarteaucitron.js:731) the lib
   renders these IDs inside #tarteaucitronAlertBig:
     - #tarteaucitronPersonalize2 → "OK pour moi" (Accept All)
     - #tarteaucitronAllDenied2   → "Non" (Deny All)
     - #tarteaucitronCloseAlert   → "Personnaliser" (opens settings panel)
     - #tarteaucitronPrivacyUrl   → privacy link (rendered inline in disclaimer instead)
   The lib also injects .tarteaucitronCheck / .tarteaucitronCross spans inside
   Accept/Deny — default lib CSS renders them as colored squares we don't want. */
#tarteaucitronAlertBig #tarteaucitronPrivacyUrl,
#tarteaucitronAlertBig .tarteaucitronCheck,
#tarteaucitronAlertBig .tarteaucitronCross {
  display: none !important;
}

/* CTA row — Non | Personnaliser | OK pour moi.
   `margin-right: auto` on Non pushes the trailing pair right. */
#tarteaucitronAlertBig #tarteaucitronAllDenied2,
#tarteaucitronAlertBig #tarteaucitronCloseAlert,
#tarteaucitronAlertBig #tarteaucitronPersonalize2 {
  padding: 10px 18px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  margin: 0 0 24px 0 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  text-shadow: none !important;
}

#tarteaucitronAlertBig #tarteaucitronAllDenied2 {
  order: 1 !important;
  margin-left: 24px !important;
  margin-right: auto !important;
}
#tarteaucitronAlertBig #tarteaucitronCloseAlert {
  order: 2 !important;
  margin-left: 8px !important;
}
#tarteaucitronAlertBig #tarteaucitronPersonalize2 {
  order: 3 !important;
  margin-left: 8px !important;
  margin-right: 24px !important;
}

/* Ghost indigo — Non + Personnaliser */
#tarteaucitronAlertBig #tarteaucitronAllDenied2,
#tarteaucitronAlertBig #tarteaucitronCloseAlert {
  background: transparent !important;
  color: #1F2BCC !important;
  border: 1px solid #1F2BCC !important;
}
#tarteaucitronAlertBig #tarteaucitronAllDenied2:hover,
#tarteaucitronAlertBig #tarteaucitronCloseAlert:hover {
  background: rgba(31, 43, 204, 0.08) !important;
  color: #2D3AE5 !important;
  border-color: #2D3AE5 !important;
}

/* Filled indigo — primary CTA (OK pour moi) */
#tarteaucitronAlertBig #tarteaucitronPersonalize2 {
  background: #1F2BCC !important;
  color: #F5F1E9 !important;
  border: 1px solid #1F2BCC !important;
}
#tarteaucitronAlertBig #tarteaucitronPersonalize2:hover {
  background: #1822A8 !important;
  border-color: #1822A8 !important;
}

/* Hide tarteaucitron modal completely once consent has been given/refused.
   Without this, #tarteaucitronAlertBig stays in the DOM near the top of
   our z-index stack and intercepts clicks on overlapping modals. */
#tarteaucitronRoot:not(.tarteaucitronBeforeVisible) #tarteaucitronAlertBig {
  display: none !important;
}

/* Mobile — image shorter, CTAs stack full-width */
@media (max-width: 480px) {
  #tarteaucitronAlertBig::before {
    height: 140px !important;
  }
  #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
    padding: 20px 20px 12px !important;
    font-size: 13px !important;
  }
  #tarteaucitronAlertBig #tarteaucitronAllDenied2,
  #tarteaucitronAlertBig #tarteaucitronCloseAlert,
  #tarteaucitronAlertBig #tarteaucitronPersonalize2 {
    flex: 0 0 calc(100% - 40px) !important;
    margin: 0 20px 8px !important;
    text-align: center !important;
  }
  #tarteaucitronAlertBig #tarteaucitronPersonalize2 {
    margin-bottom: 20px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   "Personnaliser" settings panel — polish
   ───────────────────────────────────────────────────────────── */

/* Outer panel container — creme card, soft 8px corners, centered */
#tarteaucitron {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(640px, calc(100vw - 32px)) !important;
  max-width: 640px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  background: #F5F1E9 !important;
  color: #0C0F0F !important;
  border-radius: 8px !important;
  padding: 32px 40px !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2) !important;
  z-index: 2147483647 !important;
}

/* Hide tarteaucitron branding (yellow "TARTE AU CITRON" credit + floating
   lock icon). Note: keep .tarteaucitronCross — it's the X icon used in
   Allow/Deny buttons throughout the panel, NOT a close button. */
.tarteaucitronCredits,
#tarteaucitronInfoBox a[href*="tarteaucitron"],
#tarteaucitronInfoBox img,
#tarteaucitronInfoBox .tarteaucitronH3,
.tarteaucitronCustomCredit,
#tarteaucitronInfoBox span:last-child,
#tarteaucitronIcon,
.tarteaucitronSelfLink {
  display: none !important;
}
/* Hide redundant bottom "Fermer" button — top-right
   #tarteaucitronClosePanel (rendered by lib as the dialog close) is kept. */
#tarteaucitron > #tarteaucitronCloseAlert,
#tarteaucitronServices_api ~ #tarteaucitronCloseAlert,
#tarteaucitronClosePanelCookie {
  display: none !important;
}

/* Headings inside the panel */
#tarteaucitron .tarteaucitronH1,
#tarteaucitron .tarteaucitronH2,
#tarteaucitron .tarteaucitronH3,
#tarteaucitron .tarteaucitronH4 {
  color: #0C0F0F !important;
}

/* Privacy link inside the panel — indigo, underlined */
#tarteaucitron a[href*="politique-confidentialite"],
#tarteaucitronPrivacyUrlDialog {
  color: #1F2BCC !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-weight: 400 !important;
}

/* "Service" title rows — replace heavy dark badges with light pill */
#tarteaucitronServices .tarteaucitronTitle,
.tarteaucitronTitle {
  background: transparent !important;
  border: 1px solid #DDD5C5 !important;
  border-radius: 4px !important;
  color: #0C0F0F !important;
  padding: 10px 14px !important;
}
#tarteaucitronServices .tarteaucitronTitle button,
.tarteaucitronTitle button {
  background: transparent !important;
  color: #0C0F0F !important;
  font-weight: 500 !important;
  border: none !important;
  padding: 0 !important;
}

/* Mandatory cookies row — warm creme fill + same corners */
#tarteaucitronServices .tarteaucitronMainLine {
  background: #EDE7DA !important;
  color: #0C0F0F !important;
  border: 1px solid #DDD5C5 !important;
  border-radius: 4px !important;
  padding: 10px 14px !important;
}

/* "More info" / "Voir le site officiel" small inline links — muted */
#tarteaucitronServices .tarteaucitronListCookies,
#tarteaucitronServices a.tarteaucitronSelfLink,
#tarteaucitronServices a[href*="tarteaucitron"]:not([href*="politique-confidentialite"]),
#tarteaucitronServices .tarteaucitronReadmoreSeparator,
#tarteaucitron a.tarteaucitronSelfLink {
  color: #7A7770 !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  font-size: 12px !important;
}
#tarteaucitronServices a.tarteaucitronSelfLink:hover,
#tarteaucitron a.tarteaucitronSelfLink:hover {
  color: #3D3B36 !important;
  text-decoration: underline !important;
}

/* Per-service Allow / Deny buttons inside the modal — 4px radius,
   filled indigo vs ghost indigo, mirror modal CTA pattern */
#tarteaucitronAllAllowed,
#tarteaucitronAllAllowedAlert,
.tarteaucitronAllow {
  background: #1F2BCC !important;
  color: #F5F1E9 !important;
  border: 1px solid #1F2BCC !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
}
#tarteaucitronAllAllowed:hover,
#tarteaucitronAllAllowedAlert:hover,
.tarteaucitronAllow:hover {
  background: #1822A8 !important;
  border-color: #1822A8 !important;
}

#tarteaucitronAllDenied,
#tarteaucitronAllDeniedAlert,
.tarteaucitronDeny {
  background: transparent !important;
  color: #1F2BCC !important;
  border: 1px solid #1F2BCC !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
}
#tarteaucitronAllDenied:hover,
#tarteaucitronAllDeniedAlert:hover,
.tarteaucitronDeny:hover {
  background: rgba(31, 43, 204, 0.08) !important;
  color: #2D3AE5 !important;
  border-color: #2D3AE5 !important;
}

/* Hide the native checkboxes inside Allow/Deny labels — visual state
   comes from the button fill itself */
.tarteaucitronAllow input,
.tarteaucitronDeny input,
#tarteaucitronAllAllowed input,
#tarteaucitronAllDenied input {
  display: none !important;
}

/* "Enregistrer" — primary save action, matches Accept All */
#tarteaucitronSave,
.tarteaucitronSave,
button.tarteaucitronSave {
  background: #1F2BCC !important;
  color: #F5F1E9 !important;
  border: 1px solid #1F2BCC !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  padding: 11px 20px !important;
}
#tarteaucitronSave:hover,
.tarteaucitronSave:hover,
button.tarteaucitronSave:hover {
  background: #1822A8 !important;
  border-color: #1822A8 !important;
}