.cpts-resource-surface {
  isolation: isolate;
  overflow-clip-margin: 450px;
  padding-bottom: 6.625rem;
  position: relative;
}

/* The decorated surface must win over the generic main overflow rule so its
   paint cannot extend the document below the footer. */
main.cpts-resource-surface {
  overflow: clip;
}

.cpts-resource-hub::after,
.cpts-practical-index::after {
  background: rgb(250 184 51);
  border-radius: 20px;
  content: "";
  pointer-events: none;
  position: absolute;
  transform: matrix(-0.6156615, -0.7880107, 0.7880107, -0.6156615, 0, 0);
  transform-origin: 0 0;
  width: 505.5601px;
  z-index: -1;
}

.cpts-resource-hub::after {
  height: 973.0967px;
  left: calc(var(--cpts-layout-canvas-offset) - 135.3389px);
  top: 2404.7139px;
}

/* The artboard offset is shifted by the Liens utiles heading line box and its
   bottom margin, so the shape keeps its place behind the cards, not the heading. */
.cpts-practical-index::after {
  height: 1116.921px;
  left: calc(var(--cpts-layout-canvas-offset) - 236.9326px);
  top: calc(1999.4285px + (1.875rem * 1.25) + 3.4375rem);
}

:root .cpts-resource-hero {
  display: grid;
  gap: 0;
  justify-items: center;
  text-align: center;
}

.cpts-resource-hero__title {
  font-size: 4.375rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 4.8125rem;
  max-width: 1010px;
}

.cpts-resource-hub .cpts-resource-hero__title {
  font-weight: 700;
}

.cpts-resource-hero__intro {
  color: var(--wp--preset--color--subtitle);
  font-size: 1.25rem;
  line-height: 1.6875rem;
  max-width: 760px;
}

.cpts-resource-surface .cpts-resource-hub__grid {
  column-gap: 50px;
  grid-template-columns: repeat(2, minmax(0, 575px));
  justify-content: center;
  row-gap: 50px;
}

.cpts-resource-surface .cpts-resource-hub-card {
  background: var(--wp--preset--color--cream);
  border-radius: 30px;
  box-shadow: 0 4px 18px rgb(45 45 45 / 12%), inset 0 0 0 1px var(--wp--preset--color--teal-light);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 407px;
  overflow: clip;
  padding: 30px;
  position: relative;
}

.cpts-resource-hub-card > * {
  margin: 0;
}

.cpts-resource-hub-card > .cpts-resource-hub-card__link {
  margin-top: auto;
}

.cpts-resource-hub-card__icon {
  background-color: rgb(222 234 230);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 70px;
  border-radius: 20px;
  flex: 0 0 112px;
  height: 112px;
  justify-self: start;
  margin-top: 0;
  width: 112px;
}

.cpts-resource-hub-card--newsletters .cpts-resource-hub-card__icon {
  background-image: url("images/icon-resource-newsletters-xd.webp");
}

.cpts-resource-hub-card--tools .cpts-resource-hub-card__icon {
  background-image: url("images/icon-resource-tools-xd.webp");
}

.cpts-resource-hub-card--practical .cpts-resource-hub-card__icon {
  background-image: url("images/icon-resource-practical-xd.webp");
}

.cpts-resource-hub-card--listings .cpts-resource-hub-card__icon {
  background-image: url("images/icon-resource-listings-xd.webp");
}

.cpts-resource-hub-card--news .cpts-resource-hub-card__icon {
  background-image: url("images/icon-resource-news-xd.webp");
}

.cpts-resource-hub-card h2 {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.6875rem;
  margin: 24px 0 0;
}

.cpts-resource-hub-card > p:not(.cpts-resource-hub-card__link) {
  font-size: 1.25rem;
  line-height: 1.6875rem;
  margin-top: 25px;
}

.cpts-resource-hub-card__link {
  align-self: flex-end;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 2rem;
  margin-top: auto;
}

.cpts-resource-hub-card__link a {
  align-items: center;
  color: var(--wp--preset--color--coral);
  display: inline-flex;
  gap: 0.75rem;
}

.cpts-resource-hub-card__link a::after {
  background-color: currentcolor;
  content: "";
  height: 1.75rem;
  mask: url("images/icon-arrow-right.svg") center / contain no-repeat;
  width: 1.75rem;
}

.cpts-collection-filters--pills {
  margin-top: 2.0625rem !important;
}

.cpts-collection-filters__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 1.875rem;
  justify-content: center;
}

.cpts-collection-filters__pills .cpts-collection-filter {
  align-items: center;
  background: transparent;
  border: 1px solid var(--wp--preset--color--teal);
  border-radius: 30px;
  box-sizing: border-box;
  color: var(--wp--preset--color--teal);
  display: inline-flex;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 1.25rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1.5rem;
  min-height: 52px;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
}

