/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where design tokens, reset, normalize & box-sizing styles go.
*/

/* Design tokens
Static custom properties for values that recur across the theme but are NOT
driven by the HubSpot theme settings. (Brand colors live in utilities/_colors.css
and fonts in theme-overrides.css, both seeded from the editor.) Defined on :root
in the generic layer so every component and module stylesheet can read them via
var(). Values are the Parkour3 brand (PROJECT-BRANDGUIDE.md): a dark-by-default
theme, so the feedback colors and the on-dark ramp are the ones in daily use.
*/

:root {
  /* Neutrals & on-dark
  --color-white replaces the hardcoded white literals. The on-dark ramp is
  translucent white for text/borders over dark sections. */
  --color-white: #fff;
  --on-dark-90: rgba(255, 255, 255, 0.9);
  --on-dark-80: rgba(255, 255, 255, 0.8);
  --on-dark-70: rgba(255, 255, 255, 0.7);
  --on-dark-60: rgba(255, 255, 255, 0.6);
  --on-dark-50: rgba(255, 255, 255, 0.5);
  --on-dark-40: rgba(255, 255, 255, 0.4);
  --on-dark-30: rgba(255, 255, 255, 0.3);
  --on-dark-25: rgba(255, 255, 255, 0.25);
  --on-dark-20: rgba(255, 255, 255, 0.2);
  --on-dark-15: rgba(255, 255, 255, 0.15);
  /* on-light ramp — translucent black for text/borders over light sections. */
  --on-light-90: rgba(0, 0, 0, 0.9);
  --on-light-70: rgba(0, 0, 0, 0.7);
  --on-light-50: rgba(0, 0, 0, 0.5);
  --on-light-25: rgba(0, 0, 0, 0.25);
  --on-light-20: rgba(0, 0, 0, 0.2);
  --on-light-15: rgba(0, 0, 0, 0.15);
  --on-light-10: rgba(0, 0, 0, 0.1);
  --on-light-05: rgba(0, 0, 0, 0.05);
  --border-on-light: rgba(0, 0, 0, 0.15);
  /* Semantic / feedback colors — route component hardcodes through these.
  The theme is dark by default, so each one is tuned for a dark surface:
  error 7.85:1 and success 8.62:1 on --color-black. Neither is in the design
  (it shows no states) — see PROJECT-BRANDGUIDE.md > States. */
  --color-border: var(--on-dark-20);
  --color-error: #ff8a7a;
  --color-success: #7cc47f;
  --color-success-soft: rgba(124, 196, 127, 0.15);
  /* Button hover: the accent darkened 12% (#D14132 on the shipped palette),
     white label 4.65:1. Follows the editor's accent. */
  --color-accent-hover: color-mix(in srgb, var(--color-accent) 88%, #000);
  /* Red for SMALL text on the dark bands (the 13px section uptitle): the accent
     lightened 20% (#F16E61 on the shipped palette) reaches 4.66:1 on the
     gradient's top stop, where the accent itself stops at 3.68:1. Large red
     text (stat numbers) keeps --color-accent. Follows the editor's accent. */
  --color-accent-text: color-mix(in srgb, var(--color-accent) 80%, #fff);

  /* Brand gradients (Figma fill styles).
  dark-grey-gradient — page background, gradient bands, the form card, tiles.
  Its top stop is the Dark alternate palette slot; the bottom stop has no slot.
  stroke-gradient — the 1px border of cards and the 2px frame of photos,
  painted with the border-box technique (see components/_surface.css). */
  --gradient-dark: linear-gradient(180deg, var(--color-dark1) 0%, #0a0909 100%);
  --gradient-stroke: linear-gradient(145deg, var(--color-sky) 0%, #4a4a4a 100%);

  /* Bands — every page section is a rounded panel floating over the page
  gradient (components/_section.css › .section--panel). Desktop 10 / 16px
  (Audit CRM), phone 5 / 10px (LP Salon mobile mockup), fluid in between. */
  --band-inset: clamp(0.3125rem, 1.25vw, 0.625rem); /* 5px → 10px — panel to viewport edge */
  --band-gap: clamp(0.625rem, 2vw, 1rem); /* 10px → 16px — between two panels */

  /* Forms — the chip behind a label that sits on the field's border
  (components/_hubspot-form-dark.css). Default = the middle of
  --gradient-dark, where the fields of the gradient form card sit; a form on a
  solid surface sets it to that surface. */
  --form-label-bg: color-mix(in srgb, var(--color-dark1) 50%, #0a0909);

  /* Section rhythm
  Vertical steps between section bands: a page reads as a stack of bands, and a
  band that is built from two modules — an intro on top of its content — needs a
  tighter seam than a full stop. The `sectionSpacingFields` builder exposes this
  scale as Style-tab choices, and the `section_spacing` macro renders the picked
  step as --section-pt / --section-pb on the module's section element, which the
  shared `.section` class consumes (components/_section.css), so a template or
  the page editor can retune one instance without touching the module.
  Each step clamps down on small screens; the max is the desktop design value. */
  --section-space-none: 0;
  --section-space-2xs: 0.625rem; /* 10px — content module sitting under its intro */
  --section-space-xs: 1.25rem; /* 20px — intro module sitting above its content */
  --section-space-sm: clamp(2rem, 4vw, 2.5rem); /* 40px */
  --section-space-md: clamp(2.5rem, 5vw, 3.75rem); /* 60px — .section default */
  --section-space-lg: clamp(3rem, 6vw, 5rem); /* 80px */
  --section-space-xl: clamp(3rem, 7vw, 6.25rem); /* 100px — band opening */

  /* Spacing scale (0.25rem base — matches the utilities in utilities/_spacing.css) */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem; /* card padding, card grid gap */
  --space-5: 1.25rem;
  --space-6: 1.5rem; /* form field gap */
  --space-7: 1.75rem; /* 28px — band title to content, tile padding */
  --space-8: 2rem;
  --space-9: 2.25rem; /* 36px */
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-15: 3.75rem; /* 60px — hero column inset */
  --space-16: 4rem; /* 64px — text column inset beside a photo */
  /* Side padding of .container, OUTSIDE the content width: the theme setting
     Maximum content width (1280) is the width the content fills, as in the
     design (1280 inside a 1420 panel at 1440). 16px on a phone (the mobile
     mockup's band padding) → 40px. */
  --space-gutter: clamp(1rem, 4vw, 2.5rem);

  /* Stat number step (utilities/_text.css › .text-stat): 52px on a phone →
     112px at 1280. A token so a module can cap it, never restate it. */
  --fs-stat: clamp(3.25rem, 1.78rem + 6.52vw, 7rem);

  /* Font weight — Work Sans, the five weights the design uses. */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900; /* stat numbers, hero title */

  /* Radius */
  --radius-xs: 3px; /* checkbox */
  --radius-sm: 8px; /* form fields, small callouts, inner photo box */
  --radius-md: 12px;
  --radius-lg: 16px; /* photos; the header bar (14 in the design) */
  --radius-tile: 18px; /* stat / feature tiles */
  /* The corner of a CARD — a panel that carries its own background, not a
     control. Bigger than --radius-sm on purpose: the two are not
     interchangeable, and a card set to 8px reads as a mis-sized field. */
  --radius-card: 24px;
  --radius-band: 24px; /* page bands (.section--panel) */
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Elevation */
  --shadow-dropdown: 0 2px 9px 0 rgba(0, 0, 0, 0.4);
  /* The design's button shadow (both layers are on every CTA). */
  --shadow-button:
    0 2px 4px 0 rgba(136, 144, 194, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15);
  /* Tiles are lit from above: a soft inner shade under their top edge. */
  --shadow-tile: inset 0 4px 4px 0 rgba(80, 80, 80, 0.25);
  --shadow-tile-lg: inset 0 9.3px 9.3px 0 rgba(80, 80, 80, 0.25); /* big stat tiles */
  /* Frosted header bar ("Morph" effect): backdrop-filter: blur(). */
  --blur-glass: 12px;
  /* Two layers rather than one: a short tight shadow that seats the card, and a
     long diffuse one that lifts it off the band. Same value on every card in
     the theme — tiles, testimonial, contact card — so they read as one family. */
  --shadow-card:
    0 4px 4px 0 rgba(15, 13, 31, 0.15), 0 20px 20px 0 rgba(15, 13, 31, 0.08);

  /* Motion */
  --duration-fast: 0.15s;
  --duration-medium: 0.25s;
  --duration-slow: 0.3s;
  /* Scroll reveal (components/_reveal.css). Deliberately long: below ~0.6s the
     movement went almost unnoticed — it plays while the eye is still arriving
     on the band. */
  --duration-reveal: 0.9s;
  --easing-standard: linear;
  /* Deceleration curve — leaves fast, settles gently. Used by the scroll reveal
     and by any panel that unfolds. */
  --easing-decelerate: cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index */
  --z-overlay: 1;
  --z-content: 2;
  --z-dropdown: 99;
}

/* Reduced motion — honor the user's OS preference globally. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
*, *:before, *:after {
  box-sizing: border-box;
}

p,h1,h2,h3,h4,h5,h6,ul,ol,pre {
  margin: 0;
}

/* Strip list styling globally. Bullets/numbers are restored only inside
   `.typography` (rich-text content); structural lists — cards, grids, nav —
   stay clean. Keep `role="list"` on stripped lists for assistive tech. */
ul, ol {
  list-style: none;
  padding: 0;
}

/* Images always carry width/height attributes (HubSpot builds the srcset from
   them). This keeps them fluid: never wider than their container, aspect ratio
   preserved, space reserved before load (no CLS). */
img {
  max-width: 100%;
  height: auto;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0;
}
/* Zigzag
Alternating media/text rows: stacked on mobile, side-by-side on desktop with
every other row reversed. Shared layout for the Feature and How-we-help panels.
Modules keep their own inner styling (titles, text colour, media aspect-ratio).
*/

.zigzag {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.zigzag__row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.zigzag__media,
.zigzag__body {
  width: 100%;
}

@media (min-width: 1024px) {
  .zigzag {
    gap: 4.5rem;
  }

  .zigzag__row {
    align-items: center;
    flex-direction: row;
    gap: 3.5rem;
  }

  .zigzag__row:nth-child(even) {
    flex-direction: row-reverse;
  }

  .zigzag__media,
  .zigzag__body {
    flex: 1;
    min-width: 0;
  }
}

/* Elements
Base HTML elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body {
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* Paragraphs */

/* No font-size: a paragraph inherits it, so the text-* utility on a rich-text
   wrapper (`text-normal` on a module intro, 16 → 18px) reaches the copy. With
   no utility around, the body's 18px applies, as before. */
.typography p {
  margin: 0 0 1.4rem;
}

/* Anchors */

.typography a {
  cursor: pointer;
}

/* Headings */
.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
  margin: 0;
}

/* Lists */

.typography ul,
.typography ol {
  margin: 0 0 1.4rem;
  padding-left: 1.4rem;
}

.typography ul {
  list-style: disc;
}

.typography ol {
  list-style: decimal;
}

.typography ul ul,
.typography ol ul,
.typography ul ol,
.typography ol ol {
  margin: 0;
}

.typography ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Code blocks */

.typography pre {
  overflow: auto;
}

.typography code {
  vertical-align: bottom;
}

/* Blockquotes */

.typography blockquote {
  border-left: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 0.7rem;
}

/* Horizontal rules */

.typography hr {
  border: none;
  border-bottom: 1px solid var(--color-border);
}

/* Image alt text */

.typography img {
  font-size: 0.583rem;
  word-break: normal;
}
/* Base button — clean, on-brand accent bar shared by native <button> elements,
   the generic .button/.hs-button classes, and HubSpot form submit inputs
   (forms, membership/login/reset pages). Parkour3: red fill, white 14px
   semibold label; the pill corner and padding come from Theme settings >
   Buttons (theme-overrides.css). Component variants (.btn-cta, .btn-dark) and
   the .no-button reset override it. */

button,
.button,
.hs-button,
input[type="submit"] {
  background-color: var(--color-accent);
  border: none;
  color: var(--color-white);
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  /* Theme settings > Buttons > spacing (seeded in theme-overrides.css);
     falls back to the static 15px 32px outside a theme context. */
  padding: var(--btn-padding, 0.9375rem 2rem);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard);
  white-space: normal;
}

/* A bare <button> may be a module's own control with its own background, so
   its hover only dims; the explicit button classes take the accent hover. */
button:hover {
  filter: brightness(0.95);
}

.button:hover,
.hs-button:hover,
input[type="submit"]:hover {
  background-color: var(--color-accent-hover);
  filter: none;
}

button:focus-visible,
.button:focus-visible,
.hs-button:focus-visible,
input[type="submit"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

button:disabled,
.button:disabled,
.hs-button:disabled,
input[type="submit"]:disabled {
  background-color: #767676;
  border-color: #767676;
  color: #FFFFFF;
  cursor: not-allowed;
  filter: none;
}

/* Call-to-action button — accent bar with a trailing arrow. Shared across hero, cta,
   reusable module CTAs. Modules override padding / min-width
   / display as needed (this block holds only the common visual). */

.btn-cta {
  align-items: center;
  background-color: var(--color-accent);
  color: var(--color-white);
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  /* Theme settings > Buttons > spacing (seeded in theme-overrides.css);
     falls back to the static 12px 25px outside a theme context. */
  padding: var(--btn-padding, 0.75rem 1.5625rem);
  text-decoration: none;
  transition: filter var(--duration-fast) var(--easing-standard);
}

.btn-cta:hover {
  filter: brightness(0.95);
}

.btn-cta__arrow {
  align-items: center;
  display: flex;
  flex: none;
}

.btn-cta__arrow .icon {
  height: 1.25rem;
  width: 1.375rem;
}

/* Secondary (grey) variant of the CTA button. */

.btn-cta--secondary {
  background-color: var(--color-dark2);
  color: var(--color-white);
}

.btn-cta--secondary:hover {
  filter: brightness(1.2);
}

/* Dark CTA bar — dark surface, flips to accent on hover. Hover trigger is left to the
   module using this shared base. */

.btn-dark {
  align-items: center;
  background-color: var(--color-black);
  color: var(--color-white);
  display: flex;
  font-weight: var(--fw-medium);
  gap: var(--space-4);
  justify-content: space-between;
  /* Theme settings > Buttons > spacing (seeded in theme-overrides.css);
     falls back to the static 12px 25px outside a theme context. */
  padding: var(--btn-padding, 0.75rem 1.5625rem);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard);
}

.btn-dark__arrow {
  align-items: center;
  display: flex;
  flex: none;
}

.btn-dark__arrow .icon {
  height: 1.25rem;
  width: 1.375rem;
}

/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  filter: none;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}

.no-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Button style system — generic accent / outline / dark buttons driven by the
   shared `style` dropdown (src/modules/_fields/button.js) and rendered by the
   `button` macro as `.btn .btn--style-N`. Reused across modules (standalone
   CTAs, button groups) so every themed button shares one source of truth.

   Parkour3: a pill, 14px semibold, 15px 32px + a 1px border = 48px tall, as
   in the design. Only style 1 is drawn in the mockups; styles 2 and 3 are the
   theme's dark-page counterparts (PROJECT-BRANDGUIDE.md > Components). */

.btn {
  align-items: center;
  border: 1px solid transparent;
  /* Theme settings > Buttons > corner radius (seeded in theme-overrides.css);
     falls back to the static token outside a theme context. */
  border-radius: var(--btn-radius, var(--radius-pill));
  cursor: pointer;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  gap: var(--space-2);
  justify-content: center;
  line-height: 1.2;
  /* Theme settings > Buttons > spacing (seeded in theme-overrides.css);
     falls back to the static 15px 32px outside a theme context. */
  padding: var(--btn-padding, 0.9375rem 2rem);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard),
    filter var(--duration-fast) var(--easing-standard);
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Style 1 — solid accent (primary): the design's CTA, with its shadow */

.btn--style-1 {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-button);
  color: var(--color-white);
}

.btn--style-1:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Style 2 — white outline (secondary), fills with the accent on hover. A red
   outline would put 14px red text on the gradient (3.68:1, fails AA). */

.btn--style-2 {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn--style-2:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* Style 3 — solid white (tertiary), flips to accent on hover. A dark fill
   would vanish into the dark bands. */

.btn--style-3 {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-black);
}

.btn--style-3:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* Inert twin of a button whose URL is not set yet: the `button` / `arrow_link` /
   `link` macros render a <span> instead of an <a href="#"> (see
   _macros/components.html → button_placeholder), so the button still shows
   without shipping a dead link. Same pixels; only the cursor tells that there is
   nothing to click. The hover styles are left alone on purpose — neutralizing
   them would mean out-specifying every .btn--style-N:hover rule for no real
   gain. */

span.btn,
span.btn-cta,
span.btn-dark {
  cursor: default;
}
/* Forms — HubSpot legacy (v3) embeds. Colors, borders, corner radius and the
   submit button come from Theme settings > Forms (theme-overrides.css), whose
   Parkour3 defaults are already dark: transparent fields, 1px white-40%
   border, radius 8, white 18px text, red pill submit. This sheet sets the
   metrics. The design's exact treatment — the label notched into the field's
   top border — is the `.hs-form-dark` variant
   (components/_hubspot-form-dark.css). Forms built in HubSpot's NEW form
   editor (`.hsfc-*` markup) share none of these selectors: they are styled by
   components/_hubspot-form-new.css. */

/* Fields */

.hs-form-field {
  margin-bottom: var(--space-6);
}

/* Labels */

form.hs-form label {
  display: block;
  font-size: 1.125rem;
  line-height: 1.4;
  margin-bottom: 0.35rem;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form.hs-form legend {
  font-size: 0.875rem;
}

/* Inputs */

form.hs-form input[type=text],
form.hs-form input[type=search],
form.hs-form input[type=email],
form.hs-form input[type=password],
form.hs-form input[type=tel],
form.hs-form input[type=number],
form.hs-form input[type=file],
form.hs-form select,
form.hs-form textarea {
  display: inline-block;
  font-family: inherit;
  font-size: 1.125rem;
  line-height: 1.4;
  /* 10 + 25 + 10 + the 1px border = the design's 46px field. */
  padding: 0.625rem 0.875rem;
  width: 100%;
}

form.hs-form textarea {
  min-height: 7.5rem;
  resize: vertical;
}

/* Select — the design's white chevron in place of the native arrow. The
   options open in a native (light) list, so they state a dark text color. */

form.hs-form select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 10l6 5 6-5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.875rem center;
  background-repeat: no-repeat;
  background-size: 1.5rem;
  padding-right: 2.75rem;
}

form.hs-form select option {
  background-color: var(--color-white);
  color: var(--color-dark1);
}

form.hs-form fieldset {
  max-width: 100% !important;
}

/* Inputs - checkbox/radio */

form.hs-form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form.hs-form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form.hs-form .inputs-list input,
form.hs-form .inputs-list span {
  vertical-align: middle;
}

form.hs-form input[type=checkbox],
form.hs-form input[type=radio] {
  accent-color: var(--color-accent);
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

form.hs-form .hs-dateinput {
  position: relative;
}

form.hs-form .hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

form.hs-form .fn-date-picker .pika-table thead th {
  color: var(--color-white);
}

form.hs-form .fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

form.hs-form .fn-date-picker td .pika-button:hover,
form.hs-form .fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: var(--color-white);
}

/* Inputs - file picker */

form.hs-form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form.hs-form .hs-richtext,
form.hs-form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form.hs-form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR — the consent paragraphs are the design's 13px legal copy; the
   checkbox line itself stays at body size. */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

form.hs-form .legal-consent-container .hs-richtext,
form.hs-form .legal-consent-container .hs-richtext p {
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Submit — aligned to the right edge of the form, 20px under the last field. */

form.hs-form .hs_submit .actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-5);
}

/* Validation */

.hs-form-required {
  color: var(--color-error);
}

.hs-input.invalid.error {
  border-color: var(--color-error);
}

.hs-error-msg {
  color: var(--color-error);
  margin-top: 0.35rem;
}

/* Submit button — visual styling comes from the shared base button rule in
   elements/_buttons.css and Theme settings > Forms > Button (accent fill,
   white 14px semibold, pill). */

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

/* Décalage sous le header du module `header-mega` (`.site_header`, avec un
   souligné — à ne pas confondre avec `.site-header` ci-dessous, la barre du
   partial minimal). Ce header est `position: fixed` : sans ce décalage, la
   première bande de chaque page passe dessous.

   Le sélecteur cible exactement les gabarits qui rendent ce header, et laisse
   `header-no-navigation.html` intact. Le repli de 88px vaut la hauteur au
   repos, pour qu'aucun saut de mise en page n'attende que module.js publie
   `--site-header-height`.

   `body:has(.site_header)` et non `.site_header ~ #main-content` : sur le
   portail, HubSpot enveloppe la sortie du module dans ses propres <div>
   (`hs_cos_wrapper`), donc <header> et <main> n'y sont pas frères et la règle
   ne s'appliquait qu'en aperçu local — la page perdait son décalage en
   production. */
body:has(.site_header) #main-content {
  padding-top: var(--site-header-height, 88px);
}

