/* ============ 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:900px){
  .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);
}
/* Plus d'air autour de la phrase "Faites revenir vos clients, sans effort" :
   au-dessus (logo "Lamina Fidelity") et en dessous (paragraphe "Lamina
   Fidelity réunit…"). Le préfixe .hero-inner passe au-dessus du reset
   ".lf-page h1,h2,h3,p { margin:0 }" de style.css. */
.hero-inner .hero-sub{
  margin-top:36px;
}
.hero-inner .hero-desc{
  margin-top:34px;
}
@media (max-width:640px), (min-width:641px) and (orientation:portrait) and (hover:none){
  .hero-inner .hero-sub{margin-top:28px;}
  .hero-inner .hero-desc{margin-top:26px;}
}
/* Remonte légèrement le bloc bas du hero (la citation, "Défiler") pour
   compenser l'air ajouté au-dessus (base partagée : 70px). */
.hero-bottom{
  margin-top:44px;
}

/* ---------- 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);
  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);}

/* ---------- hero — encadré Lamina (cross-sell vers laminacards.com) ----------
   Traité comme une mini-carte premium distincte du hero (fond propre +
   ombre légère), avec deux lignes logo+texte séparées par un fin diviseur :
   "Lamina Fidelity" (univers actif, avec badge de validation) puis "Lamina"
   (l'autre univers à découvrir). L'alignement à gauche et le monogramme de
   chaque marque rendent la distinction immédiate, sans dépendre de la
   couleur seule. */
.hero-lamina{
  margin:56px auto 0;
  max-width:460px;
  padding:26px 28px;
  background:linear-gradient(165deg,#fbf8f2,#f5efe2);
  border:1px solid rgba(182,136,58,.32);
  border-radius:20px;
  box-shadow:0 22px 44px rgba(20,20,20,.06), 0 2px 10px rgba(182,136,58,.07);
  text-align:left;
}
.hero-lamina-row{
  display:flex;
  align-items:center;
  gap:16px;
}
.hero-lamina-avatar{
  position:relative;
  flex-shrink:0;
}
.hero-lamina-avatar-img{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  padding:9px;
  background:#fff;
  border:1px solid rgba(182,136,58,.28);
  border-radius:50%;
  overflow:hidden;
}
.hero-lamina-avatar-img img{
  width:100%;
  height:100%;
  object-fit:contain;
}
/* Le monogramme "LF" source a plus de marge blanche autour du dessin que
   le "L" de logo-black-ink.png -- un padding plus faible ici le rend
   visuellement de taille cohérente avec l'autre monogramme. Sélecteur
   composé (deux classes) pour rester prioritaire sur .hero-lamina-avatar-img
   quel que soit l'ordre des règles dans les media queries en dessous. */
.hero-lamina-avatar-img.hero-lamina-avatar-img--fidelity{
  padding:3px;
}
/* The source artwork itself has a lot of built-in white margin around the
   "LF" glyph (unlike logo-black-ink.png, cropped tight) -- scaling the img
   up and letting the circle's overflow:hidden crop it is the only way to
   make the glyph read bigger without touching the source file. */
.hero-lamina-avatar-img--fidelity img{
  transform:scale(1.4);
}
.hero-lamina-check{
  position:absolute;
  right:-3px;
  bottom:-3px;
  width:19px;
  height:19px;
}
.hero-lamina-col{
  min-width:0;
}
.hero-lamina-tag{
  font-family:var(--sans);
  font-weight:600;
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-dark);
}
.hero-lamina-title{
  font-family:var(--sans);
  font-weight:700;
  font-size:.98rem;
  line-height:1.3;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--fg);
  margin-top:3px;
}
.hero-lamina-text{
  margin-top:3px;
  font-size:.82rem;
  line-height:1.55;
  color:var(--fg-dim);
}
.hero-lamina-note{
  margin-top:6px;
  font-size:.68rem;
  font-style:italic;
  line-height:1.4;
  color:var(--fg-dim);
  opacity:.75;
}
.hero-lamina-sep{
  position:relative;
  height:1px;
  margin:20px 0;
  background:rgba(20,20,20,.1);
}
.hero-lamina-sep span{
  position:absolute;
  top:50%;
  left:50%;
  width:6px;
  height:6px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--gold);
}
/* .hero-lamina prefix: raises specificity above ".lf-page a { color:inherit }".
   Rendu en petit bouton pill (même langage visuel que .hero-cta / .cta-gold-btn
   ailleurs sur le site) plutôt qu'en simple lien souligné, pour que le CTA se
   lise sans ambiguïté comme un élément cliquable. */
