/**
 * Composant : lettre d'information (parts/cta-newsletter.html)
 *
 * Même langage que le bloc « Consultations » (fond clair, titre en deux temps,
 * bouton de l'en-tête) mais un visuel propre : une « lettre » en papier ivoire,
 * légèrement inclinée, posée sur une pile. Fond sauge clair : le pied de page,
 * vert foncé, vient juste après, on évite d'empiler deux blocs sombres.
 */

.lobst-newsletter {
  position: relative;
  isolation: isolate;
  margin-block: var(--wp--preset--spacing--80) !important;
  border-radius: var(--wp--custom--radius--lg);
  background:
    radial-gradient(55% 90% at 100% 50%, rgba(191, 215, 192, 0.55) 0%, transparent 70%),
    var(--wp--preset--color--surface-mint);
  overflow: hidden;
  /* Le bloc s'adapte à sa propre largeur : il est aussi utilisé dans la
     colonne étroite des cas cliniques, pas seulement en pleine largeur. */
  container-type: inline-size;
}

.lobst-newsletter__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: var(--wp--preset--spacing--70);
  padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
}

.lobst-newsletter__title {
  margin: 0 0 var(--wp--preset--spacing--40);
  max-width: 17em;
  font-size: var(--wp--preset--font-size--3-x-large);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--contrast);
}

.lobst-newsletter__title em {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--wp--preset--color--primary);
}

.lobst-newsletter__lead {
  margin: 0 0 var(--wp--preset--spacing--60);
  max-width: 32em;
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.65;
  color: var(--wp--preset--color--muted);
}

/* --- Formulaire : champ et bouton dans une même pilule -------------------- */
.lobst-newsletter__form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 36rem;
  padding: 0.4rem;
  border: 1px solid var(--wp--preset--color--secondary);
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--base);
  box-shadow: var(--wp--preset--shadow--pill);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.lobst-newsletter__form:focus-within {
  border-color: var(--wp--preset--color--primary);
  box-shadow: 0 0 0 3px rgba(19, 82, 46, 0.14), var(--wp--preset--shadow--pill);
}

.lobst-newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 1rem;
  border: 0;
  background: transparent;
  font-size: var(--wp--preset--font-size--md);
  color: var(--wp--preset--color--contrast);
  outline: none; /* l'anneau est porté par la pilule entière (:focus-within) */
}

.lobst-newsletter__input::placeholder {
  color: var(--wp--preset--color--muted);
}

.lobst-newsletter .lobst-btn {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 1.6rem;
  font-size: var(--wp--preset--font-size--md);
}

.lobst-newsletter__fine {
  margin: var(--wp--preset--spacing--30) 0 0 1.2rem;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--muted);
}

/* --- Visuel : la lettre --------------------------------------------------- */
.lobst-newsletter__visual {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--wp--preset--spacing--40);
}

/* Deux feuilles en dessous, pour l'effet de pile. */
.lobst-newsletter__visual::before,
.lobst-newsletter__visual::after {
  content: "";
  position: absolute;
  inset: 12% 14% 8%;
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--base);
  box-shadow: var(--wp--preset--shadow--card);
}

.lobst-newsletter__visual::before {
  transform: rotate(-7deg);
  opacity: 0.6;
}

.lobst-newsletter__visual::after {
  transform: rotate(4deg);
  opacity: 0.85;
}

.lobst-letter {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 21rem;
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
  border-radius: var(--wp--custom--radius--md);
  background:
    linear-gradient(var(--wp--preset--color--surface-cream), var(--wp--preset--color--surface-cream)) padding-box;
  border-top: 4px solid var(--wp--preset--color--primary);
  box-shadow: var(--wp--preset--shadow--deep);
  transform: rotate(-1.5deg);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .lobst-newsletter:hover .lobst-letter {
    transform: rotate(0deg) translateY(-4px);
  }
}

.lobst-letter__brand {
  margin: 0;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: var(--wp--preset--font-size--xl);
  font-style: italic;
  font-weight: var(--wp--custom--font-weight--medium);
  color: var(--wp--preset--color--primary);
}

