/* Pages principales du Figma « Libwatch - New » (page « Site marketing —
   2026 ») : Accueil 122:9236, Tarifs 122:10882, Sécurité et données 122:9916,
   Alertes CVE 122:12100, LibWatch en bref 123:31909 (et leurs cadres 390).
   Tout est sous .pm ; les blocs communs (en-tête de section, grille de cartes,
   étapes, chiffres, FAQ, appel final, tableaux, pastilles) servent aux cinq
   pages. Seuils : ≤ 767 px (cadres 390), 768-1023 tablette, ≥ 1024 desktop. */

.pm {
  /* Variables blue/100 et blue/400 du Figma (carte « Le plus choisi » sur
     fond bg/accent, identique en clair et en sombre) : absentes du socle. */
  --pm-blue-100: #dce4ff;
  --pm-blue-400: #5194ff;
}

.pm [id] {
  scroll-margin-top: 72px; /* hauteur de la navigation collante */
}

/* ── Rythme des sections (paddings mesurés dans le Figma) ───────────────── */
.pm .pm-hero { --section-pad-y: var(--space-12); }             /* 80 */
.pm .pm-pad-72 { --section-pad-y: 72px; }
.pm .pm-pad-64 { --section-pad-y: var(--space-11); }
.pm .pm-pad-128 { --section-pad-y: var(--space-14); }
.pm .pm-pad-0-96 { padding-top: 0; padding-bottom: var(--space-13); }
.pm .pm-files { padding-top: var(--space-10); padding-bottom: var(--space-11); } /* 48 / 64 */
.pm .pm-hero--pricing { padding-bottom: var(--space-10); }      /* 80 / 48 */

.pm .pm-rule-top { border-top: 1px solid var(--border-default); }
.pm .pm-rule-bottom { border-bottom: 1px solid var(--border-default); }

@media (max-width: 767px) {
  .pm .pm-hero { padding-top: var(--space-9); padding-bottom: var(--space-10); } /* 40 / 48 */
  .pm .pm-hero--pricing { padding-bottom: var(--space-8); }                      /* 40 / 32 */
  .pm .pm-pad-72 { padding-block: var(--space-10); }                             /* 48 */
  .pm .pm-pad-128 { padding-block: var(--space-11); }                            /* 64 */
  .pm .pm-pad-64 { padding-block: var(--space-10); }
  .pm .pm-pad-0-96 { padding-top: 0; padding-bottom: 56px; }
  .pm .pm-files { padding-block: var(--space-9) var(--space-10); }
}

/* ── En-tête de section : sur-titre, titre, chapô (16 px, 12 sur mobile) ── */
.pm-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pm-head__lead {
  max-width: 760px;
  color: var(--text-secondary);
}

.pm-head + .pm-block { margin-top: var(--space-10); }           /* 48 */
.pm-head + .pm-block--32 { margin-top: var(--space-8); }

@media (max-width: 767px) {
  .pm-head { gap: var(--space-4); }
  .pm-head__lead { font-size: 15px; line-height: 23px; } /* Body/S dans les cadres 390 */
  .pm-head + .pm-block,
  .pm-head + .pm-block--32 { margin-top: var(--space-8); }
}

/* ── Héros ──────────────────────────────────────────────────────────────── */
.pm-hero__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-11);
}

.pm-hero__text {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-7);
}

.pm-hero__lead {
  max-width: 720px;
  color: var(--text-secondary);
}

.pm-hero__title--narrow { max-width: 900px; }

.pm-hero__note {
  color: var(--text-muted);
}

.pm-hero--pricing .pm-hero__text { gap: var(--space-6); }

.pm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

@media (max-width: 1099px) {
  .pm-hero__row { flex-direction: column; gap: var(--space-10); }
  .pm-hero__visual { width: 100%; max-width: 560px; }
}

@media (max-width: 767px) {
  .pm-hero__row { gap: var(--space-7); }
  .pm-hero__text { gap: var(--space-6); }
  .pm-hero--pricing .pm-hero__text { gap: var(--space-6); }
  .pm-hero__visual { max-width: none; }

  /* Boutons du Figma 390 : pleine largeur, taille M, 12 px d'écart */
  .pm-actions { flex-direction: column; align-items: stretch; gap: var(--space-4); width: 100%; }
  .pm-actions .btn { justify-content: center; }
  .pm .pm-actions .btn--l,
  .pm .pm-final .btn--l {
    padding: 10px var(--space-5);
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0;
  }
}

