/* ============ LAMINA FIDELITY — page-specific styles ============
   Loaded only on /lamina-fidelity, after style.css. Reuses the shared
   tokens (--bg, --fg, --line, --ease, --sans...) and shared classes
   (.page, .page-inner, .page-num, .page-title, .page-kicker, .page-body,
   .faq-item, .reveal, .contact-*) defined there — nothing here duplicates
   or overrides an existing selector. */

/* ---------- hero offer tag ---------- */
.hero-offer-tag{
  display:block;
  text-align:center;
  font-family:var(--sans);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg-dim);
  margin-top:22px;
}

/* ---------- wallet badges visual (section 01 right column) ---------- */
.wallet-badges-visual{
  grid-column:2;grid-row:1 / span 5;
  justify-self:center;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.wallet-badge{
  display:flex;
  align-items:center;
  gap:12px;
  background:#161616;
  color:#fff;
  border-radius:10px;
  padding:14px 22px;
  font-family:var(--sans);
  font-weight:600;
  font-size:.92rem;
  filter:drop-shadow(0 14px 28px rgba(20,20,20,.18));
}
.wallet-badge-icon{
  width:30px;height:30px;
  flex-shrink:0;
  border-radius:8px;
  object-fit:cover;
}
@media (max-width:820px){
  .wallet-badges-visual{grid-column:1;grid-row:auto;margin-top:36px;align-items:center;}
}

/* Two-line "Lamina / Fidelity" logo is much closer to square than the
   generic single-line wordmark .hero-logo-img was sized for -- narrower
   width keeps its rendered height in the same ballpark as before. */
.hero-logo-img--fidelity{
  width:clamp(220px,30vw,380px);
}

/* ---------- hero CTA ---------- */
.hero-cta{
  display:inline-block;
  margin-top:34px;
  padding:14px 30px;
  border:1px solid var(--line-strong);
  border-radius:30px;
  font-family:var(--sans);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.05em;
  color:var(--fg);
  cursor:none;
  transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.hero-cta:hover{background:var(--fg);color:var(--bg);border-color:var(--fg);}

/* ---------- placeholder images (❌) ---------- */
.placeholder-img{
  position:relative;
  width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;
  border:1.5px dashed var(--line-strong);
  border-radius:4px;
  background:repeating-linear-gradient(135deg, rgba(20,20,20,.03) 0 10px, transparent 10px 20px);
  color:var(--fg-faint);
  text-align:center;
  padding:20px;
}
.placeholder-img .mark{
  font-size:2.2rem;
  line-height:1;
  color:#b3483f;
}
.placeholder-img .label{
  font-size:.7rem;
  letter-spacing:.04em;
  color:var(--fg-dim);
  max-width:26ch;
  line-height:1.5;
}
.placeholder-img.ph-169{aspect-ratio:16/9;}
.placeholder-img.ph-43{aspect-ratio:4/3;}
.placeholder-img.ph-tall{aspect-ratio:9/17.5;max-width:260px;margin:0 auto;}
.wallet-card-shot{
  display:block;
  width:100%;
  max-width:260px;
  height:auto;
  margin:0 auto;
  border-radius:16px;
  filter:drop-shadow(0 20px 40px rgba(20,20,20,.18));
}
.placeholder-img.ph-sq{aspect-ratio:1/1;}
.software-shot{max-width:760px;margin-top:26px;}

/* ---------- steps (comment ça fonctionne) ---------- */
.steps-grid{
  grid-column:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:36px;
  max-width:1030px;
  margin-top:10px;
}
.step-item{max-width:230px;}
.step-num{
  font-family:var(--sans);
  font-weight:700;
  font-size:1.6rem;
  color:var(--fg-faint);
  display:block;
  margin-bottom:14px;
}
.step-item h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.03em;
  color:var(--fg);
  margin-bottom:8px;
}
.step-item p{
  color:var(--fg-dim);
  font-size:.86rem;
  line-height:1.7;
}
@media (max-width:900px){ .steps-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .steps-grid{grid-template-columns:1fr;} }

/* ---------- wallet showcase ---------- */
.wallet-grid{
  grid-column:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  max-width:640px;
  margin-top:10px;
}
.wallet-card h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fg);
  margin:16px 0 8px;
}
.wallet-card p{color:var(--fg-dim);font-size:.86rem;line-height:1.7;}
@media (max-width:640px){ .wallet-grid{grid-template-columns:1fr;max-width:300px;margin-left:auto;margin-right:auto;} }