/* Global site header — pale-grey bar with logo, primary nav, utility icons
   (search / account / language), a divider and an accent CTA. Collapses to a
   burger-triggered panel below 1024px.

   Light scheme so a dark/black logo reads clearly. The background follows the
   editable "Secondary" theme color (--color-light2); change it in theme settings.
   Optional background image: set --site-header-bg-image (e.g. url(...)) on
   .site-header to layer a photo behind the bar. */

.site-header {
  background-color: var(--color-light2);
  background-image: var(--site-header-bg-image, none);
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid var(--on-light-10);
  color: var(--color-navy);
  position: relative;
  z-index: var(--z-dropdown);
}

.site-header__inner {
  align-items: center;
  display: flex;
  gap: var(--space-6);
  min-height: 88px;
}

/* Skip link */

.site-header__skip {
  background-color: var(--color-accent);
  color: var(--color-white);
  left: -1000px;
  padding: var(--space-2) var(--space-4);
  position: absolute;
  top: -1000px;
  z-index: 1;
}

.site-header__skip:focus {
  left: var(--space-4);
  top: var(--space-4);
}

/* Brand / logo */

.site-header__brand {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
}

.site-header__brand img {
  display: block;
  height: auto;
  max-height: 54px;
  width: auto;
}

.site-header__brand .logo-company-name {
  color: var(--color-navy);
}

