/* ============================================================================
 * Cylium Blog — "Journal" front layout
 *
 * Everything is scoped under .cb-journal so the blog never leaks into the rest
 * of the shop, and every value that a theme may legitimately want to change is
 * a custom property declared on that same root.
 *
 * Typography: the families are the ones the Shine child theme self-hosts
 * (BricolageGrotesque / Saira / Anek). The module declares NO @font-face and
 * loads nothing from Google — on a theme that does not ship them, the stack
 * falls back to the theme's own body font.
 * ========================================================================== */

.cb-journal {
  /* --- palette ------------------------------------------------------------ */
  --cb-bg: #f4f4f2;
  --cb-paper: #fbfbfa;
  --cb-surface: #ececea;
  --cb-dark: #0d0d0c;
  --cb-ink: #111110;
  --cb-ink-2: #43433d;
  --cb-muted: #6c6c65;
  --cb-muted-2: #8f8f88;
  --cb-faint: #b4b4ad;
  --cb-line: #e2e2de;
  --cb-line-2: #dcdcd7;
  /* Accent de marque. Valeur de repli seulement : le thème la remappe (shine
     remappe vers --shine-race). Une catégorie porteuse d'une couleur la surcharge
     par héros. */
  --cb-accent: #e10600;
  /* 🔴 Ce qui se pose SUR l'accent. Indispensable : l'accent n'est pas forcément
     sombre. Écrire #fff en dur partout rendait le texte illisible dès que le thème
     remplaçait le rouge par une couleur claire — c'est un jeton, pas une constante. */
  --cb-on-accent: #fff;
  --cb-youtube: #ff0000;

  /* --- type --------------------------------------------------------------- */
  --cb-font-display: "BricolageGrotesque", "Bricolage Grotesque", "Anek", var(--bs-body-font-family, system-ui), sans-serif;
  --cb-font-text: "Saira", "Anek", var(--bs-body-font-family, system-ui), sans-serif;
  /* 600 is the heaviest face the theme ships: asking for 700 would give
     synthetic bold. */
  --cb-weight-display: 600;

  /* --- metrics ------------------------------------------------------------ */
  --cb-max: 1240px;
  --cb-gutter: clamp(20px, 3vw, 44px);
  --cb-hero-h: clamp(420px, 56vw, 640px);

  background: var(--cb-bg);
  color: var(--cb-ink);
  font-family: var(--cb-font-text);
  /* The element keeps the theme's #content id so hooks and theme CSS still find
     it; the journal supplies its own spacing, so any inherited padding goes. */
  padding: 0;
  margin: 0;
}

/* The journal owns the full width of the page. `container_class` already drops
   the theme's .container; this also neutralises a layout that would still hand
   us a narrow column. */
.cyliumblog-journal-wrap { max-width: none; padding-left: 0; padding-right: 0; }
.cyliumblog-journal-wrap > .row { margin-left: 0; margin-right: 0; }
.cyliumblog-journal-wrap #center-column {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.cb-journal a { color: inherit; text-decoration: none; }
.cb-journal img { max-width: 100%; }
.cb-journal :focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- primitives */

.cb-section {
  max-width: var(--cb-max);
  margin: 0 auto;
  padding: 56px var(--cb-gutter) 0;
}

.cb-eyebrow {
  display: block;
  font-family: var(--cb-font-text);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cb-muted-2);
  margin: 0;
}

.cb-lede {
  display: block;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--cb-ink-2);
  text-wrap: pretty;
  margin: 0;
}
.cb-lede--tight { font-size: 14px; line-height: 1.6; }
.cb-lede :where(p):last-child { margin-bottom: 0; }

.cb-empty {
  font-size: 15px;
  font-weight: 300;
  color: var(--cb-muted);
}

.cb-arrow { flex: 0 0 auto; transition: transform .25s ease; }

.cb-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cb-muted);
  transition: color .2s ease;
}
.cb-link:hover { color: var(--cb-ink); }
.cb-link:hover .cb-arrow { transform: translateX(4px); }

.cb-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 26px;
}
.cb-section__head .cb-eyebrow { font-size: 11px; color: var(--cb-ink); }

.cb-rule {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 26px;
}
.cb-rule__line { flex: 1; height: 1px; background: var(--cb-line); }

.cb-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px solid var(--cb-line);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cb-muted);
}
.cb-meta__text { min-width: 0; }
.cb-meta .cb-arrow { stroke: var(--cb-ink); }