.hero-lamina .hero-lamina-link{
  margin-top:12px;
  display:inline-block;
  padding:11px 26px;
  font-family:var(--sans);
  font-weight:600;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-dark);
  background:transparent;
  border:1px solid rgba(182,136,58,.5);
  border-radius:30px;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.hero-lamina .hero-lamina-link:hover{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
}
/* Taille des avatars alignée dès le format tablette (pas seulement les
   téléphones tactiles) -- un seuil en largeur pure, pour ne pas dépendre
   de (hover:none), peu fiable sur certaines tablettes. */
@media (max-width:900px){
  .hero-lamina-avatar-img{width:44px;height:44px;padding:7px;}
  .hero-lamina-check{width:16px;height:16px;}
}
@media (max-width:640px), (min-width:641px) and (orientation:portrait) and (hover:none){
  .hero-lamina{
    margin-top:40px;
    max-width:min(380px, 90vw);
    padding:20px;
    border-radius:18px;
  }
  .hero-lamina-row{gap:12px;}
  .hero-lamina-title{font-size:.86rem;}
  .hero-lamina-text{font-size:.78rem;}
  .hero-lamina-note{font-size:.65rem;}
  .hero-lamina-sep{margin:16px 0;}
}

/* ---------- 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;}
/* .lf-page prefix so this max-width actually wins against
   ".lf-page img{max-width:100%}" (type+class) in style.css -- without it the
   260px cap below was silently ignored and the shots rendered full-column. */
.lf-page .wallet-card-shot{
  display:block;
  width:100%;
  max-width:240px;
  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;}
  /* the 230px cap left every step ragged against a ~90px dead strip on a
     phone -- let each step fill the column once stacked. */
  .step-item{max-width:none;}
}

/* ---------- 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:240px;margin-left:auto;margin-right:auto;} }
/* On a phone the two portrait shots stack; keep them small so the section
   doesn't balloon past ~1300px and bury the message under scrolling. */
@media (max-width:640px){ .lf-page .wallet-card-shot{max-width:200px;} }

/* ---------- 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;} }
/* Keep two columns on ordinary phones (375 / 390 / 414) -- a single column
   of 10 cards was ~1900px of scrolling. Only the narrowest devices fold to
   one column. */
@media (max-width:359px){ .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);
}
/* Stay 2x2 on a phone (short labels, small tiles) rather than four
   full-width squares stacked -- that was ~1500px of illustration. */
@media (max-width:560px){ .business-grid{gap:18px;max-width:360px;margin-left:auto;margin-right:auto;} }
@media (max-width:340px){ .business-grid{grid-template-columns:1fr;max-width:220px;} }

/* ---------- 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;
  /* real, load-bearing text (the "not a guarantee" notice) -- fg-faint on
     white is ~2.5:1 and fails WCAG AA, fg-dim clears it. */
  color:var(--fg-dim);
  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);
  /* start (not the grid default stretch): each card must be free to grow to
     its own content height when its accordion opens, without dragging the
     other two (still closed) cards up to match -- see .pricing-accordion. */
  align-items:start;
  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 Pro via bottom:100%, which otherwise
     leaves it crowded right under the first 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:.72rem;
  font-weight:500;
  color:var(--fg-dim);
}
.pricing-setup{
  font-size:.76rem;
  color:var(--fg-dim);
  margin-top:8px;
  margin-bottom:22px;
}
.pricing-description{
  font-size:.86rem;
  color:var(--fg);
  line-height:1.55;
  margin-bottom:16px;
  /* Roughly two lines' worth of space reserved so the short one-liner
     (Premium) doesn't leave the card noticeably shorter than the other
     two while all three are closed. */
  min-height:2.7em;
}
.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;margin-left:auto;margin-right:auto;} }

/* ---------- pricing banner (common conditions, above the toggle) ---------- */
.pricing-banner{
  text-transform:none;
  letter-spacing:.01em;
  font-size:.82rem;
  line-height:1.7;
  max-width:720px;
}

/* ---------- plan card accordion ("voir tout ce qui est inclus") ----------
   Same disclosure element as .faq-item (<details>/<summary>), styled to sit
   inside a .pricing-card and animated smoothly by the WAAPI-based JS in
   fidelity.js (native <details> toggles height in one jump otherwise). */
