:root {
  --website-background-ivory: #F8F9FB;
  --website-surface-white: #FFFFFF;
  --website-background-deep: #0A0F1C;
  --website-background-midnight: #111827;
  --website-background-black: #000000;
  --website-background-navy: #0F1835;
  --website-accent-blue: #2563EB;
  --website-accent-blueSoft: #60A5FA;
  --website-accent-metalBlue: #24547F;
  --website-accent-aluminumLight: #E8EEF2;
  --website-accent-aluminumMid: #A6B4BE;
  --website-accent-aluminumDark: #657783;
  --website-accent-blackMetal: #161F29;
  --website-accent-platinum: #C7BFAF;
  --website-accent-champagne: #D6C7B0;
  --website-accent-copper: #B87333;
  --website-accent-burntOrange: #C9651D;
  --website-accent-warmBronze: #A0512D;
  --website-accent-turquoise: #14B8A6;
  --website-text-dark: #111827;
  --website-text-secondary: #6B7280;
  --website-text-light: #FFFFFF;
  --website-text-lightSecondary: #D1D5DB;
  --website-text-lightMuted: #C7C9CC;
  --website-text-silver: #B9BFC7;
  --website-accent-focusSky: #7DBEFF;
  --website-background-fieldInk: #101A2B;
  --website-text-steelLight: #C8CED6;
  --website-accent-slateBorder: #64748B;
  --website-background-howItWorksNavy: #101F4D;
  --website-accent-signalCyan: #76D8FF;
  --website-text-skyBlue: #9CC9FF;
  --website-accent-iceCyan: #C9F2FF;
  --website-text-paleBlue: #DCE8FF;
  --website-accent-mistBorder: #F1F3F7;
  --website-text-offWhite: #F7F8FA;
  --website-text-coolWhite: #F7F9FF;
}

/*
 * THE IMAGE FORMATS — published like the colors, from a single table.
 *
 * The Owner: « quoi qu'il en soit, je dois pouvoir ajuster le format quand je
 * veux modifier plus tard. » Changing a value in mediaFormats.ts is enough:
 * no rule below carries a hard-coded aspect ratio.
 */
:root {
  --media-banner: 3 / 1;
  --media-phoneAgentPortrait: 1 / 1;
  --media-section1: 1 / 1;
  --media-lastSection: 1 / 1;
  --media-appShowcase: 1 / 1;
  --media-appLogo: 1 / 1;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: clip;
}

.sc-page {
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  background: var(--website-background-navy);
  color: var(--website-text-light);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

.sc-main { flex: 1; }


.sc-surface-light {
  background: radial-gradient(130% 95% at 20% -25%, color-mix(in srgb, var(--website-background-ivory) 66%, var(--website-text-light)) 0%, transparent 60%), radial-gradient(90% 70% at 85% 8%, color-mix(in srgb, var(--website-background-ivory) 84%, var(--website-accent-blueSoft)) 0%, transparent 55%), linear-gradient(176deg, color-mix(in srgb, var(--website-background-ivory) 80%, var(--website-text-light)) 0%, var(--website-background-ivory) 42%, color-mix(in srgb, var(--website-background-ivory) 54%, var(--website-background-black)) 100%);
  color: var(--website-text-dark);
}
.sc-surface-light .sc-muted { color: var(--website-text-secondary); }

.sc-surface-white {
  background: radial-gradient(130% 95% at 20% -25%, color-mix(in srgb, var(--website-surface-white) 66%, var(--website-text-light)) 0%, transparent 60%), radial-gradient(90% 70% at 85% 8%, color-mix(in srgb, var(--website-surface-white) 84%, var(--website-accent-blueSoft)) 0%, transparent 55%), linear-gradient(176deg, color-mix(in srgb, var(--website-surface-white) 80%, var(--website-text-light)) 0%, var(--website-surface-white) 42%, color-mix(in srgb, var(--website-surface-white) 54%, var(--website-background-black)) 100%);
  color: var(--website-text-dark);
}
.sc-surface-white .sc-muted { color: var(--website-text-secondary); }

.sc-surface-dark {
  background: radial-gradient(130% 95% at 20% -25%, color-mix(in srgb, var(--website-background-midnight) 66%, var(--website-text-light)) 0%, transparent 60%), radial-gradient(90% 70% at 85% 8%, color-mix(in srgb, var(--website-background-midnight) 84%, var(--website-accent-blueSoft)) 0%, transparent 55%), linear-gradient(176deg, color-mix(in srgb, var(--website-background-midnight) 80%, var(--website-text-light)) 0%, var(--website-background-midnight) 42%, color-mix(in srgb, var(--website-background-midnight) 54%, var(--website-background-black)) 100%);
  color: var(--website-text-light);
}
.sc-surface-dark .sc-muted { color: var(--website-text-lightSecondary); }

.sc-surface-navy {
  background: var(--website-background-navy);
  color: var(--website-text-light);
}
.sc-surface-navy .sc-muted { color: var(--website-text-lightSecondary); }

.sc-surface-deep {
  background: radial-gradient(130% 95% at 20% -25%, color-mix(in srgb, var(--website-background-deep) 66%, var(--website-text-light)) 0%, transparent 60%), radial-gradient(90% 70% at 85% 8%, color-mix(in srgb, var(--website-background-deep) 84%, var(--website-accent-blueSoft)) 0%, transparent 55%), linear-gradient(176deg, color-mix(in srgb, var(--website-background-deep) 80%, var(--website-text-light)) 0%, var(--website-background-deep) 42%, color-mix(in srgb, var(--website-background-deep) 54%, var(--website-background-black)) 100%);
  color: var(--website-text-light);
}
.sc-surface-deep .sc-muted { color: var(--website-text-lightMuted); }

.sc-surface-black {
  background: radial-gradient(130% 95% at 20% -25%, color-mix(in srgb, var(--website-background-black) 66%, var(--website-text-light)) 0%, transparent 60%), radial-gradient(90% 70% at 85% 8%, color-mix(in srgb, var(--website-background-black) 84%, var(--website-accent-blueSoft)) 0%, transparent 55%), linear-gradient(176deg, color-mix(in srgb, var(--website-background-black) 80%, var(--website-text-light)) 0%, var(--website-background-black) 42%, color-mix(in srgb, var(--website-background-black) 54%, var(--website-background-black)) 100%);
  color: var(--website-text-light);
}
.sc-surface-black .sc-muted { color: var(--website-text-lightSecondary); }

/* ---------- GLOBAL AI INTELLIGENCE SECTION ---------- */
.sc-intelligence-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      72% 120% at 50% 45%,
      color-mix(in srgb, var(--website-background-navy) 82%, var(--website-accent-blueSoft)) 0%,
      transparent 72%
    ),
    var(--website-background-navy);
  color: var(--website-text-light);
  border-top: 1px solid color-mix(in srgb, var(--website-background-navy) 78%, var(--website-accent-blueSoft));
}

.sc-intelligence-inner {
  width: min(96%, 90rem);
  margin: 0 auto;
  padding: 4.25rem 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 23rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.75rem, 3vw, 3.75rem);
}

.sc-intelligence-copy {
  min-width: 0;
}

.sc-intelligence-copy-left { text-align: left; }
.sc-intelligence-copy-right { text-align: right; }

.sc-intelligence-title {
  margin: 0;
  font-size: clamp(1.75rem, 2.35vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--website-text-light);
}

.sc-intelligence-copy p {
  margin: 1rem 0 0;
  font-size: 1.025rem;
  line-height: 1.62;
  color: var(--website-text-lightSecondary);
}

.sc-intelligence-copy .sc-intelligence-emphasis,
.sc-intelligence-copy .sc-intelligence-closing {
  color: var(--website-text-light);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sc-intelligence-media-slot {
  display: block;
  width: min(100%, 22rem);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  justify-self: center;
  border-radius: 1.25rem;
}

@media (min-width: 820px) and (max-width: 1100px) {
  .sc-intelligence-inner {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem) minmax(0, 1fr);
    gap: 1.5rem;
  }

  .sc-intelligence-title { font-size: clamp(1.55rem, 2.4vw, 2rem); }
  .sc-intelligence-copy p { font-size: 0.96rem; }
}

@media (max-width: 819px) {
  .sc-intelligence-inner {
    width: min(100%, 38rem);
    padding: 3rem 1.25rem;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .sc-intelligence-copy-left,
  .sc-intelligence-copy-right {
    text-align: center;
  }

  .sc-intelligence-copy-left { grid-row: 1; }
  .sc-intelligence-media-slot { grid-row: 2; width: min(82vw, 21rem); }
  .sc-intelligence-copy-right { grid-row: 3; }


  .sc-intelligence-title {
    margin-inline: auto;
    max-width: 19ch;
    font-size: clamp(1.75rem, 7.5vw, 2.25rem);
  }

  .sc-intelligence-copy p {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.98rem;
    line-height: 1.55;
  }
}

/*
 * ---------- GLOBAL PRE-FOOTER CTA ----------
 *
 * Owner option C, 2026-09-27: compact, distinct from the footer, deep blue-black
 * surface with a restrained blue light, white headline, soft-light supporting
 * copy and the site's Signature Blue as the single conversion action.
 *
 * Desktop keeps the headline on one line. Mobile deliberately releases that
 * constraint and lets it wrap naturally, centered, without shrinking into
 * unreadability.
 */
.sc-prefooter-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      80% 150% at 50% -35%,
      color-mix(in srgb, var(--website-background-deep) 72%, var(--website-accent-blueSoft)) 0%,
      transparent 68%
    ),
    var(--website-background-deep);
  color: var(--website-text-light);
  border-top: 1px solid color-mix(in srgb, var(--website-background-deep) 72%, var(--website-accent-blueSoft));
  border-bottom: 1px solid color-mix(in srgb, var(--website-background-deep) 84%, var(--website-accent-blueSoft));
}

.sc-prefooter-cta-inner {
  width: min(92%, 78rem);
  margin: 0 auto;
  padding: 3.25rem 1.5rem 3.5rem;
  display: grid;
  justify-items: center;
  text-align: center;
}

.sc-prefooter-cta-title {
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--website-text-light);
}

.sc-prefooter-cta-copy {
  width: min(100%, 54rem);
  margin: 1rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--website-text-lightSecondary);
}

.sc-prefooter-cta-button {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.75rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--website-accent-blue) 70%, var(--website-accent-blueSoft));
  background: linear-gradient(180deg, color-mix(in srgb, var(--website-accent-blue) 80%, var(--website-text-light)) 0%, var(--website-accent-blue) 62%, color-mix(in srgb, var(--website-accent-blue) 82%, var(--website-background-black)) 100%);
  color: var(--website-text-light);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--website-background-black) 72%, transparent);
  transition: transform 160ms ease, filter 160ms ease;
}

.sc-prefooter-cta-button:hover,
.sc-prefooter-cta-button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

@media (min-width: 1280px) {
  .sc-prefooter-cta-title {
    white-space: nowrap;
    font-size: clamp(2.125rem, 3vw, 2.8rem);
  }
}

@media (max-width: 819px) {
  .sc-prefooter-cta-inner {
    width: min(100%, 34rem);
    padding: 2.5rem 1.25rem 2.75rem;
  }

  .sc-prefooter-cta-title {
    max-width: 20ch;
    font-size: clamp(1.85rem, 8.2vw, 2.35rem);
    line-height: 1.1;
  }

  .sc-prefooter-cta-copy {
    max-width: 32rem;
    margin-top: 0.875rem;
    font-size: 0.98rem;
    line-height: 1.5;
  }

  .sc-prefooter-cta-button {
    margin-top: 1.25rem;
    min-width: 10.5rem;
  }
}

/*
 * ---------- THE AFFILIATE BAND (DEC-OWNER-319 (g), OB-660) ----------
 *
 * « En grand », on every page, the last block before the footer. The same deep
 * surface family as the pre-footer CTA, its light coming from below so the two
 * never read as one repeated strip; one Signature Blue action, the footer's
 * « Partner program » destination.
 */
.sc-partner-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      70% 140% at 50% 135%,
      color-mix(in srgb, var(--website-background-deep) 70%, var(--website-accent-blueSoft)) 0%,
      transparent 70%
    ),
    var(--website-background-deep);
  color: var(--website-text-light);
  border-top: 1px solid color-mix(in srgb, var(--website-background-deep) 72%, var(--website-accent-blueSoft));
}

.sc-partner-band-inner {
  width: min(92%, 78rem);
  margin: 0 auto;
  padding: 3.25rem 1.5rem 3.5rem;
  display: grid;
  justify-items: center;
  text-align: center;
}

.sc-partner-band-title {
  margin: 0;
  font-size: clamp(1.85rem, 2.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--website-text-light);
  overflow-wrap: break-word;
}

.sc-partner-band-copy {
  width: min(100%, 48rem);
  margin: 1rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--website-text-lightSecondary);
}

.sc-partner-band-button {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.75rem;
  max-width: 100%;
  min-height: 3rem;
  box-sizing: border-box;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--website-accent-blue) 70%, var(--website-accent-blueSoft));
  background: linear-gradient(180deg, color-mix(in srgb, var(--website-accent-blue) 80%, var(--website-text-light)) 0%, var(--website-accent-blue) 62%, color-mix(in srgb, var(--website-accent-blue) 82%, var(--website-background-black)) 100%);
  color: var(--website-text-light);
  font-weight: 800;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  text-decoration: none;
  box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--website-background-black) 72%, transparent);
  transition: transform 160ms ease, filter 160ms ease;
}

.sc-partner-band-button:hover,
.sc-partner-band-button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

@media (max-width: 819px) {
  .sc-partner-band-inner {
    width: min(100%, 34rem);
    padding: 2.5rem 1.25rem 2.75rem;
  }

  .sc-partner-band-title {
    max-width: 20ch;
    font-size: clamp(1.7rem, 7.6vw, 2.2rem);
  }

  .sc-partner-band-copy {
    margin-top: 0.875rem;
    font-size: 0.98rem;
    line-height: 1.5;
  }

  .sc-partner-band-button {
    margin-top: 1.25rem;
    min-width: 10.5rem;
  }
}

/*
 * The home page's small affiliate link (DEC-OWNER-319 (g), suite 611): a discreet text link,
 * centred under the « Choose your business type » / « How it works » row, smaller than them —
 * never a third button. The stack takes the row's place; the row inside it stays as it is.
 */
.sc-hero-actions-stack {
  display: inline-grid;
  justify-items: center;
}
.sc-hero-actions-stack > .sc-hero-actions { justify-self: stretch; }
.sc-hero-partner {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  text-align: center;
}

.sc-hero-partner-link {
  color: var(--website-text-light);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--website-accent-blueSoft);
  text-underline-offset: 0.2em;
  overflow-wrap: break-word;
}

.sc-hero-partner-link:hover,
.sc-hero-partner-link:focus-visible {
  text-decoration-color: var(--website-text-light);
}


/*
 * ---------- THE « BECOME AN AFFILIATE » PAGE (DEMANDE_OWNER suite 640, OB-660) ----------
 *
 * Screen 1 of the approved-direction mockup, on the site's tokens: the How it works navy, the
 * Signature Blue action, the turquoise and cyan accents, the field ink of the site's forms.
 */
.sc-aff-page {
  background: var(--website-background-navy);
  color: var(--website-text-light);
}

.sc-aff-main { flex: 1; }

.sc-aff-wrap {
  width: min(70rem, 100%);
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

.sc-aff-hero {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0 2.5rem;
  background:
    radial-gradient(60% 80% at 85% 10%, color-mix(in srgb, var(--website-accent-turquoise) 18%, transparent) 0%, transparent 60%),
    radial-gradient(70% 90% at 10% -10%, color-mix(in srgb, var(--website-accent-blueSoft) 28%, transparent) 0%, transparent 60%),
    linear-gradient(176deg, var(--website-background-howItWorksNavy) 0%, var(--website-background-navy) 55%, var(--website-background-deep) 100%);
}

.sc-aff-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 2.5rem;
  align-items: start;
}

.sc-aff-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--website-accent-signalCyan);
}

.sc-aff-eyebrow::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--website-accent-turquoise);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--website-accent-turquoise) 22%, transparent);
}

.sc-aff-h1 {
  margin: 0.875rem 0 1rem;
  font-size: clamp(2.4rem, 6vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  overflow-wrap: break-word;
}

.sc-aff-glow {
  background: linear-gradient(92deg, var(--website-text-light) 0%, var(--website-text-paleBlue) 40%, var(--website-accent-signalCyan) 75%, var(--website-accent-turquoise) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sc-aff-lead {
  margin: 0;
  color: var(--website-text-lightSecondary);
  font-size: 1.08rem;
  line-height: 1.65;
}

.sc-aff-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}

.sc-aff-benefit {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--website-text-light) 16%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--website-text-light) 7%, transparent), color-mix(in srgb, var(--website-text-light) 2%, transparent));
  min-width: 0;
}

.sc-aff-benefit-ico {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--website-accent-blueSoft) 16%, transparent);
  color: var(--website-accent-signalCyan);
  margin-bottom: 0.625rem;
}

.sc-aff-benefit b {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  overflow-wrap: break-word;
}

.sc-aff-benefit span {
  display: block;
  font-size: 0.9rem;
  color: var(--website-text-lightSecondary);
  line-height: 1.45;
  overflow-wrap: break-word;
}

.sc-aff-rates {
  margin-top: 1.375rem;
  padding: 1.125rem;
  border-radius: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--website-accent-focusSky) 45%, transparent);
  background: color-mix(in srgb, var(--website-accent-blue) 8%, transparent);
}

.sc-aff-rates-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.sc-aff-rates-head b { font-size: 1.02rem; }
.sc-aff-rates-head span { font-size: 0.88rem; color: var(--website-text-skyBlue); }

.sc-aff-rate-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.875rem;
  align-items: center;
  padding: 0.625rem 0;
  border-top: 1px solid color-mix(in srgb, var(--website-text-light) 16%, transparent);
}

.sc-aff-rate-big {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  min-width: 4.2ch;
}

.sc-aff-rate-a { color: var(--website-accent-turquoise); }
.sc-aff-rate-b { color: var(--website-accent-signalCyan); }

.sc-aff-plans {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.sc-aff-plan {
  border-radius: 999px;
  padding: 0.25rem 0.6875rem;
  font-size: 0.84rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--website-text-light) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--website-text-light) 16%, transparent);
}

.sc-aff-countries {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.sc-aff-countries > p {
  margin: 0;
  color: var(--website-text-lightSecondary);
}

.sc-aff-x {
  border: 1px solid color-mix(in srgb, var(--website-text-light) 16%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--website-background-black) 14%, transparent);
  min-width: 0;
}