/* Burger (mobile) */

.site-header__burger {
  color: var(--color-navy);
  display: none;
  margin-left: auto;
  padding: var(--space-3);
}

.site-header__burger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.site-header__burger-box {
  display: block;
  height: 18px;
  position: relative;
  width: 24px;
}

.site-header__burger-bar,
.site-header__burger-bar::before,
.site-header__burger-bar::after {
  background-color: currentColor;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  width: 24px;
}

.site-header__burger-bar {
  top: 8px;
}

.site-header__burger-bar::before {
  top: -7px;
}

.site-header__burger-bar::after {
  top: 7px;
}

/* Menu region (nav + utilities + cta), right-aligned on desktop */

.site-header__menu {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-6);
  justify-content: flex-end;
}

/* Primary navigation */

.site-header .menu__wrapper {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
}

.site-header .menu__item--depth-1 {
  padding: var(--space-2) var(--space-3);
  text-transform: none;
}

.site-header .menu__link {
  color: var(--color-navy);
  white-space: nowrap;
}

.site-header .menu__link:hover,
.site-header .menu__link:focus,
.site-header .menu__link--active-link,
.site-header .menu__link--active-branch {
  color: var(--color-accent);
}

.site-header .menu__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.site-header .menu__child-toggle-icon {
  border-top-color: currentColor;
}

/* Dropdowns — open on hover / keyboard focus (desktop) */

@media (min-width: 768px) {
  .site-header .menu__item--has-submenu:hover > .menu__submenu,
  .site-header .menu__item--has-submenu:focus-within > .menu__submenu {
    display: block;
  }
}

.site-header .menu__submenu {
  background-color: var(--color-white);
  border: 1px solid var(--on-light-15);
  box-shadow: 0 8px 24px var(--on-light-10);
}

.site-header .menu__submenu .menu__item {
  border-color: var(--on-light-15);
}

.site-header .menu__submenu .menu__link {
  background-color: transparent !important;
  color: var(--color-navy);
}

.site-header .menu__submenu .menu__link:hover,
.site-header .menu__submenu .menu__link:focus {
  background-color: var(--on-light-05) !important;
  color: var(--color-accent);
}

/* Utility icons (search / account / language) */

.site-header__utils {
  align-items: center;
  display: flex;
  flex: none;
  gap: var(--space-3);
}

.site-header__util {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--color-navy);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: var(--space-2);
}

.site-header__util:hover,
.site-header__util:focus-visible {
  color: var(--color-accent);
}

.site-header__util:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.site-header__util .icon {
  height: 1.375rem;
  width: 1.375rem;
}

.site-header__lang {
  align-items: center;
  color: var(--color-navy);
  display: flex;
}

/* Divider between utilities and the CTA */

.site-header__divider {
  background-color: var(--on-light-15);
  flex: none;
  height: 28px;
  width: 1px;
}

/* CTA — accent button with a trailing arrow (reuses .btn-cta) */

.site-header__cta {
  border-radius: var(--radius-sm);
  display: inline-flex;
  flex: none;
  gap: var(--space-3);
  justify-content: center;
  padding: var(--space-3) var(--space-5);
}

