/* Theme base styles */

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

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

/* Design tokens
Static custom properties for values that recur across the theme but are NOT
driven by the HubSpot theme settings. (Brand colors live in utilities/_colors.css
and fonts in theme-overrides.css, both seeded from the editor.) Defined on :root
in the generic layer so every component and module stylesheet can read them via
var(). Values mirror what is already used in the codebase, so adopting them is a
visual no-op — just a single source of truth going forward.
*/

:root {
  /* Neutrals & on-dark
  --color-white replaces the hardcoded white literals. The on-dark ramp is
  translucent white for text/borders over dark sections. */
  --color-white: #fff;
  --on-dark-90: rgba(255, 255, 255, 0.9);
  --on-dark-80: rgba(255, 255, 255, 0.8);
  --on-dark-70: rgba(255, 255, 255, 0.7);
  --on-dark-60: rgba(255, 255, 255, 0.6);
  --on-dark-50: rgba(255, 255, 255, 0.5);
  --on-dark-40: rgba(255, 255, 255, 0.4);
  --on-dark-30: rgba(255, 255, 255, 0.3);
  --on-dark-25: rgba(255, 255, 255, 0.25);
  --on-dark-20: rgba(255, 255, 255, 0.2);
  --on-dark-15: rgba(255, 255, 255, 0.15);
  /* on-light ramp — translucent black for text/borders over light sections. */
  --on-light-90: rgba(0, 0, 0, 0.9);
  --on-light-70: rgba(0, 0, 0, 0.7);
  --on-light-50: rgba(0, 0, 0, 0.5);
  --on-light-25: rgba(0, 0, 0, 0.25);
  --on-light-20: rgba(0, 0, 0, 0.2);
  --on-light-15: rgba(0, 0, 0, 0.15);
  --on-light-10: rgba(0, 0, 0, 0.1);
  --on-light-05: rgba(0, 0, 0, 0.05);
  --border-on-light: rgba(0, 0, 0, 0.15);
  /* Semantic / feedback colors — route component hardcodes through these.
  --color-border is the design's divider / field stroke (#AAAAAA). --color-error
  is the brand red (#BB2333): the required-field marker in the mockups. It has no
  palette slot on purpose; --color-accent-red is the same red for the one
  decorative use the mockups make of it (the home positioning band's uptitle,
  Accueil-v3) — 5.3:1 on #EEEEEE, 6.2:1 on white.
  --color-field-border is the form-field stroke, darkened from the design's
  #AAAAAA so a field's edge reaches 3:1 (WCAG 1.4.11) on white and on #EEEEEE.
  Text fields, selects and textareas no longer use it at rest (no stroke,
  client request 2026-10-13, Teamwork 51062423); it stays for the file drop
  zone and the form placeholder.
  --color-accent-text is the teal for SMALL text (uptitles, links): the brand
  teal #197B81 is 4.32:1 on the #EEEEEE bands, this one-step-darker teal is
  4.62:1 there and 5.36:1 on white — visually the same colour.
  --color-muted is the design's secondary grey (#888B94, testimonial quotes and
  roles) darkened to pass AA: 5.84:1 on white, 5.03:1 on #EEEEEE. */
  --color-border: #aaaaaa;
  /* --color-band-dark is the ground of every dark band and of the footer
  (#2E3639, asked by the client on 2026-10-07 and applied to the mockups on
  2026-10-08). It is NOT --color-black: that one stays the text colour #293132. */
  --color-band-dark: #2e3639;
  --color-field-border: #858585;
  --color-accent-text: #18767c;
  --color-muted: #62656c;
  --color-error: #bb2333;
  --color-accent-red: #bb2333;
  --color-success: #4f7d24;
  --color-success-soft: #cde3cc;

  /* Section rhythm
  Vertical steps between section bands: a page reads as a stack of bands, and a
  band that is built from two modules — an intro on top of its content — needs a
  tighter seam than a full stop. The `sectionSpacingFields` builder exposes this
  scale as Style-tab choices, and the `section_spacing` macro renders the picked
  step as --section-pt / --section-pb on the module's section element, which the
  shared `.section` class consumes (components/_section.css), so a template or
  the page editor can retune one instance without touching the module.
  Each step clamps down on small screens; the max is the desktop design value. */
  --section-space-none: 0;
  --section-space-2xs: 0.625rem; /* 10px — content module sitting under its intro */
  --section-space-xs: 1.25rem; /* 20px — intro module sitting above its content */
  --section-space-sm: clamp(2rem, 4vw, 2.5rem); /* 40px */
  --section-space-md: clamp(2.5rem, 5vw, 3.75rem); /* 60px */
  --section-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-7: 1.75rem; /* 28px — footer column rhythm */
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  /* Large layout gaps (a band's header to its content, stacked blocks) —
     static, unlike the clamped --section-space-* paddings. */
  --space-15: 3.75rem; /* 60px */
  --space-20: 5rem; /* 80px */
  /* Section side padding: 10px on mobile (client request 2026-10-13,
     Teamwork 51062275), 2.5rem from 768px, 3.75rem from 1024px. */
  --space-gutter: 0.625rem;

  /* Font weight — the four Roboto weights the design uses (H1 / body 400,
     H2 500, H3 600, buttons and the home H1 700). */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Radius */
  --radius-xs: 4px; /* form fields, small cards */
  --radius-sm: 6px;
  /* The corner of a CARD — a panel that carries its own background, not a
     control. Bigger than --radius-sm on purpose: the two are not
     interchangeable, and a card set to 6px reads as a mis-sized button.
     ACSO: 12px (cards, form panel). Buttons are square (Buttons › corner 0);
     only the header CTA and tags are pills. */
  --radius-card: 12px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Elevation — the design's three drop shadows. */
  /* Floating panel (dropdown, raised card). */
  --shadow-dropdown: 0 32px 64px -12px rgba(0, 0, 0, 0.14);
  /* One soft drop under the card's bottom edge. Same value on every card in
     the theme — tiles, tabs, testimonial — so they read as one family. */
  --shadow-card: 0 10px 10px -10px rgba(45, 51, 74, 0.1);
  /* The sticky white header lifting off the page. */
  --shadow-header: 0 0 32px -16px rgba(0, 0, 0, 0.32);

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

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

/* Tablet gutter: back to 2.5rem once the 10px mobile padding stops fitting. */
@media (min-width: 768px) {
  :root {
    --space-gutter: var(--space-10);
  }
}

/* Desktop gutter: the mockups set every band's content 20px inside the 1315px
   container (columns padded 0 20px), so content, footer and header logo share
   one edge — 82.5px at 1440. */
@media (min-width: 1024px) {
  :root {
    --space-gutter: var(--space-15);
  }
}

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

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

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

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

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

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

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

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

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

body {
  margin: 0;
}

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

h1 {
}

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

legend {
  padding: 0;
}

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

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

details {
  display: block;
}

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

summary {
  display: list-item;
}

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



/* CSS variables */

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

/* Mobile layout */

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


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

/* Desktop layout */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Paragraphs */

.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;
}
/* Base button — clean, on-brand accent bar shared by native <button> elements,
   the generic .button/.hs-button classes, and HubSpot form submit inputs
   (forms, membership/login/reset pages). Mirrors the .btn-cta / .styleguide__btn
   look: accent fill, white text, semibold, square. Component variants
   (.btn-cta, .btn-dark) and the .no-button reset override it. */