.cb-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 15px 24px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, gap .25s ease;
}
.cb-btn--paper { background: var(--cb-paper); color: var(--cb-dark); }
.cb-btn--paper:hover { background: var(--cb-accent); color: var(--cb-on-accent); gap: 22px; }

/* --------------------------------------------------------------------- hero */

.cb-hero {
  position: relative;
  min-height: var(--cb-hero-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cb-dark);
  color: #fff;
}
/* 🔴 No `overflow: hidden` here. It would clip the search panel, which is meant
   to hang below the hero — the cover image cannot overflow anyway, being
   absolutely inset with object-fit: cover. */
.cb-hero--flat { min-height: clamp(280px, 34vw, 420px); }

.cb-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cb-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.15) 45%, rgba(0,0,0,.6));
  pointer-events: none;
}

.cb-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
  padding: 72px var(--cb-gutter) 100px;
}

.cb-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.cb-crumbs a { color: rgba(255,255,255,.65); transition: color .2s ease; }
.cb-crumbs a:hover { color: #fff; }
.cb-crumbs [aria-current] { color: #fff; }
.cb-crumbs__sep { color: rgba(255,255,255,.4); }

.cb-hero__title {
  margin: 0;
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-display);
  font-size: clamp(34px, 5vw, 66px);
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
  text-wrap: balance;
}

.cb-hero__tagline {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}

.cb-cta {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px 16px 28px;
  background: var(--cb-paper);
  color: var(--cb-dark);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease, gap .25s ease;
}
.cb-cta:hover { background: var(--cb-accent); color: var(--cb-on-accent); gap: 26px; }

/* latest-article bar, pinned to the bottom edge of the hero */
.cb-latest {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 46px);
  padding: 22px var(--cb-gutter);
  margin-top: auto;
  background: rgba(10,10,10,.62);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.22);
  color: #fff;
  transition: background .25s ease;
}
.cb-latest:hover { background: rgba(10,10,10,.86); color: #fff; }
.cb-latest__tag {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.cb-latest__dot { width: 6px; height: 6px; background: #fff; display: block; }
.cb-latest__rule { width: 1px; align-self: stretch; background: rgba(255,255,255,.25); flex: 0 0 auto; }
.cb-latest__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-display);
  font-size: clamp(15px, 1.6vw, 22px);
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-latest__meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.cb-latest__meta .cb-arrow { stroke: #fff; }
.cb-latest:hover .cb-arrow { transform: translateX(4px); }

/* ------------------------------------------------------------------- search */

/* Above the latest-article bar and the sections that follow: none of them
   creates a stacking context, so a plain high z-index is enough. */
.cb-search { position: relative; width: min(680px, 100%); z-index: 30; }

.cb-search__form {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: rgba(12,12,11,.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.5);
}
.cb-search__icon { flex: 0 0 auto; color: rgba(255,255,255,.85); }
.cb-search__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--cb-font-text);
  font-size: 15px;
  font-weight: 300;
  color: #fff;
}
.cb-search__input::placeholder { color: rgba(255,255,255,.62); }
/* Safari's native clear button is invisible on a dark field. */
.cb-search__input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
.cb-search__submit {
  flex: 0 0 auto;
  padding: 10px 20px;
  background: #fff;
  border: 0;
  cursor: pointer;
  font-family: var(--cb-font-text);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cb-dark);
  transition: opacity .2s ease;
}
.cb-search__submit:hover { opacity: .82; }

.cb-search__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: var(--cb-paper);
  color: var(--cb-ink);
  border: 1px solid #d6d6d1;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  text-align: left;
  max-height: 380px;
  overflow-y: auto;
}
.cb-search__panel[hidden] { display: none; }
.cb-search__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid #e6e6e2;
}
.cb-search__head .cb-eyebrow { font-size: 9px; }
.cb-search__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--cb-muted-2);
  display: flex;
  padding: 0;
  transition: color .2s ease;
}
.cb-search__close:hover { color: var(--cb-ink); }

.cb-hit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 20px;
  border-bottom: 1px solid #eeeeea;
  transition: background .18s ease;
}
.cb-hit:last-child { border-bottom: 0; }
.cb-hit:hover, .cb-hit:focus-visible { background: #efefec; }
.cb-hit__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cb-hit__tag { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--cb-muted-2); }
.cb-hit__title {
  font-family: var(--cb-font-display);
  font-size: 15px;
  font-weight: var(--cb-weight-display);
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.cb-hit__time { flex: 0 0 auto; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-muted); }
.cb-search__none { padding: 18px 20px; font-size: 13px; font-weight: 300; color: var(--cb-muted); }

