/* ============================================================
   PORTES MÉTIERS QUÉBEC — shared niche-door stylesheet
   Built on the approved Signature tokens (../tokens.css).
   ADDITIVE: does not modify any approved file.
   ============================================================ */

body{background:var(--cream);overflow-x:hidden}

/* ---------- NAV (matches approved site) ---------- */
.nav-wrap{background:var(--pine);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--pine-line)}
.nm-nav{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:1180px;margin:0 auto;padding:0 32px}
.brand{display:flex;align-items:center;gap:11px}
.brand .mk{width:36px;height:36px;font-size:20px}
.brand b{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--cream);display:block;line-height:1}
.brand span{font-size:10.5px;color:var(--muted-on-pine);letter-spacing:.09em;text-transform:uppercase;font-weight:600}
.navlinks{display:flex;align-items:center;gap:28px;font-size:14.5px;font-weight:500;color:var(--muted-on-pine)}
.navlinks a{transition:color .15s}
.navlinks a:hover,.navlinks a.on{color:var(--cream)}
.nav-cta{display:flex;align-items:center;gap:12px}

/* ---------- BREADCRUMB ---------- */
.crumb{background:var(--pine-deep);border-bottom:1px solid var(--pine-line)}
.crumb-in{max-width:1180px;margin:0 auto;padding:9px 32px;display:flex;align-items:center;gap:9px;
  font-size:12px;color:var(--faint-on-pine);font-family:var(--font-mono)}
.crumb-in a{color:var(--muted-on-pine)}.crumb-in a:hover{color:var(--amber)}
.crumb-in .sep{opacity:.5}

/* ---------- HERO ---------- */
.hero{background:var(--pine);color:var(--cream);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-180px;top:-140px;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(192,134,58,.10),transparent 62%);pointer-events:none}
.hero-inner{display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center;
  max-width:1180px;margin:0 auto;padding:56px 32px 92px;position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--amber);margin-bottom:22px}
.eyebrow .ln{width:28px;height:1.5px;background:var(--amber)}
.metier-chip{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;color:var(--cream);background:rgba(255,255,255,.08);border:1px solid var(--pine-line);
  padding:5px 12px;border-radius:var(--r-pill);margin-bottom:22px}
.metier-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--amber)}
h1.hero-h{font-family:var(--font-display);font-weight:700;font-size:54px;line-height:1.0;
  letter-spacing:-.03em;margin-bottom:22px;color:var(--cream);text-wrap:balance}
h1.hero-h am,h1.hero-h .am{color:var(--amber);font-style:normal}
.hero p.lead{font-size:18px;line-height:1.58;color:#C7D1C7;max-width:500px;margin-bottom:32px}
.cta-row{display:flex;align-items:center;gap:14px;margin-bottom:26px;flex-wrap:wrap}
.reassure{display:flex;align-items:center;gap:20px;font-size:13.5px;color:var(--muted-on-pine);font-weight:500;flex-wrap:wrap}
.reassure span{display:flex;align-items:center;gap:7px}
.tk{width:15px;height:15px;color:var(--amber);flex:none}

/* ---------- HERO DOCUMENT STAGE ---------- */
.doc-stage{position:relative;justify-self:center;width:100%;max-width:468px}
.doc-frame{position:relative;border-radius:11px;box-shadow:var(--sh-doc);overflow:hidden;background:var(--paper)}
.doc-scaler{width:760px;transform-origin:top left}
.doc-scaler .paper{box-shadow:none;border-radius:0}
.ghost-doc{position:absolute;inset:0;background:var(--paper);border-radius:11px;box-shadow:var(--sh-lg);
  transform:rotate(-4.5deg) translate(-24px,16px);z-index:-1;opacity:.5}
.conv-note{position:absolute;top:-13px;left:24px;z-index:5;background:var(--amber);color:var(--pine-deep);
  font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:5px 12px;border-radius:var(--r-pill);box-shadow:var(--sh-md)}

/* hero doc controls */
.doc-ctrls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;flex-wrap:wrap}
.seg{display:flex;background:rgba(255,255,255,.07);border:1px solid var(--pine-line);border-radius:9px;padding:3px}
.seg button{font-family:var(--font-ui);font-size:12.5px;font-weight:600;color:var(--muted-on-pine);
  background:transparent;border:none;padding:7px 14px;border-radius:6px;cursor:pointer;transition:.15s;white-space:nowrap}
