/* ==========================================================================
   RunWallet custom CSS layer (single file) — css/custom/main.<hash>.css

   FLATTENED 2026-07-25 by card PERF-01. This file previously consisted of six
   CSS import statements; the browser had to fetch and parse this file before
   it could even discover those six URLs, costing a guaranteed extra serial
   round-trip before first paint on every page. The six modules are inlined
   below **in their original import order** (globals, utilities, pricing,
   overrides, animations, polish), so cascade order — and therefore rendering —
   is byte-for-byte equivalent to the chain it replaces.

   FINGERPRINTED 2026-07-25 by card INFRA-01. The filename carries a hash of
   this file's own contents, which is what lets `_headers` serve it immutable:
   the URL changes whenever the bytes do, so a stale CDN copy can never be
   addressed. AFTER EDITING THIS FILE, RUN:

       python3 _private/docs/bump-css-hash.py

   It renames the file and rewrites all 11 <link> tags and the _headers stanza
   together. Never hard-code the current hash in a comment here — that would
   change the contents, and therefore the hash, on every run.

   This file is linked AFTER the Webflow stylesheet on every page, so equal-
   specificity rules here still win by source order alone.

   ⚠️ Never re-introduce a CSS import statement in this file: each one costs a
   serial round-trip before first paint. Append a new section instead, and keep
   the polish section last. The PERF-01 gate greps this file for import
   statements and expects a count of zero.
   ========================================================================== */

/* ===== globals.css ===== */

/* RunWallet Global Styles */
/* Extracted from inline <style> tags in HTML files */

/* Responsive Typography */
html {
  font-size: calc(0.625rem + 0.41666666666666663vw);
}

@media screen and (max-width:1920px) {
  html {
    font-size: calc(0.625rem + 0.41666666666666674vw);
  }
}

@media screen and (max-width:1440px) {
  html {
    font-size: calc(0.33616369710467703rem + 0.6681514476614699vw);
  }
}

@media screen and (max-width:991px) {
  html {
    font-size: calc(0.38448660714285715rem + 0.8928571428571428vw);
  }
}

@media screen and (max-width:767px) {
  html {
    font-size: calc(0.3342013888888889rem + 1.3888888888888888vw);
  }
}

@media screen and (max-width:479px) {
  html {
    font-size: calc(0.7494769874476988rem + 0.8368200836820083vw);
  }
}

/* Text Rendering Optimizations */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Focus States for Accessibility */
*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
  outline: 0.125rem solid #4d65ff;
  outline-offset: 0.125rem;
}

/* Inherit Color Utility */
.inherit-color * {
  color: inherit;
}

/* Rich Text Margin Reset */
.w-richtext> :not(div):first-child,
.w-richtext>div:first-child> :first-child {
  margin-top: 0 !important;
}

.w-richtext>:last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child {
  margin-bottom: 0 !important;
}

