/* modus. — one package page (/forfaits/<slug>/, /packages/<slug>/). 2026-10-17.
   Pages are generated by tools/gen-packages.js from src/_packages.js.
   Bands: navy head · paper "what you get" · navy guarantee · paper steps,
   FAQ, other packages, closing. Reuses base.css for everything shared. */

/* ---------- head */
.pkp-head{position:relative;padding:calc(96px + var(--nav-h,72px)) 0 64px;background:var(--navy);color:var(--paper)}
.pkp-head .crumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green-on-navy);margin-bottom:22px}
.pkp-head .crumb a{color:inherit;text-decoration:none}
.pkp-head .crumb a:hover{text-decoration:underline}
.pkp-head .crumb .sep{margin:0 8px;opacity:.5}
.pkp-name{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(248,249,247,.72);margin:0 0 14px}
.pkp-name .pkp-fn{color:var(--slate)}
.pkp-head h1{font-size:clamp(2.1rem,5.2vw,3.6rem);line-height:1.05;letter-spacing:-.025em;margin:0;max-width:20ch}
.pkp-head .lead{max-width:58ch;color:var(--light)}
.pkp-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---------- what you get */
.pkp-cols{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px 64px;align-items:start}
.pkp-cols .sec-eyebrow{margin-top:6px}
.pkp-get{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--navy);margin:0;max-width:62ch}
.pkp-note{margin:20px 0 0;padding:14px 18px;border-left:2px solid var(--green);background:rgba(29,158,117,.06);
  font-size:15px;line-height:1.55;color:var(--navy);max-width:62ch}
.pkp-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 44px;margin-top:44px}
.pkp-lists h2{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-ink);font-weight:500;margin:0 0 6px}
.pkp-lists ul{list-style:none;margin:0;padding:0}
.pkp-lists li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--light);font-size:15.5px;line-height:1.5;color:var(--navy)}
.pkp-lists li:last-child{border-bottom:1px solid var(--light)}
.pkp-lists li::before{content:"";position:absolute;left:2px;top:21px;width:8px;height:8px;border-radius:50%;background:var(--green)}

/* ---------- guarantee (navy) */
.pkp-g{margin:22px 0 0;font-size:clamp(22px,2.8vw,34px);line-height:1.28;letter-spacing:-.015em;font-weight:700;max-width:34ch}

/* ---------- steps */
.pkp-steplist{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pkp-steplist li{background:var(--white);border:1px solid var(--light);border-radius:16px;padding:28px 26px}
.pkp-steplist .num{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--green-ink)}
.pkp-steplist h3{font-size:20px;letter-spacing:-.01em;line-height:1.24;color:var(--navy);margin:12px 0 8px}
.pkp-steplist p{font-size:15.5px;line-height:1.55;color:var(--muted);margin:0}
.pkp-steps,.pkp-faq,.pkp-more{border-top:1px solid var(--light)}

/* ---------- FAQ: <details>, so it works with JS off */
.pkp-faq h2{font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.015em;color:var(--navy);max-width:16ch;margin:0}
.pkp-qa details{border-top:1px solid var(--light)}
.pkp-qa details:last-child{border-bottom:1px solid var(--light)}
.pkp-qa summary{cursor:pointer;list-style:none;position:relative;padding:20px 44px 20px 0;font-size:17.5px;font-weight:600;line-height:1.4;color:var(--navy)}
.pkp-qa summary::-webkit-details-marker{display:none}
.pkp-qa summary::after{content:"+";position:absolute;right:6px;top:16px;font-family:var(--mono);font-size:22px;color:var(--green-ink);transition:transform .25s var(--ease)}
.pkp-qa details[open] summary::after{transform:rotate(45deg)}
.pkp-qa summary:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.pkp-qa details p{margin:0 0 22px;font-size:16px;line-height:1.6;color:var(--muted);max-width:64ch}

/* ---------- other packages */
.pkp-others{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;margin-top:28px}
.pkp-other{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 44px 22px 22px;background:var(--white);
  border:1px solid var(--light);border-radius:14px;text-decoration:none;color:var(--navy);transition:border-color .2s,transform .2s}
.pkp-other:hover{border-color:var(--green);transform:translateY(-2px)}
.pkp-other .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-ink)}
.pkp-other b{font-size:17px;letter-spacing:-.01em}
.pkp-other .arw{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--green-ink)}

/* ---------- closing band */
.next-band{border-top:1px solid var(--light)}
.next-grid{display:grid;grid-template-columns:1fr 340px;gap:60px;align-items:end}
.next-grid h2{max-width:20ch;font-size:clamp(24px,3vw,34px);line-height:1.18;letter-spacing:-.015em;color:var(--navy)}
.next-grid .lead{max-width:54ch}
.next-actions{display:flex;flex-direction:column;gap:12px}
.next-actions .btn{justify-content:center}
.paper .btn-ghost{color:var(--navy);border-color:rgba(22,40,60,.28)}
.paper .btn-ghost:hover{border-color:var(--navy)}

/* ---------- mobile */
@media (max-width:860px){
  .pkp-cols{grid-template-columns:1fr;gap:18px}
  .pkp-lists,.pkp-steplist{grid-template-columns:1fr}
  .pkp-actions .btn{flex:1 1 auto;justify-content:center}
  .next-grid{grid-template-columns:1fr;gap:32px;align-items:start}
}