.cpts-collection-filters__pills .cpts-collection-filter.is-active {
  background: var(--wp--preset--color--teal);
  color: var(--wp--preset--color--white);
}

.cpts-resource-surface .cpts-practical-query .wp-block-post-template {
  column-gap: 50px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 575px));
  justify-content: center;
  row-gap: 50px;
}

.cpts-practical-card {
  background: var(--wp--preset--color--white);
  border-radius: 30px;
  box-shadow: none;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 169px minmax(169px, auto);
  /* Couac 7034: cards of a row share their height, as on the artboard; the
     grid item stretches and the card fills it, its body rows absorb the rest. */
  height: 100%;
  min-height: 338px;
  overflow: clip;
  position: relative;
}

.cpts-practical-card::after {
  border: 1px solid var(--wp--custom--color--teal-border);
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.cpts-practical-card__media,
.cpts-tool-card__media {
  align-items: center;
  background: var(--wp--preset--color--teal-light);
  display: grid;
  isolation: isolate;
  justify-items: center;
  margin: 0;
  overflow: clip;
  position: relative;
}

.cpts-practical-card__media::before,
.cpts-tool-card__media::before {
  background: var(--wp--preset--color--teal-light) url("images/logo-cpts-brie-teal.webp") center / 180px auto no-repeat;
  background-blend-mode: multiply;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.cpts-tool-card__media::before {
  background-size: min(180px, calc(100% - 16px)) auto;
}

.cpts-practical-card__media:has(img)::before,
.cpts-tool-card__media:has(img)::before {
  display: none;
}

.cpts-tool-card__media .wp-block-post-featured-image,
.cpts-tool-card__media img {
  height: 100%;
  margin: 0;
  object-fit: cover;
  width: 100%;
}

.cpts-practical-card__media .wp-block-post-featured-image {
  align-items: center;
  aspect-ratio: auto;
  display: grid;
  height: 100%;
  justify-items: center;
  margin: 0;
  padding: 0;
  width: 100%;
}

.cpts-practical-card__media .wp-block-post-featured-image img {
  aspect-ratio: auto;
  height: auto;
  max-height: 135px;
  max-width: calc(100% - 80px);
  mix-blend-mode: multiply;
  object-fit: contain;
  padding: 0;
  width: auto;
}

.cpts-resource-surface .cpts-practical-card__body {
  align-content: start;
  box-sizing: border-box;
  column-gap: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(1.6875rem, 1fr);
  row-gap: 0;
  padding: 1.5rem 1.75rem 1.25rem;
}

.cpts-practical-card__body > * {
  margin: 0;
}

.cpts-practical-card__body .wp-block-post-title {
  font-size: 1.4375rem;
  font-weight: 700;
  grid-column: 1 / -1;
  hyphens: none;
  line-height: 1.875rem;
  overflow-wrap: anywhere;
}

.cpts-practical-card__body .wp-block-post-excerpt {
  font-size: 1.125rem;
  grid-column: 1 / -1;
  line-height: 1.6875rem;
  margin-top: 0.75rem;
}

.cpts-practical-card__body .wp-block-post-excerpt p {
  hyphens: none;
  margin: 0;
  overflow-wrap: anywhere;
}

/* The foot of the card: one group of qualifiers on the left, the action on the
   right. Audience chips and the document chip share the flow; the terms wrapper
   dissolves so every chip wraps on the same line. */
.cpts-practical-card__body .cpts-practical-card__attributes {
  align-items: center;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  grid-column: 1;
  grid-row: 3;
  margin-top: 0.75rem;
}

.cpts-practical-card__audiences {
  display: contents;
}

.cpts-practical-card__audiences .cpts-resource-term,
.cpts-tool-card__term-group .cpts-resource-term {
  align-items: center;
  background: var(--wp--preset--color--teal-light);
  border-radius: 999px;
  color: var(--wp--preset--color--teal);
  display: inline-flex;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25rem;
  padding: 0.125rem 0.75rem;
}

.cpts-tool-card__term-group {
  display: contents;
}

.cpts-tool-card__term-group--access .cpts-resource-term {
  background: var(--wp--preset--color--yellow-light);
}

.cpts-tool-card__term-group--access .cpts-resource-term {
  gap: 0.375rem;
}

.cpts-tool-card__term-group--access .cpts-resource-term::before {
  background-color: currentcolor;
  content: "";
  flex: 0 0 auto;
  height: 0.75rem;
  mask: url("images/icon-lock.svg") center / contain no-repeat;
  width: 0.75rem;
}

.cpts-resource-cta--button {
  align-items: center;
  align-self: end;
  color: var(--wp--preset--color--coral);
  display: inline-flex;
  font-size: 1.25rem;
  font-weight: 600;
  gap: 0.625rem;
  grid-column: 2;
  grid-row: 3;
  line-height: 2rem;
}

.cpts-practical-card .cpts-resource-cta--button::after {
  background-color: currentcolor;
  content: "";
  height: 1.25rem;
  mask: url("images/icon-arrow-right.svg") center / contain no-repeat;
  width: 1.25rem;
}

/* The icon says where the CTA goes: external site, document, or a next step.
   On hover the glyph slides the way it points, so the shift travels with the
   mask: right for the arrow, up and right for the external link, down for the
   download. */
.cpts-practical-card .cpts-resource-cta--button.is-external::after {
  --cpts-glyph-shift: translate(3px, -3px);

  mask-image: url("images/icon-external.svg");
}

.cpts-practical-card .cpts-resource-cta--button.is-document::after {
  --cpts-glyph-shift: translateY(4px);

  mask-image: url("images/icon-download.svg");
}

.cpts-practical-card .cpts-resource-cta--button {
  font-weight: 700;
  margin-top: 0.5rem;
}

.cpts-practical-card .cpts-resource-cta--button {
  line-height: 1.6875rem;
}

.cpts-tool-card .cpts-resource-cta--button:not(.is-restricted):not(.is-unavailable) {
  background: var(--wp--preset--color--coral);
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--wp--preset--color--white);
  justify-content: center;
  min-width: 195px;
  padding: 0.5rem 1rem;
}

.cpts-tool-card .cpts-resource-cta--button:not(.is-restricted):not(.is-unavailable)::before {
  background-color: currentcolor;
  content: "";
  height: 1.5rem;
  mask: url("images/icon-download.svg") center / contain no-repeat;
  width: 1.5rem;
}

.cpts-tool-card .cpts-resource-cta--button.is-external:not(.is-restricted):not(.is-unavailable)::before {
  mask-image: url("images/icon-external.svg");
}

.cpts-tool-card .cpts-resource-cta--button.is-unavailable {
  color: var(--wp--preset--color--subtitle);
}

.cpts-tool-card .cpts-resource-cta--button.is-unavailable::before {
  background: url("images/icon-event-clock-xd.webp") center / contain no-repeat;
  content: "";
  flex: 0 0 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
}

.cpts-resource-cta--button.is-restricted::before {
  background-color: currentcolor;
  content: "";
  flex: 0 0 1.5rem;
  height: 1.5rem;
  mask: url("images/icon-lock.svg") center / 120% 120% no-repeat;
  width: 1.5rem;
}

/* The 3.625rem inset clears the diamond drawn by ::before at the padding-box
   origin; a negative text-indent would pull the first line back under it. */
.cpts-resource-section-heading {
  color: var(--wp--preset--color--teal);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.25;
  padding-left: 3.625rem;
  position: relative;
}

/* Inside its section the heading follows the section edge, not the constrained column. */
.cpts-useful-numbers > h2 {
  margin-inline: 0 !important;
  max-width: 100% !important;
}

/* Separates the practical links from the useful numbers above them. */
.cpts-practical-index > .cpts-practical-links-heading {
  margin-block: 4.375rem 3.4375rem;
}

.cpts-resource-section-heading::before {
  background: var(--wp--preset--color--yellow);
  border-radius: 5px;
  content: "";
  height: 31px;
  left: 0;
  position: absolute;
  top: -0.0625rem;
  transform: matrix(-0.6946584, -0.7193397, 0.7193397, -0.6946584, 21.5344, 41.834);
  transform-origin: 0 0;
  width: 31px;
}

.cpts-resource-surface .cpts-useful-numbers-query .wp-block-post-template {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.cpts-resource-surface .cpts-useful-number {
  background: var(--wp--preset--color--teal-light);
  border-radius: 20px;
  box-sizing: border-box;
  display: block;
  flex: 0 0 277px;
  max-width: 277px;
  min-height: 123px;
  padding: 20px 30px 18px;
  position: relative;
}

.cpts-useful-number:has(.cpts-resource-term--large) {
  flex-basis: 424px;
  max-width: 424px;
}

.cpts-useful-number:has(.cpts-resource-term--priority) {
  background: var(--wp--preset--color--teal);
  color: var(--wp--preset--color--white);
}

.cpts-useful-number__variant {
  display: none;
}

.cpts-useful-number > * {
  margin: 0;
}

.cpts-useful-number .wp-block-post-title {
  color: var(--wp--preset--color--teal);
  font-size: 3.125rem;
  font-weight: 700;
  line-height: 1;
  overflow-wrap: normal;
}

.cpts-useful-number .wp-block-post-excerpt {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6875rem;
  margin-top: 0.6875rem;
  overflow-wrap: normal;
}

.cpts-useful-number:has(.cpts-resource-term--priority) .wp-block-post-title,
.cpts-useful-number:has(.cpts-resource-term--priority) .wp-block-post-excerpt {
  color: var(--wp--preset--color--white);
}

.cpts-resource-cta--card-link {
  inset: 0;
  position: absolute;
  z-index: 2;
}

.cpts-resource-surface > .cpts-tools-layout:is(.alignfull, .wp-block) {
  align-items: flex-start;
  column-gap: 48px;
  margin-inline: auto;
  margin-top: 5.4375rem;
  max-width: 1400px;
  width: min(1400px, calc(100vw - (2 * var(--wp--custom--grid-padding))));
}

.cpts-resource-surface .cpts-tools-layout > .cpts-tools-layout__filters {
  flex: 0 0 376px;
}

.cpts-resource-surface .cpts-tools-layout > .cpts-tools-layout__results {
  flex: 0 1 976px;
}

.cpts-collection-filters--sidebar {
  background: var(--wp--preset--color--teal-light);
  border-radius: 30px;
  box-sizing: border-box;
  min-height: 676px;
  padding: 4.25rem 1.875rem 1.25rem;
  position: sticky;
  top: var(--cpts-collection-sidebar-offset, 1.5rem);
}

.cpts-collection-filters--sidebar .cpts-filter-panel__heading {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.cpts-collection-filters--sidebar .cpts-filter-panel__heading h2 {
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 2.625rem;
  margin: 0;
}

.cpts-collection-filters--sidebar .cpts-filter-panel__heading > .cpts-filter-panel__actions > a {
  color: var(--wp--preset--color--coral);
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 2.625rem;
}

.cpts-collection-filters--sidebar fieldset {
  border: 0;
  margin: 0.875rem 0 0;
  padding: 0;
}

.cpts-collection-filters--sidebar legend {
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 2.625rem;
  margin-bottom: -0.125rem;
}

.cpts-collection-filters--sidebar ul {
  display: grid;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cpts-collection-filters--sidebar .cpts-collection-filter {
  align-items: center;
  display: flex;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 1.25rem;
  gap: 0.875rem;
  line-height: 1.4375rem;
}

/* Meme geometrie et meme coche que les cases du panneau agenda : un seul
   dessin de case a cocher sur le site. */
.cpts-collection-filters--sidebar .cpts-collection-filter > span[aria-hidden="true"] {
  border: 2px solid var(--wp--preset--color--teal);
  border-radius: 4px;
  box-sizing: border-box;
  flex: 0 0 20px;
  height: 20px;
  position: relative;
}

.cpts-collection-filters--sidebar .cpts-collection-filter.is-active > span[aria-hidden="true"] {
  background-color: var(--wp--preset--color--teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M2 6.5 4.5 9 10 3'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

.cpts-tools-total {
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem !important;
}

.cpts-tools-query {
  margin: 0;
  width: 100%;
}

.cpts-tools-layout > .wp-block-column:last-child {
  box-sizing: border-box;
  padding-top: 26px;
}

.cpts-resource-surface .cpts-tools-query .wp-block-post-template {
  align-items: stretch;
  display: grid;
  gap: 30px 32px;
  grid-template-columns: repeat(2, minmax(0, 472px));
}

.cpts-tool-card {
  background: var(--wp--preset--color--white);
  border-radius: 30px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 16%), inset 0 0 0 2px var(--wp--custom--color--teal-border);
  display: block;
  height: 100%;
  min-height: 262px;
  overflow: clip;
  position: relative;
}

.cpts-resource-surface .cpts-tool-card__body {
  box-sizing: border-box;
  column-gap: 20px;
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 262px;
  padding: 30px 20px 23px;
  row-gap: 0;
}

.cpts-tool-card__body > * {
  margin: 0;
}

.cpts-tool-card__terms {
  gap: 0.375rem;
  grid-column: 1 / -1;
  grid-row: 1;
}

.cpts-tool-card__term-group .cpts-resource-term {
  font-weight: 600;
}

.cpts-tool-card__body > .cpts-tool-card__media {
  align-self: stretch;
  grid-column: 1;
  grid-row: 2 / -1;
  height: auto;
  margin-top: 1.5rem;
  min-height: 0;
  position: relative;
  width: 102px;
  z-index: 1;
}

.cpts-tool-card__media .wp-block-post-featured-image,
.cpts-tool-card__media img {
  height: 100%;
  object-fit: cover;
  width: 102px;
}

.cpts-tool-card .wp-block-post-title {
  font-size: 1.4375rem;
  font-weight: 700;
  grid-column: 2;
  grid-row: 2;
  hyphens: none;
  line-height: 1.875rem;
  margin-top: 1.5rem;
  overflow-wrap: normal;
}

.cpts-tool-card__meta {
  font-size: 1rem;
  grid-column: 2;
  grid-row: 3;
  line-height: 2rem;
  margin-top: 0.125rem;
}

/* The document meta is bound to a server-side source: the canvas has no value to
   show, so hide Gutenberg's placeholder like the front hides an empty line. */
.editor-styles-wrapper .cpts-tool-card__meta [data-rich-text-placeholder]::after {
  content: none;
}

/* The document kind is a qualifier like the audience and sits in the same chip
   group: outlined where the audience chips are filled, so the two natures read
   apart. Teal on white measures 5.66:1; the light tint of the palette does not. */
.cpts-practical-card__meta {
  align-items: center;
  border: 1px solid var(--wp--preset--color--teal);
  border-radius: 999px;
  color: var(--wp--preset--color--teal);
  display: inline-flex;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25rem;
  margin: 0;
  /* The 1px border is taken out of the padding so the outlined chip stands
     exactly as tall as the filled audience chips beside it. */
  padding: calc(0.125rem - 1px) calc(0.75rem - 1px);
}

.cpts-practical-card__meta:empty {
  display: none;
}

.editor-styles-wrapper .cpts-practical-card__meta [data-rich-text-placeholder]::after {
  content: none;
}

.cpts-tool-card .cpts-resource-cta--button {
  align-self: end;
  font-weight: 600;
  grid-column: 2;
  grid-row: 5;
  justify-self: start;
  line-height: 1.6875rem;
  margin-top: 0.5rem;
}

.cpts-tool-card .cpts-resource-cta--button:not(.is-restricted):not(.is-unavailable) {
  align-self: end;
}

.cpts-resource-surface .cpts-newsletters-query .wp-block-post-template {
  column-gap: 30px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 277px));
  justify-content: center;
  row-gap: 50px;
}

.cpts-resource-surface .cpts-newsletter-card {
  border-radius: 30px;
  display: grid;
  gap: 0;
  height: 356px;
  overflow: clip;
  position: relative;
  width: 277px;
}

.cpts-newsletter-card::after {
  background: var(--wp--preset--color--teal);
  bottom: 0;
  content: "";
  height: 68px;
  left: 0;
  position: absolute;
  right: 0;
}

.cpts-newsletter-card > * {
  margin: 0;
}

.cpts-newsletter-card__cover,
.cpts-newsletter-card__cover img {
  border-radius: 30px;
  height: 356px;
  object-fit: cover;
  object-position: top center;
  width: 277px;
}

.cpts-newsletter-card .wp-block-post-title {
  bottom: 20px;
  color: var(--wp--preset--color--white);
  font-size: 1.375rem;
  font-weight: 700;
  left: 30px;
  line-height: 1.6875rem;
  max-width: 180px;
  position: absolute;
  z-index: 1;
}

.cpts-newsletter-card .wp-block-post-date {
  background: var(--wp--preset--color--yellow-light);
  border-radius: 14px;
  color: var(--wp--preset--color--teal);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35rem;
  padding: 0.1875rem 0.875rem;
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 1;
}

.cpts-newsletter-card .cpts-resource-cta--card-link::after {
  background: rgb(255 255 255 / 18%);
  border-radius: 999px;
  bottom: 12px;
  content: "";
  height: 40px;
  position: absolute;
  right: 18px;
  width: 40px;
}

.cpts-newsletter-card .cpts-resource-cta--card-link::before {
  background-color: var(--wp--preset--color--white);
  bottom: 20px;
  content: "";
  height: 1.5rem;
  mask: url("images/icon-arrow-right.svg") center / contain no-repeat;
  pointer-events: none;
  position: absolute;
  right: 26px;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
  width: 1.5rem;
  z-index: 1;
}

@media (max-width: 1199px) {
  .cpts-resource-surface::before,
  .cpts-resource-hub::after,
  .cpts-practical-index::after {
    content: none;
  }

  .cpts-resource-surface .cpts-resource-hub__grid,
  .cpts-resource-surface .cpts-practical-query .wp-block-post-template,
  .cpts-resource-surface .cpts-tools-query .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cpts-resource-surface .cpts-resource-hub__grid {
    column-gap: 2rem;
  }

  .cpts-resource-surface .cpts-newsletters-query .wp-block-post-template {
    grid-template-columns: repeat(3, minmax(0, 277px));
  }
}

@media (max-width: 1447px) {
  .cpts-resource-surface > .cpts-tools-layout:is(.alignfull, .wp-block) {
    display: grid;
  }

  .cpts-resource-surface .cpts-tools-layout > .wp-block-column {
    width: 100%;
  }

  .cpts-collection-filters--sidebar {
    min-height: 0;
    position: static;
  }
}

@media (max-width: 979px) {
  .cpts-resource-hero__title {
    font-size: clamp(2.5rem, 8vw, 4.375rem);
    line-height: 1.08;
  }

  .cpts-resource-hub-card {
    grid-template-columns: 96px minmax(0, 1fr);
    padding-inline: 1.5rem;
  }

  .cpts-resource-surface .cpts-resource-hub__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cpts-resource-surface .cpts-newsletters-query .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 277px));
  }

  .cpts-useful-number,
  .cpts-useful-number:has(.cpts-resource-term--large) {
    flex: 1 1 calc(50% - 15px);
    max-width: none;
  }
}