.site-header__cta-label {
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* Search drawer (revealed by the search toggle) */

.site-header__search[hidden] {
  display: none;
}

.site-header__search {
  background-color: var(--color-light2);
  border-top: 1px solid var(--on-light-15);
  padding: var(--space-4) 0;
}

.site-header__search .hs-search-field {
  position: relative;
}

.site-header__search .hs-search-field__input {
  background-color: var(--color-white);
  border: 1px solid var(--on-light-25);
  border-radius: var(--radius-pill);
  color: var(--color-navy);
  height: 44px;
  padding: 0 var(--space-5);
  width: 100%;
}

.site-header__search .hs-search-field__input::-moz-placeholder {
  color: var(--on-light-50);
}

.site-header__search .hs-search-field__input::placeholder {
  color: var(--on-light-50);
}

.site-header__search .hs-search-field__input:focus {
  border-color: var(--color-accent);
  outline: none;
}

/* Tablet / mobile: burger-triggered panel */

@media (max-width: 1023px) {
  .site-header__burger {
    display: inline-flex;
  }

  .site-header__menu {
    align-items: stretch;
    background-color: var(--color-light2);
    border-top: 1px solid var(--on-light-15);
    display: none;
    flex-direction: column;
    gap: var(--space-4);
    inset: 100% 0 auto 0;
    padding: var(--space-5) var(--space-gutter);
    position: absolute;
  }

  .site-header__menu.is-open {
    display: flex;
  }

  .site-header .menu__wrapper {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .site-header__utils {
    justify-content: flex-start;
  }

  .site-header__divider {
    display: none;
  }

  .site-header__cta {
    align-self: flex-start;
  }
}
/* Section — reusable vertical rhythm + the Parkour3 band surfaces.

A DnD module wraps its outermost <section> in `.section` to get consistent
vertical padding (padding-block) without hardcoding spacing in every module.
Horizontal padding stays the job of `.container` inside the section.

On this theme every band is a ROUNDED DARK PANEL floating over the page
gradient (10px from the viewport edges, 16px apart). A band module composes it
from shared classes — it never rebuilds the panel in its own CSS:

  
  <section class="foo section section--panel section--dark-gradient foo--dark-gradient"
           >
    <div class="container"> … </div>
  </section>

  .section              vertical rhythm (60px, editor-tunable)
  .section--compact     40px    .section--spacious  100px
  .section--panel       SHAPE: radius, inset, gap, clipping, white text.
                        Its fill is --panel-bg (default --gradient-dark).
  .section--dark-gradient / .section--dark / .section--dark-shade
                        SURFACE: gradient (default) / solid --color-black /
                        a 20% black veil over the page gradient (the header
                        bar's glass, as a band — the LP Salon closing CTA).
                        All contain "--dark", so the shared dark-band rules
                        (_dark-band.css, _module-header.css) apply for free.

A module offers the surface through its Style-tab color scheme, with values
"dark-gradient" and "dark" (see PROJECT-BRANDGUIDE.md › Surfaces).

Per-instance override: this is where --section-pt / --section-pb are consumed.
A module exposing `sectionSpacingFields()` in its Style-tab group renders the
picked step through the `section_spacing` macro, which sets those two custom
properties on this element; each rule below keeps its own value as the fallback,
so an unset choice changes nothing.
  <section class="section">
A module that does not use `.section` reads them the same way in its own block.
*/

.section {
  padding-bottom: var(--section-pb, var(--section-space-md));
  padding-top: var(--section-pt, var(--section-space-md));
}

.section--compact {
  padding-bottom: var(--section-pb, var(--section-space-sm));
  padding-top: var(--section-pt, var(--section-space-sm));
}

.section--spacious {
  padding-bottom: var(--section-pb, var(--section-space-xl));
  padding-top: var(--section-pt, var(--section-space-xl));
}

/* Surfaces. Each one also hands its fill to a panel through --panel-bg, so the
   same class works with or without `.section--panel`. */

/* Solid dark band — the hero panel (#181619). */
.section--dark {
  --panel-bg: var(--color-navy);
  background-color: var(--color-navy);
  color: var(--color-white);
}

/* Gradient band — every other band of the landing pages. */
.section--dark-gradient {
  --panel-bg: var(--gradient-dark);
  background-color: var(--color-dark2);
  background-image: var(--gradient-dark);
  color: var(--color-white);
}

/* Shade band — translucent: it darkens whatever the page shows behind it, so
   it only makes sense as a panel over the page gradient (white text: 15:1 or
   more on any stop of it). */
.section--dark-shade {
  --panel-bg: var(--on-light-20);
  background-color: var(--on-light-20);
  color: var(--color-white);
}

.section--dark a:not(.btn),
.section--dark-gradient a:not(.btn),
.section--dark-shade a:not(.btn) {
  color: var(--color-white);
}

.section--dark hr,
.section--dark-gradient hr,
.section--dark-shade hr {
  border-color: var(--on-dark-15);
}

/* Panel — the rounded band. Only a bottom margin, so two panels never double
   their gap; DnD rows are flex containers, which keeps it from collapsing.
   `overflow: clip` rounds a full-bleed photo or video to the panel's corners
   without creating a scroll container (sticky children keep working). */
.section--panel {
  background: var(--panel-bg, var(--gradient-dark));
  border-radius: var(--radius-band);
  color: var(--color-white);
  margin: 0 var(--band-inset) var(--band-gap);
  overflow: clip;
  position: relative;
}
/* Surfaces — the Parkour3 card family.

Two shared surfaces recur on every landing page; a module puts the class on its
card element and keeps only layout (padding, gap, grid) in its own CSS.

  .surface-card             black card, 1px stroke-gradient border, radius 24
                            ("Que couvre l'audit?" cards)
  .surface-card--gradient   same card filled with the dark gradient
                            (the form card)
  .surface-tile             gradient tile, radius 18, soft inner shade, no border
                            (stat and feature tiles)

The gradient border is painted with the border-box technique: a transparent
border, the fill clipped to the padding box, the stroke gradient to the border
box. --surface-fill / --surface-stroke-width let a module retune one instance
(e.g. a photo frame: 2px, radius 16) without redrawing it. */

.surface-card {
  --surface-fill: linear-gradient(var(--color-dark2), var(--color-dark2));
  background:
    var(--surface-fill) padding-box,
    var(--gradient-stroke) border-box;
  border: var(--surface-stroke-width, 1px) solid transparent;
  border-radius: var(--radius-card);
  color: var(--color-white);
}

.surface-card--gradient {
  --surface-fill: var(--gradient-dark);
}

.surface-tile {
  background-color: var(--color-dark2);
  background-image: var(--gradient-dark);
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-tile);
  color: var(--color-white);
}
/* Apparition au defilement — une bande entre en fondu en remontant de 1.5rem.

Toutes les bandes de contenu portent `.section`, la classe de bande du theme :
la regle vaut donc pour le site entier, une fois, plutot que module par module.
Les heros ne portent pas `.section` — ils ne bougent pas, ce qui est ce qu'on
veut d'une image LCP.

Trois garde-fous, chacun pour une facon de casser une page :

1. `[data-reveal]` n'est jamais ecrit dans le HTML : c'est js/main.js qui le
   pose. Sans JS, rien n'est masque et la page se lit entiere.
2. Il n'est pose que sur les bandes qui commencent SOUS la fenetre. Ce qui est
   deja a l'ecran au chargement n'est ni masque ni anime : pas de
   clignotement au premier rendu, et le contenu visible n'attend aucune
   transition.
3. `transform: none` a l'arrivee, et non `translateY(0)` : une transform, meme
   identite, fait de la bande un bloc conteneur pour ses enfants en
   `position: fixed` — la visionneuse plein ecran d'une galerie, entre autres.
   L'etat final doit donc n'en avoir aucune.

Sous `prefers-reduced-motion`, main.js n'arme rien du tout : pas d'attribut,
donc pas d'etat masque a rattraper.

Pour couper l'effet sur un theme client : retirer cet include de main.css et
l'IIFE correspondante de js/main.js. */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
}

/* La transition vit sur l'etat d'ARRIVEE, pas sur l'etat masque. Declaree sur
   les deux, la pose de l'attribut par le JS animait aussi la disparition : la
   bande fondait de 1 a 0 en une demi-seconde avant de revenir. Invisible sous
   le bord de l'ecran la plupart du temps, mais rattrapable au premier coup de
   molette. Ici l'etat masque s'applique d'un coup, et seule l'apparition
   s'anime. */
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-reveal) var(--easing-decelerate),
    transform var(--duration-reveal) var(--easing-decelerate);
}

/* A l'impression, rien n'est jamais « defile » : tout doit sortir. */
@media print {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}
/* Headings on a dark band.

theme-overrides.css turns the theme's type settings into `h1 … h6 { color: … }`
rules. Those are element selectors, so they beat the color a dark band passes
down to its content: the copy around a heading correctly turns white, while the
heading itself keeps printing in the theme's (light-page) heading color.

`inherit` hands the heading back to the band. Doing it here rather than module
by module also covers the headings an editor types into a rich-text field, which
no module can target one at a time.

The selector follows the house naming convention for a dark band: the shared
`.section--dark`, and every module's own `block--dark` modifier. Specificity is
(0,1,1) — it beats the theme's bare `h1`, and still loses to any module rule
that wants something else (e.g. `.statistics--dark .statistics__value`).

Note for module CSS: a LIGHT card sitting inside a dark band has to state its
own `color` (as the cards in team-roster and horizontal-scroll do).
Without it the card inherits the band's white — its body copy is already white
on white, and this rule makes its headings match. */

[class*="--dark"] :is(h1, h2, h3, h4, h5, h6),
[class*="--bg-dark"] :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}
:root {
  --module-padding-block: 3rem;
}

.container {
  /* Theme setting: Spacing > Maximum content width, emitted as --container-max
     by theme-overrides.css, is the width the CONTENT fills (1280 in the
     design); the gutter is added outside it, so at 1440 a panel (1420) holds
     exactly 1280 of content. The fallback is that setting's shipped default,
     so the width holds wherever this sheet loads without it. */
  max-width: calc(var(--container-max, 1280px) + 2 * var(--space-gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-gutter);
  padding-right: var(--space-gutter);
}


/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}
/* Module header — the shared uptitle + title + intro block every section module
   renders through the `module_header` macro. Layout and dark-band colors live
   here so a module never restates them. */

/* One gap between every part, at every breakpoint — same rhythm as the `__head`
   blocks the other modules render (feature-tiles, faq, gallery…). */

.module-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The uptitle is a small tracked label (Parkour3: 13px, regular, uppercase,
   +6% — "LA PREUVE"); the title keeps the case the editor typed. Both measures
   are capped: a section heading and its intro are read at a glance, and a
   full-width line of either is not.

   Colors: every part inherits the band's color — except the uptitle on a dark
   band, which takes the accent. The theme is dark by default (white text on
   every surface), and a light band states its own `color` on its block — the
   header follows it either way. */

