/* Pricing page (19/10/2026) — scoped to #pricing-page, loaded by pricing.html only, after
   css/style.css. Same design tokens as css/homepage-redesign.css (--nf-*), redeclared here
   because that file is only loaded by index.html. Components are prefixed .pp-* (plans,
   sections) and .pe-* (budget estimator) so they never collide with Bootstrap or the legacy
   theme (.card, .badge, .btn). */

#pricing-page {
  --nf-ink: #0b1220;
  --nf-paper: #f7f9fc;
  --nf-paper-line: #e2e8f4;
  --nf-brand: #1e40af;
  --nf-brand-deep: #142b7a;
  --nf-brand-tint: #eaf0ff;
  --nf-signal: #22c55e;
  --nf-ink-soft: #5b6478;
  background: var(--nf-paper);
  color: var(--nf-ink);
}

#pricing-page * { box-sizing: border-box; }

#pricing-page .pp-hero-sub {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  font-size: 1.05rem;
  opacity: 0.92;
}

/* ---------- Plans ---------- */

#pricing-page .pp-plans { padding-top: 2.5rem; padding-bottom: 3rem; }
/* Small screens: the legacy .gradient-banner-pricing already leaves 170px under the hero text */
@media (max-width: 768px) { #pricing-page .pp-plans { padding-top: 2rem; } }

#pricing-page .pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 1140px) {
  #pricing-page .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #pricing-page .pricing-grid { grid-template-columns: 1fr; }
}

#pricing-page .pp-card {
  background: #fff;
  border: 1px solid var(--nf-paper-line);
  border-radius: 18px;
  padding: 26px 22px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(11, 18, 32, 0.05);
  position: relative;
}
/* A hovered card sits above its siblings so its tooltips are never hidden by the next card */
#pricing-page .pp-card:hover { z-index: 5; }

#pricing-page .pp-plan-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nf-ink-soft);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#pricing-page .pp-plan-title {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--nf-ink);
  margin: 0 0 18px;
  min-height: 3.25rem;
}
#pricing-page .pp-price { display: flex; align-items: baseline; gap: 6px; }
#pricing-page .pp-amount { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--nf-ink); }
#pricing-page .pp-period { font-size: 0.9rem; color: var(--nf-ink-soft); }
#pricing-page .pp-price-note {
  font-size: 0.82rem;
  color: var(--nf-ink-soft);
  margin: 8px 0 18px;
  min-height: 2.5rem;
}

#pricing-page .pp-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex: 1;
}
#pricing-page .pp-features li {
  position: relative;
  padding: 6px 0 6px 26px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #263043;
}
#pricing-page .pp-features li::before {
  content: "\e64c"; /* ti-check */
  font-family: 'themify';
  position: absolute;
  left: 0;
  top: 7px;
  font-size: 0.8rem;
  color: var(--nf-brand);
}

/* Most popular plan: brand background, everything inside in light tones */
#pricing-page .pp-card-popular {
  background: linear-gradient(160deg, var(--nf-brand) 0%, var(--nf-brand-deep) 100%);
  border-color: transparent;
  box-shadow: 0 16px 36px rgba(30, 64, 175, 0.28);
}
#pricing-page .pp-card-popular .pp-plan-name,
#pricing-page .pp-card-popular .pp-period,
#pricing-page .pp-card-popular .pp-price-note { color: rgba(255, 255, 255, 0.75); }
#pricing-page .pp-card-popular .pp-plan-title,
#pricing-page .pp-card-popular .pp-amount,
#pricing-page .pp-card-popular .pp-features li { color: #fff; }
#pricing-page .pp-card-popular .pp-features li::before { color: #9fe3b4; }
#pricing-page .pp-card-popular .tooltip-icon { color: rgba(255, 255, 255, 0.8); }

#pricing-page .pp-badge {
  background: #9fe3b4;
  color: var(--nf-brand-deep);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