.sc-aff-x > summary,
.sc-aff-x > .sc-aff-x-summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 0.875rem 2.875rem 0.875rem 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.sc-aff-x > summary::-webkit-details-marker { display: none; }

.sc-aff-x > summary::after,
.sc-aff-x > .sc-aff-x-summary::after {
  content: "+";
  position: absolute;
  right: 1.125rem;
  top: 0.6875rem;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--website-text-skyBlue);
}

.sc-aff-x[open] > summary::after,
.sc-aff-x > .sc-aff-x-summary[aria-expanded="true"]::after { content: "−"; }

/* The same fold header as a real button (the agreement toggle): only the browser button look is reset. */
.sc-aff-x > .sc-aff-x-summary {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
}

.sc-aff-x-body {
  padding: 0 1rem 1rem;
  color: var(--website-text-lightSecondary);
  line-height: 1.62;
  overflow-wrap: break-word;
}

.sc-aff-x-body p { margin: 0 0 0.625rem; }

.sc-aff-ctry-grid {
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
  gap: 0.25rem 0.75rem;
  font-size: 0.9rem;
}

.sc-aff-earn-fold { margin-top: 1rem; }
.sc-aff-earn-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  margin: 0.25rem 0 0.75rem;
}
.sc-aff-earn-period {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--website-text-light) 22%, transparent);
  border-radius: 1.5rem;
  padding: 0.1875rem;
}
.sc-aff-earn-period button {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  min-height: 44px;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--website-text-lightSecondary);
  cursor: pointer;
}
.sc-aff-earn-period button.sc-aff-earn-on {
  background: color-mix(in srgb, var(--website-accent-turquoise) 22%, transparent);
  color: var(--website-text-light);
}
.sc-aff-earn-period button:focus-visible,
.sc-aff-earn-currency select:focus-visible { outline: 3px solid var(--website-accent-focusSky); outline-offset: 2px; }
.sc-aff-earn-currency { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
.sc-aff-earn-currency select {
  font: inherit;
  color: var(--website-text-dark);
  background: var(--website-surface-white);
  border: 1px solid var(--website-accent-slateBorder);
  border-radius: 8px;
  padding: 0 0.625rem;
  min-height: 44px;
}
.sc-aff-earn {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--website-text-light);
}
.sc-aff-earn-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sc-aff-earn th,
.sc-aff-earn td {
  padding: 0.5rem 0.3125rem;
  border-bottom: 1px solid color-mix(in srgb, var(--website-text-light) 14%, transparent);
  vertical-align: bottom;
}
.sc-aff-earn thead th {
  font-weight: 650;
  color: var(--website-text-skyBlue);
  text-align: right;
}
.sc-aff-earn thead th:first-child,
.sc-aff-earn tbody th { text-align: left; }
.sc-aff-earn tbody th { font-weight: 700; }
.sc-aff-earn td { text-align: right; white-space: nowrap; }
.sc-aff-earn .sc-aff-earn-com { color: var(--website-accent-turquoise); font-weight: 800; }
.sc-aff-earn-cur { display: none; }
.sc-aff-earn-hcur { display: block; }
.sc-aff-earn-note { font-size: 0.84rem; margin: 0.625rem 0 0; }
.sc-aff-earn-indicative { font-style: italic; }

@media (max-width: 640px) {
  .sc-aff-earn thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .sc-aff-earn,
  .sc-aff-earn tbody,
  .sc-aff-earn tr,
  .sc-aff-earn th { display: block; }
  .sc-aff-earn { font-size: 0.88rem; }
  .sc-aff-earn-cur { display: inline; }
  .sc-aff-earn-hcur { display: none; }
  .sc-aff-earn-period {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-radius: 0.875rem;
  }
  .sc-aff-earn-period button { border-radius: 0.625rem; padding: 0.375rem 0.5rem; line-height: 1.2; }
  .sc-aff-earn tr {
    border: 1px solid color-mix(in srgb, var(--website-text-light) 16%, transparent);
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.625rem;
  }
  .sc-aff-earn tbody th { border-bottom: 0; padding: 0.25rem 0; font-size: 0.98rem; }
  .sc-aff-earn td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.375rem 0;
  }
  .sc-aff-earn tr td:last-child { border-bottom: 0; }
  .sc-aff-earn td::before {
    content: attr(data-label);
    text-align: left;
    white-space: normal;
    font-weight: 500;
    color: var(--website-text-lightSecondary);
  }
}

.sc-aff-join {
  padding: 1.5rem;
  border-radius: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--website-text-light) 18%, transparent);
  background: linear-gradient(170deg, color-mix(in srgb, var(--website-text-light) 9%, transparent) 0%, color-mix(in srgb, var(--website-text-light) 3%, transparent) 100%);
  box-shadow: 0 30px 60px color-mix(in srgb, var(--website-background-black) 35%, transparent), inset 0 1px 0 color-mix(in srgb, var(--website-text-light) 12%, transparent);
  min-width: 0;
}

.sc-aff-join-title {
  margin: 0 0 0.25rem;
  font-size: 1.45rem;
  letter-spacing: -0.022em;
}

.sc-aff-join-sub {
  color: var(--website-text-lightSecondary);
  font-size: 0.93rem;
  margin: 0 0 1.125rem;
}

.sc-aff-field {
  display: block;
  margin: 0 0 0.875rem;
}

.sc-aff-field > span,
.sc-aff-fieldset > legend {
  display: block;
  font-size: 0.88rem;
  font-weight: 650;
  margin-bottom: 0.375rem;
  padding: 0;
}

.sc-aff-fieldset {
  border: 0;
  padding: 0;
  min-width: 0;
}

.sc-aff-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.875rem;
  padding: 0.6875rem 0.875rem;
  border-radius: 0.625rem;
  border: 1px solid var(--website-accent-slateBorder);
  background: var(--website-background-fieldInk);
  color: var(--website-text-light);
  font: inherit;
}

.sc-aff-input:focus-visible {
  outline: 2px solid var(--website-accent-focusSky);
  outline-offset: 2px;
  border-color: var(--website-accent-focusSky);
}

.sc-aff-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 0.75rem;
  background: var(--website-background-fieldInk);
  border: 1px solid var(--website-accent-slateBorder);
  margin-bottom: 0.625rem;
}

.sc-aff-seg label { position: relative; min-width: 0; }
.sc-aff-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }

.sc-aff-seg span {
  display: block;
  text-align: center;
  padding: 0.5rem 0.375rem;
  border-radius: 0.5625rem;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--website-text-lightSecondary);
  overflow-wrap: break-word;
}

.sc-aff-seg input:checked + span {
  background: color-mix(in srgb, var(--website-accent-blueSoft) 22%, transparent);
  color: var(--website-text-light);
  box-shadow: inset 0 0 0 1px var(--website-accent-blueSoft);
}

.sc-aff-seg input:focus-visible + span {
  outline: 2px solid var(--website-accent-focusSky);
  outline-offset: 2px;
}

.sc-aff-note {
  display: block;
  color: var(--website-text-silver);
  font-size: 0.82rem;
  line-height: 1.4;
}

.sc-aff-accept {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--website-text-light) 16%, transparent);
  background: color-mix(in srgb, var(--website-background-black) 18%, transparent);
  margin: 0.375rem 0 0.625rem;
}

.sc-aff-accept input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--website-accent-turquoise);
  flex: none;
}

.sc-aff-accept-text { flex: 1; min-width: 0; }

.sc-aff-accept label {
  display: block;
  font-weight: 650;
  font-size: 0.95rem;
}

.sc-aff-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  margin-top: 0.25rem;
  color: var(--website-text-skyBlue);
  text-decoration: underline;
  font: inherit;
  font-weight: 650;
  font-size: 0.92rem;
  cursor: pointer;
}

.sc-aff-terms {
  margin: 0 0 0.75rem;
  padding: 0.875rem;
  border: 1px solid color-mix(in srgb, var(--website-text-light) 16%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--website-background-black) 20%, transparent);
  color: var(--website-text-lightSecondary);
  font-size: 0.92rem;
}

.sc-aff-terms[hidden] { display: none; }
.sc-aff-terms-toggle { margin: 0.25rem 0 0.5rem; }

.sc-aff-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--website-accent-blue);
  background: linear-gradient(180deg, color-mix(in srgb, var(--website-accent-blue) 80%, var(--website-text-light)) 0%, var(--website-accent-blue) 62%, color-mix(in srgb, var(--website-accent-blue) 82%, var(--website-background-black)) 100%);
  color: var(--website-text-light);
  font: inherit;
  font-weight: 700;
  font-size: 1.06rem;
  cursor: pointer;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--website-accent-blue) 35%, transparent);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.sc-aff-btn:hover,
.sc-aff-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--website-accent-blue) 45%, transparent);
}

/* DEC-OWNER-350 (suite 725): the versions of a multi-language agreement as tabs above the text. */
.sc-aff-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.5rem 0 0.25rem; }
.sc-aff-tab {
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--website-accent-slateBorder);
  background: var(--website-background-fieldInk);
  color: var(--website-text-light);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
}
.sc-aff-tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--website-accent-blueSoft) 22%, transparent);
  box-shadow: inset 0 0 0 1px var(--website-accent-blueSoft);
}
.sc-aff-tab:focus-visible { outline: 2px solid var(--website-accent-focusSky); outline-offset: 2px; }
/* DEC-OWNER-349: the advertising countries, and their agreements for reading only. */
.sc-aff-adv, .sc-aff-reading { margin-top: 0.75rem; }
.sc-aff-adv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.25rem 0.75rem; }
.sc-aff-adv-item { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.sc-aff-adv-item input { width: 1.125rem; height: 1.125rem; accent-color: var(--website-accent-turquoise); flex: none; }
.sc-aff-accepting {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--website-accent-turquoise);
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--website-text-light);
}

/* Until the agreement is loaded, verified and accepted, the button cannot be pressed. */
.sc-aff-btn:disabled,
.sc-aff-btn:disabled:hover { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.sc-aff-accept input:disabled { cursor: not-allowed; }

.sc-aff-fine {
  font-size: 0.8rem;
  color: var(--website-text-silver);
  margin: 0.75rem 0 0;
  text-align: center;
}

/* The affiliate agreement reader (DEMANDE_OWNER suites 687-688): the Owner's legal text, laid out only. */
.sc-aff-local {
  display: block;
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--website-text-silver);
  margin-top: 0.125rem;
}

.sc-aff-btn .sc-aff-local { color: inherit; opacity: 0.85; }

.sc-aff-esign {
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--website-accent-turquoise) 35%, transparent);
  background: color-mix(in srgb, var(--website-accent-turquoise) 7%, transparent);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--website-text-lightSecondary);
}

.sc-aff-esign p { margin: 0 0 0.375rem; }
.sc-aff-esign p:last-child { margin-bottom: 0; }
.sc-aff-esign b { color: var(--website-text-light); }
.sc-aff-c14 { margin-top: 0.5rem; }

.sc-agr { container-type: inline-size; margin-top: 0.75rem; overflow-wrap: anywhere; }
.sc-agr-head { display: grid; gap: 0.5rem; margin-bottom: 0.75rem; }
.sc-agr-title { margin: 0; font-size: 1.05rem; line-height: 1.35; color: var(--website-text-light); }
.sc-agr-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; font-size: 0.84rem; }
.sc-agr-meta > div { min-width: 0; }
.sc-agr-meta dt { color: var(--website-text-silver); font-weight: 650; }
.sc-agr-meta dd { margin: 0; color: var(--website-text-light); }
.sc-agr-hash > summary { cursor: pointer; font-family: ui-monospace, monospace; min-height: 1.5rem; }
.sc-agr-hash code { display: block; font-size: 0.78rem; word-break: break-all; }

.sc-agr-download,
.sc-agr-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--website-accent-slateBorder);
  background: var(--website-background-fieldInk);
  color: var(--website-text-light);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.sc-agr-download { justify-self: start; }
.sc-agr-views { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.sc-agr-view[aria-pressed="true"] {
  background: color-mix(in srgb, var(--website-accent-blueSoft) 22%, transparent);
  box-shadow: inset 0 0 0 1px var(--website-accent-blueSoft);
}
.sc-agr-view-side { display: none; }
.sc-agr-download:focus-visible,
.sc-agr-view:focus-visible { outline: 2px solid var(--website-accent-focusSky); outline-offset: 2px; }
/* Which version prevails: a visible callout (visual audit 2026-10-16, P3-8). */
.sc-agr-prevails {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--website-text-light);
  margin: 0.5rem 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--website-accent-turquoise);
  border-radius: 0 0.5rem 0.5rem 0;
  background: color-mix(in srgb, var(--website-accent-turquoise) 9%, transparent);
}

.sc-agr-key {
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px dashed var(--website-accent-slateBorder);
  margin-bottom: 0.75rem;
  font-size: 0.86rem;
}
.sc-agr-key-summary { margin: 0.125rem 0 0.375rem; font-style: italic; color: var(--website-text-silver); }
.sc-agr-key ul { margin: 0; padding-left: 1.125rem; }
.sc-agr-key li { margin: 0.25rem 0; }
.sc-agr a { color: var(--website-text-skyBlue); }

/* The legal text: readable size, its own scroll box (visual audit 2026-10-16, P2-4, P2-7). */
.sc-agr-text {
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--website-text-lightSecondary);
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem 0.75rem 0.25rem 0.125rem;
  border-top: 1px solid color-mix(in srgb, var(--website-text-light) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--website-text-light) 14%, transparent);
}
.sc-agr-text:focus-visible { outline: 2px solid var(--website-accent-focusSky); outline-offset: 2px; }
.sc-agr-text p.sc-agr-col { max-width: 70ch; }
.sc-agr-url { overflow-wrap: anywhere; word-break: break-word; }
.sc-agr-toc { margin: 0.75rem 0; }
.sc-agr-toc ol { margin: 0.375rem 0; padding-left: 1.5rem; }
.sc-agr-toc li { margin: 0.25rem 0; }
.sc-agr-all { display: flex; gap: 1rem; }
.sc-agr-clause {
  border-top: 1px solid color-mix(in srgb, var(--website-text-light) 14%, transparent);
  padding: 0.25rem 0;
}
.sc-agr-clause > summary {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  min-height: 2.75rem;
  padding: 0.625rem 0;
  cursor: pointer;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--website-text-light);
  list-style: none;
}
.sc-agr-clause > summary::-webkit-details-marker { display: none; }
/* The open / close marker of a clause (visual audit 2026-10-16, P2-6). */
.sc-agr-clause > summary::after {
  content: "";
  flex: none;
  align-self: center;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 2px solid var(--website-text-silver);
  border-bottom: 2px solid var(--website-text-silver);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.sc-agr-clause[open] > summary::after { transform: rotate(-135deg); }
.sc-agr-n { flex: none; color: var(--website-accent-turquoise); }
.sc-agr-back { display: inline-block; margin: 0.25rem 0 0.5rem; font-size: 0.8rem; }
.sc-agr-refs ul { padding-left: 1.125rem; margin: 0.375rem 0; }
.sc-agr-note { font-size: 0.8rem; color: var(--website-text-silver); margin: 0.625rem 0 0; }

.sc-agr-pair { display: block; }
span.sc-agr-pair { display: inline; }
.sc-agr-col { display: block; margin: 0 0 0.625rem; }
span.sc-agr-col { margin: 0; }
.sc-agr[data-view="local"] .sc-agr-en,
.sc-agr[data-view="en"] .sc-agr-local { display: none; }
.sc-agr[data-view="side"] span.sc-agr-col + span.sc-agr-col::before { content: " / "; }
/* Both languages shown: each paragraph carries its language code and colour (visual audit 2026-10-16, P2-5). */
.sc-agr[data-view="side"] p.sc-agr-col { padding-left: 0.625rem; border-left: 3px solid var(--website-accent-slateBorder); }
.sc-agr[data-view="side"] p.sc-agr-local { border-left-color: var(--website-accent-turquoise); }
.sc-agr[data-view="side"] p.sc-agr-en { border-left-color: var(--website-accent-blueSoft); }
.sc-agr[data-view="side"] p.sc-agr-col::before {
  content: attr(lang);
  /* A visual badge only: its alternative text is empty, so screen readers do not read the code. */
  content: attr(lang) / "";
  display: inline-block;
  margin-right: 0.375rem;
  padding: 0 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.1em;
  color: var(--website-text-light);
  background: color-mix(in srgb, var(--website-text-light) 14%, transparent);
}

/* « Side by side » follows the reader's own width, never the viewport's (visual audit 2026-10-16, P1-1). */
@container (min-width: 36rem) {
  .sc-agr-view-side { display: inline-flex; }
}

@container (min-width: 36rem) {
  .sc-agr[data-view="side"] .sc-agr-text > .sc-agr-pair,
  .sc-agr[data-view="side"] .sc-agr-clause > .sc-agr-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
  }
}

.sc-aff-more { padding-top: 2.75rem; padding-bottom: 3.5rem; }

.sc-aff-more h2 {
  margin: 0 0 0.375rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.022em;
}

.sc-aff-more-lead { font-size: 0.98rem; }

.sc-aff-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin-top: 1.125rem;
  align-items: start;
}

@media (max-width: 980px) {
  .sc-aff-hero-grid { grid-template-columns: 1fr; }
}
/* While the agreement is read, the form spans the hero (one column) so the reader can show both languages side by side on a PC. */
.sc-aff-hero-grid:has(> .sc-aff-join[data-reading]) { grid-template-columns: 1fr; }

@media (max-width: 760px) {
  .sc-aff-benefits,
  .sc-aff-more-grid { grid-template-columns: 1fr; }
  .sc-aff-hero { padding-top: 2.25rem; }
  .sc-aff-join { padding: 1.125rem; }
}

/* ---------- Header and footer: pearlescent deep black ---------- */

.sc-chrome {
  background: radial-gradient(150% 200% at 6% -60%, color-mix(in srgb, var(--website-background-black) 76%, var(--website-accent-blueSoft)) 0%, transparent 52%), linear-gradient(104deg, var(--website-background-black) 0%, color-mix(in srgb, var(--website-background-black) 91%, var(--website-accent-blueSoft)) 28%, color-mix(in srgb, var(--website-background-black) 79%, var(--website-accent-blueSoft)) 47%, color-mix(in srgb, var(--website-background-black) 93%, var(--website-accent-blueSoft)) 64%, var(--website-background-black) 100%);
  color: var(--website-text-light);
}
.sc-chrome-top { position: relative; z-index: 10; border-bottom: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft)); }
.sc-chrome-bottom { border-top: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft)); }
/*
 * A footer button label is never cut (DEC-OWNER-243): the row wraps between
 * buttons first; only a label wider than the whole row (never seen at 360 px
 * in the 30 languages, kept for any device font) wraps inside its own button.
 * The row's own buttons only: the opened legal list keeps its look.
 */