.module-header__uptitle-text {
  color: inherit;
  font-weight: var(--fw-regular);
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

/* 13px red on the gradient's top stop: the lightened accent (4.66:1), never the
   accent itself (3.68:1 — fails AA at this size). Two classes, so a band's own
   `color` on its block cannot pull it back to white. */

[class*="--dark"] .module-header .module-header__uptitle-text {
  color: var(--color-accent-text);
}

.module-header__title {
  color: inherit;
  margin: 0;
  max-width: 28ch;
}

/* Sub-title — the optional line between the title and the intro. A <p>, so it
   states its own weight; it sits a step above the intro without competing with
   the title, and keeps the title's measure. */

.module-header__subtitle {
  color: inherit;
  font-weight: var(--fw-semibold);
  margin: 0;
  max-width: 40ch;
}

.module-header__content {
  color: inherit;
  max-width: 70ch;
}

/* The rich text opens and closes the block, so its own outer margins would sit
   on top of the flex gap. */

.module-header__text > :first-child {
  margin-top: 0;
}

.module-header__text > :last-child {
  margin-bottom: 0;
}

/* Dark band. Nothing to restate: every part above inherits the band's white,
   and the title — a heading, which the theme colors explicitly — is handed
   back to the band by `components/_dark-band.css`. Parkour3 sets intro copy in
   full white on dark (no dimmed on-dark step), so the content inherits too. */
/* Editorial card */

.editorial-list {
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.editorial-list__item {
  display: flex;
}

.editorial-card {
  background-color: var(--color-light1);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  position: relative;
}

.editorial-card__content {
  display: flex;
  padding: 0.75rem;
  text-decoration: none;
}

.editorial-card__uptitle,
.editorial-card__meta {
  font-weight: var(--fw-bold);
  margin: 0;
}

.editorial-card__title {
  margin: 0;
}

.editorial-card__title-link {
  color: inherit;
  font-family: var(--font-secondary);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--duration-fast) linear;
}

.editorial-card__title-link::after {
  content: "";
  inset: 0;
  position: absolute;
}

.editorial-card__title-link:focus-visible {
  outline: none;
}

.editorial-card:hover .editorial-card__title-link,
.editorial-card:focus-within .editorial-card__title-link {
  color: var(--color-accent);
}

.editorial-card__excerpt {
  margin: 0;
}

.editorial-card__readmore {
  font-family: var(--font-primary);
  margin-top: auto;
}

.editorial-card:hover .editorial-card__readmore,
.editorial-card:focus-within .editorial-card__readmore {
  background-color: var(--color-accent);
  color: var(--color-black);
}

.editorial-card:focus-within {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .editorial-list--roomy {
    gap: 1.5rem;
  }
}
/* Dark HubSpot form — the Parkour3 form treatment ("Réservez votre audit").

Wrap a HubSpot (legacy / v3) form embed in `.hs-form-dark` (new-editor forms:
components/_hubspot-form-new.css), ideally on the
gradient form card:

  <div class="x__form surface-card surface-card--gradient hs-form-dark"> …form… </div>

What it adds to the dark base form (elements/_forms.css + Theme settings):
- the label sits ON the field's top border, fieldset/legend style
  ("Prénom *"), for single-box fields (text, email, phone, number, date,
  select, textarea); checkbox / radio groups keep a stacked label;
- the required mark stays white (the design's), not the error color;
- the border is the design's 40% white whatever the theme setting, and turns
  white on focus.

The label "notch" is a chip painted in --form-label-bg (generic/_tokens.css):
by default the middle of the gradient card. On any other surface, set it to
that surface on the wrapper — `--form-label-bg: var(--color-black);`. On the
gradient card (.surface-card--gradient) the chip follows the gradient instead,
label by label — see "Gradient chip" below and js/main.js.

Metrics (Figma): field 46px tall, radius 8, 24px between fields, label 18px
chip 14px from the left edge, submit right-aligned 20px below, legal 13px. */

/* The embed's own wrappers stay see-through; the wrapper itself keeps whatever
   surface it is given (.surface-card--gradient, a panel…). */
.hs-form-dark .hbspt-form,
.hs-form-dark .hs-form {
  background: transparent;
}

.hs-form-dark .form-title,
.hs-form-dark .hs-form-title {
  background: transparent;
  color: var(--color-white);
}

.hs-form-dark fieldset {
  border: 0;
  margin: 0;
  max-width: none;
  padding: 0;
}

/* Leave room above the first field for its notched label. */
.hs-form-dark .hs-form {
  padding-top: 0.75rem;
}

.hs-form-dark .hs-form-field {
  margin-bottom: var(--space-6);
}

.hs-form-dark .hs-richtext {
  color: var(--color-white);
}

/* Field boxes */

.hs-form-dark .hs-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  background-color: transparent;
  border: 1px solid var(--on-dark-40);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  font-family: inherit;
  font-size: 1.125rem;
  line-height: 1.4;
  min-height: 2.875rem;
  padding: 0.625rem 0.875rem;
  transition: border-color var(--duration-fast) var(--easing-standard);
  width: 100%;
}

.hs-form-dark .hs-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus {
  border-color: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-white);
  outline: none;
}

.hs-form-dark .hs-input::-moz-placeholder {
  color: var(--on-dark-60);
}

.hs-form-dark .hs-input::placeholder {
  color: var(--on-dark-60);
}

.hs-form-dark textarea.hs-input {
  min-height: 7.5rem;
  resize: vertical;
}

/* Notched label — single-box field types only. */

.hs-form-dark .hs-form-field:is(
    .hs-fieldtype-text,
    .hs-fieldtype-textarea,
    .hs-fieldtype-select,
    .hs-fieldtype-number,
    .hs-fieldtype-phonenumber,
    .hs-fieldtype-intl-phone,
    .hs-fieldtype-date
  ) {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* The box first, so the absolutely placed label lands on ITS top border; help
   text and errors follow under it. */
.hs-form-dark .hs-form-field > .input {
  order: 1;
}

.hs-form-dark .hs-form-field > .hs-error-msgs {
  order: 3;
}

.hs-form-dark .hs-form-field:is(
    .hs-fieldtype-text,
    .hs-fieldtype-textarea,
    .hs-fieldtype-select,
    .hs-fieldtype-number,
    .hs-fieldtype-phonenumber,
    .hs-fieldtype-intl-phone,
    .hs-fieldtype-date
  ) > label:not(.hs-label-hidden) {
  background-color: var(--form-label-bg);
  color: var(--color-white);
  font-size: 1.125rem;
  left: 0.875rem;
  line-height: 1.25rem;
  margin: 0;
  max-width: calc(100% - 1.75rem);
  overflow: hidden;
  padding: 0 0.375rem;
  position: absolute;
  text-overflow: ellipsis;
  top: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  z-index: 1;
}

/* Gradient chip. On a gradient card a flat chip cannot match: the card darkens from top to
   bottom, so one color is too dark for the first labels and too light for the
   last. There the chip paints the card's own gradient instead, sized to the
   card and shifted by the label's offset in it, so each chip shows the exact
   slice behind it. CSS cannot know that offset: js/main.js measures it
   (--form-label-y on each label, --form-card-h on the card) and sets
   [data-label-sync] once it has — until then, and without JS, the flat
   --form-label-bg above stays. */
.surface-card--gradient.hs-form-dark {
  --form-label-gradient: var(--gradient-dark);
}

.hs-form-dark[data-label-sync] .hs-form-field:is(
    .hs-fieldtype-text,
    .hs-fieldtype-textarea,
    .hs-fieldtype-select,
    .hs-fieldtype-number,
    .hs-fieldtype-phonenumber,
    .hs-fieldtype-intl-phone,
    .hs-fieldtype-date
  ) > label:not(.hs-label-hidden) {
  background-image: var(--form-label-gradient);
  background-position: 0 calc(var(--form-label-y, 0px) * -1);
  background-repeat: no-repeat;
  background-size: 100% var(--form-card-h, 100%);
}

/* The help text of a notched field moves under the box, where there is room
   (the label already occupies the border above it). */
.hs-form-dark .hs-form-field:is(
    .hs-fieldtype-text,
    .hs-fieldtype-textarea,
    .hs-fieldtype-select,
    .hs-fieldtype-number,
    .hs-fieldtype-phonenumber,
    .hs-fieldtype-intl-phone,
    .hs-fieldtype-date
  ) > legend {
  color: var(--on-dark-70);
  font-size: 0.875rem;
  margin-top: 0.35rem;
  order: 2;
}

.hs-form-dark .hs-form-required {
  color: inherit;
  margin-left: 0.15rem;
}

.hs-form-dark .hs-form-field .input {
  margin: 0;
}

/* Checkbox / radio groups and the consent box — stacked, 18px. */

.hs-form-dark .inputs-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.hs-form-dark .inputs-list > li {
  margin: 0 0 0.5rem;
}

.hs-form-dark .inputs-list label {
  align-items: flex-start;
  color: var(--color-white);
  display: flex;
  font-size: 1.125rem;
  gap: 0.5rem;
  line-height: 1.35;
  margin: 0;
}

.hs-form-dark .hs-input[type="checkbox"],
.hs-form-dark .hs-input[type="radio"] {
  accent-color: var(--color-accent);
  flex: none;
  height: 0.8125rem;
  margin: 0.35em 0 0;
  width: 0.8125rem;
}

.hs-form-dark input[type="file"].hs-input {
  color: var(--on-dark-70);
  font-size: 0.9375rem;
}

/* Legal consent — 13px (the checkbox line above stays at 18px). */

.hs-form-dark .legal-consent-container .hs-richtext,
.hs-form-dark .legal-consent-container .hs-richtext p {
  color: var(--color-white);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.hs-form-dark .legal-consent-container .hs-form-booleancheckbox-display > span,
.hs-form-dark .legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 0 !important;
}

/* Errors */

/* Out-specifies the field box (and its focus state) above. */
.hs-form-dark .hs-input.invalid.error:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  border-color: var(--color-error);
}