/* Aperçu « Agence Lumen » (accueil) et « En bref » (sécurité) */
.pm-panel {
  width: 480px;
  flex: none;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.pm-panel--440 { width: 440px; }

.pm-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.pm-panel__head-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.pm-panel__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.pm-panel__row:last-of-type { border-bottom: 0; }
.pm-panel--440 .pm-panel__row:last-of-type { border-bottom: 1px solid var(--border-default); }

.pm-panel__name {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

.pm-panel__name .t-code-s { color: var(--text-muted); }
.pm-panel__head .t-label-s { color: var(--text-muted); }

.pm-panel__foot {
  padding: var(--space-4) var(--space-6);
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.pm-panel__foot--badge { padding-block: 14px; }

/* Lignes « Lit / Garde / Exécute… » : libellé 72 px + valeur */
.pm-panel__fact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.pm-panel__fact dt {
  flex: none;
  width: 72px;
  color: var(--text-muted);
}

.pm-panel__fact dd {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

@media (max-width: 1099px) {
  .pm-panel,
  .pm-panel--440 { width: 100%; }
}

/* ── Bandeau « Alerte en cours » ────────────────────────────────────────── */
.pm-alert {
  display: block;
  padding: var(--space-5) var(--gutter);
  background: var(--critical-subtle);
  color: var(--critical-text);
}

.pm-alert:hover { color: var(--critical-text); }
.pm-alert:hover .pm-alert__text { text-decoration: underline; text-underline-offset: 3px; }

.pm-alert__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  max-width: var(--container);
  margin-inline: auto;
}

@media (max-width: 767px) {
  .pm-alert__inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* ── Écosystèmes lus (bande sous l'alerte) ──────────────────────────────── */
.pm-eco {
  --section-pad-y: var(--space-9);
  border-block: 1px solid var(--border-default);
}

.pm-eco__label { color: var(--text-muted); }

.pm-eco__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-9);
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}

.pm-eco__list a {
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 26px;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.pm-eco__list a:hover { color: var(--text-accent); }

@media (max-width: 767px) {
  .pm .pm-eco { padding-block: var(--space-8); }
  .pm-eco__list { gap: var(--space-4) var(--space-5); }
  .pm-eco__list a {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 12px;
    line-height: 21px;
    letter-spacing: 0;
  }
}

/* ── Rangée « colonne 360 + contenu » (étapes, FAQ, parcours…) ──────────── */
.pm-split {
  display: flex;
  align-items: flex-start;
  gap: var(--space-11);
}

.pm-split__aside {
  display: flex;
  flex: none;
  width: 360px;
  flex-direction: column;
  gap: var(--space-5);
}

.pm-split__main {
  flex: 1 1 0;
  min-width: 0;
}

.pm-link {
  display: inline-block;
  color: var(--text-accent);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
}

.pm-link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1023px) {
  .pm-split { flex-direction: column; gap: var(--space-8); }
  .pm-split__aside { width: 100%; }
}

@media (max-width: 767px) {
  .pm-split { gap: var(--space-7); }
}

/* ── Étapes numérotées avec rail (Comment ça marche, Reprendre la main) ── */
.pm-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-step {
  display: flex;
  align-items: stretch;
  gap: var(--space-7);
}

.pm-step__rail {
  display: flex;
  flex: none;
  width: 40px;
  flex-direction: column;
  align-items: center;
}

.pm-step__num {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: var(--space-3) 0;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
}

.pm-step--accent .pm-step__num {
  background: var(--bg-accent);
  border-color: var(--bg-accent);
  color: var(--text-on-accent);
}

.pm-step__line {
  flex: 1 0 0;
  width: 1.5px;
  background: var(--border-strong);
}

.pm-step:last-child .pm-step__line { display: none; }

.pm-step__body {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: 6px 0 var(--space-9);
}

.pm-step:last-child .pm-step__body { padding-bottom: 0; }
.pm-step__body p { color: var(--text-secondary); }

@media (max-width: 767px) {
  .pm-step { gap: var(--space-5); }
  .pm-step__rail { width: 32px; }
  .pm-step__body { padding-bottom: var(--space-8); }
  .pm-step__title {
    font-size: 19px;
    line-height: 26px;
    letter-spacing: -0.005em;
  }
  .pm-step__body p {
    font-size: 15px;
    line-height: 23px;
  }
}

/* ── Grille de cartes à filets (scanners, offres, hébergement) ──────────── */
.pm-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--border-strong);
  border-left: 1.5px solid var(--border-strong);
}

.pm-cards__item { display: contents; }

.pm-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px;
  background: var(--bg-surface);
  border-right: 1.5px solid var(--border-strong);
  border-bottom: 1.5px solid var(--border-strong);
  color: var(--text-primary);
}