@media (max-width: 1118px) {
  .cpts-resource-surface .cpts-practical-query .wp-block-post-template {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 601px) and (max-width: 1447px) {
  .cpts-collection-filters--sidebar {
    column-gap: 2rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 2rem;
  }

  .cpts-collection-filters--sidebar .cpts-filter-panel__heading {
    grid-column: 1 / -1;
  }

  .cpts-collection-filters--sidebar fieldset {
    margin-top: 0.875rem;
  }
}

@media (min-width: 601px) and (max-width: 1198px) {
  .cpts-resource-surface .cpts-tools-query .wp-block-post-template {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .cpts-resource-surface {
    padding-bottom: 4rem;
  }

  .cpts-resource-hub__grid,
  .cpts-resource-surface .cpts-practical-query .wp-block-post-template,
  .cpts-resource-surface .cpts-tools-query .wp-block-post-template,
  .cpts-resource-surface .cpts-newsletters-query .wp-block-post-template {
    grid-template-columns: minmax(0, 1fr);
  }

  .cpts-resource-hub-card {
    height: auto;
    min-height: 0;
    padding: 1.5rem;
  }

  .cpts-resource-hub-card__icon {
    flex-basis: 60px;
    height: 60px;
    width: 60px;
  }

  .cpts-practical-card,
  .cpts-tool-card {
    height: auto;
    min-height: 0;
  }

  .cpts-practical-card {
    grid-template-rows: 169px auto;
  }

  .cpts-tool-card {
    display: block;
  }

  .cpts-collection-filters--sidebar {
    display: block;
  }

  .cpts-tool-card__body > .cpts-tool-card__media {
    grid-column: 1;
    grid-row: 1;
    height: 180px;
    margin: 0 -1.5rem;
    position: relative;
    width: auto;
  }

  .cpts-tool-card__media .wp-block-post-featured-image,
  .cpts-tool-card__media img {
    align-items: center;
    display: grid;
    height: 100%;
    justify-items: center;
    width: 100%;
  }

  /* The media already bleeds sideways, so the top padding was the only thing
     keeping it off the card edge. Dropping it lets the visual sit flush under
     the rounded corners, which the card already clips. */
  .cpts-resource-surface .cpts-tool-card__body {
    column-gap: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 180px auto auto auto auto;
    height: auto;
    min-height: 0;
    padding: 0 1.5rem 1.5rem;
  }

  .cpts-tool-card__terms,
  .cpts-tool-card .wp-block-post-title,
  .cpts-tool-card__meta,
  .cpts-tool-card .cpts-resource-cta--button {
    grid-column: 1;
  }

  /* Scoped through the body because core resets every grid child with
     .is-layout-grid > :is(*, div) { margin: 0 }, whose :is() carries the
     specificity of div. A lone .cpts-tool-card__terms loses to it, which is
     why this gap never appeared under the visual. */
  .cpts-tool-card__body > .cpts-tool-card__terms {
    grid-row: 2;
    margin-top: 1.5rem;
  }

  .cpts-tool-card .wp-block-post-title {
    grid-row: 3;
    margin-top: 1rem;
  }

  .cpts-tool-card__meta {
    grid-row: 4;
  }

  .cpts-tool-card .cpts-resource-cta--button,
  .cpts-tool-card .cpts-resource-cta--button:not(.is-restricted):not(.is-unavailable) {
    align-self: end;
    grid-row: 5;
    margin-top: 1rem;
    max-width: 100%;
    transform: none;
  }

  /* Same specificity as the base rule: otherwise the two-column grid and its
     16px column gap survive under 600px and the CTA stops 16px short. */
  .cpts-resource-surface .cpts-practical-card__body {
    column-gap: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    min-height: 169px;
  }

  .cpts-practical-card__media img {
    max-width: calc(100% - 40px);
  }

  /* Seven stacked cards filled most of a phone screen: two columns keep every
     number in view, and the priority and long numbers still span both. */
  .cpts-resource-surface .cpts-useful-numbers-query .wp-block-post-template {
    display: grid;
    gap: 0.625rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cpts-resource-surface .cpts-useful-numbers-query .wp-block-post-template > li:has(.cpts-resource-term--priority),
  .cpts-resource-surface .cpts-useful-numbers-query .wp-block-post-template > li:has(.cpts-resource-term--large) {
    grid-column: 1 / -1;
  }

  .cpts-resource-surface .cpts-useful-number,
  .cpts-resource-surface .cpts-useful-number:has(.cpts-resource-term--large) {
    border-radius: 1rem;
    height: 100%;
    max-width: none;
    min-height: 0;
    padding: 0.8125rem 0.875rem 0.75rem;
  }

  .cpts-useful-number .wp-block-post-title {
    font-size: clamp(1.5rem, 7.6vw, 1.875rem);
  }

  .cpts-useful-number .wp-block-post-excerpt {
    font-size: 0.8125rem;
    line-height: 1.125rem;
    margin-top: 0.3125rem;
  }

  /* The heading gap is serialized inline by the pattern for the desktop artboard. */
  .cpts-useful-numbers > .wp-block-heading {
    margin: 0 0 var(--wp--preset--spacing--md) !important;
  }

  .cpts-practical-index > .cpts-practical-links-heading {
    margin-bottom: var(--wp--preset--spacing--md);
  }

  .cpts-practical-card__body .wp-block-post-title,
  .cpts-practical-card__body .wp-block-post-excerpt,
  .cpts-practical-card__body .cpts-practical-card__audiences,
  .cpts-practical-card .cpts-resource-cta--button {
    grid-column: 1;
  }

  .cpts-practical-card__body .wp-block-post-title {
    grid-row: 1;
  }

  .cpts-practical-card__body .wp-block-post-excerpt {
    grid-row: 2;
  }

  .cpts-practical-card__body .cpts-practical-card__attributes {
    grid-row: 3;
    margin-top: 1rem;
  }

  .cpts-practical-card .cpts-resource-cta--button {
    grid-row: 4;
    justify-self: end;
    margin-top: 1rem;
  }

  /* La carte suit la colonne au lieu de rester à sa largeur de maquette : sans quoi
     elle se centre à 57px quand le titre est à 27px et les filtres à 15px. */
  .cpts-resource-surface .cpts-newsletter-card {
    height: auto;
    justify-self: stretch;
    width: 100%;
  }

  /* Aperçu générique : un rapport constant cadré sur l'en-tête de la lettre, identique
     d'un mois à l'autre. Plus aucun paragraphe n'est tranché au milieu d'une phrase. */
  .cpts-resource-surface .cpts-newsletter-card__cover {
    aspect-ratio: 277 / 200;
    height: auto;
    width: 100%;
  }

  /* L'image remplit le cadre au lieu de lui imposer son rapport naturel. */
  .cpts-resource-surface .cpts-newsletter-card__cover img {
    aspect-ratio: auto;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    width: 100%;
  }

  /* Newsletter and tool cards change frame here and take their "Carte · mobile" framing. */
  .cpts-resource-surface .cpts-newsletter-card__cover img,
  .cpts-tool-card__media img {
    --cpts-frame-fit: var(--cpts-fit-mobile, var(--cpts-fit));
    --cpts-frame-x: var(--cpts-focal-mobile-x, var(--cpts-focal-x));
    --cpts-frame-y: var(--cpts-focal-mobile-y, var(--cpts-focal-y));
  }

  .cpts-collection-filters__pills {
    gap: 0.75rem;
  }

  .cpts-collection-filters__pills .cpts-collection-filter {
    min-height: 44px;
    padding: 0.5rem 1rem;
  }
}

@media (max-width: 1197px) {
  body.cpts-filter-drawer-open .cpts-resource-surface {
    overflow: visible;
    z-index: 20;
  }

  /* Same toolbar contract as the listing archive: the trigger asks, the total
     answers, so they share one row instead of leaving 50px of nothing between
     them. Columns and the query dissolve to expose the total, which sits three
     levels down. The surface scopes the selector because core prints
     body .is-layout-flex after this sheet and outweighs a lone class. */
  .cpts-resource-surface .cpts-tools-layout {
    column-gap: 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 24px;
  }

  .cpts-tools-layout > .cpts-tools-layout__filters,
  .cpts-tools-layout > .cpts-tools-layout__results,
  .cpts-tools-layout .cpts-tools-query {
    display: contents;
  }

  /* align-self rather than align-items: core sets align-items: normal !important
     on .wp-block-columns, so only the items can carry the centring. */
  .cpts-tools-layout .cpts-filter-panel {
    align-self: center;
    grid-column: 1;
    grid-row: 1;
  }

  .cpts-tools-total {
    align-self: center;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0 !important;
    text-align: right;
  }

  .cpts-tools-query > .wp-block-post-template,
  .cpts-tools-query > .wp-block-query-pagination,
  .cpts-tools-query > .wp-block-query-no-results {
    grid-column: 1 / -1;
  }

  .has-cpts-filter-drawer .cpts-tools-filter-panel {
    background: transparent;
    border-radius: 0;
    display: block;
    grid-template-columns: none;
    min-height: 0;
    padding: 0;
  }

  .has-cpts-filter-drawer .cpts-tools-filter-panel .cpts-filter-panel__body {
    display: grid;
    gap: 1rem;
  }

  .has-cpts-filter-drawer .cpts-tools-filter-panel fieldset {
    margin-top: 0;
  }
}

.editor-styles-wrapper .cpts-resource-surface,
.editor-styles-wrapper .cpts-resource-hub-card,
.editor-styles-wrapper .cpts-practical-card,
.editor-styles-wrapper .cpts-tool-card,
.editor-styles-wrapper .cpts-newsletter-card {
  box-sizing: border-box;
}

/* Cartes outils, infos pratiques et hub ressources : entierement cliquables
   via leur CTA existant ; les liens secondaires (publics, themes) restent
   cliquables au-dessus du lien etire. */
.cpts-tool-card > .cpts-tool-card__body.wp-block-group-is-layout-constrained,
.cpts-practical-card > .cpts-practical-card__body.wp-block-group-is-layout-constrained,
.cpts-resource-hub-card > .wp-block-group-is-layout-constrained {
  position: static;
}

.cpts-tool-card,
.cpts-practical-card,
.cpts-resource-hub-card {
  position: relative;
}

/* Keep the CTA pseudo-elements available for their visible lock and arrow. */
.cpts-tool-card .cpts-resource-cta--button > span::after,
.cpts-practical-card .cpts-resource-cta--button > span::after,
.cpts-resource-hub-card .cpts-resource-hub-card__link a::before {
  content: "";
  inset: 0;
  position: absolute;
}

.cpts-tool-card .cpts-resource-terms a,
.cpts-practical-card .cpts-practical-card__audiences a {
  position: relative;
  z-index: 1;
}

.cpts-practical-card__media img,
.cpts-newsletter-card figure img {
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (min-width: 1118px) and (hover: hover) and (pointer: fine) {
  .cpts-tool-card:hover .cpts-resource-cta--button:not(.is-restricted):not(.is-unavailable) {
    background: var(--wp--preset--color--coral-dark);
    color: var(--wp--preset--color--white);
  }

  .cpts-tool-card:hover .cpts-resource-cta--button.is-restricted {
    color: var(--wp--preset--color--coral-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* Grammaire commune des cartes a fleche : le glyphe glisse, pas de
     soulignement (l'underline reste aux liens texte sans fleche). */
  .cpts-practical-card:hover .cpts-resource-cta--button {
    color: var(--wp--preset--color--coral-dark);
  }

  .cpts-practical-card:hover .cpts-resource-cta--button::after,
  .cpts-resource-hub-card:hover .cpts-resource-hub-card__link a::after {
    transform: var(--cpts-glyph-shift, translateX(4px));
  }

  .cpts-useful-number:hover .wp-block-post-title,
  .cpts-newsletter-card:hover .wp-block-post-title {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .cpts-newsletter-card:hover figure img {
    transform: scale(1.04);
  }

  .cpts-practical-card:hover .cpts-practical-card__media img {
    transform: scale(1.04);
  }

  .cpts-newsletter-card:hover .cpts-resource-cta--card-link::before {
    transform: translateX(4px);
  }

  /* Horizontal pills keep their filled hover; checkbox rows use the shared
     interaction defined by .cpts-checkbox-control. */
  .cpts-collection-filters__pills .cpts-collection-filter:hover:not(.is-active) {
    background: var(--wp--preset--color--teal);
    color: var(--wp--preset--color--white);
  }

}

@media (prefers-reduced-motion: reduce) {
  .cpts-practical-card__media img,
  .cpts-newsletter-card figure img {
    transition: none;
  }
}

/* Public download buttons keep their emphasis; status rows follow the content column. */
.cpts-tool-card .cpts-resource-cta--button:not(.is-restricted):not(.is-unavailable) {
  margin-left: auto;
}

.cpts-newsletter-card .cpts-resource-cta--card-link:focus-visible::before {
  transform: translateX(4px);
}

.cpts-resource-hub-card__link {
  display: flex;
  justify-content: flex-end;
}

.cpts-practical-card .cpts-resource-cta--button::after {
  height: 1.75rem;
  width: 1.75rem;
}

.cpts-practical-card .cpts-resource-cta--button::after,
.cpts-resource-hub-card__link a::after {
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (prefers-reduced-motion: reduce) {
  .cpts-newsletter-card .cpts-resource-cta--card-link::before,
  .cpts-practical-card .cpts-resource-cta--button::after,
  .cpts-resource-hub-card__link a::after {
    transition: none;
  }
}

/* La barre WordPress est fixe au-dessus de 600px et haute de 32px. */
@media screen and (min-width: 601px) {
  body.admin-bar .cpts-collection-filters--sidebar {
    --cpts-collection-sidebar-offset: calc(1.5rem + 32px);
  }
}