.hs-form-dark .hs-error-msgs {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

.hs-form-dark .hs-error-msg,
.hs-form-dark .hs-error-msgs label {
  color: var(--color-error);
  font-size: 0.875rem;
}

/* Submit — red pill, right-aligned. */

.hs-form-dark .hs_submit .actions {
  display: flex;
  justify-content: flex-end;
  margin: var(--space-5) 0 0;
  padding: 0;
}

.hs-form-dark .hs-button {
  background-color: var(--color-accent);
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-button);
  color: var(--color-white);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  padding: 0.9375rem 2rem;
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.hs-form-dark .hs-button:hover,
.hs-form-dark .hs-button:focus {
  background-color: var(--color-accent-hover);
}

.hs-form-dark .hs-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (min-width: 480px) {
  .hs-form-dark .form-columns-2 {
    display: flex;
    gap: var(--space-4);
  }

  .hs-form-dark .form-columns-2 .hs-form-field {
    flex: 1;
  }
}
/* HubSpot NEW forms — the updated form editor (embed v4, `.hsfc-*` markup).

Legacy (v3) forms are styled by elements/_forms.css + _hubspot-form-dark.css.
Forms built in the new editor share none of that markup: they render inside
`<div data-hsfc-id="Renderer">` with `.hsfc-*` classes and read their look from
the documented `--hsf-*` custom properties
(developers.hubspot.com/docs/cms/start-building/features/forms/forms). This sheet
gives them the same Parkour3 treatment as `.hs-form-dark`: transparent fields
on a 40% white border, the label notched into the top border, white required
mark, red pill submit on the right, 13px legal copy.

Three constraints shape every rule below, because a new form can render INSIDE
AN IFRAME. HubSpot's embed script then copies the page's same-origin style rules
into the frame, keyed by selector text:
- Rules must match from inside the form: anchor on `[data-hsfc-id="Renderer"]`
  or a `.hsfc-*` class, never on a page ancestor (`.hs-form-dark`,
  `.surface-card`…) — the frame has none. That is also why this treatment
  applies to every new form, not only to wrapped ones.
- Only top-level style rules are copied: nothing here may sit in `@media`.
- The theme's `:root` tokens may not reach the frame (rules sharing a selector
  text overwrite each other there), so values are written as literals, read
  from the theme settings through HubL where one exists — still editable in
  Theme settings, and resolved before the frame ever sees them.

Class names are HubSpot's and can move; everything the variables cover goes
through the variables (the supported API), and the class selectors are kept to
what they cannot express: the notched label, focus, submit alignment. */




[data-hsfc-id="Renderer"] {
  /* Global */
  --hsf-global__font-family: "Work Sans", sans-serif;
  --hsf-global__font-size: 1.125rem;
  --hsf-global__color: #fff;
  --hsf-global-error__color: #ff8a7a;

  /* Container — see-through: the page's card carries the surface. The top
     padding leaves room for the first field's notched label. */
  --hsf-background__background-color: transparent;
  --hsf-background__background-image: none;
  --hsf-background__border-width: 0;
  --hsf-background__padding: 0.75rem 0 0;

  /* Rhythm — 24px between rows, 16px between side-by-side fields. */
  --hsf-row__vertical-spacing: 1.5rem;
  --hsf-row__horizontal-spacing: 1rem;
  --hsf-module__vertical-spacing: 1.5rem;

  /* Text */
  --hsf-heading__font-family: "Work Sans", sans-serif;
  --hsf-heading__color: #fff;
  --hsf-heading__text-shadow: none;
  --hsf-richtext__font-family: "Work Sans", sans-serif;
  --hsf-richtext__font-size: 0.8125rem;
  --hsf-richtext__color: #fff;

  /* Labels and help text */
  --hsf-field-label__font-family: "Work Sans", sans-serif;
  --hsf-field-label__font-size: 1.125rem;
  --hsf-field-label__color: #fff;
  --hsf-field-label-requiredindicator__color: #fff;
  --hsf-field-description__font-family: "Work Sans", sans-serif;
  --hsf-field-description__color: rgba(255, 255, 255, 0.7);
  --hsf-field-footer__font-family: "Work Sans", sans-serif;
  --hsf-field-footer__color: rgba(255, 255, 255, 0.7);

  /* Field boxes — 10 + 25 + 10 + the 1px border = the design's 46px field. */
  --hsf-field-input__font-family: "Work Sans", sans-serif;
  --hsf-field-input__color: #fff;
  --hsf-field-input__background-color: transparent;
  --hsf-field-input__placeholder-color: rgba(255, 255, 255, 0.6);
  --hsf-field-input__border-color: rgba(255, 255, 255, 0.4);
  --hsf-field-input__border-width: 1px;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-radius: 8px;
  --hsf-field-input__padding: 0.625rem 0.875rem;
  --hsf-field-textarea__font-family: "Work Sans", sans-serif;
  --hsf-field-textarea__color: #fff;
  --hsf-field-textarea__background-color: transparent;
  --hsf-field-textarea__placeholder-color: rgba(255, 255, 255, 0.6);
  --hsf-field-textarea__border-color: rgba(255, 255, 255, 0.4);
  --hsf-field-textarea__border-width: 1px;
  --hsf-field-textarea__border-style: solid;
  --hsf-field-textarea__border-radius: 8px;
  --hsf-field-textarea__padding: 0.625rem 0.875rem;

  /* Checkbox / radio — the design's box is white with a #767676 edge (the
     legacy form gets the same from the browser's native checkbox). The
     option text next to it stays white. */
  --hsf-field-checkbox__padding: 0;
  --hsf-field-checkbox__background-color: #fff;
  --hsf-field-checkbox__color: #fff;
  --hsf-field-checkbox__border-color: #767676;
  --hsf-field-checkbox__border-width: 1px;
  --hsf-field-checkbox__border-style: solid;
  --hsf-field-radio__padding: 0;
  --hsf-field-radio__background-color: #fff;
  --hsf-field-radio__color: #fff;
  --hsf-field-radio__border-color: #767676;
  --hsf-field-radio__border-width: 1px;
  --hsf-field-radio__border-style: solid;

  /* Submit — the theme's red pill. */
  --hsf-button__font-family: "Work Sans", sans-serif;
  --hsf-button__font-size: 0.875rem;
  --hsf-button__color: #fff;
  --hsf-button__background-color: #ED4A39;
  --hsf-button__background-image: none;
  --hsf-button__border-radius: 999px;
  --hsf-button__padding: 0.9375rem 2rem;
  --hsf-button__box-shadow: 0 2px 4px 0 rgba(136, 144, 194, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15);

  /* Alerts and multi-step progress */
  --hsf-erroralert__font-family: "Work Sans", sans-serif;
  --hsf-erroralert__font-size: 0.875rem;
  --hsf-erroralert__color: #ff8a7a;
  --hsf-infoalert__font-family: "Work Sans", sans-serif;
  --hsf-infoalert__font-size: 0.875rem;
  --hsf-infoalert__color: #fff;
  --hsf-progressbar-text__font-family: "Work Sans", sans-serif;
  --hsf-progressbar-text__font-size: 0.875rem;
  --hsf-progressbar-text__color: #fff;
  --hsf-progressbar-progressLine__background-color: #ED4A39;
  --hsf-progressbar-progressLine__background-image: none;
  --hsf-progressbar-progressLine__border-width: 0;
  --hsf-progressbar-trackLine__background-color: rgba(255, 255, 255, 0.15);
}

/* Notched label — single-box fields only (a field that holds a label and no
   checkbox, radio or file input). The field becomes a column so the help text
   and the error can drop under the box, where the label no longer is. */

[data-hsfc-id="Renderer"] .hsfc-Row > :has(.hsfc-FieldLabel):not(:has(.hsfc-CheckboxInput, .hsfc-RadioInput, .hsfc-FileInput)) {
  display: flex;
  flex-direction: column;
  position: relative;
}

[data-hsfc-id="Renderer"] .hsfc-Row > :has(.hsfc-FieldLabel):not(:has(.hsfc-CheckboxInput, .hsfc-RadioInput, .hsfc-FileInput)) .hsfc-FieldLabel {
  /* The chip that cuts the border: the middle of the gradient form card, the
     same default as --form-label-bg. On the page itself (no iframe) a wrapper
     can still retint it through --form-label-bg; inside a frame the literal
     applies. */
  background-color: var(--form-label-bg, color-mix(in srgb, #322C2C 50%, #0a0909));
  left: 0.875rem;
  line-height: 1.25rem;
  margin: 0;
  max-width: calc(100% - 1.75rem);
  overflow: hidden;
  padding: 0 0.375rem;
  position: absolute;
  text-overflow: ellipsis;
  top: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  z-index: 1;
}

/* Gradient chip, as on legacy forms (_hubspot-form-dark.css): when the form
   renders on the page itself inside the gradient card, js/main.js measures
   each label and the chip shows the slice of gradient behind it. The
   `.hs-form-dark[data-label-sync]` ancestor only exists on the page, so inside
   an iframe this rule matches nothing and the flat chip above stays. */
.hs-form-dark[data-label-sync] [data-hsfc-id="Renderer"] .hsfc-Row > :has(.hsfc-FieldLabel):not(:has(.hsfc-CheckboxInput, .hsfc-RadioInput, .hsfc-FileInput)) .hsfc-FieldLabel {
  background-image: var(--form-label-gradient);
  background-position: 0 calc(var(--form-label-y, 0px) * -1);
  background-repeat: no-repeat;
  background-size: 100% var(--form-card-h, 100%);
}

[data-hsfc-id="Renderer"] .hsfc-Row > * > .hsfc-FieldDescription {
  font-size: 0.875rem;
  margin-top: 0.35rem;
  order: 1;
}

[data-hsfc-id="Renderer"] .hsfc-Row > * > .hsfc-ErrorAlert {
  order: 2;
}

[data-hsfc-id="Renderer"] .hsfc-FieldLabel__RequiredIndicator {
  margin-left: 0.15rem;
}

/* Field boxes — metrics and focus, which the variables do not cover. */

[data-hsfc-id="Renderer"] :is(.hsfc-TextInput, .hsfc-TextareaInput, .hsfc-DateInput, .hsfc-PhoneInput, .hsfc-DropdownInput) {
  line-height: 1.4;
  min-height: 2.875rem;
  transition: border-color 0.15s linear;
}

[data-hsfc-id="Renderer"] .hsfc-TextareaInput {
  min-height: 7.5rem;
  resize: vertical;
}

[data-hsfc-id="Renderer"] :is(.hsfc-TextInput, .hsfc-TextareaInput, .hsfc-DateInput, .hsfc-PhoneInput, .hsfc-DropdownInput):is(:focus, :focus-within) {
  border-color: #fff;
  box-shadow: 0 0 0 1px #fff;
  outline: none;
}

[data-hsfc-id="Renderer"] :is(.hsfc-CheckboxInput, .hsfc-RadioInput) {
  accent-color: #ED4A39;
}

/* Submit — right-aligned, 20px under the last field. */

[data-hsfc-id="Renderer"] :has(> .hsfc-Button) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4, 1rem);
  justify-content: flex-end;
  margin-top: 1.25rem;
}

[data-hsfc-id="Renderer"] .hsfc-Button {
  border: 0;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 0.15s linear;
}

[data-hsfc-id="Renderer"] .hsfc-Button:is(:hover, :focus) {
  background-color: color-mix(in srgb, #ED4A39 88%, #000);
}

[data-hsfc-id="Renderer"] .hsfc-Button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* The embed wrapper on the page itself (outside any iframe). */

.hs-form-frame {
  width: 100%;
}
/* Accordion section
Shared header + panel for collapsible page sections
(e.g. the accordions and feature modules, plus several example modules).
Each module is a single <details>; the <summary> is the header bar:
uptitle ——— rule ——— +/- toggle. The open state is the open_by_default field.
*/

.accordion-section {
  padding: var(--module-padding-block) var(--space-gutter);
}

.accordion-section__header {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 1.25rem;
  list-style: none;
}

.accordion-section__header::-webkit-details-marker {
  display: none;
}

.accordion-section__uptitle {
  flex: none;
  font-weight: 700;
}

.accordion-section__rule {
  background-color: rgba(0, 0, 0, 0.2);
  flex: 1;
  height: 1px;
}

.accordion-section__toggle {
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
}

.accordion-section__toggle::after {
  content: "+";
}

.accordion-section[open] .accordion-section__toggle::after {
  content: "\2212";
}

.accordion-section__header:hover {
  color: var(--color-accent);
}

.accordion-section__header:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.accordion-section__panel {
  padding-top: var(--module-padding-block);
}

@media (min-width: 1024px) {
  .accordion-section {
    padding: 0 4rem;
  }

  .accordion-section__panel {
    padding-top: 3.5rem;
  }

  /* Content sits in the right half (left column intentionally empty). */
  .accordion-section__panel--aside {
    margin-left: auto;
    width: 50%;
  }
}
/* Decorative brand shapes
   Base style for SVGs rendered by the shape() macro (e.g. shape("scallop")).
   Color follows currentColor; each module positions its own instance via a
   module-scoped class (e.g. absolute bottom/left, width, z-index). */

.shape {
  display: block;
  height: auto;
  max-width: 100%;
  pointer-events: none;
}
/* Build watermark: the small tag naming each module in its top-left corner.
   Rendered by the `module_watermark` macro (_macros/components.html) — turn it
   off there before a client go-live. Its colors are deliberately NOT
   token-mapped: the tag has to stay readable over any color scheme, image or
   video background. */

/* The system font, shared by the watermark and the module TOC so the two build
   aids can never drift apart. Deliberately NOT the theme's `--font-body`: these
   tags are tooling chrome, not page content, and reading them as the OS's own
   UI font is what keeps them from being mistaken for the design. */
:root {
  --build-aid-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.module-watermark {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 0.25rem;
  /* Opaque comme le panneau de sommaire : sur un fond translucide le blanc du
     texte se pose sur ce qui passe derriere, et le contraste n'est ni calculable
     ni garanti. Les blancs alpha des controles restent exacts par-dessus. */
  background: #171717;
  color: #fff;
  font-family: var(--build-aid-font);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.module-watermark__name {
  padding: 0.25rem 0.75rem;
  pointer-events: none;
}

/* Scheme switcher — only rendered for modules that expose a light and a dark
   band, and only a build aid (js/main.js swaps the modifier on the root). Sits
   after the module name, like the layout chips: the name reads first, the
   controls follow. */
.module-watermark__scheme {
  display: flex;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0.25rem 0.75rem;
  border: 0;
  border-left: 1px solid rgb(255 255 255 / 20%);
  background: #262626;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

/* Sun for a light band, moon for a dark one, half-filled contrast disc for
   `inverted` — which is neither, it flips the module's own colors. All three
   icons are in the markup and CSS picks one off the button's own
   data-scheme-current, so js/main.js only has to flip that attribute. The
   remaining light-ish values (`sky`, `white`) fall through to the sun; the
   button's title carries the exact value. */
.module-watermark__icon {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
}

.module-watermark__icon--moon,
.module-watermark__icon--contrast,
.module-watermark__scheme[data-scheme-current="dark"] .module-watermark__icon--sun,
.module-watermark__scheme[data-scheme-current="inverted"] .module-watermark__icon--sun {
  display: none;
}

.module-watermark__scheme[data-scheme-current="dark"] .module-watermark__icon--moon,
.module-watermark__scheme[data-scheme-current="inverted"] .module-watermark__icon--contrast {
  display: block;
}

/* Layout switcher — a Style-tab choice with no icon to stand for it, so the
   values are listed rather than cycled: one chip each, the one in force
   pressed. Last in the row, after the name and the scheme button. js/main.js
   swaps the class on the module root. */
.module-watermark__variants {
  display: flex;
  align-items: center;
  border-left: 1px solid rgb(255 255 255 / 20%);
  background: #262626;
}

.module-watermark__variants-icon {
  display: block;
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-inline: 0.5rem;
  opacity: 0.8;
}

.module-watermark__variant {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0.25rem 0.625rem;
  border: 0;
  background: #262626;
  /* Etait `color: inherit` + `opacity: .65` : l'opacite delavait le texte
     jusqu'a 3,72:1. Le retrait se dit maintenant par la couleur seule
     (#e5e5e5 sur #262626 = 12,0:1). */
  color: #e5e5e5;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.module-watermark__variant + .module-watermark__variant {
  border-left: 1px solid rgb(255 255 255 / 20%);
}

/* The pressed chip is the applied preset — full opacity and a lighter ground,
   so which one is live reads without hovering. */
.module-watermark__variant[aria-pressed="true"] {
  background: #525252;
  color: #fff;
  font-weight: 600;
}

/* Vertical rhythm — the `sectionSpacingFields()` pair behind ONE cycling button,
   like the scheme switcher: each click walks the shared --section-space-* scale
   and moves the top and the bottom together. Last in the row: the name says
   which module, the switchers what it looks like, this how much air it sits in.
   js/main.js writes the step and leaves the button hidden on a module whose
   padding ignores --section-pt / --section-pb. */
.module-watermark__spacing {
  display: flex;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* Stated rather than left to the UA button padding, which is taller than the
     0.25rem the name and the switchers sit on and stretches the whole tag. */
  padding: 0.25rem 0.5rem;
  border: 0;
  border-left: 1px solid rgb(255 255 255 / 20%);
  background: #262626;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.module-watermark__spacing[hidden] {
  display: none;
}

.module-watermark__spacing-icon {
  display: block;
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.375rem;
  opacity: 0.8;
}

/* The step in force — fixed width so the tag does not jump as the value cycles
   through `none`, `2xs`, `xs`… */
.module-watermark__spacing-value {
  min-width: 2.25rem;
  text-align: left;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.module-watermark__spacing:hover,
.module-watermark__spacing:focus-visible {
  background: #404040;
}

.module-watermark__spacing:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.module-watermark__scheme:hover,
.module-watermark__scheme:focus-visible,
.module-watermark__variant:hover,
.module-watermark__variant:focus-visible {
  background: #404040;
  color: #fff;
}

.module-watermark__scheme:focus-visible,
.module-watermark__variant:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* The tag is absolutely positioned, so the module root it opens has to be its
   containing block — done here rather than in 60+ module stylesheets. */
:has(> .module-watermark) {
  position: relative;
}
/* Build aid: sticky table of contents listing every watermarked module on the
   page, each entry anchored to its band. Built by js/main.js from the
   `module_watermark` tags, so it appears on any showcase page and dies with the
   watermark (SHOW = false in _macros/components.html). Like the watermark, it
   is deliberately NOT token-mapped — it has to stay readable over any color
   scheme, image or video background. */
/* Top-right, opposite the watermark's top-left corner. It does overlap the
   top of the band it jumps to — collapse it (the toggle bar stays) to read
   what is underneath. */
.module-toc {
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 101;
  display: flex;
  flex-direction: column;
  max-width: min(16rem, calc(100vw - 1rem));
  max-height: calc(100vh - 1rem);
  overflow: hidden;
  border-radius: 0.25rem;
  /* Opaque, not a scrim: the panel is a list of labels read at a glance, and
     bands scrolling behind a translucent fill turn it into noise — the more so
     since the schemes it lists run from white to black. The translucent whites
     layered inside it below are all drawn on top of this, so they stay exact. */
  background: #000;
  color: #fff;
  font-family: var(--build-aid-font);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.module-toc__toggle {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0.25rem 0.75rem;
  border: 0;
  background: rgb(255 255 255 / 12%);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.module-toc__toggle:hover,
.module-toc__toggle:focus-visible {
  background: rgb(255 255 255 / 28%);
}

.module-toc__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.module-toc__icon {
  display: block;
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.15s ease;
}

.module-toc--collapsed .module-toc__icon {
  transform: rotate(-90deg);
}

/* Capped rather than viewport-tall: the gallery page carries 60+ bands, and a
   list that long buries the page instead of helping read it. */
.module-toc__list {
  max-height: min(50vh, 22rem);
  margin: 0;
  padding: 0.25rem 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;

  /* Slim light-on-dark scrollbar — the OS default is a light bar that reads as
     a foreign element on the panel. Firefox / spec syntax; the WebKit rules
     below cover Chrome and Safari. */
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 32%) transparent;
}

.module-toc__list::-webkit-scrollbar {
  width: 0.375rem;
}

.module-toc__list::-webkit-scrollbar-track {
  background: transparent;
}

.module-toc__list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgb(255 255 255 / 32%);
}

.module-toc__list::-webkit-scrollbar-thumb:hover {
  background: rgb(255 255 255 / 55%);
}

.module-toc__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sticky so the family stays readable while its own bands scroll past. */
.module-toc__group-title {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0.25rem 0.75rem 0.125rem;
  background: #262626;
  font: inherit;
  font-weight: 700;
  opacity: 0.75;
}

.module-toc--collapsed .module-toc__list {
  display: none;
}

.module-toc__link {
  display: block;
  /* 0.25rem plutot que 0.1875 : la ligne de 16,8px atteint ainsi les 24px de
     hauteur de cible exigee (WCAG 2.5.8), qui vaut aussi comme espacement
     puisque les liens sont contigus. */
  padding: 0.25rem 0.75rem;
  border-left: 2px solid transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.module-toc__link:hover,
.module-toc__link:focus-visible {
  background: rgb(255 255 255 / 18%);
  color: inherit;
  text-decoration: none;
}

.module-toc__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.module-toc__link--current {
  border-left-color: #fff;
  background: rgb(255 255 255 / 12%);
}

/* The anchor lands on the module root itself — keep the watermark clear of the
   viewport edge so the band reads as a whole once scrolled to. */
[data-toc-target] {
  scroll-margin-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .module-toc__icon {
    transition: none;
  }
}

/* Utilities
Helper classes with ability to override anything that comes before it
*/

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}
/* Color utilities
Tailwind-style helper classes for the theme palette. Each color gets a text and
a background utility. The palette is exposed as CSS custom properties on :root,
seeded from the "Global colors" theme settings, so the utilities stay in sync
when an editor changes the palette.

Values live in fields.json (Parkour3 — see PROJECT-BRANDGUIDE.md). The token
names (navy, sky, accent, …) are the design-system contract used across
modules — keep the names, change the values in the theme settings.
*/

:root {
  --color-accent: #ED4A39;
  --color-black: #181619;
  --color-dark1: #322C2C;
  --color-dark2: #000000;
  --color-light1: #FFFFFF;
  --color-light2: #F8F5EE;
  --color-sky: #939393;
  /* --color-navy aliases the primary dark (= --color-black). */
  --color-navy: #181619;
}

/* Text color */

.text-accent {
  color: var(--color-accent);
}
.text-black {
  color: var(--color-black);
}
.text-navy {
  color: var(--color-navy);
}
.text-dark1 {
  color: var(--color-dark1);
}
.text-dark2 {
  color: var(--color-dark2);
}
.text-sky {
  color: var(--color-sky);
}
.text-light1 {
  color: var(--color-light1);
}
.text-white {
  color: var(--color-white);
}

/* Background color */

.bg-accent {
  background-color: var(--color-accent);
}
.bg-black {
  background-color: var(--color-black);
}
.bg-navy {
  background-color: var(--color-navy);
}
.bg-dark1 {
  background-color: var(--color-dark1);
}
.bg-dark2 {
  background-color: var(--color-dark2);
}
.bg-sky {
  background-color: var(--color-sky);
}
.bg-light1 {
  background-color: var(--color-light1);
}
.bg-light2 {
  background-color: var(--color-light2);
}

/* Brand gradient (Figma "dark-grey-gradient") */

.bg-gradient-dark {
  background-color: var(--color-dark2);
  background-image: var(--gradient-dark);
}
/* Flex & grid utilities (curated)
A lean, token-aligned subset: flex helpers, gap mapped to the --space-* scale, and
a responsive grid. Mobile-first breakpoints: sm 640, md 768, lg 1024. Add a class
here only when it is reused across modules — one-off layout belongs in module CSS. */

/* Display */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* Flex direction / wrap / item sizing */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.flex-none { flex: none; }

/* Alignment */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

/* Gap — aligned to the --space-* scale */
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

/* Grid columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Responsive grid columns */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Spacing utilities (curated)
A lean margin set for quick vertical rhythm, aligned to the --space-* scale.
Prefer flex `gap-*`, the `.section` rhythm, or module CSS for most spacing — reach
for these only for one-off margins. */

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.mx-auto { margin-inline: auto; }
/* Text style utilities
Tailwind-style helper classes for the theme type scale. Each class bundles
font-size + line-height, the same way Tailwind's text-* utilities do. Loaded in
the utilities layer so they override element styles.

Sizes are expressed as rem on a fixed 16px root (see theme-overrides.css). Text
below 30px never uses line-height 1 — small text gets at least 1.2 for
legibility; only the large display styles (>= 30px) keep a tight 1. Font family,
weight and case are not set here: headings take their weight from the element
style (Theme settings > Text), and the module sets case / weight on the rare
non-heading display styles (the stat number is 900, the hero title uppercase).

Scale source: Figma "Refonte-Parkour3" — desktop values from the landing Audit
CRM (FR + EN), file-wide census in .figma-cache/<fileKey>/design-tokens.md;
mobile values from the first mobile mockup of the file, "LP Salon – v2"
(402px frame, 5464:13623). See PROJECT-BRANDGUIDE.md.

Fluid steps: clamp(mobile at 360px, linear, desktop at 1280px). */

/* Display — the three oversized styles of the landing pages */

.text-stat {
  /* Stat number ("150") — Work Sans 900. Desktop 112px → 52px mobile (two
     tiles share a phone row). The design's 140% sits on a text box clipped to
     74px, so what renders is a tight line: 1. The step is the --fs-stat token,
     so a tile can cap it to its own width (stats-badges). */
  font-size: var(--fs-stat);
  line-height: 1;
}

.text-h1 {
  /* Hero title ("AUDIT CRM") — h1, 900, uppercase by the hero module.
     Desktop 90px → 40px mobile (a 9-letter uppercase word must fit 320px).
     Line height "auto" in Figma = Work Sans' own 1.17. */
  font-size: clamp(2.5rem, 1.28rem + 5.43vw, 5.625rem);
  line-height: 1.17;
}

.text-display {
  /* Closing CTA band title — 500. Desktop 63px → 30px mobile. */
  font-size: clamp(1.875rem, 1.07rem + 3.59vw, 3.9375rem);
  line-height: 1;
}

/* Headings */

.text-h2 {
  /* Section title — 500. Desktop 36px → 28px mobile. */
  font-size: clamp(1.75rem, 1.55rem + 0.87vw, 2.25rem);
  line-height: 1;
}

.text-h3 {
  /* Card title — 600. 20px at every width (the mobile mockup keeps the
     desktop size: "Eti Converting"). */
  font-size: 1.25rem;
  line-height: 1.35;
}

.text-h4 {
  /* Callout title — 700. 18px. */
  font-size: 1.125rem;
  line-height: 1.2;
}

.text-h5 {
  /* Label / nav / button ("Txt/14/Semi-Bold") — 600. 14px. */
  font-size: 0.875rem;
  line-height: 1.2;
}

/* Hero lead-in — the bold line that runs into the hero title ("MAXIMISEZ
   VOTRE HUBSPOT AVEC UN", "Parkour3, votre partenaire HubSpot Elite pour").
   700, case set by the module. 24px → 22px mobile. */

.text-surtitre {
  font-size: clamp(1.375rem, 1.33rem + 0.22vw, 1.5rem);
  line-height: 1.2;
}

/* Uptitle — the small label above a section title ("LA PREUVE"). 400,
   uppercase, +6% tracking and the band color are set by
   components/_module-header.css (and by a hero for its own). 13px. */

.text-uptitle {
  font-size: 0.8125rem;
  line-height: 1.3;
}

/* Body */

.text-large {
  /* Text Large ("text-large") — 24px → 16px mobile. */
  font-size: clamp(1rem, 0.8rem + 0.87vw, 1.5rem);
  line-height: 1.5;
}

.text-medium {
  /* Text Medium — 20px: stat labels, feature tile labels, footer line. */
  font-size: 1.25rem;
  line-height: 1.4;
}

.text-stat-desc {
  /* The label around a stat number ("Plus de", "projets HubSpot réalisés") —
     text-medium's 20px on desktop, 15px on a phone, where two stat tiles
     share a row. */
  font-size: clamp(0.9375rem, 0.82rem + 0.54vw, 1.25rem);
  line-height: 1.4;
}

.text-normal {
  /* Text Common ("text-regulier") — 18px → 16px mobile. */
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  line-height: 1.5;
}

.text-table-title {
  /* 18px */
  font-size: 1.125rem;
  line-height: 1.2;
}

.text-small {
  /* Text Small — 14px. */
  font-size: 0.875rem;
  line-height: 1.25;
}

.text-tag {
  /* 14px */
  font-size: 0.875rem;
  line-height: 1.25;
}

.text-caption {
  /* Badge caption ("Formateur agréé par Services Québec") — 600, set by the
     module. Desktop 17px → 12px mobile, where two badges share a row. */
  font-size: clamp(0.75rem, 0.63rem + 0.54vw, 1.0625rem);
  line-height: 1.2;
}

.text-legal {
  /* Legal / consent copy under a form — 13px. */
  font-size: 0.8125rem;
  line-height: 1.4;
}