/* -------------------------------------------------------------------- chips */

.cb-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding-bottom: 32px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--cb-line);
}
.cb-chips__label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cb-muted-2);
}
.cb-chips__list { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-chip {
  font-family: var(--cb-font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid #d6d6d1;
  color: #3d3d38;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cb-chip:hover { border-color: var(--cb-ink); color: var(--cb-ink); }
.cb-chip--on { background: var(--cb-ink); border-color: var(--cb-ink); color: var(--cb-paper); }
.cb-chip--on:hover { color: var(--cb-paper); }

/* -------------------------------------------------------------------- cards */

.cb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 34px;
}

.cb-card { display: flex; min-width: 0; flex-direction: column; }
.cb-card__num {
  font-family: var(--cb-font-display);
  font-size: 13px;
  font-weight: var(--cb-weight-display);
  letter-spacing: .06em;
  color: var(--cb-faint);
  padding-bottom: 12px;
}
.cb-card__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #ddddd8;
}
.cb-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.cb-card:hover .cb-card__media img { transform: scale(1.05); }
.cb-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
}
.cb-card__title {
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-display);
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.012em;
  text-transform: uppercase;
  text-wrap: pretty;
  transition: color .2s ease;
}
.cb-card:hover .cb-card__title { color: var(--cb-accent); }
.cb-card:hover .cb-arrow { transform: translateX(4px); }

/* -------------------------------------------------------------------- guide */

.cb-guide__link { display: block; }
.cb-guide__media {
  display: block;
  position: relative;
  height: clamp(240px, 40vw, 520px);
  overflow: hidden;
  background: #ddddd8;
}
.cb-guide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.cb-guide__link:hover .cb-guide__media img { transform: scale(1.03); }
.cb-guide__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 4vw, 64px);
  padding-top: 28px;
}
.cb-guide__title {
  display: block;
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-display);
  font-size: clamp(26px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: pretty;
  transition: color .2s ease;
}
.cb-guide__link:hover .cb-guide__title { color: var(--cb-accent); }
.cb-guide__aside { display: flex; flex-direction: column; gap: 18px; }
.cb-guide__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding-top: 16px;
  border-top: 1px solid var(--cb-line);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cb-muted);
}

/* ------------------------------------------------------------------- splits */

.cb-split { padding-top: 34px; }
.cb-split__link {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  background: var(--cb-surface);
  min-height: 300px;
}
.cb-split__media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #ddddd8;
  min-height: 220px;
}
.cb-split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.cb-split__link:hover .cb-split__media img { transform: scale(1.04); }
.cb-split__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: clamp(28px, 5vw, 52px) clamp(24px, 4vw, 56px);
}
.cb-split__kicker { display: flex; align-items: center; gap: 14px; }
.cb-split__kicker .cb-card__num { padding-bottom: 0; }
.cb-split__title {
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-display);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-wrap: balance;
  transition: color .2s ease;
}
.cb-split__link:hover .cb-split__title { color: var(--cb-accent); }
.cb-split .cb-meta { border-top-color: var(--cb-line-2); padding-top: 22px; margin-top: 6px; }
.cb-split__link:hover .cb-arrow { transform: translateX(4px); }

/* The image comes first in the source, so a phone always gets it above the text.
   Only once there are two columns does every other row send it to the right —
   which is what alternates the rhythm down the page. */
@media (min-width: 680px) {
  .cb-split--flip .cb-split__media { order: 2; }
}

/* -------------------------------------------------------------------- video */

.cb-video__frame {
  position: relative;
  height: clamp(260px, 42vw, 540px);
  overflow: hidden;
  background: #000;
}
.cb-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cb-video__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.12));
  pointer-events: none;
}
.cb-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.cb-video__disc {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cb-youtube);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
  transition: transform .3s ease;
}
.cb-video__play:hover .cb-video__disc { transform: scale(1.06); }
.cb-video__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 3vw, 40px);
  pointer-events: none;
}
.cb-video__caption a { pointer-events: auto; }
.cb-video__text { display: flex; flex-direction: column; gap: 12px; max-width: 34ch; }
.cb-video__badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.cb-video__badge svg { color: var(--cb-youtube); }
.cb-journal .cb-video__title {
  margin: 0;
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-display);
  font-size: clamp(20px, 2.8vw, 40px);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: #fff;
  text-transform: uppercase;
  text-wrap: pretty;
}
.cb-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* In an article the frame takes the player's own 16:9 within the text column. */
.cb-post__video { margin: 0 0 clamp(24px, 3vw, 36px); }
.cb-post__video .cb-video__frame { height: auto; aspect-ratio: 16 / 9; }
.cb-post__video .cb-video__disc { width: clamp(56px, 9vw, 88px); height: clamp(56px, 9vw, 88px); }
.cb-post__video-caption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--cb-muted); }
.cb-post__video-caption a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- newsletter */