button,
.button,
.hs-button,
input[type="submit"] {
  background-color: var(--color-accent);
  border: none;
  color: var(--color-white);
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  /* Theme settings > Buttons > spacing (seeded in theme-overrides.css);
     falls back to the static 12px 25px outside a theme context. */
  padding: var(--btn-padding, 0.75rem 1.5625rem);
  text-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),
    filter var(--duration-fast) var(--easing-standard);
  white-space: normal;
}

button:hover,
.button:hover,
.hs-button:hover,
input[type="submit"]:hover {
  filter: brightness(0.95);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* No button */

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

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

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

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

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

/* Style 1 — solid accent (primary) */

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

/* Client request 2026-10-13, Teamwork 51062096: a more visible hover. The
   label turns dark: white on sky is 2.1:1, navy (#293132) on sky is 6.4:1. */
.btn--style-1:hover {
  background-color: var(--color-sky);
  border-color: var(--color-sky);
  color: var(--color-navy);
}

/* Style 2 — outline (secondary), fills on hover */

/* The design's outline button: a 1px stroke and a 56px box (217 x 56 in the
   home hero) where the solid buttons are 54px. */
.btn--style-2 {
  background-color: transparent;
  border-color: var(--color-accent);
  border-width: 1px;
  color: var(--color-accent);
  padding-block: 0.9375rem;
}

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

/* Style 3 — solid dark (tertiary), flips to accent on hover */

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

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

/* 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: 1rem;
  /* Text/text-small: 16px / 120%, -2% — the labels of the form mockups. */
  letter-spacing: -0.02em;
  line-height: 1.2;
  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;
  /* 16px, per the brand guide — and below 16px iOS Safari zooms on focus. */
  font-size: 1rem;
  /* The mockups' 46px field; a select already lands there on its own. */
  min-height: 2.875rem;
  padding: 0.7rem;
  width: 100%;
}