a.pm-card:hover { color: var(--text-primary); background: var(--bg-accent-subtle); }
a.pm-card:hover .pm-card__link { text-decoration: underline; text-underline-offset: 3px; }

.pm-card__kicker { color: var(--text-muted); }
.pm-card__text { color: var(--text-secondary); }
.pm-card__link { color: var(--text-accent); font-weight: 600; font-size: 15px; line-height: 20px; }

@media (max-width: 1023px) {
  .pm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .pm-cards { grid-template-columns: minmax(0, 1fr); }
  .pm-card { padding: var(--space-6); }
  .pm-card .t-h3 {
    font-size: 19px;
    line-height: 26px;
    letter-spacing: -0.005em;
  }
}

/* ── Bloc navy « Votre code reste chez vous » ───────────────────────────── */
.pm-navy .overline { color: var(--brand-sky); }
.pm-navy .pm-head__title { color: var(--text-on-accent); }
.pm-navy .pm-head__lead { color: var(--ink-300); }

.pm-trust {
  display: flex;
  align-items: flex-start;
  gap: var(--space-11);
}

.pm-trust__box {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--blue-900);
}

.pm-trust__box .t-label-s { color: var(--brand-sky); }

.pm-trust__box ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-on-accent);
}

.pm-trust__link {
  flex: none;
  width: 260px;
  padding-top: var(--space-6);
}

.pm-trust__link a { color: var(--brand-sky); }

@media (max-width: 1023px) {
  .pm-trust { flex-wrap: wrap; gap: var(--space-7); }
  .pm-trust__link { width: 100%; padding-top: 0; }
}

@media (max-width: 767px) {
  .pm-trust { flex-direction: column; align-items: stretch; }
}

/* ── Chiffres (accueil, tarifs) ─────────────────────────────────────────── */
.pm-stats {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-stat {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-8);
  border-left: 1px solid var(--border-default);
}

.pm-stat:first-child { padding-left: 0; border-left: 0; }
.pm-stat__text { color: var(--text-secondary); }
.pm-stats--accent .t-data-xl { color: var(--text-accent); }

@media (max-width: 767px) {
  .pm-stats { flex-direction: column; gap: var(--space-7); }
  .pm-stat,
  .pm-stat:first-child { padding: 0; border-left: 0; }
}

/* ── FAQ (colonne + questions) ──────────────────────────────────────────── */
/* Figma : le signe +/− est en H3 26/32, la ligne de question fait 32 px de
   haut (73 px par question fermée) ; le socle le pose en 26/26. */
.pm .faq__icon { line-height: 32px; }

.pm-faq__list .faq__answer { max-width: 680px; }

.pm-faq .faq:last-child { border-bottom: 0; }

/* ── Appel final ────────────────────────────────────────────────────────── */
.pm-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.pm-final__title { max-width: 900px; }
.pm-final__lead { max-width: 680px; color: var(--text-secondary); }

@media (max-width: 767px) {
  .pm-final { align-items: stretch; text-align: left; }
  .pm-final .pm-actions { width: 100%; }
  .pm-final .hosting-badge { align-self: flex-start; }
}

/* ── Liste « kicker, titre, texte » séparée par des filets ──────────────── */
.pm-kickers {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-kicker {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--border-default);
}

.pm-kicker:first-child { padding-top: 0; }
.pm-kicker:last-child { padding-bottom: 0; border-bottom: 0; }
.pm-kicker__label { color: var(--text-primary); }
.pm-kicker__text { max-width: 680px; color: var(--text-secondary); }

@media (max-width: 767px) {
  .pm-kicker { padding: var(--space-7) 0; }
  .pm-kicker__text { font-size: 15px; line-height: 23px; }
  .pm-kicker .t-h3 {
    font-size: 19px;
    line-height: 26px;
    letter-spacing: -0.005em;
  }
}

/* ── Pastilles (fichiers lus, pages clés) ───────────────────────────────── */
.pm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-chip {
  display: inline-flex;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  white-space: nowrap;
}

a.pm-chip:hover { border-color: var(--border-accent); color: var(--text-accent); }

.pm-files .pm-split__aside p:not(.overline) { color: var(--text-secondary); }