.seg button.on{background:var(--amber);color:var(--pine-deep)}
.docpals{display:flex;align-items:center;gap:8px}
.docpals .lab{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint-on-pine)}
.docpals .dots{display:flex;gap:6px}
.pdot{width:22px;height:22px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px rgba(255,255,255,.22);cursor:pointer;transition:.14s}
.pdot.on{box-shadow:0 0 0 2px var(--amber)}
.pdot.disabled{opacity:.32;pointer-events:none}
.fullbtn{font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--muted-on-pine);background:transparent;
  border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 4px}
.fullbtn:hover{color:var(--cream)}

/* ---------- SECTION SHELL ---------- */
.nm-sec{padding:84px 0}
.container{max-width:1180px;margin:0 auto;padding:0 32px}
.sec-head{max-width:680px;margin-bottom:44px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:15px}
.kicker .ln{width:24px;height:1.5px;background:var(--amber)}
h2.sec-h{font-family:var(--font-display);font-weight:700;font-size:36px;line-height:1.06;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.sec-head p{font-size:17px;color:var(--ink-2);margin-top:14px;line-height:1.55}

/* ---------- SERVICE LINES ---------- */
.svc{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.svc-chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:8px}
.svc-chip{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:10px 16px;font-size:14px;font-weight:600;color:var(--ink);transition:.15s}
.svc-chip:hover{border-color:var(--amber);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.svc-chip .bullet{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
.svc-line-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-md)}
.slc-top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--pine);color:var(--cream)}
.slc-top .t{font-family:var(--font-display);font-weight:700;font-size:15px}
.slc-top .n{font-family:var(--font-mono);font-size:11px;color:var(--muted-on-pine)}
.slc-rows{padding:6px 20px 8px}
.slc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.slc-row:last-child{border-bottom:none}
.slc-row .d b{font-size:13.5px;color:var(--ink);font-weight:700;display:block}
.slc-row .d span{font-size:11.5px;color:var(--ink-3)}
.slc-row .a{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.slc-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--pine);color:var(--cream)}
.slc-foot .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-on-pine);font-weight:600}
.slc-foot .v{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--amber);font-variant-numeric:tabular-nums}

/* ---------- CONVERSION (quote -> invoice) ---------- */
.conv{background:var(--pine);color:var(--cream);position:relative;overflow:hidden}
.conv::after{content:"";position:absolute;left:-160px;bottom:-200px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(192,134,58,.10),transparent 62%)}
.conv-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;position:relative;z-index:1}
.conv h2.sec-h{color:var(--cream)}.conv .kicker{color:var(--amber)}.conv .sec-head p{color:#C7D1C7}
.conv-stage{position:relative;height:340px}
.mini-doc{position:absolute;background:var(--paper);border-radius:11px;box-shadow:var(--sh-lg);padding:22px;width:320px;color:var(--ink);transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s}
.mini-doc .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mini-doc .mh b{font-family:var(--font-display);font-size:16px}
.mini-doc .num{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);margin-bottom:12px}
.mini-doc .ln{height:8px;border-radius:3px;background:var(--cream-2);margin-bottom:8px}
.mini-doc .tot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.mini-doc .tot span{font-size:11px;color:var(--ink-2)}
.mini-doc .tot b{font-family:var(--font-mono);font-size:14px;font-weight:700}
.mini-q{top:0;left:0;z-index:2}
.mini-f{top:54px;left:60px;z-index:1;opacity:.5;transform:scale(.96)}
.conv-stage.go .mini-q{transform:translate(-14px,-10px) scale(.96);opacity:.5}
.conv-stage.go .mini-f{top:54px;left:60px;opacity:1;transform:translate(0,0) scale(1);z-index:3;box-shadow:var(--sh-doc)}
.conv-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;background:var(--amber);color:var(--pine-deep);
  border-radius:var(--r-pill);display:flex;align-items:center;gap:8px;padding:11px 18px;font-weight:700;font-size:13px;
  box-shadow:var(--sh-md);cursor:pointer;transition:.18s;border:none;font-family:var(--font-ui)}
