/* Généré par scripts/webflow-native.mjs — ne pas éditer à la main. */

:where(.lg-page) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li, a, b, strong, em, small, sub, sup, img, label, blockquote, figure, figcaption, button, input, select, textarea, summary, details, span, div, section, main, header, footer, nav, article) { all: revert; box-sizing: border-box; }
:where(.lg-page) { font-size: 16px; line-height: normal; font-weight: 400; letter-spacing: normal; text-align: left; --anchor-offset: 96px; }
:where(.lg-page), :where(.lg-page) *, :where(.lg-page) *::before, :where(.lg-page) *::after { box-sizing: border-box; }
:where(.lg-page) section[id] { scroll-margin-top: var(--anchor-offset, 0px); }
:where(.lg-page) img, :where(.lg-page) svg { display: block; max-width: 100%; }
:where(.lg-page) svg:not(:root) { overflow: revert; }
:where(.lg-page) a { color: inherit; text-decoration: none; }
:where(.lg-page) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(.lg-page) ul { margin: 0; padding: 0; list-style: none; }
:where(.lg-page) h1, :where(.lg-page) h2, :where(.lg-page) h3, :where(.lg-page) h4, :where(.lg-page) p { margin: 0; }
/* hidden retiré par Webflow à la publication (voir processHtml). */
[data-lg-hidden] { display: none !important; }
/* normalize Webflow : svg:not(:root) { overflow: hidden } bat les classes
   seules qui veulent overflow visible. */
.lg-page svg:is(.hp-eco-svg, .hp-sc-sigsvg, .hp-stades-curve-svg) { overflow: visible; }
/* <button> importé = lien .w-button Webflow (fond bleu, padding 9px 15px) :
   retour à l'aspect du bouton remis à zéro (reset ci-dessus). */
.lg-page .w-button { padding: 1px 6px; background-color: transparent; border-radius: 0; line-height: normal; }
/* Code Embed Webflow : pas de clearfix autour des embeds de la page. */
.lg-page .w-embed::before, .lg-page .w-embed::after { content: none; }