.sc-chrome-bottom .sc-nav > .sc-btn,
.sc-chrome-bottom .sc-nav > .sc-menu,
.sc-chrome-bottom .sc-nav > .sc-menu > summary { max-width: 100%; }
/*
 * « Choose your business type » in the footer (DEC-OWNER-244) is a <button>:
 * it takes the footer links' font, line height and pointer, so the seven
 * controls look the same and sit on the same line.
 */
.sc-chrome-bottom .sc-nav > button.sc-btn { font-family: inherit; line-height: inherit; cursor: pointer; }
.sc-chrome-bottom .sc-nav > .sc-btn,
.sc-chrome-bottom .sc-nav > .sc-menu > summary { white-space: normal; text-align: center; }
.sc-copyright-line { display: block; white-space: nowrap; }

.sc-footer-banner-content {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  line-height: 1.2;
}
.sc-footer-banner-content .sc-banner-slot {
  display: block;
  width: 100%;
  max-width: 100%;
}
.sc-footer-banner-copy {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.18rem;
  padding: 0.55rem 1rem 0.45rem;
  text-align: center !important;
  color: var(--website-text-light);
  text-shadow: 0 1px 0 var(--website-background-black), 0 0 0.75rem rgb(0 0 0 / 0.72);
}
.sc-footer-banner-copy strong {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center !important;
  font-size: clamp(0.82rem, 1.2vw, 1.05rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--website-text-steelLight);
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.28), 0 1px 0.7rem rgb(0 0 0 / 0.72);
}
.sc-footer-banner-copy span {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center !important;
  font-size: clamp(0.62rem, 0.9vw, 0.78rem);
  line-height: 1.2;
  color: var(--website-text-lightSecondary);
}

/*
 * THE FOOTER: BANNER TRULY CENTERED.
 *
 * The Owner, 2026-09-23: « footer, photo/bannière : doit être CENTRÉE, pas
 * alignée à gauche comme actuellement. »
 *
 * In a flex row, the banner sat wherever space remained: it
 * fell 60 px left of center, because the copyright and the navigation
 * do not have the same width. A three-column grid, whose middle
 * column sizes itself on its content, puts the banner at the GEOMETRIC center
 * of the footer, whatever the widths on either side.
 */
/*
 * THE LAYOUT ON A LARGE SCREEN — header AND footer.
 *
 * The Owner, 2026-09-23: « dans le header, placer les boutons plus a droite
 * pour pouvoir centrer SolaroCall et laisser plus de place a gauche pour la
 * banniere. Dans le footer, placer les boutons plus a droite, et le 2026 avec
 * son texte plus a gauche et plus petit egalement, pour laisser plus de place
 * pour le banner du footer. »
 *
 * A three-column grid, and no longer a flex row. In flex, the name
 * SolaroCall sat wherever space remained: it was not centered, it
 * floated. With 1fr in the center framed by two equal columns, it occupies the
 * EXACT center, whatever the widths on either side.
 *
 * Everything is enclosed in this width query: the mobile version, which the
 * Owner approved and locked, is not touched.
 */
@media (min-width: 820px) {
  /*
   * THE HEADER stays a flex row, and SolaroCall is centered by POSITION.
   *
   * First attempt: a three-column grid, SolaroCall in the middle. Measured,
   * it fell 117 px from the center and the buttons stopped 213 px
   * before the edge. The cause: since the language selector left the
   * row for mobile, the header has FOUR children — the fourth overflowed
   * the three-column grid and skewed everything.
   *
   * Taking the name out of the flow centers it on the BAR, whatever the number of
   * neighbors and whatever their widths. The banner then takes all
   * the space on the left, and the buttons stick to the right.
   */
  .sc-chrome-top .sc-bar { position: relative; }
  /*
   * The banner area DOES NOT STRETCH: stretched, it absorbed all the free
   * space and the navigation stuck right after it, in the middle of the bar —
   * where it overlapped SolaroCall, observed on screen. It takes its width,
   * and the rest of the space goes back to the navigation to push it to the right.
   */
  .sc-chrome-top .sc-banner-zone { flex: 0 0 auto; }
  /*
   * The banner carries an EXPLICIT width. With width: 100 % in an area
   * that does not stretch, it shrank to its text — 52 px measured, instead
   * of the intended 416. The Owner asks for « plus de place a gauche pour la
   * banniere »: that space must be reserved, not merely allowed.
   */
  /*
   * FLUID WIDTH — so that the TABLET follows the same principle as the PC.
   *
   * The Owner, 2026-09-23: « la version tablette devra se baser sur le meme
   * principe que celle du PC. »
   *
   * A width frozen at 26rem does not fit on a 768 px tablet: with the
   * name and the buttons, 980 px would be needed. The banner therefore takes the
   * smaller of the two values — it keeps its 416 px on a large screen and
   * shrinks by itself on tablet, without a second set of rules existing.
   */
  /*
 * THE BANNER IS FRAMED BY ITS HEIGHT, AND NOT BY ITS WIDTH.
 *
 * The Owner approved a 144 px header AND a 416 px banner. The two
 * held together as long as the slot was a 4:1 rectangle. His actual
 * files are 3:1 — at 416 px wide, the banner is 139 px tall instead
 * of 104, and the header goes to 179 px.
 *
 * The two approvals are therefore incompatible, and one must choose which one
 * gives way. It is the HEIGHT that is preserved: it is the one he quantified
 * himself (« +10 % pour le header PC »), measured, then locked. The width
 * was not a number he gave but the consequence of an empty
 * slot.
 *
 * Cropping the image to bring it back to 4:1 was ruled out: it carries a
 * whole composition — logo, tagline, row of icons, devices — of which a
 * quarter would disappear.
 *
 * HIS DECISION, 2026-09-23: « OPTION B ». The WIDTH is preserved, and
 * the header grows to carry it — 179 px instead of 144. He saw both
 * renderings side by side before deciding.
 *
 * The banner is therefore framed by its width, as before the wiring, and the
 * bar height follows from it. Both ranges of the visual contract followed:
 * it is not a loosening, it is his recorded decision.
 */
.sc-chrome-top .sc-banner-slot { max-width: 100%; margin-right: auto; }
  .sc-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  /*
   * The navigation sticks to the right, and tightens just enough not to
   * overlap the centered name. Measured: at 1440 px it occupied 567 px and
   * overlapped SolaroCall by 19 px. The tightening applies to the sides and
   * the gap, never to the text size.
   */
  .sc-chrome-top .sc-nav { margin-left: auto; gap: 0.375rem; }
  .sc-chrome-top .sc-nav .sc-btn { padding-left: 0.625rem; padding-right: 0.625rem; }

  /* THE FOOTER, for its part, has only three children: the grid suits it. */
  /*
   * The side columns are minmax(0, 1fr), not 1fr: a bare 1fr never
   * shrinks below its content, so a wider button row (the Home button,
   * 2026-10-11, or a longer translation) widened its column, pushed the banner
   * off center (45 px at 1440) and the row past the page edge, where .sc-page
   * clipped it. Both columns now stay equal — the banner stays at the exact
   * center — and the row wraps inside its own column instead. The column gap
   * gives 8 px back to each side; nothing touches, so nothing moves.
   */
  .sc-chrome-bottom .sc-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
  }

  /*
   * Both copyright lines keep their own row. The first must not spill into
   * the banner column; the group sits slightly further left.
   */
  .sc-chrome-bottom .sc-copyright {
    justify-self: start;
    font-size: 0.75rem;
    line-height: 1.35;
    width: max-content;
    max-width: none;
    transform: translateX(-0.5rem);
  }
  /*
   * The footer banner gains the space given back by the copyright while
   * remaining at the geometric center of the three-column grid.
   */
  /* The Owner's new 3:1 artwork uses more of the central space on PC. */
  .sc-chrome-bottom .sc-footer-banner-content { width: 27rem; max-width: 100%; }
  .sc-chrome-bottom .sc-footer-banner-content .sc-banner-slot { width: 100%; max-width: 100%; }
  /*
   * The footer buttons fit on ONE row in English. Measured: at
   * 1440 px, Legal wrapped to the next line — its column measured about 400 px for
   * 430 of content. Same tightening as in the header, on the sides and
   * the gap, never on the text.
   *
   * 2026-10-11 (suite 345, DEC-OWNER-243): five buttons with Home. In English
   * they need 405 px at 0.625rem sides for a 368 px column; at 0.375rem sides
   * (the tablet header's value) and a 0.25rem gap, 357 px — one row, banner
   * centered. A longer translation (fr, ka, th...) can never fit one row there:
   * the row WRAPS inside its column, right-aligned, instead of being cut by
   * the page edge. No label is ever cut, the 0.9375rem text never shrinks.
   */
  .sc-chrome-bottom .sc-nav {
    justify-self: end;
    margin-left: 0;
    transform: translateX(0.5rem);
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
    gap: 0.375rem 0.25rem;
  }
  .sc-chrome-bottom .sc-nav .sc-btn { padding-left: 0.625rem; padding-right: 0.625rem; }
  /* The row's own buttons only: the opened legal list keeps its 0.625rem. */
  .sc-chrome-bottom .sc-nav > .sc-btn,
  .sc-chrome-bottom .sc-nav > .sc-menu > summary { padding-left: 0.375rem; padding-right: 0.375rem; }
}

/*
 * PC HEADER — Owner geometry, 2026-09-26.
 *
 * PC only. Tablet and mobile stay unchanged.
 * Banner: enlarged and shifted left.
 * SolaroCall: exact viewport center and +20% font size.
 * Menu + language selector: centered as one group in the right-hand half
 * between SolaroCall and the right viewport edge.
 */
@media (min-width: 1280px) {
  .sc-chrome-top .sc-banner-slot {
    width: 35.75rem;
    transform: translateX(-4rem);
  }

  .sc-chrome-top .sc-brand {
    font-size: 1.425rem;
  }

  .sc-chrome-top .sc-header-actions {
    position: absolute;
    left: calc(75% + 2.7rem);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
  }

  .sc-chrome-top .sc-header-actions .sc-nav {
    margin-left: 0;
    flex-wrap: nowrap;
  }

  .sc-chrome-top .sc-header-actions .sc-lang {
    flex: 0 0 auto;
  }

  /*
   * A LONGER TRANSLATION NEVER LEAVES THE SCREEN NOR TOUCHES SolaroCall
   * (suite 345, DEC-OWNER-243). The bar is 78rem wide at every PC width, so
   * the centred group above ends at the same place in every language:
   * measured at 1280 px, fi, pl, sk (601-634 px) ran 16-32 px past the
   * screen edge and over the name; at 1440 they still overlapped it.
   *
   * The group keeps its centre wherever it fits — English and every language
   * that fits do not move by a pixel. Otherwise it slides just enough to stay
   * between 0.75rem right of SolaroCall (its half-width, 3.625rem) and
   * 0.5rem left of the screen edge; and only when even that span is too
   * narrow (about 1280-1360 px, the longer languages) the button row wraps
   * inside it, right-aligned, within the bar's own height. The 0.9375rem text,
   * every button and every label stay whole.
   *
   * Units: the header is the size container, so 100cqw is the screen's inner
   * width (without the scrollbar) and min(100cqw, 78rem) the bar's width; the
   * percentages of translateX are the group's own width. A browser without
   * container units drops these declarations and keeps the ones above.
   */
  .sc-chrome-top { container-type: inline-size; }
  .sc-chrome-top .sc-header-actions {
    width: max-content;
    max-width: calc(50cqw - 4.875rem);
    transform: translateX(clamp(calc(1.675rem - min(100cqw, 78rem) / 4), -50%, calc(50cqw - min(100cqw, 78rem) / 4 - 3.2rem - 100%)));
  }
  .sc-chrome-top .sc-header-actions .sc-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
  }

  /*
   * ARABIC (dir="rtl") — THE SAME PC HEADER, MIRRORED (Owner, live, 2026-10-11).
   *
   * Since <html dir> follows the served language (2026-10-09), the flex row
   * mirrors by itself — the banner goes to the right — but the geometry
   * above is PHYSICAL: the banner's 4rem shift still pointed left (towards
   * the centre) and the button group + selector stayed anchored at 75 % from
   * the LEFT, i.e. drawn on top of the banner. Each physical value gets its
   * mirror image here: the banner shifts 4rem to the right, the group is
   * anchored at 75 % + 2.7rem from the RIGHT and slides by the opposite of
   * the LTR offset (the same clamp, so the same guards against the screen
   * edge and SolaroCall). The row's flex-end mirrors on its own.
   * Every LTR language is untouched: these rules match dir="rtl" only.
   */
  [dir='rtl'] .sc-chrome-top .sc-banner-slot { transform: translateX(4rem); }
  [dir='rtl'] .sc-chrome-top .sc-header-actions {
    left: auto;
    right: calc(75% + 2.7rem);
    transform: translateX(50%);
    transform: translateX(calc(-1 * clamp(calc(1.675rem - min(100cqw, 78rem) / 4), -50%, calc(50cqw - min(100cqw, 78rem) / 4 - 3.2rem - 100%))));
  }
}


/*
 * THE TABLET — same principle as the PC, with what its width allows.
 *
 * The Owner, 2026-09-23: « la version tablette devra se baser sur le meme
 * principe que celle du PC. »
 *
 * The principle is held: banner on the left, SolaroCall at the exact center, buttons
 * on the right. But between 768 and 1099 px, the five buttons PLUS the language
 * selector overlap the name — measured, by 15 to 93 px depending on the width.
 *
 * The solution is the one that already worked on mobile: the language selector
 * leaves the row and moves up to the top right. The buttons regain the
 * space to stay on the right without touching the name, and the selector stays « a
 * droite » as everywhere else.
 */
@media (min-width: 820px) and (max-width: 1279px) {
  .sc-chrome-top .sc-bar { position: relative; }
  .sc-chrome-top .sc-lang {
    position: absolute;
    top: 0.75rem;
    right: 0.875rem;
    z-index: 5;
  }
  /*
   * Arabic (dir="rtl"): the row mirrors and the banner sits on the right, so
   * the selector takes the mirrored top-LEFT corner — at the physical right
   * it was drawn over the banner (820-1279 px, 2026-10-11). The button row
   * likewise goes to the LEFT end, the mirror of LTR's margin-left: auto —
   * pushed towards the banner it ran over the centred SolaroCall (1024,
   * 1180 px). LTR untouched: these rules match dir="rtl" only.
   */
  [dir='rtl'] .sc-chrome-top .sc-lang { right: auto; left: 0.875rem; }
  [dir='rtl'] .sc-chrome-top .sc-nav { margin-left: 0; margin-right: auto; }
  .sc-chrome-top .sc-nav { align-self: end; }
  .sc-chrome-top .sc-nav .sc-btn {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    font-size: 0.875rem;
  }

  /*
   * The banners shrink to the screen width, HERE ONLY. By making
   * them fluid everywhere, they fell to 346 px on a 1440 screen —
   * whereas the Owner approved 416. Fluidity belongs to the tablet.
   */
  /*
   * THE TABLET KEEPS ITS OWN BAR HEIGHT — 114 px, approved.
   *
   * Framing the banner by its height, on a large screen, made the
   * tablet inherit the PC's 144 px. The Owner approved 114 px on seeing it, and
   * said so: « non pas grave tu peux laisser tablette comme ca. » Aligning his
   * tablet with the PC would undo his decision, not correct it.
   *
   * The banner is therefore lower there — 74 px, i.e. 222 px wide at 3:1 —
   * and the bar gets back exactly the 114 px measured at the time of its
   * approval.
   */
  .sc-chrome-top .sc-banner-slot { height: 4.625rem; width: auto; }
  .sc-chrome-bottom .sc-banner-slot { height: 4.25rem; width: auto; }

  /*
   * THE TABLET FOOTER — the button row goes UNDER when it cannot sit beside.
   *
   * Copyright (215 px) + the 27rem banner (432 px) leave less than 100 px for
   * the buttons at 820 px, about 300 at 1024: in three columns they were
   * pushed past the screen edge and cut by .sc-page — in every language,
   * Home or not. As a wrapping flex row, the buttons stay on the right of the
   * banner when they fit there (1180 px in English), and otherwise take a
   * second line of their own, right-aligned, wrapping again if they must.
   */
  .sc-chrome-bottom .sc-bar { display: flex; flex-wrap: wrap; row-gap: 0.75rem; }
  .sc-chrome-bottom .sc-footer-banner-content { flex: none; margin-left: auto; margin-right: auto; }
  .sc-chrome-bottom .sc-nav { margin-left: auto; }
  /*
   * The 27rem footer banner is the PC's (« The Owner's new 3:1 artwork uses
   * more of the central space on PC »). Since the copy wrapper of 2026-10-01
   * it also reached the tablet: a 432 x 68 crop of the 3:1 artwork, and the
   * buttons pushed to a second line up to 1179 px (161 px instead of 114).
   * The tablet gets its own banner back — 4.25rem high, its width following
   * the 3:1 artwork (204 px): one row again from about 900 px in English.
   */
  .sc-chrome-bottom .sc-footer-banner-content { width: auto; }
  .sc-chrome-bottom .sc-footer-banner-content .sc-banner-slot { width: auto; }
}

/*
 * THE NARROW TABLET — 820 to 1023 px, the iPad in portrait.
 *
 * At this width, the buttons still overlapped SolaroCall by 26 px. The
 * space is short by exactly 26 px: the gap between the buttons and their
 * side padding give it back. The TEXT does not move.
 */
@media (min-width: 820px) and (max-width: 1023px) {
  /*
   * ON TABLET, SOLAROCALL IS NO LONGER CENTERED TO THE PIXEL.
   *
   * The Owner, 2026-09-23: « pas grave pour la tablette, tu peux laisser
   * SolaroCall plus a gauche pour garder de la place pour nos boutons alors. »
   *
   * His permission lifts a constraint that was costly: centered to the pixel on the
   * bar, the name forced tightening the buttons to the point of unreadability. Returned
   * to the flow, it sits after the banner and leaves all the remaining space to the
   * buttons.
   *
   * The requested PRINCIPLE stays held — banner on the left, name in the middle, buttons
   * on the right. Only the precision of the centering gives way, and it is he who allows it.
   */
  .sc-brand { position: static; transform: none; }

}
.sc-bar {
  max-width: 78rem;
  /*
   * +10 % on the height on 2026-09-23 — the Owner's quantified instruction:
   * « pour header PC et footer PC ajouter 10 % hauteur ». 6.5rem → 7.15rem.
   * The reason he gives is the criterion: « trop étroit, impossible d'y
   * mettre une bannière correctement ».
   */
  min-height: 7.15rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem 1.25rem;
}