.cb-newsletter {
  margin-top: 56px;
  background: var(--cb-surface);
  border-top: 1px solid var(--cb-line);
}
.cb-newsletter__inner {
  max-width: var(--cb-max);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 62px) var(--cb-gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.cb-newsletter__pitch { display: flex; flex-direction: column; gap: 12px; }
.cb-journal .cb-newsletter__title {
  margin: 0;
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-display);
  font-size: clamp(21px, 2.6vw, 30px);
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.cb-newsletter__pitch .cb-lede { max-width: 460px; }

/* ps_emailsubscription supplies the markup; the journal supplies the look.
   Its Bootstrap chrome is removed in PHP before the block is embedded (see
   JournalPresenter::stripLayoutClasses — the theme puts Bootstrap in a cascade
   layer, which no unlayered rule can override for `!important` declarations),
   so what is left here is plain markup and needs no specificity war. */
.cb-newsletter__form .ps-emailsubscription,
.cb-newsletter__form .block_newsletter,
.cb-newsletter__form .block-newsletter {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
/* Its own heading duplicates cb-newsletter__title. */
.cb-journal .cb-newsletter__form :is(h2, h3, h4, .h2, .h3, .block-title, .newsletter-title) { display: none; }
.cb-newsletter__form form { padding: 0; width: 100%; max-width: none; }

/* The field + button row: one underline, as in the design. */
.cb-newsletter__form .d-flex {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--cb-ink);
}
.cb-newsletter__form input[type="email"] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  padding: 16px 2px;
  font-family: var(--cb-font-text);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cb-ink);
}
.cb-newsletter__form input[type="email"]::placeholder { color: var(--cb-muted); text-transform: uppercase; }
.cb-newsletter__form :where(button[type="submit"], input[type="submit"]) {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  padding: 16px 4px 16px 22px;
  font-family: var(--cb-font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cb-ink);
  transition: opacity .2s ease;
}
.cb-newsletter__form :where(button[type="submit"], input[type="submit"]):hover { opacity: .55; }
/* The unsubscribe notice is a legal requirement: kept, only made quiet. */
.cb-newsletter__form p { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--cb-muted); }
.cb-newsletter__form :where(.alert, .newsletter-message) { margin-top: 12px; font-size: 13px; }

/* --------------------------------------------------------------- pagination */

.cb-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 48px;
  padding-bottom: 8px;
}
.cb-pager__step {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cb-muted);
  transition: color .2s ease;
}
.cb-pager__step:hover { color: var(--cb-ink); }
.cb-pager__step--off { opacity: .35; }
.cb-pager__pages { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-pager__page {
  min-width: 38px;
  padding: 9px 12px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .1em;
  border: 1px solid #d6d6d1;
  color: #3d3d38;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cb-pager__page:hover { border-color: var(--cb-ink); color: var(--cb-ink); }
.cb-pager__page--on { background: var(--cb-ink); border-color: var(--cb-ink); color: var(--cb-paper); }

/* 🔴 Headings are scoped under .cb-journal on purpose: Creative Elements' Site
   Kit declares `body.ce-kit-1 h3` (specificity 0,1,1), which outranks a bare
   .cb-something class. The extra ancestor buys the specificity without a war of
   !important — see the same reasoning for the newsletter block above. */

/* --------------------------------------------------------------- article page */

.cb-post__head {
  position: relative;
  min-height: clamp(360px, 46vw, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--cb-dark);
  color: #fff;
}
.cb-post__head--flat { min-height: auto; background: var(--cb-bg); color: var(--cb-ink); }
.cb-post__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cb-post__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.25) 55%, rgba(0,0,0,.45));
}
.cb-post__head--flat .cb-post__scrim { display: none; }

