.cpts-home-newsletter {
  background: var(--wp--preset--color--newsletter-yellow);
  border-radius: 0 30px 0 0;
  box-sizing: border-box;
  isolation: isolate;
  min-height: 320px;
  overflow: visible;
  padding: 0;
  position: relative;
}

.cpts-newsletter-placement {
  margin-block-start: 145px;
}

.cpts-home-newsletter::before {
  background: var(--wp--preset--color--teal);
  border-radius: 20px;
  content: "";
  height: 92px;
  left: 37px;
  position: absolute;
  top: -46px;
  transform: rotate(-30deg);
  width: 92px;
  z-index: 0;
}

@media (min-width: 1200px) {
  .cpts-home-newsletter {
    background: transparent;
    background-color: transparent;
    background-image: none;
    overflow: visible;
  }

  .cpts-home-newsletter::before {
    background: var(--wp--custom--color--newsletter-teal);
    border-radius: 20px;
    height: 150px;
    left: calc(50% - 518px);
    top: 31px;
    transform: matrix(-0.8829476, 0.4694716, -0.4694716, -0.8829476, 0, 0);
    transform-origin: 0 0;
    width: 150px;
    z-index: 2;
  }

  .cpts-home-newsletter::after {
    background: var(--wp--preset--color--newsletter-yellow);
    border-radius: 0 30px 0 0;
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: calc(50% + 600px);
    z-index: 0;
  }
}

.cpts-home-newsletter > .cpts-newsletter-grid {
  align-items: start;
  box-sizing: border-box;
  column-gap: 74px;
  display: grid;
  grid-template-columns: 499px 372px;
  margin: 0 auto;
  max-width: none;
  min-height: 320px;
  padding: 48px 0 11px;
  position: relative;
  width: 1052px;
  z-index: 1;
}

.cpts-home-newsletter .cpts-cta__copy {
  padding-top: 30px;
}

.cpts-home-newsletter .cpts-newsletter-title {
  align-items: center;
  color: var(--wp--preset--color--text);
  display: flex;
  font: 700 22px/30px var(--wp--preset--font-family--montserrat);
  gap: 12px;
  margin: 0;
}

.cpts-home-newsletter .cpts-newsletter-title::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none'%3E%3Ccircle cx='15' cy='15' r='13.75' stroke='%232d2d2d' stroke-width='2.5'/%3E%3Cpath d='M9 15h11m-4-4 4 4-4 4' stroke='%232d2d2d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  content: "";
  flex: 0 0 30px;
  height: 30px;
  width: 30px;
}

.cpts-home-newsletter .cpts-newsletter-copy {
  color: var(--wp--preset--color--text);
  font: 400 18px/27px var(--wp--preset--font-family--montserrat);
  margin: 25px 0 0;
  max-width: 499px;
}

.cpts-home-newsletter .cpts-newsletter-link {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  padding: 0;
  width: 372px;
}

.cpts-newsletter-signup {
  color: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--montserrat);
}

.cpts-newsletter-signup form {
  display: grid;
  gap: 21px;
  grid-template-columns: minmax(0, 1fr);
  width: 372px;
}

.cpts-newsletter-signup__fields {
  display: grid;
  gap: 14px;
}

.cpts-newsletter-signup__names,
.cpts-newsletter-signup__email-row {
  align-items: center;
  display: grid;
  gap: 12px;
}

.cpts-newsletter-signup__names {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cpts-newsletter-signup__email-row {
  grid-template-columns: minmax(0, 1fr) 130px;
}

.cpts-newsletter-signup p,
.cpts-newsletter-signup__field,
.cpts-newsletter-signup__field label {
  margin: 0;
}

.cpts-newsletter-signup__field label {
  display: block;
}

/* The white field only reaches 1.67 against the newsletter yellow, so the border
   carries the whole boundary and must clear 3 on both sides (WCAG 2.2 SC 1.4.11).
   border-soft sat at 1.38 on white and 1.21 on yellow; muted measures 5.74 and
   3.44. It is a preset used elsewhere on white only, hence the local override. */
.cpts-newsletter-signup :is(input[type="text"], input[type="email"], select) {
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--custom--color--muted);
  border-radius: var(--wp--custom--radius--field);
  box-sizing: border-box;
  color: var(--wp--preset--color--text);
  font: 400 18px/24px var(--wp--preset--font-family--montserrat);
  height: 44px;
  min-height: 44px;
  padding: 9px 14px;
  width: 100%;
}

.cpts-newsletter-signup select {
  appearance: none;
  /* Same grey as the placeholder it sits beside, now that the token moved. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath fill='%23666666' d='m0 0 12 14L24 0z'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 18px 11px;
  padding-right: 48px;
}

.cpts-newsletter-signup ::placeholder {
  color: var(--wp--custom--color--placeholder);
  opacity: 1;
}

.cpts-newsletter-signup button {
  align-items: center;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--teal);
  border-radius: var(--wp--custom--radius--field);
  box-sizing: border-box;
  color: var(--wp--preset--color--teal);
  cursor: pointer;
  display: inline-flex;
  font: 400 18px/24px var(--wp--preset--font-family--montserrat);
  height: 44px;
  justify-content: center;
  min-height: 44px;
  padding: 9px 18px;
  width: 130px;
}

@media (min-width: 1118px) and (hover: hover) and (pointer: fine) {
  .cpts-newsletter-signup button:hover {
    background: var(--wp--preset--color--teal);
    color: var(--wp--preset--color--white);
  }
}

.cpts-newsletter-signup .cpts-newsletter-signup__confirmation {
  margin-top: 16px;
}

.cpts-newsletter-signup .cpts-newsletter-signup__confirmation button {
  width: auto;
}

.cpts-newsletter-signup__consent,
.cpts-newsletter-signup .cpts-form-altcha-notice {
  width: 444px;
}

.cpts-newsletter-signup__consent label {
  align-items: start;
  cursor: pointer;
  display: grid;
  font: 400 14px/18px var(--wp--preset--font-family--montserrat);
  gap: 10px;
  grid-template-columns: 20px minmax(0, 1fr);
  letter-spacing: -0.22px;
}

/* Meme grammaire que .cpts-checkbox-control du theme : carre blanc borde de
   teal, coche blanche sur teal. La case tenait encore le rendu natif du
   navigateur en 14px, seul reste de cette famille sur le site.
   La marge negative centre la boite de 20px sur une ligne de 18px. */
.cpts-newsletter-signup__consent input {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--teal);
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  height: 20px;
  margin: -1px 0 0;
  transition:
    background-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
    border-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
  width: 20px;
}

