/* 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 — 360 Fleet
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(). Source: Figma "360fleet - TP3" › Charte Graphique (System Colors, Guide
Font, button states). Anything marked "derived" is not in the source — see
PROJECT-BRANDGUIDE.md for the reasoning.
*/

:root {
  /* Neutrals & on-dark
  --color-white replaces the hardcoded white literals. The on-dark ramp is
  translucent white for text/borders over dark sections (Primary Dark #0D0D1A
  or the purples). */
  --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 Primary Dark (#0D0D1A) for text/borders over
     light sections, so tints stay in the purple family instead of going grey. */
  --on-light-90: rgba(13, 13, 26, 0.9);
  --on-light-70: rgba(13, 13, 26, 0.7);
  --on-light-50: rgba(13, 13, 26, 0.5);
  --on-light-25: rgba(13, 13, 26, 0.25);
  --on-light-15: rgba(13, 13, 26, 0.15);
  --on-light-10: rgba(13, 13, 26, 0.1);
  --on-light-05: rgba(13, 13, 26, 0.05);
  --border-on-light: rgba(13, 13, 26, 0.15);

  /* Extra palette tint — "360 fleet/light purple" exists in Figma but has no
     theme-settings slot; static so modules can still reach it. */
  --color-light3: #eeebf9;

  /* Semantic / feedback colors — route component hardcodes through these.
     --color-border: the Secondary Highlight (= --color-sky) doubles as the
     divider/line color on light surfaces (decorative only: 2.45:1 on white).
     --color-border-strong: the 3:1-compliant line for form fields and any border
     that has to read as a control boundary (= Button light pressed).
     Error / success: derived from the WE red and MPS green ramps (not in the
     source as feedback colors). */
  --color-border: #a99de0;
  --color-border-strong: #877eb3;
  --color-error: #e0312f;
  --color-error-soft: #f3d2d2;
  --color-success: #0a4f3c;
  --color-success-soft: #d2f3e7;

  /* Body text — the mockups set running text in #1C1D29 at 80% opacity. The
     theme flattens it to a solid (#494A54 = 80% over white) because the HubSpot
     font field needs a hex; --color-text-raw keeps the source value for a module
     that wants the translucent version over a tint. */
  --color-text: #494a54;
  --color-text-raw: #1c1d29;

  /* Button states — exact values from the Figma button frames (Button main /
     light / Protek / MPS / WE, all states). The semantic --variant-btn-* tokens
     below pick the right set per brand variant; these are the raw values. */
  --btn-primary-bg: #4a3f8a;
  --btn-primary-fg: #fff;
  --btn-primary-bg-hover: #655c9c;
  --btn-primary-bg-active: #3b326e;
  --btn-primary-bg-disabled: #a09bb9;
  --btn-primary-fg-disabled: #c1c1c1;
  --btn-light-bg: #a99de0;
  --btn-light-fg: #2f2858;
  --btn-light-bg-hover: #b6ace5;
  --btn-light-bg-active: #877eb3;
  --btn-light-bg-disabled: #c6c1dc;
  --btn-light-fg-disabled: #82808e;

  /* Sub-brand palettes — Protek (blue), MPS (green), WE (red). Swatches from the
     Charte Graphique, button states from the "Button <brand> / All States"
     frames. RAW ramps: a module never reads these directly — it reads the
     semantic --variant-* tokens, which the brand variant re-maps (see below). */
  --brand-protek-dark: #1a3352;
  --brand-protek-heading: #2c4c74;
  --brand-protek-cta: #3b6190;
  --brand-protek-cta-uptitle: #70c7f6;
  --brand-protek-bright: #3dbaff;
  --brand-protek-bright-hover: #5ac4ff;
  --brand-protek-bright-active: #3195cc;
  --brand-protek-bright-disabled: #9acce8;
  --brand-protek-btn-fg: #1a3352;
  --brand-protek-btn-fg-disabled: #7c838d;
  --brand-protek-grey-2: #d5dbe3;
  --brand-protek-grey-1: #eaedf1;
  --brand-protek-grey-0: #f2f4f6;
  --brand-protek-light: #d8f1ff;
  --brand-mps-darker: #071a12;
  --brand-mps-dark: #0a4f3c;
  --brand-mps-bright: #1fc486;
  --brand-mps-bright-hover: #41cd98;
  --brand-mps-bright-active: #199d6b;
  --brand-mps-bright-disabled: #8ed0b8;
  --brand-mps-btn-fg: #071a12;
  --brand-mps-btn-fg-disabled: #767c79;
  --brand-mps-grey-2: #b0ccc5;
  --brand-mps-grey-1: #daebe7;
  --brand-mps-grey-0: #e7f1ef;
  --brand-mps-light: #d2f3e7;
  --brand-we-darker: #180808;
  --brand-we-dark: #4f1414;
  --brand-we-bright: #e0312f;
  --brand-we-bright-hover: #e5504e;
  --brand-we-bright-active: #b32726;
  --brand-we-bright-disabled: #dc9695;
  --brand-we-btn-fg: #180808;
  --brand-we-btn-fg-disabled: #7b7676;
  --brand-we-grey-2: #ccb0b0;
  --brand-we-grey-1: #ebdada;
  --brand-we-grey-0: #f1e7e7;
  --brand-we-light: #f3d2d2;

  /* ------------------------------------------------------------------------
     Brand variant — SEMANTIC tokens (the contract modules build on).
     A page template picks its variant by setting the HubL variable
     brand_variant ("mps", "protek", "we") before it extends the layout
     (same mechanism as template_css); layouts/base.html writes it as
     <body data-brand="…"> and the [data-brand] blocks after this :root re-map
     every token below. Header, footer and body text never change with the
     variant. These defaults are the 360 Fleet variant and read the theme
     settings palette (utilities/_colors.css), so the editor still drives them.
     ------------------------------------------------------------------------ */
  --variant-page-bg: var(--color-light2); /* page frames sit on the section tint */
  --variant-accent: var(--color-accent); /* CTA, links, small accents */
  --variant-accent-fg: #fff; /* text on the accent */
  --variant-accent-hover: var(--btn-primary-bg-hover);
  --variant-accent-active: var(--btn-primary-bg-active);
  --variant-accent-disabled: var(--btn-primary-bg-disabled);
  --variant-accent-disabled-fg: var(--btn-primary-fg-disabled);
  --variant-heading: var(--color-accent); /* headings + stat figures on light */
  --variant-detail: var(--color-accent); /* FAQ numbers, icons, small accents */
  --variant-hero-bg: var(--color-black); /* dark hero band */
  --variant-hero-heading: var(--color-sky); /* heading on the dark hero */
  --variant-hero-uptitle: #fff;
  --variant-cta-bg: var(--color-dark1); /* CTA band */
  --variant-cta-heading: #fff;
  --variant-cta-uptitle: var(--color-sky);
  --variant-tint: var(--color-light2); /* section / band tint */
  --variant-surface: var(--color-light1); /* cards, FAQ, surfaces */
  --variant-tint-3: var(--color-light3); /* softest tint */
  --variant-mid: var(--color-light2); /* mid grey of the ramp (none for 360 Fleet → tint) */
  --variant-btn-light-bg: var(--btn-light-bg); /* secondary ("light") button */
  --variant-btn-light-fg: var(--btn-light-fg);
  --variant-btn-light-hover: var(--btn-light-bg-hover);
  --variant-btn-light-active: var(--btn-light-bg-active);
  --variant-btn-light-disabled: var(--btn-light-bg-disabled);
  --variant-btn-light-disabled-fg: var(--btn-light-fg-disabled);
  --variant-outline-fg: var(--color-accent); /* outline button text (= heading) */

  /* 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
  (derived — no spacing scale in the source). */
  --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-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;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-gutter: var(--space-10); /* 2.5rem — section side padding */

  /* Font weight (the three real weights in use: Oswald 500/600, IBM Plex Sans
     400/500/600; retire stray `bold`) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Letter-spacing — the whole scale tracks at -2.2%; the uptitle at +10%. */
  --tracking-tight: -0.022em;
  --tracking-wide: 0.1em;

  /* Radius — buttons are pills (80px in Figma); cards are 12px on the mockups. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 12px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Elevation */
  --shadow-dropdown: 0 2px 9px 0 rgba(13, 13, 26, 0.2);
  /* Carte posee sur une bande — la maquette empile deux ombres : une courte
     qui pose la carte, une longue et diffuse qui la decolle du fond. Meme
     valeur sur les tuiles, le temoignage, la FAQ et la carte de contact. */
  --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;
  /* Apparition d'une bande au defilement : plus long que les transitions
     d'interface, parce qu'il accompagne un mouvement de page. A 0.55s le
     mouvement passait presque inapercu — il se joue pendant que l'oeil arrive
     encore sur la bande. */
  --duration-reveal: 0.9s;
  --easing-standard: linear;
  /* Courbe de deceleration — part vite, se pose doucement. image-tabs s'en
     servait deja pour laisser retomber son volet ; c'est la meme valeur, une
     seule fois. */
  --easing-decelerate: cubic-bezier(0.16, 1, 0.3, 1);

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

/* Brand variants — the same semantic tokens, re-mapped. The selector is the
   bare attribute (not body[data-brand]) so the style guide can wrap a sample in
   <div data-brand="…"> and show all four side by side; on a real page the
   attribute sits on <body>. Values: measured on the regular-page mockups
   (Protek, MPS); WE has no mockup and is derived from its ramp the same way. */

[data-brand="360fleet"] {
  --variant-page-bg: var(--color-light2);
}

[data-brand="protek"] {
  --variant-page-bg: #fff;
  --variant-accent: var(--brand-protek-bright);
  --variant-accent-fg: var(--brand-protek-btn-fg);
  --variant-accent-hover: var(--brand-protek-bright-hover);
  --variant-accent-active: var(--brand-protek-bright-active);
  --variant-accent-disabled: var(--brand-protek-bright-disabled);
  --variant-accent-disabled-fg: var(--brand-protek-btn-fg-disabled);
  --variant-heading: var(--brand-protek-heading);
  --variant-detail: var(--brand-protek-bright);
  --variant-hero-bg: var(--brand-protek-dark);
  --variant-hero-heading: var(--brand-protek-bright);
  --variant-hero-uptitle: #fff;
  --variant-cta-bg: var(--brand-protek-cta);
  --variant-cta-heading: #fff;
  --variant-cta-uptitle: var(--brand-protek-cta-uptitle);
  --variant-tint: var(--brand-protek-grey-1);
  --variant-surface: var(--brand-protek-grey-0);
  --variant-tint-3: var(--brand-protek-light);
  --variant-mid: var(--brand-protek-grey-2);
  --variant-btn-light-bg: var(--brand-protek-light);
  --variant-btn-light-fg: var(--brand-protek-heading);
  --variant-btn-light-hover: var(--brand-protek-grey-0);
  --variant-btn-light-active: var(--brand-protek-grey-2);
  --variant-btn-light-disabled: var(--brand-protek-grey-1);
  --variant-btn-light-disabled-fg: var(--brand-protek-btn-fg-disabled);
  --variant-outline-fg: var(--brand-protek-heading);
}

[data-brand="mps"] {
  --variant-page-bg: #fff;
  --variant-accent: var(--brand-mps-bright);
  --variant-accent-fg: var(--brand-mps-btn-fg);
  --variant-accent-hover: var(--brand-mps-bright-hover);
  --variant-accent-active: var(--brand-mps-bright-active);
  --variant-accent-disabled: var(--brand-mps-bright-disabled);
  --variant-accent-disabled-fg: var(--brand-mps-btn-fg-disabled);
  --variant-heading: var(--brand-mps-dark);
  --variant-detail: var(--brand-mps-bright);
  --variant-hero-bg: var(--brand-mps-darker);
  --variant-hero-heading: var(--brand-mps-bright);
  --variant-hero-uptitle: #fff;
  --variant-cta-bg: var(--brand-mps-bright);
  --variant-cta-heading: #fff;
  --variant-cta-uptitle: var(--brand-mps-bright); /* on a --color-black chip */
  --variant-tint: var(--brand-mps-grey-1);
  --variant-surface: var(--brand-mps-grey-0);
  --variant-tint-3: var(--brand-mps-light);
  --variant-mid: var(--brand-mps-grey-2);
  --variant-btn-light-bg: var(--brand-mps-light);
  --variant-btn-light-fg: var(--brand-mps-dark);
  --variant-btn-light-hover: var(--brand-mps-grey-0);
  --variant-btn-light-active: var(--brand-mps-grey-2);
  --variant-btn-light-disabled: var(--brand-mps-grey-1);
  --variant-btn-light-disabled-fg: var(--brand-mps-btn-fg-disabled);
  --variant-outline-fg: var(--brand-mps-dark);
}

[data-brand="we"] {
  --variant-page-bg: #fff;
  --variant-accent: var(--brand-we-bright);
  --variant-accent-fg: var(--brand-we-btn-fg);
  --variant-accent-hover: var(--brand-we-bright-hover);
  --variant-accent-active: var(--brand-we-bright-active);
  --variant-accent-disabled: var(--brand-we-bright-disabled);
  --variant-accent-disabled-fg: var(--brand-we-btn-fg-disabled);
  --variant-heading: var(--brand-we-dark);
  --variant-detail: var(--brand-we-bright);
  --variant-hero-bg: var(--brand-we-darker);
  --variant-hero-heading: var(--brand-we-bright);
  --variant-hero-uptitle: #fff;
  --variant-cta-bg: var(--brand-we-dark);
  --variant-cta-heading: #fff;
  --variant-cta-uptitle: #fff;
  --variant-tint: var(--brand-we-grey-1);
  --variant-surface: var(--brand-we-grey-0);
  --variant-tint-3: var(--brand-we-light);
  --variant-mid: var(--brand-we-grey-2);
  --variant-btn-light-bg: var(--brand-we-light);
  --variant-btn-light-fg: var(--brand-we-dark);
  --variant-btn-light-hover: var(--brand-we-grey-0);
  --variant-btn-light-active: var(--brand-we-grey-2);
  --variant-btn-light-disabled: var(--brand-we-grey-1);
  --variant-btn-light-disabled-fg: var(--brand-we-btn-fg-disabled);
  --variant-outline-fg: var(--brand-we-dark);
}

/* 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

   A plain comment on purpose, not upstream's slash-star-bang license banner:
   while main.css held one, HubSpot served it unminified as
   template_main.min.css (96 KB instead of 51 KB). The notice stays in the
   source; only the minified copy drops it. */

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


:root .hs-tools-menu {
  top: 40px !important;
}

/* 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 */

.typography p {
  font-size: 1.125rem;
  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;
}
/* Buttons — 360 Fleet
   Every button reads the brand-variant tokens (--variant-accent, --variant-btn-
   light-*, --variant-outline-fg… from generic/_tokens.css), so a page that sets
   <body data-brand="protek|mps|we"> recolors its buttons without a module doing
   anything. Shape is the brand pill: padding 16px 24px, radius 80px (both come
   from Theme settings > Buttons through theme-overrides.css), label = the
   "link" style (IBM Plex Sans 600, 16px, lh 1.2, -2.2%). States are the exact
   default / hover / pressed / disabled steps of the Figma button frames. */

/* Base button — native <button>, the generic .button/.hs-button classes and the
   HubSpot form submit inputs (forms, membership/login/reset pages). Same look as
   .btn--style-1. Component variants (.btn-cta, .btn-dark) and the .no-button
   reset override it. */

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

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

.button:active,
.hs-button:active,
input[type="submit"]:active {
  background-color: var(--variant-accent-active);
  border-color: var(--variant-accent-active);
}

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

.button:disabled,
.hs-button:disabled,
input[type="submit"]:disabled {
  background-color: var(--variant-accent-disabled);
  border-color: var(--variant-accent-disabled);
  color: var(--variant-accent-disabled-fg);
  cursor: not-allowed;
}

/* Call-to-action button — accent pill 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(--variant-accent, var(--color-accent));
  border-radius: var(--btn-radius, var(--radius-pill));
  color: var(--variant-accent-fg, var(--color-white));
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  padding: var(--btn-padding, 1rem 1.5rem);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard);
}

.btn-cta:hover {
  background-color: var(--variant-accent-hover);
}

.btn-cta:active {
  background-color: var(--variant-accent-active);
}

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

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

/* Secondary ("light") variant of the CTA button. */

.btn-cta--secondary {
  background-color: var(--variant-btn-light-bg);
  color: var(--variant-btn-light-fg);
}

.btn-cta--secondary:hover {
  background-color: var(--variant-btn-light-hover);
}

.btn-cta--secondary:active {
  background-color: var(--variant-btn-light-active);
}

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

.btn-dark {
  align-items: center;
  background-color: var(--color-black);
  border-radius: var(--btn-radius, var(--radius-pill));
  color: var(--color-white);
  display: flex;
  font-weight: var(--fw-semibold);
  gap: var(--space-4);
  justify-content: space-between;
  padding: var(--btn-padding, 1rem 1.5rem);
  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(--variant-heading, var(--color-accent));
  outline-offset: 2px;
}

/* Button style system — the three brand buttons driven by the shared `style`
   dropdown (src/modules/_fields/button.js) and rendered by the `button` macro as
   `.btn .btn--style-N`:
     style-1  main     — variant accent fill
     style-2  light    — variant light fill (lavender / tint-3), dark text
     style-3  outline  — variant accent border, heading-colored text, fills on hover
   Reused across modules (standalone CTAs, button groups) so every themed button
   shares one source of truth. A disabled specimen is `aria-disabled="true"`. */

.btn {
  align-items: center;
  border: 2px solid transparent;
  border-radius: var(--btn-radius, var(--radius-pill));
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  gap: var(--space-2);
  justify-content: center;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  padding: var(--btn-padding, 1rem 1.5rem);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard);
}

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

/* Style 1 — main (variant accent) */

.btn--style-1 {
  background-color: var(--variant-accent, var(--color-accent));
  border-color: var(--variant-accent, var(--color-accent));
  color: var(--variant-accent-fg, var(--color-white));
}

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

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

.btn--style-1:disabled,
.btn--style-1[aria-disabled="true"] {
  background-color: var(--variant-accent-disabled);
  border-color: var(--variant-accent-disabled);
  color: var(--variant-accent-disabled-fg);
  cursor: not-allowed;
}

/* Style 2 — light (secondary) */

.btn--style-2 {
  background-color: var(--variant-btn-light-bg);
  border-color: var(--variant-btn-light-bg);
  color: var(--variant-btn-light-fg);
}

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

.btn--style-2:active {
  background-color: var(--variant-btn-light-active);
  border-color: var(--variant-btn-light-active);
}

.btn--style-2:disabled,
.btn--style-2[aria-disabled="true"] {
  background-color: var(--variant-btn-light-disabled);
  border-color: var(--variant-btn-light-disabled);
  color: var(--variant-btn-light-disabled-fg);
  cursor: not-allowed;
}

/* Style 3 — outline (tertiary), fills with the accent on hover */

.btn--style-3 {
  background-color: transparent;
  border-color: var(--variant-accent, var(--color-accent));
  color: var(--variant-outline-fg, var(--color-accent));
}

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

.btn--style-3:active {
  background-color: var(--variant-accent-active);
  border-color: var(--variant-accent-active);
  color: var(--variant-accent-fg, var(--color-white));
}

.btn--style-3:disabled,
.btn--style-3[aria-disabled="true"] {
  background-color: transparent;
  border-color: var(--variant-accent-disabled);
  color: var(--variant-accent-disabled-fg);
  cursor: not-allowed;
}

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

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form.hs-form label {
  display: block;
  font-size: 0.875rem;
  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-size: 0.875rem;
  padding: 0.7rem;
  width: 100%;
}

form.hs-form textarea {
  resize: vertical;
}

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] {
  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 */

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

/* 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 (accent fill, white text, semibold). */

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


  /* Search button input field and suggestions */
  .body-container-wrapper .hs-search-field__button {
    padding: 15px;
  }

  .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
    margin-left: 6px;
    margin-bottom: 0;
  }

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: var(--color-white);
  }

  .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
    padding: 10px;
  }

  .body-container-wrapper .hs-search-field__suggestions li a {
    color: #494A52;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color var(--duration-slow);
  }