/* Container Alignment */
.container-medium,
.container-small,
.container-large {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Large Screen Container Optimization */
@media (min-width: 1981px) {
  .container-large,
  .navbar_container {
    max-width: 90rem;
    width: 100%;
  }
}

/* Text Truncation Utilities */
.text-style-3lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.text-style-2lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ===== utilities.css ===== */

/* RunWallet Utility Classes */
/* Extracted from inline <style> tags in HTML files */

/* Visibility Utilities */
.hide {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .hide,
  .hide-tablet {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .hide-mobile-landscape {
    display: none !important;
  }
}

@media screen and (max-width: 479px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Spacing Reset Utilities */
.margin-0 {
  margin: 0rem !important;
}

.padding-0 {
  padding: 0rem !important;
}

.spacing-clean {
  padding: 0rem !important;
  margin: 0rem !important;
}

/* Directional Margin Utilities */
.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}

.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

/* Directional Padding Utilities */
.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}

.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

/* ===== pricing.css ===== */

/* RunWallet Pricing Toggle Styles */
/* Extracted from inline style attributes in tarifs.html */

/* Price Toggle States */
.price_toggle.month-btn {
  opacity: 1;
}

.price_toggle.annual-btn {
  opacity: 0.7;
}

/* Price Display Toggle */
.price.month {
  display: block;
}

.price.annual {
  display: none;
}

/* When annual mode is active */
.pricing-annual .price.monthly {
  display: none;
}

.pricing-annual .price.annual {
  display: block;
}

/* CNT-03: the plan names became <h2> so outline parsers can see them.
   The project-level `h2` rule adds letter-spacing:-.03em, which this class
   does not otherwise override; `inherit` reproduces the former <div> exactly
   so the promotion is a pure semantics change with no pixel delta. */
.pricing_card-title {
  letter-spacing: inherit;
}

/* Pricing Toggle Slider Animation */
.price-toggle_slider {
  -webkit-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  -moz-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  -ms-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  transition: transform 0.3s ease;
}

/* Pricing Toggle Slider - Annual Position */
.pricing-annual .price-toggle-slider {
  -webkit-transform: translate3d(100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  -moz-transform: translate3d(100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  -ms-transform: translate3d(100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  transform: translate3d(100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
}

/* ===== overrides.css ===== */

/* RunWallet Color and Layout Overrides */
/* Extracted from inline style attributes across HTML files */

/* Legal Page Heading Colors */
.legal-heading {
  color: rgb(41,35,92) !important;
}

/* Legal Page Heading Variants */
.legal-heading.mentions-legales {
  color: rgb(41,35,92);
}

.legal-heading.politique-confidentialite {
  color: rgb(41,35,92);
}

.legal-heading.cgv {
  color: rgb(41,35,92);
}

/* Alternative selector for specific headings */
.collection_legale-item .heading-2 {
  color: rgb(41,35,92);
}

/* ===== animations.css ===== */

/* RunWallet Animation Utilities */
/* Extracted from inline style attributes across HTML files */

/* Base Transform Class */
.transform-base {
  -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
}

/* Slide Right Transform */
.transform-slide-right {
  -webkit-transform: translate3d(105%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  -moz-transform: translate3d(105%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  -ms-transform: translate3d(105%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  transform: translate3d(105%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
}

/* Hidden State */
.transform-hidden {
  display: none;
}

/* Combined Transform and Hidden */
.transform-slide-right-hidden {
  -webkit-transform: translate3d(105%, null, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  -moz-transform: translate3d(105%, null, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  -ms-transform: translate3d(105%, null, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  transform: translate3d(105%, null, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  display: none;
}

/* Animation Transitions */
.transform-base,
.transform-slide-right {
  transition: transform 0.3s ease;
}

/* Legal Item Background Animation */
.legale-item_bg {
  -webkit-transform: translate3d(105%, null, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  -moz-transform: translate3d(105%, null, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  -ms-transform: translate3d(105%, null, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  transform: translate3d(105%, null, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  display: none;
}

/* Legal Item Icon Animation */
.legale-item_ico {
  -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
}

/* ===== polish.css ===== */

/* ==========================================================================
   polish.css — typographic + slider polish for RunWallet
   ACTIVATION: this is the LAST section of the custom CSS layer, so every
   equal-specificity rule below wins by cascade order alone — the layer is
   linked after the Webflow stylesheet on all pages. No !important anywhere,
   Webflow files untouched. Keep this section last when appending new ones.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROOT CAUSE — Webflow ships white-space:break-spaces on these two
   classes, so pretty-printed HTML source newlines render as literal breaks
   (staircased text site-wide). Same specificity (0,1,0) as the offending
   rules; later source order wins. No media-query variant re-declares
   white-space, so one rule covers all breakpoints on all 9 pages. */
.text-size-medium,
.slider-content_title {
  white-space: normal;
}

/* --------------------------------------------------------------------------
   2. WRAP QUALITY — progressive enhancement, silently ignored by older
   engines. Balance evens multi-line headings (incl. the mobile pricing h2
   and scenario-card h3s); pretty suppresses single-word orphans in prose. */
:where(h1, h2, h3, h4) {
  text-wrap: balance;
}
:where(p, li) {
  text-wrap: pretty;
}
/* Class specificity (0,1,0) so these beat the zero-specificity rules above:
   tab subtitles keep two even lines once their <br /> is retired at 479px,
   and the centered footer-CTA subline stops orphaning the word "expert". */
.home-step_slider-tab-subtitle {
  text-wrap: balance;
}
.footer_contact-wrapper .text-size-medium {
  text-wrap: balance;
}

/* Readable measure for long intro paragraphs only — scoped to the hero and
   section-intro wrappers so .text-size-medium inside cards/grids (pricing
   benefits, stat cards, scenario cards) is never constrained. :where()
   keeps specificity at 0 so any Webflow sizing rule would still win. */
:where(.home-header_heading,
       .section-heading_wrapper,
       .section-heading_title-wrapper,
       .section-heading_content-wrapper) :where(p.text-size-medium) {
  max-width: 60ch;
}

/* Prose rhythm: inherited body 1.5 is tight for 1.125rem marketing copy.
   Additive — no Webflow rule declares line-height on this class. */
.text-size-medium {
  line-height: 1.6;
}

/* h1 tracking: Webflow applies -.02em only <=991px; unify at all widths so
   desktop and tablet hero render with the same voice. */
h1 {
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   3. DESIGNED <br /> KEPT IN MARKUP — neutralized only where the forced
   break fights natural wrapping at narrow widths (non-destructive). */
@media (max-width: 767px) {
  /* 'Des plans qui s'adaptent <br />...' : forced split + natural wrap
     = ragged 4-line stack with an orphaned 'flux' at 390px. */
  .section_home-price h2 br {
    display: none;
  }
}
@media (max-width: 479px) {
  /* Tab cards are max-width:60% here; the forced split would re-wrap each
     half into 3-4 broken lines. balance (rule 2) keeps two even lines. */
  .home-step_slider-tab-subtitle br {
    display: none;
  }
  /* Heading-group -> section-body gap: 5rem reads as a chasm at 390px. */
  .section-heading_wrapper {
    margin-bottom: 3rem;
  }
}

/* --------------------------------------------------------------------------
   4. SLIDER CONTAINMENT — only Swiper's JS bundle is loaded, never its
   stylesheet, so the canonical .swiper clip is missing: off-screen slides
   bleed to the viewport edge and can leak page-level horizontal scroll.
   This is the exact rule Swiper itself ships; pagination lives inside the
   .swiper element, so nothing functional is hidden. */
.swiper {
  overflow: hidden;
}

/* Page-level guard for any remaining decorative bleed. clip, not hidden:
   it creates no scroll container, so fixed/sticky descendants keep working;
   gated for old engines. */
@supports (overflow-x: clip) {
  .main-wrapper {
    overflow-x: clip;
  }
}

/* Contain the step-card art that bleeds right (inset -8% under 992px).
   The .background-color-secondary variant already ships overflow:hidden —
   this aligns the tertiary/dark variants with it. */
.home-step_slider-content {
  overflow: hidden;
}

/* Resilience: the site shipped with its Swiper init throwing a SyntaxError
   (fixed in index.html). If Swiper ever fails again, these strips degrade
   to native horizontal scrolling instead of dead, clipped content. Swiper
   adds .swiper-initialized on boot, switching the fallback off so native
   scroll never fights its transform-based drag. */
.slider_tabs:not(.swiper-initialized) .slider_tabs-link-wrapper,
.slider_scenario:not(.swiper-initialized) .home-scenario_slider-wrapper {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* Honest gutters pre-init (Webflow zeroes the gap because spacing normally
   comes from Swiper's spaceBetween); inert once JS runs. */
.slider_scenario:not(.swiper-initialized) .home-scenario_slider-wrapper {
  gap: 1.5rem;
}

/* Pagination bullets are unstyled empty spans without Swiper's CSS —
   invisible even once JS runs. Static flow so the dots occupy real rhythm
   space below the tab strip; brand dark blue, finger-sized hit area (the
   transparent border extends the tap target to ~2rem while the visible dot
   stays .5rem via background-clip). */
.swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin-top: 1.5rem;
}
.swiper-pagination-bullet {
  box-sizing: content-box;
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0.75rem solid transparent;
  border-radius: 50%;
  background-color: var(--base-color-brand--blue-dark, #29235c);
  background-clip: padding-box;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.swiper-pagination-bullet-active {
  opacity: 1;
}

/* Scenario cards: the fixed 37rem height can clip the longest card's text
   at narrow widths once text reflows — allow growth, never shrink. */
@media (max-width: 767px) {
  .swiper-slide.home-scenario-card {
    height: auto;
    min-height: 37rem;
  }
}

/* --------------------------------------------------------------------------
   5. DESKTOP VERTICAL RHYTHM — white sections carry 12.5rem top AND bottom,
   so white-to-band seams stack into ~400px dead zones. Gradient bands keep
   their generous symmetric interiors (that airiness is brand); only the
   white home-section paddings step down. Scoped to section_home-* classes
   (index-only) and min-width:992px, so it cannot collide with Webflow's
   max-width:991px 6rem reduction or touch the other 8 pages. */
@media (min-width: 992px) {
  .section_home-step .padding-section-large,
  .section_home-scenario .padding-section-large {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  /* Last white section before the footer: its bottom padding adds to the
     footer's pixel-motif clearance — smaller step closes the pre-footer
     chasm. */
  .section_home-fidelisation .padding-section-large {
    padding-top: 10rem;
    padding-bottom: 6rem;
  }
  /* Pricing band: trim only the dead purple below the price card. */
  .section_home-price .padding-section-large {
    padding-bottom: 10rem;
  }
}

/* --------------------------------------------------------------------------
   6. FOOTER GUARDS */
/* CTA block (title / subline / button) was set solid at .625rem; open it to
   the page's own 1rem intra-group gap so the CTA breathes. */
.footer_contact-wrapper {
  grid-row-gap: 1rem;
  row-gap: 1rem;
}
/* The CTA title is a fixed-width block down to 480px — cap it so it can
   never push past a narrow viewport. */
.footer_contact-title {
  max-width: 100%;
}
/* Tablet social row: five 1.45rem uppercase links + arrows cannot fit at
   768px, so EMAIL orphans onto its own centered line. Step the link scale
   down one notch in the 768-991 band only; <=767px keeps Webflow's
   intentional stacked layout untouched. */
@media (min-width: 768px) and (max-width: 991px) {
  .footer_link {
    font-size: 1rem;
  }
  .footer_link-wrapper {
    grid-column-gap: 1.5rem;
    column-gap: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   7. MOTION — the hero scroll cue anchors to #section-cible; smooth it only
   for users who have not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}