/*
 * The banner occupies the left part — « disons la moitié, 40 %, 50 % en
 * allant de la gauche vers la droite » (Owner). « flex » rather than a frozen
 * width: the area breathes with the screen instead of breaking.
 */
.sc-banner-zone { flex: 0 1 34%; display: flex; align-items: center; }
.sc-brand {
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--website-accent-aluminumLight);
  -webkit-text-fill-color: var(--website-accent-aluminumLight);
  text-shadow: none;
  white-space: nowrap;
}
.sc-header-actions { display: contents; }
.sc-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* The banner is HORIZONTAL — format adjustable by the Owner. */
/*
 * THE BANNER SIZE IS CARRIED BY A SINGLE CLASS.
 *
 * The placeholder slot and the Owner's image each had their own:
 * 26 rem for one on a large screen, 14 rem hard-coded for the other. On the day of
 * the wiring, the banner approved at 416 px fell to 224 px, on the three
 * PC widths — and it was the visual contract that said so, not the eye.
 *
 * The slot class therefore carries the GEOMETRY, for both. What
 * distinguishes them — the dotted frame of the empty state, the cropping of the image — lives
 * in a separate class. Any width rule written once then applies
 * to the placeholder state as well as to the wired state.
 */
.sc-banner-slot {
  width: 100%;
  max-width: 14rem;
  aspect-ratio: var(--media-banner);
  border-radius: 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sc-banner-vide {
  border: 1px dashed color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  color: var(--website-text-lightMuted);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}
/* The image fills its slot without distortion: the framing gives way, never
 * the proportions of the Owner's visual. */
.sc-banner-img { object-fit: cover; }
/* The new 16:9 header art contains text and devices throughout its frame.
 * Fit it inside the existing banner slot; keep the slot's approved geometry. */
.sc-chrome-top .sc-banner-img { object-fit: contain; object-position: left center; }
@media (max-width: 819px) {
  .sc-chrome-top .sc-banner-img { object-position: center; }
}

/*
 * THE width/height ATTRIBUTES RESERVE A RATIO — NOT A HEIGHT.
 *
 * That is the nuance that broke the approved layout on 2026-09-24, and the
 * vault saw it immediately: header at 373px instead of 144, footer
 * at 373 instead of 136, mobile header at 526 instead of 279.
 *
 * THE MECHANISM, because it will be useful again. Writing width="1000" height="333" on
 * an <img> tag does not tell the browser « voici mes proportions »: the
 * browser stylesheet translates them into REAL declarations
 * width: 1000px; height: 333px. They then beat the aspect-ratio chosen
 * by the site stylesheet, and the banner came out 333px tall instead of
 * 139.
 *
 * height: auto neutralizes the second one: the width comes from the site,
 * the site aspect-ratio decides the height, and the attributes only serve
 * what they were put there for — reserving the space BEFORE the
 * file arrives, so that nothing jumps.
 *
 * The two places where the height is CHOSEN — the large-screen banners,
 * height: 4.625rem and 4.25rem — keep winning: their selector is
 * more specific. That is intended: those are the heights the Owner
 * approved to the pixel.
 */
.sc-banner-img,
.sc-media-img,
.sc-card-photo,
.sc-brandband-img { height: auto; }

/*
 * ---------- THE PRICING CARDS ----------
 *
 * The Owner, 2026-09-23: « fais-moi quelque chose de moderne […] choisis une
 * couleur style turquoise et texte noir, ou donne-moi une idee adaptee au fond
 * d'ecran et style du website. »
 *
 * WHAT TURQUOISE IS ALLOWED TO DO, AND WHAT IT IS NOT. §120.61 L43326
 * forbids making it a universal action color; it stays the accent of
 * PANELS and BORDERS. It therefore frames the cards and signals the highlighted
 * plan, and the button keeps the signature blue.
 *
 * AND BLACK TEXT, WHERE IT CAN BE READ. On the site's dark background it would be
 * unreadable. It is carried by the recommended card alone, whose panel is
 * light: the contrast designates the plan to choose without adding a second
 * action color, which the ordinary view rule refuses.
 */
.sc-pricing { display: grid; gap: 1.5rem; justify-items: center; }

/* The selector: two states visible at once, not a silent switch. */
.sc-currency-selector { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 16px; color: var(--sc-text, var(--website-text-light)); }
.sc-currency-selector select { font: inherit; color: var(--website-text-dark); background: var(--website-surface-white); border: 1px solid var(--website-accent-slateBorder); border-radius: 8px; padding: 8px 12px; min-height: 44px; }
.sc-currency-selector select:focus-visible { outline: 3px solid var(--website-accent-blue); outline-offset: 3px; }
.sc-billing {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3125rem;
  border-radius: 999px;
  border: 1px solid var(--website-accent-turquoise);
  background: var(--website-background-black);
}
.sc-billing-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 999px;
  padding: 0.5rem 1.125rem;
  background: none;
  color: var(--website-text-lightMuted);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.sc-billing-on {
  background: var(--website-accent-turquoise);
  color: var(--website-background-black);
}
.sc-billing-badge {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  padding: 0.125rem 0.4375rem;
  border-radius: 999px;
  background: var(--website-background-black);
  color: var(--website-accent-turquoise);
}
.sc-billing-on .sc-billing-badge {
  background: var(--website-background-black);
  color: var(--website-accent-turquoise);
}
.sc-pricing-note { margin: 0; color: var(--website-text-lightMuted); font-size: 0.9375rem; }

.sc-plans {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 1rem;
  width: 100%;
}
.sc-plan {
  position: relative;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1.75rem 1.25rem 1.5rem;
  border-radius: 1.125rem;
  border: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  background: radial-gradient(150% 200% at 6% -60%, color-mix(in srgb, var(--website-background-black) 76%, var(--website-accent-blueSoft)) 0%, transparent 52%), linear-gradient(104deg, var(--website-background-black) 0%, color-mix(in srgb, var(--website-background-black) 91%, var(--website-accent-blueSoft)) 28%, color-mix(in srgb, var(--website-background-black) 79%, var(--website-accent-blueSoft)) 47%, color-mix(in srgb, var(--website-background-black) 93%, var(--website-accent-blueSoft)) 64%, var(--website-background-black) 100%);
}
/* THE HIGHLIGHTED PLAN: light panel, black text, turquoise edging. */
.sc-plan-top {
  background: var(--website-surface-white);
  border-color: var(--website-accent-turquoise);
  box-shadow: 0 0 0 1px var(--website-accent-turquoise);
}
.sc-plan-top .sc-plan-name,
.sc-plan-top .sc-plan-amount,
.sc-plan-top .sc-plan-quotas li { color: var(--website-background-black); }
.sc-plan-top .sc-plan-unit,
.sc-plan-top .sc-plan-sub { color: var(--website-background-midnight); }

@media (min-width: 1280px) {
  .sc-plans {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .sc-plan {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Five cards on one row (Starter, DEC-OWNER-120): « Choose Professional »
   * never wrapped and measured 241 px in a 203 px card at 1280 px — the
   * card overflowed. Slimmer side padding keeps every action on one line in
   * English; a longer translation wraps instead of breaking out of its card.
   * Scoped to the card so it outranks the later .sc-btn and .sc-btn-primary rules. */
  .sc-plan .sc-plan-cta {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    font-size: 0.9375rem;
    white-space: normal;
  }
}

.sc-plan-tag {
  position: absolute;
  top: -0.6875rem;
  left: 1.25rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  background: var(--website-accent-turquoise);
  color: var(--website-background-black);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.sc-plan-name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--website-accent-turquoise);
}
.sc-plan-price { margin: 0; display: flex; align-items: baseline; gap: 0.375rem; }
.sc-plan-amount { font-size: 2.125rem; font-weight: 700; line-height: 1; }
.sc-plan-unit { font-size: 0.8125rem; color: var(--website-text-lightMuted); }
.sc-plan-sub { margin: 0; font-size: 0.8125rem; color: var(--website-text-lightMuted); }
.sc-plan-quotas {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4375rem;
  font-size: 0.875rem;
}
.sc-plan-quotas li { position: relative; padding-left: 1.125rem; }
.sc-plan-quotas li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4375rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--website-accent-turquoise);
}
.sc-plan-cta { margin-top: 0.5rem; text-align: center; }
/* The benefits of every plan (§9.18 ranks 8-12): lighter than the quotas, one line each. */
.sc-plan-benefits {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  display: grid;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--website-text-lightMuted);
}
.sc-plan-benefits li { position: relative; padding-left: 1.125rem; }
.sc-plan-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--website-accent-turquoise);
  font-weight: 700;
}
.sc-plan-top .sc-plan-benefits { color: var(--website-background-midnight); }
/* The folded rendering exists for phones only; its row is transparent elsewhere. */
.sc-plan-benefits-fold { display: none; }
.sc-plan-extras { display: contents; }
/* The extra packs: one discreet line on each card (§9.16), the list once below. */
.sc-plan-packs {
  font-size: 0.75rem;
  color: var(--website-text-lightMuted);
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}
.sc-plan-top .sc-plan-packs { color: var(--website-background-midnight); }
.sc-packs {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 1.125rem;
  border: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
}
.sc-packs-title { margin: 0 0 0.625rem; font-size: 0.9375rem; font-weight: 700; color: var(--website-accent-turquoise); }
.sc-packs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  font-size: 0.875rem;
}
.sc-pack { min-width: 0; }
.sc-pack-choice {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--website-accent-aluminumMid);
  border-radius: 0.85rem;
  background: rgb(8 25 55 / 0.8);
  color: var(--website-text-light);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.sc-pack-choice:hover, .sc-pack-choice:focus-visible {
  border-color: var(--website-accent-turquoise);
  background: rgb(22 55 91 / 0.92);
  transform: translateY(-1px);
}
.sc-pack-choice[aria-pressed='true'] {
  border: 2px solid var(--website-accent-turquoise);
  background: rgb(16 64 99 / 0.94);
}
.sc-pack-copy { display: grid; gap: 0.25rem; min-width: 0; }
.sc-pack-description { font-size: 0.78rem; line-height: 1.45; color: var(--website-text-light); }
.sc-pack-price { font-weight: 800; white-space: nowrap; font-size: 1rem; }
.sc-pack-selection { margin: 0.75rem 0 0; font-size: 0.82rem; color: var(--website-text-light); }

/*
 * ---------- THE TABLET ----------
 *
 * The Owner, 2026-09-23: « pour la version mobile et PC tout est OK
 * visuellement, je te laisse faire ca proprement pour tablette egalement. »
 *
 * TWO COLUMNS, AND NOT FOUR SHRUNK ONES. Between 820 and 1279 px, four cards
 * side by side fall below 180 px each: the price, the quotas and the button
 * get so squeezed that comparison — the only reason for this
 * page to exist — becomes painful. Two columns leave each card the width
 * it had on a large screen.
 *
 * AND THE HIGHLIGHTED CARD STAYS IN ITS PLACE. On two columns it ends up
 * at the bottom left; it keeps its panel and its tag, so
 * it stays easy to spot without having to reorder the plans — which would
 * break the Professional → Elite progression the Owner set.
 */
@media (min-width: 820px) and (max-width: 1279px) {
  .sc-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .sc-plan { padding: 1.5rem 1.25rem 1.25rem; }
  .sc-plan-amount { font-size: 2rem; }
  /* The Relief variant's glow no longer lifts the card: on two rows,
   * a vertical offset misaligns the whole line. */
  .sc-pricing-relief .sc-plan-top { transform: none; }
}

/* Annual mode (DEMANDE_OWNER suite 646): the monthly price struck through,
 * muted and smaller than the equivalent — the existing muted token, no loud colour. */
.sc-plan-was { font-size: 1.125rem; font-weight: 500; color: var(--website-text-lightMuted); }
.sc-plan-was-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sc-plan-top .sc-plan-was { color: var(--website-background-midnight); }
.sc-pricing-editorial .sc-plan-top .sc-plan-was,
.sc-pricing-relief .sc-plan-top .sc-plan-was { color: var(--website-text-lightMuted); }
/* The annual unit stands in two short lines beside the equivalent, centred on it. */
.sc-plan-price-annual { align-items: center; }
.sc-plan-unit-annual { min-width: 0; max-width: 8rem; line-height: 1.2; }
.sc-plan-saving { display: block; }
/* Five cards side by side (>= 1280 px): the narrow unit column wrapped to three
 * lines under the widest price (Elite 400) and pushed that card down. The block
 * reserves three slightly smaller lines on every card — room for translations
 * about 40 % longer — so the five cards stay aligned. */
@media (min-width: 1280px) {
  .sc-plan-unit-annual { font-size: 0.75rem; min-height: 3.6em; display: flex; align-items: center; }
}

/* The orientation sentence: rendered everywhere, shown on mobile only. */
.sc-pricing-guide { display: none; }
.sc-pricing-quote { color: var(--website-accent-turquoise); }

@media (max-width: 819px) {
  /* The benefits folded on a phone: one line, the rest one tap away. */
  .sc-plan-benefits[data-testid="pricing-plan-benefits"] { display: none; }
  .sc-plan-benefits-fold { display: block; font-size: 0.8125rem; color: var(--website-text-lightMuted); }
  .sc-plan-top .sc-plan-benefits-fold { color: var(--website-background-midnight); }
  .sc-plan-benefits-fold summary { cursor: pointer; }
  .sc-plan-benefits-more { color: var(--website-accent-turquoise); font-weight: 700; white-space: nowrap; }
  .sc-plan-benefits-rest { border-top: 0; padding-top: 0.25rem; }
  /* The folded benefits and the packs line share ONE row on a phone. */
  .sc-plan-extras { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
  .sc-plan-extras .sc-plan-benefits-fold { flex: 1 1 0; min-width: 0; overflow: hidden; font-size: 0.75rem; }
  .sc-plan-extras .sc-plan-packs { white-space: nowrap; }
  .sc-pricing-guide {
    display: block;
    margin: 0;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--website-text-lightMuted);
  }

  /*
   * ONE COLUMN, AND THE NEXT CARD PEEKING OUT.
   *
   * The Owner, 2026-09-23: « sur mobile, mets-les a la verticale, l'une
   * au-dessus de l'autre, mais il faut voir apparaitre directement une seconde
   * carte pour comprendre qu'il faut scroller pour les voir toutes. »
   *
   * It is a usability rule, not an aesthetic one: four stacked cards of which
   * only one fits on the screen read as ONE offer. The top of the
   * second, visible from arrival, says there are others — without text,
   * without an arrow and with nothing to learn.
   *
   * The card is therefore bounded in height so that at 844 px tall — the common
   * format — the next one always starts on the screen. Verified by the visual
   * contract, which measures the real position of the second card.
   */
  .sc-plans { grid-template-columns: 1fr; gap: 0.875rem; }
  .sc-plan { padding: 1.25rem 1.125rem 1.125rem; gap: 0.5rem; }
  .sc-plan-amount { font-size: 1.875rem; }
  .sc-plan-quotas { font-size: 0.8125rem; gap: 0.3125rem; }
  .sc-plan-cta { margin-top: 0.25rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .sc-billing { flex-wrap: wrap; justify-content: center; }
}

/*
 * ---------- THE PRICING PAGE ON A PHONE (A2) — BELOW 768 PX ONLY ----------
 *
 * The Owner, 2026-10-15 (question 60, answer « A »; suites 614 and 623): the
 * first plan card and the top of the second must be visible WITHOUT
 * scrolling. Measured before: at 360 px the second card started at 1,608 px.
 *
 * The header and the banner stay exactly as approved; tablet and PC are
 * untouched (these rules stop at 767 px). Nothing is removed and nothing is
 * reworded: the page is only REORDERED, in CSS, from the same HTML —
 *   the title « Plans that follow your call volume »,
 *   currency + Monthly | Annual on ONE compact line, the tax note small
 *   under it (kept, suite 565),
 *   the cards, side by side, swiped sideways (scroll-snap, no script): the
 *   edge of the next card shows at the right,
 *   then the billing note, the orientation sentence, the two intro
 *   paragraphs and the coverage badge, then the packs and the page foot.
 *
 * display: contents lifts the hero and the pricing block's children into
 * one grid; the hero's navy is the page's own navy, and the page foot's
 * single surface (gradient + pearl edge) is painted ONCE behind every row
 * from the controls down by ::before — no seam, as in the approved foot.
 */
@media (max-width: 767px) {
  .sc-plans {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    gap: 0.75rem;
    width: 100%;
    padding: 0.25rem 1rem 0.5rem;
  }
  /* One card nearly full width; the next one's edge stays in view at the right. */
  .sc-plan { flex: 0 0 calc(100% - 1.25rem); scroll-snap-align: start; padding: 0.75rem 0.875rem; gap: 0.3125rem; }
  .sc-plan-name { line-height: 1.25; }
  .sc-plan-amount { font-size: 1.75rem; }
  .sc-plan-sub { line-height: 1.3; }
  /* Annual (suite 646): one more line — the saving — kept inside the approved
   * fold at 844 px by a slightly tighter price block. */
  .sc-plan-annual { gap: 0.25rem; }
  .sc-plan-unit-annual { font-size: 0.75rem; max-width: 7rem; }
  .sc-plan-sub-annual { font-size: 0.75rem; line-height: 1.2; }
  .sc-plan-quotas { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1.35; gap: 0.1875rem; }
  .sc-plan-cta { margin-top: 0.25rem; padding-top: 0.4375rem; padding-bottom: 0.4375rem; }

  .sc-main-pricing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    grid-template-areas:
      "title title title title"
      ". currency billing ."
      "tax tax tax tax"
      "plans plans plans plans"
      "note note note note"
      "guide guide guide guide"
      "intro1 intro1 intro1 intro1"
      "intro2 intro2 intro2 intro2"
      "badge badge badge badge"
      "packs packs packs packs"
      "brand brand brand brand"
      "links links links links";
    align-items: center;
  }
  /* Anything else the template renders in main (the partner band…) keeps the
   * full width, after the reordered rows. */
  .sc-main-pricing > * { grid-column: 1 / -1; }
  .sc-main-pricing::before {
    content: '';
    grid-column: 1 / -1;
    grid-row: currency-start / links-end;
    align-self: stretch;
    background: radial-gradient(150% 200% at 6% -60%, color-mix(in srgb, var(--website-background-black) 76%, var(--website-accent-blueSoft)) 0%, transparent 52%), linear-gradient(104deg, var(--website-background-black) 0%, color-mix(in srgb, var(--website-background-black) 91%, var(--website-accent-blueSoft)) 28%, color-mix(in srgb, var(--website-background-black) 79%, var(--website-accent-blueSoft)) 47%, color-mix(in srgb, var(--website-background-black) 93%, var(--website-accent-blueSoft)) 64%, var(--website-background-black) 100%);
    border-top: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  }
  .sc-main-pricing > [data-role='hero-intro'],
  .sc-main-pricing > [data-role='hero-intro'] .sc-inner,
  .sc-main-pricing > [data-role='hero-intro'] .sc-split,
  .sc-main-pricing > [data-role='hero-intro'] .sc-split-text,
  .sc-main-pricing > .sc-pagefoot,
  .sc-main-pricing .sc-pricing { display: contents; }
  .sc-main-pricing .sc-split-media:empty { display: none; }

  .sc-main-pricing .sc-h1 { grid-area: title; margin: 0.75rem 1rem 0.375rem; }
  .sc-main-pricing .sc-split-text > .sc-p:nth-of-type(1) { grid-area: intro1; margin: 1rem 1rem 0; }
  .sc-main-pricing .sc-split-text > .sc-p:nth-of-type(2) { grid-area: intro2; margin: 1rem 1rem 1.5rem; }
  .sc-main-pricing > .sc-badge-strip { grid-area: badge; padding: 0 1rem 1rem; }

  .sc-main-pricing .sc-currency-selector { grid-area: currency; margin: 0.5rem 0.5rem 0 0; gap: 0; }
  /* The word « Currency » stays in the HTML and is read by screen readers;
   * on the compact line the selector's value (USD, EUR…) says it. */
  .sc-main-pricing .sc-currency-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .sc-main-pricing .sc-currency-selector select { min-height: 2.5rem; padding: 0.375rem 0.5rem; }
  .sc-main-pricing .sc-billing { grid-area: billing; margin-top: 0.5rem; flex-wrap: nowrap; }
  .sc-main-pricing .sc-billing-opt { padding: 0.4375rem 0.75rem; gap: 0.375rem; font-size: 0.875rem; }
  .sc-main-pricing .sc-billing-badge { font-size: 0.625rem; letter-spacing: 0.04em; padding: 0.125rem 0.3125rem; }
  .sc-main-pricing .sc-pricing-tax {
    grid-area: tax;
    margin: 0.3125rem 1rem 0.375rem;
    font-size: 0.6875rem;
    line-height: 1.35;
    text-align: center;
  }
  .sc-main-pricing .sc-plans { grid-area: plans; align-self: start; }
  .sc-main-pricing .sc-pricing-billing-note { grid-area: note; margin: 0.75rem 1rem 0; text-align: center; }
  .sc-main-pricing .sc-pricing-guide { grid-area: guide; margin: 0.75rem 1rem 0; }
  .sc-main-pricing .sc-packs { grid-area: packs; margin: 0 1rem 1.5rem; }
  .sc-main-pricing .sc-brandband { grid-area: brand; }
  .sc-main-pricing .sc-thematic { grid-area: links; }
}