@font-face {
  font-family: "Fraunces LG";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("https://alexandre-legaleo.github.io/legaleo-homepage-preview/fonts/Fraunces-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces LG";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("https://alexandre-legaleo.github.io/legaleo-homepage-preview/fonts/Fraunces-Italic-latin.woff2") format("woff2");
}

:root {
  /* Couleurs — reprises du CSS partagé Webflow de legaleo.webflow.io
     (variables --color--*), mêmes valeurs que front-legaleo-leo. */
  --color-beige: #f7f4ef;
  --color-black: #1f120e;
  --color-white: #fffefb;
  --color-border: #e6e0d3;
  --color-muted: #6f6757;
  --color-faint: #9a948a;

  --color-teal: #087f83;
  --color-teal-text: #065e61;
  --color-teal-bg: #e9fbfb;
  --color-teal-deep: #0f4a48;
  --color-cyan: #62e7eb;
  --color-cyan-light: #d9fdfb;

  /* Badge Leo — reprend .iconTile de legaleo-ai/components/design-system/LeoBadge */
  --color-leo-badge: #00383c;

  --color-brick: #a3310f;
  --color-lime: #e2e62f;

  --color-orange-bg: #ffe9bd;
  --color-orange-text: #a4620c;

  --color-green-text: #3c7a2d;
  --color-green-bg: #e5f5e0;

  /* Violet unique : relecture avocat (pastilles, commentaire, surlignage)
     et champs dynamiques (chips de variables). */
  --color-purple-text: #8c3ddb;
  --color-purple-bg: #f6e9fd;
  --color-purple-line: color-mix(in srgb, #8c3ddb 25%, transparent);

  /* Typo */
  --font-serif: "Fraunces LG", Georgia, serif;
  --font-sans: "Manrope", Arial, sans-serif;

  /* Rayons */
  --radius-pill: 100px;
  /* xl/lg calés sur --radius--main (1.3rem) et --radius--medium (1rem) de
     www.legaleo.ai : plus tendus, plus proches des cartes de la plateforme. */
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 16px;
  --radius-sm: 8px;

  /* Ombres */
  --shadow-card: 0 1px 2px rgb(31 18 14 / 0.04), 0 6px 16px -8px rgb(31 18 14 / 0.1);
  --shadow-float: 0 2px 4px rgb(31 18 14 / 0.05), 0 24px 48px -16px rgb(31 18 14 / 0.22);

  /* Largeur de contenu */
  --wrap-max: 1200px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

.lg-page {
  font-family: var(--font-sans);
  color: var(--color-black);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hp-btn:focus-visible,
.hp-chip:focus-visible,
.hp-opt:focus-visible,
.hp-aud:focus-visible,
.hp-faq-i summary:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 3px;
}

.hp-h2 .hp-em {
  color: var(--color-teal);
}

.hp-h2-light .hp-em {
  color: var(--color-cyan);
}

.hp-checks li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.hp-checks li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* Pastille teal pleine, coche blanche (homepage et page contact) */
  background: var(--color-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffefb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.hp-bars li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.hp-bars strong {
  color: var(--color-black);
  font-weight: 800;
}

.hp-bars li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-teal);
  translate: 0 -50%;
}

.hp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  white-space: nowrap;
  /* Même dessin que le Pill de la plateforme (legaleo-ai/components/
     design-system/Pill) : fond teinté + fin contour dérivé du texte. */
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, opacity 0.35s ease, transform 0.35s var(--ease-out);
}

.hp-pill--teal { color: #087f83; background-color: #e8f5f5; }

.hp-pill--orange { color: #f57c00; background-color: #fff4e6; }

.hp-pill--green { color: #24856d; background-color: color-mix(in srgb, #24856d 10%, white); }

.hp-pill--blue { color: #00a5eb; background-color: #e5f3fe; }

.hp-pill--purple { color: var(--color-purple-text); background-color: var(--color-purple-bg); }

.hp-pill--dark { color: var(--color-white); background-color: var(--color-black); }

.hp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--color-white);
  font-size: 9.5px;
  font-weight: 800;
}

.hp-avatar--teal { background-color: var(--color-teal); }

.hp-avatar--orange { background-color: #fc9d1f; }

.hp-avatar--purple { background-color: var(--color-purple-text); }

.hp-leo-glyph {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362e7eb' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 2.5v6M12 15.5v6M2.5 12h6M15.5 12h6M5.3 5.3l4.2 4.2M14.5 14.5l4.2 4.2M18.7 5.3l-4.2 4.2M9.5 14.5l-4.2 4.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.has-lottie > .hp-leo-glyph {
  visibility: hidden;
}

.hp-leo-tile .hp-leo-glyph {
  width: 30px;
  height: 30px;
}

.hp-leo-tile--sm .hp-leo-glyph {
  width: 19px;
  height: 19px;
}

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 640px) {
  .hp-block {
    padding: 64px 20px;
  }

  .hp-block-notop {
    padding-top: 24px;
  }

  .hp-h2 {
    font-size: 29px;
    letter-spacing: -0.4px;
  }

  .hp-h2-xl {
    font-size: 32px;
  }

  .hp-h3b {
    font-size: 22px;
  }

  .hp-lede2,
  .hp-lede-c {
    font-size: 16px;
  }
}

.hp-btn .hp-beta {
  color: var(--color-lime);
  background-color: var(--color-black);
}

.hp-faq-i summary {
  position: relative;
  display: block;
  padding: 24px 48px 24px 4px;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

.hp-faq-i summary::-webkit-details-marker {
  display: none;
}

.hp-faq-i summary:hover {
  color: var(--color-teal);
}

.hp-faq-i summary::before,
.hp-faq-i summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background-color: currentColor;
  transition: transform 0.3s var(--ease-out);
}

.hp-faq-i summary::after {
  transform: rotate(90deg);
}

.hp-faq-i[open] summary::after {
  transform: rotate(0);
}

.hp-faq-a p {
  max-width: 680px;
  padding: 0 4px 24px;
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1.6;
}

.hp-faq-a p:not(:last-child) {
  padding-bottom: 12px;
}

@media (max-width: 640px) {
  .hp-faq-i summary {
    padding: 20px 40px 20px 0;
    font-size: 16px;
  }
}

.hp-fold > .hp-hero {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.hp-fold > .hp-hero > .hp-hero-grid {
  width: 100%;
}

.hp-hero {
  --hero-wrap: 1320px;
}

.hp-h1 .hp-em {
  color: var(--color-teal);
}

.hp-hero-copy > :nth-child(2) { --reveal-delay: 100ms; }

.hp-hero-copy > :nth-child(3) { --reveal-delay: 200ms; }

.hp-hero-copy > :nth-child(4) { --reveal-delay: 300ms; }

.hp-h1 sup {
  font-size: 0.5em;
  line-height: 0;
  vertical-align: 0.8em;
}

.hp-proofs li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hp-proofs li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-teal-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087f83' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.hp-hero-visual {
  --bleed: clamp(0px, calc((100vw - var(--hero-wrap)) / 2 - 48px), 140px);
}

.hp-eco {
  position: relative;
  container-type: inline-size;
}

.js-reveal .hp-eco:not(.is-ready) {
  opacity: 0;
}

.hp-eco::before,
.hp-eco::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hp-eco::before {
  inset: -4%;
  background-image: radial-gradient(rgb(8 127 131 / 0.2) 1px, transparent 1.6px);
  background-size: 22px 22px;
  mask-image: radial-gradient(closest-side, #000 35%, transparent);
}

.hp-eco::after {
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(98 231 235 / 0.35), transparent);
  filter: blur(20px);
}

.hp-eco-stage {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
}

.hp-eco-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hp-eco-ring {
  stroke: rgb(8 127 131 / 0.16);
  stroke-width: 1;
}

.hp-eco-ring--outer {
  stroke-dasharray: 2 9;
  stroke-linecap: round;
}

.hp-eco-ring--orbit {
  stroke: rgb(8 127 131 / 0.24);
  stroke-width: 1.2;
}

.hp-eco-ring--inner {
  stroke-dasharray: 5 10;
}

.hp-eco-moons--orbit circle { fill: var(--color-teal); }

.hp-eco-moons--inner circle { fill: var(--color-cyan); }

.hp-eco-spokes path {
  stroke: rgb(8 127 131 / 0.25);
  stroke-width: 1.5;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}

.hp-eco-trail {
  stroke: var(--color-teal);
  stroke-width: 3;
  stroke-linecap: butt;
}

.hp-eco-trail--glow {
  stroke: var(--color-cyan);
  stroke-width: 11;
  opacity: 0.8;
  filter: url(#hp-eco-blur);
}

.hp-eco-token-glow { fill: url(#hp-eco-glow); }

.hp-eco-token-dot {
  fill: var(--color-white);
  stroke: var(--color-teal);
  stroke-width: 2.5;
}

.hp-eco-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 27cqw;
  aspect-ratio: 1;
  translate: -50% -50%;
}

.hp-eco-core-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 32%;
  color: var(--color-white);
  background:
    radial-gradient(90% 70% at 30% 15%, rgb(98 231 235 / 0.28), transparent 60%),
    linear-gradient(160deg, #13605d, var(--color-teal-deep) 55%, #0a3634);
  box-shadow:
    inset 0 1px 0 rgb(255 254 251 / 0.18),
    0 0 0 1px rgb(98 231 235 / 0.25),
    0 24px 60px -18px rgb(8 127 131 / 0.7);
  text-align: center;
}

.hp-eco-logo {
  width: 58%;
  height: auto;
  color: var(--color-white);
}

.hp-eco-core-n {
  margin-top: 1.2cqw;
  color: var(--color-cyan);
  font-family: var(--font-serif);
  font-size: 7.2cqw;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hp-eco-core-l {
  margin-top: 0.8cqw;
  color: rgb(255 254 251 / 0.72);
  font-size: max(8px, 1.75cqw);
  font-weight: 600;
}

.hp-eco-halo {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgb(98 231 235 / 0.6);
  border-radius: 34%;
  animation: hp-eco-breathe 3.2s var(--ease-out) infinite;
}

.hp-eco-halo--2 {
  animation-delay: 1.6s;
}

@keyframes hp-eco-breathe {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 0; transform: scale(1.45); }
}

.hp-eco-sat {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  /* Assez large pour le plus long statut au repos (« Avec l'assistant IA
     Leo ») sur une ligne. Les pastilles latérales (centre à 17 %) touchent
     presque le bord de la scène à cette largeur. */
  width: 33cqw;
  border: 1px solid rgb(31 18 14 / 0.07);
  border-radius: 2.8cqw;
  padding: 1.3cqw 1.8cqw 1.3cqw 1.3cqw;
  background-color: var(--color-white);
  box-shadow: var(--shadow-float);
  translate: -50% -50%;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  /* Couche GPU dédiée : évite le scintillement pendant les animations GSAP. */
  will-change: transform;
}

.hp-eco.is-interactive .hp-eco-sat {
  cursor: pointer;
  user-select: none;
}

.hp-eco.is-interactive .hp-eco-sat:hover {
  border-color: rgb(98 231 235 / 0.7);
}

.hp-eco-sat.is-active {
  border-color: var(--color-cyan);
  box-shadow: 0 0 0 4px rgb(98 231 235 / 0.3), var(--shadow-float);
}

.hp-eco-ico {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 5.8cqw;
  height: 5.8cqw;
  border-radius: 1.6cqw;
}

.hp-eco-ico svg {
  width: 56%;
  height: 56%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hp-eco-ico .hp-leo-glyph {
  width: 56%;
  height: 56%;
}

.hp-eco-ico--leo {
  position: relative;
}

.hp-eco-ico--teal { color: var(--color-teal); background-color: var(--color-teal-bg); }

.hp-eco-ico--orange { color: var(--color-orange-text); background-color: var(--color-orange-bg); }

.hp-eco-ico--green { color: var(--color-green-text); background-color: var(--color-green-bg); }

.hp-eco-ico--brick { color: var(--color-brick); background-color: #fbe7df; }

.hp-eco-ico--purple { color: var(--color-purple-text); background-color: var(--color-purple-bg); }

.hp-eco-ico--leo { background-color: var(--color-leo-badge); }

.hp-eco-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.hp-eco-txt strong {
  font-size: max(10px, 2.2cqw);
  font-weight: 700;
}

.hp-eco-status {
  overflow: hidden;
  color: var(--color-muted);
  font-size: max(9px, 1.8cqw);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.hp-eco-status.is-done {
  color: var(--color-green-text);
}

@container (max-width: 440px) {
  .hp-eco-sat {
    width: auto;
    gap: 6px;
    border-radius: 12px;
    padding: 5px 9px 5px 5px;
  }

  .hp-eco-ico {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }

  .hp-eco-txt strong {
    font-size: 11px;
  }

  .hp-eco-status {
    display: none;
  }

  .hp-eco-core-l {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-eco-halo {
    display: none;
  }
}

@media (max-width: 1100px) {
  .hp-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .hp-hero-copy {
    max-width: 720px;
  }

  /* Empilé sous le texte : le player reprend sa taille pleine, dans la
     grille. */
  .hp-hero-visual {
    justify-self: center;
    width: 100%;
    max-width: 880px;
  }
}

@media (max-width: 640px) {
  .hp-hero {
    padding: 48px 20px 72px;
  }

  .hp-hero {
    padding-top: 110px;
  }

  .hp-h1 {
    font-size: 34px;
    letter-spacing: -0.6px;
  }

  .hp-lede {
    font-size: 16px;
  }

  .hp-ctarow .hp-btn {
    flex: 1 1 auto;
  }

  /* Sur mobile, le hero se suffit : canevas des scènes trop réduit pour
     rester lisible, pas de player. */
  .hp-hero-visual {
    display: none;
  }
}

.hp-marquee-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
  width: max-content;
  max-width: 100%;
}

.hp-marquee.is-running {
  mix-blend-mode: multiply;
}

.hp-marquee.is-running .hp-marquee-track {
  flex-wrap: nowrap;
  max-width: none;
  animation: hp-marquee 38s linear infinite;
}

.hp-marquee:hover .hp-marquee-track {
  animation-play-state: paused;
}

.hp-marquee img {
  height: var(--h, 34px);
  width: auto;
  mix-blend-mode: multiply;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.hp-marquee img:hover {
  filter: none;
  opacity: 1;
}

@keyframes hp-marquee {
  to {
    transform: translateX(calc(-50% - 28px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-marquee.is-running .hp-marquee-track {
    animation: none;
  }
}

.hp-stades-curve-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  overflow: visible;
  /* Courbe et aire s'effacent aux deux extrémités au lieu d'être coupées net. */
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.hp-stades-curve-area {
  fill: url(#hp-stades-curve-fade);
  clip-path: inset(0 100% 0 0);
}

.hp-stades-curve.is-visible .hp-stades-curve-area {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.6s cubic-bezier(0.45, 0, 0.2, 1) 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .hp-stades-curve .hp-stades-curve-area,
  .hp-stades-curve .hp-stades-curve-line {
    clip-path: none;
    stroke-dashoffset: 0;
    transition: none !important;
  }
}

.hp-stades-curve-line {
  fill: none;
  stroke: var(--color-teal);
  stroke-width: 2.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}

.hp-stades-curve.is-visible .hp-stades-curve-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.45, 0, 0.2, 1) 0.2s;
}

.hp-stades-mark {
  /* Colonne pleine hauteur : le libellé est calé en bas (même niveau pour
     les trois), le point reste posé sur la courbe (--y) et un pointillé le
     relie au libellé. */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

.hp-stades-mark::after {
  content: "";
  position: absolute;
  top: calc(var(--y) + 7px);
  bottom: 56px;
  left: 50%;
  border-left: 1.5px dashed rgb(8 127 131 / 0.35);
}

.hp-stades-mark::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(var(--y) - 8px);
  left: calc(50% - 7px); /* centré optiquement sur le pointillé (::after, 1.5px) */
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: var(--color-teal);
}

.hp-stades-mark b {
  color: var(--color-teal);
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.4px;
  text-transform: none;
}

.hp-sv[hidden] {
  display: none;
}

.hp-stade {
  --stade-in: 22px;
}

.hp-stade > :not(.hp-sv, .hp-stade-offer) {
  margin-inline: var(--stade-in);
}

.hp-stades > :nth-child(2) {
  --reveal-delay: 100ms;
}

.hp-stades > :nth-child(3) {
  --reveal-delay: 200ms;
}

.hp-stade > .hp-stade-offer {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  margin: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  background-color: var(--color-teal);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hp-stade > .hp-stade-offer--growth {
  background-color: var(--color-teal-deep);
}

.hp-stade > .hp-stade-offer--custom {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-right: 4px;
  background-color: var(--color-black);
}

.hp-checks .hp-stade-soon {
  display: inline-block;
  margin-left: 4px;
  vertical-align: 1px;
  font-weight: 800;
  line-height: 1.5;
  text-transform: uppercase;
}

.hp-stade-leo {
  --leo-pad: 14px;
}

.hp-stade > .hp-stade-leo {
  margin-inline: calc(var(--stade-in) - var(--leo-pad));
}

.hp-stade-leo strong {
  color: var(--color-teal-text);
  font-weight: 800;
}

.hp-stade-lead + .hp-checks {
  margin-top: 10px;
}

.hp-sv:not([hidden]) + .hp-h3 {
  margin-top: 30px;
}

.hp-stade .hp-checks li {
  text-wrap: pretty;
}

.hp-stade .hp-checks {
  margin-bottom: 28px;
}

.hp-stade-stat strong {
  color: var(--color-teal);
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.8px;
}

.hp-sv {
  --sv-shadow: 0 0 28px rgb(31 18 14 / 0.08);
}

.hp-sv-meta {
  display: block;
  color: var(--color-muted);
  font-size: 10.5px;
  font-weight: 600;
}

.hp-sv--launch {
  background:
    radial-gradient(rgb(8 127 131 / 0.12) 1px, transparent 1.5px) 0 0 / 18px 18px,
    linear-gradient(160deg, #eefaf9, #dff3f2);
}

.hp-sv-doc {
  --line-t: 0.42s; /* durée d'écriture d'une ligne */
  --line-gap: 0.26s; /* décalage entre deux lignes (stagger) */
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgb(31 18 14 / 0.06);
  border-radius: 14px;
  padding: 14px 16px 18px;
  background-color: var(--color-white);
  box-shadow: var(--sv-shadow);
}

.hp-sv-doc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.hp-sv-doc-ico {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--color-teal-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087f83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E") center / 17px no-repeat;
}

.hp-sv-doc-t {
  min-width: 0;
}

.hp-sv-doc-t strong {
  display: block;
  font-size: 12px;
}

.hp-sv-line {
  position: relative;
  display: block;
  width: 0;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: #eef0f0;
}

.hp-sv-line--para {
  margin-top: 5px;
}

.hp-sv.is-writing .hp-sv-line {
  width: var(--w);
  animation: hp-sv-write var(--line-t) cubic-bezier(0.3, 0, 0.6, 1) calc(var(--i) * var(--line-gap)) backwards;
}

.hp-sv-line::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background-color: var(--color-teal-deep);
  opacity: 0;
}

.hp-sv.is-writing .hp-sv-line::after {
  /* Le curseur passe à la ligne suivante dès qu'elle démarre : un seul à la fois. */
  animation: hp-sv-caret var(--line-gap) steps(1) calc(var(--i) * var(--line-gap));
}

@keyframes hp-sv-write {
  from { width: 0; }
}

@keyframes hp-sv-caret {
  from, to { opacity: 1; }
}

.hp-sv-stamp {
  position: absolute;
  top: 0;
  right: 12px;
  translate: 0 calc(-50% - 3px);
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 4px 10px 4px 24px;
  color: var(--color-green-text);
  background: var(--color-green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c7a2d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") 8px 50% / 11px no-repeat;
  font-weight: 700;
  opacity: 0;
  transform: scale(1.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hp-sv.is-ready .hp-sv-stamp {
  opacity: 1;
  transform: none;
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hp-sv--network, .hp-sv--fleet {
  background:
    radial-gradient(rgb(8 127 131 / 0.12) 1px, transparent 1.5px) 0 0 / 18px 18px,
    linear-gradient(160deg, #eefaf9, #dff3f2);
}

.hp-sv-col {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.hp-sv-col-l {
  margin-bottom: 2px;
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hp-sv-file,
.hp-sv-alert {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 11px;
  padding: 7px 9px;
  color: var(--color-black);
  background-color: var(--color-white);
  box-shadow: var(--sv-shadow);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.hp-sv-file {
  transform: translate(-24px, -6px) rotate(-4deg);
}

.hp-sv-alert {
  transform: translateY(10px) scale(0.94);
}

.hp-sv.is-importing .hp-sv-file,
.hp-sv.is-alerting .hp-sv-alert {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.35s ease calc(var(--i) * 0.28s),
    transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) calc(var(--i) * 0.28s);
}

.hp-sv.is-alerting .hp-sv-alert {
  transition-delay: calc(var(--i) * 0.5s);
}

.hp-sv-file-ico {
  flex-shrink: 0;
  width: 22px;
  height: 26px;
  border-radius: 4px;
  background: var(--color-purple-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c3ddb' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 9h10M7 13h10M7 17h6'/%3E%3C/svg%3E") center / 15px no-repeat;
}

.hp-sv-file-t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hp-sv-ok {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-green-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat;
  transform: scale(0);
  transition: transform 0.2s ease;
}

.hp-sv.is-importing .hp-sv-ok {
  transform: none;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.28s + 0.45s);
}

.hp-sv-alert-t {
  min-width: 0;
}

.hp-sv-alert-t strong {
  display: block;
}

.hp-sv-alert-t {
  flex: 1;
}

.hp-sv-file-t .hp-sv-meta {
  font-weight: 500;
}

.hp-sv-due {
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  padding: 2px 7px;
  color: var(--color-orange-text);
  background-color: var(--color-orange-bg);
  font-size: 10px;
  font-weight: 800;
}

.hp-sv-alert--case .hp-sv-due,
.hp-sv-due--ok {
  color: var(--color-green-text);
  background-color: var(--color-green-bg);
}

.hp-sv-fleet {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.hp-sv-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.hp-sv-kpi,
.hp-sv-brand,
.hp-sv-team {
  border-radius: 11px;
  background-color: var(--color-white);
  box-shadow: var(--sv-shadow);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.hp-sv.is-shown .hp-sv-kpi,
.hp-sv.is-shown .hp-sv-brand,
.hp-sv.is-shown .hp-sv-team {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.35s ease calc(var(--i) * 0.18s),
    transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) calc(var(--i) * 0.18s);
}

.hp-sv-kpi {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 600;
}

.hp-sv-kpi b {
  color: var(--color-teal);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hp-sv-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.hp-sv-team {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: var(--color-muted);
  font-size: 10.5px;
  font-weight: 600;
  background-color: transparent;
  box-shadow: none;
}

.hp-sv-avs {
  display: flex;
}

.hp-sv-avs i {
  width: 20px;
  height: 20px;
  margin-right: -6px;
  border: 2px solid #eefaf9;
  border-radius: 50%;
  background-color: var(--color-cyan);
}

.hp-sv-avs i:nth-child(2) { background-color: var(--color-teal); }

.hp-sv-avs i:nth-child(3) { background-color: var(--color-teal-deep); }

.hp-sv-avs i:nth-child(4) { margin-right: 0; background-color: var(--color-black); }

@media (prefers-reduced-motion: reduce) {
  .hp-sv * {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 1100px) {
  .hp-stades-curve {
    display: none;
  }

  .hp-stades {
    grid-template-columns: minmax(0, 1fr);
    max-width: 600px;
    margin-inline: auto;
    margin-top: 64px;
    /* Place pour la pill à cheval de la carte suivante. */
    row-gap: 40px;
  }

  .hp-stade-range {
    display: block;
  }
}

@media (max-width: 640px) {
  .hp-logos {
    padding: 22px 20px;
  }

  .hp-logos-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .hp-logos-label {
    max-width: none;
    text-align: center;
  }

  .hp-stade {
    padding: 30px 10px 26px;
  }

  .hp-stade {
    --stade-in: 12px;
  }


  .hp-sv {
    height: 196px;
    gap: 12px;
    padding: 16px;
  }

  /* Colonnes étroites : les contrats perdent leur année. */
  .hp-sv-file-y {
    display: none;
  }

  .hp-sv-file,
  .hp-sv-alert {
    padding: 7px 8px;
  }
}

.hp-step.is-reached .hp-step-n {
  color: var(--color-muted);
}

.hp-step.is-current .hp-step-n {
  color: var(--color-teal);
}

.hp-step-verb > span {
  display: inline-block;
}

.js-reveal .hp-step-verb > span {
  transform: translateY(110%);
}

.js-reveal .hp-step.is-reached .hp-step-verb > span {
  transform: none;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hp-step-verb > span,
  .hp-step-n {
    transition: none !important;
  }
}

.hp-feature--rev .hp-feature-copy {
  order: 2;
}

.hp-feature-visual {
  --reveal-delay: 120ms;
}

.hp-feature-visual::before {
  content: "";
  position: absolute;
  inset: -34px;
  z-index: -1;
  border-radius: var(--radius-xl);
  background: linear-gradient(200deg, #fbf7ef, #f5eee1);
}

.hp-feature .hp-feature-copy {
  max-width: 500px;
}

@media (max-width: 991px) {

  .hp-feature--rev .hp-feature-copy {
    order: 0;
  }

  .hp-feature .hp-feature-copy {
    max-width: 640px;
  }

  .hp-feature-visual::before {
    inset: -16px;
  }
}

@media (max-width: 640px) {
  /* Gouttière trop étroite pour suspendre le numéro : il revient dans le
     flux, devant le verbe. */
  .hp-step-n {
    position: static;
    align-self: flex-start;
    margin-top: 2px;
    font-size: 11px;
  }

  /* Plus petit : « Générez vos contrats » tient sur la largeur d'un mobile */
  .hp-step-verb {
    font-size: 36px;
    letter-spacing: -1px;
  }

  .hp-feature {
    gap: 28px;
    padding: 44px 0;
  }

  .hp-feature-visual::before {
    inset: -10px;
    border-radius: var(--radius-lg);
  }
}

.hp-win,
.hp-float {
  --color-white: #fff;
  --color-border: #e3e3e3;
  --color-muted: #757575;
  --color-faint: #a3a3a3;
  --app-soft: #f5f8f8;
  --app-line: #eef0f0;
  --app-radius: 10px;
  --app-radius-btn: 5px;
}

.hp-float {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--app-radius);
  padding: 12px 14px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-float);
  font-size: 11px;
  line-height: 1.4;
}

.hp-float-meta {
  color: var(--color-muted);
  font-size: 10.5px;
}

.hp-win {
  --shell: #087f83;
  --rail-w: 40px;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
  border-radius: var(--app-radius);
  background-color: var(--shell);
  box-shadow: var(--shadow-float);
  font-size: 11.5px;
}

.hp-win--dark {
  --shell: var(--color-black);
}

.hp-shell-i {
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

.hp-shell-i[data-i="plus"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="layout-dashboard"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="file-text"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="handshake"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="map-pinned"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8c0 3.613-3.869 7.429-5.393 8.795a1 1 0 0 1-1.214 0C9.87 15.429 6 11.613 6 8a6 6 0 0 1 12 0'/%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Cpath d='M8.714 14h-3.71a1 1 0 0 0-.948.683l-2.004 6A1 1 0 0 0 3 22h18a1 1 0 0 0 .948-1.316l-2-6a1 1 0 0 0-.949-.684h-3.712'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="archive"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='5' x='2' y='3' rx='1'/%3E%3Cpath d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="users"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="files"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2a2 2 0 0 1 1.414.586l4 4A2 2 0 0 1 21 8v7a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z'/%3E%3Cpath d='M15 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M5 7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 1.732-1'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="sparkles"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z'/%3E%3Cpath d='M20 2v4'/%3E%3Cpath d='M22 4h-4'/%3E%3Ccircle cx='4' cy='20' r='2'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="clipboard-check"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="search"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="bell"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="hourglass"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14'/%3E%3Cpath d='M5 2h14'/%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22'/%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="list"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 19h.01'/%3E%3Cpath d='M8 5h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 19h13'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="scale"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="message-square"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="clock"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v6l4 2'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="paperclip"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="arrow-right"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="check"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="chevron-left"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="chevron-down"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="scan-search"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m16 16-1.9-1.9'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="calendar-clock"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 14v2.2l1.6 1'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5'/%3E%3Cpath d='M3 10h5'/%3E%3Cpath d='M8 2v4'/%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="user-cog"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 15H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='m14.305 16.53.923-.382'/%3E%3Cpath d='m15.228 13.852-.923-.383'/%3E%3Cpath d='m16.852 12.228-.383-.923'/%3E%3Cpath d='m16.852 17.772-.383.924'/%3E%3Cpath d='m19.148 12.228.383-.923'/%3E%3Cpath d='m19.53 18.696-.382-.924'/%3E%3Cpath d='m20.772 13.852.924-.383'/%3E%3Cpath d='m20.772 16.148.924.383'/%3E%3Ccircle cx='18' cy='15' r='3'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="book-open"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="life-buoy"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.93 4.93 4.24 4.24'/%3E%3Cpath d='m14.83 9.17 4.24-4.24'/%3E%3Cpath d='m14.83 14.83 4.24 4.24'/%3E%3Cpath d='m9.17 14.83-4.24 4.24'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="eye"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="save"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7'/%3E%3Cpath d='M7 3v4a1 1 0 0 0 1 1h7'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="ellipsis-vertical"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='12' cy='5' r='1'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="arrow-up-down"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="chevrons-right"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="undo-2"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="variables"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H6a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M9 20H6a2 2 0 0 1-2-2v-3'/%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M15 20h3a2 2 0 0 0 2-2v-3'/%3E%3Cpath d='M10 4h4M10 20h4M12 6v12'/%3E%3C/svg%3E"); }

.hp-shell-i[data-i="leo"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 2.5v6M12 15.5v6M2.5 12h6M15.5 12h6M5.3 5.3l4.2 4.2M14.5 14.5l4.2 4.2M18.7 5.3l-4.2 4.2M9.5 14.5l-4.2 4.2'/%3E%3C/svg%3E"); }

.hp-shell-top {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 0;
  color: #fff;
}

.hp-shell-logo {
  flex-shrink: 0;
  width: 100px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 255 79' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M75.958 63.9758V23.5039H79.9836V63.9758H75.958Z'/%3E%3Cpath d='M100.721 64.8025C97.8363 64.8025 95.3385 64.1584 93.2269 62.8746C91.1153 61.5909 89.4779 59.7821 88.3102 57.4528C87.1425 55.1235 86.5586 52.3883 86.5586 49.2472C86.5586 46.1062 87.1337 43.1901 88.2838 40.8211C89.434 38.4521 91.0539 36.6257 93.1479 35.3419C95.2375 34.0582 97.709 33.4141 100.558 33.4141C103.407 33.4141 105.975 34.089 108.039 35.439C110.102 36.7889 111.665 38.7212 112.723 41.2358C113.781 43.7504 114.263 46.7503 114.176 50.2399H110.067V48.8061C109.992 44.9504 109.167 42.0431 107.586 40.08C106.006 38.1168 103.701 37.133 100.668 37.133C97.6344 37.133 95.0575 38.1698 93.3674 40.2432C91.6773 42.3166 90.8344 45.2724 90.8344 49.1105C90.8344 52.9486 91.6773 55.7587 93.3674 57.8234C95.0575 59.888 97.4544 60.9203 100.558 60.9203C102.678 60.9203 104.527 60.4306 106.107 59.4468C107.687 58.4631 108.934 57.0469 109.847 55.1941L113.601 56.6543C112.433 59.2439 110.712 61.2468 108.438 62.6717C106.164 64.0922 103.592 64.8069 100.725 64.8069L100.721 64.8025ZM89.4077 50.2399V46.8518H112.011V50.2399H89.4077Z'/%3E%3Cpath d='M131.705 64.802C128.949 64.802 126.591 64.1094 124.638 62.7241C122.684 61.3389 121.187 59.4596 120.147 57.0949C119.106 54.7259 118.584 52.0569 118.584 49.0835C118.584 46.1101 119.098 43.4676 120.134 41.0985C121.165 38.7295 122.649 36.859 124.585 35.4826C126.521 34.1062 128.839 33.418 131.543 33.418C134.247 33.418 136.657 34.0974 138.558 35.4561C140.459 36.8149 141.895 38.6722 142.873 41.0324C143.848 43.3926 144.34 46.0748 144.34 49.0835C144.34 52.0922 143.857 54.7039 142.887 57.0817C141.916 59.4596 140.494 61.3389 138.611 62.7241C136.728 64.1094 134.427 64.802 131.705 64.802ZM131.982 78.0191C130.468 78.0191 128.975 77.7941 127.504 77.3441C126.034 76.8941 124.677 76.1883 123.435 75.2222C122.193 74.2604 121.152 73.0075 120.314 71.4635L123.957 69.4253C124.778 71.0753 125.933 72.2664 127.421 72.9899C128.909 73.7134 130.428 74.0751 131.982 74.0751C134.12 74.0751 135.85 73.6737 137.175 72.8796C138.501 72.0811 139.463 70.9032 140.064 69.3415C140.665 67.7798 140.959 65.8343 140.942 63.505V55.5774H141.407V34.2385H144.998V63.5579C144.998 64.4005 144.976 65.2123 144.928 65.9931C144.884 66.774 144.796 67.5372 144.669 68.2915C144.322 70.5106 143.607 72.337 142.518 73.7707C141.429 75.2045 140.007 76.2677 138.242 76.9647C136.477 77.6618 134.392 78.0103 131.982 78.0103V78.0191ZM132.118 61.0301C134.217 61.0301 135.955 60.5183 137.325 59.4904C138.694 58.4625 139.717 57.0464 140.393 55.2377C141.069 53.4289 141.407 51.3775 141.407 49.0835C141.407 46.7895 141.069 44.694 140.393 42.9029C139.717 41.1118 138.699 39.7133 137.338 38.703C135.977 37.6928 134.265 37.1899 132.202 37.1899C130.138 37.1899 128.33 37.7149 126.942 38.7604C125.555 39.8059 124.528 41.2309 123.861 43.0264C123.193 44.8263 122.86 46.8424 122.86 49.0835C122.86 51.3246 123.202 53.376 123.887 55.1803C124.572 56.9891 125.599 58.414 126.969 59.4596C128.338 60.5051 130.055 61.0301 132.118 61.0301Z'/%3E%3Cpath d='M161.132 64.802C158.901 64.802 157.036 64.3961 155.53 63.5888C154.024 62.7815 152.896 61.7095 152.145 60.3683C151.395 59.0272 151.021 57.5714 151.021 55.9921C151.021 54.4127 151.346 52.9966 151.996 51.8496C152.646 50.7026 153.528 49.7629 154.652 49.0262C155.776 48.2938 157.075 47.7336 158.555 47.3453C160.052 46.9792 161.711 46.6527 163.528 46.366C165.346 46.0836 167.128 45.8322 168.871 45.6248C170.614 45.4131 172.146 45.2057 173.458 45.0072L172.032 45.8895C172.084 42.9514 171.518 40.7765 170.333 39.3648C169.143 37.9531 167.08 37.2428 164.143 37.2428C162.115 37.2428 160.403 37.7016 159.007 38.6192C157.611 39.5368 156.627 40.9882 156.061 42.969L152.145 41.8132C152.821 39.153 154.182 37.0884 156.228 35.6193C158.274 34.1503 160.93 33.418 164.2 33.418C166.904 33.418 169.2 33.9253 171.092 34.9444C172.984 35.9634 174.319 37.4369 175.105 39.3648C175.469 40.2295 175.706 41.1912 175.816 42.2544C175.926 43.3176 175.978 44.4028 175.978 45.5013V63.9726H172.387V56.5126L173.428 56.9538C172.422 59.5037 170.86 61.4492 168.744 62.7903C166.623 64.1314 164.086 64.802 161.127 64.802H161.132ZM161.597 61.308C163.48 61.308 165.122 60.9683 166.527 60.2889C167.932 59.6095 169.064 58.6787 169.925 57.4964C170.785 56.3141 171.338 54.9774 171.597 53.4907C171.817 52.5378 171.935 51.4878 171.953 50.3364C171.97 49.1894 171.979 48.3335 171.979 47.7644L173.511 48.5629C172.141 48.7482 170.658 48.9291 169.06 49.1144C167.462 49.2997 165.89 49.507 164.349 49.7497C162.804 49.9879 161.412 50.2746 160.17 50.6011C159.332 50.8393 158.515 51.1746 157.734 51.6069C156.948 52.0393 156.303 52.6128 155.802 53.3274C155.297 54.0421 155.047 54.9333 155.047 55.9965C155.047 56.8611 155.262 57.6949 155.692 58.5022C156.123 59.3096 156.816 59.9801 157.773 60.5139C158.73 61.0477 160.008 61.3124 161.597 61.3124V61.308Z'/%3E%3Cpath d='M183.651 63.9758V23.5039H187.677V63.9758H183.651Z'/%3E%3Cpath d='M208.414 64.8025C205.53 64.8025 203.032 64.1584 200.92 62.8746C198.809 61.5909 197.171 59.7821 196.004 57.4528C194.836 55.1235 194.252 52.3883 194.252 49.2472C194.252 46.1062 194.827 43.1901 195.977 40.8211C197.127 38.4521 198.747 36.6257 200.841 35.3419C202.931 34.0582 205.402 33.4141 208.251 33.4141C211.101 33.4141 213.669 34.089 215.732 35.439C217.795 36.7889 219.358 38.7212 220.416 41.2358C221.474 43.7504 221.957 46.7503 221.869 50.2399H217.76V48.8061C217.685 44.9504 216.86 42.0431 215.28 40.08C213.699 38.1168 211.395 37.133 208.361 37.133C205.328 37.133 202.751 38.1698 201.061 40.2432C199.371 42.3166 198.528 45.2724 198.528 49.1105C198.528 52.9486 199.371 55.7587 201.061 57.8234C202.751 59.888 205.148 60.9203 208.251 60.9203C210.372 60.9203 212.22 60.4306 213.8 59.4468C215.381 58.4631 216.627 57.0469 217.541 55.1941L221.294 56.6543C220.126 59.2439 218.405 61.2468 216.131 62.6717C213.857 64.0922 211.285 64.8069 208.418 64.8069L208.414 64.8025ZM197.101 50.2399V46.8518H219.705V50.2399H197.101Z'/%3E%3Cpath d='M240.277 64.8025C237.336 64.8025 234.825 64.1319 232.744 62.7908C230.663 61.4497 229.065 59.5968 227.95 57.2278C226.835 54.8588 226.277 52.1457 226.277 49.0796C226.277 46.0136 226.844 43.2254 227.976 40.8741C229.109 38.5227 230.72 36.6963 232.81 35.3816C234.899 34.0714 237.388 33.4141 240.277 33.4141C243.165 33.4141 245.76 34.0802 247.854 35.4081C249.943 36.7404 251.541 38.5844 252.648 40.9402C253.754 43.3004 254.307 46.0091 254.307 49.0752C254.307 52.1412 253.75 54.9338 252.635 57.294C251.519 59.6542 249.913 61.4938 247.814 62.8129C245.716 64.1363 243.201 64.7937 240.281 64.7937L240.277 64.8025ZM240.277 60.9203C243.565 60.9203 246.01 59.8218 247.621 57.6293C249.228 55.4367 250.031 52.5868 250.031 49.0796C250.031 45.5724 249.224 42.621 247.608 40.4902C245.993 38.3595 243.547 37.2963 240.281 37.2963C238.073 37.2963 236.251 37.7948 234.816 38.7962C233.38 39.7976 232.314 41.1829 231.611 42.9519C230.909 44.7254 230.558 46.7635 230.558 49.0796C230.558 52.6574 231.378 55.5249 233.025 57.6822C234.667 59.8395 237.09 60.9159 240.286 60.9159L240.277 60.9203Z'/%3E%3Cpath d='M5.62632 4.74518L4.49111 4.75426V5.88947L4.70453 40.3726L0.163685 40.3999L0.000214699 13.2456C-0.0406529 6.07565 5.758 0.204338 12.928 0.158929L39.2058 0L39.2331 4.54084L5.62632 4.74518Z'/%3E%3Cpath d='M51.6544 51.0624C51.6589 54.5361 50.3148 57.8055 47.8628 60.2712C45.4153 62.7323 42.1504 64.0901 38.6766 64.0991L11.5179 64.1627L11.5088 59.6219L45.9965 59.5401H47.1317V58.4049L47.05 24.7981L51.5908 24.7891L51.6544 51.0624Z'/%3E%3Cpath fill='%23e2e62f' d='M24.3464 36.7076C22.8116 36.7076 21.6264 36.2808 20.7955 35.4226C19.9645 34.5644 19.6239 33.5109 19.7783 32.2576C19.8782 31.2859 20.246 30.3822 20.8727 29.5513C21.4993 28.7203 22.3303 28.0573 23.3656 27.5578C24.4009 27.0583 25.5724 26.8086 26.8757 26.8086C28.4877 26.8086 29.6637 27.2445 30.4039 28.1118C31.1441 28.9837 31.4392 30.0689 31.2848 31.3721C31.2076 32.3166 30.8625 33.2021 30.2495 34.0194C29.6365 34.8368 28.8237 35.4907 27.8111 35.9766C26.7985 36.4624 25.6451 36.7076 24.3373 36.7076H24.3464Z'/%3E%3C/svg%3E") 12px center / auto 100% no-repeat;
}

.hp-shell-search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 190px;
  overflow: hidden;
  border-radius: var(--app-radius-btn);
  padding: 5px 8px;
  color: #8a9a9a;
  background-color: #fff;
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
}

.hp-shell-search .hp-shell-i {
  width: 10px;
  height: 10px;
}

.hp-shell-credits {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  border-radius: var(--app-radius-btn);
  padding: 4px 7px;
  background-color: rgb(98 231 235 / 0.2);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.hp-shell-credits .hp-shell-i {
  width: 10px;
  height: 10px;
  color: var(--color-cyan);
}

.hp-shell-credits > span {
  display: none;
}

.hp-shell-bell {
  width: 13px;
  height: 13px;
}

.hp-win--dark .hp-shell-bell {
  margin-left: auto;
}

.hp-shell-me {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

.hp-shell-me .hp-shell-i {
  width: 9px;
  height: 9px;
}

.hp-shell-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--color-black);
  background-color: var(--color-cyan-light);
  font-size: 8px;
  font-weight: 800;
}

.hp-shell-rail {
  display: flex;
  grid-row: 2 / 4;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
  overflow: hidden;
  padding: 2px 6px 10px;
  color: rgb(255 255 255 / 0.75);
  font-size: 8px;
  font-weight: 600;
}

.hp-shell-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
  border-radius: var(--app-radius-btn);
  padding: 6px 4px;
  color: var(--color-black);
  background-color: var(--color-cyan);
  font-weight: 700;
  white-space: nowrap;
}

.hp-shell-cta .hp-shell-i {
  width: 9px;
  height: 9px;
}

.hp-shell-item {
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 4px;
  padding: 5px;
  white-space: nowrap;
}

.hp-shell-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-shell-item .hp-shell-i {
  width: 11px;
  height: 11px;
}

.hp-shell-item.is-active {
  color: #fff;
  background-color: #d9fdfb33;
}

.hp-win--dark .hp-shell-item.is-active {
  background-color: rgb(255 255 255 / 0.12);
}

.hp-shell-beta {
  flex-shrink: 0;
  margin-left: auto;
  border-radius: 999px;
  padding: 1px 3px;
  background-color: rgb(255 255 255 / 0.14);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hp-shell-foot {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: auto;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-top: 6px;
}

.hp-shell-rail {
  align-items: center;
}

.hp-shell-item > span,
.hp-shell-cta > span,
.hp-shell-beta {
  display: none;
}

.hp-shell-item,
.hp-shell-cta {
  justify-content: center;
  width: 100%;
  padding: 6px 0;
}

.hp-shell-item .hp-shell-i,
.hp-shell-cta .hp-shell-i {
  width: 12px;
  height: 12px;
}

.hp-shell-head {
  grid-column: 2;
  border-top-left-radius: 10px;
  padding: 16px 18px 0;
  background-color: var(--app-soft);
}

.hp-shell-h {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hp-shell-title {
  overflow: hidden;
  margin-right: 2px;
  color: var(--color-black);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hp-shell-sub {
  margin-top: 4px;
  color: var(--color-black);
  font-size: 9.5px;
  font-weight: 500;
}

.hp-winbody {
  grid-column: 2;
  min-width: 0;
  padding: 14px 18px 18px;
  background-color: var(--app-soft);
}

.hp-shell-rail + .hp-winbody {
  border-top-left-radius: 10px;
  padding-top: 18px;
}

.hp-mini-kicker {
  color: var(--color-teal);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hp-list-h {
  display: block;
  margin: 18px 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hp-rows {
  display: grid;
  gap: 8px;
}

.hp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 11px 12px;
  background-color: var(--color-white);
  transition: border-color 0.4s ease, background-color 0.4s ease, opacity 0.4s ease, transform 0.45s var(--ease-out), max-height 0.45s var(--ease-out), padding 0.45s var(--ease-out), margin 0.45s var(--ease-out);
}

.hp-row > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.hp-row-t {
  font-weight: 700;
}

.hp-row-s {
  color: var(--color-muted);
  font-size: 10.5px;
}

.hp-row--person {
  justify-content: flex-start;
}

.hp-row-who {
  flex: 1;
  gap: 2px !important;
}

.hp-line {
  display: block;
  height: 7px;
  margin-top: 9px;
  border-radius: var(--radius-pill);
  background-color: var(--app-line);
}

.hp-line--short {
  width: 62%;
}

.hp-win--editor {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
}

.hp-edh {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
  padding: 10px 12px 10px 8px;
}

.hp-edh-back {
  width: 12px;
  height: 12px;
  color: var(--color-muted);
}

.hp-edh-t {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hp-edh-title {
  overflow: hidden;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hp-edh-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-muted);
  font-size: 8.5px;
  white-space: nowrap;
}

.hp-edh-status {
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--color-orange-text);
  background-color: #fff4e6;
  font-weight: 600;
}

.hp-ed {
  display: grid;
  flex: 1;
  grid-template-columns: 92px minmax(0, 1fr) 26px 118px;
  min-height: 0;
}

.hp-ed-toc {
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
  padding: 14px 8px 14px 10px;
  color: var(--color-black);
  background-color: var(--app-soft);
  font-size: 7.5px;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.hp-ed-toc > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-ed-toc-h {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
  color: var(--color-muted);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hp-ed-toc-h .hp-shell-i {
  width: 9px;
  height: 9px;
}

.hp-ed-toc-i.is-active {
  color: var(--color-teal);
  font-weight: 700;
}

.hp-ed-doc {
  min-width: 0;
  padding: 10px 14px 16px;
}

.hp-ed-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 0 auto 12px;
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--color-muted);
  background-color: var(--app-soft);
  font-size: 8px;
  font-weight: 600;
}

.hp-ed-tools .hp-shell-i {
  width: 9px;
  height: 9px;
}

.hp-ed-tools b,
.hp-ed-tools em,
.hp-ed-tools u {
  font-size: 8.5px;
}

.hp-ed-sep {
  width: 1px;
  height: 10px;
  background-color: var(--color-border);
}

.hp-ed-h1 {
  display: block;
  margin-bottom: 10px;
  color: var(--color-teal);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.hp-ed-title {
  display: block;
  margin-bottom: 6px;
  color: var(--color-teal);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.hp-ed-text {
  margin-bottom: 6px;
  color: var(--color-black);
  font-size: 9.5px;
  line-height: 1.6;
}

.hp-field {
  border-radius: 4px;
  padding: 0 3px;
  color: var(--color-teal-text);
  background-color: var(--color-cyan-light);
  font-weight: 700;
  transition: background-color 0.3s ease;
}

.hp-field.is-typing {
  background-color: #b8f4f5;
}

.hp-field--lawyer {
  /* Débord du surlignage réduit : sans surlignage, le mot reste près de
     ses voisins, et le surlignage ne touche pas le mot précédent */
  padding-inline: 1px;
  color: inherit;
  background: linear-gradient(var(--color-purple-bg), var(--color-purple-bg)) 0 0 / 0% 100% no-repeat;
  font-weight: inherit;
  transition: background-size 0.8s var(--ease-out);
}

.is-flagged .hp-field--lawyer {
  background-size: 100% 100%;
}

.hp-ed-flag {
  margin-inline: -6px;
  border-radius: 6px;
  padding: 4px 6px;
  outline: 1.5px solid transparent;
  transition: outline-color 0.4s ease, background-color 0.4s ease;
}

.is-flagged .hp-ed-flag {
  outline-color: var(--color-purple-line);
}

.hp-ed-add {
  display: none;
  border-radius: 3px;
  color: var(--color-green-text);
  background-color: var(--color-green-bg);
}

.is-amended .hp-ed-add {
  display: inline;
  animation: hp-add-in 0.6s ease both;
}

@keyframes hp-add-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hp-ed-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  border-inline: 1px solid var(--color-border);
  padding: 10px 0;
  color: var(--color-teal);
}

.hp-ed-rail > .hp-shell-i {
  width: 11px;
  height: 11px;
}

.hp-ed-rail > .hp-shell-i.is-active {
  position: relative;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background-color: var(--color-teal);
  -webkit-mask: none;
  mask: none;
}

.hp-ed-rail > .hp-shell-i.is-active::before {
  content: "";
  position: absolute;
  inset: 4px;
  background-color: #fff;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

.hp-leo-tile--xs {
  width: 18px;
  height: 18px;
  margin-top: auto;
  border-radius: 4px;
}

.hp-leo-tile--xs .hp-leo-glyph {
  width: 10px;
  height: 10px;
}

.hp-ed-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px 8px;
}

.hp-ed-panel-h {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 7px;
  color: var(--color-muted);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hp-ed-reco {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.5s ease, transform 0.6s var(--ease-out);
}

.is-flagged .hp-ed-reco {
  opacity: 1;
  transform: none;
}

.hp-ed-reco-card {
  border: 1px solid var(--color-purple-line);
  border-radius: 8px;
  padding: 8px;
  background-color: var(--color-purple-bg);
  font-size: 9px;
  line-height: 1.45;
}

.hp-ed-reco-card .hp-mini-kicker {
  color: var(--color-purple-text);
}

.hp-ed-reco-card p {
  margin-top: 4px;
}

.hp-ed-panel--vars {
  gap: 4px;
  padding-inline: 4px;
}

.hp-ed-panel--vars .hp-ed-panel-h {
  margin-inline: 4px;
}

.hp-ed-vars {
  display: flex;
  flex-direction: column;
}

.hp-ed-var {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 6px;
  padding: 5px 6px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.hp-ed-var b {
  overflow: hidden;
  font-size: 8.5px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.15s ease;
}

.hp-ed-var span {
  overflow: hidden;
  color: var(--color-faint);
  font-size: 7.5px;
  font-style: italic;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hp-ed-var.is-hover {
  background-color: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}

.hp-ed-var.is-hover b {
  color: var(--color-teal-deep);
}

.hp-ed-panel-foot {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding: 6px 4px 0;
  color: var(--color-faint);
  font-size: 7px;
  line-height: 1.4;
}

.hp-var {
  display: inline-flex;
  border: 1px solid var(--color-purple-line);
  border-radius: 4px;
  padding: 0 4px;
  color: var(--color-purple-text);
  background-color: var(--color-purple-bg);
  font-size: 0.875em;
  font-weight: 600;
  line-height: 1.45;
}

.hp-var.is-pending {
  display: none;
}

[data-mock="generate"] .hp-var {
  border-color: rgb(8 127 131 / 0.3);
  color: var(--color-teal-text);
  background-color: var(--color-teal-bg);
}

.hp-var.is-in {
  animation: hp-var-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hp-var-in {
  from { transform: scale(0.4); opacity: 0; }
}

.hp-ed-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  border-radius: var(--app-radius-btn);
  padding: 6px 9px;
  color: var(--color-white);
  background-color: var(--color-black);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.3s ease, transform 0.15s ease;
}

.hp-ed-btn:not(.is-sent)::before {
  content: "";
  width: 9px;
  height: 9px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hp-ed-btn.is-pressed {
  transform: scale(0.95);
}

.hp-ed-btn.is-sent {
  background-color: var(--color-green-text);
}

.hp-lw-hello {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hp-lw-hello > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hp-lw-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--color-white);
  background-color: var(--color-teal);
  font-size: 10px;
  font-weight: 800;
}

.hp-lw-date {
  color: var(--color-muted);
  font-size: 9px;
}

.hp-lw-h {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.hp-lw-sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
}

.hp-lw-sec-h {
  font-size: 12.5px;
  font-weight: 800;
}

.hp-lw-link,
.hp-app-kpi-link {
  color: var(--color-teal);
  font-size: 9px;
  font-weight: 600;
}

.hp-app-kpi-link {
  margin-top: auto;
}

.hp-lw-tabs {
  display: flex;
  gap: 14px;
  margin: 8px 0 10px;
  border-bottom: 1px solid var(--color-border);
}

.hp-lw-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  padding: 5px 2px;
  font-size: 9px;
  font-weight: 600;
}

.hp-lw-tab .hp-shell-i {
  width: 10px;
  height: 10px;
}

.hp-lw-tab b {
  border-radius: 999px;
  padding: 0 4px;
  background-color: #eceeee;
  font-size: 8px;
}

.hp-lw-tab.is-active {
  border-bottom-color: var(--color-teal);
  color: var(--color-teal);
}

.hp-app-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.hp-app-kpi {
  --kpi: var(--color-teal);
  --kpi-bg: var(--color-teal-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--app-radius);
  padding: 10px 11px 11px;
  background-color: var(--color-white);
}

.hp-app-kpi--orange {
  --kpi: #d98a1c;
  --kpi-bg: var(--color-orange-bg);
}

.hp-app-kpi--red {
  --kpi: #d32f2f;
  --kpi-bg: #ffe6e6;
}

.hp-app-kpi-top {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hp-app-kpi-ico {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--kpi-bg) center / 11px no-repeat;
}

.hp-app-kpi-ico--clients { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087f83' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18.5 14.5a6.5 6.5 0 0 1 3 5.5'/%3E%3C/svg%3E"); }

.hp-app-kpi-ico--pending { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4620c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

.hp-app-kpi-ico--due { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d32f2f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 14v2.2l1.6 1'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h5'/%3E%3Cpath d='M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5'/%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3C/svg%3E"); }

.hp-app-kpi-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.hp-app-kpi-n {
  color: var(--color-black);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hp-app-kpi-meta {
  overflow: hidden;
  color: var(--color-faint);
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hp-app-kpi-bar {
  height: 5px;
  margin-top: auto;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--kpi-bg);
}

.hp-app-kpi-bar > span {
  display: block;
  width: var(--p, 60%);
  height: 100%;
  border-radius: inherit;
  background-color: var(--kpi);
  transition: width 0.8s var(--ease-out);
}

.hp-app-kpi--orange .hp-app-kpi-bar { --p: 60%; }

.is-validated .hp-app-kpi--orange .hp-app-kpi-bar { --p: 80%; }

.hp-app-kpi-foot {
  margin-top: -3px;
  color: var(--color-muted);
  font-size: 9.5px;
  font-weight: 600;
}

.hp-row-note {
  max-width: 0;
  overflow: hidden;
  color: var(--color-green-text);
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.6s var(--ease-out), opacity 0.4s ease;
}

.is-validated [data-lw-row] {
  border-color: #bfe5b3;
  background-color: #f7fcf5;
}

.is-validated .hp-row-note {
  max-width: 220px;
  opacity: 1;
}

.hp-app-hello {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.hp-sign-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.hp-sign-lane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr) minmax(0, 1fr);
  align-items: stretch;
  margin-top: 16px;
}

.hp-sign-party {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--app-radius);
  padding: 14px 10px 12px;
  background-color: var(--color-white);
  text-align: center;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.hp-sign-party[data-sg-from] {
  position: relative;
  z-index: 3;
}

.is-returning .hp-sign-doc {
  z-index: 4;
}

.hp-sign-party.is-acting {
  border: 1px solid #087f831a;
  background-color: #deecec;
}

.hp-sign-party .hp-avatar {
  width: 34px;
  height: 34px;
  font-size: 11px;
}

.hp-sign-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 100%;
}

.hp-sign-who .hp-row-s {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.hp-sign-who .hp-row-s.is-done {
  color: var(--color-green-text);
  font-weight: 700;
}

.hp-sign-track {
  --sign-axis: x;
  --sign-overlap: 26px;
  position: relative;
  height: 104px;
  margin: 0 -1px;
}

.hp-sign-track::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  left: 4px;
  border-top: 1.5px dashed var(--color-border);
  transition: border-color 0.3s ease;
}

.is-sending .hp-sign-track::before {
  border-color: var(--color-cyan);
}

.hp-sign-mail {
  position: absolute;
  top: calc(50% + 42px);
  left: 50%;
  padding-left: 13px;
  color: var(--color-faint);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E") 0 center / 10px no-repeat;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  translate: -50% 0;
}

.hp-sign-doc {
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--sign-overlap));
  z-index: 2;
  display: block;
  width: 58px;
  height: 74px;
  margin-top: -37px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 8px;
  background-color: var(--color-white);
  box-shadow: 0 10px 22px -10px rgb(31 18 14 / 0.35);
  will-change: transform;
}

.hp-sign-doc-lines {
  display: grid;
  gap: 5px;
}

.hp-sign-doc-lines i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background-color: #eef0f0;
}

.hp-sign-doc-sig {
  position: absolute;
  right: 7px;
  bottom: 9px;
  left: 7px;
  height: 20px;
  border-bottom: 1px dashed #cfcfcf;
}

.hp-sign-doc-sigsvg {
  position: absolute;
  inset: 3px 4px 3px;
  width: calc(100% - 8px);
  height: calc(100% - 6px);
}

.hp-sign-doc-sigsvg path {
  stroke: var(--color-black);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.is-signing .hp-sign-doc-sigsvg path,
.is-signed .hp-sign-doc-sigsvg path {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.5, 0.1, 0.4, 1);
}

.hp-sign-doc-sig.has-lottie .hp-sign-doc-sigsvg {
  display: none;
}

.hp-sign-doc-pen {
  position: absolute;
  bottom: -11px;
  left: 50%;
  width: 52px;
  height: 52px;
  translate: -50% 0;
  opacity: 0;
}

.is-signing .hp-sign-doc-pen,
.is-signed .hp-sign-doc-pen {
  opacity: 1;
}

.hp-sign-doc-lines i:nth-child(2) { width: 80%; }

.hp-sign-doc-lines i:nth-child(4) { width: 55%; }

.hp-sign-seal {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 17px;
  height: 17px;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  background: var(--color-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat;
  transform: scale(0);
  transition: transform 0.2s ease;
}

.is-signed .hp-sign-seal {
  transform: none;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hp-sign-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

[data-sg-archived] {
  opacity: 0;
  transform: translateY(4px);
}

.is-archived [data-sg-archived] {
  opacity: 1;
  transform: none;
}

.hp-kb {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 230px;
}

.hp-kb-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hp-kb-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
}

.hp-kb-h .hp-pill {
  min-width: 0;
  overflow: hidden;
  padding-inline: 5px;
  font-size: 8px;
  text-overflow: ellipsis;
}

.hp-kb-n {
  color: var(--color-muted);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hp-kb-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px;
  background-color: var(--color-white);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.hp-kb-card.is-lifted {
  z-index: 3;
  border-color: var(--color-cyan);
  box-shadow: var(--shadow-float);
}

.hp-tag {
  border-radius: 5px;
  padding: 2px 6px;
  color: var(--color-white);
  background-color: var(--color-teal-deep);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hp-kb-t {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.hp-kb-d {
  color: var(--color-muted);
  font-size: 10px;
}

.hp-win[data-mock="library"] {
  position: relative;
}

.hp-lib-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hp-lib-search {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  min-height: 26px;
  border: 1px solid var(--color-border);
  border-radius: var(--app-radius-btn);
  padding: 5px 8px 5px 24px;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") 8px center / 11px no-repeat;
  overflow: hidden;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

.hp-lib-search::before {
  content: "Rechercher un contrat, un cocontractant…";
  color: var(--color-faint);
  font-weight: 500;
}

.hp-caret {
  width: 1.5px;
  height: 11px;
  margin-left: 1px;
  background-color: var(--color-teal);
  opacity: 0;
}

.is-typing .hp-caret {
  animation: hp-blink 0.9s steps(1) infinite;
}

@keyframes hp-blink {
  50% { opacity: 1; }
}

.hp-lib-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--app-radius-btn);
  padding: 6px 8px;
  background-color: var(--color-white);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.hp-lib-btn--dark {
  border-color: var(--color-black);
  color: var(--color-white);
  background-color: var(--color-black);
}

.hp-lib-btn .hp-shell-i {
  width: 9px;
  height: 9px;
}

.hp-tbl {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--app-radius);
  background-color: var(--color-white);
}

.hp-tr {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 8px;
  max-height: 40px;
  border-top: 1px solid var(--color-border);
  padding: 9px 10px;
  font-size: 9.5px;
  white-space: nowrap;
  transition: background-color 0.4s ease, opacity 0.4s ease, max-height 0.45s var(--ease-out), padding 0.45s var(--ease-out), border-color 0.4s ease;
}

.hp-tr > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-tr--h {
  border-top: 0;
  color: var(--color-muted);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hp-tr-name {
  font-weight: 600;
}

.hp-tr .hp-pill {
  font-size: 8.5px;
}

.hp-tbl-rows {
  min-height: 150px;
}

.hp-tr--new {
  position: relative;
}

.hp-tr--new:not(.is-in) {
  max-height: 0;
  padding-block: 0;
  border-color: transparent;
  opacity: 0;
}

.hp-tr-pending {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  background-color: #f5fbfb;
  transition: opacity 0.35s ease;
}

.hp-tr--new.is-done .hp-tr-pending {
  opacity: 0;
}

.hp-tr-pending b {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
}

.hp-tr-bar {
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--app-line);
}

.hp-tr-bar i {
  display: block;
  width: var(--p, 5%);
  height: 100%;
  border-radius: inherit;
  background-color: var(--color-teal);
  transition: width 0.5s var(--ease-out);
}

.hp-tr-pending em {
  overflow: hidden;
  color: var(--color-muted);
  font-size: 8.5px;
  font-style: normal;
  text-overflow: ellipsis;
}

.hp-lib-modal {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background-color: rgb(31 18 14 / 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.hp-win.is-modal .hp-lib-modal {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.hp-lib-modal-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 300px;
  border-radius: 12px;
  padding: 16px;
  background-color: var(--color-white);
  box-shadow: 0 24px 48px -16px rgb(31 18 14 / 0.4);
  transform: translateY(10px) scale(0.97);
  transition: transform 0.4s var(--ease-out);
}

.hp-win.is-modal .hp-lib-modal-card {
  transform: none;
}

.hp-lib-modal-h {
  font-size: 12px;
  font-weight: 700;
}

.hp-lib-modal-p {
  color: var(--color-muted);
  font-size: 8.5px;
  line-height: 1.5;
}

.hp-lib-modal-l {
  margin-top: 2px;
  font-size: 8.5px;
  font-weight: 600;
}

.hp-lib-drop {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1.5px dashed var(--color-border);
  border-radius: 8px;
  padding: 8px;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.hp-lib-drop.is-over {
  border-color: var(--color-teal-deep);
  background-color: var(--color-cyan-light);
  box-shadow: 0 0 0 3px rgb(15 74 72 / 0.12);
}

.hp-lib-drop-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px;
  font-size: 8.5px;
  font-weight: 600;
  text-align: center;
}

.hp-lib-drop-top u {
  color: var(--color-teal-deep);
}

.hp-lib-drop-top small {
  color: var(--color-muted);
  font-size: 7.5px;
}

.hp-lib-drop-ico {
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f4a48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hp-lib-files {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hp-lib-file {
  display: flex;
  align-items: center;
  gap: 6px;
  max-height: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 6px;
  background-color: var(--app-soft);
  font-size: 8px;
  opacity: 0;
  transition: max-height 0.35s var(--ease-out), padding 0.35s var(--ease-out), opacity 0.3s ease, border-color 0.3s ease;
}

.hp-lib-drop.has-files .hp-lib-file {
  max-height: 30px;
  border-color: var(--color-border);
  padding-block: 4px;
  opacity: 1;
  transition-delay: calc(var(--i) * 0.08s);
}

.hp-lib-file i,
.hp-lib-drag-doc i {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  color: #fff;
  background-color: var(--color-teal-deep);
  font-size: 5.5px;
  font-style: normal;
  font-weight: 800;
}

.hp-lib-file b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hp-lib-file small {
  color: var(--color-muted);
  font-size: 7px;
  font-variant-numeric: tabular-nums;
}

.hp-lib-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}

.hp-lib-btn--primary {
  border-color: var(--color-teal-deep);
  color: #fff;
  background-color: var(--color-teal-deep);
}

.hp-lib-btn {
  transition: transform 0.15s ease;
}

.hp-lib-btn.is-pressed {
  transform: scale(0.94);
}

.hp-lib-drag {
  --x: 110%;
  --y: 40%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 46px;
  height: 52px;
  opacity: 0;
  pointer-events: none;
  translate: var(--x) var(--y);
  transition: translate 1s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.3s ease, scale 0.3s ease;
}

.hp-lib-drag.is-on {
  opacity: 1;
}

.hp-lib-drag.is-dropped {
  opacity: 0;
  scale: 0.6;
}

.hp-lib-drag-doc {
  position: absolute;
  inset: 0 6px 0 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 10px 20px -8px rgb(31 18 14 / 0.35);
}

.hp-lib-drag-doc:nth-child(1) { rotate: -10deg; translate: -6px 2px; }

.hp-lib-drag-doc:nth-child(2) { rotate: 6deg; translate: 5px 1px; }

.hp-lib-drag-doc i {
  width: 22px;
  height: 22px;
  font-size: 6.5px;
}

.hp-lib-drag-n {
  position: absolute;
  top: -7px;
  right: -2px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  background-color: #e5484d;
  font-size: 9px;
  font-weight: 800;
}

.hp-lib-drag-cursor {
  position: absolute;
  bottom: -14px;
  left: 24px;
  width: 15px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 20'%3E%3Cpath d='M1 1v15.5l4-3.8 2.6 5.8 2.6-1.1-2.5-5.7H13z' fill='%231f120e' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgb(31 18 14 / 0.25));
}

.hp-lib-leo {
  position: absolute;
  bottom: 12px;
  left: calc(var(--rail-w) + 12px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 9px;
  padding: 5px 12px 5px 5px;
  color: #d0f5f8;
  background-color: var(--color-leo-badge);
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.4);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
}

.hp-lib-leo.is-shown {
  opacity: 1;
  transform: none;
}

.hp-lib-leo > span:last-child {
  display: flex;
  flex-direction: column;
}

.hp-lib-leo b {
  font-size: 9px;
  font-weight: 600;
  background: linear-gradient(90deg, #d0f5f8 30%, #fff 50%, #d0f5f8 70%) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hp-shimmer 1.6s linear infinite;
}

.hp-lib-leo small {
  color: rgb(208 245 248 / 0.65);
  font-size: 8px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@keyframes hp-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.hp-float--alert {
  right: -20px;
  bottom: -26px;
  align-items: center;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.45s ease, transform 0.5s var(--ease-out);
}

.hp-float--alert.is-shown {
  opacity: 1;
  transform: none;
}

.hp-bell {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--color-orange-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4620c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.hp-float--alert.is-shown .hp-bell {
  animation: hp-ring 0.9s ease 0.2s;
}

@keyframes hp-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); }
  80% { transform: rotate(-4deg); }
}

@media (max-width: 640px) {
  .hp-win {
    font-size: 11px;
  }

  /* Trop étroit pour un champ lisible : la barre garde logo, crédits,
     cloche et compte. */
  .hp-shell-search {
    visibility: hidden;
  }

  .hp-winbody {
    padding: 14px;
  }

  .hp-shell-head {
    padding: 14px 14px 0;
  }

  .hp-shell-name,
  .hp-shell-me > .hp-shell-i {
    display: none;
  }

  /* Éditeur : document + panneau, sans sommaire ni rail d'outils */
  .hp-ed {
    grid-template-columns: minmax(0, 1fr) 104px;
  }

  .hp-ed-toc,
  .hp-ed-rail {
    display: none;
  }

  .hp-edh-meta {
    display: none;
  }

  /* Contrathèque : colonnes type et renouvellement masquées */
  .hp-tr {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hp-tr > :nth-child(2),
  .hp-tr > :nth-child(4) {
    display: none;
  }

  .hp-lib-btn:not(.hp-lib-btn--dark) {
    display: none;
  }

  /* La ligne validée passe déjà au vert : la note ne tient pas. */
  .hp-row-note {
    display: none;
  }

  .hp-kb {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Signature : circuit vertical, pastilles en ligne */
  .hp-sign-lane {
    grid-template-columns: minmax(0, 1fr);
  }

  .hp-sign-party {
    flex-direction: row;
    padding: 10px 12px;
    text-align: left;
  }

  .hp-sign-party .hp-pill {
    margin-left: auto;
  }

  .hp-sign-who {
    flex: 1;
    min-width: 0;
  }

  .hp-sign-track {
    --sign-axis: y;
    height: 150px;
    margin: -1px 0;
  }

  .hp-sign-track::before {
    top: 4px;
    right: auto;
    bottom: 4px;
    left: 50%;
    border-top: 0;
    border-left: 1.5px dashed var(--color-border);
  }

  .is-sending .hp-sign-track::before {
    border-color: var(--color-cyan);
  }

  .hp-sign-mail {
    top: 50%;
    left: calc(50% + 42px);
    translate: 0 -50%;
  }

  .hp-sign-doc {
    top: calc(-1 * var(--sign-overlap));
    left: 50%;
    margin-top: 0;
    margin-left: -29px;
  }

  /* Deux tuiles KPI sur mobile : les échéances (secondaires) disparaissent. */
  .hp-app-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hp-app-kpi--red {
    display: none;
  }

  .hp-float--alert {
    right: 8px;
    bottom: -30px;
  }
}

.hp-win--onb {
  --shell: #fff;
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}

.hp-onb-top {
  position: relative;
  z-index: 1;
  justify-content: space-between;
  padding: 8px 12px 8px 0;
  color: var(--color-black);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.07);
}

.hp-shell-logo--ink {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 255 79' fill='%231f120e' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M75.958 63.9758V23.5039H79.9836V63.9758H75.958Z'/%3E%3Cpath d='M100.721 64.8025C97.8363 64.8025 95.3385 64.1584 93.2269 62.8746C91.1153 61.5909 89.4779 59.7821 88.3102 57.4528C87.1425 55.1235 86.5586 52.3883 86.5586 49.2472C86.5586 46.1062 87.1337 43.1901 88.2838 40.8211C89.434 38.4521 91.0539 36.6257 93.1479 35.3419C95.2375 34.0582 97.709 33.4141 100.558 33.4141C103.407 33.4141 105.975 34.089 108.039 35.439C110.102 36.7889 111.665 38.7212 112.723 41.2358C113.781 43.7504 114.263 46.7503 114.176 50.2399H110.067V48.8061C109.992 44.9504 109.167 42.0431 107.586 40.08C106.006 38.1168 103.701 37.133 100.668 37.133C97.6344 37.133 95.0575 38.1698 93.3674 40.2432C91.6773 42.3166 90.8344 45.2724 90.8344 49.1105C90.8344 52.9486 91.6773 55.7587 93.3674 57.8234C95.0575 59.888 97.4544 60.9203 100.558 60.9203C102.678 60.9203 104.527 60.4306 106.107 59.4468C107.687 58.4631 108.934 57.0469 109.847 55.1941L113.601 56.6543C112.433 59.2439 110.712 61.2468 108.438 62.6717C106.164 64.0922 103.592 64.8069 100.725 64.8069L100.721 64.8025ZM89.4077 50.2399V46.8518H112.011V50.2399H89.4077Z'/%3E%3Cpath d='M131.705 64.802C128.949 64.802 126.591 64.1094 124.638 62.7241C122.684 61.3389 121.187 59.4596 120.147 57.0949C119.106 54.7259 118.584 52.0569 118.584 49.0835C118.584 46.1101 119.098 43.4676 120.134 41.0985C121.165 38.7295 122.649 36.859 124.585 35.4826C126.521 34.1062 128.839 33.418 131.543 33.418C134.247 33.418 136.657 34.0974 138.558 35.4561C140.459 36.8149 141.895 38.6722 142.873 41.0324C143.848 43.3926 144.34 46.0748 144.34 49.0835C144.34 52.0922 143.857 54.7039 142.887 57.0817C141.916 59.4596 140.494 61.3389 138.611 62.7241C136.728 64.1094 134.427 64.802 131.705 64.802ZM131.982 78.0191C130.468 78.0191 128.975 77.7941 127.504 77.3441C126.034 76.8941 124.677 76.1883 123.435 75.2222C122.193 74.2604 121.152 73.0075 120.314 71.4635L123.957 69.4253C124.778 71.0753 125.933 72.2664 127.421 72.9899C128.909 73.7134 130.428 74.0751 131.982 74.0751C134.12 74.0751 135.85 73.6737 137.175 72.8796C138.501 72.0811 139.463 70.9032 140.064 69.3415C140.665 67.7798 140.959 65.8343 140.942 63.505V55.5774H141.407V34.2385H144.998V63.5579C144.998 64.4005 144.976 65.2123 144.928 65.9931C144.884 66.774 144.796 67.5372 144.669 68.2915C144.322 70.5106 143.607 72.337 142.518 73.7707C141.429 75.2045 140.007 76.2677 138.242 76.9647C136.477 77.6618 134.392 78.0103 131.982 78.0103V78.0191ZM132.118 61.0301C134.217 61.0301 135.955 60.5183 137.325 59.4904C138.694 58.4625 139.717 57.0464 140.393 55.2377C141.069 53.4289 141.407 51.3775 141.407 49.0835C141.407 46.7895 141.069 44.694 140.393 42.9029C139.717 41.1118 138.699 39.7133 137.338 38.703C135.977 37.6928 134.265 37.1899 132.202 37.1899C130.138 37.1899 128.33 37.7149 126.942 38.7604C125.555 39.8059 124.528 41.2309 123.861 43.0264C123.193 44.8263 122.86 46.8424 122.86 49.0835C122.86 51.3246 123.202 53.376 123.887 55.1803C124.572 56.9891 125.599 58.414 126.969 59.4596C128.338 60.5051 130.055 61.0301 132.118 61.0301Z'/%3E%3Cpath d='M161.132 64.802C158.901 64.802 157.036 64.3961 155.53 63.5888C154.024 62.7815 152.896 61.7095 152.145 60.3683C151.395 59.0272 151.021 57.5714 151.021 55.9921C151.021 54.4127 151.346 52.9966 151.996 51.8496C152.646 50.7026 153.528 49.7629 154.652 49.0262C155.776 48.2938 157.075 47.7336 158.555 47.3453C160.052 46.9792 161.711 46.6527 163.528 46.366C165.346 46.0836 167.128 45.8322 168.871 45.6248C170.614 45.4131 172.146 45.2057 173.458 45.0072L172.032 45.8895C172.084 42.9514 171.518 40.7765 170.333 39.3648C169.143 37.9531 167.08 37.2428 164.143 37.2428C162.115 37.2428 160.403 37.7016 159.007 38.6192C157.611 39.5368 156.627 40.9882 156.061 42.969L152.145 41.8132C152.821 39.153 154.182 37.0884 156.228 35.6193C158.274 34.1503 160.93 33.418 164.2 33.418C166.904 33.418 169.2 33.9253 171.092 34.9444C172.984 35.9634 174.319 37.4369 175.105 39.3648C175.469 40.2295 175.706 41.1912 175.816 42.2544C175.926 43.3176 175.978 44.4028 175.978 45.5013V63.9726H172.387V56.5126L173.428 56.9538C172.422 59.5037 170.86 61.4492 168.744 62.7903C166.623 64.1314 164.086 64.802 161.127 64.802H161.132ZM161.597 61.308C163.48 61.308 165.122 60.9683 166.527 60.2889C167.932 59.6095 169.064 58.6787 169.925 57.4964C170.785 56.3141 171.338 54.9774 171.597 53.4907C171.817 52.5378 171.935 51.4878 171.953 50.3364C171.97 49.1894 171.979 48.3335 171.979 47.7644L173.511 48.5629C172.141 48.7482 170.658 48.9291 169.06 49.1144C167.462 49.2997 165.89 49.507 164.349 49.7497C162.804 49.9879 161.412 50.2746 160.17 50.6011C159.332 50.8393 158.515 51.1746 157.734 51.6069C156.948 52.0393 156.303 52.6128 155.802 53.3274C155.297 54.0421 155.047 54.9333 155.047 55.9965C155.047 56.8611 155.262 57.6949 155.692 58.5022C156.123 59.3096 156.816 59.9801 157.773 60.5139C158.73 61.0477 160.008 61.3124 161.597 61.3124V61.308Z'/%3E%3Cpath d='M183.651 63.9758V23.5039H187.677V63.9758H183.651Z'/%3E%3Cpath d='M208.414 64.8025C205.53 64.8025 203.032 64.1584 200.92 62.8746C198.809 61.5909 197.171 59.7821 196.004 57.4528C194.836 55.1235 194.252 52.3883 194.252 49.2472C194.252 46.1062 194.827 43.1901 195.977 40.8211C197.127 38.4521 198.747 36.6257 200.841 35.3419C202.931 34.0582 205.402 33.4141 208.251 33.4141C211.101 33.4141 213.669 34.089 215.732 35.439C217.795 36.7889 219.358 38.7212 220.416 41.2358C221.474 43.7504 221.957 46.7503 221.869 50.2399H217.76V48.8061C217.685 44.9504 216.86 42.0431 215.28 40.08C213.699 38.1168 211.395 37.133 208.361 37.133C205.328 37.133 202.751 38.1698 201.061 40.2432C199.371 42.3166 198.528 45.2724 198.528 49.1105C198.528 52.9486 199.371 55.7587 201.061 57.8234C202.751 59.888 205.148 60.9203 208.251 60.9203C210.372 60.9203 212.22 60.4306 213.8 59.4468C215.381 58.4631 216.627 57.0469 217.541 55.1941L221.294 56.6543C220.126 59.2439 218.405 61.2468 216.131 62.6717C213.857 64.0922 211.285 64.8069 208.418 64.8069L208.414 64.8025ZM197.101 50.2399V46.8518H219.705V50.2399H197.101Z'/%3E%3Cpath d='M240.277 64.8025C237.336 64.8025 234.825 64.1319 232.744 62.7908C230.663 61.4497 229.065 59.5968 227.95 57.2278C226.835 54.8588 226.277 52.1457 226.277 49.0796C226.277 46.0136 226.844 43.2254 227.976 40.8741C229.109 38.5227 230.72 36.6963 232.81 35.3816C234.899 34.0714 237.388 33.4141 240.277 33.4141C243.165 33.4141 245.76 34.0802 247.854 35.4081C249.943 36.7404 251.541 38.5844 252.648 40.9402C253.754 43.3004 254.307 46.0091 254.307 49.0752C254.307 52.1412 253.75 54.9338 252.635 57.294C251.519 59.6542 249.913 61.4938 247.814 62.8129C245.716 64.1363 243.201 64.7937 240.281 64.7937L240.277 64.8025ZM240.277 60.9203C243.565 60.9203 246.01 59.8218 247.621 57.6293C249.228 55.4367 250.031 52.5868 250.031 49.0796C250.031 45.5724 249.224 42.621 247.608 40.4902C245.993 38.3595 243.547 37.2963 240.281 37.2963C238.073 37.2963 236.251 37.7948 234.816 38.7962C233.38 39.7976 232.314 41.1829 231.611 42.9519C230.909 44.7254 230.558 46.7635 230.558 49.0796C230.558 52.6574 231.378 55.5249 233.025 57.6822C234.667 59.8395 237.09 60.9159 240.286 60.9159L240.277 60.9203Z'/%3E%3Cpath d='M5.62632 4.74518L4.49111 4.75426V5.88947L4.70453 40.3726L0.163685 40.3999L0.000214699 13.2456C-0.0406529 6.07565 5.758 0.204338 12.928 0.158929L39.2058 0L39.2331 4.54084L5.62632 4.74518Z'/%3E%3Cpath d='M51.6544 51.0624C51.6589 54.5361 50.3148 57.8055 47.8628 60.2712C45.4153 62.7323 42.1504 64.0901 38.6766 64.0991L11.5179 64.1627L11.5088 59.6219L45.9965 59.5401H47.1317V58.4049L47.05 24.7981L51.5908 24.7891L51.6544 51.0624Z'/%3E%3Cpath fill='%23e2e62f' d='M24.3464 36.7076C22.8116 36.7076 21.6264 36.2808 20.7955 35.4226C19.9645 34.5644 19.6239 33.5109 19.7783 32.2576C19.8782 31.2859 20.246 30.3822 20.8727 29.5513C21.4993 28.7203 22.3303 28.0573 23.3656 27.5578C24.4009 27.0583 25.5724 26.8086 26.8757 26.8086C28.4877 26.8086 29.6637 27.2445 30.4039 28.1118C31.1441 28.9837 31.4392 30.0689 31.2848 31.3721C31.2076 32.3166 30.8625 33.2021 30.2495 34.0194C29.6365 34.8368 28.8237 35.4907 27.8111 35.9766C26.7985 36.4624 25.6451 36.7076 24.3373 36.7076H24.3464Z'/%3E%3C/svg%3E");
}

.hp-onb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 136px;
  min-width: 0;
}

.hp-onb-form {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 20px 26px 18px;
  background-color: var(--app-soft);
}

.hp-onb-h {
  margin-top: -6px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.hp-onb-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hp-onb-l {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
}

.hp-onb-count {
  color: var(--color-teal);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.hp-onb-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-border);
  border-radius: var(--app-radius-btn);
  padding: 7px 9px;
  color: var(--color-faint);
  background-color: var(--color-white);
  font-size: 10px;
  transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

.hp-onb-select .hp-shell-i {
  width: 10px;
  height: 10px;
}

.hp-onb-select .hp-shell-i {
  transition: transform 0.25s var(--ease-out);
}

.hp-onb-select.is-on,
.hp-onb-select.is-open {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgb(8 127 131 / 0.12);
}

.hp-onb-select.is-filled {
  color: var(--color-black);
}

.hp-onb-select.is-open .hp-shell-i {
  transform: rotate(180deg);
}

.hp-onb-select.is-pressed {
  transform: scale(0.98);
}

.hp-onb-field--dd {
  position: relative;
  z-index: 2;
}

.hp-onb-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--app-radius-btn);
  padding: 4px;
  background-color: var(--color-white);
  box-shadow: 0 8px 24px -8px rgb(31 18 14 / 0.22);
  opacity: 0;
  transform: translateY(-4px);
  transform-origin: top;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s var(--ease-out);
}

.hp-onb-select.is-open + .hp-onb-menu {
  opacity: 1;
  transform: none;
}

.hp-onb-menu-i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 10px;
  transition: background-color 0.15s ease;
}

.hp-onb-menu-i.is-hover {
  background-color: var(--app-soft);
}

.hp-onb-menu-i.is-selected {
  color: var(--color-teal-text);
  background-color: var(--color-teal-bg);
  font-weight: 600;
}

.hp-onb-menu-i.is-selected::after {
  content: "";
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087f83' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hp-onb-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hp-onb-opt {
  border: 1px solid var(--color-border);
  border-radius: var(--app-radius-btn);
  padding: 5px 9px;
  background-color: var(--color-white);
  font-size: 9.5px;
  font-weight: 600;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease, transform 0.3s var(--ease-out);
}

.hp-onb-opt.is-on {
  border-color: var(--color-teal);
  color: var(--color-teal-text);
  background-color: var(--color-teal-bg);
}

.hp-onb-opt.is-pressed {
  transform: scale(0.94);
}

.hp-onb-range {
  --v: 0%;
  position: relative;
  height: 4px;
  margin: 5px 0 1px;
  border-radius: var(--radius-pill);
  background-color: var(--app-line);
}

.hp-onb-range-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v);
  border-radius: inherit;
  background-color: var(--color-teal);
}

.hp-onb-range-thumb {
  position: absolute;
  top: 50%;
  left: var(--v);
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-teal);
  border-radius: 50%;
  background-color: var(--color-white);
  transform: translate(-50%, -50%);
  transition: scale 0.15s ease, box-shadow 0.15s ease;
}

.hp-onb-range.is-grabbed .hp-onb-range-thumb {
  scale: 1.25;
  box-shadow: 0 0 0 4px rgb(8 127 131 / 0.18);
}

.hp-onb-scale {
  display: flex;
  justify-content: space-between;
  color: var(--color-faint);
  font-size: 8.5px;
}

.hp-onb-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

.hp-onb-btn {
  border-radius: var(--app-radius-btn);
  padding: 6px 12px;
  color: #fff;
  background-color: var(--color-black);
  font-size: 9.5px;
  font-weight: 700;
  transition: transform 0.15s ease, background-color 0.3s ease;
}

.hp-onb-btn--ghost {
  border: 1px solid var(--color-border);
  color: var(--color-black);
  background-color: var(--color-white);
}

.hp-onb-btn.is-pressed {
  transform: scale(0.94);
}

.hp-onb-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 16px 14px;
  color: rgb(255 255 255 / 0.5);
  background-color: var(--color-black);
  font-size: 9.5px;
  font-weight: 600;
}

.hp-onb-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

.hp-onb-step::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 1.5px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  background: center / 8px no-repeat;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.hp-onb-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 6.5px;
  width: 1px;
  height: 10px;
  background-color: rgb(255 255 255 / 0.18);
}

.hp-onb-step.is-done {
  color: rgb(255 255 255 / 0.8);
}

.hp-onb-step.is-done::before {
  border-color: var(--color-cyan);
  background-color: var(--color-cyan);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f120e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.hp-onb-step.is-current {
  color: #fff;
}

.hp-onb-step.is-current::before {
  border-color: var(--color-cyan);
  background-image: radial-gradient(circle, var(--color-cyan) 0 3px, transparent 3.5px);
  background-size: 100% 100%;
}

.hp-float--onb {
  left: -20px;
  bottom: -26px;
  align-items: center;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.45s ease, transform 0.5s var(--ease-out);
}

.hp-float--onb.is-shown {
  opacity: 1;
  transform: none;
}

.hp-onb-toast-ico {
  width: 30px;
  height: 30px;
  border-radius: calc(30px * 7 / 34);
}

.hp-onb-toast-ico .hp-leo-glyph {
  width: 17px;
  height: 17px;
}

.hp-cursor {
  --x: 70%;
  --y: 80%;
  --t: 600ms;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 15px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 20'%3E%3Cpath d='M1 1v15.5l4-3.8 2.6 5.8 2.6-1.1-2.5-5.7H13z' fill='%231f120e' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgb(31 18 14 / 0.25));
  opacity: 0;
  pointer-events: none;
  translate: var(--x) var(--y);
  transition: translate var(--t) cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.3s ease, scale 0.12s ease;
}

.hp-cursor.is-on {
  opacity: 1;
}

.hp-cursor.is-down {
  scale: 0.88;
}

.hp-cursor::before {
  content: "";
  position: absolute;
  top: -9px;
  left: -9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(8 127 131 / 0.35);
  opacity: 0;
  scale: 0.3;
}

.hp-cursor.is-down::before {
  animation: hp-cursor-click 0.45s ease-out;
}

@keyframes hp-cursor-click {
  0% { opacity: 1; scale: 0.3; }
  100% { opacity: 0; scale: 1.4; }
}

@media (max-width: 640px) {
  .hp-float--onb {
    left: 8px;
    bottom: -30px;
  }
}

.hp-float--leo {
  top: -22px;
  right: -20px;
  align-items: center;
}

.hp-flow {
  position: relative;
  display: grid;
}

.hp-fl-w {
  grid-area: 1 / 1;
  transition: opacity 0.45s ease, transform 0.6s var(--ease-out), visibility 0s linear 0.45s;
}

.hp-fl-w--setup,
.hp-fl-w--editor {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.98);
}

.hp-flow.is-setup .hp-fl-w--list,
.hp-flow.is-editor .hp-fl-w--list,
.hp-flow.is-editor .hp-fl-w--setup {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.98);
}

.hp-flow.is-setup .hp-fl-w--setup,
.hp-flow.is-editor .hp-fl-w--editor {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.hp-md-tiles {
  display: flex;
  gap: 8px;
}

.hp-md-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 64px;
  border: 1px dashed #63aaac;
  border-radius: 6px;
  padding: 5px;
  background-color: #edf1f1;
}

.hp-md-ill {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  background-color: #78a4a41c;
}

.hp-md-ill img {
  width: 78%;
  height: auto;
}

.hp-md-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--app-soft);
  border-radius: 50%;
  color: #fff;
  background-color: #087f83;
}

.hp-md-badge .hp-shell-i {
  width: 6px;
  height: 6px;
}

.hp-md-tile-l {
  font-size: 7.5px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

.hp-md-k {
  display: block;
  margin: 14px 0 6px;
  color: var(--color-muted);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hp-md-tbl {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--app-radius);
  background-color: var(--color-white);
}

.hp-md-tr {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  font-size: 9.5px;
  white-space: nowrap;
  transition: background-color 0.25s ease, transform 0.15s ease;
}

.hp-md-tr + .hp-md-tr {
  border-top: 1px solid var(--color-border);
}

.hp-md-tr > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-md-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hp-md-type .hp-shell-i {
  width: 10px;
  height: 10px;
}

.hp-md-name {
  color: #087f83;
  font-weight: 600;
}

.hp-md-tr .hp-pill {
  font-size: 8.5px;
}

.hp-md-tr.is-hover {
  background-color: var(--color-teal-bg);
}

.hp-md-tr.is-pressed {
  transform: scale(0.99);
}

.hp-fl-form {
  position: relative;
}

.hp-fl-pane {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.hp-fl-pane--dates,
.hp-fl-form.is-dates .hp-fl-pane--who {
  display: none;
}

.hp-fl-form.is-dates .hp-fl-pane--dates {
  display: flex;
  animation: hp-fl-in 0.45s var(--ease-out);
}

@keyframes hp-fl-in {
  from { opacity: 0; transform: translateX(12px); }
}

.hp-fl-form .hp-onb-actions {
  margin-top: auto;
}

.hp-fl-radio {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--color-border);
  border-radius: var(--app-radius-btn);
  padding: 6px 8px;
  background-color: var(--color-white);
  font-size: 9.5px;
}

.hp-fl-radio::before {
  content: "";
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
}

.hp-fl-radio.is-on {
  border-color: var(--color-teal);
  background-color: var(--color-teal-bg);
}

.hp-fl-radio.is-on::before {
  border: 3px solid var(--color-teal);
}

.hp-cr-input {
  display: flex;
  align-items: center;
  min-height: 25px;
  border: 1px solid var(--color-border);
  border-radius: var(--app-radius-btn);
  padding: 5px 8px;
  background-color: var(--color-white);
  font-size: 9.5px;
  font-weight: 600;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hp-cr-input:empty::before {
  content: attr(data-ph);
  color: var(--color-faint);
  font-weight: 500;
}

.hp-cr-input.is-typing {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgb(8 127 131 / 0.12);
}

.hp-cr-input.is-typing::after {
  content: "";
  width: 1.5px;
  height: 11px;
  margin-left: 1px;
  background-color: var(--color-teal);
  opacity: 0;
  animation: hp-blink 0.9s steps(1) infinite;
}

.hp-fl-gen {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--app-soft);
  font-size: 11px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.hp-fl-form.is-gen .hp-fl-gen {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.hp-fl-gen-bar {
  width: 140px;
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--app-line);
}

.hp-fl-gen-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background-color: var(--color-teal);
}

.hp-fl-form.is-gen .hp-fl-gen-bar i {
  width: 100%;
  transition: width 1.3s var(--ease-out) 0.2s;
}

.hp-fl-ed {
  grid-template-columns: 92px minmax(0, 1fr) 26px 128px;
}

.hp-var.is-value {
  border-color: rgb(8 127 131 / 0.3);
  color: var(--color-teal-text);
  background-color: var(--color-teal-bg);
}

.hp-flow.is-editor [data-fl-var] {
  animation: hp-var-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: 0.6s;
}

.hp-flow.is-editor [data-fl-var]:nth-of-type(2) { animation-delay: 0.8s; }

.hp-flow.is-editor [data-fl-var]:nth-of-type(3) { animation-delay: 1s; }

.hp-fl-cm {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 7px;
  background-color: var(--color-white);
  font-size: 8.5px;
  line-height: 1.4;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i) * 0.45s);
}

.hp-flow.is-comments .hp-fl-cm {
  opacity: 1;
  transform: none;
}

.hp-fl-cm-who {
  display: flex;
  align-items: center;
  gap: 5px;
}

.hp-fl-cm-who .hp-avatar {
  width: 16px;
  height: 16px;
  font-size: 6.5px;
}

.hp-fl-cm-who b {
  display: block;
  font-size: 8.5px;
}

.hp-fl-cm-who small {
  display: block;
  color: var(--color-muted);
  font-size: 7px;
}

.hp-fl-cm p {
  margin-top: 4px;
}

@media (max-width: 640px) {
  /* Comme les autres éditeurs : document + panneau (sommaire et rail
     masqués plus haut) */
  .hp-fl-ed {
    grid-template-columns: minmax(0, 1fr) 110px;
  }
}

.hp-float--leo-bl {
  top: auto;
  right: auto;
  bottom: -26px;
  left: -20px;
}

[data-mock="generate"] {
  position: relative;
}

.hp-gen-ghost {
  --x: 0;
  --y: 0;
  --t: 0ms;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  border: 1px solid rgb(8 127 131 / 0.3);
  border-radius: 4px;
  padding: 0 4px;
  color: var(--color-teal-text);
  background-color: var(--color-teal-bg);
  box-shadow: 0 8px 16px -6px rgb(8 127 131 / 0.45);
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  translate: var(--x) var(--y);
  rotate: 0deg;
  /* Penché quand on l'attrape (.is-lift), il se redresse pendant le trajet
     et arrive droit à sa place */
  transition: translate var(--t) cubic-bezier(0.45, 0.05, 0.25, 1), rotate var(--t) cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.2s ease;
}

.hp-gen-ghost.is-on {
  opacity: 1;
}

.hp-gen-ghost.is-lift {
  rotate: -4deg;
}

[data-mock="generate"] .hp-var.is-target {
  border-style: dashed;
  border-color: rgb(8 127 131 / 0.55);
  color: transparent;
  background-color: transparent;
}

.hp-player {
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --reveal-delay: 300ms;
}

.hp-player:not(.is-ready) {
  display: none;
}

.hp-player-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 60px 18px 22px;
  background: linear-gradient(200deg, #fbf7ef, #fffdf9);
  box-shadow: 0 0 200px 0 rgb(31 18 14 / 13%);
}

.hp-player-corner {
  position: absolute;
  top: 16px;
  left: 22px;
  z-index: 4;
  overflow: hidden;
  /* Cadre-masque : marges internes pour garder accents et jambages (g, é) */
  padding-block: 0.1em 0.16em;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.6px;
  white-space: nowrap;
  pointer-events: none;
}

.hp-player-corner > span {
  display: inline-block;
  will-change: transform;
  transform: translateY(100px);
  transition: transform 0.45s ease-in;
}

.is-corner .hp-player-corner > span {
  transform: none;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.hp-sc-viewport {
  --fit: 1;
  position: relative;
  height: calc(440px * var(--fit));
}

.hp-sc {
  position: absolute;
  top: 0;
  left: 50%;
  width: 880px;
  height: 440px;
  translate: -50% 0;
  scale: var(--fit);
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.hp-sc.is-resetting *,
.hp-sc.is-resetting *::before,
.hp-sc.is-resetting *::after {
  transition: none !important;
}

.hp-sc.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.hp-sc-cam {
  position: absolute;
  inset: 0;
}

.hp-sc.is-active .hp-sc-cam,
.hp-sc.is-leaving .hp-sc-cam {
  animation: hp-cam 7s var(--ease-out) both;
}

@keyframes hp-cam {
  from { transform: scale(1.07) translateY(10px); }
  to { transform: none; }
}

.hp-sc.is-active,
.hp-sc.is-leaving {
  will-change: opacity;
}

.hp-sc.is-active .hp-sc-cam,
.hp-sc.is-leaving .hp-sc-cam {
  will-change: transform;
}

.hp-sc.is-active :is(.hp-sc-card, .hp-sc-toast, .hp-sc-signer, .hp-sc-cursor, .hp-sc-drag, .hp-sc-kb-card), .hp-sc.is-leaving :is(.hp-sc-card, .hp-sc-toast, .hp-sc-signer, .hp-sc-cursor, .hp-sc-drag, .hp-sc-kb-card) {
  will-change: transform, translate, rotate, scale, opacity;
  backface-visibility: hidden;
}

.hp-sc-card {
  position: absolute;
  border: 1px solid #e3e3e3;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgb(31 18 14 / 0.04), 0 30px 60px -24px rgb(31 18 14 / 0.28);
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  /* height : cartes qui grandissent avec leur contenu (js/main.js,
     fitHeight) */
  transition: opacity 0.5s ease, transform 0.8s var(--ease-out), translate 0.9s var(--ease-out), scale 0.9s var(--ease-out), height 0.2s var(--ease-out);
}

.hp-sc.is-s1 .hp-sc-card {
  opacity: 1;
  transform: none;
}

.hp-sc-k {
  display: block;
  color: var(--color-teal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hp-sc-l {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
}

.hp-sc .hp-pill {
  padding: 4px 11px;
  font-size: 12.5px;
}

.hp-sc .hp-avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.hp-sc-paper-t {
  color: var(--color-teal);
  font-size: 17px;
  font-weight: 700;
}

.hp-sc-paper-p {
  margin-top: 14px;
  color: var(--color-black);
  font-size: 16px;
  line-height: 1.8;
}

.hp-sc-toast {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  padding: 8px 18px 8px 8px;
  color: #fff;
  background-color: var(--color-black);
  box-shadow: 0 20px 40px -16px rgb(31 18 14 / 0.5);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(12px) scale(0.8);
  transition: opacity 0.35s ease, transform 0.6s var(--pop);
}

.hp-sc-toast-ico {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-cyan) center / 16px no-repeat;
}

.hp-sc-ico--check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f120e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

.hp-sc-ico--scale { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f120e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); }

.hp-sc-status {
  display: inline-grid;
  justify-items: end;
}

.hp-sc-status > * {
  grid-area: 1 / 1;
  transition: opacity 0.3s ease, transform 0.5s var(--pop);
}

.hp-sc-status > :last-child {
  opacity: 0;
  transform: scale(0.6);
}

.hp-sc-cursor {
  position: absolute;
  top: 0;
  left: 0;
  translate: 780px 400px;
  z-index: 5;
  width: 20px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 20'%3E%3Cpath d='M1 1v15.5l4-3.8 2.6 5.8 2.6-1.1-2.5-5.7H13z' fill='%231f120e' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / contain no-repeat;
  filter: drop-shadow(0 3px 4px rgb(31 18 14 / 0.3));
  opacity: 0;
  transition: translate 0.65s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.3s ease, scale 0.12s ease;
}

.hp-sc-cursor.is-down {
  scale: 0.85;
}

.hp-sc-cursor::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: rgb(8 127 131 / 0.35);
  opacity: 0;
}

.hp-sc-cursor.is-down::before {
  animation: hp-cursor-click 0.45s ease-out;
}

.hp-sc-onb-field {
  top: 40px;
  left: 230px;
  z-index: 2;
  width: 420px;
  padding: 26px;
}

.hp-sc-select {
  position: relative;
  display: grid;
  align-items: center;
  height: 50px;
  margin-top: 8px;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 0 44px 0 16px;
  font-size: 15px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hp-sc-select > span {
  grid-area: 1 / 1;
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
}

.hp-sc-select-ph {
  color: #a3a3a3;
}

.hp-sc-select-v {
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
}

.hp-sc-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--ease-out);
}

.hp-sc-menu {
  position: absolute;
  top: 176px;
  right: 26px;
  left: 26px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 6px;
  background-color: #fff;
  z-index: 3; /* par-dessus le choix « Type de réseau » */
  box-shadow: 0 16px 36px -12px rgb(31 18 14 / 0.3);
  font-size: 14px;
  opacity: 0;
  transform: translateY(-6px);
  transform-origin: top;
  transition: opacity 0.2s ease, transform 0.3s var(--ease-out);
}

.hp-sc-l--seg {
  margin-top: 22px;
}

.hp-sc-seg {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.hp-sc-seg > span {
  flex: 1;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 12px 8px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.hp-sc-seg > span.is-picked {
  border-color: var(--color-teal);
  color: var(--color-teal-text);
  background-color: var(--color-teal-bg);
  box-shadow: 0 0 0 3px rgb(8 127 131 / 0.12);
}

.hp-sc-menu > span {
  border-radius: 6px;
  padding: 10px 12px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hp-sc-cursor {
  translate: 760px 400px;
}

.hp-sc--onb.is-s2 .hp-sc-cursor { translate: 560px 142px; opacity: 1; }

.hp-sc--onb.is-s3 .hp-sc-select { border-color: var(--color-teal); box-shadow: 0 0 0 4px rgb(8 127 131 / 0.12); }

.hp-sc--onb.is-s3 .hp-sc-select::after { transform: rotate(180deg); }

.hp-sc--onb.is-s3 .hp-sc-menu { opacity: 1; transform: none; }

.hp-sc--onb.is-s3 .hp-sc-cursor { translate: 430px 280px; }

.hp-sc--onb.is-s3 .hp-sc-menu-pick { background-color: #f5f8f8; }

.hp-sc--onb.is-s4 .hp-sc-menu { opacity: 0; transform: translateY(-6px); }

.hp-sc--onb.is-s4 .hp-sc-select::after { transform: none; }

.hp-sc--onb.is-s4 .hp-sc-select-ph { opacity: 0; transform: translateY(-8px); }

.hp-sc--onb.is-s4 .hp-sc-select-v { opacity: 1; transform: none; }

.hp-sc--onb.is-s5 .hp-sc-onb-field { translate: -160px 20px; scale: 0.94; }

.hp-sc--onb.is-s5 .hp-sc-cursor { translate: 860px 430px; opacity: 0; }

.hp-sc-onb-profile {
  top: 130px;
  left: 520px;
  width: 300px;
  padding: 24px;
  rotate: 3deg;
}

.hp-sc.is-s1 .hp-sc-onb-profile {
  opacity: 0;
  transform: translateX(40px) scale(0.92);
}

.hp-sc--onb.is-s5 .hp-sc-onb-profile {
  opacity: 1;
  transform: none;
}

.hp-sc-onb-name {
  display: block;
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
}

.hp-sc-onb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.hp-sc-chip {
  border: 1px solid rgb(8 127 131 / 0.3);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--color-teal-text);
  background-color: var(--color-teal-bg);
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.5s var(--pop);
}

.hp-sc--onb.is-s5 .hp-sc-chip { opacity: 1; transform: none; }

.hp-sc-chip:nth-child(1) { transition-delay: 0.35s; }

.hp-sc-chip:nth-child(2) { transition-delay: 0.5s; }

.hp-sc-chip:nth-child(3) { transition-delay: 0.65s; }

.hp-sc-chip:nth-child(4) { transition-delay: 0.8s; }

.hp-sc-onb-toast {
  top: 60px;
  left: 560px;
}

.hp-sc--onb.is-s6 .hp-sc-onb-toast { opacity: 1; transform: none; }

.hp-sc-gen-fields {
  top: 120px;
  left: 30px;
  z-index: 2;
  width: 260px;
  padding: 22px;
  rotate: -2deg;
}

.hp-sc.is-s1 .hp-sc-gen-fields {
  opacity: 0;
  transform: translateX(-40px);
}

.hp-sc--gen.is-s2 .hp-sc-gen-fields {
  opacity: 1;
  transform: none;
}

.hp-sc-gen-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 11px;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hp-sc-gen-row b {
  font-size: 13.5px;
  font-weight: 600;
  transition: color 0.2s ease;
}

.hp-sc-gen-row.is-on {
  border-color: rgb(8 127 131 / 0.3);
  background-color: var(--color-teal-bg);
  box-shadow: 0 4px 12px -4px rgb(8 127 131 / 0.25);
  transform: translateX(4px);
}

.hp-sc-gen-row.is-on b {
  color: var(--color-teal-text);
}

.hp-sc-gen-row.is-press {
  transform: translateX(4px) scale(0.97);
}

.hp-sc-gen-foot {
  display: block;
  margin-top: 10px;
  border-top: 1px solid #eee;
  padding-top: 10px;
  color: #a3a3a3;
  font-size: 11px;
}

.hp-sc-paper {
  top: 56px;
  left: 320px;
  width: 520px;
  overflow: hidden; /* nouvelle ligne découverte par la carte, pas de débord */
  padding: 34px 38px;
}

.hp-sc-paper-h {
  display: block;
  margin-bottom: 18px;
  color: #a3a3a3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hp-sc-tcaret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background-color: var(--color-teal);
  animation: hp-sc-blink 1s steps(1) infinite;
}

@keyframes hp-sc-blink {
  50% { opacity: 0; }
}

.hp-sc-var {
  display: none;
  border: 1px solid rgb(8 127 131 / 0.3);
  border-radius: 5px;
  padding: 0 6px;
  color: var(--color-teal-text);
  background-color: var(--color-teal-bg);
  font-size: 0.9em;
  font-weight: 600;
}

.hp-sc-var.is-in {
  display: inline-block;
  animation: hp-var-in 0.5s var(--pop);
}

.hp-sc-gen-toast {
  top: 332px; /* à cheval sur le bas du document (56 + 300) */
  right: 40px;
}

.hp-sc--gen.is-s6 .hp-sc-gen-toast { opacity: 1; transform: none; }

.hp-sc-clause {
  top: 40px;
  left: 110px;
  width: 570px;
  overflow: hidden; /* nouvelle ligne découverte par la carte, pas de débord */
  padding: 30px 34px;
}

.hp-sc-clause-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hp-sc-mark {
  border-radius: 4px;
  color: inherit;
  background: linear-gradient(var(--color-purple-bg), var(--color-purple-bg)) 0 0 / 0% 100% no-repeat;
  transition: background-size 0.8s var(--ease-out);
}

.hp-sc--val.is-s2 .hp-sc-mark {
  background-size: 100% 100%;
}

.hp-sc-ins {
  display: none;
  border-radius: 4px;
  color: var(--color-green-text);
  background-color: var(--color-green-bg);
  text-decoration: none;
}

.hp-sc--val.is-s4 .hp-sc-ins {
  display: inline;
}

.hp-sc-comment {
  top: 190px;
  left: 470px;
  z-index: 2;
  width: 340px;
  border-color: var(--color-purple-line);
  padding: 18px 20px;
  background-color: var(--color-purple-bg);
}

.hp-sc-comment {
  transform-origin: 0 0;
}

.hp-sc.is-s1 .hp-sc-comment {
  opacity: 0;
  transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(0.5);
}

.hp-sc--val.is-s3 .hp-sc-comment {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  transition: opacity 0.45s ease, transform 0.8s var(--ease-out);
}

.hp-sc-comment-who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hp-sc-comment-who > span:last-child,
.hp-sc-signer > span:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.hp-sc-comment-who b,
.hp-sc-signer b {
  font-size: 14px;
}

.hp-sc-comment-who span span,
.hp-sc-signer > span:nth-child(2) span {
  color: #757575;
  font-size: 12px;
}

.hp-sc-comment p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
}

.hp-sc--val.is-s5 .hp-sc-status > :first-child {
  opacity: 0;
  transform: scale(0.6);
}

.hp-sc--val.is-s5 .hp-sc-status > :last-child {
  opacity: 1;
  transform: none;
}

.hp-sc-val-toast {
  top: 208px; /* à cheval sur le bas de la clause */
  left: 130px;
}

.hp-sc--val.is-s5 .hp-sc-val-toast {
  opacity: 1;
  transform: none;
  transition-delay: 0.25s;
}

.hp-sc-md {
  top: 40px;
  left: 40px;
  width: 500px;
  padding: 24px 26px 18px;
}

.hp-sc-md-tiles {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.hp-sc-md-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 96px;
  border: 1px dashed #63aaac;
  border-radius: 9px;
  padding: 6px 6px 7px;
  background-color: #edf1f1;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.hp-sc-md-tile img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  background-color: #78a4a41c;
}

.hp-sc-md-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.hp-sc-md-row + .hp-sc-md-row {
  margin-top: 0;
  border-top: 1px solid #eee;
}

.hp-sc-md-row b {
  overflow: hidden;
  color: var(--color-teal);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hp-sc-md-type {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hp-sc-md-row .hp-pill {
  padding: 2px 9px;
  font-size: 11.5px;
}

.hp-sc--md.is-s2 .hp-sc-md-row--pick {
  background-color: var(--color-teal-bg);
  box-shadow: inset 0 0 0 1px rgb(8 127 131 / 0.3);
}

.hp-sc-md-doc {
  top: 90px;
  left: 440px;
  z-index: 2;
  width: 400px;
  padding: 30px 32px;
}

.hp-sc.is-s1 .hp-sc-md-doc {
  opacity: 0;
  transform: translateX(40px);
}

.hp-sc--md.is-s3 .hp-sc-md-doc {
  opacity: 1;
  transform: none;
}

.hp-sc--md.is-s3 .hp-sc-md {
  translate: -20px 10px;
  scale: 0.94;
}

.hp-sc--md.is-s3 .hp-sc-var {
  display: inline-block;
  animation: hp-var-in 0.5s var(--pop) backwards;
  animation-delay: 0.4s;
}

.hp-sc--md.is-s3 .hp-sc-var:nth-of-type(2) { animation-delay: 0.65s; }

.hp-sc--md.is-s3 .hp-sc-var:nth-of-type(3) { animation-delay: 0.9s; }

.hp-sc-md-toast {
  top: 350px;
  right: 50px;
  z-index: 3;
}

.hp-sc--md.is-s4 .hp-sc-md-toast { opacity: 1; transform: none; }

.hp-sc-doc {
  top: 22px;
  left: 260px; /* centré (440px) ; A et B : ∓200px */
  z-index: 2;
  width: 360px;
  padding: 20px;
  transform-origin: 50% 100%;
  transition: opacity 0.4s ease, transform 0.8s var(--ease-out), translate 0.9s var(--ease-out), scale 0.8s var(--ease-out), box-shadow 0.35s ease;
}

.hp-sc--sign.is-s1 .hp-sc-doc {
  opacity: 0;
  translate: -200px 50px;
  scale: 0.2;
}

.hp-sc--sign.is-s2 .hp-sc-doc {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

.hp-sc--sign .hp-sc-doc.is-focus {
  scale: 1.06;
  box-shadow: 0 2px 4px rgb(31 18 14 / 0.05), 0 40px 70px -24px rgb(31 18 14 / 0.35);
}

.hp-sc--sign.is-s2 .hp-sc-doc--copy {
  z-index: 1;
  translate: 10px 8px;
  transition: opacity 0.6s ease, translate 0.8s var(--ease-out), scale 0.8s var(--ease-out);
}

.hp-sc--sign.is-s2 .hp-sc-doc--copy.is-new {
  opacity: 0;
  translate: 0 0;
}

.hp-sc--sign.is-s3 .hp-sc-doc { translate: 200px 0; scale: 0.64; }

.hp-sc--sign.is-s3 .hp-sc-doc--copy { translate: -200px 0; }

.hp-sc-doc-lines {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.hp-sc-doc-lines i {
  height: 7px;
  border-radius: 4px;
  background-color: #ececec;
}

.hp-sc-doc-lines i:nth-child(2) { width: 88%; }

.hp-sc-doc-lines i:nth-child(3) { width: 62%; }

.hp-sc-doc-sigs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.hp-sc-sigbox {
  position: relative;
  display: block;
  height: 104px;
  border-radius: 12px;
  background-color: #f5f8f8;
}

.hp-sc-sigsvg {
  position: absolute;
  top: 6px;
  /* Au-dessus de tout le contenu de l'emplacement (ligne de signature, nom) */
  z-index: 2;
  left: 50%;
  width: 128px;
  height: 74px;
  translate: -50% 0;
  overflow: visible;
}

.hp-sc-sigsvg path {
  stroke: var(--color-black);
  stroke-width: 12.5; /* unités du viewBox, comme dans Illustrator */
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  /* Caché avant son tracé : l'embout rond laisse sinon un point visible */
  opacity: 0;
}

.hp-sc-sigbox.is-signing .hp-sc-sigsvg path,
.hp-sc-sigbox.is-signed .hp-sc-sigsvg path {
  stroke-dashoffset: 0;
  opacity: 1;
}

.hp-sc-sigline {
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  border-top: 1.5px dashed #cfcfcf;
  padding-top: 5px;
  color: #757575;
  font-size: 12px;
  white-space: nowrap;
}

.hp-sc-signer {
  position: absolute;
  top: 300px;
  z-index: 1; /* au-dessus du lien entre signataires */
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 250px;
  border: 1px solid #e3e3e3;
  border-radius: 14px;
  white-space: nowrap;
  padding: 12px 14px;
  background-color: #fff;
  box-shadow: 0 20px 40px -20px rgb(31 18 14 / 0.3);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.7s var(--ease-out);
}

.hp-sc-signer > :last-child {
  margin-left: auto;
}

.hp-sc-signer--a { left: 115px; }

.hp-sc-signer--b { left: 503px; transition-delay: 0.1s; }

.hp-sc-signer.is-signed .hp-sc-status > :first-child {
  opacity: 0;
  transform: scale(0.6);
}

.hp-sc-signer.is-signed .hp-sc-status > :last-child {
  opacity: 1;
  transform: none;
}

.hp-sc--sign.is-s1 .hp-sc-signer {
  opacity: 1;
  transform: none;
}

.hp-sc-signlink {
  position: absolute;
  top: 330px;
  left: 240px;
  z-index: 0;
  width: 400px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgb(8 127 131 / 0.6) 0 6px, transparent 6px 12px) 0 0 / 12px 2px;
  opacity: 0;
  transition: opacity 0.4s ease 0.25s;
  animation: hp-sc-dash 0.7s linear infinite;
}

.hp-sc--sign.is-s1 .hp-sc-signlink {
  opacity: 1;
}

@keyframes hp-sc-dash {
  to { background-position: 12px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-sc-signlink {
    animation: none;
  }
}

.hp-sc-sign-toast {
  top: 52px;
  left: 50%;
  z-index: 3;
  translate: -50% 0;
}

.hp-sc--sign.is-s4 .hp-sc-sign-toast { opacity: 1; transform: none; }

.hp-sc-kb {
  top: 40px;
  left: 30px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  width: 820px;
  padding: 16px;
}

.hp-sc-kb-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 330px;
  border-radius: 12px;
  padding: 12px;
  background-color: #f6f6f4;
}

.hp-sc-kb-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.hp-sc-kb-n {
  color: #757575;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hp-sc-kb-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  padding: 12px 14px;
  background-color: #fff;
  box-shadow: 0 2px 6px -2px rgb(31 18 14 / 0.08);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.5s var(--ease-out), border-color 0.3s ease;
  transition-delay: calc(var(--i) * 70ms);
}

.hp-sc--track.is-s2 .hp-sc-kb-card {
  opacity: 1;
  transform: none;
}

.hp-sc--track.is-s3 .hp-sc-kb-card {
  transition-delay: 0s;
}

.hp-sc-kb-card .hp-tag {
  font-size: 10px;
}

.hp-sc-kb-card b {
  font-size: 14px;
}

.hp-sc-kb-d {
  color: #757575;
  font-size: 12.5px;
}

.hp-sc-kb-card.is-moved {
  border-color: var(--color-teal);
}

.hp-sc-lib {
  top: 40px;
  left: 170px;
  display: flex;
  flex-direction: column;
  width: 540px;
  padding: 8px;
  transition: opacity 0.5s ease, transform 0.8s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}

.hp-sc--lib.is-s2 .hp-sc-lib {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 4px rgb(8 127 131 / 0.12), 0 30px 60px -24px rgb(31 18 14 / 0.28);
}

.hp-sc--lib.is-s3 .hp-sc-lib {
  border-color: #e3e3e3;
  box-shadow: 0 2px 4px rgb(31 18 14 / 0.04), 0 30px 60px -24px rgb(31 18 14 / 0.28);
}

.hp-sc-lib-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 12px;
}

.hp-sc-lib-import {
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
}

.hp-sc-lrow {
  display: grid;
  max-height: 60px;
  overflow: hidden;
  border-top: 1px solid #efefef;
  padding: 14px 12px;
  font-size: 14px;
}

.hp-sc-lrow > span {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  transition: opacity 0.35s ease;
}

.hp-sc-lrow-final {
  justify-content: space-between;
}

.hp-sc-lrow b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-sc-lrow-pend b {
  flex: 1;
  font-weight: 600;
}

.hp-sc-lrow-pend i,
.hp-sc-drag-doc i {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  color: #fff;
  background-color: var(--color-teal-deep);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.hp-sc-lrow-bar {
  position: relative;
  flex: 0 0 120px;
  height: 5px;
  overflow: hidden;
  border-radius: 3px;
  background-color: #ececec;
}

.hp-sc-lrow-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--color-teal);
  transform: scaleX(0.05);
  transform-origin: left;
}

.hp-sc--lib.is-s3 .hp-sc-lrow-bar::after {
  transform: none;
  transition: transform 1.1s var(--ease-out) calc(0.3s + var(--i) * 0.25s);
}

.hp-sc-lrow.is-new {
  max-height: 0;
  border-top-color: transparent;
  padding-block: 0;
  opacity: 0;
}

.hp-sc--lib.is-s3 .hp-sc-lrow.is-new {
  max-height: 60px;
  border-top-color: #efefef;
  padding-block: 14px;
  opacity: 1;
  transition: max-height 0.5s var(--ease-out), padding 0.5s var(--ease-out), opacity 0.3s ease;
  transition-delay: calc(var(--i) * 0.25s);
}

.hp-sc-lrow.is-new .hp-sc-lrow-final,
.hp-sc--lib.is-s4 .hp-sc-lrow.is-new .hp-sc-lrow-pend {
  opacity: 0;
}

.hp-sc--lib.is-s4 .hp-sc-lrow.is-new .hp-sc-lrow-final {
  opacity: 1;
}

.hp-sc--lib.is-s4 .hp-sc-lrow.is-new > span {
  transition-delay: calc(var(--i) * 0.2s);
}

.hp-sc-drag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 52px;
  height: 60px;
  opacity: 0;
  translate: 780px 360px;
  transition: translate 1s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.3s ease, scale 0.3s ease;
}

.hp-sc--lib.is-s2 .hp-sc-drag {
  opacity: 1;
  translate: 420px 130px;
}

.hp-sc--lib.is-s3 .hp-sc-drag {
  translate: 420px 130px;
  opacity: 0;
  scale: 0.6;
}

.hp-sc-drag-doc {
  position: absolute;
  inset: 0 8px 0 0;
  display: grid;
  place-items: center;
  border: 1px solid #e3e3e3;
  border-radius: 7px;
  background-color: #fff;
  box-shadow: 0 12px 24px -10px rgb(31 18 14 / 0.35);
}

.hp-sc-drag-doc:nth-child(1) { rotate: -10deg; translate: -7px 2px; }

.hp-sc-drag-doc:nth-child(2) { rotate: 6deg; translate: 6px 1px; }

.hp-sc-drag-n {
  position: absolute;
  top: -8px;
  right: -2px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background-color: var(--color-teal);
  font-size: 11px;
  font-weight: 800;
}

.hp-sc-drag-cursor {
  position: absolute;
  right: -14px;
  bottom: -16px;
  width: 20px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 20'%3E%3Cpath d='M1 1v15.5l4-3.8 2.6 5.8 2.6-1.1-2.5-5.7H13z' fill='%231f120e' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / contain no-repeat;
  filter: drop-shadow(0 3px 4px rgb(31 18 14 / 0.3));
}

.hp-sc-toast--leo {
  border-radius: calc(30px * 7 / 34 + 8px);
}

.hp-sc-toast-leo {
  width: 30px;
  height: 30px;
  border-radius: calc(30px * 7 / 34);
  /* Liseré cyan : le badge (#00383c) se détache du toast sombre */
  box-shadow: inset 0 0 0 1px rgb(98 231 235 / 0.35);
}

.hp-sc-toast-leo .hp-leo-glyph {
  width: 17px;
  height: 17px;
}

.hp-sc-lib-toast {
  top: 330px;
  left: 120px;
  z-index: 3;
}

.hp-sc--lib.is-s4 .hp-sc-lib-toast {
  opacity: 1;
  transform: none;
  transition-delay: 0.5s;
}

.hp-sc-alert {
  top: 250px;
  left: 470px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 330px;
  padding: 16px 18px;
}

.hp-sc.is-s1 .hp-sc-alert {
  opacity: 0;
  transform: translateY(16px) scale(0.9);
}

.hp-sc--lib.is-s5 .hp-sc-alert {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease, transform 0.6s var(--pop);
}

.hp-sc--lib.is-s5 .hp-bell {
  animation: hp-ring 0.9s ease 0.3s;
}

.hp-sc-alert > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hp-sc-alert b {
  font-size: 14.5px;
}

.hp-sc-alert span span {
  color: #757575;
  font-size: 12.5px;
}

.hp-player-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.hp-player-tab {
  position: relative;
  display: block;
  min-width: 0;
  border: 0;
  padding: 10px 0 0;
  color: var(--color-faint);
  background: none;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}

.hp-player-tab::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 1px;
  background-color: rgb(31 18 14 / 0.1);
}

.hp-player-tab:hover,
.hp-player-tab.is-active {
  color: var(--color-black);
}

.hp-player-tab.is-done {
  color: var(--color-muted);
}

.hp-player-tab:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 4px;
  border-radius: 2px;
}

.hp-player-tab-n {
  margin-right: 5px;
  color: var(--color-faint);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.hp-player-tab.is-active .hp-player-tab-n {
  color: var(--color-teal);
}

.hp-player-tab-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-teal);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.hp-player-tab.is-done .hp-player-tab-bar {
  transform: none;
}

.hp-player-tab.is-active .hp-player-tab-bar {
  animation: hp-player-bar var(--dur, 9s) linear forwards;
}

.hp-player.is-paused .hp-player-tab-bar,
.hp-player.is-paused .hp-sc-cam {
  animation-play-state: paused;
}

@keyframes hp-player-bar {
  to { transform: scaleX(1); }
}

@media (max-width: 1100px) {
  .hp-player-stage {
    padding: 76px 24px 28px;
  }

  .hp-player-corner {
    top: 20px;
    left: 30px;
    font-size: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-sc.is-active .hp-sc-cam,
  .hp-sc.is-leaving .hp-sc-cam {
    animation: none;
  }

  .hp-player-corner > span {
    transition: none !important;
  }
}

.hp-sc-dragchip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  border: 1px solid rgb(8 127 131 / 0.3);
  border-radius: 5px;
  padding: 0 6px;
  color: var(--color-teal-text);
  background-color: var(--color-teal-bg);
  box-shadow: 0 12px 24px -8px rgb(8 127 131 / 0.45);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  rotate: 0deg;
  /* Penché quand on l'attrape (.is-lift), il se redresse pendant le trajet
     et arrive droit à sa place */
  transition: translate 0.65s cubic-bezier(0.45, 0.05, 0.25, 1), rotate 0.65s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.2s ease;
}

.hp-sc-dragchip.is-on {
  opacity: 1;
}

.hp-sc-dragchip.is-lift {
  rotate: -4deg;
}

.hp-sc-gen-cursor.is-on,
.hp-sc-md-cursor.is-on {
  opacity: 1;
}

.hp-avocat-sec {
  background:
    radial-gradient(50% 60% at 90% 10%, rgb(98 231 235 / 0.1), transparent 70%),
    var(--color-black);
}

.hp-avocat-sec .hp-h2 .hp-em {
  color: var(--color-cyan);
  font-style: italic;
}

.hp-av-visual {
  --reveal-delay: 120ms;
}

.hp-av-doc {
  border-radius: var(--radius-xl);
  padding: 24px 26px 26px;
  color: var(--color-black);
  background-color: var(--color-white);
  font-size: 13.5px;
  line-height: 1.6;
}

.hp-av-doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.hp-av-doc-head > span:first-child {
  display: flex;
  flex-direction: column;
}

.hp-av-doc-head b {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
}

.hp-av-doc-head > span:first-child > span {
  color: var(--color-muted);
  font-size: 12px;
}

.hp-av-valid {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease 2s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2s;
}

.hp-av-versions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--color-muted);
  font-size: 12px;
}

.hp-av-versions i {
  border-radius: 5px;
  padding: 2px 7px;
  background-color: var(--color-beige);
  font-style: normal;
  font-weight: 700;
}

.hp-av-versions i.is-current {
  color: var(--color-teal-text);
  background-color: var(--color-teal-bg);
  opacity: 0;
  transition: opacity 0.4s ease 1.6s;
}

.hp-av-art {
  display: block;
  margin: 16px 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hp-av-doc p + p {
  margin-top: 8px;
}

.hp-av-field {
  border-radius: 4px;
  padding-inline: 1px;
  background-color: var(--color-purple-bg);
}

.hp-av-add {
  border-radius: 3px;
  color: var(--color-green-text);
  background: linear-gradient(var(--color-green-bg), var(--color-green-bg)) 0 0 / 0% 100% no-repeat;
  transition: background-size 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.hp-av-doc .hp-line {
  background-color: #efe9de;
}

.hp-av-note {
  position: absolute;
  right: -24px;
  bottom: -18px;
  width: min(330px, 80%);
  /* Violet de l'avocat, comme son commentaire dans le hero (.hp-sc-comment) */
  border: 1px solid var(--color-purple-line);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  color: var(--color-black);
  background-color: var(--color-purple-bg);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6);
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(16px) rotate(1.5deg);
  transition: opacity 0.4s ease 1s, transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 1s;
}

.hp-av-note-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.hp-av-note-who > span:last-child {
  display: flex;
  flex-direction: column;
}

.hp-av-note-who span span {
  color: var(--color-muted);
  font-size: 11.5px;
}

.hp-av-note-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--color-white);
  background-color: var(--color-purple-text);
  font-size: 11px;
  font-weight: 800;
}

.hp-av-note-ok {
  display: block;
  margin-top: 8px;
  color: var(--color-purple-text);
  font-weight: 700;
}

.hp-av-visual.is-visible .hp-av-add { background-size: 100% 100%; }

.hp-av-visual.is-visible .hp-av-note { opacity: 1; transform: rotate(-1deg); }

.hp-av-visual.is-visible .hp-av-versions i.is-current { opacity: 1; }

.hp-av-visual.is-visible .hp-av-valid { opacity: 1; transform: none; }

.hp-av-step:first-child {
  padding-left: 0;
}

.hp-av-step:last-child {
  padding-right: 0;
}

.hp-av-step + .hp-av-step {
  border-left: 1px solid rgb(255 254 251 / 0.14);
}

.hp-av-step:nth-child(2) { --reveal-delay: 80ms; }

.hp-av-step:nth-child(3) { --reveal-delay: 160ms; }

.hp-av-step p {
  margin-top: 14px;
  color: rgb(255 254 251 / 0.65);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

.hp-av-step strong {
  color: var(--color-cyan);
  font-weight: 700;
}

.hp-avocat-opts > :nth-child(3) {
  --reveal-delay: 100ms;
}

.hp-av-credits::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-lime);
}

.hp-av-credits strong {
  font-weight: 700;
}

.hp-av-lawyer a {
  color: var(--color-cyan);
  font-weight: 700;
}

.hp-av-lawyer a span {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}

.hp-av-lawyer a:hover span {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .hp-av-visual * {
    transition: none !important;
  }
}

.hp-trust-cards {
  --reveal-delay: 120ms;
}

@media (max-width: 991px) {

  .hp-av-note {
    right: 0;
  }

  .hp-av-step:first-child,
  .hp-av-step:last-child {
    padding-inline: 0;
  }

  .hp-av-step + .hp-av-step {
    border-left: 0;
    border-top: 1px solid rgb(255 254 251 / 0.14);
    padding-top: 32px;
  }
}

@media (max-width: 640px) {
  .hp-opt {
    padding: 20px;
  }

  .hp-av-doc {
    padding: 20px;
  }

  .hp-av-note {
    position: relative;
    width: auto;
    margin-top: -20px;
    margin-left: 16px;
  }

  .hp-av-visual {
    padding-bottom: 0;
  }

  .hp-trust-cards {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }
}

.hp-bcard--time { --reveal-delay: 80ms;
}

.hp-bcard--leo { --reveal-delay: 80ms;
}

.hp-bcard--time {
  background:
    radial-gradient(80% 70% at 100% 0%, rgb(98 231 235 / 0.22), transparent 70%),
    var(--color-white);
}

.hp-costchart-row {
  display: grid;
  gap: 8px;
  border-radius: var(--radius-md);
  padding: 14px 16px 10px;
}

.hp-costchart-row--flat {
  background-color: var(--color-teal-bg);
}

.hp-costchart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.hp-costchart-key {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

.hp-costchart-key::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background-color: var(--color-teal);
}

.hp-costchart-key--credit::before {
  background-color: var(--color-cyan);
}

.hp-costchart-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 110px;
  /* Air sous la légende : le pic à 100 % et le libellé « Budget prévu »
     ne viennent pas la toucher. */
  margin-top: 14px;
  border-bottom: 1px solid rgb(31 18 14 / 0.18);
  background: linear-gradient(to bottom, rgb(31 18 14 / 0.07) 1px, transparent 1px) 0 0 / 100% 50%;
}

.hp-costchart-m {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: 3px;
  height: 100%;
}

.hp-costchart-x {
  display: flex;
  gap: 6px;
  margin-top: -3px;
}

.hp-costchart-x b {
  flex: 1;
  color: var(--color-faint);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.hp-costchart-bars i {
  position: relative;
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 2px 2px;
  background-color: var(--color-teal);
  transform-origin: bottom;
  transition: transform 0.8s var(--ease-out);
  max-width: 34px;
  margin-inline: auto;
  /* Les barres montent mois par mois */
  transition-delay: calc(0.2s + var(--m) * 60ms);
}

.hp-costchart-bars u {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: var(--c);
  border-radius: 4px 4px 0 0;
  background-color: var(--color-cyan);
}

.hp-costchart-bars i:has(u) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.hp-costchart-budget {
  position: absolute;
  right: 0;
  bottom: 82%;
  left: 0;
  z-index: 1;
  border-top: 1.5px dashed var(--color-teal);
  pointer-events: none;
  transition: opacity 0.4s ease 1.1s;
}

.hp-costchart-budget span {
  position: absolute;
  bottom: 3px;
  left: 0;
  border-radius: 4px;
  padding: 0 4px 0 0;
  background-color: var(--color-teal-bg);
  color: var(--color-teal);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.js-reveal .hp-bcard--cost:not(.is-visible) .hp-costchart-bars i {
  transform: scaleY(0.05);
}

.js-reveal .hp-bcard--cost:not(.is-visible) .hp-costchart-budget {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hp-costchart-bars i,
  .hp-costchart-budget {
    transition: none !important;
  }
}

.hp-bcard--simple .hp-bcard-p {
  margin-bottom: 24px;
}

.hp-params-in,
.hp-params-out {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hp-params-in span,
.hp-params-out span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 10px;
  background-color: var(--color-white);
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.hp-params-in b {
  color: var(--color-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hp-params-out span {
  justify-content: space-between;
  font-weight: 700;
}

.hp-params-out span::after {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  align-self: center;
  border-radius: 50%;
  background: var(--color-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffefb' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat;
  transform: scale(0);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hp-params-arrow {
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--color-cyan), var(--color-teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out) 1s;
}

.hp-bcard--simple.is-visible .hp-params-in span {
  border-color: var(--color-cyan);
  background-color: var(--color-cyan-light);
  transition-delay: calc(var(--i) * 0.2s + 0.2s);
}

.hp-bcard--simple.is-visible .hp-params-arrow {
  transform: none;
}

.hp-bcard--simple.is-visible .hp-params-out span {
  border-color: rgb(8 127 131 / 0.35);
  transition-delay: calc(var(--i) * 0.2s + 1.4s);
}

.hp-bcard--simple.is-visible .hp-params-out span::after {
  transform: none;
  transition-delay: calc(var(--i) * 0.2s + 1.4s);
}

@media (prefers-reduced-motion: reduce) {
  .hp-params * {
    transition: none !important;
  }
}

@media (max-width: 640px) {
  .hp-bento {
    gap: 14px;
    margin-top: 40px;
  }

  .hp-bcard {
    padding: 24px;
  }

  .hp-bcard-big {
    font-size: 52px;
  }

  .hp-bcard--leo {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Paramètres puis documents, l'un sous l'autre */
  .hp-params {
    grid-template-columns: minmax(0, 1fr);
  }

  .hp-params-arrow {
    justify-self: center;
    width: 2px;
    height: 18px;
    transform: scaleY(0);
    transform-origin: top;
  }

  .hp-bcard--simple.is-visible .hp-params-arrow {
    transform: none;
  }

  .hp-params-out {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hp-params-out span {
    flex: 1 1 auto;
  }
}

.hp-audiences {
  background:
    radial-gradient(60% 80% at 100% 0%, rgb(98 231 235 / 0.16), transparent 70%),
    var(--color-teal-deep);
}

.hp-audiences .hp-h2 {
  max-width: 760px;
}

.hp-audiences {
  --aud-gap: 18px;
  --aud-c1: calc((100% - 2 * var(--aud-gap)) / 6);
  --aud-line: rgb(255 254 251 / 0.26);
}

.hp-aud-hub {
  position: relative;
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 10px;
  border: 1px solid rgb(98 231 235 / 0.4);
  border-radius: var(--radius-pill);
  padding: 8px 18px 8px 12px;
  background-color: rgb(98 231 235 / 0.1);
  font-size: 13px;
  font-weight: 700;
}

.hp-aud-hub-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-cyan);
  box-shadow: 0 0 0 0 rgb(98 231 235 / 0.6);
  animation: hp-aud-ping 3.6s ease-out infinite;
}

.hp-aud-hub::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, transparent, var(--color-cyan), transparent) 0 -14px / 100% 14px no-repeat, var(--aud-line);
  animation: hp-aud-stem 3.6s linear infinite;
}

.hp-aud-bus {
  position: relative;
  height: 40px;
  margin-top: 24px;
}

.hp-aud-bus-half {
  position: absolute;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-cyan), transparent) -50% 0 / 30% 100% no-repeat, var(--aud-line);
}

.hp-aud-bus-half--l {
  left: var(--aud-c1);
  right: 50%;
  animation: hp-aud-bus-l 3.6s linear 0.72s infinite backwards;
}

.hp-aud-bus-half--r {
  left: 50%;
  right: var(--aud-c1);
  animation: hp-aud-bus-r 3.6s linear 0.72s infinite backwards;
}

.hp-aud-drop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--aud-c1);
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--color-cyan), transparent) 0 -14px / 100% 14px no-repeat, var(--aud-line);
  animation: hp-aud-drop 3.6s linear 1.62s infinite backwards;
}

.hp-aud-drop--mid {
  left: 50%;
  animation-delay: 0.72s;
}

.hp-aud-drop--soon {
  left: auto;
  right: var(--aud-c1);
  background-image: linear-gradient(to bottom, transparent, var(--color-lime), transparent);
  background-color: rgb(226 230 47 / 0.3);
}

.hp-aud-drop::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-cyan);
  box-shadow: 0 0 0 4px rgb(98 231 235 / 0.16);
  transform: translate(-50%, 50%);
}

.hp-aud-drop--soon::after {
  background-color: var(--color-lime);
  box-shadow: 0 0 0 4px rgb(226 230 47 / 0.16);
}

@keyframes hp-aud-stem {
  0% { background-position: 0 -14px, 0 0; }
  20%, 100% { background-position: 0 24px, 0 0; }
}

@keyframes hp-aud-drop {
  0% { background-position: 0 -14px, 0 0; }
  20%, 100% { background-position: 0 40px, 0 0; }
}

@keyframes hp-aud-bus-r {
  0% { background-position: -50% 0, 0 0; }
  25%, 100% { background-position: 150% 0, 0 0; }
}

@keyframes hp-aud-bus-l {
  0% { background-position: 150% 0, 0 0; }
  25%, 100% { background-position: -50% 0, 0 0; }
}

@keyframes hp-aud-ping {
  0% { box-shadow: 0 0 0 0 rgb(98 231 235 / 0.6); }
  40%, 100% { box-shadow: 0 0 0 8px rgb(98 231 235 / 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hp-aud-net *,
  .hp-aud-net *::after,
  .hp-aud-hub::after {
    animation: none !important;
  }
}

.hp-aud-grid > :nth-child(2) { --reveal-delay: 80ms; }

.hp-aud-grid > :nth-child(3) { --reveal-delay: 160ms; }

a.hp-aud:hover {
  border-color: rgb(255 254 251 / 0.34);
  background-color: rgb(255 254 251 / 0.11);
  transform: translateY(-3px);
}

.hp-aud-btn span {
  transition: transform 0.3s var(--ease-out);
}

a.hp-aud:hover .hp-aud-btn {
  background-color: color-mix(in srgb, var(--color-cyan) 85%, #000 10%);
}

a.hp-aud:hover .hp-aud-btn span {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .hp-aud-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 24px;
  }

  /* Cartes empilées : plus de bus, la tige tombe dans la 1re carte
     et un trait relie chaque carte à la suivante. */
  .hp-aud-bus {
    display: none;
  }

  .hp-aud-grid > * + *::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: calc(var(--aud-gap) + 2px);
    background-color: var(--aud-line);
  }
}

@media (max-width: 640px) {
  .hp-aud {
    padding: 24px;
  }
}

.hp-leo {
  background:
    radial-gradient(50% 60% at 85% 60%, rgb(8 127 131 / 0.35), transparent 70%),
    var(--color-black);
}

.hp-leo-moments + .hp-btn {
  margin-top: 30px;
}

.hp-leo-moments strong {
  color: var(--color-white);
  font-weight: 700;
}

.hp-chat {
  --reveal-delay: 120ms;
}

.hp-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgb(255 254 251 / 0.08);
}

.hp-chat-name {
  flex: 1;
  font-weight: 800;
}

.hp-chat-role {
  margin-left: 4px;
  color: rgb(255 254 251 / 0.5);
  font-weight: 600;
}

.hp-chat-log {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 340px;
  overflow-y: hidden;
  padding: 18px 2px;
  scroll-behavior: smooth;
  mask-image: linear-gradient(180deg, transparent, #000 18px);
}

.hp-msg {
  max-width: 88%;
  border-radius: 16px;
  padding: 12px 15px;
  font-size: 14.5px;
  line-height: 1.55;
  animation: hp-msg-in 0.45s var(--ease-out) both;
}

.hp-msg--leo {
  align-self: flex-start;
  border: 1px solid rgb(98 231 235 / 0.16);
  border-top-left-radius: 4px;
  background-color: rgb(98 231 235 / 0.08);
}

.hp-msg--you {
  align-self: flex-end;
  border-top-right-radius: 4px;
  color: var(--color-black);
  background-color: var(--color-white);
  font-weight: 600;
}

.hp-msg-who {
  display: block;
  margin-bottom: 4px;
  color: var(--color-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hp-msg-val {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgb(98 231 235 / 0.14);
  color: var(--color-lime);
  font-size: 12px;
  font-weight: 700;
  animation: hp-msg-in 0.4s var(--ease-out) both;
}

.hp-msg-val::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e62f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hp-typing {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}

.hp-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-cyan);
  animation: hp-dot 1.1s ease-in-out infinite;
}

.hp-typing i:nth-child(2) { animation-delay: 0.15s; }

.hp-typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes hp-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

@keyframes hp-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.hp-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgb(255 254 251 / 0.08);
  transition: opacity 0.3s ease;
}

.hp-chat-chips.is-busy {
  opacity: 0.35;
  pointer-events: none;
}

.hp-chip {
  border: 1px solid rgb(98 231 235 / 0.4);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  color: var(--color-cyan);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.hp-chip:hover {
  border-color: var(--color-cyan);
  background-color: rgb(98 231 235 / 0.1);
}

.hp-chip:active {
  transform: scale(0.97);
}

.hp-chip.is-used {
  border-color: rgb(255 254 251 / 0.14);
  color: rgb(255 254 251 / 0.5);
}

.hp-beta--dark {
  margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hp-msg,
  .hp-msg-val {
    animation: none;
  }
}

@media (max-width: 640px) {
  .hp-chat {
    padding: 14px;
    border-radius: var(--radius-lg);
  }

  .hp-chat-log {
    height: 380px;
  }

  .hp-msg {
    max-width: 94%;
    font-size: 14px;
  }
}

.hp-cta .hp-h2 {
  margin-top: 18px;
}