/* 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 35px vaut la hauteur au
   repos, pour qu'aucun saut de mise en page n'attende que module.js publie
   `--site-header-topbar-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 ses 35px en production.

   360 Fleet : le header est en deux étages — une barre blanche (35px) puis une
   pilule flottante dans une zone transparente (127px). La page commence sous la
   barre blanche seulement : la première bande passe SOUS la pilule (les héros
   de la maquette le veulent ainsi). Un héro — ou toute première bande qui porte
   du contenu — réserve donc lui-même `padding-top:
   var(--site-header-overlay-height, 127px)` pour que rien ne se cache derrière
   la pilule. Les trois variables sont publiées par header-mega/module.js. */
body:has(.site_header) #main-content {
  padding-top: var(--site-header-topbar-height, 35px);
}

/* 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 system for full-width module bands.

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.

Pattern:
  <section class="section section--dark">      <- band: rhythm + dark theme
    <div class="container"> … </div>           <- gutter + max-width
  </section>

Modifiers stack on the base class:
  --compact   tighter vertical rhythm
  --spacious  looser vertical rhythm
  --dark      navy background with on-dark text/border defaults

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(--space-12));
  padding-top: var(--section-pt, var(--space-12));
}

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

/* --spacious: 1.5x the standard rhythm (the --space scale tops out at --space-12). */
.section--spacious {
  padding-bottom: var(--section-pb, calc(var(--space-12) * 1.5));
  padding-top: var(--section-pt, calc(var(--space-12) * 1.5));
}