/* Buttons */
#pricing-page .pp-btn {
  display: inline-block;
  text-align: center;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--nf-brand);
  color: #fff;
  border: 1px solid var(--nf-brand);
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
#pricing-page .pp-btn:hover { background: var(--nf-brand-deep); color: #fff; transform: translateY(-1px); }
#pricing-page .pp-btn-outline { background: transparent; color: var(--nf-brand); }
#pricing-page .pp-btn-outline:hover { background: var(--nf-brand-tint); color: var(--nf-brand); }
#pricing-page .pp-btn-light { background: #fff; color: var(--nf-brand-deep); border-color: #fff; }
#pricing-page .pp-btn-light:hover { background: var(--nf-brand-tint); color: var(--nf-brand-deep); }

/* Tooltips (legacy .tooltip-icon / .tooltip-image classes from style.css, re-skinned) */
#pricing-page .tooltip-icon {
  margin-left: 4px;
  color: var(--nf-ink-soft);
  font-size: 0.78rem;
  font-weight: normal;
}
#pricing-page .tooltip-image { display: block; width: 240px; }
#pricing-page .tooltip-icon:focus-within .tooltip-image,
#pricing-page .tooltip-icon:hover .tooltip-image { visibility: visible; opacity: 1; }

/* Demo lines (same content as the demo lines of the sign-up page) */
#pricing-page .pp-demo {
  margin-top: 24px;
  background: var(--nf-brand-tint);
  border-radius: 18px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
#pricing-page .pp-demo-title { font-weight: 700; font-size: 1.1rem; margin: 0 0 4px; color: var(--nf-ink); }
#pricing-page .pp-demo-sub { margin: 0; color: var(--nf-ink-soft); font-size: 0.92rem; }
#pricing-page .pp-demo-lines { display: flex; gap: 12px; flex-shrink: 0; }
#pricing-page .pp-demo-line {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--nf-paper-line);
  border-radius: 14px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--nf-ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
#pricing-page .pp-demo-line:hover { border-color: var(--nf-brand); transform: translateY(-1px); }
#pricing-page .pp-demo-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nf-ink-soft); }
#pricing-page .pp-demo-number { font-size: 1.15rem; font-weight: 800; color: var(--nf-brand); white-space: nowrap; }
#pricing-page .pp-demo-hint { font-size: 0.8rem; color: var(--nf-ink-soft); }
@media (max-width: 900px) {
  #pricing-page .pp-demo { flex-direction: column; align-items: flex-start; }
  #pricing-page .pp-demo-lines { width: 100%; }
  #pricing-page .pp-demo-line { flex: 1; }
}

/* Custom offer band */
#pricing-page .pp-custom {
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--nf-paper-line);
  border-radius: 18px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
#pricing-page .pp-custom-title { font-weight: 700; font-size: 1.1rem; margin: 0 0 4px; color: var(--nf-ink); }
#pricing-page .pp-custom-text { margin: 0; color: var(--nf-ink-soft); font-size: 0.92rem; }
#pricing-page .pp-custom .pp-btn { flex-shrink: 0; }
@media (max-width: 768px) {
  #pricing-page .pp-custom { flex-direction: column; align-items: flex-start; }
}

/* Every row of a card (name, title, price, note, each feature, button) lines up with the same
   row of the other cards: the cards and their feature lists are subgrids of the plan grid.
   12 rows = 4 header rows + 7 features + the button; each card must list its 7 features in
   the same order. Browsers without subgrid keep the plain flex layout above. */
@supports (grid-template-rows: subgrid) {
  #pricing-page .pricing-grid { row-gap: 20px; }
  #pricing-page .pp-card {
    display: grid;
    grid-row: span 12;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  #pricing-page .pp-features {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
  }
  #pricing-page .pp-plan-title,
  #pricing-page .pp-price-note { min-height: 0; }
  #pricing-page .pp-features li { align-self: start; }
  #pricing-page .pp-card > .pp-btn { align-self: end; }
}

/* ---------- Sections ---------- */

#pricing-page .pp-section-title {
  text-align: center;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--nf-ink);
  margin: 0 0 8px;
}
#pricing-page .pp-section-sub {
  text-align: center;
  color: var(--nf-ink-soft);
  margin: 0 auto 2.2rem;
  max-width: 620px;
}