/*
 * ---------- TWO OTHER STAGINGS, SAME COLOR RULES ----------
 *
 * The Owner, 2026-09-23: « si tu as un autre style pour les cartes, montre-moi,
 * je suis curieux ; ce sera peut-etre mieux que mon choix. »
 *
 * The two variants change the staging and NOTHING else: turquoise
 * stays an accent, blue stays the action, a single card is highlighted.
 * Offering him a variant that violates §120.61 would be presenting him with a choice
 * he cannot take.
 */

/* B — EDITORIAL: no boxes, columns separated by a rule.
 * The eye compares PRICES instead of counting frames. The highlighted
 * plan is signaled by a thick turquoise rule, not by a background. */
.sc-pricing-editorial .sc-plan {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  border-radius: 0;
  background: none;
  padding: 1.75rem 1rem 1.5rem;
}
.sc-pricing-editorial .sc-plan-top {
  background: none;
  border-top: 3px solid var(--website-accent-turquoise);
  box-shadow: none;
}
.sc-pricing-editorial .sc-plan-top .sc-plan-name,
.sc-pricing-editorial .sc-plan-top .sc-plan-amount,
.sc-pricing-editorial .sc-plan-top .sc-plan-quotas li { color: var(--website-text-light); }
.sc-pricing-editorial .sc-plan-top .sc-plan-unit,
.sc-pricing-editorial .sc-plan-top .sc-plan-sub { color: var(--website-text-lightMuted); }
.sc-pricing-editorial .sc-plan-tag { top: -0.75rem; left: 1rem; }
.sc-pricing-editorial .sc-plan-amount { font-size: 2.5rem; }
.sc-pricing-editorial .sc-plans { gap: 0 1.5rem; }

/* C — RELIEF: all cards dark, a turquoise edging at the top of
 * each one, and the highlighted plan raised by a glow instead of a light
 * background. The contrast stays carried by light, not by a second
 * color. */
.sc-pricing-relief .sc-plan {
  border-top: 3px solid color-mix(in srgb, var(--website-accent-turquoise) 45%, var(--website-background-black));
  background: radial-gradient(150% 200% at 6% -60%, color-mix(in srgb, var(--website-background-black) 76%, var(--website-accent-blueSoft)) 0%, transparent 52%), linear-gradient(104deg, var(--website-background-black) 0%, color-mix(in srgb, var(--website-background-black) 91%, var(--website-accent-blueSoft)) 28%, color-mix(in srgb, var(--website-background-black) 79%, var(--website-accent-blueSoft)) 47%, color-mix(in srgb, var(--website-background-black) 93%, var(--website-accent-blueSoft)) 64%, var(--website-background-black) 100%);
}
.sc-pricing-relief .sc-plan-top {
  background: radial-gradient(150% 200% at 6% -60%, color-mix(in srgb, var(--website-background-black) 76%, var(--website-accent-blueSoft)) 0%, transparent 52%), linear-gradient(104deg, var(--website-background-black) 0%, color-mix(in srgb, var(--website-background-black) 91%, var(--website-accent-blueSoft)) 28%, color-mix(in srgb, var(--website-background-black) 79%, var(--website-accent-blueSoft)) 47%, color-mix(in srgb, var(--website-background-black) 93%, var(--website-accent-blueSoft)) 64%, var(--website-background-black) 100%);
  border-top-color: var(--website-accent-turquoise);
  box-shadow: 0 0 0 1px var(--website-accent-turquoise), 0 1.25rem 2.5rem rgb(20 184 166 / 0.22);
  transform: translateY(-0.75rem);
}
.sc-pricing-relief .sc-plan-top .sc-plan-name { color: var(--website-accent-turquoise); }
.sc-pricing-relief .sc-plan-top .sc-plan-amount,
.sc-pricing-relief .sc-plan-top .sc-plan-quotas li { color: var(--website-text-light); }
.sc-pricing-relief .sc-plan-top .sc-plan-unit,
.sc-pricing-relief .sc-plan-top .sc-plan-sub { color: var(--website-text-lightMuted); }
.sc-pricing-relief .sc-plan-amount { font-size: 2.375rem; }

/*
 * ---------- THE ENTERPRISE FORM ----------
 *
 * Two columns on a large screen, a single one on phone. The long fields —
 * the requirements — take the full width: free text in a half
 * column gets filled in less.
 */
.sc-entform {
  padding: 2.5rem 1.5rem 3rem;
  background: radial-gradient(150% 200% at 6% -60%, color-mix(in srgb, var(--website-background-black) 76%, var(--website-accent-blueSoft)) 0%, transparent 52%), linear-gradient(104deg, var(--website-background-black) 0%, color-mix(in srgb, var(--website-background-black) 91%, var(--website-accent-blueSoft)) 28%, color-mix(in srgb, var(--website-background-black) 79%, var(--website-accent-blueSoft)) 47%, color-mix(in srgb, var(--website-background-black) 93%, var(--website-accent-blueSoft)) 64%, var(--website-background-black) 100%);
  border-top: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  display: grid;
  gap: 0.875rem;
  justify-items: start;
}
.sc-entform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0.875rem 1rem;
  width: 100%;
  max-width: 54rem;
  min-width: 0;
  margin-top: 0.5rem;
}
.sc-entform-field {
  display: grid;
  gap: 0.3125rem;
  min-width: 0;
  max-width: 100%;
}
.sc-entform-wide { grid-column: 1 / -1; }
.sc-entform-label { font-size: 0.8125rem; color: var(--website-text-lightMuted); }
.sc-entform-opt { color: var(--website-text-lightMuted); font-style: italic; }
.sc-entform input,
.sc-entform textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  background: var(--website-background-black);
  color: var(--website-text-light);
  font: inherit;
  font-size: 0.9375rem;
}
.sc-entform input:focus-visible,
.sc-entform textarea:focus-visible { outline: 2px solid var(--website-accent-blue); outline-offset: 1px; }
.sc-entform-submit { grid-column: 1 / -1; justify-self: start; }
/*
 * THE MESSAGE AFTER SENDING — impossible to miss (DEMANDE_OWNER suites 212-215).
 * Just below the send button, boxed with the form's own vocabulary (the field
 * edge, radius and black, the focus blue as its frame): no new colour. The
 * header is not fixed; the margin only keeps the box off the very top edge
 * when the page is brought onto it.
 */
.sc-entform-status { width: 100%; max-width: 54rem; min-width: 0; scroll-margin-top: 1.5rem; }
/*
 * « LAUNCHING SOON » (DEMANDE_OWNER suites 222, 223). The header line is thin,
 * full width, under the bar — never inside it, so the approved bar does not
 * move — aligned under the language selector on wide screens and centred on
 * phones. The click message reuses the Enterprise confirmation box below,
 * floating under its button.
 */
.sc-launch-line {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0.3125rem 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  text-align: right;
  color: var(--website-text-lightMuted);
  overflow-wrap: anywhere;
}
@media (max-width: 819px) {
  .sc-launch-line { text-align: center; padding: 0.3125rem 1rem; }
}
.sc-launch-bubble {
  position: absolute;
  z-index: 1000;
  font-size: 0.9375rem;
  line-height: 1.45;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
}
.sc-entform-status-box {
  margin: 0;
  padding: 1rem 1.125rem;
  border-radius: 0.5rem;
  border: 2px solid var(--website-accent-blue);
  background: var(--website-background-black);
  color: var(--website-text-light);
  overflow-wrap: anywhere;
}
.sc-entform-status-sign { display: inline-block; margin-top: 0.5rem; font-weight: 600; }

/* ---------- Buttons ---------- */

.sc-btn {
  display: inline-block;
  padding: 0.5rem 0.8125rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  background: var(--website-background-black);
  color: var(--website-text-light);
  text-decoration: none;
  font-size: 0.9375rem;
  white-space: nowrap;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    transform 160ms ease;
}

/* Header/footer navigation: same navy hover language as Extra Packs. */
.sc-chrome-top .sc-nav .sc-btn:not(.sc-btn-action):hover,
.sc-chrome-top .sc-nav .sc-btn:not(.sc-btn-action):focus-visible,
.sc-chrome-bottom .sc-nav .sc-btn:hover,
.sc-chrome-bottom .sc-nav .sc-btn:focus-visible {
  background: rgb(22 55 91 / 0.92);
  border-color: var(--website-accent-blueSoft);
  transform: translateY(-1px);
}
.sc-btn-action {
  background: linear-gradient(180deg, color-mix(in srgb, var(--website-accent-metalBlue) 80%, var(--website-text-light)) 0%, var(--website-accent-metalBlue) 62%, color-mix(in srgb, var(--website-accent-metalBlue) 82%, var(--website-background-black)) 100%);
  border-color: var(--website-accent-metalBlue);
  font-weight: 600;
}
.sc-btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--website-accent-blue) 80%, var(--website-text-light)) 0%, var(--website-accent-blue) 62%, color-mix(in srgb, var(--website-accent-blue) 82%, var(--website-background-black)) 100%);
  border-color: var(--website-accent-blue);
  color: var(--website-text-light);
  font-weight: 600;
  padding: 0.8125rem 1.75rem;
  font-size: 1rem;
}

/* ---------- Language selector and drop-down menus ---------- */

.sc-menu { position: relative; }
.sc-menu > summary { list-style: none; cursor: pointer; }
.sc-menu > summary::-webkit-details-marker { display: none; }
.sc-menu-list {
  position: absolute;
  right: 0;
  z-index: 20;
  margin: 0.375rem 0 0;
  padding: 0.5rem;
  list-style: none;
  display: grid;
  gap: 0.25rem;
  min-width: 12rem;
  max-height: 18rem;
  overflow-y: auto;
  background: var(--website-background-black);
  border: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  border-radius: 0.625rem;
}
.sc-menu-list a { display: block; border: 0; background: none; padding: 0.4375rem 0.625rem; }
/*
 * THE LANGUAGE SELECTOR — code, arrow, globe.
 *
 * The globe is in silver gray, as requested, and slightly set back from the
 * code: it is the code that one reads, the globe only says what it is
 * about.
 */
.sc-lang { position: relative; }
.sc-lang-btn { display: inline-flex; align-items: center; gap: 0.4375rem; }
.sc-lang-code { font-weight: 600; letter-spacing: 0.02em; }
.sc-caret {
  width: 0;
  height: 0;
  border-left: 0.3125rem solid transparent;
  border-right: 0.3125rem solid transparent;
  border-top: 0.3125rem solid currentColor;
  opacity: 0.85;
}
.sc-globe { width: 1.0625rem; height: 1.0625rem; color: var(--website-text-silver); }
.sc-lang-list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.375rem);
  z-index: 60;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  min-width: 11.5rem;
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: radial-gradient(150% 200% at 6% -60%, color-mix(in srgb, var(--website-background-black) 76%, var(--website-accent-blueSoft)) 0%, transparent 52%), linear-gradient(104deg, var(--website-background-black) 0%, color-mix(in srgb, var(--website-background-black) 91%, var(--website-accent-blueSoft)) 28%, color-mix(in srgb, var(--website-background-black) 79%, var(--website-accent-blueSoft)) 47%, color-mix(in srgb, var(--website-background-black) 93%, var(--website-accent-blueSoft)) 64%, var(--website-background-black) 100%);
  border: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  border-radius: 0.75rem;
  /* The cursor announces that the list can be grabbed with the mouse. */
  cursor: grab;
}
.sc-lang-list.sc-grabbing { cursor: grabbing; }
.sc-lang-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.4375rem;
  color: var(--website-text-light);
  text-decoration: none;
  white-space: nowrap;
}
.sc-lang-item:hover, .sc-lang-item:focus-visible { background: var(--website-background-navy); }
.sc-lang-item-code {
  min-width: 1.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--website-text-lightMuted);
}


.sc-picker-strip { display: flex; justify-content: flex-end; padding: 1.5rem 1.5rem 0; }

/*
 * HERO ACTIONS — shared across all pages carrying the business selector.
 *
 * Desktop: the new How it works action sits immediately to the RIGHT of the
 * existing metallic-blue selector, with a small gap. Mobile: it drops BELOW it.
 * Both controls have exactly the same box dimensions and typography.
 */
.sc-hero-actions {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 15.25rem;
  gap: 0.625rem;
  align-items: stretch;
  grid-auto-rows: 1fr;
}
/*
 * NEVER A CUT LABEL, IN ANY LANGUAGE (Owner, 2026-10-11, suite 344: the French
 * « Choisissez votre type d'entreprise » overflowed its button; German and Greek too).
 * The width stays 15.25rem; a longer translation wraps onto a second line, centred,
 * and the two buttons keep the same height (stretch on one row, 1fr rows on mobile).
 */
.sc-hero-actions > .sc-btn,
.sc-hero-actions > [data-testid='business-type-picker'] {
  box-sizing: border-box;
  width: 15.25rem;
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  font-size: 0.9375rem;
  font-weight: 600;
}
.sc-how-it-works {
  background: var(--website-background-deep);
  border-color: var(--website-accent-blueSoft);
  color: var(--website-text-light);
}
.sc-how-it-works:hover,
.sc-how-it-works:focus-visible {
  background: rgb(22 55 91 / 0.92);
  border-color: var(--website-text-light);
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--website-accent-blueSoft) 70%, transparent),
    0 0 1.2rem color-mix(in srgb, var(--website-accent-blueSoft) 46%, transparent),
    0 0.5rem 1.4rem rgb(0 0 0 / 0.32);
}

[data-testid='business-type-picker']:hover,
[data-testid='business-type-picker']:focus-visible {
  filter: brightness(1.16);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--website-text-light) 48%, transparent),
    0 0 1.35rem color-mix(in srgb, var(--website-accent-blueSoft) 52%, transparent),
    0 0.5rem 1.5rem rgb(0 0 0 / 0.34);
}

@media (max-width: 819px) {
  [data-role='hero-intro'] .sc-section-head { justify-content: center; }
  [data-role='hero-intro'] .sc-section-head > span:empty { display: none; }
  .sc-coverage-counts { flex-basis: 100%; display: flex; flex-direction: column; gap: 0.125rem; }
  .sc-coverage-counts-separator { display: none; }
  .sc-coverage-counts > span:not(.sc-coverage-counts-separator) { white-space: nowrap; }
  .sc-hero-actions {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 15.25rem;
    gap: 0.625rem;
  }
}


/*
 * THE BUSINESS SELECTOR OVERLAY.
 *
 * The Owner: « doit s'ouvrir en OVERLAY avec un scroll à l'intérieur ».
 * Scrolling is therefore on the LIST, not on the panel: the title and the
 * close button stay visible while browsing the 186 entries.
 */
/*
 * THE HIDDEN OVERLAY IS NOT DISPLAYED, AND TAKES NO SPACE.
 *
 * It is now always in the HTML — otherwise the 191 destinations of the
 * selector would only exist in the JavaScript data, and no engine would
 * find a path to the 180 trade pages.
 *
 * The hidden attribute already carries display:none in browsers, but a
 * later layout rule can override it unintentionally: the
 * declaration here holds it explicitly.
 */
