/* ============================================================
   pages.css — multi-page layout extras
   ============================================================ */

/* Page hero (titre de page) ------------------------------------ */
.page-hero {
  padding: 140px 0 56px;
  background: var(--paper);
}
.page-hero .eyebrow { color: var(--moss); }
.page-hero h1.display-xl { max-width: 22ch; }
.page-hero .lede { max-width: 60ch; margin-top: 24px; }

/* Nav active state --------------------------------------------- */
.nav-links a.is-active {
  color: var(--stone);
  opacity: 1;
}

/* Hide scroll progress (per design feedback) */
.scroll-progress { display: none !important; }

/* CTA row ------------------------------------------------------ */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* Section night (CTA bottom) ----------------------------------- */
.section.night {
  background: var(--night);
  color: var(--stone);
  padding: 96px 0;
}
.section.night .eyebrow { color: #8aa97e; }
.btn-ghost-light {
  background: transparent;
  color: var(--stone);
  border: 1px solid rgba(242,237,228,0.3);
}
.btn-ghost-light:hover {
  border-color: var(--stone);
  background: rgba(242,237,228,0.05);
}

/* Aperçu plateforme — 4 cartes statiques ----------------------- */
.screens-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 980px) { .screens-preview { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .screens-preview { grid-template-columns: 1fr; } }
.screen-card {
  background: transparent;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.screen-card .screen-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--moss);
}
.screen-card h3 { margin: 0; }

/* Comment ça fonctionne — 4 étapes ----------------------------- */
.process-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3vw, 44px);
  margin-top: 48px;
}
@media (max-width: 980px) { .process-flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .process-flow { grid-template-columns: 1fr; } }
.process-step {
  padding: 8px 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.process-step .process-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--moss);
}

/* Partenaires — grille 2x2 ------------------------------------- */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 760px) { .partners-grid { grid-template-columns: 1fr; } }
.partner-card {
  background: var(--stone);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.partner-card .partner-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--moss);
  text-transform: uppercase;
}

/* FAQ tarifs (réutilise styles existants) ---------------------- */
.faq-block-list {
  margin-top: 48px;
  border-top: 1px solid var(--rule);
}
.faq-block-list .faq-item {
  border-bottom: 1px solid var(--rule);
}
.faq-block-list .faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  list-style: none;
  color: var(--night);
}
.faq-block-list .faq-item summary::-webkit-details-marker { display: none; }
.faq-block-list .faq-item .caret {
  font-family: var(--mono);
  font-size: 20px;
  color: var(--moss);
  transition: transform 0.2s;
}
.faq-block-list .faq-item[open] .caret { transform: rotate(45deg); }
.faq-block-list .faq-item p {
  padding: 0 0 24px;
  margin: 0;
  color: var(--charcoal);
  max-width: 80ch;
  font-size: 15px;
  line-height: 1.6;
}