/* BLRH — pages de service (pages piliers SEO).
   Chargé en fichier externe : la CSP de netlify.toml interdit les styles écrits dans la page. */
/* ——— Page pilier : blocs propres à cette page ——— */
.page-hero { padding: calc(var(--s-10) + 2rem) 0 var(--s-8); }
.page-hero h1 { font-size: var(--fs-h2); letter-spacing: var(--track-display); margin: var(--s-4) 0 var(--s-5); max-width: 22ch; }
.page-hero h1 em { font-style: italic; color: var(--teal); }
.page-hero .hero-sub { max-width: 58ch; }
.crumb { font-size: var(--fs-micro); color: var(--muted); }
.crumb a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.crumb a:hover { color: var(--forest); }

.pain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); margin-top: var(--s-7); }
.pain-item { border-top: 2px solid var(--forest); padding-top: var(--s-4); }
.pain-item .n { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); color: var(--bronze); margin-bottom: var(--s-3); }
.pain-item h3 { font-size: var(--fs-h3); margin: 0 0 var(--s-3); line-height: 1.25; }
.pain-item p { margin: 0; color: var(--muted); }

.do-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); margin-top: var(--s-7); }
.do-item { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.do-item h3 { font-size: 1.0625rem; margin: 0 0 var(--s-2); }
.do-item p { margin: 0; font-size: var(--fs-small); color: var(--muted); }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); }
.plan { border: 1px solid var(--line); border-radius: var(--r-soft); padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; background: var(--paper); }
.plan--best { background: var(--forest); color: var(--paper-on-green); border-color: var(--forest); }
.plan .rhythm { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bronze); }
.plan--best .rhythm { color: var(--bronze-on-green); }
.plan .price { font-size: 1.875rem; font-weight: 700; letter-spacing: var(--track-display); color: var(--forest); margin: var(--s-3) 0 var(--s-1); }
.plan--best .price { color: var(--paper-on-green); }
.plan .per { font-size: var(--fs-micro); color: var(--muted); margin-bottom: var(--s-4); }
.plan--best .per { color: var(--muted-on-green); }
.plan p.desc { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.plan--best p.desc { color: var(--paper-on-green); }
.plan .tag { align-self: flex-start; font-size: var(--fs-micro); font-weight: 700; color: var(--forest); background: var(--bronze-on-green); border-radius: var(--r-pill); padding: 0.15rem 0.6rem; margin-bottom: var(--s-3); }
.plans-note { margin-top: var(--s-5); font-size: var(--fs-micro); color: var(--muted); max-width: 70ch; }
.quote-cta { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.quote-cta p { margin: 0; max-width: 56ch; color: var(--forest); font-size: var(--fs-lead); }

.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); margin-top: var(--s-7); }
.fit ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.fit li { position: relative; padding-left: 1.6rem; margin-bottom: var(--s-4); color: var(--muted); font-size: var(--fs-small); }
.fit li::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 0.5rem; height: 0.5rem; background: var(--bronze); }
.fit .no li::before { background: var(--line); }

.faq { margin-top: var(--s-7); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: var(--s-5) 2.5rem var(--s-5) 0; position: relative; font-size: var(--fs-h3); font-weight: 700; color: var(--forest); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--bronze); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 var(--s-5); max-width: 74ch; color: var(--muted); }

.next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.next a { display: block; border: 1px solid var(--line); border-radius: var(--r-soft); padding: var(--s-5); text-decoration: none; color: inherit; transition: border-color 0.25s ease, transform 0.25s ease; }
.next a:hover { border-color: var(--forest); transform: translateY(-2px); }
.next strong { display: block; color: var(--forest); margin-bottom: var(--s-2); }
.next span { font-size: var(--fs-small); color: var(--muted); }

@media (max-width: 860px) {
  .pain-grid, .do-grid, .plans, .fit, .next { grid-template-columns: minmax(0, 1fr); }
  .page-hero { padding-top: calc(var(--s-9) + 2rem); }
}

.pillar-quote { margin-top: var(--s-8); }