.pricing-accordion{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
  overflow:hidden;
}
.pricing-accordion-summary{
  cursor:none;
  list-style:none;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);
  font-weight:600;
  font-size:.76rem;
  letter-spacing:.03em;
  color:var(--fg-dim);
  transition:color .3s var(--ease);
}
.pricing-accordion-summary::-webkit-details-marker{display:none;}
.pricing-accordion-summary:hover{color:var(--fg);}
.pricing-accordion-label--open{display:none;}
.pricing-accordion[open] .pricing-accordion-label--closed{display:none;}
.pricing-accordion[open] .pricing-accordion-label--open{display:inline;}
.pricing-accordion-arrow{width:14px;height:14px;flex-shrink:0;transition:transform .4s var(--ease);}
.pricing-accordion[open] .pricing-accordion-arrow{transform:rotate(180deg);}
.pricing-accordion-content{padding-top:18px;}
.pricing-accordion-intro{
  font-size:.78rem;
  font-weight:600;
  color:var(--fg);
  margin-bottom:10px;
}
.pricing-full-list{
  list-style:none;
  padding:0;margin:0;
  font-size:.78rem;
  color:var(--fg-dim);
  line-height:1.85;
}
.pricing-full-list li::before{content:'+ ';color:var(--fg-faint);}
.pricing-accordion-summary:focus-visible{outline-offset:4px;}

/* ---------- comparison grid ---------- */
.compare-head{grid-column:1;margin-top:70px;}
.compare-title{
  font-family:var(--sans);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.2rem,2.2vw,1.6rem);
  letter-spacing:.01em;
  color:var(--fg);
  margin-bottom:8px;
}
.compare-subtitle{
  font-size:.88rem;
  color:var(--fg-dim);
  margin-bottom:30px;
}
.compare-wrap{
  grid-column:1;
  max-width:1100px;
  /* Without this, the table's min-width:640px below leaks out through this
     grid item's default auto min-width and forces the whole section wider
     than the viewport on narrow phones (~600px and under) instead of
     staying inside .compare-scroll's own horizontal scroll. */
  min-width:0;
}
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.compare-table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-family:var(--sans);
  /* Fixed layout + percentage widths on the header cells (thead) below --
     with the default `auto` layout, the long labels in the feature column
     (e.g. "Onglet Statistiques KPI / funnel / export CSV") made the browser
     size that column far wider than intended, which broke the sticky
     column on narrow screens by having it visually cover the value
     columns next to it. */
  table-layout:fixed;
}
.compare-table th,.compare-table td{
  padding:13px 16px;
  text-align:center;
  border-bottom:1px solid var(--line);
  font-size:.82rem;
}
.compare-table thead th{
  font-weight:700;
  font-size:.76rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--fg);
  border-bottom:1.5px solid var(--line-strong);
  padding-bottom:16px;
}
.compare-feature-col{
  text-align:left;
  font-weight:500;
  color:var(--fg-dim);
  width:34%;
}
thead .compare-feature-col{color:var(--fg-faint);font-weight:600;}
.compare-plan-col{width:22%;}
.compare-plan-col--featured{
  color:var(--gold-dark);
}
td.compare-plan-col--featured{background:rgba(182,136,58,.05);}
.compare-category-row th{
  text-align:left;
  padding:22px 16px 10px;
  border-bottom:1px solid var(--line);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fg-faint);
  background:#f8f5ee;
}
.compare-check{color:var(--fg);font-weight:600;}
.compare-dash{color:var(--fg-faint);}
@media (max-width:760px){
  .compare-feature-col{
    position:sticky;left:0;
    background:var(--bg);
    min-width:190px;
    box-shadow:1px 0 0 var(--line);
  }
  .compare-category-row th{position:sticky;left:0;}
}

/* ---------- misc a11y utility ---------- */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- 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 type system as .page-title, kept only a step larger so section 07
     and 09 read as "campaign" moments without shouting over the section
     headings. Line-height tightened from 1.4 -> 1.25 (1.4 = ~69px leading
     at the old size, far looser than the rest of the page); the gold
     underline still clears the next line at 1.25. */
  grid-column:1;
  font-family:var(--sans);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.7rem,3.8vw,2.7rem);
  line-height:1.25;
  letter-spacing:.01em;
  color:var(--fg);
  text-wrap:balance;
  margin-bottom:26px;
}
.sim-highlight{
  color:var(--gold);
  border-bottom:3px solid var(--gold);
  padding-bottom:1px;
}
/* .sim-inner prefix: needed to outrank style.css's
   ".lf-page h1,h2,h3,p{margin:0}" reset, which otherwise wins on
   specificity against a bare single-class selector on a <p> and silently
   drops margin:auto, leaving this paragraph flush-left instead of
   centered (same fix as .referral-inner .referral-desc below). */
