/*
 * Ma Literie Française — widget Alma de la fiche produit, version courte :
 * titre, logo + plans (plan actif orange Alma),
 * une ligne de montants, lien « En savoir plus ».
 * Seules les classes stables d'Alma (alma-payment-plans-*) sont ciblées.
 * :is(#main, body) donne la priorité d'un id pour passer devant le reset de la page.
 */
:is(#main, body) .alma-pp-container.mlf-alma {
  --mlf-ink: #1f2a30;
  --mlf-muted: #5f666e;
  --mlf-rule: #d9d5ce;
  --mlf-alma: #fa5022;
  --mlf-ease: cubic-bezier(.16, 1, .3, 1);

  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "title title"
    "logo  plans"
    "plan  plan"
    "more  more";
  align-items: center;
  justify-items: start;
  column-gap: 12px;
  width: 100%;
  margin: 16px 0 4px !important;
  padding: 0 !important;
  border: 0;
  background: none;
  color: var(--mlf-ink);
  font-family: Inter, -apple-system, "Segoe UI", Arial, sans-serif;
  text-align: left;
  box-sizing: border-box;
}

/* Les conteneurs React d'Alma s'effacent : leurs enfants deviennent des cases de la grille. */
:is(#main, body) .alma-pp-container.mlf-alma .alma-widget-container,
:is(#main, body) .alma-pp-container.mlf-alma .alma-payment-plans-container,
:is(#main, body) .alma-pp-container.mlf-alma .alma-payment-plans-eligibility-line,
:is(#main, body) .alma-pp-container.mlf-alma .alma-payment-plans-container > [role="region"] {
  display: contents !important;
}

:is(#main, body) .alma-pp-container.mlf-alma .mlf-alma__title {
  grid-area: title;
  margin: 0 0 6px !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--mlf-ink);
}

/* Logo Alma (ouvre aussi le détail) */
:is(#main, body) .alma-pp-container.mlf-alma .alma-payment-plans-know-more-action {
  grid-area: logo;
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 2px 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
}
:is(#main, body) .alma-pp-container.mlf-alma .alma-payment-plans-know-more-action svg { width: 52px !important; height: auto !important; display: block; }
:is(#main, body) .alma-pp-container.mlf-alma .alma-payment-plans-know-more-action svg path { fill: var(--mlf-ink) !important; }

/* Plans : texte simple, plan actif en pastille orange */
:is(#main, body) .alma-pp-container.mlf-alma .alma-payment-plans-eligibility-options {
  grid-area: plans;
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none;
}
:is(#main, body) .alma-pp-container.mlf-alma .alma-payment-plans-eligibility-options button {
  min-width: 32px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--mlf-ink) !important;
  font: 700 13px/1 Inter, -apple-system, "Segoe UI", Arial, sans-serif !important;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color .2s var(--mlf-ease), color .2s var(--mlf-ease);
}
:is(#main, body) .alma-pp-container.mlf-alma .alma-payment-plans-eligibility-options button:hover {
  background: #f3f1ed !important;
}
:is(#main, body) .alma-pp-container.mlf-alma .alma-payment-plans-eligibility-options button.alma-payment-plans-active-option {
  background: var(--mlf-alma) !important;
  color: #fff !important;
}
:is(#main, body) .alma-pp-container.mlf-alma button:focus-visible,
:is(#main, body) .alma-pp-container.mlf-alma .alma-payment-plans-payment-info:focus-visible {
  outline: 2px solid var(--mlf-ink) !important;
  outline-offset: 2px;
}

/* Texte Alma : visible tel quel quand la ligne n'a pas pu être construite (produit non éligible). */
:is(#main, body) .alma-pp-container.mlf-alma .alma-payment-plans-payment-info {
  grid-area: plan;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  text-align: left !important;
  cursor: pointer;
}
:is(#main, body) .alma-pp-container.mlf-alma .alma-payment-plans-payment-info p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--mlf-muted) !important;
}

/* Ligne de montants */
:is(#main, body) .alma-pp-container.mlf-alma .mlf-alma__line {
  grid-area: plan;
  margin: 6px 0 0 !important;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mlf-ink);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  animation: mlf-alma-in .3s var(--mlf-ease) both;
}
:is(#main, body) .alma-pp-container.mlf-alma .mlf-alma__line strong { font-weight: 700; }
:is(#main, body) .alma-pp-container.mlf-alma .mlf-alma__fees { color: var(--mlf-muted); white-space: nowrap; }

/* Mode ligne : le texte Alma devient le lien « En savoir plus ». */
:is(#main, body) .alma-pp-container.mlf-alma.is-enhanced .alma-payment-plans-payment-info {
  grid-area: more;
  margin: 4px 0 0 !important;
}
:is(#main, body) .alma-pp-container.mlf-alma.is-enhanced .alma-payment-plans-payment-info p:first-child {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
:is(#main, body) .alma-pp-container.mlf-alma.is-enhanced .alma-payment-plans-payment-info p + p {
  font-size: 0 !important;
  line-height: 1 !important;
  color: var(--mlf-ink) !important;
}
:is(#main, body) .alma-pp-container.mlf-alma.is-enhanced .alma-payment-plans-payment-info p + p::before {
  content: "En savoir plus" / "";
  font-size: 14px;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
:is(#main, body) .alma-pp-container.mlf-alma.is-enhanced .alma-payment-plans-payment-info:hover p + p::before {
  text-decoration-thickness: 2px;
}

@keyframes mlf-alma-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#main, body) .alma-pp-container.mlf-alma *,
  :is(#main, body) .alma-pp-container.mlf-alma *::before {
    animation: none !important;
    transition: none !important;
  }
}