/**
 * @file Critical above-the-fold UI for the marketing home.
 *
 * The signed-in header and the contextual design chooser must be stable before
 * the deferred marketing bundle arrives. Keep this file small and dependency
 * free so the first render never exposes raw account or button markup.
 */

.ufm-global-controls {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@layer overrides {
  .hero.active .hero-visual > .layout-illustration-cta {
    appearance: none;
    width: min(212px, calc(100% - 24px));
    min-width: 0;
    min-height: 104px;
    padding: 10px;
    position: absolute;
    z-index: 9;
    right: 8px;
    bottom: -116px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px 10px;
    overflow: hidden;
    border: 1px solid rgba(37, 26, 61, .14);
    border-radius: 18px;
    color: #171327;
    background: rgba(255, 253, 251, .96);
    box-shadow: 0 18px 46px rgba(37, 26, 61, .15);
    text-align: left;
    backdrop-filter: blur(14px);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }

  .hero.active .hero-visual > .layout-illustration-cta > i {
    width: 42px;
    height: 42px;
    grid-column: 1;
    grid-row: 1;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--theme-a), var(--theme-b));
    box-shadow: inset 0 0 0 1px rgba(23, 19, 39, .08);
  }

  .hero.active .hero-visual > .layout-illustration-cta > span {
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    gap: 2px;
  }

  .hero.active .hero-visual > .layout-illustration-cta small {
    overflow: hidden;
    color: #746d7b;
    font-size: .67rem;
    font-weight: 650;
    letter-spacing: .08em;
    line-height: 1.15;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .hero.active .hero-visual > .layout-illustration-cta strong {
    overflow: hidden;
    color: #171327;
    font-size: .86rem;
    font-weight: 720;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero.active .hero-visual > .layout-illustration-cta > b {
    min-height: 42px;
    padding: 0 12px;
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 12px;
    color: #fff;
    background: #251a3d;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .hero.active .hero-visual > .layout-illustration-cta > b::after {
    content: "\2192";
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1;
  }

  .hero.active .hero-visual > .layout-illustration-cta:hover {
    border-color: rgba(75, 53, 117, .52);
    box-shadow: 0 20px 52px rgba(37, 26, 61, .2);
  }

  .hero.active .hero-visual > .layout-illustration-cta:focus-visible {
    outline: 3px solid rgba(75, 53, 117, .35);
    outline-offset: 3px;
  }

  .hero.active .hero-visual:has(> .layout-illustration-cta:not([hidden])) {
    margin-bottom: 128px;
  }

  .layout-illustration-cta[hidden],
  body:not(:has(.hero[data-view="accueil"].active)) .layout-illustration-cta {
    display: none;
  }

  @media (min-width: 600px) {
    .hero.active .hero-visual > .layout-illustration-cta {
      width: 220px;
      min-height: 108px;
      right: 14px;
    }
  }

  @media (min-width: 768px) {
    .hero.active .hero-visual:has(> .layout-illustration-cta:not([hidden])) {
      margin-bottom: 0;
    }

    .hero.active .hero-visual > .layout-illustration-cta {
      width: 176px;
      min-height: 100px;
      right: 0;
      top: auto;
      bottom: 18px;
      transform: scale(1.6129);
      transform-origin: right bottom;
    }

    .hero.active .hero-visual > .layout-illustration-cta small {
      font-size: .61rem;
    }

    .hero.active .hero-visual > .layout-illustration-cta strong {
      font-size: .79rem;
    }
  }

  @media (min-width: 1024px) {
    .hero.active .hero-visual > .layout-illustration-cta {
      width: 184px;
      right: 6px;
      top: auto;
      bottom: 18px;
      transform: scale(1.1112);
      transform-origin: right bottom;
    }

    .hero.active .hero-visual > .layout-illustration-cta:hover {
      transform: translateY(-2px) scale(1.1112);
    }
  }

  @media (min-width: 1100px) {
    .hero.active .hero-visual > .layout-illustration-cta {
      transform: none;
    }

    .hero.active .hero-visual > .layout-illustration-cta:hover {
      transform: translateY(-2px);
    }
  }

  @media (min-width: 1280px) {
    .hero.active .hero-visual > .layout-illustration-cta {
      width: 194px;
      right: -44px;
      top: 50%;
      bottom: auto;
      transform: translateY(-50%);
      transform-origin: right center;
    }

    .hero.active .hero-visual > .layout-illustration-cta:hover {
      transform: translateY(-50%) translateY(-2px);
    }
  }

  @media (min-width: 1600px) {
    .hero.active .hero-visual > .layout-illustration-cta {
      width: 212px;
      right: -60px;
    }
  }

  @media (max-width: 359px) {
    .hero.active .hero-visual > .layout-illustration-cta {
      width: min(196px, calc(100% - 12px));
      right: 6px;
    }
  }

  /* The reassurance grid is a sibling of the promise inside a display:contents
     wrapper on phones. Give every item an explicit order: otherwise the grid's
     default order (0) moves it above the H1 and hides the product promise below
     the first viewport. */
  @media (max-width: 767px) {
    .hero.active > .hero-copy > .kicker { order: 1; }
    .hero.active > .hero-copy > .hero-promise { order: 2; }
    .hero.active > .hero-copy > p:not(.kicker) { order: 3; }
    .hero.active > .hero-copy > .actions { order: 4; }
    .hero.active > .hero-copy > .hero-how { order: 5; }
    .hero.active > .hero-product > .hero-visual { order: 6; }
    .hero.active > .hero-copy > .ufm-purchase-assurance.is-home { order: 7; }
    .hero.active > .hero-copy > .home-credibility.proof { order: 8; }
    .hero.active > .hero-product > .hero-price { order: 9; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero.active .hero-visual > .layout-illustration-cta {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .hero.active .hero-visual > .layout-illustration-cta,
    .hero.active .hero-visual > .layout-illustration-cta > b {
      border: 1px solid CanvasText;
    }
  }
}

/* Generated P1 clearance: scripts/sync-p1-home-clearance.mjs. */
/* P1: keep purchase in its own row. This shared component is also loaded on
   non-home surfaces: do not depend on a deferred marketing/navigation bundle
   to separate the notice from an actionable purchase bar. */
body #layouts .sticky-action {
  bottom: calc(86px + env(safe-area-inset-bottom));
  max-width: calc(100vw - 24px);
}
body #layouts { padding-bottom: 180px; }
/* The footer's last links must be scrollable above persistent controls. */
body:has(> .gdpr-alert) .ufm-footer {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
body:has(#layouts.active):has(> .gdpr-alert) .ufm-footer {
  padding-bottom: calc(208px + env(safe-area-inset-bottom));
}
@media (max-width:1279px) {
  /* Answers grow with their translated content. A viewport-height editor
     placed its last actions underneath the fixed mobile navigation. */
  body #aide.help-view {
    height: auto;
    min-height: calc(100svh - 68px);
    padding-bottom: 236px;
    grid-template-rows: auto auto;
    align-content: start;
    overflow: visible;
  }
  body #aide .help-shell { align-items: start; }
  body #aide .help-questions { max-height: 340px; }
  body #aide .help-answer { max-height: none; overflow: visible; }
  body #aide .help-answer>div { margin-top: 24px; }
  body #layouts .sticky-action { bottom: calc(158px + env(safe-area-inset-bottom)); }
  body #layouts { padding-bottom: 250px; }
  body:has(> .gdpr-alert) .ufm-footer {
    padding-bottom: calc(168px + env(safe-area-inset-bottom));
  }
  body:has(#layouts.active):has(> .gdpr-alert) .ufm-footer {
    padding-bottom: calc(280px + env(safe-area-inset-bottom));
  }
}
@media (max-width:767px) {
  body #aide .help-shell { grid-template-rows: minmax(130px,220px) auto; }
}
@media (max-width:1023px) {
  /* Choosing a design must never remove the purchase action on a phone.
     Keep the chosen design and the two actions as separate readable rows. */
  body #layouts .sticky-action {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 8px;
    padding: 10px;
  }
  body #layouts .sticky-action>span,
  body #layouts .sticky-action>span>span { min-width: 0; }
  body #layouts .sticky-action strong { overflow-wrap: anywhere; }
  body #layouts .sticky-action>div {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    width: 100%;
  }
  body #layouts .sticky-action>div :is(.primary,.secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    height: auto;
    padding: 8px;
    font-size: .8rem;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body #layouts { padding-bottom: 320px; }
  body:has(#layouts.active):has(> .gdpr-alert) .ufm-footer {
    padding-bottom: calc(320px + env(safe-area-inset-bottom));
  }
}
/* A contained reader is progressive enhancement only. Both scroll regions
   remain siblings; the answer's actions keep their native document order. */