.cb-post__headline {
  position: relative;
  width: 100%;
  max-width: var(--cb-max);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--cb-gutter);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cb-post__title {
  margin: 0;
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-display);
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -.028em;
  text-transform: uppercase;
  text-wrap: pretty;
  color: inherit;
}
.cb-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.cb-post__head--flat .cb-post__meta { color: var(--cb-muted); }

.cb-post__body {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--cb-gutter);
}
.cb-post__body:first-of-type { padding-top: clamp(32px, 5vw, 56px); }

.cb-post__lede {
  margin: 0 0 28px;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--cb-ink-2);
  text-wrap: pretty;
}

/* Reading measure and vertical rhythm of the article body. */
.cb-prose { font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--cb-ink-2); }
.cb-prose > :first-child { margin-top: 0; }
.cb-prose > :last-child { margin-bottom: 0; }
.cb-prose p { margin: 0 0 1.25em; text-wrap: pretty; }
.cb-journal .cb-prose :is(h2, h3, h4) {
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-display);
  color: var(--cb-ink);
  letter-spacing: -.02em;
  line-height: 1.15;
  text-transform: uppercase;
  margin: 2em 0 .7em;
}
.cb-journal .cb-prose h2 { font-size: clamp(22px, 2.4vw, 30px); }
.cb-journal .cb-prose h3 { font-size: clamp(18px, 2vw, 23px); }
.cb-journal .cb-prose h4 { font-size: 17px; }
/* 🔴 Le thème pose `@layer ps-base { ol, ul { list-style: none; padding-left: 0 } }`
   (hérité de hummingbird) : sans ces règles, une liste rédigée dans le BO sort
   sans puce ni retrait, et une liste numérotée perd ses numéros — donc de
   l'information. Une déclaration NORMALE hors couche bat une règle en couche :
   aucun `!important` ici, il serait inutile et empêcherait le thème d'ajuster. */
.cb-prose ul { list-style: disc; margin: 0 0 1.25em; padding-left: 1.2rem; }
.cb-prose ol { list-style: decimal; margin: 0 0 1.25em; padding-left: 1.2rem; }
/* Sans cela, trois niveaux d'imbrication rendent la même puce. */
.cb-prose ul ul { list-style: circle; }
.cb-prose ul ul ul { list-style: square; }
.cb-prose ol ol { list-style: lower-alpha; }
.cb-prose ol ol ol { list-style: lower-roman; }
.cb-prose :where(ul, ol) :where(ul, ol) { margin-block: .4em 0; }
.cb-prose li { margin-block-end: .45em; }
.cb-prose a { color: var(--cb-accent); text-decoration: underline; text-underline-offset: 3px; }
.cb-prose a:hover { color: var(--cb-ink); }
.cb-prose img { height: auto; margin: 1.6em 0; }
.cb-prose blockquote {
  margin: 1.8em 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--cb-accent);
  font-size: 18px;
  color: var(--cb-ink);
}
/* Le corps dessiné dans Creative Elements rend ses listes dans les widgets CE,
   pas dans .cb-prose : le même reset `ps-base` les frappe, il faut donc les viser
   aussi. */
.cb-post__ce :where(.elementor-widget-text-editor, .elementor-text-editor) ul { list-style: disc; padding-left: 1.2rem; }
.cb-post__ce :where(.elementor-widget-text-editor, .elementor-text-editor) ol { list-style: decimal; padding-left: 1.2rem; }
.cb-post__ce :where(.elementor-widget-text-editor, .elementor-text-editor) li { margin-block-end: .45em; }

/* Composants du journal : la puce y est délibérément absente. À garder APRÈS la
   prose, dont la règle `ul { list-style: disc }` les rattraperait sinon. */
.cb-journal :is(.cb-toc, .cb-chips__list, .cb-pager__pages) { list-style: none; padding-left: 0; }

/* Summary block: the article's own table of contents, anchored on its h2s. */
.cb-journal .cb-toc {
  list-style: none;
  margin: 0 0 2.4em;
  padding: 22px 26px;
  background: var(--cb-surface);
  border-left: 2px solid var(--cb-accent);
  columns: 2;
  column-gap: 36px;
}
.cb-journal .cb-toc li { margin: 0 0 .55em; break-inside: avoid; }
/* Summary links stay the accent colour of every other link in the body — they
   are links, and reading them as such is what a table of contents wants. */