/* No stroke at rest — the client's call (2026-10-13, Teamwork 51062423),
   overriding the 3:1 field edge: the border keeps its width in transparent so
   nothing shifts, and the field reads by its fill. Focus draws it in the
   accent; the error state (below) still paints it red. The file drop zone
   keeps its dashed border. */
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 select,
form.hs-form textarea {
  border-color: transparent;
}

form.hs-form input[type=text]:focus,
form.hs-form input[type=search]:focus,
form.hs-form input[type=email]:focus,
form.hs-form input[type=password]:focus,
form.hs-form input[type=tel]:focus,
form.hs-form input[type=number]:focus,
form.hs-form select:focus,
form.hs-form textarea:focus {
  border-color: var(--color-accent);
}

/* The mockups' message box: 560 x 155. */
form.hs-form textarea {
  min-height: 9.6875rem;
  resize: vertical;
}

/* Submit — the module buttons' 54px (13px padding, 24px line, their 2px
   border, which the form button does not have). */
form.hs-form input[type=submit],
form.hs-form .hs-button {
  min-height: 3.375rem;
}

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

/* Field grid — HubSpot injects a stylesheet per form instance that lays the
   multi-column rows out with floats (`.hs-form-field` at 50% / 33%), puts an
   8px right margin on every `.input` and shrinks single-column inputs to 95%,
   all scoped to the instance (`.hs-form-<guid>_<id> fieldset.form-columns-1
   .hs-input`, specificity 0-3-1). The result: two-column fields stop 8px
   short of the edge and full-width ones 5% short, so no two rows share a
   right edge. These selectors (0-3-2) replace that with one grid: a single
   column on phones, the form's own columns from 640px, every field filling
   its track. Fields keep their bottom margin for the vertical rhythm. */

form.hs-form fieldset[class*="form-columns-"] {
  column-gap: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

form.hs-form fieldset[class*="form-columns-"] .hs-form-field {
  float: none;
  width: auto;
}

form.hs-form fieldset[class*="form-columns-"] .input {
  margin-right: 0;
}

form.hs-form fieldset[class*="form-columns-"] .hs-input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
}

@media (min-width: 640px) {
  form.hs-form fieldset.form-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  form.hs-form fieldset.form-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

/* The careers mockup's CV drop zone: a 148px box, dashed #AAAAAA, its prompt
   centred. A native file input takes drops on its whole box. */
form.hs-form input[type=file] {
  background-color: var(--color-white);
  border: 1px dashed var(--color-border);
  cursor: pointer;
  min-height: 9.25rem;
  padding: 3.5rem 1rem;
  text-align: center;
  width: 100%;
}

form.hs-form input[type=file]:hover,
form.hs-form input[type=file]:focus-visible {
  border-color: var(--color-accent);
}

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

form.hs-form .hs-input.invalid.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 88px vaut la hauteur au
   repos, pour qu'aucun saut de mise en page n'attende que module.js publie
   `--site-header-height`.

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

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

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

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

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

/* Skip link */

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

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

/* Brand / logo */

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

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

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

/* Burger (mobile) */

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

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

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

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

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

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

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

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

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

/* Primary navigation */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Divider between utilities and the CTA */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .site-header__divider {
    display: none;
  }

  .site-header__cta {
    align-self: flex-start;
  }
}
/* Section — reusable vertical-rhythm 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-band-dark);
  color: var(--color-white);
}

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

.section--dark hr {
  border-color: var(--on-dark-15);
}
/* Apparition au defilement — le CONTENU d'une bande entre en fondu en remontant
de 3rem ; la bande elle-meme (son fond, sa couleur) reste en place. L'effet
porte donc sur l'enfant direct de la bande : son conteneur (`.container` ou le
`__inner` du module), jamais sur la bande.

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

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

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

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

Amplitude portee de 1.5rem a 3rem a la demande du client le 2026-10-13
(Teamwork 51062261) — duree, courbe et declenchement inchanges, aucun delai.

Un module qui anime lui-meme son contenu pose `data-reveal-self` sur son
element `.section` : main.js ne lui pose alors pas `data-reveal` et ne
l'observe pas. Ce module doit appliquer les memes garde-fous lui-meme (etat
masque pose par JS seulement, sous la fenetre seulement, rien sous
`prefers-reduced-motion`, aucune transform a l'arrivee).

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

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

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

/* The outline button on a dark band (or a photo marked dark). Its light-page
   teal outline is 2.6:1 on navy, so on a dark band it turns white and fills
   with the accent on hover (white on teal = 5.0:1). The teal focus ring would
   vanish the same way, so it turns white too. */