/* Dark band — navy background with sensible on-dark defaults so content placed
   inside reads correctly without per-module overrides. */
.section--dark {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.section--dark a {
  color: var(--color-white);
}

.section--dark hr {
  border-color: var(--on-dark-15);
}
/* Apparition au defilement — une bande entre en fondu en remontant de 1.5rem.

Le client a demande « une legere animation d'apparition au scroll » sur quatre
bandes de deux pages (BugHerd 19, 20, 21, 22). Toutes les quatre 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 de la 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. */

[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 {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media screen and (min-width: 1024px) {
  .container {
    padding-left: 5.3125rem;
    padding-right: 5.3125rem;
  }
}

/* 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 the only part that shouts; 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. */

.module-header__uptitle-text {
  color: var(--color-navy);
  margin: 0;
}

.module-header__title {
  color: var(--variant-heading, var(--color-navy));
  margin: 0;
  text-transform: uppercase;
  max-width: 50ch;
}

/* 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: var(--variant-heading, var(--color-navy));
  font-weight: var(--fw-semibold);
  margin: 0;
  max-width: 40ch;
}

/* Figma "360fleet/texte courant": IBM Plex Sans 400, 18px / 140%, -2.2%
   tracking, #1C1D29 at 80%. Size and line-height come from the `text-normal`
   class the macro puts on this wrapper, the tracking from <body>, the weight
   from the body font. Only the color is stated here — and as the translucent
   source value rather than the flattened --color-text, because these bands sit
   on the variant tint as often as on white (see --color-text-raw). */

.module-header__content {
  color: color-mix(in srgb, var(--color-text-raw) 80%, transparent);
  margin-top: 1rem;
}

/* 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. The title is a heading, so `components/_dark-band.css` already
   hands it back to the band color; only the two non-heading parts need a rule.
   Same selector convention as that file: the shared `.section--dark`, a module's
   own `block--dark`, and the `block--bg-dark` spelling used by the modules whose
   scheme modifier names the background (accordion-cards, section-intro…). */

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

[class*="--dark"] .module-header__subtitle,
[class*="--bg-dark"] .module-header__subtitle {
  color: inherit;
}

[class*="--dark"] .module-header__content,
[class*="--dark"] .module-header__content p,
[class*="--bg-dark"] .module-header__content,
[class*="--bg-dark"] .module-header__content p {
  color: var(--on-dark-80);
}

/* The 360 Fleet mockups print a section title on a dark band in the variant's
   bright heading color (lavender on 360 Fleet, the sub-brand bright on
   Protek/MPS/WE) — the same token the dark page-hero uses. `inherit` (white)
   stays the fallback when a variant does not define it. */

[class*="--dark"] .module-header__title,
[class*="--bg-dark"] .module-header__title {
  color: var(--variant-hero-heading, inherit);
}
/* 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;
  }
}
/* Boxed HubSpot form (`.hs-form-dark`)

   Figma "Form narrow" (360fleet TP3, Demande de soumission), shared by every
   module that embeds a HubSpot form on a band (form-section, cta): one 1px box
   per field with a 2px corner, the 12px label floating as a pill across the
   box's top border, 18px / 150% entries, 26px between rows, the error line
   under its box, custom checkbox/radio controls and the submit as the lavender
   pill of `.btn--style-2` (auto width).

   HubSpot renders the form markup, so the text-* utilities can't be put on it:
   the Figma type sizes are stated here instead.

   The pill has to paint the band color to "cut" the border, and every other
   color follows the band too, so they are all custom properties. The defaults
   are the dark band; `.hs-form-dark--light` swaps in the light-band palette and
   a host module only retunes what its own band changes (e.g. the surface).
   --hs-form-surface       band color behind the form (label pill)
   --hs-form-text          labels, entries, option labels, form title
   --hs-form-muted         rich text and file input
   --hs-form-line          field box outline
   --hs-form-control-line  checkbox / radio outline
   --hs-form-placeholder   placeholder text
   --hs-form-error         error message + required marker
   --hs-form-highlight     focus ring, hover and checked controls
   --hs-form-caret         select arrow (data URI)
   --hs-form-check         checkmark drawn on the highlight (data URI)
   --hs-form-column-gap    gap between boxes in HubSpot's multi-column rows
   --hs-form-textarea-min-height */

.hs-form-dark {
  --hs-form-surface: var(--variant-cta-bg, var(--color-dark1));
  --hs-form-text: var(--color-white);
  --hs-form-muted: var(--on-dark-70);
  --hs-form-line: var(--color-border-strong);
  --hs-form-control-line: var(--on-dark-40);
  --hs-form-placeholder: var(--on-dark-40);
  --hs-form-error: var(--color-error-soft);
  --hs-form-highlight: var(--color-white);
  --hs-form-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --hs-form-check: 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='M20 6 9 17l-5-5' stroke='%23111111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --hs-form-column-gap: 1.25rem;
}

/* Light band — same boxes on the tint: the 3:1 control line for the outline,
   heading-accent entries, focus and checked controls, and a dark caret / white
   checkmark to read on it. */
.hs-form-dark--light {
  --hs-form-surface: var(--variant-tint, var(--color-light2));
  --hs-form-text: var(--variant-heading, var(--color-accent));
  --hs-form-muted: var(--color-text);
  --hs-form-line: var(--color-border-strong);
  --hs-form-control-line: var(--color-border-strong);
  --hs-form-placeholder: var(--on-light-50);
  --hs-form-error: var(--color-error);
  --hs-form-highlight: var(--variant-heading, var(--color-accent));
  --hs-form-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%230d0d1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --hs-form-check: 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='M20 6 9 17l-5-5' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.hs-form-dark,
.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(--hs-form-text);
}

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

.hs-form-dark .hs-richtext {
  color: var(--hs-form-muted);
  margin-bottom: 1rem;
}

/* Field box */

/* The outline is drawn by ::before, not a border on the field: in HubSpot's
   own multi-column rows (fieldset.form-columns-N, fields floated at 50% / 33%)
   a border would put the boxes edge to edge. The outline is pulled in on the
   adjoining sides instead, so the grid HubSpot sets is never overridden. */
.hs-form-dark .hs-form-field {
  --hs-form-box-left: 0px;
  --hs-form-box-right: 0px;

  margin-bottom: 1.625rem;
  padding: 0.625rem calc(1.25rem + var(--hs-form-box-right)) 0.625rem
    calc(1.25rem + var(--hs-form-box-left));
  position: relative;
}

.hs-form-dark .hs-form-field::before {
  border: 1px solid var(--hs-form-line);
  border-radius: 2px;
  bottom: 0;
  content: "";
  left: var(--hs-form-box-left);
  pointer-events: none;
  position: absolute;
  right: var(--hs-form-box-right);
  top: 0;
}

.hs-form-dark fieldset:not(.form-columns-1) > .hs-form-field:not(:first-child) {
  --hs-form-box-left: calc(var(--hs-form-column-gap) / 2);
}

.hs-form-dark fieldset:not(.form-columns-1) > .hs-form-field:not(:last-child) {
  --hs-form-box-right: calc(var(--hs-form-column-gap) / 2);
}

/* The box line is already at full strength at rest, so focus is an outer ring. */
.hs-form-dark .hs-form-field:focus-within::before {
  outline: 2px solid var(--hs-form-highlight);
  outline-offset: 2px;
}

/* Floating label pill, straddling the box border on the band color */
.hs-form-dark form.hs-form .hs-form-field > label {
  background-color: var(--hs-form-surface);
  color: var(--hs-form-text);
  display: block;
  font-size: 0.75rem;
  left: calc(15px + var(--hs-form-box-left));
  line-height: 1.5;
  margin: 0;
  padding: 0 6px;
  position: absolute;
  top: -9px;
}

.hs-form-dark .hs-form-required {
  color: var(--hs-form-error);
  margin-left: 0.15rem;
}

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

.hs-form-dark .hs-input {
  background-color: transparent;
  border: 0;
  color: var(--hs-form-text);
  font-family: inherit;
  outline: none;
  padding: 0;
  width: 100%;
}

/* One control box for every field type. The `form.hs-form … input.hs-input`
   compound outranks the theme's light-form rules (elements/_forms.css padding,
   theme-overrides.css font size) without !important. */
.hs-form-dark form.hs-form .hs-form-field input.hs-input,
.hs-form-dark form.hs-form .hs-form-field select.hs-input,
.hs-form-dark form.hs-form .hs-form-field textarea.hs-input {
  font-size: 1.125rem;
  line-height: 1.5;
  padding-block: 0;
  padding-inline: 0;
}

.hs-form-dark form.hs-form .hs-form-field select.hs-input {
  padding-right: 1.5rem;
}

/* theme-overrides.css draws a focus ring on light-form inputs; inside the box
   the ring belongs to the box (see :focus-within above). */
.hs-form-dark form.hs-form input.hs-input:focus,
.hs-form-dark form.hs-form select.hs-input:focus,
.hs-form-dark form.hs-form textarea.hs-input:focus {
  outline: none;
}

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

.hs-form-dark textarea.hs-input {
  min-height: var(--hs-form-textarea-min-height, 5rem);
  resize: vertical;
}

.hs-form-dark select.hs-input {
  appearance: none;
  background-image: var(--hs-form-caret);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 14px;
}

.hs-form-dark select.hs-input option {
  color: #111111;
}

/* Checkbox & radio groups — no box, flush with the boxes' edge, static group
   label above the options */

.hs-form-dark .hs-fieldtype-booleancheckbox,
.hs-form-dark .hs-fieldtype-checkbox,
.hs-form-dark .hs-fieldtype-radio {
  padding: 0;
}

.hs-form-dark .hs-fieldtype-booleancheckbox::before,
.hs-form-dark .hs-fieldtype-checkbox::before,
.hs-form-dark .hs-fieldtype-radio::before {
  content: none;
}

.hs-form-dark form.hs-form .hs-fieldtype-checkbox > label,
.hs-form-dark form.hs-form .hs-fieldtype-radio > label {
  background: transparent;
  font-size: 0.875rem;
  left: auto;
  margin-bottom: 0.25rem;
  padding: 0;
  position: static;
}

.hs-form-dark .inputs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

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

.hs-form-dark .inputs-list label {
  align-items: center;
  color: var(--hs-form-text);
  display: flex;
  font-size: 1rem;
  gap: 0.5rem;
  margin: 0;
}

/* Custom checkbox + radio controls. The `form.hs-form` compound outranks the
   base `form.hs-form input[type=checkbox]` rule without !important. */
.hs-form-dark form.hs-form .inputs-list input.hs-input[type="checkbox"],
.hs-form-dark form.hs-form .inputs-list input.hs-input[type="radio"] {
  appearance: none;
  background-color: transparent;
  border: 1px solid var(--hs-form-control-line);
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
  flex: 0 0 auto;
  height: 1.125rem;
  margin: 0;
  transition: border-color var(--duration-fast) linear,
    background-color var(--duration-fast) linear;
  width: 1.125rem;
}

.hs-form-dark form.hs-form .inputs-list input.hs-input[type="radio"] {
  border-radius: 50%;
}

.hs-form-dark form.hs-form .inputs-list input.hs-input[type="checkbox"]:hover,
.hs-form-dark form.hs-form .inputs-list input.hs-input[type="radio"]:hover {
  border-color: var(--hs-form-highlight);
}

.hs-form-dark form.hs-form .inputs-list input.hs-input[type="checkbox"]:focus-visible,
.hs-form-dark form.hs-form .inputs-list input.hs-input[type="radio"]:focus-visible {
  outline: 2px solid var(--hs-form-highlight);
  outline-offset: 2px;
}

.hs-form-dark form.hs-form .inputs-list input.hs-input[type="checkbox"]:checked {
  background-color: var(--hs-form-highlight);
  background-image: var(--hs-form-check);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.8rem;
  border-color: var(--hs-form-highlight);
}

.hs-form-dark form.hs-form .inputs-list input.hs-input[type="radio"]:checked {
  background-image: radial-gradient(var(--hs-form-highlight) 0 35%, transparent 40%);
  border-color: var(--hs-form-highlight);
}

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

/* Validation — the error line sits under its box, in the row gap, aligned with
   the entry text. */

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

.hs-form-dark .hs-form-field > .hs-error-msgs.inputs-list {
  left: calc(1.25rem + var(--hs-form-box-left));
  margin: 0;
  position: absolute;
  top: calc(100% + 2px);
}

.hs-form-dark form.hs-form .hs-error-msgs.inputs-list > li {
  margin: 0;
}

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

/* Submit — the lavender pill of `.btn--style-2`, auto width */

.hs-form-dark .hs_submit .actions {
  margin: 0.25rem 0 0;
  padding: 0;
}

.hs-form-dark form.hs-form .hs-button {
  background-color: var(--variant-btn-light-bg);
  background-image: none;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--variant-btn-light-fg);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  padding: 1rem 1.5rem;
  text-align: center;
  transition: background-color var(--duration-fast) linear;
  width: auto;
}

.hs-form-dark form.hs-form .hs-button:hover,
.hs-form-dark form.hs-form .hs-button:focus {
  background-color: var(--variant-btn-light-hover);
  border-radius: var(--radius-pill);
  color: var(--variant-btn-light-fg);
}

.hs-form-dark form.hs-form .hs-button:active {
  background-color: var(--variant-btn-light-active);
}

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

/* Compact — `.hs-form-dark--compact` (cta band). The label sits above its box
   instead of floating on the border, and the entry drops to 16px (the floor
   below which iOS zooms the page on focus), for a ~42px box. The box moves from
   the field's ::before to the `.input` wrapper so the label stays outside it;
   the field keeps HubSpot's cell and only carries the column-gap inset. It needs
   no band color behind the label, so it also reads over a background image. */

.hs-form-dark--compact .hs-form-field {
  margin-bottom: 1rem;
  padding: 0 var(--hs-form-box-right) 0 var(--hs-form-box-left);
}

.hs-form-dark--compact .hs-form-field::before {
  content: none;
}

.hs-form-dark--compact form.hs-form .hs-form-field > label {
  background: transparent;
  margin: 0 0 0.375rem;
  padding: 0;
  position: static;
}

.hs-form-dark--compact .hs-form-field:not(.hs-fieldtype-booleancheckbox):not(.hs-fieldtype-checkbox):not(.hs-fieldtype-radio) > .input {
  border: 1px solid var(--hs-form-line);
  border-radius: 2px;
  padding: 0.5rem 1rem;
  transition: border-color var(--duration-fast) linear;
}

/* Focus recolors the 1px line (mauve → the highlight) instead of adding the
   boxed mode's 2px outer ring, which read as a heavy double border on a box
   this small. The line change stays clearly visible for keyboard users. The
   selector repeats the box rule's :not() chain so it outranks it. */
.hs-form-dark--compact .hs-form-field:not(.hs-fieldtype-booleancheckbox):not(.hs-fieldtype-checkbox):not(.hs-fieldtype-radio):focus-within > .input {
  border-color: var(--hs-form-highlight);
}

.hs-form-dark--compact form.hs-form .hs-form-field input.hs-input,
.hs-form-dark--compact form.hs-form .hs-form-field select.hs-input,
.hs-form-dark--compact form.hs-form .hs-form-field textarea.hs-input {
  font-size: 1rem;
}

/* The tighter row gap has no room for an absolutely placed error line: it goes
   back into the flow under its box, and only pushes the next row down when an
   error actually shows. */
.hs-form-dark--compact .hs-form-field > .hs-error-msgs.inputs-list {
  margin-top: 0.25rem;
  padding-left: 1rem;
  position: static;
}
/* 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 come from the 360 Fleet theme settings (src/fields.json) — accent /
primary #4A3F8A, black (navy) #0D0D1A, dark1 #2F2858, dark2 #3E3285, light1
#EFEFF5, light2 (secondary) #E7E6F0, sky (accent_soft) #A99DE0. The token names
(navy, sky, accent, …) are the design-system contract used across modules — keep
the names, change the values in fields.json. The extra "light purple" tint
(#EEEBF9) has no theme slot: it is the static --color-light3 in
generic/_tokens.css and only gets its utilities here.
*/

:root {
  --color-accent: #4A3F8A;
  --color-black: #0D0D1A;
  --color-dark1: #2F2858;
  --color-dark2: #3E3285;
  --color-light1: #EFEFF5;
  --color-light2: #E7E6F0;
  --color-sky: #A99DE0;
  /* --color-navy aliases the primary dark (= --color-black). */
  --color-navy: #0D0D1A;
}

/* 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-light3 {
  color: var(--color-light3);
}

/* 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);
}
.bg-light3 {
  background-color: var(--color-light3);
}
/* 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 — 360 Fleet type scale
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). The
desktop max of every heading matches the size set in src/fields.json (Theme
settings > Text); the mobile minimum is derived (not in the Figma source) and
the fluid middle value is tuned for a 360px → 1280px viewport range.

Line heights follow the Figma "Guide Font" frame: 1.2 on every heading and UI
style, 1.4 on running text and quotes, 1.5 on labels / form fields. Text below
30px never uses line-height 1.

Letter-spacing: the whole 360 Fleet scale runs at -2.2% (set once on <body> in
theme-overrides.css and inherited), except the uptitle (+10%) and the form
label / field (0) which are stated where they differ.

Font family and weight are NOT set here — headings take their family/weight from
the theme's Text settings, body styles inherit the 400 body weight. The single
exception is .text-surtitre: the brand sets the uptitle in IBM Plex Mono 500,
which no Text setting maps to, so the utility carries it (see --font-mono in
theme-overrides.css — the family itself is a theme font field). */

/* Headings — fluid (clamp) so they scale down on small viewports.
   clamp(min = mobile, fluid = viewport-based, max = desktop). */

.text-h1 {
  /* Desktop 64px → 40px mobile — Oswald 500 */
  font-size: clamp(2.5rem, 1.913rem + 2.609vw, 4rem);
  line-height: 1.2;
}
.text-h2 {
  /* Desktop 48px → 32px mobile — Oswald 500 */
  font-size: clamp(2rem, 1.609rem + 1.739vw, 3rem);
  line-height: 1.2;
}
.text-h3 {
  /* Desktop 24px → 20px mobile — IBM Plex Sans 600 */
  font-size: clamp(1.25rem, 1.152rem + 0.435vw, 1.5rem);
  line-height: 1.2;
}
.text-h4 {
  /* Desktop 20px → 18px mobile — Oswald 600 */
  font-size: clamp(1.125rem, 1.076rem + 0.217vw, 1.25rem);
  line-height: 1.2;
}
.text-h5 {
  /* Desktop 18px → 16px mobile — IBM Plex Sans 600 */
  font-size: clamp(1rem, 0.951rem + 0.217vw, 1.125rem);
  line-height: 1.2;
}
.text-h6 {
  /* 16px — derived (no H6 in the source) */
  font-size: 1rem;
  line-height: 1.2;
}

/* Stats — Stat-2 (Oswald 500, 32px) with a gentle reduction */

.text-stat {
  /* Desktop 32px → 28px mobile */
  font-size: clamp(1.75rem, 1.652rem + 0.435vw, 2rem);
  line-height: 1.2;
}
.text-stat-desc {
  /* Desktop 24px → 20px mobile — the copy next to a stat */
  font-size: clamp(1.25rem, 1.152rem + 0.435vw, 1.5rem);
  line-height: 1.3;
}

/* Body */

.text-normal {
  /* texte courant — 18px / 140% */
  font-size: 1.125rem;
  line-height: 1.4;
}
.text-medium {
  /* texte medium — 20px / 120% (weight 600 comes from the element / module) */
  font-size: 1.25rem;
  line-height: 1.2;
}
.text-large {
  /* texte large — 24px / 120% → 20px mobile */
  font-size: clamp(1.25rem, 1.152rem + 0.435vw, 1.5rem);
  line-height: 1.2;
}
.text-quote {
  /* quote — 24px / 140% → 20px mobile */
  font-size: clamp(1.25rem, 1.152rem + 0.435vw, 1.5rem);
  line-height: 1.4;
}
.text-small {
  /* meta — 14px / 120% */
  font-size: 0.875rem;
  line-height: 1.2;
}
.text-surtitre {
  /* surtitre (uptitle) — IBM Plex Mono 500, 14px / 120%, +10% tracking, set in
     capitals: the uptitle is the one part of a section header that shouts, so
     the case is the utility's, not the editor's. */
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.text-tag {
  /* 14px / 120% */
  font-size: 0.875rem;
  line-height: 1.2;
}
.text-label {
  /* label — 12px / 150%, no tracking */
  font-size: 0.75rem;
  letter-spacing: 0;
  line-height: 1.5;
}
.text-link {
  /* link — 16px / 120% (weight 600 comes from the theme's Links setting) */
  font-size: 1rem;
  line-height: 1.2;
}
.text-table-title {
  /* 18px / 120% */
  font-size: 1.125rem;
  line-height: 1.2;
}


* {
    /* outline: 1px dashed black; */
}