.cpts-newsletter-signup__consent input:checked {
  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;
}

@media (min-width: 1118px) and (hover: hover) and (pointer: fine) {
  .cpts-newsletter-signup__consent label:hover input:not(:checked) {
    border-color: var(--wp--preset--color--coral);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cpts-newsletter-signup__consent input {
    transition: none;
  }
}

.cpts-newsletter-signup a {
  color: var(--wp--preset--color--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Le corail ne tient que 1.99 contre le jaune newsletter, sous le seuil de 3
   exige pour un indicateur de focus. Le teal y monte a 3.39 et reste la couleur
   de la famille. */
.cpts-newsletter-signup :is(input, select, button, a):focus-visible {
  outline: 3px solid var(--wp--preset--color--teal);
  outline-offset: 3px;
}

.cpts-newsletter-signup__notice {
  border-radius: var(--wp--custom--radius--field);
  display: grid;
  gap: 4px;
  line-height: 1.45;
  padding: 12px 14px;
}

.cpts-newsletter-signup__notice.is-success {
  background: var(--wp--preset--color--teal-light);
}

.cpts-newsletter-signup__notice.is-error,
.cpts-newsletter-signup__notice.is-locked {
  background: var(--wp--preset--color--yellow-light);
}

.cpts-newsletter-signup .cpts-newsletter-signup__archive {
  margin-top: 16px;
}

.cpts-newsletter-signup .cpts-form-honeypot {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (min-width: 1200px) and (max-width: 1343px) {
  .cpts-home-newsletter::after {
    width: 100%;
  }
}

@media (min-width: 782px) and (max-width: 1343px) {
  .cpts-home-newsletter > .cpts-newsletter-grid {
    column-gap: 40px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    padding: 64px 72px 48px 48px;
    margin-inline: auto;
    width: min(var(--cpts-layout-band), 100%);
  }

  .cpts-home-newsletter .cpts-cta__copy {
    padding-top: 30px;
  }

  .cpts-home-newsletter .cpts-newsletter-link,
  .cpts-newsletter-signup form,
  .cpts-newsletter-signup__consent,
  .cpts-newsletter-signup .cpts-form-altcha-notice {
    width: 100%;
  }
}

@media (max-width: 781px) {
  .cpts-home-newsletter {
    min-height: 719px;
  }

  .cpts-newsletter-placement {
    margin-block-start: 157px;
  }

  .cpts-home-newsletter > .cpts-newsletter-grid {
    display: block;
    min-height: 719px;
    padding: 88px 15px 21px;
    width: 100%;
  }

  .cpts-home-newsletter .cpts-cta__copy {
    padding-top: 0;
  }

  .cpts-home-newsletter .cpts-cta__copy .cpts-newsletter-copy {
    margin-top: 23px;
    max-width: none;
  }

  .cpts-home-newsletter .cpts-newsletter-link {
    margin-top: 19px;
    width: 100%;
  }

  .cpts-newsletter-signup form,
  .cpts-newsletter-signup__consent,
  .cpts-newsletter-signup .cpts-form-altcha-notice {
    width: 100%;
  }

  .cpts-newsletter-signup form {
    gap: 27px;
  }

  .cpts-newsletter-signup__fields,
  .cpts-newsletter-signup__names,
  .cpts-newsletter-signup__email-row {
    gap: 21px;
    grid-template-columns: minmax(0, 1fr);
  }

  .cpts-newsletter-signup button {
    justify-self: center;
  }
}

@media (max-width: 339px) {
  .cpts-home-newsletter > .cpts-newsletter-grid {
    padding-inline: 10px;
  }
}

/* The proof of work runs at submit time here, so the button carries the wait.
   Same grammar as the contact form: disabled, aria-busy, a spoken label. */
.cpts-newsletter-signup button[aria-busy="true"] {
  cursor: progress;
  gap: 8px;
  opacity: 0.75;
}

.cpts-newsletter-signup button[aria-busy="true"]::before {
  animation: cpts-newsletter-spin 800ms linear infinite;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  box-sizing: border-box;
  content: "";
  height: 16px;
  width: 16px;
}

@keyframes cpts-newsletter-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cpts-newsletter-signup button[aria-busy="true"]::before {
    animation: none;
  }
}

/* Aligned on the consent grid right above it: same 20px marker column, same
   gutter, so the two texts start on the same vertical line. */
.cpts-newsletter-signup .cpts-form-altcha-notice {
  display: grid;
  gap: 10px;
  grid-template-columns: 20px minmax(0, 1fr);
}

.cpts-newsletter-signup .cpts-form-altcha-notice svg {
  justify-self: center;
}