/* ── Tableaux (droits, archives, faits) : cartes sur mobile ─────────────── */
.pm-table {
  width: 100%;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.pm-table th,
.pm-table td {
  padding: 18px 0 18px var(--space-7);
  border-bottom: 1px solid var(--border-default);
  vertical-align: top;
}

.pm-table th:last-child,
.pm-table td:last-child { padding-right: var(--space-7); }

.pm-table thead th {
  padding-block: 14px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-weight: 400;
}

.pm-table tbody tr:last-child > * { border-bottom: 0; }
.pm-table tbody th { font-weight: 600; }

/* Largeurs de colonnes du Figma (+ 24 px de gouttière à gauche) */
.pm-table .pm-w-140 { width: 164px; }
.pm-table .pm-w-160 { width: 184px; }
.pm-table .pm-w-220 { width: 244px; }
.pm-table .pm-w-240 { width: 264px; }
.pm-table .pm-w-320 { width: 344px; }
.pm-table .pm-w-380 { width: 404px; }
.pm-table--middle td,
.pm-table--middle tbody th { vertical-align: middle; }
.pm-table tr.pm-table__row--subtle > * { background: var(--bg-subtle); }
.pm-table td.pm-table__date { color: var(--text-primary); }

.pm-table__link { color: var(--text-primary); }
.pm-table__link:hover { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .pm-table,
  .pm-table tbody,
  .pm-table tr,
  .pm-table th,
  .pm-table td { display: block; width: 100%; }

  .pm-table { overflow: visible; background: transparent; border: 0; border-radius: 0; }
  .pm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .pm-table tbody { display: flex; flex-direction: column; gap: var(--space-4); }

  .pm-table tr {
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
  }

  .pm-table tbody th,
  .pm-table td,
  .pm-table th:last-child,
  .pm-table td:last-child { padding: 10px var(--space-5); border-bottom: 0; }

  .pm-table tbody th { padding-block: 14px; border-bottom: 1px solid var(--border-default); }

  .pm-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .pm-table tbody tr:last-child > * { border-bottom: 0; }
  .pm-table tbody tr:last-child > th { border-bottom: 1px solid var(--border-default); }
}

/* ── Tarifs : cartes d'offres ───────────────────────────────────────────── */
.pm-plans {
  display: grid;
  grid-template-columns: repeat(var(--plans, 4), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: 28px var(--space-7);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-left: 0;
}

.pm-plan:first-child { border-left: 1.5px solid var(--border-strong); }

.pm-plan__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pm-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.pm-plan__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.pm-plan__period,
.pm-plan__tagline { color: var(--text-secondary); }

.pm .pm-plan__features { /* .pm : passe devant ul[role="list"] du socle (padding 0) */
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: var(--space-5) 0 0;
  list-style: none;
  border-top: 1px solid var(--border-default);
}

.pm-plan__cta {
  justify-content: center;
  width: 100%;
  margin-top: auto;
}

.pm-plan--highlighted {
  background: var(--bg-accent);
  border-color: var(--bg-accent);
  color: var(--text-on-accent);
}

.pm-plan--highlighted .pm-plan__period,
.pm-plan--highlighted .pm-plan__tagline { color: var(--pm-blue-100); }
.pm-plan--highlighted .pm-plan__features { border-top-color: var(--pm-blue-400); }

.pm-enterprise {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 28px var(--space-7);
  background: var(--bg-subtle);
  border: 1.5px solid var(--border-strong);
  border-top: 0;
}

.pm-enterprise__text {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

.pm-enterprise__text p { color: var(--text-secondary); }

.pm-offline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-8);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.pm-offline p { max-width: 680px; color: var(--text-secondary); }

@media (max-width: 1023px) {
  .pm-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .pm-plan,
  .pm-plan:first-child { border: 1.5px solid var(--border-strong); }
  .pm-plan--highlighted,
  .pm-plan--highlighted:first-child { border-color: var(--bg-accent); }
  .pm-enterprise { margin-top: var(--space-5); border-top: 1.5px solid var(--border-strong); }
}

@media (max-width: 767px) {
  .pm-plans { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .pm-plan { gap: var(--space-6); padding: var(--space-7) var(--space-6); }
  .pm-plan__cta { margin-top: 0; }
  .pm-enterprise { flex-direction: column; align-items: stretch; gap: var(--space-5); padding: var(--space-7) var(--space-6); }
  .pm-enterprise .btn { justify-content: center; }
}

/* ── Alertes CVE ────────────────────────────────────────────────────────── */
.pm-featured {
  display: flex;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.pm-featured__text {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-9);
}

.pm-featured__text > p { color: var(--text-secondary); }

.pm-featured__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.pm-featured__summary {
  display: flex;
  flex: none;
  width: 420px;
  flex-direction: column;
  padding: var(--space-9);
  background: var(--brand-navy);
}

.pm-featured__summary dl { margin: 0; }

.pm-featured__summary dl > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: 14px;
}

.pm-featured__summary dt { color: var(--brand-sky); }
.pm-featured__summary dd { margin: 0; color: var(--text-on-accent); }

@media (max-width: 1023px) {
  .pm-featured { flex-direction: column; }
  .pm-featured__summary { width: 100%; }
}

@media (max-width: 767px) {
  .pm-featured__text,
  .pm-featured__summary { padding: var(--space-6); }
  .pm-featured__summary .mascot { width: 80px; height: 80px; }
  .pm-featured__text > p,
  .pm-subscribe__text p { font-size: 15px; line-height: 23px; }
}

.pm-subscribe {
  background: var(--bg-accent-subtle);
  border-block: 1px solid var(--border-default);
}

.pm-subscribe__row {
  display: flex;
  align-items: center;
  gap: var(--space-11);
}

.pm-subscribe__text {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}

.pm-subscribe__text p { color: var(--text-secondary); }

.pm-subscribe__form {
  display: flex;
  flex: none;
  width: 520px;
  flex-direction: column;
  gap: var(--space-4);
}

.pm-subscribe__fields {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.pm-subscribe__fields .field { flex: 1 1 0; min-width: 0; }
.pm-subscribe__submit { flex: none; padding-top: 31px; }

/* Champ du Figma (composant « Champ ») : filet 1 px border/default,
   12/14 px, Body/M ; le socle a une valeur provisoire en 1,5 px strong. */
.pm-subscribe .field__input {
  min-height: 0;
  padding: var(--space-4) 14px;
  border: 1px solid var(--border-default);
  font-size: 17px;
  line-height: 27px;
}

.pm-subscribe .field__input::placeholder { color: var(--text-muted); }
.pm-subscribe .field__input:focus { border-color: var(--border-accent); }
.pm-subscribe .field__hint { font-weight: 500; font-size: 13px; line-height: 19px; }

.pm-subscribe form[aria-busy="true"] .btn { opacity: 0.6; pointer-events: none; }

.pm-subscribe .newsletter-result:not(:has(.newsletter-result__message)) { display: none; }

.pm-subscribe .newsletter-result {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border-left: 3px solid var(--bg-accent);
  color: var(--text-primary);
}

.pm-subscribe .newsletter-result--pending {
  background: var(--success-subtle);
  border-left-color: var(--success-text);
}

.pm-subscribe .newsletter-result--invalid,
.pm-subscribe .newsletter-result--captcha,
.pm-subscribe .newsletter-result--rate_limited,
.pm-subscribe .newsletter-result--unavailable {
  background: var(--critical-subtle);
  border-left-color: var(--critical-fill);
}

@media (max-width: 1023px) {
  .pm-subscribe__row { flex-direction: column; align-items: stretch; gap: var(--space-8); }
  .pm-subscribe__form { width: 100%; }
}

@media (max-width: 767px) {
  .pm-subscribe__fields { flex-direction: column; align-items: stretch; }
  .pm-subscribe__submit { padding-top: 0; }
  .pm-subscribe__submit .btn { justify-content: center; width: 100%; }
}

/* ── LibWatch en bref ───────────────────────────────────────────────────── */
.pm-compare {
  display: flex;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.pm-compare__col {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-8);
}

.pm-compare__col + .pm-compare__col { border-left: 1px solid var(--border-default); }

.pm-compare__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
}

.pm-quote {
  display: flex;
  max-width: 720px;
  flex-direction: column;
  gap: var(--space-6);
}

.pm-quote > p { color: var(--text-secondary); }

@media (max-width: 767px) {
  .pm-compare { flex-direction: column; }
  .pm-compare__col { padding: var(--space-6); }
  .pm-compare__col + .pm-compare__col { border-left: 0; border-top: 1px solid var(--border-default); }
  .pm-compare .t-h3 {
    font-size: 19px;
    line-height: 26px;
    letter-spacing: -0.005em;
  }
  .pm-compare__col ul { font-size: 15px; line-height: 23px; }
}

/* Carte « Essai » des tarifs (Figma 122:10920), affichée seulement si le
   dashboard ouvre un essai (trial_days) : fond accent pâle. */
.pm-plan--trial { background: var(--bg-accent-subtle); }

/* Note sous la liste des fichiers lus (Sécurité et données). */
.pm-files__note { margin-top: var(--space-5); }