[class*="--dark"] .btn--style-2,
[class*="--bg-dark"] .btn--style-2 {
  border-color: var(--color-white);
  color: var(--color-white);
}

[class*="--dark"] .btn--style-2:hover,
[class*="--bg-dark"] .btn--style-2:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

[class*="--dark"] .btn:focus-visible,
[class*="--bg-dark"] .btn:focus-visible {
  outline-color: var(--color-white);
}
:root {
  --module-padding-block: 3rem;
}

.container {
  /* Theme setting: Spacing > Maximum content width, emitted as --container-max
     by theme-overrides.css. The fallback is that setting's shipped default, so
     the width holds wherever this sheet loads without it. */
  max-width: var(--container-max, 1500px);
  margin-left: auto;
  margin-right: auto;
  /* --space-gutter: 2.5rem, 3.75rem from 1024px (tokens). */
  padding-left: var(--space-gutter, 2.5rem);
  padding-right: var(--space-gutter, 2.5rem);
}


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

/* A module can recolor its light-band uptitle by setting
   --module-header-uptitle-color on its block (a palette token, never a hex);
   the dark-band rule below still wins. */

.module-header__uptitle-text {
  color: var(--module-header-uptitle-color, var(--color-accent-text));
  margin: 0;
}

.module-header__title {
  color: var(--color-navy);
  margin: 0;
  max-width: 45ch;
}

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

/* 48rem: the ACSO intros run one or two lines (~770px max in the mockups). */
.module-header__content {
  color: var(--color-navy);
  max-width: 48rem;
}

/* The uptitle sits right above the title: the ACSO mockups put 8px between them
   on most bands (À propos, Projets, the team, the dark home band) — the gap
   alone. The intro sits a step further: 8–15px there (8px gap + 8px). */

.module-header__title ~ .module-header__content {
  margin-top: var(--space-2);
}

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

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

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

.editorial-list__item {
  display: flex;
}

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

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

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

.editorial-card__title {
  margin: 0;
}

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

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

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

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

.editorial-card__excerpt {
  margin: 0;
}

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

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

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

@media (min-width: 768px) {
  .editorial-list--roomy {
    gap: 1.5rem;
  }
}
/* Dark HubSpot form */

.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(--color-white);
}

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

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

.hs-form-dark .hs-form-field {
  border: 1px solid var(--on-dark-25);
  margin-bottom: 1rem;
  padding: 0.625rem 1rem;
}

.hs-form-dark .hs-form-field:focus-within {
  border-color: var(--color-accent);
}

.hs-form-dark .hs-form-field > label {
  color: var(--on-dark-60);
  display: block;
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
}

.hs-form-dark .hs-form-required {
  color: var(--color-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(--color-white);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  padding: 0;
  width: 100%;
}

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

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

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

.hs-form-dark select.hs-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: 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");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 14px;
  padding-right: 1.5rem;
}

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

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

.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(--color-white);
  display: flex;
  font-size: 1rem;
  gap: 0.5rem;
  margin: 0;
}

.hs-form-dark .hs-input[type="checkbox"],
.hs-form-dark .hs-input[type="radio"] {
  height: auto;
  width: auto;
}

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

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

.hs-form-dark .hs-error-msg {
  color: var(--color-error);
  font-size: 0.8125rem;
}

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

.hs-form-dark .hs-button {
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h13m0 0-5.5-5.5M18 12l-5.5 5.5' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  border: 0;
  color: var(--color-black);
  cursor: pointer;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  padding: 1rem 1.25rem;
  text-align: left;
  transition: filter var(--duration-fast) linear;
  width: 100%;
}

.hs-form-dark .hs-button:hover {
  filter: brightness(0.95);
}

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

  .hs-form-dark .form-columns-2 .hs-form-field {
    flex: 1;
  }
}
/* 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.

Replace these placeholder values with the new site's brand colors in the theme
settings (or fields.json). The token names (navy, sky, accent, …) are the
design-system contract used across modules — keep the names, change the values.
*/

:root {
  --color-accent: #197B81;
  --color-black: #293132;
  --color-dark1: #293132;
  --color-dark2: #1D2525;
  --color-light1: #EEEEEE;
  --color-light2: #EEEEEE;
  --color-sky: #66C2C2;
  /* --color-navy aliases the primary dark (= --color-black). */
  --color-navy: #293132;
}

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

