/**
 * Editorial restyle of the Complianz consent banner — dark asymmetric header
 * (site mark + italic serif headline) over a paper body, quieter category
 * rows, brand typography.
 *
 * The header reuses the footer's dark pair (--ag-deep-navy / --ag-cream); the
 * body stays on paper. The brand mark is a data-URI SVG, so its fill can't
 * read a CSS token — the literal #f4eee0 in the base64 below *is* --ag-cream
 * and has to be re-encoded by hand if that token ever moves.
 *
 * Complianz renders every banner class/id from its own generated stylesheet
 * (wp-content/uploads/complianz/css/banner-*.css), which is unlayered and
 * loads without a predictable order relative to this file — the !important
 * flags below are the same escape hatch style.css already uses against
 * WordPress's own unlayered theme.json button styles (see DESIGN.md).
 *
 * `.cmplz-logo` and `.cmplz-close` are intentionally left hidden/untouched:
 * Complianz's generated CSS forces `.cmplz-logo{display:none}` because no
 * {logo} content is configured, and `.cmplz-close{display:none}` is this
 * site's deliberate CNIL-aligned choice (no ambiguous "X closes without a
 * choice" affordance — only the two equal-weight Accept/Refuse buttons and
 * Paramétrer). We repurpose `.cmplz-logo` as a static brand-mark vignette
 * instead of reintroducing a close icon.
 */

/* Dark band, same pair as the site footer (--ag-deep-navy / --ag-cream).
   The negative margins are the banner's own padding (15px 20px, set by
   Complianz's generated stylesheet) turned inside out, so the band bleeds to
   the banner edges instead of floating inside them; the top radius therefore
   has to be repeated here or the navy would square off the two rounded
   corners it now covers. */