.conv-arrow:hover{background:var(--amber-bright)}
.conv-steps{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:8px}
.conv-steps li{display:flex;gap:14px;align-items:flex-start}
.conv-steps .n{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid var(--pine-line);
  color:var(--amber);font-family:var(--font-display);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.conv-steps b{font-size:15.5px;font-weight:600;color:var(--cream);display:block;margin-bottom:2px}
.conv-steps span{font-size:13.5px;color:#A9B6A9;line-height:1.5}

/* ---------- INVOICE-FIRST 4-STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 24px}
.step .n{font-family:var(--font-display);font-size:32px;font-weight:800;color:var(--cream-2);
  -webkit-text-stroke:1.5px var(--line-2);line-height:1;margin-bottom:14px}
.step h3{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.01em;margin-bottom:7px}
.step p{font-size:13.5px;color:var(--ink-2);line-height:1.5}

/* ---------- RECOMMENDED TEMPLATES ---------- */
.tpl-sec{background:var(--pine);color:var(--cream)}
.tpl-sec h2.sec-h{color:var(--cream)}.tpl-sec .kicker{color:var(--amber)}.tpl-sec .sec-head p{color:#C7D1C7}
.tpl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tpl-card{background:var(--card);border-radius:var(--r-card);overflow:hidden;cursor:pointer;
  transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.tpl-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.tpl-thumb{position:relative;overflow:hidden;background:var(--cream-2);border-bottom:1px solid var(--line)}
.tpl-thumb .doc-scaler{transform-origin:top left}
.tpl-thumb .reco{position:absolute;top:11px;left:11px;z-index:3;background:var(--amber);color:var(--pine-deep);
  font-size:10px;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:var(--r-pill)}
.tpl-thumb .view{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(8px);opacity:0;
  background:var(--pine);color:var(--cream);border:none;font-family:var(--font-ui);font-weight:600;font-size:12.5px;
  padding:10px 16px;border-radius:9px;cursor:pointer;transition:.2s;box-shadow:var(--sh-md);white-space:nowrap}
.tpl-card:hover .view{opacity:1;transform:translate(-50%,-50%)}
.tpl-card:hover .tpl-thumb::after{content:"";position:absolute;inset:0;background:rgba(24,29,24,.18)}
.tpl-meta{padding:15px 17px 17px}
.tpl-meta .nm{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:var(--ink)}
.tpl-meta .fam{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.tpl-meta .ds{font-size:12px;color:var(--ink-2);line-height:1.45;margin-top:8px}

/* ---------- BENEFITS ---------- */
.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ben{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 26px}
.ben .ic{width:46px;height:46px;border-radius:12px;background:var(--pine-tint);color:var(--pine);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ben h3{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em;margin-bottom:8px}
.ben p{font-size:14px;color:var(--ink-2);line-height:1.55}

/* ---------- LEAD MAGNET ---------- */
.magnet{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.magnet-card{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-modal);padding:40px 44px;box-shadow:var(--sh-sm)}
.magnet-card .kicker{margin-bottom:13px}
.magnet-card h3{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.02em;margin-bottom:10px;text-wrap:balance}
.magnet-card p{font-size:15px;color:var(--ink-2);line-height:1.55;margin-bottom:22px}
.magnet-actions{display:flex;gap:12px;flex-wrap:wrap}
.magnet-visual{display:flex;align-items:center;justify-content:center;background:var(--pine);border-radius:var(--r-card);padding:30px;position:relative;overflow:hidden}
.magnet-visual::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(192,134,58,.16),transparent 62%)}
.magnet-visual .stack{position:relative;width:130px;height:166px}
.magnet-visual .pg{position:absolute;inset:0;background:var(--paper);border-radius:7px;box-shadow:var(--sh-md);padding:14px}
.magnet-visual .pg.b1{transform:rotate(-7deg) translate(-10px,4px);opacity:.55}
.magnet-visual .pg.b2{transform:rotate(4deg)}
.magnet-visual .pg .bar{height:6px;border-radius:3px;background:var(--pine);width:54px;margin-bottom:10px}
.magnet-visual .pg .l{height:4px;border-radius:2px;background:var(--line);margin-bottom:6px}
.magnet-visual .pg .l.am{background:var(--amber);width:60%;height:7px;margin-top:12px}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.01em}
.faq-q .pm{width:24px;height:24px;flex:none;color:var(--amber-deep);transition:transform .25s}
.faq-item.open .faq-q .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{font-size:15px;color:var(--ink-2);line-height:1.6;padding:0 4px 22px}

/* ---------- PRICING TEASER ---------- */
.ptease{background:var(--pine);color:var(--cream);position:relative;overflow:hidden}
.ptease::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(192,134,58,.10),transparent 62%)}
.ptease-in{max-width:1180px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative;z-index:1}
.ptease h2{font-family:var(--font-display);font-weight:700;font-size:34px;letter-spacing:-.025em;color:var(--cream);margin-bottom:14px;text-wrap:balance}
.ptease p{font-size:16px;color:#C7D1C7;line-height:1.55;margin-bottom:22px}
.ptease .pcard{background:rgba(255,255,255,.04);border:1px solid var(--pine-line);border-radius:var(--r-modal);padding:30px}
.ptease .pcard .tn{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}
.ptease .pcard .pr{font-family:var(--font-display);font-size:46px;font-weight:700;margin:10px 0 2px;letter-spacing:-.02em;color:var(--cream);font-variant-numeric:tabular-nums}
.ptease .pcard .pr small{font-size:15px;color:var(--muted-on-pine);font-weight:500;font-family:var(--font-ui)}
.ptease .pcard .was{font-size:14px;color:var(--faint-on-pine);text-decoration:line-through;font-family:var(--font-mono)}
.ptease .pcard ul{list-style:none;margin:18px 0 22px}
.ptease .pcard li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:14px;color:#C7D1C7}
.ptease .pcard li .tk{margin-top:2px}

/* ---------- FINAL CTA ---------- */
.finale{background:var(--pine-deep);color:var(--cream);text-align:center;position:relative;overflow:hidden}
.finale::after{content:"";position:absolute;left:50%;bottom:-260px;transform:translateX(-50%);width:680px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(192,134,58,.12),transparent 60%)}
.finale .inner{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:0 32px}
.finale h2{font-family:var(--font-display);font-weight:700;font-size:42px;line-height:1.04;letter-spacing:-.03em;color:var(--cream);margin-bottom:16px;text-wrap:balance}
.finale h2 .am{color:var(--amber)}
.finale p{font-size:17px;color:#C7D1C7;margin-bottom:30px}

/* ---------- FOOTER ---------- */
.nm-foot{background:var(--pine-deep);color:var(--muted-on-pine);padding:50px 0 54px;border-top:1px solid var(--pine-line)}
.foot{display:flex;justify-content:space-between;align-items:flex-start;max-width:1180px;margin:0 auto;padding:0 32px;gap:40px;flex-wrap:wrap}
.foot .brand b{color:var(--cream)}
.foot-cols{display:flex;gap:54px;flex-wrap:wrap}
.foot-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint-on-pine);margin-bottom:13px;font-weight:700}
.foot-col a{display:block;font-size:14px;color:#BFC9BE;padding:5px 0;transition:color .15s}
.foot-col a:hover{color:var(--cream)}
.foot-base{max-width:1180px;margin:38px auto 0;padding:22px 32px 0;border-top:1px solid var(--pine-line);
  display:flex;justify-content:space-between;font-size:13px;color:var(--faint-on-pine);flex-wrap:wrap;gap:12px}

/* ---------- FULL-PAGE PREVIEW OVERLAY ---------- */
.ov{position:fixed;inset:0;z-index:200;background:rgba(21,38,32,.62);backdrop-filter:blur(5px);display:none;flex-direction:column}
.ov.on{display:flex}
.ov-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 26px;background:var(--pine-deep);border-bottom:1px solid var(--pine-line);flex-wrap:wrap}
.ov-id{display:flex;align-items:center;gap:12px}
.ov-id .onm{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--cream)}
.ov-id .ofam{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-on-pine)}
.ov-ctrls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ov-ctrls .seg{background:rgba(255,255,255,.07)}
.ov-close{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid var(--pine-line);color:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ov-close:hover{background:rgba(255,255,255,.14)}
.ov-scroll{flex:1;overflow:auto;display:flex;justify-content:center;padding:30px 24px 60px}
.ov-fit{position:relative}
.ov-paper .paper{box-shadow:var(--sh-doc)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .hero-inner,.svc-grid,.conv-grid,.magnet-card,.ptease-in{grid-template-columns:1fr;gap:40px}
  .tpl-grid{grid-template-columns:1fr 1fr}
  .ben-grid,.steps{grid-template-columns:repeat(2,1fr)}
  h1.hero-h{font-size:44px}
  .ghost-doc{display:none}
  .doc-stage{max-width:440px}
}
@media (max-width:680px){
  .navlinks,.nav-cta .btn-line{display:none}
  .nm-nav{height:64px}
  .nm-sec{padding:60px 0}
  .tpl-grid,.ben-grid,.steps{grid-template-columns:1fr}
  h1.hero-h{font-size:36px}
  h2.sec-h{font-size:28px}
  .hero-inner{padding:40px 22px 64px}
  .container,.hero-inner{padding-left:22px;padding-right:22px}
  .magnet-card{padding:30px 24px}
  .conv-stage{height:300px}
}