.lobst-letter__kicker {
  margin: 0.15rem 0 var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--30);
  border-bottom: 1px solid var(--wp--preset--color--border);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: var(--wp--custom--letter-spacing--label);
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.lobst-letter__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: letter;
}

.lobst-letter__list li {
  counter-increment: letter;
  position: relative;
  padding: 0 0 var(--wp--preset--spacing--30) 2.1rem;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: var(--wp--preset--font-size--md);
  font-weight: var(--wp--custom--font-weight--medium);
  line-height: 1.35;
  color: var(--wp--preset--color--contrast);
}

.lobst-letter__list li::before {
  content: counter(letter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--secondary);
}

.lobst-letter__list span {
  display: block;
  margin-bottom: 0.1rem;
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: var(--wp--custom--letter-spacing--label);
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}

.lobst-letter__sign {
  margin: var(--wp--preset--spacing--20) 0 0;
  font-family: var(--wp--preset--font-family--newsreader);
  font-style: italic;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
  text-align: right;
}

/* Champ invisible mais lu par les lecteurs d'écran. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Bloc étroit (tablette, mobile, colonne de texte) --------------------- */
@container (max-width: 820px) {
  .lobst-newsletter__inner {
    grid-template-columns: 1fr;
    padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
  }

  /* La lettre passe sous le formulaire, en plus discret. */
  .lobst-newsletter__visual {
    max-width: 22rem;
    margin-inline: auto;
  }
}

@container (max-width: 560px) {
  .lobst-newsletter__visual {
    display: none; /* sur petit écran, le formulaire prime */
  }

  .lobst-newsletter__form {
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem;
    border-radius: var(--wp--custom--radius--lg);
  }

  .lobst-newsletter .lobst-btn {
    width: 100%;
  }

  .lobst-newsletter__fine {
    margin-left: 0;
  }
}

/* --- Formulaire : choix WhatsApp / e-mail, prénom, coordonnée ------------- */
.lobst-newsletter__choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--wp--preset--spacing--30);
  padding: 0;
  border: 0;
}

.lobst-newsletter__choice-label {
  float: left; /* permet au légende de rester sur la même ligne que les choix */
  margin-right: 0.25rem;
  padding: 0;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: var(--wp--preset--color--text-main);
}

.lobst-newsletter__choice label {
  position: relative;
  cursor: pointer;
}

.lobst-newsletter__choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lobst-newsletter__choice span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--wp--preset--color--secondary);
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: var(--wp--preset--color--primary);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lobst-newsletter__choice input:checked + span {
  border-color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}

.lobst-newsletter__choice input:focus-visible + span {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

.lobst-newsletter__input--name {
  flex: 0 1 9.5rem;
}

.lobst-newsletter__input[hidden],
.lobst-newsletter label[hidden] {
  display: none;
}

.lobst-newsletter__sep {
  flex: 0 0 1px;
  align-self: stretch;
  margin: 0.6rem 0;
  background: var(--wp--preset--color--border);
}

.lobst-newsletter__input[aria-invalid="true"] {
  color: #b42318;
}

.lobst-newsletter__status {
  min-height: 0;
  margin: var(--wp--preset--spacing--30) 0 0 1.2rem;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
}

.lobst-newsletter__status:empty {
  display: none;
}

.lobst-newsletter__status.is-ok {
  color: var(--wp--preset--color--primary);
}

.lobst-newsletter__status.is-error {
  color: #b42318;
}

.lobst-newsletter__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lobst-newsletter__form-wrap {
  position: relative;
}

@media (max-width: 781px) {
  .lobst-newsletter__sep {
    display: none;
  }

  .lobst-newsletter__input--name {
    flex: 1 1 auto;
  }

  .lobst-newsletter__status {
    margin-left: 0;
  }
}

@container (max-width: 560px) {
  .lobst-newsletter__sep {
    display: none;
  }

  .lobst-newsletter__input,
  .lobst-newsletter__input--name {
    flex: 1 1 auto;
    border-bottom: 1px solid var(--wp--preset--color--border);
    border-radius: 0;
  }
}