#pricing-page .pp-included { background: var(--nf-brand-tint); }
#pricing-page .pp-included-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 900px) { #pricing-page .pp-included-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { #pricing-page .pp-included-grid { grid-template-columns: 1fr; } }
#pricing-page .pp-included-item {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  font-size: 0.9rem;
  line-height: 1.4;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
#pricing-page .pp-included-item i { color: var(--nf-brand); font-size: 1.1rem; margin-top: 1px; }

/* ---------- Budget estimator ---------- */

#pricing-page .pe {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--nf-paper-line);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(11, 18, 32, 0.05);
}
@media (max-width: 900px) { #pricing-page .pe { grid-template-columns: 1fr; } }

#pricing-page .pe-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
#pricing-page .pe-head-label { font-weight: 700; }
#pricing-page .pe-toggle {
  display: inline-flex;
  background: var(--nf-paper);
  border: 1px solid var(--nf-paper-line);
  border-radius: 999px;
  padding: 3px;
}
#pricing-page .pe-toggle button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nf-ink-soft);
  cursor: pointer;
}
#pricing-page .pe-toggle button.active { background: var(--nf-brand); color: #fff; }

#pricing-page .pe-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#pricing-page .pe-panel[hidden] { display: none; }
#pricing-page .pe-missed { border-top: 1px solid var(--nf-paper-line); margin-top: 6px; padding-top: 14px; }
#pricing-page .pe-missed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
@media (max-width: 480px) { #pricing-page .pe-missed-grid { grid-template-columns: 1fr; } }
#pricing-page .pe-human.pe-missed-result strong { color: #b91c1c; }
#pricing-page .pe-slider-wide { grid-column: 1 / -1; }
@media (max-width: 480px) { #pricing-page .pe-panel { grid-template-columns: 1fr; } }

#pricing-page .pe-slider {
  display: block;
  margin: 0;
  background: var(--nf-paper);
  border: 1px solid var(--nf-paper-line);
  border-radius: 14px;
  padding: 14px 14px 10px;
  font-size: 0.88rem;
}
#pricing-page .pe-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--nf-ink);
}
#pricing-page .pe-slider-head { gap: 8px; }
#pricing-page .pe-slider-head output { font-weight: 800; font-size: 1rem; white-space: nowrap; }

#pricing-page .pe-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 14px 0 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(to right, var(--nf-brand) var(--fill, 0%), var(--nf-paper-line) var(--fill, 0%));
  cursor: pointer;
}
#pricing-page .pe-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--nf-brand);
  box-shadow: 0 1px 4px rgba(11, 18, 32, 0.2);
}
#pricing-page .pe-slider input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--nf-brand);
}
#pricing-page .pe-slider input[type="range"]:focus-visible { outline: 2px solid var(--nf-brand); outline-offset: 4px; }

#pricing-page .pe-monthly {
  text-align: center;
  font-size: 0.88rem;
  color: var(--nf-ink-soft);
  margin: 12px 0 16px;
}
#pricing-page .pe-monthly strong { color: var(--nf-ink); }

#pricing-page .pe-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--nf-paper-line);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 10px;
  cursor: default;
}
#pricing-page label.pe-option { cursor: pointer; }
#pricing-page .pe-option-title { margin: 0; font-weight: 600; font-size: 0.92rem; color: var(--nf-ink); }
#pricing-page .pe-option-sub { margin: 2px 0 0; font-size: 0.8rem; color: var(--nf-ink-soft); }
#pricing-page .pe-option input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--nf-brand); flex-shrink: 0; }

#pricing-page .pe-stepper { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#pricing-page .pe-stepper output { min-width: 22px; text-align: center; font-weight: 700; }
#pricing-page .pe-stepper button {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--nf-paper-line);
  background: #fff;
  color: var(--nf-ink);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
#pricing-page .pe-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }

#pricing-page .pe-result {
  background: var(--nf-paper);
  border: 1px solid var(--nf-paper-line);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