.sim-inner .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;}
}

/* ---------- 09 referral programme (net-new, its own section) ----------
   Same skeleton as .sim-* above (centered title/desc + a 3-item row with
   vertical dividers) -- kept as its own class family rather than reusing
   .sim-* since the content differs (headed steps, not single-line ticks). */
.referral-inner{
  grid-template-columns:1fr;
  max-width:820px;
  text-align:center;
}
/* .referral-inner prefix on the h2/p rules below: needed to outrank
   style.css's ".lf-page h1,h2,h3,p{margin:0}" reset, which otherwise wins
   on specificity (not just source order) against a bare single-class
   selector on those same elements -- same fix already used elsewhere
   (see .hero-inner .hero-sub). Without it, margin:auto silently drops
   and these paragraphs render flush-left instead of centered. */
.referral-inner .referral-title{
  grid-column:1;
  font-family:var(--sans);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.7rem,3.8vw,2.7rem);
  line-height:1.25;
  letter-spacing:.01em;
  color:var(--fg);
  text-wrap:balance;
  margin-bottom:26px;
}
.referral-highlight{
  color:var(--gold);
  border-bottom:3px solid var(--gold);
  padding-bottom:1px;
}
.referral-inner .referral-desc{
  grid-column:1;
  color:var(--fg-dim);
  font-size:1.08rem;
  line-height:1.8;
  max-width:600px;
  margin:0 auto 46px;
}
.referral-steps{
  grid-column:1;
  display:flex;
  justify-content:center;
  margin-bottom:40px;
}
.referral-step{
  flex:1 1 0;
  max-width:260px;
  padding:0 26px;
  border-left:1px solid var(--line);
}
.referral-step:first-child{border-left:none;}
.referral-step-num{
  display:block;
  font-family:var(--sans);
  font-weight:700;
  font-size:1.1rem;
  color:var(--gold);
  margin-bottom:14px;
}
.referral-step h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.03em;
  color:var(--fg);
  margin-bottom:8px;
}
.referral-step p{
  color:var(--fg-dim);
  font-size:.86rem;
  line-height:1.7;
}
.referral-amount{color:var(--gold);}
.referral-inner .referral-note{
  grid-column:1;
  color:var(--fg-faint);
  font-size:.78rem;
  line-height:1.6;
  max-width:520px;
  margin:0 auto 34px;
}
.referral-cta{grid-column:1;}
@media (max-width:700px){
  .referral-steps{flex-direction:column;gap:30px;}
  .referral-step{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-features .page-inner,
#fidelity-business .page-inner,
#fidelity-calculator .page-inner,
#fidelity-pricing .page-inner{
  grid-template-columns:1fr;
  max-width:1100px;
}

/* Section 01 is the only one still using the two-column .page-inner (title
   column + wallet-badges column). Its body (.two-col) folds to one column at
   900px, so the outer grid has to fold at the same point -- otherwise
   821-900px leaves the title crushed into a ~345px column with the badges
   floating alone beside it. */
@media (max-width:900px){
  #fidelity-what .page-inner{grid-template-columns:1fr;}
}

/* Merged section 05: the software paragraph is now the section's chapo,
   above the feature grid. */
#fidelity-features .page-body{max-width:640px;margin-bottom:26px;}

/* ---------- "et toute autre activité" note (section 02) ---------- */
.business-note{
  grid-column:1;
  margin-top:22px;
  font-family:var(--sans);
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fg-faint);
}

/* ---------- 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);}
.footer-lamina-link{
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dark-fg-dim);
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.footer-lamina-link: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;}
}

/* ---------- real pointer stays visible (see script.js #cursor-dot) ----------
   Placed at the very end so it outranks the per-component cursor:none rules
   above (.hero-cta, .calc-scenario-btn, .pricing-switch...) by source order. */
.lf-page *{cursor:auto;}
.lf-page a,
.lf-page button,
.lf-page summary,
.lf-page label[for],
.lf-page .nav-item,
.lf-page .mobile-nav-item{cursor:pointer;}
.lf-page input[type="range"]{cursor:pointer;}
html.touch #cursor-dot{display:none;}