.cb-journal .cb-toc a {
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.cb-journal .cb-toc a:hover { color: var(--cb-ink); border-bottom-color: currentColor; }
/* Les sous-titres s'effacent d'un cran : le sommaire doit se parcourir des yeux,
   et deux niveaux au même poids se lisent comme une liste plate. */
.cb-journal .cb-toc__item--h3 { padding-left: 14px; }
.cb-journal .cb-toc__item--h3 a { font-size: 13px; color: var(--cb-muted); }
.cb-journal .cb-toc__label {
  margin: 0 0 .5em;
  font-family: var(--cb-font-display);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cb-muted-2);
}
/* An anchored heading must not land under a sticky site header.
   🔴 Vise aussi le corps rendu par Creative Elements : le sommaire pointe sur les
   mêmes titres, que le corps vienne de la prose ou d'un gabarit. */
.cb-journal :is(.cb-prose, .cb-post__ce) :where(h2, h3)[id] { scroll-margin-top: 96px; }
@media (max-width: 767px) { .cb-journal .cb-toc { columns: 1; } }

.cb-prose :where(table) { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 14px; }
.cb-prose :where(th, td) { border: 1px solid var(--cb-line); padding: 10px 12px; text-align: left; }
.cb-prose th { background: var(--cb-surface); font-weight: 500; }


.cb-journal :where(.cyliumblog-related, .cyliumblog-related-products) {
  max-width: var(--cb-max);
  margin: 0 auto;
  padding: 48px var(--cb-gutter) 0;
}
.cb-journal :is(.cyliumblog-related, .cyliumblog-related-products) h3 {
  font-family: var(--cb-font-text);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cb-muted-2);
  padding-bottom: 20px;
  margin: 0;
  border-bottom: 1px solid var(--cb-line);
}
.cb-journal .cyliumblog-related ul { list-style: none; margin: 0; padding: 0; }
.cb-journal .cyliumblog-related li { border-bottom: 1px solid var(--cb-line); }
.cb-journal .cyliumblog-related li a {
  display: block;
  padding: 20px 0;
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-display);
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: uppercase;
  transition: color .2s ease, padding-left .25s ease;
}
.cb-journal .cyliumblog-related li a:hover { color: var(--cb-accent); padding-left: 10px; }

.cb-journal .cyliumblog-comments { padding-top: 48px; }

/* ------------------------------------------------------------------- extras */

.cb-note { padding-top: 40px; }
.cb-note .cb-lede { max-width: 72ch; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 767px) {
  .cb-section { padding-top: 40px; }
  .cb-latest { flex-wrap: wrap; gap: 12px; }
  .cb-latest__rule { display: none; }
  .cb-latest__title { white-space: normal; flex: 1 1 100%; }
  .cb-latest__meta { flex: 1 1 100%; justify-content: space-between; }
  .cb-search__form { flex-wrap: wrap; gap: 10px; }
  .cb-search__submit { flex: 1 1 100%; padding: 12px 20px; }
  .cb-chips { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cb-guide__facts { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-journal *,
  .cb-journal *::before,
  .cb-journal *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------- tags & catégories
 *
 * 🔴 Ces deux composants sortaient en `badge bg-secondary` / `bg-primary`. Outre
 * que l'apparence du journal n'a pas à dépendre d'un utilitaire du thème, le gris
 * de Bootstrap posait un texte gris sur fond gris — contraste 1,02:1, illisible.
 *
 * Ils apparaissent dans DEUX contextes opposés : sur la couverture sombre de
 * l'en-tête d'article, et sur fond clair dans un widget Creative Elements. D'où
 * des couleurs dérivées de `currentColor` : la pastille suit la couleur du texte
 * ambiant au lieu d'imposer la sienne, et reste lisible des deux côtés.
 */
.cb-journal :is(.cb-tags, .cb-cats) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cb-journal .cb-tags { margin-top: 2.2em; }
.cb-journal .cb-cats { margin-bottom: 14px; }

.cb-journal :is(.cb-tag, .cb-cat) {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px;
  font-family: var(--cb-font-text);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, currentColor 8%, transparent);
  transition: background-color .2s ease, border-color .2s ease;
}
.cb-journal :is(.cb-tag, .cb-cat):hover {
  background: color-mix(in srgb, currentColor 16%, transparent);
  border-color: color-mix(in srgb, currentColor 55%, transparent);
}

/* 🔴 L'en-tête AVEC couverture est sombre, et `color: inherit` n'y suffit pas :
   une règle plus spécifique repose l'encre du journal, et la pastille retombait
   à 1,29:1 sur l'image — illisible. Le cas est donc traité explicitement, comme
   il l'était avant la réécriture. Mesuré, pas supposé. */
.cb-post__head:not(.cb-post__head--flat) :is(.cb-cat, .cb-tag) {
  color: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .12);
}
.cb-post__head:not(.cb-post__head--flat) :is(.cb-cat, .cb-tag):hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .7);
}