#pricing-page .pe-reco {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--nf-ink-soft);
}
#pricing-page .pe-reco strong { font-size: 1.35rem; color: var(--nf-brand); }
#pricing-page .pe-lines { list-style: none; padding: 0; margin: 14px 0 0; }
#pricing-page .pe-lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.86rem;
  color: #263043;
  padding: 4px 0;
}
#pricing-page .pe-lines li span:last-child { white-space: nowrap; }
#pricing-page .pe-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--nf-paper-line);
  margin-top: 12px;
  padding-top: 12px;
  font-weight: 600;
}
#pricing-page .pe-total strong { font-size: 1.9rem; font-weight: 800; color: var(--nf-ink); }
#pricing-page .pe-human {
  font-size: 0.82rem;
  color: var(--nf-ink-soft);
  margin: 8px 0 0;
}
#pricing-page .pe-human strong { color: #15803d; }
#pricing-page .pe-compare { margin: 16px 0 18px; }
#pricing-page .pe-compare-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nf-ink-soft); margin: 0 0 6px; }
#pricing-page .pe-compare ul { list-style: none; padding: 0; margin: 0; }
#pricing-page .pe-compare li {
  display: flex;
  justify-content: space-between;
  font-size: 0.86rem;
  padding: 5px 10px;
  border-radius: 8px;
  color: var(--nf-ink-soft);
}
#pricing-page .pe-compare li.best { background: var(--nf-brand-tint); color: var(--nf-brand-deep); font-weight: 700; }
#pricing-page .pe-compare li.unavailable { text-decoration: line-through; opacity: 0.6; }
#pricing-page .pe-cta { margin-top: auto; width: 100%; }

/* ---------- Cost comparison table ---------- */

#pricing-page .pp-comparison { background: #fff; }
#pricing-page .pp-table-wrap {
  max-width: 900px;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid var(--nf-paper-line);
  border-radius: 18px;
}
#pricing-page .pp-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 600px; }
#pricing-page .pp-table th,
#pricing-page .pp-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--nf-paper-line); vertical-align: top; }
#pricing-page .pp-table tr:last-child td { border-bottom: 0; }
#pricing-page .pp-table th { font-weight: 700; color: var(--nf-ink); background: var(--nf-paper); }
#pricing-page .pp-table td:first-child { color: var(--nf-ink-soft); }
#pricing-page .pp-table .pp-col-us { background: var(--nf-brand-tint); color: var(--nf-brand-deep); font-weight: 700; }
#pricing-page .pp-table th.pp-col-us { background: var(--nf-brand); color: #fff; }

/* ---------- FAQ ---------- */

#pricing-page .pp-faq-list { max-width: 760px; margin: 0 auto; }
#pricing-page .pp-faq-list details {
  background: #fff;
  border: 1px solid var(--nf-paper-line);
  border-radius: 14px;
  margin-bottom: 10px;
  padding: 0 18px;
}
#pricing-page .pp-faq-list summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  padding: 16px 28px 16px 0;
  position: relative;
  color: var(--nf-ink);
}
#pricing-page .pp-faq-list summary::-webkit-details-marker { display: none; }
#pricing-page .pp-faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 13px;
  font-size: 1.3rem;
  color: var(--nf-brand);
}
#pricing-page .pp-faq-list details[open] summary::after { content: "−"; }
#pricing-page .pp-faq-list details p { margin: 0 0 16px; color: #374151; font-size: 0.93rem; }

#pricing-page .pp-table-link { text-align: center; margin: 18px 0 0; font-size: 0.92rem; color: var(--nf-ink-soft); }
#pricing-page .pp-table-link a { color: var(--nf-brand); font-weight: 600; }

/* "Pour qui Noteefy n'est pas fait" */
#pricing-page .pp-notfor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; }
#pricing-page .pp-notfor-item { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 22px; }
#pricing-page .pp-notfor-item h3 { font-size: 1.02rem; font-weight: 700; color: #1e293b; margin: 0 0 8px; }
#pricing-page .pp-notfor-item p { margin: 0; color: #374151; font-size: 0.93rem; line-height: 1.55; }
@media (max-width: 767px) {
  #pricing-page .pp-notfor-grid { grid-template-columns: 1fr; }
}