.sc-overlay[hidden] { display: none; }
.sc-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.72);
}
.sc-overlay-panel {
  display: flex;
  flex-direction: column;
  width: min(34rem, 100%);
  /* Never taller than the window: beyond that, the list would scroll off screen. */
  max-height: min(40rem, 100%);
  background: radial-gradient(150% 200% at 6% -60%, color-mix(in srgb, var(--website-background-black) 76%, var(--website-accent-blueSoft)) 0%, transparent 52%), linear-gradient(104deg, var(--website-background-black) 0%, color-mix(in srgb, var(--website-background-black) 91%, var(--website-accent-blueSoft)) 28%, color-mix(in srgb, var(--website-background-black) 79%, var(--website-accent-blueSoft)) 47%, color-mix(in srgb, var(--website-background-black) 93%, var(--website-accent-blueSoft)) 64%, var(--website-background-black) 100%);
  border: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  border-radius: 1rem;
  outline: none;
}
.sc-overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 0.75rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
}
.sc-overlay-title { margin: 0; font-size: 1.0625rem; color: var(--website-text-light); }
.sc-overlay-close { flex: none; padding: 0.375rem 0.625rem; line-height: 1; }
.sc-overlay-list {
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sc-overlay-item {
  display: block;
  padding: 0.5625rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--website-text-light);
  text-decoration: none;
}
.sc-overlay-item:hover, .sc-overlay-item:focus-visible {
  background: var(--website-background-navy);
}
/* The 7 cross-cutting pages, at the bottom of each page. */
/*
 * THE BLOCK OF THE 7 CROSS-CUTTING PAGES — on the BLACK of the footer.
 *
 * The Owner, 2026-09-23: « le footer mobile n'est plus en noir, tu l'as laissé
 * bleu. » Color sampling done: the footer was indeed black, but this block
 * stayed on the page blue (28, 45, 99) over 200 px just above. To
 * the eye, the two make a single area — and that area looked blue.
 *
 * It therefore takes the footer background: the bottom of the page becomes a single
 * black expanse, like the header.
 */
/*
 * THE GRADIENT IS PAINTED BY THE CONTAINER, ONLY ONCE.
 *
 * It used to be painted by the cross-cutting links area alone, as long as nothing
 * followed it. As soon as the logo band was added below with the same
 * background, the gradient restarted at their junction and a line appeared —
 * visible to the eye, invisible to any structure test.
 */
.sc-pagefoot {
  background: radial-gradient(150% 200% at 6% -60%, color-mix(in srgb, var(--website-background-black) 76%, var(--website-accent-blueSoft)) 0%, transparent 52%), linear-gradient(104deg, var(--website-background-black) 0%, color-mix(in srgb, var(--website-background-black) 91%, var(--website-accent-blueSoft)) 28%, color-mix(in srgb, var(--website-background-black) 79%, var(--website-accent-blueSoft)) 47%, color-mix(in srgb, var(--website-background-black) 93%, var(--website-accent-blueSoft)) 64%, var(--website-background-black) 100%);
  border-top: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.sc-brandband {
  order: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 1.5rem 0.65rem;
  background: none;
}
.sc-brandband-link { display: inline-flex; border: 0; }
.sc-brandband-img {
  width: clamp(6.5rem, 14vw, 10rem);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
}

.sc-thematic {
  order: 2;
  padding: 0.35rem 1.5rem 0.9rem;
  background: none;
  border-top: 0;
  text-align: center;
}
.sc-thematic-title {
  margin: 0 0 0.8rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--website-text-lightMuted);
  text-align: center;
}
.sc-thematic-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem 1.5rem;
  margin: 0 auto;
  padding: 0;
  max-width: 78rem;
  list-style: none;
}
.sc-thematic-item {
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--website-text-lightMuted);
  text-decoration: none;
  font-size: 0.875rem;
}
.sc-thematic-item:hover, .sc-thematic-item:focus-visible {
  color: var(--website-text-light);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- Sections ---------- */

.sc-section { padding: 4rem 1.5rem; }
.sc-inner { max-width: 78rem; margin: 0 auto; }

/*
 * THE COLOR CONTAINER — §120.61.2 L43336-L43348.
 *
 * « Il ne prend pas toute la section, tu laisses juste des petits bords de la
 * section encore, dans le bleu » (Owner). Hence the side margin: the gradient
 * blue stays visible all around the deep black, and it is that contrast that
 * makes the portraits stand out.
 */
.sc-container {
  background: radial-gradient(150% 200% at 6% -60%, color-mix(in srgb, var(--website-background-black) 76%, var(--website-accent-blueSoft)) 0%, transparent 52%), linear-gradient(104deg, var(--website-background-black) 0%, color-mix(in srgb, var(--website-background-black) 91%, var(--website-accent-blueSoft)) 28%, color-mix(in srgb, var(--website-background-black) 79%, var(--website-accent-blueSoft)) 47%, color-mix(in srgb, var(--website-background-black) 93%, var(--website-accent-blueSoft)) 64%, var(--website-background-black) 100%);
  border: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
  margin: 0 1.5rem;
}

/*
 * SECTIONS 1 AND 4 — media on the left, text on the right on PC.
 * On mobile: text CENTERED, then the media AT THE BOTTOM of the section.
 * That is exactly what the Owner described, twice.
 */
.sc-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 2.5rem;
  align-items: center;
}
/*
 * The TEXT comes first in the DOM — §24.1 L102039-L102044 imposes the order
 * H1, slogan, introduction, and that is the order robots and
 * screen readers read. The grid then places the media in column 1, hence on the
 * LEFT on screen as the Owner asks. Placing is not ordering:
 * confusing the two would have put the slogan before the H1.
 */
/*
 * « min-width: 0 » ON BOTH COLUMNS — otherwise they overflow.
 *
 * A grid child has « min-width: auto » by default: its minimum width is
 * that of its widest content, and an unbreakable word imposes it. The
 * column declared at 403px therefore let its paragraphs overflow it by 35px.
 *
 * Observed at 820px on « /en/privacy » — 11px of horizontal overflow of the
 * page. The culprit was « booking/reservation/order/callback/Action »: the
 * slash offers NO line-break opportunity in CSS, and the
 * legal text is full of them (« controller/business », « processor/service »,
 * « features/configuration »). No structure test could see it, and it
 * only showed up the day I ran the visual contract on the real
 * pages rather than on the demonstration page alone.
 */
.sc-split-media { grid-column: 1; grid-row: 1; display: grid; gap: 0.875rem; align-content: center; min-width: 0; }
.sc-split-text { grid-column: 2; grid-row: 1; display: grid; gap: 1rem; justify-items: start; align-content: center; min-width: 0; }

/*
 * AND THE TOO-LONG WORD BREAKS, rather than leaving its column.
 *
 * « min-width: 0 » prevents the column from widening; one must still tell the
 * text what to do with the word that does not fit. Without it, it would overflow the
 * column instead of the page — the defect moves, it does not
 * disappear.
 *
 * « break-word » and not « anywhere »: it breaks ONLY the words that do not fit
 * on a whole line, and leaves ordinary text intact.
 */
.sc-h1, .sc-h2, .sc-p, .sc-slogan { overflow-wrap: break-word; }

/*
 * AND THE CONSTRAINT MUST GO DOWN TO THE PARAGRAPH.
 *
 * « min-width: 0 » on the column changed nothing: the column is itself a
 * grid, « justify-items: start » sizes its children on their content, and
 * a grid child keeps « min-width: auto ». The paragraph therefore stayed
 * 438px wide in a 403 column.
 *
 * « overflow-wrap » is useless as long as the width is not constrained: it
 * decides what happens when a word does not fit, and here everything fit —
 * it was the box that widened. « max-width: 100% » closes the box; the
 * line wrapping does the rest.
 *
 * The lesson goes beyond this defect: in a nested grid, a constraint set
 * at one level does NOT go down by itself. It must be set at each level that
 * can widen.
 */
.sc-split-text > *, .sc-split-media > * { min-width: 0; max-width: 100%; }

/*
 * SECTION 1 — PC ONLY.
 *
 * The shared left media composite (image + its slogan/supporting copy) moves
 * left together on every page, increasing the separation from the right copy
 * to about 150% of the former visual gap. Tablet/mobile are untouched.
 */
@media (min-width: 1280px) {
  [data-role='hero-intro'] .sc-split-media {
    transform: translateX(-3.5rem);
  }
}

/*
 * THE LAST SECTION: THE TEXT TAKES THE SPACE, THE PHOTO STEPS BACK.
 *
 * The Owner, 2026-09-23: « je ne vois pas non plus la derniere section avec
 * texte elargi SEO et photo gauche sur PC et tablette, et en dessous sur
 * mobile. »
 *
 * It existed — photo on the left, text on the right — but with the same split
 * as section 1: 0.9 against 1.1. An SEO enrichment is made of long
 * paragraphs; in such a narrow column, a short sentence floats
 * in the middle of the void and the section no longer reads as a section.
 *
 * The split therefore becomes 0.55 against 1.45: the photo stays on the left and stays
 * readable, the text has the width its role requires. On mobile, the general
 * rule already places the media UNDER the text, as he asks.
 */
/*
 * SEO ENRICHMENT — DESKTOP/TABLET ONLY.
 *
 * The media composite arrives as one block (image + heading + supporting text).
 * On large layouts, the image belongs to the LEFT column while the text belongs
 * to the RIGHT column. The previous rule only changed column proportions, so
 * all three pieces remained inside the left media wrapper and the entire right
 * half of the section stayed empty.
 *
 * display: contents makes the composite's children participate directly in
 * the section grid without duplicating content. Mobile is intentionally not
 * touched here: below 820px the original one-column flow remains authoritative.
 */
@media (min-width: 820px) {
  [data-role='seo-enrichment'] .sc-split {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    grid-template-rows: auto auto auto;
    column-gap: 2.5rem;
    row-gap: 1rem;
    align-items: start;
  }

  /*
   * Keep the SEO body in its own first row. The final visual's slogan and
   * supporting line live below it, never in the same grid rows.
   */
  [data-role='seo-enrichment'] .sc-split-text {
    grid-column: 2;
    grid-row: 1;
  }

  [data-role='seo-enrichment'] .sc-split-media {
    display: contents;
  }

  [data-role='seo-enrichment'] .sc-split-text:empty {
    display: none;
  }

  [data-role='seo-enrichment'] .sc-split-media > .sc-media-img,
  [data-role='seo-enrichment'] .sc-split-media > .sc-media-slot {
    grid-column: 1;
    grid-row: 1 / span 3;
    justify-self: center;
    align-self: center;
    max-width: 100%;
  }

  [data-role='seo-enrichment'] .sc-split-media > .sc-slogan,
  [data-role='seo-enrichment'] .sc-split-media > .sc-p {
    grid-column: 2;
    justify-self: start;
    width: min(100%, 34rem);
    max-width: 100%;
    text-align: left;
  }

  [data-role='seo-enrichment'] .sc-split-media > .sc-slogan {
    grid-row: 2;
    align-self: start;
  }

  [data-role='seo-enrichment'] .sc-split-media > .sc-p {
    grid-row: 3;
    align-self: start;
  }
}

/*
 * DESKTOP FINAL-SECTION SLOGAN — Owner, 2026-10-01.
 *
 * PC only: the short slogan is a visual statement beside the portrait.
 * It is centered, slightly larger, moved right and lifted to sit against
 * the portrait's vertical center. The mobile layout remains untouched.
 */
@media (min-width: 1280px) {
  [data-role='seo-enrichment'] .sc-split-media > .sc-slogan,
  [data-role='seo-enrichment'] .sc-split-media > .sc-p {
    justify-self: center;
    text-align: center;
    transform: translate(3rem, -8rem);
  }

  [data-role='seo-enrichment'] .sc-split-media > .sc-slogan {
    font-size: 1.59375rem;
  }
}

.sc-h1 { margin: 0; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.12; }
.sc-h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; }
.sc-slogan { margin: 0; font-size: 1.0625rem; }
.sc-p { margin: 0; }

/*
 * A LEGAL DOCUMENT KEEPS ITS SHAPE (audit N5): its capitalised sub-title on its
 * own line, its lists as lists — the words unchanged (LegalText.tsx).
 */
.sc-legal-paragraph { display: grid; gap: 0.5rem; min-width: 0; }
.sc-legal-label { display: block; font-weight: 800; letter-spacing: 0.02em; }
.sc-legal-list { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.375rem; text-align: start; justify-self: stretch; }
.sc-legal-link { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }

/*
 * The visuals of SECTION 1 and of the last section are VERTICAL.
 * The ratio comes from the table: min-height alone let the slot
 * stretch into landscape depending on the available width, which did not show the
 * real format to the Owner.
 */
.sc-media-slot {
  border: 1px dashed color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  border-radius: 0.875rem;
  aspect-ratio: var(--media-section1);
  max-width: 22rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
  font-size: 0.8125rem;
  color: var(--website-text-lightMuted);
  background: var(--website-background-black);
}

/*
 * THE IMAGE OCCUPIES THE SLOT, without distortion.
 *
 * Same geometry as the placeholder frame — it is the same place — but without its
 * dotted line: a dotted frame around a real photo would read as
 * a defect. The cropping gives way before the proportions of the Owner's visual.
 */
.sc-media-img {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: var(--media-section1);
  object-fit: cover;
  border-radius: 0.875rem;
  border: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  display: block;
}
/* Enterprise images reserve their exact proportions before lazy loading. */
[data-page-id='PUBLIC_ENTERPRISE'] .sc-section .sc-split-media .sc-media-img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  max-width: 100%;
}
[data-page-id='PUBLIC_ENTERPRISE'] .sc-split-media .sc-media-img:is(
  [data-media-ref='Marketing/Enterprise/Enterprise-03.png'],
  [data-media-ref='Marketing/Enterprise/Enterprise-05.jpeg'],
  [data-media-ref='Marketing/Enterprise/Enterprise-06.jpeg']
) { aspect-ratio: 3 / 1; }
[data-page-id='PUBLIC_ENTERPRISE'] .sc-split-media .sc-media-img[data-media-ref='Marketing/Enterprise/SolaroCall-Enterprise-1.png'] {
  aspect-ratio: 1672 / 941;
}
@media (min-width: 1280px) {
  [data-page-id='PUBLIC_ENTERPRISE'] [data-role='hero-intro'] .sc-split-media {
    transform: none;
  }
}
/* The application demonstration is a panorama: it has its own format
 * and is not bounded by the width of a section 1 visual. */
.sc-split-text .sc-media-img,
[data-role='connected-app'] .sc-media-img {
  aspect-ratio: var(--media-appShowcase);
  max-width: 100%;
}
/*
 * THE MINI LOGO SITS IN THE BOTTOM-RIGHT CORNER OF THE APPLICATION SECTION.
 *
 * The Owner, 2026-09-23: « section application sur PC, faudra placer le mini
 * logo plus a droite en bas, proche du coin. Faudra aussi encore pouvoir
 * placer apres les H1 et texte. »
 *
 * His second sentence decides the method. The logo placed IN the text flow
 * would push back everything that came after it: adding a paragraph would
 * bring it down again, and the corner would no longer be the corner. Outside the flow, it
 * holds its place whatever is written above — the Owner can lengthen his
 * texts without ever moving it.
 *
 * The text column reserves the corresponding width: an element outside the
 * flow pushes nothing, so nothing prevents text from passing under it unless it is
 * asked for explicitly.
 */
/*
 * THE APPLICATION PANORAMA TAKES THE WIDTH IT NEEDS.
 *
 * The Owner, 2026-09-23: « la photo demo app est fortement degradee aussi cote
 * pixels, elle est floue. »
 *
 * The file is not to blame: checked at scale 1, it is sharp. It measures
 * 2172 x 724 and shows a dashboard covered with tiny labels — at
 * 492 px of display, each label falls below the pixel. It is not a
 * loss of quality, it is a 4.4-times reduction.
 *
 * Serving a heavier image would have changed nothing: the defect was in
 * the layout, not in the asset. The column split is therefore reversed
 * for this section — the panorama takes the wider one, the text keeps enough to
 * breathe.
 */
[data-role='connected-app'] .sc-split {
  /*
   * The square application visual fills the left column. The copy stays in the
   * right column with a real grid gap, so neither side can overlap the other.
   */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  column-gap: 2.5rem;
}
[data-role='connected-app'] .sc-container { position: relative; }
[data-role='connected-app'] .sc-split-text .sc-media-img {
  aspect-ratio: var(--media-appLogo);
  max-width: 6.5rem;
  position: absolute;
  right: 1.75rem;
  bottom: 1.75rem;
  margin: 0;
}
[data-role='connected-app'] .sc-split-text { padding-right: 8.5rem; }

/* The application mini logo — square, and smaller than the main visual. */
.sc-split-text .sc-media-slot {
  aspect-ratio: var(--media-appLogo);
  max-width: 9rem;
}

.sc-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

/* ---------- Shared Phone Agent side slogans ---------- */

/*
 * SHARED PHONE AGENT SECTION / DESKTOP ONLY.
 *
 * The Owner wants the unused lateral space around the Phone Agent gallery to
 * carry two short conversion messages, while tablet and mobile stay exactly as
 * they are. The copy exists on every page with the shared gallery and is hidden
 * by default; it becomes a three-column stage only on a real PC viewport.
 */
.sc-home-agent-slogan { display: none; }

@media (min-width: 1280px) {
  [data-role='phone-agents'] .sc-inner {
    max-width: 96rem;
  }

  .sc-home-agent-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(48rem, 57vw, 68rem)) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
  }

  .sc-home-agent-stage > .sc-container {
    margin: 0;
    min-width: 0;
  }

  .sc-home-agent-slogan {
    display: block;
    margin: 0;
    width: 100%;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--website-accent-aluminumDark);
    border-radius: 0.875rem;
    background: repeating-linear-gradient(170deg, rgb(255 255 255 / 0.07) 0px, transparent 2px, rgb(0 0 0 / 0.12) 4px), linear-gradient(135deg, var(--website-accent-blackMetal), var(--website-background-black) 52%, var(--website-accent-blackMetal));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.17), 0 6px 20px rgb(0 0 0 / 0.3);
    text-align: center;
    font-size: clamp(0.9rem, 1.05vw, 1.15rem);
    line-height: 1.32;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--website-text-light);
  }

}

/* ---------- About: three-image editorial rhythm ---------- */

/*
 * About uses three existing, distinct GitHub visuals. Desktop alternates the
 * image side to create a restrained zigzag. Mobile deliberately does not:
 * the shared one-column rule places each image after the text of blocks 2, 4
 * and 6, yielding the Owner's "two blocks, image" reading rhythm.
 */