/* 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);
}
/* Flex & grid utilities (curated)
A lean, token-aligned subset: flex helpers, gap mapped to the --space-* scale, and
a responsive grid. Mobile-first breakpoints: sm 640, md 768, lg 1024. Add a class
here only when it is reused across modules — one-off layout belongs in module CSS. */

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

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

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

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

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

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

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

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

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

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

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

Scale: ACSO, from the file-wide Figma census (desktop 1440 frame). Mobile sizes
are derived (no mobile mockups) — fluid between a 375px and a 1440px viewport.
Sizes are rem on a fixed 16px root (see theme-overrides.css). Figma's "auto"
line height for Roboto is 1.17 — kept on display sizes (>= 30px); text below
30px never goes under 1.2. Font family is not set here; the heading weight comes
from the heading element (theme settings), any other weight from the font-*
utilities at the end of this file — never from module CSS.
*/

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

.text-display {
  /* Home hero H1 — 54px → 30px mobile, 60px line, uppercase. Pair with
     .font-bold (the h1 element renders 400). */
  font-size: clamp(1.875rem, 1.35rem + 2.25vw, 3.375rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}
.text-h1 {
  /* Titres/H1 — 58px → 32px mobile */
  font-size: clamp(2rem, 1.43rem + 2.44vw, 3.625rem);
  letter-spacing: -0.02em;
  line-height: 1.17;
}
.text-h2 {
  /* Titres/H2 — 40px → 28px mobile */
  font-size: clamp(1.75rem, 1.49rem + 1.13vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.17;
}
.text-h3 {
  /* Titres/H3 — 25px → 21px mobile */
  font-size: clamp(1.3125rem, 1.22rem + 0.38vw, 1.5625rem);
  line-height: 1.2;
}
.text-h4 {
  /* Titres/H4 — 22px → 19px mobile */
  font-size: clamp(1.1875rem, 1.12rem + 0.28vw, 1.375rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.text-h5 {
  /* 18px */
  font-size: 1.125rem;
  line-height: 1.2;
}

/* Stats — fluid */

.text-stat {
  /* Stat number — 58px → 40px mobile. Pair with .font-medium. */
  font-size: clamp(2.5rem, 2.1rem + 1.69vw, 3.625rem);
  letter-spacing: -0.02em;
  line-height: 1.17;
}
.text-stat-desc {
  /* Secondary stat figure — 36px → 28px mobile. Not in the ACSO design; kept
     off the H2 size so a 40px heading never resolves to it. */
  font-size: clamp(1.75rem, 1.53rem + 0.93vw, 2.25rem);
  line-height: 1.3;
}

/* Body */

.text-large {
  /* Text/Text-large — 20px → 18px mobile (hero intros) */
  font-size: clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem);
  letter-spacing: -0.02em;
  line-height: 1.5;
}
.text-normal {
  /* Text/Text-normal — 16px (body) */
  font-size: 1rem;
  line-height: 1.5;
}
.text-label {
  /* Text/text-small — 16px, tight (form labels, quotes, language switch) */
  font-size: 1rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.text-small {
  /* Text/Small/Link — 14px */
  font-size: 0.875rem;
  line-height: 1.5;
}
.text-tiny {
  /* Text/Tiny/Normal — 12px (captions, roles, help text) */
  font-size: 0.75rem;
  line-height: 1.5;
}
.text-surtitre {
  /* Titres/Surtitre — 17px, always uppercase (the uptitle) */
  font-size: 1.0625rem;
  line-height: 1.2;
  text-transform: uppercase;
}
/* In rich text (a project body) `.typography p` (0-1-1) would set it back to
   the 16px body size. */
.typography .text-surtitre {
  font-size: 1.0625rem;
  line-height: 1.2;
}
.text-caps {
  /* Card label — 18px, uppercase, +8% tracking. Pair with .font-medium. */
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.text-tag {
  /* Tags / meta — 14px */
  font-size: 0.875rem;
  line-height: 1.5;
}
.text-table-title {
  /* 18px */
  font-size: 1.125rem;
  line-height: 1.2;
}

/* Weight — the four Roboto weights the design uses. The only place a module
   gets a weight that its element does not carry. */

.font-regular {
  font-weight: var(--fw-regular);
}
.font-medium {
  font-weight: var(--fw-medium);
}
.font-semibold {
  font-weight: var(--fw-semibold);
}
.font-bold {
  font-weight: var(--fw-bold);
}