@media (max-width:1279px) and (min-height:700px) {
  html.ufm-floating-layout-ready body #aide.help-view {
    height: var(--ufm-help-available,calc(100svh - 286px));
    min-height: 0;
    padding-bottom: 14px;
    grid-template-rows: auto minmax(0,1fr);
    overflow: hidden;
  }
  html.ufm-floating-layout-ready body #aide .help-shell {
    min-height: 0;
    align-items: stretch;
  }
  html.ufm-floating-layout-ready body #aide .help-questions {
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }
  html.ufm-floating-layout-ready body #aide .help-answer {
    min-height: 0;
    max-height: none;
    overflow: auto;
    scroll-padding-block: 12px;
  }
  html.ufm-floating-layout-ready body #aide :is(a,button):focus-visible {
    outline: 2px solid #4b3575;
    outline-offset: 2px;
  }
}
@media (max-width:1023px) and (min-height:700px) {
  html.ufm-floating-layout-ready body #aide .help-shell {
    grid-template-rows: minmax(110px,.4fr) minmax(0,.6fr);
  }
}
@media (max-width:599px) {
  html:not(.ufm-mobile-utility-active) body .gdpr-alert {
    bottom: calc(132px + env(safe-area-inset-bottom));
  }
  html:not(.ufm-mobile-utility-active):has(.gdpr-alert:not([hidden])) body #layouts .sticky-action {
    bottom: calc(208px + env(safe-area-inset-bottom));
  }
  html.ufm-mobile-utility-active body #layouts .sticky-action {
    bottom: calc(var(--ufm-mobile-utility-dock-h) + 12px);
  }
  html.ufm-mobile-utility-active:has(.gdpr-alert:not([hidden])) body #layouts .sticky-action {
    bottom: calc(var(--ufm-mobile-utility-dock-h) + 76px);
  }
  body:has(> .gdpr-alert) .ufm-footer {
    padding-bottom: calc(224px + env(safe-area-inset-bottom));
  }
  body:has(#layouts.active):has(> .gdpr-alert) .ufm-footer {
    padding-bottom: calc(376px + env(safe-area-inset-bottom));
  }
  body #layouts { padding-bottom: 376px; }
}
/* P1b: no-JS marketing tools stay in flow. */
html[data-ufm-css-bundle="marketing"]:not(.js) body #layouts .sticky-action {
  position: static;
  inset: auto;
  width: calc(100% - 32px);
  max-width: 1240px;
  margin: 20px auto;
  transform: none;
  translate: none;
}
html[data-ufm-css-bundle="marketing"]:not(.js) body .gdpr-alert {
  position: static;
  inset: auto;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 16px auto;
  transform: none;
  translate: none;
}
html[data-ufm-css-bundle="marketing"]:not(.js) body .ufm-back-to-top {
  position: static;
  inset: auto;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 16px auto;
  transform: none;
  translate: none;
}
/* End P1b no-JS marketing flow. */
/* End P1 floating clearance. */