/* tarteaucitron, okcharlo palette overrides */
#tarteaucitronRoot,
#tarteaucitronRoot *,
#tarteaucitron {
  font-family: "Inter", 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;
  /* The lib defaults #tarteaucitronBack (overlay) to 2147483646 (max int - 1),
     so the panel must sit above that. Previous value 10001 left the panel
     stuck under its own backdrop, greying out every button. */
  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,
.tarteaucitronSelfLink {
  display: none !important;
}
/* PFC : l'icône flottante reste visible (seul accès au panneau), relevée
   au-dessus du lien Profil (sidebar desktop) et de la barre d'onglets mobile. */
#tarteaucitronIcon.tarteaucitronIconBottomLeft {
  bottom: 64px !important;
}
/* Hide redundant bottom "Fermer" button, top-right
   #tarteaucitronClosePanel (rendered by lib as the dialog close) is kept.
   Note: #tarteaucitronServices_analytic is the bucket GTM lives in after we
   reclassify its type from "api" to "analytic" (see consent.js). */
#tarteaucitron > #tarteaucitronCloseAlert,
#tarteaucitronServices_analytic ~ #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 warm */
#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.
   Hierarchy: Autoriser (filled indigo) is the saillant action, Interdire
   (ghost indigo) is the discreet counterpart, but neither is pre-coché:
   the user makes a conscious choice (CNIL OK). */
#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;
}

/* Per-service line: flip DOM order so Interdire renders LEFT (ghost indigo,
   discreet) and Autoriser renders RIGHT (filled indigo, saillant). The lib
   injects them in the reverse order (Allow first, Deny second, see
   tarteaucitron.js:1198-1201), so `order` on the .tarteaucitronAsk flex
   container children swaps them without touching the DOM. */
#tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
#tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronDeny {
  order: 1 !important;
}
#tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronAllow {
  order: 2 !important;
}

/* Per-service selection state, flip Allow/Deny fills based on which side
   is "active" on the service line. Default rules above paint Allow filled
   and Deny ghost regardless of state. Selecting Interdire on a line adds
   `tarteaucitronIsDenied` (via lib click handler); Autoriser adds
   `tarteaucitronIsAllowed`. Specificity
   `.tarteaucitronLine.tarteaucitronIs… .tarteaucitron…` outranks the bare
   `.tarteaucitronAllow` / `.tarteaucitronDeny` defaults. */
#tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied .tarteaucitronDeny,
#tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed .tarteaucitronAllow {
  background: #1F2BCC !important;
  color: #F5F1E9 !important;
  border-color: #1F2BCC !important;
}
#tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied .tarteaucitronAllow,
#tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed .tarteaucitronDeny {
  background: transparent !important;
  color: #1F2BCC !important;
  border-color: #1F2BCC !important;
}

/* ─────────────────────────────────────────────────────────────
   "Personnaliser" panel, UX refonte
   ─────────────────────────────────────────────────────────────
   Old hierarchy was inverted: [Tout accepter] [Non] in the header,
   #tarteaucitronSave full-width indigo in the footer. Save defaulted to
   "refuse all" if the user hadn't toggled anything = dark pattern.

   New layout (consent.js moves the DOM, CSS styles + reorders):
     - Header: only the X close icon (top-right)
     - Footer: [Enregistrer mes choix]  |  [Tout refuser] [Tout accepter]
       Enregistrer   = link-style discreet, LEFT (secondary action)
       Tout refuser  = ghost indigo, RIGHT (CNIL: equally prominent)
       Tout accepter = filled indigo, RIGHT (saillant, CNIL-friendly opt-in)

   Selectors are scoped under html body #tarteaucitron... to outrank
   the lib's own !important rules (specificity 0,1,3 vs 0,1,0).
   ───────────────────────────────────────────────────────────── */

/* Hide the original header CTA row.
   #tarteaucitronScrollbarAdjust is the .tarteaucitronAsk wrapper around the
   header's [Tout accepter] / [Tout refuser] buttons (tarteaucitron.js:610).
   The per-service .tarteaucitronAsk wrappers further down the list have NO
   id, so this selector is safely scoped to the header pair only. The buttons
   themselves are physically relocated to the footer by the `tac.open_panel`
   hook in consent.js, so hiding the wrapper is just removing the empty shell
   left behind (whitespace text nodes prevent :empty from matching). */
html body #tarteaucitron .tarteaucitronMainLine #tarteaucitronScrollbarAdjust {
  display: none !important;
}

/* Close button (top-right) → X icon.
   The lib renders it as <button>Fermer</button> at the top of #tarteaucitron
   (tarteaucitron.js:589-594). We swap the visible text for an SVG-equivalent
   "✕" glyph using a pseudo-element. Text is hidden via font-size:0 so
   screen readers still pick up the aria-label set by the lib. */
html body #tarteaucitron #tarteaucitronClosePanel {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  color: #4A4A4A !important;
  z-index: 2 !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
html body #tarteaucitron #tarteaucitronClosePanel::before {
  content: "\2715" !important; /* ✕ */
  font-size: 18px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}