/* La catégorie principale est pleine : c'est le seul repère qui la distingue,
   la couleur seule ne suffirait pas à qui ne la perçoit pas. */
.cb-journal .cb-cat--main {
  background: var(--cb-accent);
  border-color: var(--cb-accent);
  color: var(--cb-on-accent);
  font-weight: 600;
}
.cb-journal .cb-cat--main:hover {
  background: var(--cb-accent);
  border-color: var(--cb-accent);
  filter: brightness(1.08);
}

/* ------------------------------------------------------- page d'abonnement */

.cb-subscribe { max-width: 720px; padding-bottom: 72px; }
.cb-subscribe__title {
  margin: 0 0 .5em;
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-display);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.cb-subscribe__notice {
  margin: 0 0 1.4em;
  padding: 12px 16px;
  border-left: 2px solid var(--cb-accent);
  background: var(--cb-surface);
  font-size: 14px;
}
.cb-subscribe__form { margin-top: 2em; }
.cb-subscribe__label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cb-muted-2);
}
.cb-subscribe__row { display: flex; flex-wrap: wrap; gap: 10px; }
.cb-subscribe__input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--cb-line);
  border-radius: 0;
  background: var(--cb-paper);
  color: var(--cb-ink);
  font-family: var(--cb-font-text);
  font-size: 15px;
}
.cb-subscribe__input:focus { outline: 2px solid var(--cb-accent); outline-offset: 2px; }
.cb-btn--ink { background: var(--cb-ink); color: var(--cb-paper); }
.cb-btn--ink:hover { background: var(--cb-accent); color: var(--cb-on-accent); gap: 22px; }
.cb-btn--ink .cb-arrow { stroke: currentColor; }
.cb-subscribe__legal { margin: 1.1em 0 0; font-size: 12px; color: var(--cb-muted); }
.cb-subscribe__back { margin-top: 2.4em; }

/* 🔴 Le pot de miel doit être invisible SANS `display:none` : certains robots
   ignorent les champs ainsi masqués, ce qui le rendrait inutile. Il est donc
   sorti du flux et du champ visuel, tout en restant un champ réel.
   Sans cette règle il s'affichait en clair — « Laissez ce champ vide » lisible
   au milieu du formulaire, constaté en production. */
.cb-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ----------------------------------------------- vue de parcours (browse) */

.cb-browse { padding-bottom: 72px; }
.cb-browse__count {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cb-muted);
}
.cb-browse__list {
  display: grid;
  /* 🔴 DEUX colonnes, pas « autant que ça rentre ». `auto-fit` en produisait
     trois sur un écran large, ce qui n'est pas la même page.
     `minmax(0, 1fr)` et non `1fr` : sans le minimum à zéro, un titre long
     impose sa largeur à la colonne et la grille déborde. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Le fond porte les filets : une grille d'un pixel laisse voir le fond entre
     les cellules, ce qui évite les bordures doublées aux jonctions. */
  background: var(--cb-line);
  border: 1px solid var(--cb-line);
}
.cb-browse__item { background: var(--cb-bg); }
.cb-browse__link {
  display: flex;
  gap: 18px;
  height: 100%;
  padding: 20px;
  transition: background .2s ease;
}
.cb-browse__link:hover { background: var(--cb-paper); }
.cb-browse__link:hover .cb-arrow { transform: translateX(4px); }

.cb-browse__media {
  flex: 0 0 96px;
  height: 96px;
  overflow: hidden;
  background: var(--cb-surface);
}
.cb-browse__media img { width: 100%; height: 100%; object-fit: cover; }

.cb-browse__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cb-browse__title {
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-display);
  font-size: 17px;
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: balance;
}
.cb-browse__excerpt {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--cb-ink-2);
}
.cb-browse__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cb-muted);
}
.cb-browse__meta .cb-arrow { margin-left: auto; stroke: var(--cb-ink); }

/* Une colonne dès que deux ne tiennent plus lisiblement : en dessous, la
   vignette et le texte se disputent une largeur qu'ils n'ont pas. */