.cmplz-cookiebanner .cmplz-header {
  display: flex !important;
  grid-template-columns: unset !important;
  gap: var(--ag-space-sm, 16px);
  align-items: center;

  margin: -15px -20px 0;
  padding: 20px;
  border-radius: var(--ag-radius-md, 4px) var(--ag-radius-md, 4px) 0 0;

  background: var(--ag-deep-navy, #101a2a);
  box-shadow: var(--ag-shadow-md, 0 14px 32px rgb(0 0 0 / 12%));
}

/* Landscape phones (height <= 400px): Complianz shrinks its own padding to
   7px/12px !important and caps the header at 10px, so the band — whose negative
   margins mirror the standard 15px/20px padding — spilled outside the box and
   the title rode over it. Realign on the reduced padding and give the band its
   height back.

   `align-self: start` is what keeps that height honest. Above 768px wide the
   banner is also `display: grid; grid-template-rows: minmax(0, 1fr)`, and the
   header is its first child — so on a landscape phone, where the banner gets a
   fixed height, the header inherited the 1fr row and swallowed every spare
   pixel (220px of band around 26px of title). Complianz's 10px cap hid that by
   crushing it; lifting the cap without this would just uncrush it.

   The selector carries .cmplz-show purely for specificity: Complianz's rule is
   also (0,2,0) AND also !important, and its stylesheet loads after this one, so
   an equally specific !important would lose the tie. */
@media (height <= 400px) {
  .cmplz-cookiebanner.cmplz-show .cmplz-header {
    align-self: start;
    max-height: none !important;
    margin: -7px -12px 7px !important;
    padding: 8px 12px;
  }

  /* 64px of brand mark is a third of the band on a 390px-tall screen. */
  .cmplz-cookiebanner.cmplz-show .cmplz-logo {
    width: 36px;
    height: 36px;
  }
}

/* The fixed `height: calc(100vh - 20px)` Complianz sets below 400px tall is
   written for the flex column it also switches to — but above 768px wide its
   own `display: grid` wins, and the fixed height then has to go somewhere: a
   grid row swallows it as blank space. Sizing to content (capped, and scrollable
   past the cap) removes the gap instead of moving it from one row to the next. */
@media (height <= 400px) and (width >= 768px) {
  .cmplz-cookiebanner.cmplz-show {
    overflow-y: auto;
    height: auto;
    max-height: calc(100vh - 20px);
  }
}

/* Complianz's own 3px divider is a pale grey line with a faint shadow: against
   the navy the line disappears and only the shadow lands, reading as a seam.
   The band takes the lift itself (--ag-shadow-md above) so the paper body still
   sits under something — the footer divider below the message keeps its own. */
.cmplz-cookiebanner .cmplz-divider-header {
  display: none;
}

.cmplz-cookiebanner .cmplz-logo {
  display: flex !important;
  flex: none;
  align-items: center;
  justify-content: center;

  width: 64px;
  height: 64px;
  border-radius: var(--ag-radius-md, 4px);

  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTA4MCIgem9vbUFuZFBhbj0ibWFnbmlmeSIgdmlld0JveD0iMCAwIDgxMCA4MDkuOTk5OTkzIiBoZWlnaHQ9IjEwODAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZlcnNpb249IjEuMCI+PHBhdGggZmlsbD0iI2Y0ZWVlMCIgZD0iTSAzNjMgNi44MjQyMTkgQyAyNTYuMDY2NDA2IDI2LjcwNzAzMSAxOTQuMjczNDM4IDU3Ljg3MTA5NCAxMzIuNDgwNDY5IDEyMS4yNzczNDQgQyAtNjcuNDE0MDYyIDMyNi41NDI5NjkgLTIuOTI5Njg4IDY2Ni4xNDQ1MzEgMjU2LjA2NjQwNiA3NzUuMjI2NTYyIEMgMzc2Ljk2ODc1IDgyNi4yNzM0MzggNDczLjE1NjI1IDgwOS4wNzgxMjUgNTExLjg0Mzc1IDczMC4wODk4NDQgQyA1MjYuMzUxNTYyIDY5OS45OTYwOTQgNTI2Ljg5MDYyNSA2OTcuMzA4NTk0IDUyNi44OTA2MjUgNjA4LjExMzI4MSBDIDUyNi44OTA2MjUgNTA0Ljk0MTQwNiA1MjMuMTI4OTA2IDQ4Ny4yMTA5MzggNDkzLjAzNTE1NiA0NTMuODk0NTMxIEMgNDI3LjQ4MDQ2OSAzODEuMzUxNTYyIDMwNy4xMTcxODggMzk2LjM5ODQzOCAyNjQuMTI4OTA2IDQ4Mi45MTAxNTYgQyAyMzUuNjQ4NDM4IDUzOS4zMzIwMzEgMjUwLjY5NTMxMiA2MTUuMDk3NjU2IDI5Ny40NDUzMTIgNjUzLjc4NTE1NiBDIDMxOC45Mzc1IDY3MS41MTk1MzEgMzU5Ljc3MzQzOCA2ODYuMDI3MzQ0IDM4Ny4xNzk2ODggNjg2LjAyNzM0NCBDIDQxNS4xMjEwOTQgNjg2LjAyNzM0NCA0NTguNjQ0NTMxIDY3MC40NDE0MDYgNDc3Ljk5MjE4OCA2NTMuNzg1MTU2IEMgNDg3LjY2NDA2MiA2NDQuNjUyMzQ0IDQ5Ny4zMzU5MzggNjM3LjY2NDA2MiA0OTguOTQ1MzEyIDYzNy42NjQwNjIgQyA1MDUuOTMzNTk0IDYzNy42NjQwNjIgNTA4LjA4MjAzMSA2NzAuOTgwNDY5IDUwMi4xNzE4NzUgNjk0LjA4NTkzOCBDIDQ5Ny4zMzU5MzggNzEyLjM1NTQ2OSA0ODguMTk5MjE5IDcyNy40MDIzNDQgNDcxLjAwMzkwNiA3NDUuNjcxODc1IEMgNDQwLjM3NSA3NzcuMzc1IDQwNS45ODgyODEgNzg2LjUwNzgxMiAzNTEuMTc5Njg4IDc3Ny45MTAxNTYgQyAyODUuMDg1OTM4IDc2Ny4xNjQwNjIgMjQwLjQ4NDM3NSA3NDcuODIwMzEyIDE4Mi45ODgyODEgNzA0LjgzMjAzMSBDIDEzOC4zOTA2MjUgNjcyLjA1NDY4OCAxMDguODM1OTM4IDYzNC45ODA0NjkgNzkuMjgxMjUgNTc1Ljg3MTA5NCBDIDI1LjU0Njg3NSA0NjguOTQxNDA2IDI3LjY5OTIxOSAzMzguMzY3MTg4IDg0LjY1NjI1IDIyNy4xMzY3MTkgQyAxMDEuMzEyNSAxOTQuODk0NTMxIDExOC41MDc4MTIgMTcyLjMyODEyNSAxNTAuNzUgMTQwLjA4NTkzOCBDIDIyNS45NzY1NjIgNjQuODU5Mzc1IDMwNC45NjQ4NDQgMzAuNDY4NzUgNDAyLjIyNjU2MiAzMC40Njg3NSBDIDQ2OC44NTU0NjkgMzAuNDY4NzUgNTA1LjkzMzU5NCAzOS4wNjY0MDYgNTY3LjE5MTQwNiA2OS42OTUzMTIgQyA2MzAuMDU4NTk0IDEwMC4zMjQyMTkgNjk1LjA3ODEyNSAxNjQuODA0Njg4IDcyNy4zMTY0MDYgMjI3LjY3MTg3NSBDIDc3OS45NzY1NjIgMzI5Ljc2OTUzMSA3ODYuNDI1NzgxIDQ0OS4wNTg1OTQgNzQ1LjA1MDc4MSA1NTEuNjkxNDA2IEMgNzExLjczNDM3NSA2MzMuOTAyMzQ0IDY2MC4xNDg0MzggNjg5Ljc4OTA2MiA1NjMuOTY0ODQ0IDc0OC44OTQ1MzEgQyA1NTQuODMyMDMxIDc1NC4yNjk1MzEgNTU0LjI5Mjk2OSA3NTUuODc4OTA2IDU2MS44MTY0MDYgNzYzLjQwMjM0NCBDIDU2OS44NzUgNzcxLjQ2NDg0NCA1NzMuMTAxNTYyIDc3MC4zOTA2MjUgNjAyLjExNzE4OCA3NTIuNjU2MjUgQyA3MTQuOTU3MDMxIDY4NC45NTMxMjUgNzg0LjgxMjUgNTcwLjQ5NjA5NCA3OTYuMDk3NjU2IDQzNC41NTA3ODEgQyA4MTEuMTQ0NTMxIDI1MC43NzczNDQgNjg1LjQwNjI1IDcwLjIzMDQ2OSA1MDcuMDA3ODEyIDE5LjcyMjY1NiBDIDQ2OC44NTU0NjkgOC45NzI2NTYgMzg5Ljg2NzE4OCAxLjk4ODI4MSAzNjMgNi44MjQyMTkgWiBNIDQyNS4zMzIwMzEgNDM2LjE2MDE1NiBDIDQ3My4xNTYyNSA0NTAuMTMyODEyIDUwNC4zMjAzMTIgNDk0LjczMDQ2OSA1MDQuODU5Mzc1IDU0OS41NDI5NjkgQyA1MDQuODU5Mzc1IDYzOS4yNzczNDQgNDA3LjA2MjUgNjkyLjQ3MjY1NiAzMjcuNTM1MTU2IDY0NS43MjY1NjIgQyAyOTIuNjA5Mzc1IDYyNS4zMDQ2ODggMjc0LjMzNTkzOCA1OTAuOTE3OTY5IDI3NC4zMzU5MzggNTQ1Ljc4MTI1IEMgMjc0LjMzNTkzOCA0OTcuNDE3OTY5IDI5NC4yMTg3NSA0NjQuMTA1NDY5IDMzNS41OTM3NSA0NDIuNjA5Mzc1IEMgMzY4LjkxMDE1NiA0MjUuOTUzMTI1IDM4Ny4xNzk2ODggNDI0Ljg3ODkwNiA0MjUuMzMyMDMxIDQzNi4xNjAxNTYgWiBNIDQyNS4zMzIwMzEgNDM2LjE2MDE1NiAiIGZpbGwtb3BhY2l0eT0iMSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZmlsbD0iI2Y0ZWVlMCIgZD0iTSAzMzkuMzU1NDY5IDEyNC41MDM5MDYgQyAzMDguNzI2NTYyIDEzNS4yNSAyODEuMzI0MjE5IDE1OS45Njg3NSAyNjUuMjAzMTI1IDE5MS42NzE4NzUgQyAyMzUuNjQ4NDM4IDI0Ny41NTQ2ODggMjUwLjE1NjI1IDMyNC4zOTQ1MzEgMjk3LjQ0NTMxMiAzNjMuNjIxMDk0IEMgMzUwLjY0MDYyNSA0MDcuNjgzNTk0IDQ0MS40NTMxMjUgNDAzLjkyMTg3NSA0ODYuMDUwNzgxIDM1Ni4wOTc2NTYgQyA1MDQuMzIwMzEyIDMzNi43NTM5MDYgNTA4LjYyMTA5NCAzMzguMzY3MTg4IDUwNy4wMDc4MTIgMzY0LjY5NTMxMiBDIDUwNS4zOTQ1MzEgMzg0LjU3ODEyNSA1MDcuMDA3ODEyIDM4Ny44MDA3ODEgNTE2LjE0MDYyNSAzODcuODAwNzgxIEMgNTI2LjM1MTU2MiAzODcuODAwNzgxIDUyNi44OTA2MjUgMzg0LjAzOTA2MiA1MjYuODkwNjI1IDMwNC41MTE3MTkgQyA1MjYuODkwNjI1IDIyNC40NDkyMTkgNTI2LjM1MTU2MiAyMjAuMTQ4NDM4IDUxMS44NDM3NSAxOTAuNTk3NjU2IEMgNDk2LjI2MTcxOSAxNTguMzU1NDY5IDQ3MC40Njg3NSAxMzUuMjUgNDM4Ljc2NTYyNSAxMjMuOTY0ODQ0IEMgNDEzLjUwNzgxMiAxMTQuODMyMDMxIDM2NS42ODc1IDExNC44MzIwMzEgMzM5LjM1NTQ2OSAxMjQuNTAzOTA2IFogTSA0MzUuNTM5MDYyIDE0OC4xNDQ1MzEgQyA1NTIuMTQ0NTMxIDIwMS4zNDM3NSA1MTUuNjA1NDY5IDM3MS4xNDQ1MzEgMzg3LjE3OTY4OCAzNzEuMTQ0NTMxIEMgMzUxLjcxNDg0NCAzNzEuMTQ0NTMxIDMzMS4yOTY4NzUgMzYzLjA4MjAzMSAzMDcuMTE3MTg4IDMzOC45MDIzNDQgQyAyODIuMzk4NDM4IDMxMy42NDg0MzggMjc0Ljg3NSAyOTQuMzA0Njg4IDI3NC4zMzU5MzggMjU1LjYxMzI4MSBDIDI3NC4zMzU5MzggMjI1LjUyMzQzOCAyNzcuMDIzNDM4IDIxNi4zODY3MTkgMjkwLjQ1NzAzMSAxOTMuODIwMzEyIEMgMzIwLjAxMTcxOSAxNDUuNDYwOTM4IDM4NS4wMzEyNSAxMjUuMDM5MDYyIDQzNS41MzkwNjIgMTQ4LjE0NDUzMSBaIE0gNDM1LjUzOTA2MiAxNDguMTQ0NTMxICIgZmlsbC1vcGFjaXR5PSIxIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56%;
}

/* {logo} never resolves on this site (no theme custom-logo set) — hide it in
   case Complianz ever populates it, so it doesn't collide with the mark above. */
.cmplz-cookiebanner .cmplz-logo svg,
.cmplz-cookiebanner .cmplz-logo img {
  display: none !important;
}

/* Complianz renders {header} as the title's only content — the mockup's
   "— Quelques cookies" eyebrow has no matching placeholder, so it's injected
   as a ::before rather than forked into the plugin's template. */
.cmplz-cookiebanner .cmplz-title::before {
  content: "— Quelques cookies";

  display: block;

  margin-bottom: 4px;

  font-family: var(--ag-font-mono, monospace);
  font-size: var(--ag-text-xs, 11.5px);
  font-weight: var(--ag-weight-medium, 500);
  font-style: normal;
  color: var(--ag-accent, #d0008b);
  text-transform: uppercase;
  letter-spacing: var(--ag-tracking-eyebrow-lg, 0.18em);
}

.cmplz-cookiebanner .cmplz-title {
  justify-self: unset !important;

  margin: 0;

  font-family: var(--ag-font-display, "Instrument Serif", serif) !important;
  font-size: var(--ag-text-xl, 24px) !important;
  font-weight: 400 !important;
  font-style: italic;
  line-height: var(--ag-leading-tight, 1.1) !important;
  color: var(--ag-cream, #f4eee0) !important;
  text-align: left !important;
  letter-spacing: var(--ag-tracking-snug, -0.01em);
}

.cmplz-cookiebanner .cmplz-message {
  margin-top: 2px;
  font-family: var(--ag-font-body, "Manrope", sans-serif);
}

/* Complianz hides .cmplz-title below 425px (its own generated CSS assumes the
   logo alone carries the header on small screens) — the mockup keeps the
   eyebrow + title on mobile, and since the eyebrow is a ::before on the title
   it would vanish along with it without this override. */
@media (width <= 425px) {
  .cmplz-cookiebanner .cmplz-header .cmplz-title {
    display: block !important;
  }
}

.cmplz-cookiebanner .cmplz-message b,
.cmplz-cookiebanner .cmplz-message strong {
  font-weight: 700;
  color: var(--ag-ink, #142033);
}

/* Category rows: quiet dividers instead of grey cards, brand type. */
.cmplz-cookiebanner .cmplz-categories .cmplz-category {
  margin-bottom: 0 !important;
  border-top: 1px solid var(--ag-rule, #d8dedc);
  border-radius: 0;
  background: transparent;
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category:last-child {
  border-bottom: 1px solid var(--ag-rule, #d8dedc);
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header {
  padding: 12px 2px;
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-title {
  font-family: var(--ag-font-body, "Manrope", sans-serif);
  font-weight: 700;
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
  padding: 0 2px 12px;
  font-family: var(--ag-font-body, "Manrope", sans-serif);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  font-family: var(--ag-font-body, "Manrope", sans-serif);
  font-weight: 700;
}

/* Complianz stacks the buttons below 768px (its generated banner-*.css), which
   puts Refuser under Accepter — a vertical order the CNIL reads as ranking one
   choice above the other. Only these two are ever visible (Personnaliser is
   hidden on this banner), so a single row fits and keeps them equal-weight. */
@media (width <= 768px) {
  .cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row !important;
  }

  /* Collée au bas de l'écran et pleine largeur, la bannière n'expose plus que
     son bord haut : les deux ombres de Complianz sont décalées vers le bas et
     ne débordent pas au-dessus, donc la page passait au navy sans transition.
     Même grammaire que le drawer panier (style.css) — une seule direction,
     opposée au bord d'où l'élément sort, teintée ink plutôt que noire. */
  .cmplz-cookiebanner {
    box-shadow: 0 -24px 64px -20px rgb(20 32 51 / 28%) !important;
  }
}

.cmplz-cookiebanner .cmplz-links .cmplz-link {
  font-family: var(--ag-font-body, "Manrope", sans-serif);
}