#about-advanced .sc-split-media .sc-slogan:empty,
#about-global .sc-split-media .sc-slogan:empty,
#about-evolution .sc-split-media .sc-slogan:empty {
  display: none;
}

@media (min-width: 820px) {
  #about-advanced .sc-split,
  #about-global .sc-split,
  #about-evolution .sc-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
  }

  /* Block 2: text left, image right. */
  #about-advanced .sc-split-text,
  #about-evolution .sc-split-text {
    grid-column: 1;
    grid-row: 1;
  }

  #about-advanced .sc-split-media,
  #about-evolution .sc-split-media {
    grid-column: 2;
    grid-row: 1;
    justify-items: center;
  }

  /* Block 4: image left, text right. */
  #about-global .sc-split-media {
    grid-column: 1;
    grid-row: 1;
    justify-items: center;
  }

  #about-global .sc-split-text {
    grid-column: 2;
    grid-row: 1;
  }

  #about-advanced .sc-media-img,
  #about-global .sc-media-img,
  #about-evolution .sc-media-img {
    width: min(100%, 25rem);
    height: auto;
    border-radius: 1rem;
  }
}

/* ---------- Phone agent gallery ---------- */

.sc-band { margin-top: 2rem; }
.sc-band-title { margin: 0 0 0.875rem; font-size: 1.0625rem; font-weight: 600; }

.sc-band-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sc-band-viewport::-webkit-scrollbar { display: none; }

/*
 * The track carries the same cards TWICE: the automatic scrolling
 * returns to the middle without the loop being visible.
 *
 * No CSS animation here — scrolling moves the NATIVE scroll
 * position, driven by PhoneAgentGallery. A CSS-transformed track cannot
 * be dragged with the mouse or the finger, and its cards
 * overflowed the container: observed on screen on 2026-09-23.
 */
.sc-band-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  padding-bottom: 0.25rem;
}

/*
 * EACH MODEL IS A DISTINCT THUMBNAIL.
 *
 * The Owner, 2026-09-23: « la tu m'as mis Free test sur une large bande orange
 * sans separation par modeles. »
 *
 * He is right, and the cause is visual: two orange buttons as wide as
 * their card, separated by only 16 px, read as ONE banner. Nothing
 * said where Sara ended and where Luna began.
 *
 * The card therefore carries its own frame: a surface, a border and
 * padding. The button no longer occupies the width of the banner but that of ITS
 * card, visibly delimited.
 */
.sc-card {
  flex: 0 0 auto;
  width: 11.5rem;
  display: grid;
  gap: 0.625rem;
  justify-items: center;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  border-radius: 1rem;
  background: radial-gradient(130% 95% at 20% -25%, color-mix(in srgb, var(--website-background-black) 66%, var(--website-text-light)) 0%, transparent 60%), radial-gradient(90% 70% at 85% 8%, color-mix(in srgb, var(--website-background-black) 84%, var(--website-accent-blueSoft)) 0%, transparent 55%), linear-gradient(176deg, color-mix(in srgb, var(--website-background-black) 80%, var(--website-text-light)) 0%, var(--website-background-black) 42%, color-mix(in srgb, var(--website-background-black) 54%, var(--website-background-black)) 100%);
}
/*
 * The portrait slot — RESERVED and SILENT.
 *
 * It no longer displays the asset reference: a file path written on the
 * card read like a bug. The dashed line says it is waiting for an
 * image, without pretending to be one.
 */
.sc-card-photo {
  width: 100%;
  aspect-ratio: var(--media-phoneAgentPortrait);
  object-fit: cover;
  object-position: 50% 0%;
  border-radius: 0.75rem;
  border: 1px dashed color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  background: var(--website-background-black);
}
.sc-card-name { font-weight: 600; font-size: 0.9375rem; }

/*
 * THE LANGUAGE DROP-DOWN OF EACH CARD.
 *
 * It opens AS AN OVERLAY, not in the flow. Opened in the flow, it
 * pushed the card and distorted the whole band — an orange banner across
 * the gallery, observed on screen on 2026-09-23.
 *
 * Not to be confused with the header language selector: this one
 * chooses the language of this model's VOICE SAMPLE, not that of the site.
 */
/*
 * THE LABEL MUST BE ABLE TO WRAP.
 *
 * Observed on screen on 2026-09-23: on a 145 px card, the text
 * overflowed the button and pushed the arrow out of the frame. The card looked
 * cut off even though its width was right — the measurement said 10 px of margin,
 * the eye saw an overflow.
 *
 * And it is not an edge case: this label will be translated into 33 languages, several of
 * them longer than English. A button that cannot wrap
 * breaks at the first translation.
 */
.sc-card-langs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  font-size: 0.75rem;
  padding: 0.4375rem 0.5rem;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
  min-height: 2.75rem;
}
.sc-card-langs-btn > span:first-child { min-width: 0; }
.sc-card-langs-list {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 0.375rem);
  z-index: 40;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  min-width: 100%;
  max-height: 12rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: radial-gradient(150% 200% at 6% -60%, color-mix(in srgb, var(--website-background-black) 76%, var(--website-accent-blueSoft)) 0%, transparent 52%), linear-gradient(104deg, var(--website-background-black) 0%, color-mix(in srgb, var(--website-background-black) 91%, var(--website-accent-blueSoft)) 28%, color-mix(in srgb, var(--website-background-black) 79%, var(--website-accent-blueSoft)) 47%, color-mix(in srgb, var(--website-background-black) 93%, var(--website-accent-blueSoft)) 64%, var(--website-background-black) 100%);
  border: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  border-radius: 0.625rem;
}
.sc-card-lang {
  display: block;
  padding: 0.375rem 0.625rem;
  border-radius: 0.4375rem;
  font-size: 0.8125rem;
  color: var(--website-text-light);
  text-decoration: none;
  white-space: nowrap;
}
.sc-card-lang:hover, .sc-card-lang:focus-visible { background: var(--website-background-navy); }
.sc-card-cta {
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  padding: 0.4375rem 0.5rem;
  white-space: normal;
  line-height: 1.25;
}

/* The listening overlay: narrower than the trades one, it lists only languages. */
.sc-listen-panel { width: min(22rem, 100%); max-height: min(28rem, 100%); }
.sc-listen-panel > .sc-overlay-head { flex: none; }
.sc-listen-accent { flex: none; margin: 0; padding: 0.75rem 1.25rem 0.25rem; }
.sc-listen-list { flex: 1 1 auto; min-height: 0; padding: 0.5rem; }

/*
 * THE LANGUAGE CHOICE IS A BUTTON, NOT A LINK.
 *
 * It carried the style of the trade selector entries, which are links.
 * A native button comes with its own font, its own background and its own
 * alignment: without these three lines, the 34 languages no longer look like a
 * list but like 34 stacked form buttons.
 */
.sc-listen-item {
  width: 100%;
  text-align: left;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/*
 * THE LANGUAGE BEING PLAYED IS VISIBLE.
 *
 * The visitor has just clicked among 34 entries; without a mark, he no longer knows
 * which one he is listening to. The mark follows aria-pressed, so the same state serves
 * the eye and the screen reader — impossible for them to diverge.
 */
.sc-listen-item[aria-pressed='true'] {
  color: var(--website-text-light);
  font-weight: 600;
}

/*
 * THE PLAYER SITS UNDER THE LIST, and stays visible while the languages
 * are scrolled: the panel scrolls, the player does not move.
 */
.sc-listen-player {
  flex: none;
  min-height: 3.375rem;
  position: sticky;
  bottom: 0;
  width: 100%;
  margin-top: 0.5rem;
  display: block;
}

.sc-arrows { display: flex; gap: 0.5rem; }
.sc-arrow {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  background: var(--website-background-black);
  color: var(--website-text-light);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Coverage badge ---------- */

.sc-badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 0.8125rem 1.375rem;
  border-radius: 1rem;
  background: var(--website-background-black);
  border: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  color: var(--website-text-light);
  font-size: 0.9375rem;
}
.sc-badge-strip { display: flex; justify-content: center; padding: 0 1.5rem 3rem; }

/* ---------- Coverage overlay ---------- */
.sc-coverage-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(3, 10, 32, 0.78);
  backdrop-filter: blur(8px);
}
.sc-coverage-panel {
  width: min(62rem, 94vw);
  max-height: min(82vh, 52rem);
  overflow: auto;
  border-radius: 1.25rem;
  border: 1px solid var(--website-accent-blueSoft);
  background: linear-gradient(145deg, var(--website-background-navy) 0%, var(--website-background-deep) 100%);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.5);
  color: var(--website-text-light);
  padding: 1.25rem;
}
.sc-coverage-head {
  position: sticky;
  top: -1.25rem;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: -1.25rem -1.25rem 1rem;
  padding: 1rem 1.25rem;
  background: var(--website-background-navy);
  border-bottom: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
}
.sc-coverage-x {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--website-accent-blueSoft);
  background: var(--website-background-black);
  color: var(--website-text-light);
  font-size: 1rem;
  cursor: pointer;
}
.sc-coverage-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.sc-coverage-group {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--website-background-black) 66%, var(--website-accent-blueSoft));
  background: rgba(255,255,255,0.035);
}
.sc-coverage-group h3 {
  margin: 0 0 0.75rem;
  color: var(--website-text-light);
}
.sc-coverage-group ul {
  columns: 2;
  column-gap: 1.5rem;
  margin: 0;
  padding-left: 1.2rem;
}
.sc-coverage-group li {
  margin: 0 0 0.35rem;
  break-inside: avoid;
  color: var(--website-text-lightSecondary);
}
[data-testid='coverage-voice-accents'] { grid-column: 1 / -1; }
.sc-coverage-accent-note { margin-top: 1.25rem; }
.sc-coverage-accent-note p { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.6; }
.sc-coverage-not-listed { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--website-text-lightSecondary); }
.sc-coverage-close {
  display: flex;
  width: min(16rem,100%);
  justify-content: center;
  margin: 1.25rem auto 0;
  border-color: var(--website-accent-blueSoft);
}
@media (max-width: 819px) {
  .sc-coverage-overlay { align-items: stretch; padding: 0.75rem; }
  .sc-coverage-panel {
    width: 100%;
    max-height: calc(100vh - 1.5rem);
    border-radius: 1rem;
    padding: 1rem;
  }
  .sc-coverage-head {
    top: -1rem;
    margin: -1rem -1rem 1rem;
    padding: 0.875rem 1rem;
  }
  .sc-coverage-groups { grid-template-columns: 1fr; }
  .sc-coverage-group ul { columns: 1; }
  .sc-coverage-close {
    position: sticky;
    bottom: 0;
    background: var(--website-background-black);
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 819px) {
  /*
   * THE HEADER AND THE FOOTER ON MOBILE.
   *
   * The Owner, 2026-09-23: « la bannière en haut. En dessous de la bannière,
   * TOUS les boutons alignés sur une ligne, de gauche à droite, le long de la
   * base du header. PAS ce que tu as fait — éléments dispersés, certains en
   * haut à gauche, d'autres en haut à droite. »
   *
   * Two rows, and only two. The height drops by itself: it was the
   * wrapping of the buttons that made it swell, not a setting.
   */
  /*
   * HEIGHT AND READABILITY ON MOBILE.
   *
   * The Owner, 2026-09-23: « le header et footer mobile beaucoup trop étroits
   * et pas assez lisibles ». I had reduced too much: trying to hold the -20 %,
   * I had gone down to -33 % and to 11 px labels.
   *
   * The target is HIS quantified instruction: about -20 % relative to the 220 px of
   * 2026-09-23, i.e. close to 176 px. The spacings therefore go back up, and the
   * labels return to a readable size.
   */
  .sc-bar {
    position: relative;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 1.125rem;
    min-height: 0;
    padding: 1.5rem 1rem;
  }

  /*
   * The language selector sits at the top right, out of the flow: the
   * banner thus keeps the EXACT center of the header, which the Owner
   * asked for. Placed in the flow next to it, it would have shifted it to the
   * left by its own width.
   */
  /*
   * THE MOBILE FOOTER.
   *
   * Its row CAN wrap, unlike the header's: the
   * Owner required a single row for the header, never for the footer.
   * Four labels at 15 px need about 415 px, and a phone offers
   * 390: squeezing them further would make them unreadable, and making them scroll
   * would hide « Legal » without anything announcing it. Observed on screen on
   * 2026-09-23 — the button was cut clean at the edge.
   */
  .sc-chrome-bottom .sc-nav {
    order: 2;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    overflow-x: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }

  /*
   * THE ORDER OF THE FOOTER ON MOBILE.
   *
   * The Owner, 2026-09-23: « dans le footer, place la banniere dans le haut du
   * footer, juste en dessous tous les boutons, et tout a fait en bas le 2026
   * Solaro Music Production LLC all rights reserved. »
   *
   * The order is imposed by the style and not by the markup: on a large screen
   * the three elements are side by side — copyright on the left, banner in the
   * center, navigation on the right — and the Owner validated that layout.
   * Moving the markup would have broken it.
   */
  /*
   * THE BANNER DOES NOT ENTER THE LANGUAGE SELECTOR COLUMN.
   *
   * The Owner, 2026-09-23: « on a le bouton multilangues qui superpose
   * legerement la photo banniere. »
   *
   * Measurement in hand: on mobile the selector is absolutely positioned at the top
   * right, and the banner is centered. At 360 px, 224 px of centered banner
   * leave 68 px on each side — less than the 72 px of the selector. The two
   * overlapped by 18 px at 360, by 3 px at 390, and not at all at 430: a
   * defect that shows ONLY on small screens, hence easy to miss.
   *
   * The banner is therefore bounded by the space really free between the two
   * selector columns — 11 rem in total, margin included — instead of a
   * fixed width that ignores its surroundings. It stays at 14 rem as soon as
   * the screen is wide enough.
   */
  /*
   * THE MOBILE BANNER: +15 %, AND THE 2026-09-23 BOUND IS LIFTED.
   *
   * The Owner: « augmente de 15 % le format banniere. » 14 rem therefore become
   * 16.1 rem.
   *
   * The bound calc(100vw - 11rem) kept the banner out of the language
   * selector column, when the selector floated at the top right. It has
   * since come down into the flow, above Sign up: there is no longer a
   * column to avoid, and keeping that bound would cap the banner at 214 px
   * — it would purely and simply cancel the requested enlargement.
   *
   * A constraint is removed when its cause disappears; leaving it « au cas
   * ou » amounts to silently holding back.
   */
  .sc-chrome-top .sc-banner-slot { max-width: 16.1rem; }

  .sc-chrome-bottom .sc-footer-banner-content { order: 1; width: min(17rem, 100%); max-width: 100%; margin: 0 auto; }
  .sc-chrome-bottom .sc-footer-banner-content .sc-banner-slot { width: 100%; max-width: 100%; margin: 0; }
  .sc-chrome-bottom .sc-copyright { order: 3; text-align: center; transform: none; }

  .sc-chrome-bottom .sc-bar { text-align: center; }
  .sc-chrome-bottom .sc-banner-zone { justify-content: center; text-align: center; }

  /*
   * THE LANGUAGE SELECTOR MOVES DOWN JUST ABOVE SIGN UP.
   *
   * The Owner, 2026-09-23: « descends le bouton multilangue et place-le juste
   * au-dessus de Sign up. »
   *
   * It was absolutely positioned, stuck at the top right — and it is that
   * position that made it overlap the banner as soon as the screen
   * narrowed. Bringing it back INTO THE FLOW removes the cause instead of
   * working around it: it can no longer overlap anything, at any
   * width, since it occupies its own place.
   *
   * The explicit order places it between the name and the row of buttons. The right
   * margin is that of Sign up, so that both align on the same edge.
   *
   * The row of buttons stays INTACT: the selector does not enter it, as the
   * Owner required and as the visual contract checks.
   */
  .sc-chrome-top .sc-lang {
    position: relative;
    align-self: flex-end;
    order: 3;
    /*
     * THE RIGHT EDGE ALIGNS WITH THAT OF SIGN UP, and a NEGATIVE margin
     * is needed for that.
     *
     * The row of buttons goes beyond the bar: it occupies the whole width of
     * the screen with its own 12 px of inset, whereas the bar keeps
     * 16. Sign up therefore ends 4 px further right than the inner edge of the
     * bar. A margin of 0 would leave the selector 4 px set back, and the
     * offset would show — which is precisely what the Owner looks at.
     */
    margin-right: -0.25rem;
    /*
     * TIGHT MARGINS: the selector now takes its own line, so
     * every pixel it grants itself lengthens the header. A negative margin at
     * the top brings it up against the name, without overlapping it — the two
     * share no column, the name being centered and the selector on the right.
     */
    margin-top: -0.75rem;
    margin-bottom: -0.25rem;
    z-index: 5;
  }
  .sc-chrome-top .sc-nav { order: 4; }
  .sc-banner-zone { flex: none; justify-content: center; }
  .sc-brand { text-align: center; font-size: 1.0625rem; }

  /*
   * ONE SINGLE ROW, guaranteed by nowrap and not by hoping it fits.
   * Six buttons over 390 px do not fit comfortably: horizontal
   * scrolling is the only honest way to hold « tout aligné de gauche à
   * droite » without stacking. The language selector stays last, hence on the
   * right — « même principe que sur PC ».
   */
  /*
   * THE ROW TAKES THE FULL WIDTH OF THE HEADER.
   *
   * The Owner, 2026-09-23: « tu dois utiliser toute la largeur du header pour
   * la rangee des boutons sur mobile, car la banniere sur version mobile se
   * trouve au-dessus, donc tu as toute la largeur. »
   *
   * He is right, and that is what makes the six buttons possible at 15 px. The
   * negative margins cancel the bar's side padding, which only makes
   * sense for the banner and the name: the row thus gains the 32 px that
   * I was taking from it, and the tightening applies to the SIDES of the buttons, never
   * to the text size.
   */
  .sc-nav {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    flex-wrap: nowrap;
    /*
     * space-between rather than flex-start: the six buttons occupy the whole
     * width, edge to edge. That is what « tout aligné de gauche
     * à droite » asks for, and it puts the language selector on the right, « même principe
     * que sur PC ».
     */
    justify-content: space-between;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 0.125rem;
    mask-image: linear-gradient(to right, rgb(0 0 0) calc(100% - 2rem), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, rgb(0 0 0) calc(100% - 2rem), transparent 100%);
  }
  .sc-nav::-webkit-scrollbar { display: none; }
  .sc-nav > * { flex: none; }
  /*
   * READABILITY COMES BEFORE SEEING EVERYTHING AT ONCE.
   *
   * Six readable buttons do not fit in 362 px. I had chosen to make them
   * fit by shrinking them: the Owner judged the result unreadable, and
   * he is right — a button that cannot be read serves no purpose, even if it is
   * visible.
   *
   * They therefore stay on ONE single row, as he requires, and the row
   * scrolls. The gradient at the right edge announces that there is more: without it, the
   * last cut-off button would read as a display defect.
   */
  /*
   * Third adjustment, and the last: the Owner said again « les boutons texte
   * sont minuscules et header et footer trop etroits ». 11 px then 13 px were
   * judged unreadable; we go to 15 px, the size of ordinary text.
   *
   * At 15 px the six buttons no longer fit in the width of a phone.
   * That is deliberate: they stay on ONE row, as requested, and the row
   * scrolls. His most recent word prevails, and it says readable.
   */
  /*
   * The tightening applies to the SIDES of the buttons, never to their text.
   * The Owner judged 11 px then 13 px unreadable: 15 px is a floor, not
   * a preference. It is therefore the padding that gives way.
   */
  /*
   * The Owner: « Sign up est coupe ». Geometrically it was not — there
   * remained 8 px before the edge of the screen. What made it look cut off
   * was that its TEXT almost touched the edge of its own button: 5 px.
   *
   * The air therefore comes back inside the buttons, and is taken back from the margins
   * of the row, which serve no purpose.
   */
  .sc-btn { padding: 0.5625rem 0.4375rem; font-size: 0.9375rem; }
  /*
   * SIGN UP ESCAPES THIS PADDING, on both axes.
   *
   * The rule above targets all buttons and gives back to the action frame the 9 px
   * of vertical padding that the action button rule had just removed from it. Without this override,
   * the Owner's request was only held in width — the frame looked
   * flattened on one side and intact on the other.
   *
   * The font stays at 0.9375rem, as he required.
   */
  .sc-chrome-top .sc-nav .sc-btn-action {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: 0.3125rem;
    padding-right: 0.3125rem;
  }

  /*
   * ON MOBILE, THE NAVIGATION BECOMES LINKS — except the action.
   *
   * The arithmetic left no choice. At 15 px, five framed buttons
   * need more than the width of a phone: either they overflow, or
   * their text touches the frame and looked cut off — that is what the Owner
   * saw on Sign up.
   *
   * Without frame or background, the four links only occupy their text: the
   * space frees up, each one breathes, and nothing can look cut off anymore
   * since there is no longer a box to cut.
   *
   * Sign up KEEPS its orange button: it is the action, and it must stay
   * visibly above the others. The Owner asked for it in orange-brown.
   */
  .sc-chrome-top .sc-nav .sc-btn:not(.sc-btn-action) {
    border-color: transparent;
    background: none;
    padding-left: 0.1875rem;
    padding-right: 0.1875rem;
  }
  .sc-chrome-top .sc-nav .sc-btn:not(.sc-btn-action):hover,
  .sc-chrome-top .sc-nav .sc-btn:not(.sc-btn-action):focus-visible {
    background: rgb(22 55 91 / 0.92);
    border-color: var(--website-accent-blueSoft);
  }
  .sc-lang-btn { gap: 0.3125rem; }
  .sc-globe { width: 0.9375rem; height: 0.9375rem; }

  /*
   * « Sur mobile, le texte est centré et la photo avec son slogan passe EN BAS
   * de la section » — Owner, for section 1 as well as for the last one.
   */
  /*
   * « Sur mobile, le texte est centré et la photo avec son slogan passe EN BAS
   * de la section » — Owner, for section 1 as well as for the last one. A
   * single column, and the media moves down to the second row.
   */
  .sc-split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

  /*
   * MOBILE MUST WIN OVER ROLE-SPECIFIC DESKTOP SPLITS.
   *
   * The desktop stylesheet defines more specific selectors for both the
   * connected-app block and the SEO enrichment block. Because those selectors
   * are more specific than a plain ".sc-split", the earlier mobile rule did
   * NOT actually collapse them to one column. The browser therefore kept the
   * desktop fractions on a phone, leaving only a very narrow text column and
   * breaking words into 2–3 letters per line.
   *
   * Override with the SAME semantic specificity inside the mobile query.
   */
  [data-role='connected-app'] .sc-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-split-media { grid-column: 1; grid-row: 2; }
  .sc-split-text { grid-column: 1; grid-row: 1; justify-items: center; text-align: center; }

  /*
   * CONNECTED-APP ON MOBILE.
   *
   * Desktop reserves 8.5rem on the right side of the text column for the
   * absolutely positioned mini app logo. Once the layout collapses to one
   * column on mobile, keeping that reservation squeezes the reading column
   * into a narrow strip. The logo also no longer belongs out of flow.
   *
   * The override is keyed to the semantic role, not the section number:
   * it therefore applies to the shared application section wherever it is
   * placed (section 3 on standard pages, section 4 on Enterprise).
   */
  [data-role='connected-app'] .sc-split-text {
    padding-right: 0;
    width: 100%;
  }
  [data-role='connected-app'] .sc-split-text .sc-media-img {
    position: static;
    right: auto;
    bottom: auto;
    margin: 0.5rem auto 0;
    max-width: 6.5rem;
  }

  /*
   * ENTERPRISE ON MOBILE — no document-level horizontal drift.
   *
   * The quote form is the only extra block on Enterprise. Every layer is
   * explicitly shrinkable to the viewport so an input, textarea or grid
   * intrinsic width cannot widen the page when the visitor drags a finger.
   * Intentional horizontal scrollers (header navigation, agent carousel)
   * keep their own local overflow.
   */
  .sc-entform,
  .sc-entform-grid,
  .sc-entform-field,
  .sc-entform input,
  .sc-entform textarea {
    min-width: 0;
    max-width: 100%;
  }
  .sc-entform-grid { grid-template-columns: minmax(0, 1fr); }

  .sc-section-head { flex-direction: column; align-items: stretch; }
  /* Tightened margins and padding: that much width given back to the thumbnails. */
  .sc-container { margin: 0 0.5rem; padding: 1.5rem 0.75rem; }
  .sc-section { padding: 3rem 1rem; }
  /*
   * TWO cards visible on mobile — the Owner's instruction: « sur PC on en voit
   * 5-6 apparents, sur mobile 2 ».
   *
   * At 390 px, the band window measures 304 px. Two cards of 8.5rem (136 px)
   * separated by 1rem (16 px) make exactly 304 px: the second card is
   * whole, not cut. With 9.5rem only 1.8 fit, and the second
   * was truncated — which reads as a defect, not as scrolling.
   */
  /*
   * TWO THUMBNAILS, AND LARGER.
   *
   * The Owner, 2026-09-23: « sur mobile il y a trop de modèles visibles d'un
   * coup, donc du coup les vignettes sont trop petites. 2 sont suffisants. »
   *
   * The width is computed on that of the screen rather than being frozen: two
   * cards occupy the band whatever the size of the phone, without
   * a third one peeking at the edge. A card frozen in rem
   * would let a bit of the next one stick out on a wider screen, and that
   * bit is exactly what the Owner sees as « trop de modèles ».
   */
  /*
   * The width is computed on the BAND, not on the screen.
   *
   * First attempt: calc(50vw - 2.25rem), i.e. 159 px. Measured: a single
   * whole card, because the band does not measure the screen but 268 px —
   * container margins and padding deducted. Computing on vw amounted to
   * guessing what remained after the margins.
   *
   * Here the base is a percentage of the TRACK, whose width is that of the
   * band: two cards occupy it exactly, whatever the size of the
   * phone, and no third one peeks at the edge.
   */
  .sc-band-track { gap: 1rem; }
  /*
   * TWO THUMBNAILS, AND AS LARGE AS POSSIBLE.
   *
   * A percentage of the track does not work: the track sizes itself on its
   * content, so its width would depend on the cards which depend on it. The
   * computation would go round in circles, and it did go round in circles — measured, the card
   * came out at 177 px for a 316 band.
   *
   * The base is therefore the width of the SCREEN, minus a MEASURED framing of
   * 74 px (container margins, padding, borders) and minus the gap of
   * 16 px between the two cards. This framing is in pixels and does not vary
   * with the size of the phone: the formula stays right from 360 to 430 px
   * wide, two full cards and no third one peeking at the edge.
   *
   * Value adjusted on 2026-09-23 after HAVING LOOKED at the screenshot: the numeric
   * measurement announced two whole cards, the eye showed the second one
   * cropped by a few pixels. A too-wide measurement tolerance had let the
   * defect through. A safety margin therefore replaces the pixel-exact
   * adjustment.
   *
   * If the container padding changes, this value must change with it.
   */
  .sc-card { width: calc(50vw - 3.125rem); }
}

/* Phone widths only: the banner and brand share the first row. */
@media (max-width: 639px) {
  .sc-chrome-top .sc-bar {
    display: grid;
    grid-template-columns: minmax(0, 56%) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0;
    padding: 0.5rem 0.75rem;
  }
  .sc-chrome-top .sc-banner-zone {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    justify-content: flex-start;
  }
  .sc-chrome-top .sc-banner-slot {
    width: 100%;
    max-width: none;
  }
  .sc-chrome-top .sc-brand {
    grid-column: 2;
    grid-row: 1;
    position: static;
    justify-self: center;
    align-self: center;
    margin: 0;
    text-align: center;
  }
  .sc-chrome-top .sc-lang {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: start;
    margin: 0;
  }
  .sc-chrome-top .sc-nav {
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }
}

[data-page-id='PUBLIC_HOME'] .sc-hero-actions-mobile .sc-btn-action {
  border: 3px solid var(--website-background-black);
  background:
    repeating-linear-gradient(172deg, rgb(255 255 255 / 0.12) 0px, transparent 2px, rgb(0 0 0 / 0.06) 3px),
    linear-gradient(135deg, var(--website-accent-aluminumLight), var(--website-accent-aluminumMid) 48%, var(--website-accent-aluminumDark));
  color: var(--website-text-dark);
  box-shadow: 0 -1px 0 rgb(255 255 255 / 0.4), 0 3px 8px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.6);
}