html body #tarteaucitron #tarteaucitronClosePanel:hover {
  background: rgba(12, 15, 15, 0.04) !important;
  color: #0C0F0F !important;
  border-color: rgba(12, 15, 15, 0.08) !important;
}
html body #tarteaucitron #tarteaucitronClosePanel:focus-visible {
  outline: 2px solid #1F2BCC !important;
  outline-offset: 2px !important;
}

/* Footer, flex row hosting Enregistrer (left, secondary) / Tout refuser /
   Tout accepter (right pair, equally prominent). justify-content:
   space-between pushes Save to the left edge and lets the trailing pair sit
   right. Background/border resets cancel the previous filled-indigo box
   styling that targeted this wrapper (now a layout container). */
html body #tarteaucitron #tarteaucitronSave {
  background: transparent !important;
  color: inherit !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 20px 0 4px !important;
  margin-top: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

/* The three footer buttons share base sizing. Selectors are written
   loose enough to also catch the JS-moved header buttons once they
   land inside #tarteaucitronSave. */
html body #tarteaucitron #tarteaucitronSave > button,
html body #tarteaucitron #tarteaucitronSave > #tarteaucitronAllAllowed,
html body #tarteaucitron #tarteaucitronSave > #tarteaucitronAllDenied {
  padding: 10px 18px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  text-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Order: [Enregistrer mes choix] (left, secondary) | [Tout refuser]
   [Tout accepter] (right, equally prominent pair). Save sits at order 1
   pinned left by space-between; margin-left: auto on Tout refuser pushes
   the trailing pair to the right edge and keeps an 8px gap between them. */
html body #tarteaucitron #tarteaucitronSave > #tarteaucitronSaveButton {
  order: 1 !important;
}
html body #tarteaucitron #tarteaucitronSave > #tarteaucitronAllDenied {
  order: 2 !important;
  margin-left: auto !important;
}
html body #tarteaucitron #tarteaucitronSave > #tarteaucitronAllAllowed {
  order: 3 !important;
}

/* CNIL-compliant pairing, Tout refuser + Tout accepter same dimensions.
   The lib injects .tarteaucitronCheck / .tarteaucitronCross spans inside;
   we already hide them in the banner, repeat for the panel buttons so the
   buttons stay text-only at matching heights. */
html body #tarteaucitron #tarteaucitronSave > #tarteaucitronAllAllowed .tarteaucitronCheck,
html body #tarteaucitron #tarteaucitronSave > #tarteaucitronAllDenied .tarteaucitronCross {
  display: none !important;
}

/* Tout accepter, filled indigo (dominant action, encourages opt-in) */
html body #tarteaucitron #tarteaucitronSave > #tarteaucitronAllAllowed {
  background: #1F2BCC !important;
  color: #F5F1E9 !important;
  border: 1px solid #1F2BCC !important;
}
html body #tarteaucitron #tarteaucitronSave > #tarteaucitronAllAllowed:hover {
  background: #1822A8 !important;
  border-color: #1822A8 !important;
}

/* Tout refuser, ghost indigo, SAME footprint as Tout accepter */
html body #tarteaucitron #tarteaucitronSave > #tarteaucitronAllDenied {
  background: transparent !important;
  color: #1F2BCC !important;
  border: 1px solid #1F2BCC !important;
}
html body #tarteaucitron #tarteaucitronSave > #tarteaucitronAllDenied:hover {
  background: rgba(31, 43, 204, 0.08) !important;
  color: #2D3AE5 !important;
  border-color: #2D3AE5 !important;
}

/* Enregistrer mes choix, secondary action, smaller + ghost grey.
   This is the button for the user who already toggled individual services
   and wants to save their custom selection, discrete on purpose so it
   doesn't compete with Tout accepter / Tout refuser. */
html body #tarteaucitron #tarteaucitronSave > #tarteaucitronSaveButton {
  background: transparent !important;
  color: #4A4A4A !important;
  border: 1px solid transparent !important;
  padding: 8px 10px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-color: rgba(74, 74, 74, 0.4) !important;
}
html body #tarteaucitron #tarteaucitronSave > #tarteaucitronSaveButton:hover {
  color: #0C0F0F !important;
  text-decoration-color: #0C0F0F !important;
}

/* Mobile, footer stacks. Save button stays narrow + centered under the
   accept/deny pair. */
@media (max-width: 480px) {
  html body #tarteaucitron #tarteaucitronSave {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  html body #tarteaucitron #tarteaucitronSave > #tarteaucitronAllAllowed,
  html body #tarteaucitron #tarteaucitronSave > #tarteaucitronAllDenied {
    width: 100% !important;
    margin: 0 !important;
  }
  html body #tarteaucitron #tarteaucitronSave > #tarteaucitronAllDenied {
    order: 2 !important; /* keep refuse below the dominant accept on mobile */
  }
  html body #tarteaucitron #tarteaucitronSave > #tarteaucitronAllAllowed {
    order: 1 !important;
  }
  html body #tarteaucitron #tarteaucitronSave > #tarteaucitronSaveButton {
    order: 3 !important;
    align-self: center !important;
    margin-top: 4px !important;
  }
}