@media (max-width: 767px) {
  .cb-browse__list { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------- articles liés */

.cb-related { padding-bottom: 8px; }
.cb-related__list { list-style: none; margin: 0; padding: 0; }
.cb-related__item { border-bottom: 1px solid var(--cb-line); }
.cb-related__item:first-child { border-top: 1px solid var(--cb-line); }
.cb-related__link {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 4px;
  transition: padding-left .2s ease;
}
.cb-related__link:hover { padding-left: 12px; }
.cb-related__link:hover .cb-arrow { transform: translateX(4px); }
.cb-related__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cb-related__title {
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-display);
  font-size: 17px;
  line-height: 1.2;
  text-transform: uppercase;
}
.cb-related__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cb-muted);
}
.cb-related__link .cb-arrow { margin-left: auto; stroke: var(--cb-ink); }

/* --------------------------------------------------- réseaux de l'article */

.cb-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 2.2em;
  padding-top: 1.4em;
  border-top: 1px solid var(--cb-line);
}
.cb-social__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cb-social__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--cb-line);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cb-muted);
  transition: color .2s ease, border-color .2s ease;
}
/* La couleur de marque n'arrive qu'au survol : sept pastilles colorées en
   permanence tireraient l'œil plus que l'article lui-même. */
.cb-social__link:hover { color: var(--cb-ink); border-color: var(--cb-ink); }
.cb-social__link--youtube:hover   { color: #ff0000; border-color: #ff0000; }
.cb-social__link--instagram:hover { color: #c13584; border-color: #c13584; }
.cb-social__link--tiktok:hover    { color: #000;    border-color: #000; }
.cb-social__link--linkedin:hover  { color: #0a66c2; border-color: #0a66c2; }
.cb-social__link--facebook:hover  { color: #1877f2; border-color: #1877f2; }
.cb-social__link--x:hover         { color: #000;    border-color: #000; }
.cb-social__link--pinterest:hover { color: #bd081c; border-color: #bd081c; }
.cb-social__link svg { flex: 0 0 auto; }

/* Sous 480px, seuls les pictogrammes : sept libellés y passeraient à la ligne
   un par un et occuperaient plus de place que le chapô. */
@media (max-width: 479px) {
  .cb-social__label { position: absolute; left: -9999px; }
  .cb-social__link { padding: 9px 11px; }
}

/* --- FAQ --------------------------------------------------------------------
   A category shown as questions with folding answers. Sober defaults on the
   journal tokens; the theme sheet refines them. */
.cb-faq {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px var(--cb-gutter) 72px;
}
.cb-faq__intro { margin-bottom: 32px; }

.cb-faq__search { margin-bottom: 40px; }
.cb-faq__label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--cb-muted);
}
.cb-faq__input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--cb-line);
  border-radius: 0;
  background: var(--cb-paper);
  color: var(--cb-ink);
  font-family: var(--cb-font-text);
  font-size: 15px;
}
.cb-faq__input:focus { outline: 2px solid var(--cb-accent); outline-offset: 2px; }

.cb-faq__section + .cb-faq__section { margin-top: 48px; }
.cb-faq__section[hidden], .cb-faq__item[hidden] { display: none; }
.cb-faq__heading {
  margin: 0 0 12px;
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-display);
  font-size: 22px;
  color: var(--cb-ink);
}

.cb-faq__item { border-bottom: 1px solid var(--cb-line); }
.cb-faq__item:first-of-type { border-top: 1px solid var(--cb-line); }
.cb-faq__question {
  position: relative;
  padding: 18px 40px 18px 0;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 500;
  color: var(--cb-ink);
}
.cb-faq__question::-webkit-details-marker { display: none; }
/* Plus sign that turns into a minus: no icon font, no image. */
.cb-faq__question::before,
.cb-faq__question::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: currentColor;
  transition: transform .2s ease;
}
.cb-faq__question::after { transform: rotate(90deg); }
.cb-faq__item[open] > .cb-faq__question::after { transform: rotate(0deg); }
.cb-faq__question:hover { color: var(--cb-accent); }
.cb-faq__question:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 2px; }

.cb-faq__answer { padding: 0 0 24px; color: var(--cb-ink-2); }
.cb-faq__more { margin: 16px 0 0; font-size: 14px; }
.cb-faq__empty { margin-top: 24px; color: var(--cb-muted); }

@media (prefers-reduced-motion: reduce) {
  .cb-faq__question::before, .cb-faq__question::after { transition: none; }
}