/* The menu action has one DOM instance; its desktop/tablet position stays above the hero. */
.sc-mobile-signup { display: none; }
@media (min-width: 820px) {
  [data-role='hero-intro'] .sc-inner { position: relative; padding-top: 5.03125rem; }
  [data-role='hero-intro'] .sc-hero-actions-mobile { position: absolute; top: 0; right: 0; }
}
@media (min-width: 768px) and (max-width: 819px) {
  [data-role='hero-intro'] .sc-inner { position: relative; padding-top: 8.25rem; }
  [data-role='hero-intro'] .sc-hero-actions-mobile { position: absolute; top: 0; left: 0; width: 100%; }
}
/*
 * THE HOME STACK (OB-660): the stack is placed where the row was; the row inside it is static;
 * the hero's top gap grows by the small link's line only, on the home page only.
 */
@media (min-width: 820px) {
  [data-page-id='PUBLIC_HOME'] [data-role='hero-intro'] .sc-inner { padding-top: calc(5.03125rem + 1.5rem); }
  [data-role='hero-intro'] .sc-hero-actions-stack { position: absolute; top: 0; right: 0; }
}
@media (min-width: 768px) and (max-width: 819px) {
  [data-page-id='PUBLIC_HOME'] [data-role='hero-intro'] .sc-inner { padding-top: calc(8.25rem + 1.5rem); }
  [data-role='hero-intro'] .sc-hero-actions-stack { position: absolute; top: 0; left: 0; width: 100%; }
}
@media (min-width: 768px) {
  [data-role='hero-intro'] .sc-hero-actions-stack > .sc-hero-actions-mobile { position: static; }
}


@media (min-width: 820px) {
  .sc-chrome-top .sc-nav .sc-btn-action {
    border-color: transparent;
    background: repeating-linear-gradient(172deg, rgb(255 255 255 / 0.13) 0px, transparent 2px, rgb(0 0 0 / 0.05) 3px), linear-gradient(135deg, var(--website-accent-aluminumLight), var(--website-accent-aluminumMid) 48%, var(--website-accent-aluminumDark));
    color: var(--website-text-dark);
  }
  .sc-hero-actions-mobile .sc-btn-action {
    border: 3px solid transparent;
    background: repeating-linear-gradient(172deg, rgb(255 255 255 / 0.12) 0px, transparent 2px, rgb(0 0 0 / 0.06) 3px) padding-box, linear-gradient(135deg, var(--website-accent-aluminumLight), var(--website-accent-aluminumMid) 48%, var(--website-accent-aluminumDark)) padding-box, linear-gradient(130deg, var(--website-text-light), var(--website-background-black) 23%, var(--website-accent-aluminumDark) 48%, var(--website-background-black) 72%, var(--website-text-light)) border-box;
    color: var(--website-text-dark);
    box-shadow: 0 0 0 1px var(--website-background-black), 0 3px 12px rgb(0 0 0 / 0.48), inset 0 1px 0 rgb(255 255 255 / 0.7);
  }
  .sc-hero-actions-mobile .sc-how-it-works {
    border: 3px solid transparent;
    background: linear-gradient(180deg, var(--website-accent-blackMetal), var(--website-background-black)) padding-box, linear-gradient(130deg, var(--website-text-light), var(--website-accent-aluminumMid) 25%, var(--website-text-light) 48%, var(--website-accent-aluminumDark) 72%, var(--website-text-light)) border-box;
    color: var(--website-text-light);
    box-shadow: 0 3px 12px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.08);
  }
  [data-page-id='PUBLIC_HOME'] #section-home-intelligence .sc-home-intelligence-media {
    display: block;
    width: 100%;
    max-width: 35rem;
    height: auto;
    aspect-ratio: 1672 / 941;
    object-fit: contain;
    border-radius: 0.875rem;
    justify-self: center;
  }
}
.sc-home-intelligence-media { display: none; }
@media (min-width: 1280px) {
  [data-page-id='PUBLIC_HOME'] #section-home-intelligence .sc-home-intelligence-media { transform: translateX(-1.75rem); }
  /* Home actions use a smooth aluminium finish on PC. */
  [data-page-id='PUBLIC_HOME'] .sc-chrome-top .sc-nav .sc-btn-action,
  [data-page-id='PUBLIC_HOME'] .sc-hero-actions-mobile .sc-btn-action {
    background: linear-gradient(165deg, var(--website-text-light) 0%, var(--website-accent-aluminumLight) 52%, var(--website-accent-aluminumMid) 100%);
    color: var(--website-text-dark);
    text-shadow: none;
  }
}
@media (max-width: 767px) {
  .sc-chrome-top .sc-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    align-items: center;
    gap: 0.375rem;
    min-height: 0;
    max-width: none;
    padding: 0.625rem 0.5rem 0.75rem;
  }
  .sc-chrome-top .sc-header-actions { display: contents; }
  .sc-chrome-top .sc-brand {
    grid-column: 1;
    grid-row: 1 / 3;
    position: static;
    transform: none;
    justify-self: center;
    align-self: center;
    margin: 0;
    padding: 0.25rem 0;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .sc-chrome-top .sc-mobile-signup {
    display: block;
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .sc-chrome-top .sc-lang {
    position: static;
    display: block;
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    align-self: start;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 1;
  }
  .sc-chrome-top .sc-banner-zone {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
  .sc-chrome-top .sc-banner-slot {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: auto;
    margin: 0;
    transform: none;
  }
  .sc-chrome-top .sc-nav {
    grid-column: 1;
    grid-row: 4;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.375rem 0.25rem;
    /*
     * 0.25rem, and 1 px sides on the frameless links below: at 360 px the
     * Turkish row (« Giriş Yap ») needed 357 px for 342 and was cut by the
     * page edge (DEC-OWNER-243). The links have no frame here, so only the
     * spacing gives way — never the 15 px text, never the single row.
     */
    gap: 0.25rem;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
    border: 1px solid var(--website-accent-aluminumDark);
    border-radius: 0.625rem;
    background: linear-gradient(180deg, var(--website-accent-blackMetal), var(--website-background-black));
  }
  .sc-chrome-top .sc-nav > .sc-btn {
    position: relative;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.9375rem;
    padding: 0.25rem 0.1875rem;
  }
  .sc-chrome-top .sc-nav > .sc-btn:not(.sc-btn-action) { padding-left: 0.0625rem; padding-right: 0.0625rem; }
  .sc-chrome-top .sc-nav > .sc-btn-action { display: none; }
  .sc-chrome-top .sc-nav > .sc-btn + .sc-btn::before {
    content: '';
    position: absolute;
    left: -0.25rem;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--website-accent-aluminumDark);
  }
  [data-role='hero-intro'] .sc-hero-actions-mobile {
    display: grid;
    justify-self: center;
    margin-top: 0.5rem;
  }
  .sc-chrome-top .sc-mobile-signup .sc-btn-action {
    display: inline-block;
    padding: 0.375rem 0.5rem;
    border-color: transparent;
    background: repeating-linear-gradient(172deg, rgb(255 255 255 / 0.12) 0px, transparent 2px, rgb(0 0 0 / 0.06) 3px), linear-gradient(135deg, var(--website-accent-aluminumLight), var(--website-accent-aluminumMid) 48%, var(--website-accent-aluminumDark));
    color: var(--website-text-dark);
  }
  .sc-hero-actions-mobile .sc-btn-action {
    border: 3px solid transparent;
    background: repeating-linear-gradient(172deg, rgb(255 255 255 / 0.12) 0px, transparent 2px, rgb(0 0 0 / 0.06) 3px) padding-box, linear-gradient(135deg, var(--website-accent-aluminumLight), var(--website-accent-aluminumMid) 48%, var(--website-accent-aluminumDark)) padding-box, linear-gradient(130deg, var(--website-text-light), var(--website-background-black) 23%, var(--website-accent-aluminumDark) 48%, var(--website-background-black) 72%, var(--website-text-light)) border-box;
    color: var(--website-text-dark);
    box-shadow: 0 0 0 1px var(--website-background-black), 0 3px 12px rgb(0 0 0 / 0.48), inset 0 1px 0 rgb(255 255 255 / 0.7);
  }
  .sc-hero-actions-mobile .sc-how-it-works {
    border: 3px solid transparent;
    background: linear-gradient(180deg, var(--website-accent-blackMetal), var(--website-background-black)) padding-box, linear-gradient(130deg, var(--website-text-light), var(--website-accent-aluminumMid) 25%, var(--website-text-light) 48%, var(--website-accent-aluminumDark) 72%, var(--website-text-light)) border-box;
    color: var(--website-text-light);
    box-shadow: 0 3px 12px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.08);
  }
}