/* ---------- feature grid ---------- */
.feature-grid{
  grid-column:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px 36px;
  max-width:1030px;
  margin-top:10px;
}
.feature-card{
  border-top:1px solid var(--line);
  padding-top:16px;
}
.feature-card h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:.82rem;
  color:var(--fg);
  margin-bottom:8px;
}
.feature-card p{color:var(--fg-dim);font-size:.84rem;line-height:1.7;}
@media (max-width:900px){ .feature-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .feature-grid{grid-template-columns:1fr;} }

/* ---------- all-businesses grid ---------- */
.business-grid{
  grid-column:1;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
  max-width:820px;
  margin-top:10px;
}
.business-card{text-align:center;}
.business-card-shot{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:var(--line);
  border-radius:8px;
  margin-bottom:12px;
}
.business-card span{
  font-family:var(--sans);
  font-weight:600;
  font-size:.76rem;
  letter-spacing:.03em;
  color:var(--fg-dim);
}
@media (max-width:560px){ .business-grid{grid-template-columns:1fr;max-width:340px;} }

/* ---------- calculator ---------- */
.calc{
  grid-column:1;
  max-width:780px;
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:6px;
  padding:34px;
}
.calc-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 30px;
}
.calc-field label{
  display:block;
  font-family:var(--sans);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--fg-dim);
  margin-bottom:8px;
}
.calc-field input[type="range"]{
  width:100%;
  accent-color:var(--fg);
}
.calc-field .calc-value{
  font-family:var(--sans);
  font-weight:600;
  font-size:.92rem;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.calc-scenarios{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:6px;
}
.calc-scenario-btn{
  border:1px solid var(--line-strong);
  border-radius:20px;
  padding:8px 16px;
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:600;
  color:var(--fg-dim);
  cursor:none;
  transition:all .3s var(--ease);
}
.calc-scenario-btn.active{background:var(--fg);color:var(--bg);border-color:var(--fg);}
.calc-result{
  margin-top:30px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.calc-result-figure{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(1.6rem,3vw,2.1rem);
  color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.calc-result-label{
  font-size:.74rem;
  letter-spacing:.04em;
  color:var(--fg-dim);
  margin-top:6px;
}
.calc-disclaimer{
  margin-top:22px;
  font-size:.72rem;
  line-height:1.7;
  color:var(--fg-faint);
  max-width:560px;
}
.calc-field.mt{margin-top:26px;}
.calc-result-figure.mt{margin-top:14px;}
@media (max-width:640px){
  .calc{padding:22px;}
  .calc-fields{grid-template-columns:1fr;}
}

/* ---------- pricing ---------- */
.pricing-toggle{
  grid-column:1;
  display:flex;align-items:center;gap:14px;
  margin-top:6px;margin-bottom:34px;
}
.pricing-toggle span{
  font-family:var(--sans);
  font-weight:600;
  font-size:.76rem;
  letter-spacing:.04em;
  color:var(--fg-faint);
  transition:color .3s var(--ease);
}
.pricing-toggle span.active{color:var(--fg);}
.pricing-switch{
  position:relative;
  width:44px;height:24px;
  border:1px solid var(--line-strong);
  border-radius:20px;
  cursor:none;
  flex-shrink:0;
}
.pricing-switch::after{
  content:'';
  position:absolute;top:2px;left:2px;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--fg);
  transition:transform .3s var(--ease);
}
.pricing-switch.on::after{transform:translateX(20px);}
.pricing-save{
  font-size:.68rem;
  color:var(--fg-dim);
  border:1px solid var(--line);
  border-radius:14px;
  padding:3px 10px;
}
.pricing-grid{
  grid-column:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  max-width:1030px;
}
.pricing-card{
  position:relative;
  border:1px solid var(--line);
  border-radius:18px;
  padding:40px 30px;
  display:flex;flex-direction:column;
  /* page background stays exactly as-is per Margaux's instruction -- this
     var(--bg) just keeps the card itself opaque against whatever sits
     behind it, same as before. */
  background:var(--bg);
}
.pricing-card--featured{
  border:1.5px solid var(--gold);
}

/* ---------- featured-plan badge: gold circle+star, sparkles, pill ---------- */
.pricing-badge-wrap{
  position:absolute;
  bottom:100%;left:50%;
  transform:translateX(-50%);
  margin-bottom:22px;
  display:flex;
  align-items:center;
  gap:10px;
}
.pricing-badge-sparkle{
  width:16px;height:16px;
  color:var(--gold);
  flex-shrink:0;
}
.pricing-badge-icon{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}
.pricing-badge-icon svg{width:16px;height:16px;color:#fff;}
.pricing-badge{
  background:var(--bg);
  border:1.5px solid var(--gold);
  border-radius:20px;
  padding:8px 20px;
  font-family:var(--sans);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--gold-dark);
  white-space:nowrap;
}
@media (max-width:900px){
  /* Cards stack to one column here (see .pricing-grid below) -- the
     badge floats just above Formule 2 via bottom:100%, which otherwise
     leaves it crowded right under Formule 1's card. */
  .pricing-card:has(.pricing-badge-wrap){
    margin-top:64px;
  }
}
@media (max-width:420px){
  /* Full assembly (2 sparkles + circle + pill) is too wide for very
     narrow phones -- drop the sparkles first, the circle+pill pair
     alone still reads fine. */
  .pricing-badge-sparkle{display:none;}
}
.pricing-card h3{
  font-family:var(--sans);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--fg);
  margin-bottom:18px;
}
.pricing-amount{
  font-family:var(--sans);
  font-weight:700;
  font-size:2rem;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.pricing-amount sub{
  font-size:.6rem;
  font-weight:500;
  color:var(--fg-dim);
}
.pricing-setup{
  font-size:.76rem;
  color:var(--fg-dim);
  margin-top:8px;
  margin-bottom:22px;
}
.pricing-quota{
  font-size:.82rem;
  color:var(--fg);
  font-weight:600;
  margin-bottom:14px;
}
.pricing-includes{
  list-style:none;
  padding:0;margin:0 0 26px;
  font-size:.8rem;
  color:var(--fg-dim);
  line-height:2;
}
.pricing-includes li::before{content:'+ ';color:var(--fg-faint);}
.pricing-card .hero-cta{margin-top:auto;text-align:center;}
.pricing-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.pricing-cta-arrow{width:16px;height:16px;flex-shrink:0;transition:transform .3s var(--ease);}
.pricing-cta:hover .pricing-cta-arrow{transform:translateX(3px);}
@media (max-width:900px){ .pricing-grid{grid-template-columns:1fr;max-width:400px;} }

/* ---------- gold accent tokens (net-new, not in the original site) ---------- */
:root{
  /* Warm antique gold, matching the "or" (gold) metal-card option already
     part of the brand elsewhere -- used only for the specific accents
     Margaux called out (section 03's headline/ticks, the "Nos formules"
     title), not introduced anywhere else in the otherwise-achromatic
     ported design. */
  --gold:#b6883a;
  --gold-dark:#8f6a2c;
}
.gold-title{color:var(--gold);}
.cta-gold-btn{
  border-color:var(--gold) !important;
  color:var(--gold-dark) !important;
}
.cta-gold-btn:hover{
  background:var(--gold) !important;
  border-color:var(--gold) !important;
  color:#fff !important;
}

/* ---------- 03 free-simulation CTA (net-new, its own section) ---------- */
.sim-inner{
  grid-template-columns:1fr;
  max-width:820px;
  text-align:center;
}
.sim-title{
  /* Same treatment as every other .page-title (uppercase, weight, tracking)
     so this section reads as part of the site's type system -- only the
     size is bigger here, plus the gold/underline highlight below. Looser
     line-height than .page-title's 1.18 on purpose: at this larger size
     the gold underline needs clearance from the line below it, see
     .sim-highlight. */
  grid-column:1;
  font-family:var(--sans);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.9rem,4.6vw,3.1rem);
  line-height:1.4;
  letter-spacing:.01em;
  color:var(--fg);
  margin-bottom:26px;
}
.sim-highlight{
  color:var(--gold);
  border-bottom:3px solid var(--gold);
  padding-bottom:1px;
}
.sim-desc{
  grid-column:1;
  color:var(--fg-dim);
  font-size:1.08rem;
  line-height:1.8;
  max-width:600px;
  margin:0 auto 46px;
}
.sim-points{
  grid-column:1;
  display:flex;
  justify-content:center;
  margin-bottom:40px;
}
.sim-point{
  flex:1 1 0;
  max-width:260px;
  padding:0 26px;
  border-left:1px solid var(--line);
}
.sim-point:first-child{border-left:none;}
.sim-point-tick{
  display:block;
  width:30px;
  height:2px;
  background:var(--gold);
  margin:0 auto 16px;
}
.sim-point-label{
  font-family:var(--sans);
  font-size:.96rem;
  color:var(--fg-dim);
}
.sim-point-label strong{color:var(--fg);font-weight:700;}
.sim-cta{grid-column:1;}
@media (max-width:700px){
  .sim-points{flex-direction:column;gap:30px;}
  .sim-point{border-left:none;max-width:none;padding:0;}
}

/* ---------- contact modal (net-new) ---------- */
.contact-modal-backdrop{
  position:fixed;inset:0;
  background:rgba(20,20,20,.5);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  /* above #cursor-dot's z-index:9999 -- the custom cursor is a fixed,
     document-wide dot that keeps following the mouse regardless of what's
     underneath it; sitting above it here is what actually hides it while
     the modal (which also switches back to a real cursor via
     cursor:auto) is open, instead of a half-visible dot floating over
     the dialog. */
  z-index:10001;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  cursor:auto;
  animation:lf-modal-fade .25s var(--ease);
}
@keyframes lf-modal-fade{from{opacity:0;}to{opacity:1;}}
.contact-modal{
  position:relative;
  background:var(--bg);
  color:var(--fg);
  border-radius:10px;
  border:1px solid var(--line);
  max-width:560px;
  width:100%;
  padding:52px 48px 46px;
  cursor:auto;
  animation:lf-modal-rise .35s var(--ease);
}
@keyframes lf-modal-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.contact-modal-close{
  position:absolute;top:16px;right:16px;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);
  border-radius:50%;
  color:var(--fg-dim);
  cursor:pointer;
  background:none;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.contact-modal-close:hover{color:var(--fg);border-color:var(--fg);}
.contact-modal h3{
  font-family:var(--sans);
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--fg);
  margin-bottom:30px;
  padding-right:24px;
}
.contact-modal-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:20px 0;
  border-top:1px solid var(--line);
}
.contact-modal-row:first-of-type{border-top:none;}
.contact-modal-row-label{
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fg-faint);
}
.contact-modal-row a{
  font-family:var(--sans);
  font-weight:500;
  font-size:1.4rem;
  color:var(--fg);
  cursor:pointer;
  width:fit-content;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.contact-modal-row a:hover{border-color:var(--line-strong);}
@media (max-width:480px){
  .contact-modal{padding:38px 26px 30px;}
}

/* ---------- shared section width override for full-bleed grids ---------- */
#fidelity-how .page-inner,
#fidelity-wallet .page-inner,
#fidelity-software .page-inner,
#fidelity-features .page-inner,
#fidelity-business .page-inner,
#fidelity-calculator .page-inner,
#fidelity-pricing .page-inner{
  grid-template-columns:1fr;
  max-width:1100px;
}

/* Section 04 lost its dashboard-screenshot placeholder (removed per user
   instruction -- the software vitrine never shows a capture of the real
   product). Widening the intro paragraph keeps the section from reading as
   a mostly-empty page now that there's no visual on the right. */
#fidelity-software .page-body{max-width:640px;}

/* ---------- footer legal links (net-new) ---------- */
.footer-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}
.footer-legal-links{
  display:flex;
  gap:16px;
}
.footer-legal-links a{
  color:var(--dark-fg-dim);
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.footer-legal-links a:hover{color:var(--dark-fg);border-color:var(--dark-line-strong);}
@media (max-width:640px), (min-width:641px) and (orientation:portrait) and (hover:none){
  .footer-meta{align-items:flex-start;}
}