:root {
  --hpq-lilac: var(--hsp-lilac, #e9e3ff);
  --hpq-violet: var(--hsp-violet, #b18ae9);
  --hpq-charcoal: #333333;
  --hpq-black: var(--hsp-bg, #0e0e0e);
  --hpq-white: var(--hsp-white, #f6f3ff);
  --hpq-text: var(--hsp-text, #f6f3ff);
  --hpq-muted: var(--hsp-muted, #aaa3b9);
  --hpq-subtle: var(--hsp-subtle, #81798c);
  --hpq-soft: var(--hsp-text-soft, #cec7d8);
  --hpq-border: var(--hsp-border, rgba(233, 227, 255, .12));
  --hpq-card: rgba(255,255,255,.045);
  --hpq-shadow: 0 30px 100px rgba(0,0,0,.48);
}

.hpq-app,
.hpq-modal,
.hp-chatbox-trigger {
  font-family: inherit;
  box-sizing: border-box;
}
.hpq-app *, .hpq-app *::before, .hpq-app *::after,
.hpq-modal *, .hpq-modal *::before, .hpq-modal *::after,
.hp-chatbox-trigger *, .hp-chatbox-trigger *::before, .hp-chatbox-trigger *::after { box-sizing: border-box; }

/* Floating trigger */
.hp-chatbox-trigger {
  position: fixed !important;
  right: var(--hpq-trigger-right, 75px);
  bottom: var(--hpq-trigger-bottom, 25px);
  z-index: 99990;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 12px 10px 22px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50px;
  background: linear-gradient(135deg, #e9e3ff 0%, #b18ae9 100%);
  color: #0e0e0e;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(177,138,233,.08);
  transition: transform .16s ease, box-shadow .16s ease;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  overflow: hidden;
}
.hp-chatbox-trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.42) 48%, transparent 75%);
  transform: translateX(-130%);
  transition: transform .65s ease;
}
.hp-chatbox-trigger:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.36), 0 0 32px rgba(177,138,233,.18); }
.hp-chatbox-trigger:hover::before { transform: translateX(130%); }
.hpq-trigger-label, .hpq-trigger-icon { position: relative; z-index: 1; }
.hpq-trigger-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(14,14,14,.1); display: grid; place-items: center; }
.hpq-trigger-icon svg { width: 20px; height: 20px; }
.hpq-open-modal--inline { position: static !important; }

/* Modal */
body.hpq-modal-open { overflow: hidden; }
.hpq-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 28px;
  visibility: hidden;
  pointer-events: none;
}
.hpq-modal.is-open { visibility: visible; pointer-events: auto; }
.hpq-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.77);
  opacity: 0;
  transition: opacity .16s ease;
}
.hpq-modal.is-open .hpq-modal__backdrop { opacity: 1; }
.hpq-modal__dialog {
  position: relative;
  width: min(1160px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border-radius: 30px;
  box-shadow: 0 26px 78px rgba(0,0,0,.46);
  opacity: 0;
  transform: translate3d(0,10px,0) scale(.992);
  transition: opacity .16s ease, transform .16s cubic-bezier(.2,.8,.2,1);
  contain: paint;
  scrollbar-width: thin;
  scrollbar-color: rgba(177,138,233,.4) transparent;
}
.hpq-modal.is-open .hpq-modal__dialog { opacity: 1; transform: translate3d(0,0,0) scale(1); }
.hpq-modal__close { position: absolute; top: 16px; right: 16px; z-index: 10; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); background: rgba(14,14,14,.86); color: white; font-size: 27px; line-height: 1; cursor: pointer; }
.hpq-modal__close:hover { background: rgba(177,138,233,.18); }

/* App shell */
.hpq-app { display: grid; grid-template-columns: minmax(310px, .82fr) minmax(0, 1.35fr); min-height: 690px; background: #0e0e0e; color: var(--hpq-lilac); border: 1px solid var(--hpq-border); border-radius: 30px; overflow: hidden; position: relative; isolation: isolate; }
.hpq-app::after { content:""; position:absolute; right:-120px; top:-140px; width:340px; height:340px; background: radial-gradient(circle, rgba(177,138,233,.18), transparent 70%); pointer-events:none; z-index:-1; }
.hpq-app--inline { width:100%; min-height:720px; box-shadow: var(--hpq-shadow); }

.hpq-aside { position: relative; padding: 38px; border-right: 1px solid var(--hpq-border); background: linear-gradient(160deg, rgba(177,138,233,.13), rgba(255,255,255,.025) 42%, rgba(0,0,0,.0) 70%), #121212; display:flex; flex-direction:column; min-width:0; }
.hpq-aside::before { content:""; position:absolute; inset:0; opacity:.18; pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
.hpq-brand, .hpq-aside-copy, .hpq-live-card, .hpq-trust-list { position:relative; z-index:1; }
.hpq-logo { display:block; max-width:175px; max-height:55px; width:auto; height:auto; object-fit:contain; }
.hpq-brand-text { font-weight:800; font-size:22px; color:var(--hpq-text); }
.hpq-aside-copy { margin:auto 0 26px; padding-top:45px; }
.hpq-kicker, .hpq-step-tag { display:inline-flex; align-items:center; gap:8px; color:var(--hpq-violet); text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.13em; }
.hpq-kicker-dot { width:7px; height:7px; border-radius:50%; background:var(--hpq-violet); box-shadow:0 0 18px rgba(177,138,233,.8); }
.hpq-aside h2 { color:var(--hpq-text); font-size:clamp(30px, 3vw, 46px); line-height:1.04; letter-spacing:-.045em; margin:16px 0 17px; max-width:9.5em; }
.hpq-aside-copy p { color:var(--hpq-muted); font-size:15px; line-height:1.7; max-width:34em; margin:0; }

.hpq-live-card { margin-top:10px; padding:20px; border:1px solid rgba(177,138,233,.18); border-radius:20px; background:rgba(14,14,14,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.hpq-live-card__top { display:flex; align-items:center; gap:9px; color:var(--hpq-muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; margin-bottom:13px; }
.hpq-live-icon { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; color:#0e0e0e; background:var(--hpq-violet); }
.hpq-live-icon svg { width:14px; height:14px; }
.hpq-live-card strong { color:var(--hpq-text); display:block; font-size:18px; line-height:1.25; margin-bottom:6px; }
.hpq-live-card p { color:var(--hpq-muted); font-size:12.5px; line-height:1.45; margin:0; }
.hpq-score { height:4px; border-radius:99px; background:rgba(255,255,255,.08); margin-top:16px; overflow:hidden; }
.hpq-score span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--hpq-violet),var(--hpq-lilac)); transition:width .35s ease; }
.hpq-trust-list { margin-top:18px; display:flex; flex-wrap:wrap; gap:11px 16px; color:var(--hpq-muted); font-size:11px; }
.hpq-trust-list span { display:inline-flex; align-items:center; gap:5px; }
.hpq-trust-list svg { width:12px; height:12px; color:var(--hpq-violet); }

.hpq-main { padding:36px 42px 34px; min-width:0; display:flex; flex-direction:column; background:rgba(14,14,14,.96); }
.hpq-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:26px; }
.hpq-head > div { min-width:190px; }
.hpq-step-caption { color:var(--hpq-muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.hpq-step-caption b { color:var(--hpq-lilac); }
.hpq-progress { width:200px; max-width:45vw; height:3px; margin-top:10px; background:rgba(255,255,255,.07); border-radius:99px; overflow:hidden; }
.hpq-progress span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--hpq-violet),var(--hpq-lilac)); transition:width .32s ease; }
.hpq-estimate { color:var(--hpq-subtle); font-size:11px; padding-top:2px; }

.hpq-form { flex:1; display:flex; flex-direction:column; min-width:0; }
.hpq-step { display:none; animation:hpqStep .25s ease both; }
.hpq-step.is-active { display:block; }
@keyframes hpqStep { from { opacity:0; transform:translateX(7px) } to { opacity:1; transform:none } }
.hpq-step-title { margin-bottom:24px; }
.hpq-step-title h3, .hpq-success h3 { color:var(--hpq-text); font-size:clamp(24px,2.6vw,36px); line-height:1.08; letter-spacing:-.035em; margin:10px 0 8px; }
.hpq-step-title p, .hpq-success p { color:var(--hpq-muted); margin:0; font-size:14px; line-height:1.55; }

.hpq-choice-grid { display:grid; gap:11px; }
.hpq-choice-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.hpq-choice-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.hpq-choice { position:relative; display:flex; gap:13px; min-height:106px; padding:17px 16px; border:1px solid var(--hpq-border); border-radius:17px; background:var(--hpq-card); cursor:pointer; transition:.18s ease; overflow:hidden; }
.hpq-choice:hover { transform:translateY(-2px); border-color:rgba(177,138,233,.35); background:rgba(177,138,233,.07); }
.hpq-choice input { position:absolute; opacity:0; pointer-events:none; }
.hpq-choice:has(input:checked) { border-color:rgba(177,138,233,.72); background:linear-gradient(135deg,rgba(177,138,233,.16),rgba(233,227,255,.055)); box-shadow: inset 0 0 0 1px rgba(177,138,233,.12), 0 8px 30px rgba(0,0,0,.12); }
.hpq-choice__check { position:absolute; top:11px; right:11px; width:18px; height:18px; border:1px solid rgba(255,255,255,.14); border-radius:50%; }
.hpq-choice input:checked ~ .hpq-choice__check { background:var(--hpq-violet); border-color:var(--hpq-violet); box-shadow:inset 0 0 0 4px #18131d; }
.hpq-choice__icon { flex:0 0 36px; width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:rgba(177,138,233,.1); color:var(--hpq-violet); }
.hpq-choice__icon svg { width:20px; height:20px; }
.hpq-choice__body { padding-right:8px; }
.hpq-choice__body strong { display:block; color:var(--hpq-text); font-size:14px; line-height:1.2; margin:2px 0 5px; }
.hpq-choice__body small { display:block; color:var(--hpq-muted); font-size:11.5px; line-height:1.4; }
.hpq-choice-grid--compact .hpq-choice { min-height:92px; }
.hpq-choice--radio { align-items:center; }

.hpq-pill-grid { display:flex; flex-wrap:wrap; gap:9px; }
.hpq-pill { position:relative; cursor:pointer; }
.hpq-pill input { position:absolute; opacity:0; }
.hpq-pill span { display:block; padding:11px 14px; border:1px solid var(--hpq-border); border-radius:999px; background:var(--hpq-card); color:var(--hpq-muted); font-size:12px; transition:.17s ease; }
.hpq-pill:hover span { color:var(--hpq-text); border-color:rgba(177,138,233,.35); }
.hpq-pill input:checked + span { color:#0e0e0e; background:var(--hpq-lilac); border-color:var(--hpq-lilac); font-weight:700; }

.hpq-reveal { display:none; margin-top:18px; }
.hpq-reveal.is-visible { display:block; animation:hpqStep .2s ease both; }
.hpq-fields-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.hpq-field { display:block; margin-bottom:15px; }
.hpq-field > span { display:block; color:var(--hpq-soft); font-size:12px; font-weight:650; margin-bottom:8px; }
.hpq-field > span small { color:var(--hpq-subtle); font-weight:400; }
.hpq-field input, .hpq-field select, .hpq-field textarea { width:100%; border:1px solid var(--hpq-border); border-radius:13px; background:#151515; color:var(--hpq-text); padding:13px 14px; font:inherit; font-size:13px; outline:none; transition:.17s ease; appearance:auto; }
.hpq-field textarea { resize:vertical; min-height:110px; }
.hpq-field input::placeholder, .hpq-field textarea::placeholder { color:var(--hpq-subtle); }
.hpq-field input:focus, .hpq-field select:focus, .hpq-field textarea:focus { border-color:rgba(177,138,233,.62); box-shadow:0 0 0 3px rgba(177,138,233,.08); background:#18161a; }
.hpq-field.is-invalid input, .hpq-field.is-invalid select, .hpq-field.is-invalid textarea { border-color:#d77a91; }
.hpq-field-help { display:block; color:var(--hpq-subtle); font-size:10.5px; margin-top:6px; }

.hpq-section-label { color:var(--hpq-subtle); font-size:11px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px; }
.hpq-section-label--spaced { margin-top:22px; }
.hpq-budget-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.hpq-timing-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.hpq-budget { position:relative; cursor:pointer; }
.hpq-budget input { position:absolute; opacity:0; }
.hpq-budget span { display:grid; place-items:center; min-height:64px; padding:10px; text-align:center; border:1px solid var(--hpq-border); background:var(--hpq-card); border-radius:14px; color:var(--hpq-muted); font-size:12px; line-height:1.25; transition:.17s ease; }
.hpq-budget:hover span { border-color:rgba(177,138,233,.35); color:var(--hpq-text); }
.hpq-budget input:checked + span { border-color:var(--hpq-violet); background:rgba(177,138,233,.16); color:var(--hpq-text); box-shadow:inset 0 0 0 1px rgba(177,138,233,.14); }
.hpq-budget--small span { min-height:52px; font-size:11px; }

.hpq-result-card { display:grid; grid-template-columns:auto 1fr; position:relative; gap:14px; align-items:center; padding:18px; margin-bottom:20px; border:1px solid rgba(177,138,233,.3); border-radius:18px; background:linear-gradient(135deg,rgba(177,138,233,.16),rgba(177,138,233,.045)); overflow:hidden; }
.hpq-result-card__badge { position:absolute; top:9px; right:11px; color:var(--hpq-subtle); font-size:9px; text-transform:uppercase; letter-spacing:.12em; }
.hpq-result-card__icon { width:43px; height:43px; display:grid; place-items:center; border-radius:13px; color:#0e0e0e; background:var(--hpq-violet); }
.hpq-result-card__icon svg { width:22px; height:22px; }
.hpq-result-card strong { color:var(--hpq-text); display:block; font-size:17px; margin-bottom:3px; }
.hpq-result-card p { color:var(--hpq-muted); font-size:11.5px; margin:0; padding-right:55px; line-height:1.4; }

.hpq-consent { display:flex; align-items:flex-start; gap:12px; width:100%; margin:14px 0 0; padding:14px 15px; border:1px solid rgba(177,138,233,.22); border-radius:16px; background:linear-gradient(135deg,rgba(177,138,233,.10),rgba(255,255,255,.03)); color:var(--hpq-soft); font-size:12px; line-height:1.55; cursor:pointer; transition:border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease; }
.hpq-consent:hover { border-color:rgba(177,138,233,.42); background:linear-gradient(135deg,rgba(177,138,233,.14),rgba(255,255,255,.04)); box-shadow:0 12px 28px rgba(0,0,0,.16); }
.hpq-consent:focus-within { border-color:rgba(177,138,233,.65); box-shadow:0 0 0 3px rgba(177,138,233,.12); }
.hpq-consent input { position:absolute; opacity:0; pointer-events:none; }
.hpq-consent-box { position:relative; flex:0 0 22px; width:22px; height:22px; border-radius:7px; border:1px solid rgba(177,138,233,.34); background:#141217; margin-top:2px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.hpq-consent-box::after { content:''; position:absolute; left:7px; top:3px; width:6px; height:11px; border-right:2px solid transparent; border-bottom:2px solid transparent; transform:rotate(45deg); opacity:0; transition:opacity .14s ease, border-color .14s ease; }
.hpq-consent input:checked + .hpq-consent-box { background:linear-gradient(180deg,#c8aaf4,#b18ae9); border-color:#c8aaf4; box-shadow:0 0 0 5px rgba(177,138,233,.11), inset 0 1px 0 rgba(255,255,255,.32); }
.hpq-consent input:checked + .hpq-consent-box::after { opacity:1; border-color:#0e0e0e; }
.hpq-consent-copy { display:block; flex:1; min-width:0; }
.hpq-consent-copy strong { display:block; margin:0 0 4px; color:var(--hpq-lilac); font-size:10.5px; line-height:1.2; text-transform:uppercase; letter-spacing:.08em; }
.hpq-consent-copy > span { display:block; color:var(--hpq-soft); }
.hpq-consent a { color:var(--hpq-text); text-decoration:underline; text-underline-offset:2px; }

.hpq-actions { display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:24px; }
.hpq-btn { border:0; border-radius:999px; min-height:48px; padding:12px 20px; display:inline-flex; align-items:center; justify-content:center; gap:12px; font:inherit; font-size:12px; font-weight:750; cursor:pointer; text-decoration:none; transition:.18s ease; }
.hpq-btn:disabled { opacity:.28; cursor:not-allowed; transform:none!important; }
.hpq-btn--ghost { color:var(--hpq-muted); background:transparent; border:1px solid var(--hpq-border); }
.hpq-btn--ghost:hover:not(:disabled) { color:var(--hpq-text); border-color:rgba(255,255,255,.22); }
.hpq-btn--primary { margin-left:auto; color:#0e0e0e; background:linear-gradient(135deg,var(--hpq-lilac),var(--hpq-violet)); box-shadow:0 10px 30px rgba(177,138,233,.13); }
.hpq-btn--primary:hover { transform:translateY(-2px); box-shadow:0 15px 34px rgba(177,138,233,.22); }
.hpq-btn--primary span { font-size:15px; }
.hpq-btn--submit[hidden] { display:none!important; }
.hpq-status { min-height:20px; padding-top:8px; color:var(--hpq-muted); font-size:11px; text-align:right; }
.hpq-status.is-error { color:#e598a8; }
.hpq-inline-error { min-height:16px; color:#e598a8; font-size:10.5px; padding-top:6px; }
.hpq-honeypot { position:absolute!important; left:-99999px!important; width:1px!important; height:1px!important; opacity:0!important; }

.hpq-success { margin:auto 0; text-align:center; padding:40px 30px; }
.hpq-success__icon { width:70px; height:70px; border-radius:50%; display:grid; place-items:center; margin:0 auto 18px; background:linear-gradient(135deg,var(--hpq-lilac),var(--hpq-violet)); color:#0e0e0e; box-shadow:0 12px 38px rgba(177,138,233,.2); }
.hpq-success__icon svg { width:33px; height:33px; }
.hpq-success p { max-width:520px; margin:0 auto 24px; }
.hpq-success .hpq-btn { margin:0 auto; }


/* v1.1 — compatibility, form polish and faster interactions */
button.hp-chatbox-trigger {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 11px !important;
  width: auto !important;
  max-width: none !important;
  height: 56px !important;
  min-height: 56px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 9px 10px 9px 22px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #e9e3ff 0%, #cdbdf5 55%, #b18ae9 100%) !important;
  color: #0e0e0e !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: none !important;
  text-decoration: none !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(177,138,233,.08) !important;
  overflow: hidden !important;
  transform: translate3d(0,0,0);
  isolation: isolate;
}
button.hp-chatbox-trigger::before,
button.hp-chatbox-trigger::after {
  content: none !important;
  display: none !important;
}
button.hp-chatbox-trigger:hover,
button.hp-chatbox-trigger:focus-visible {
  background: linear-gradient(135deg, #f1edff 0%, #d8caf8 55%, #b995eb 100%) !important;
  color: #0e0e0e !important;
  transform: translate3d(0,-2px,0) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,.4), 0 0 28px rgba(177,138,233,.16) !important;
  filter: none !important;
}
button.hp-chatbox-trigger:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px; }
button.hp-chatbox-trigger .hpq-trigger-label {
  display: block !important;
  position: relative !important;
  flex: 0 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  transform: none !important;
}
button.hp-chatbox-trigger .hpq-trigger-icon {
  position: relative !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(14,14,14,.09) !important;
  color: #0e0e0e !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 0 !important;
  transform: none !important;
}
button.hp-chatbox-trigger .hpq-trigger-icon svg { display:block !important; width:19px !important; height:19px !important; margin:0 !important; }

.hpq-app--modal .hpq-head { padding-right: 54px; }

.hpq-app .hpq-field > span { line-height: 1.35; }
.hpq-app .hpq-field select {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 44px 0 14px !important;
  border: 1px solid var(--hpq-border) !important;
  border-radius: 13px !important;
  background-color: #151515 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e9e3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 15px 15px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 13px !important;
  line-height: normal !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  vertical-align: middle !important;
}
.hpq-app .hpq-field select:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-color: #18161a !important;
  border-color: rgba(177,138,233,.72) !important;
  box-shadow: 0 0 0 3px rgba(177,138,233,.11) !important;
}
.hpq-app .hpq-field select option {
  color: #111 !important;
  background: #fff !important;
  -webkit-text-fill-color: #111 !important;
  padding: 8px !important;
}
.hpq-app .hpq-field select option:checked { background: #e9e3ff !important; color:#0e0e0e !important; }

.hpq-consent {
  max-width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
}
.hpq-consent-box { margin-top: 2px; }

.hpq-choice,
.hpq-pill span,
.hpq-budget span,
.hpq-field input,
.hpq-field select,
.hpq-field textarea,
.hpq-btn { transition-duration: .11s; }
.hpq-score span,
.hpq-progress span { transition-duration: .18s; }
.hpq-step { animation-duration: .18s; }

.hpq-success__actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:4px; }
.hpq-success__actions .hpq-btn { margin:0 !important; }
.hpq-success__actions .hpq-btn--ghost { color:#e9e3ff; background:rgba(255,255,255,.035); }

@media (max-width: 1020px) {
  .hpq-modal { padding:16px; }
  .hpq-app { grid-template-columns: 270px minmax(0,1fr); }
  .hpq-aside { padding:28px 24px; }
  .hpq-main { padding:30px 28px; }
  .hpq-aside h2 { font-size:34px; }
  .hpq-choice-grid--3 { grid-template-columns:1fr; }
  .hpq-timing-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 780px) {
  button.hp-chatbox-trigger { right:18px !important; bottom:18px !important; height:54px !important; min-height:54px !important; padding:8px 8px 8px 17px !important; }
  .hp-chatbox-trigger .hpq-trigger-label { max-width:190px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .hpq-modal { padding:0; align-items:end; }
  .hpq-modal__dialog { width:100vw; max-height:94dvh; border-radius:24px 24px 0 0; }
  .hpq-app { display:block; border-radius:24px 24px 0 0; min-height:0; }
  .hpq-aside { display:block; border-right:0; border-bottom:1px solid var(--hpq-border); padding:21px 22px 18px; }
  .hpq-brand { margin-bottom:14px; }
  .hpq-logo { max-width:135px; max-height:38px; }
  .hpq-aside-copy { margin:0; padding:0; }
  .hpq-aside h2 { font-size:24px; max-width:15em; margin:8px 0 5px; }
  .hpq-aside-copy p { display:none; }
  .hpq-live-card { margin-top:14px; padding:13px 14px; }
  .hpq-live-card__top, .hpq-live-card p, .hpq-score, .hpq-trust-list { display:none; }
  .hpq-live-card strong { font-size:13px; margin:0; }
  .hpq-main { padding:22px 20px 24px; min-height:550px; }
  .hpq-head { margin-bottom:18px; }
  .hpq-step-title { margin-bottom:18px; }
  .hpq-step-title h3 { font-size:25px; }
  .hpq-choice-grid--2, .hpq-budget-grid, .hpq-fields-row { grid-template-columns:1fr; }
  .hpq-choice { min-height:82px; }
  .hpq-choice__body small { font-size:11px; }
  .hpq-timing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hpq-budget span { min-height:51px; }
  .hpq-actions { position:sticky; bottom:0; background:linear-gradient(to top,#0e0e0e 72%,transparent); padding-top:25px; padding-bottom:2px; z-index:4; }
  .hpq-btn { min-height:46px; padding:10px 16px; }
}

@media (max-width: 520px) {
  button.hp-chatbox-trigger { right:14px !important; bottom:14px !important; }
  button.hp-chatbox-trigger .hpq-trigger-label { display:none !important; width:0 !important; height:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; }
  button.hp-chatbox-trigger { padding:0 !important; width:56px !important; min-width:56px !important; max-width:56px !important; height:56px !important; min-height:56px !important; max-height:56px !important; display:grid !important; grid-template-columns:1fr !important; grid-template-rows:1fr !important; place-items:center !important; justify-content:center !important; align-items:center !important; gap:0 !important; }
  button.hp-chatbox-trigger .hpq-trigger-icon { position:static !important; width:22px !important; height:22px !important; min-width:22px !important; min-height:22px !important; flex:none !important; margin:0 !important; padding:0 !important; display:grid !important; place-items:center !important; justify-self:center !important; align-self:center !important; background:transparent !important; transform:none !important; }
  button.hp-chatbox-trigger .hpq-trigger-icon svg { width:20px !important; height:20px !important; }
  .hpq-main { padding-left:16px; padding-right:16px; }
  .hpq-aside { padding-left:18px; padding-right:18px; }
  .hpq-pill span { font-size:11px; padding:9px 11px; }
  .hpq-result-card { grid-template-columns:1fr; }
  .hpq-result-card__icon { width:36px; height:36px; }
  .hpq-result-card p { padding-right:0; }
  .hpq-consent { justify-content:flex-start; width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hpq-app *, .hpq-modal *, .hp-chatbox-trigger { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}


/* v1.1.1 — required-fields validation alert */
.hpq-validation-alert {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin-top:auto;
  margin-bottom:-8px;
  padding:11px 14px;
  border:1px solid rgba(229,152,168,.34);
  border-radius:13px;
  background:linear-gradient(135deg,rgba(215,122,145,.13),rgba(177,138,233,.07));
  color:#f0b5c1;
  font-size:11.5px;
  line-height:1.45;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.hpq-validation-alert[hidden] { display:none !important; }
.hpq-validation-alert.is-visible { animation:hpqValidationIn .2s ease both; }
.hpq-validation-alert__icon {
  flex:0 0 22px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(229,152,168,.14);
  border:1px solid rgba(229,152,168,.28);
  color:#ffd6de;
  font-size:12px;
  font-weight:800;
}
.hpq-field.is-invalid > span { color:#f0b5c1; }
.hpq-field.is-invalid input,
.hpq-field.is-invalid select,
.hpq-field.is-invalid textarea {
  border-color:#d77a91 !important;
  box-shadow:0 0 0 3px rgba(215,122,145,.08);
}
@keyframes hpqValidationIn {
  from { opacity:0; transform:translateY(5px); }
  to { opacity:1; transform:none; }
}
@media (max-width: 760px) {
  .hpq-validation-alert { margin-bottom:0; }
}

/* v1.2.0 — Turnstile integration */
.hpq-turnstile {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:0;
  margin:2px 0 12px;
}
.hpq-turnstile .cf-turnstile { max-width:100%; }


/* v1.2.1 — stronger form text contrast against theme overrides */
.hpq-app .hpq-field textarea,
.hpq-app .hpq-field textarea:focus,
.hpq-app .hpq-field textarea:active {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  caret-color:#fff !important;
}
.hpq-app .hpq-field textarea::placeholder {
  color:var(--hpq-subtle) !important;
  -webkit-text-fill-color:var(--hpq-subtle) !important;
  opacity:1;
}
.hpq-turnstile--always { min-height:65px; }


/* v1.2.2 — performance pass: same UI, lighter compositing */
.hpq-app { contain: layout paint style; }
.hpq-modal__dialog,
.hp-chatbox-trigger { backface-visibility: hidden; -webkit-font-smoothing: antialiased; }
.hpq-turnstile-widget { max-width:100%; }
@media (prefers-reduced-motion: no-preference) {
  .hpq-modal.is-open .hpq-modal__dialog { will-change: transform, opacity; }
}


/* =========================================================
   V2.0.9 — TYPOGRAPHIE / PROJECT FINDER
   Lisibilité renforcée : textes secondaires et cartes.
   ========================================================= */
.hpq-app{
  --hpq-copy-lg:16px;
  --hpq-copy:15px;
  --hpq-copy-sm:13px;
  --hpq-label-size:13px;
}

/* Intro et textes sous les grands titres */
.hpq-aside-copy p{
  font-size:16px;
  line-height:1.7;
}
.hpq-step-title p,
.hpq-success p{
  font-size:15.5px;
  line-height:1.6;
}

/* Cartes de choix */
.hpq-choice{
  min-height:112px;
  padding:18px 17px;
}
.hpq-choice__body strong{
  font-size:15px;
  line-height:1.25;
}
.hpq-choice__body small{
  font-size:13px;
  line-height:1.5;
}
.hpq-choice-grid--compact .hpq-choice{
  min-height:98px;
}

/* Recommandation en direct */
.hpq-live-card__top{
  font-size:12px;
}
.hpq-live-card p{
  font-size:13.5px;
  line-height:1.5;
}
.hpq-trust-list{
  font-size:12px;
  line-height:1.45;
}

/* Navigation / informations */
.hpq-step-caption,
.hpq-estimate{
  font-size:12px;
}

/* Formulaires */
.hpq-field > span{
  font-size:13px;
}
.hpq-field input,
.hpq-field select,
.hpq-field textarea{
  font-size:14px;
}
.hpq-field-help{
  font-size:11.5px;
  line-height:1.45;
}
.hpq-section-label{
  font-size:11.5px;
}

/* Choix secondaires */
.hpq-pill span,
.hpq-budget span{
  font-size:13px;
}
.hpq-budget--small span{
  font-size:12px;
}

/* Résultat / récapitulatif */
.hpq-result-card p{
  font-size:13px;
  line-height:1.5;
}
.hpq-consent{
  font-size:13px;
  line-height:1.6;
}
.hpq-status{
  font-size:12px;
}
.hpq-btn{
  font-size:13px;
}

/* Mobile : on conserve la lisibilité sans surcharger l'écran */
@media(max-width:720px){
  .hpq-aside-copy p{font-size:15px}
  .hpq-step-title p,.hpq-success p{font-size:14.5px}
  .hpq-choice__body strong{font-size:14.5px}
  .hpq-choice__body small{font-size:12.5px}
  .hpq-choice{min-height:104px}
  .hpq-pill span,.hpq-budget span{font-size:12.5px}
  .hpq-field > span{font-size:12.5px}
  .hpq-field input,.hpq-field select,.hpq-field textarea{font-size:14px}
}


/* =========================================================
   v1.2.7 — Réseaux sociaux du menu mobile
   Affichés uniquement quand le menu mobile Impreza est ouvert.
   Le JS les aligne dynamiquement à gauche du bouton flottant.
   ========================================================= */
.hpq-mobile-socials {
  position: fixed !important;
  right: var(--hpq-mobile-socials-right, 82px) !important;
  bottom: var(--hpq-mobile-socials-bottom, 20px) !important;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 5px, 0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.hpq-mobile-socials.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

.hpq-mobile-social {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid !important;
  place-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(233, 227, 255, .16);
  border-radius: 999px;
  background: rgba(14, 14, 14, .94);
  color: var(--hpq-lilac, #e9e3ff) !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.hpq-mobile-social svg {
  width: 19px;
  height: 19px;
  display: block;
}

.hpq-mobile-social:hover,
.hpq-mobile-social:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(177, 138, 233, .55);
  background: rgba(177, 138, 233, .14);
  color: #fff !important;
}

.hpq-mobile-social:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

body.hpq-modal-open .hpq-mobile-socials {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 520px) {
  .hpq-mobile-socials {
    gap: 7px;
  }

  .hpq-mobile-social {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .hpq-mobile-social svg {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hpq-mobile-socials,
  .hpq-mobile-social {
    transition: none !important;
  }
}


/* =========================================================
   v1.2.8 — Menu mobile : CTA explicite + groupe social compact
   ========================================================= */

/* Le second libellé n'existe visuellement que dans le menu mobile ouvert. */
button.hp-chatbox-trigger .hpq-trigger-label--mobile {
  display: none !important;
}

/* Sortie des réseaux plus rapide que leur apparition. */
.hpq-mobile-socials {
  transition:
    opacity .065s ease,
    transform .065s ease,
    visibility 0s linear .065s !important;
}

.hpq-mobile-socials.is-visible {
  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility 0s linear 0s !important;
}

/* Fermeture explicitement déclenchée par le bouton du menu. */
.hpq-mobile-socials.is-fast-closing {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, 3px, 0) !important;
  transition:
    opacity .045s linear,
    transform .045s linear,
    visibility 0s linear .045s !important;
}

/* Réseaux plus discrets : ils accompagnent le CTA sans le concurrencer. */
.hpq-mobile-social {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

.hpq-mobile-social svg {
  width: 17px;
  height: 17px;
}

.hpq-mobile-socials {
  gap: 6px;
}

@media (max-width: 1085px) {

  /*
   * Quand le menu mobile est ouvert, le bouton flottant devient
   * un CTA textuel compact au lieu d'une icône seule.
   */
  body.hpq-mobile-menu-open button.hp-chatbox-trigger {
    width: auto !important;
    min-width: 0 !important;
    max-width: min(176px, calc(100vw - 170px)) !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 14px 0 16px !important;
    gap: 8px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  body.hpq-mobile-menu-open button.hp-chatbox-trigger .hpq-trigger-label--default {
    display: none !important;
  }

  body.hpq-mobile-menu-open button.hp-chatbox-trigger .hpq-trigger-label--mobile {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 125px;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #0e0e0e !important;
    font-size: 12.5px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: -.015em !important;
    text-overflow: ellipsis;
    white-space: nowrap !important;
  }

  body.hpq-mobile-menu-open button.hp-chatbox-trigger .hpq-trigger-icon--cta {
    position: static !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: grid !important;
    place-items: center !important;
  }

  body.hpq-mobile-menu-open button.hp-chatbox-trigger .hpq-trigger-icon--cta svg {
    width: 18px !important;
    height: 18px !important;
  }

  body.hpq-mobile-menu-open .hpq-mobile-socials {
    gap: 6px;
  }
}

@media (max-width: 430px) {
  body.hpq-mobile-menu-open button.hp-chatbox-trigger {
    max-width: 158px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding-left: 13px !important;
    padding-right: 12px !important;
    gap: 7px !important;
  }

  body.hpq-mobile-menu-open button.hp-chatbox-trigger .hpq-trigger-label--mobile {
    max-width: 112px;
    font-size: 12px !important;
  }

  .hpq-mobile-social {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .hpq-mobile-social svg {
    width: 16px;
    height: 16px;
  }

  .hpq-mobile-socials {
    gap: 5px;
  }
}


/* =========================================================
   v1.3.0 — Ouverture premium du bloc bas du menu mobile
   ========================================================= */

/*
 * Le CTA passe du rond à la pilule avec une vraie transition.
 * Sur mobile <= 520 px il part de 56 px ; le menu ouvert lui donne
 * une largeur fixe, donc le navigateur peut interpoler proprement.
 */
@media (max-width: 1085px) {
  button.hp-chatbox-trigger {
    transition:
      width .22s cubic-bezier(.22,.8,.22,1),
      min-width .22s cubic-bezier(.22,.8,.22,1),
      max-width .22s cubic-bezier(.22,.8,.22,1),
      height .22s cubic-bezier(.22,.8,.22,1),
      padding .22s cubic-bezier(.22,.8,.22,1),
      gap .22s cubic-bezier(.22,.8,.22,1),
      border-radius .22s cubic-bezier(.22,.8,.22,1),
      transform .16s ease,
      box-shadow .16s ease !important;
  }

  body.hpq-mobile-menu-open button.hp-chatbox-trigger {
    width: 166px !important;
    min-width: 166px !important;
    max-width: 166px !important;
  }

  /* Le texte n'apparaît qu'une fois la pilule en place. */
  body.hpq-mobile-menu-open button.hp-chatbox-trigger .hpq-trigger-label--mobile {
    opacity: 0 !important;
    transform: translate3d(6px,0,0) !important;
    transition:
      opacity .14s ease,
      transform .18s cubic-bezier(.22,.8,.22,1) !important;
  }

  body.hpq-mobile-menu-open button.hp-chatbox-trigger .hpq-trigger-icon--cta {
    opacity: 0 !important;
    transform: translate3d(4px,0,0) !important;
    transition:
      opacity .14s ease,
      transform .18s cubic-bezier(.22,.8,.22,1) !important;
  }

  body.hpq-mobile-menu-open.hpq-mobile-menu-ready button.hp-chatbox-trigger .hpq-trigger-label--mobile,
  body.hpq-mobile-menu-open.hpq-mobile-menu-ready button.hp-chatbox-trigger .hpq-trigger-icon--cta {
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
  }
}

/*
 * Les RS restent totalement invisibles pendant le morphing du CTA.
 * Ils n'ont donc jamais le temps d'être affichés à une ancienne position.
 */
.hpq-mobile-socials.is-preparing {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}

.hpq-mobile-socials.is-preparing .hpq-mobile-social {
  opacity: 0 !important;
  transform: translate3d(0,6px,0) scale(.94) !important;
}

/* Le groupe lui-même ne glisse plus horizontalement. */
.hpq-mobile-socials {
  transform: none !important;
}

/* Apparition douce et verticale de chaque picto. */
.hpq-mobile-social {
  opacity: 0;
  transform: translate3d(0,6px,0) scale(.94);
  transition:
    opacity .16s ease,
    transform .20s cubic-bezier(.22,.8,.22,1),
    border-color .18s ease,
    background .18s ease,
    color .18s ease !important;
}

.hpq-mobile-socials.is-visible .hpq-mobile-social {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

/* Petit stagger très discret = rendu plus premium. */
.hpq-mobile-socials.is-visible .hpq-mobile-social:nth-child(1) { transition-delay: 0ms; }
.hpq-mobile-socials.is-visible .hpq-mobile-social:nth-child(2) { transition-delay: 35ms; }
.hpq-mobile-socials.is-visible .hpq-mobile-social:nth-child(3) { transition-delay: 70ms; }

/* À la fermeture on annule immédiatement les éventuels délais d'apparition. */
.hpq-mobile-socials.is-fast-closing .hpq-mobile-social {
  opacity: 0 !important;
  transform: translate3d(0,2px,0) scale(.98) !important;
  transition-delay: 0s !important;
  transition-duration: .04s !important;
}

@media (max-width: 430px) {
  body.hpq-mobile-menu-open button.hp-chatbox-trigger {
    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  button.hp-chatbox-trigger,
  .hpq-mobile-socials,
  .hpq-mobile-social,
  button.hp-chatbox-trigger .hpq-trigger-label--mobile,
  button.hp-chatbox-trigger .hpq-trigger-icon--cta {
    transition: none !important;
  }
}


/* =========================================================
   v1.3.1 — Timings configurables du menu mobile
   ========================================================= */
@media (max-width: 1085px) {
  button.hp-chatbox-trigger {
    transition:
      width var(--hpq-mobile-cta-duration,160ms) cubic-bezier(.22,.8,.22,1),
      min-width var(--hpq-mobile-cta-duration,160ms) cubic-bezier(.22,.8,.22,1),
      max-width var(--hpq-mobile-cta-duration,160ms) cubic-bezier(.22,.8,.22,1),
      height var(--hpq-mobile-cta-duration,160ms) cubic-bezier(.22,.8,.22,1),
      padding var(--hpq-mobile-cta-duration,160ms) cubic-bezier(.22,.8,.22,1),
      gap var(--hpq-mobile-cta-duration,160ms) cubic-bezier(.22,.8,.22,1),
      border-radius var(--hpq-mobile-cta-duration,160ms) cubic-bezier(.22,.8,.22,1),
      transform .12s ease,
      box-shadow .12s ease !important;
  }

  body.hpq-mobile-menu-open button.hp-chatbox-trigger .hpq-trigger-label--mobile,
  body.hpq-mobile-menu-open button.hp-chatbox-trigger .hpq-trigger-icon--cta {
    transition:
      opacity var(--hpq-mobile-text-duration,90ms) ease,
      transform var(--hpq-mobile-text-duration,90ms) cubic-bezier(.22,.8,.22,1) !important;
  }
}

.hpq-mobile-social {
  transition:
    opacity var(--hpq-mobile-social-duration,110ms) ease,
    transform var(--hpq-mobile-social-duration,110ms) cubic-bezier(.22,.8,.22,1),
    border-color .14s ease,
    background .14s ease,
    color .14s ease !important;
}

.hpq-mobile-socials.is-visible .hpq-mobile-social:nth-child(1) {
  transition-delay: 0ms;
}
.hpq-mobile-socials.is-visible .hpq-mobile-social:nth-child(2) {
  transition-delay: var(--hpq-mobile-stagger,18ms);
}
.hpq-mobile-socials.is-visible .hpq-mobile-social:nth-child(3) {
  transition-delay: calc(var(--hpq-mobile-stagger,18ms) * 2);
}


/* =========================================================
   v1.4.0 — Effets premium optionnels du menu mobile
   ========================================================= */

/* Décors injectés par JS. Cachés hors menu. */
.hpq-mobile-menu-watermark,
.hpq-mobile-menu-halo {
  position: fixed;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* --- 1. Grand symbole <> de marque --- */
.hpq-mobile-menu-watermark {
  left: -44px;
  top: 48%;
  width: min(62vw, 285px);
  aspect-ratio: 5 / 3;
  z-index: 99940;
  color: var(--hpq-violet, #b18ae9);
  transform: translate3d(-12px, 10px, 0) rotate(-4deg) scale(.97);
  transform-origin: 45% 50%;
}

.hpq-mobile-menu-watermark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body.hpq-wow-watermark.hpq-mobile-menu-open .hpq-mobile-menu-watermark {
  visibility: visible;
  animation: hpqWowWatermarkIn 520ms cubic-bezier(.2,.8,.2,1) 40ms both;
}

@keyframes hpqWowWatermarkIn {
  from {
    opacity: 0;
    transform: translate3d(-16px, 13px, 0) rotate(-5deg) scale(.96);
  }
  to {
    opacity: var(--hpq-wow-watermark-opacity, .04);
    transform: translate3d(0, 0, 0) rotate(-4deg) scale(1);
  }
}

/* --- 2. Entrée stagger des vrais liens de navigation --- */
@keyframes hpqWowNavLinkIn {
  from {
    opacity: 0;
    transform: translate3d(11px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 1085px) {
  body.hpq-wow-link-stagger.hpq-mobile-menu-open
  .w-nav.type_mobile
  .w-nav-list.level_1 > .w-nav-item:not(.menu-item-object-us_page_block):not(.w-nav-close) > .w-nav-anchor {
    animation: hpqWowNavLinkIn 175ms cubic-bezier(.22,.8,.22,1) both;
    will-change: opacity, transform;
  }

  body.hpq-wow-link-stagger.hpq-mobile-menu-open
  .w-nav.type_mobile
  .w-nav-list.level_1 > .w-nav-item:nth-child(1) > .w-nav-anchor {
    animation-delay: 20ms;
  }

  body.hpq-wow-link-stagger.hpq-mobile-menu-open
  .w-nav.type_mobile
  .w-nav-list.level_1 > .w-nav-item:nth-child(2) > .w-nav-anchor {
    animation-delay: calc(20ms + var(--hpq-wow-link-stagger, 32ms));
  }

  body.hpq-wow-link-stagger.hpq-mobile-menu-open
  .w-nav.type_mobile
  .w-nav-list.level_1 > .w-nav-item:nth-child(3) > .w-nav-anchor {
    animation-delay: calc(20ms + var(--hpq-wow-link-stagger, 32ms) * 2);
  }

  body.hpq-wow-link-stagger.hpq-mobile-menu-open
  .w-nav.type_mobile
  .w-nav-list.level_1 > .w-nav-item:nth-child(4) > .w-nav-anchor {
    animation-delay: calc(20ms + var(--hpq-wow-link-stagger, 32ms) * 3);
  }

  body.hpq-wow-link-stagger.hpq-mobile-menu-open
  .w-nav.type_mobile
  .w-nav-list.level_1 > .w-nav-item:nth-child(5) > .w-nav-anchor {
    animation-delay: calc(20ms + var(--hpq-wow-link-stagger, 32ms) * 4);
  }
}

/* --- 3. Repère très discret sur le lien actif --- */
@media (max-width: 1085px) {
  body.hpq-wow-active-marker
  .w-nav.type_mobile
  .w-nav-list.level_1 > .current-menu-item > .w-nav-anchor > .w-nav-title,
  body.hpq-wow-active-marker
  .w-nav.type_mobile
  .w-nav-list.level_1 > .current-menu-ancestor > .w-nav-anchor > .w-nav-title,
  body.hpq-wow-active-marker
  .w-nav.type_mobile
  .w-nav-list.level_1 > .current_page_item > .w-nav-anchor > .w-nav-title,
  body.hpq-wow-active-marker
  .w-nav.type_mobile
  .w-nav-list.level_1 > .current_page_ancestor > .w-nav-anchor > .w-nav-title {
    position: relative;
  }

  body.hpq-wow-active-marker
  .w-nav.type_mobile
  .w-nav-list.level_1 > .current-menu-item > .w-nav-anchor > .w-nav-title::before,
  body.hpq-wow-active-marker
  .w-nav.type_mobile
  .w-nav-list.level_1 > .current-menu-ancestor > .w-nav-anchor > .w-nav-title::before,
  body.hpq-wow-active-marker
  .w-nav.type_mobile
  .w-nav-list.level_1 > .current_page_item > .w-nav-anchor > .w-nav-title::before,
  body.hpq-wow-active-marker
  .w-nav.type_mobile
  .w-nav-list.level_1 > .current_page_ancestor > .w-nav-anchor > .w-nav-title::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 50%;
    width: 10px;
    height: 2px;
    border-radius: 999px;
    background: var(--hpq-violet, #b18ae9);
    opacity: .95;
    transform: translateY(-50%);
    box-shadow: 0 0 10px rgba(177,138,233,.22);
  }
}

/* --- 4. Petite impulsion de la flèche CTA, une seule fois à l'ouverture --- */
@keyframes hpqWowCtaArrowNudge {
  0%, 100% { transform: translate3d(0,0,0); }
  45% { transform: translate3d(3px,0,0); }
}

@media (max-width: 1085px) {
  body.hpq-wow-cta-arrow.hpq-mobile-menu-open.hpq-mobile-menu-ready
  button.hp-chatbox-trigger .hpq-trigger-icon--cta svg {
    animation: hpqWowCtaArrowNudge 420ms cubic-bezier(.22,.8,.22,1) 45ms both;
  }
}

/* --- 5. Halo d'ambiance derrière CTA + réseaux --- */
.hpq-mobile-menu-halo {
  right: -64px;
  bottom: -72px;
  width: 300px;
  height: 250px;
  z-index: 99935;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 58% 56%,
      rgba(177,138,233,.17) 0%,
      rgba(177,138,233,.09) 28%,
      rgba(177,138,233,.035) 48%,
      rgba(177,138,233,0) 72%
    );
  filter: blur(12px);
  transform: translate3d(12px, 10px, 0) scale(.96);
}

body.hpq-wow-halo.hpq-mobile-menu-open .hpq-mobile-menu-halo {
  visibility: visible;
  animation: hpqWowHaloIn 360ms ease-out 40ms both;
}

@keyframes hpqWowHaloIn {
  from {
    opacity: 0;
    transform: translate3d(14px, 12px, 0) scale(.95);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 430px) {
  .hpq-mobile-menu-watermark {
    left: -52px;
    top: 50%;
    width: min(68vw, 250px);
  }

  .hpq-mobile-menu-halo {
    width: 250px;
    height: 220px;
    right: -72px;
    bottom: -78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.hpq-wow-watermark.hpq-mobile-menu-open .hpq-mobile-menu-watermark,
  body.hpq-wow-halo.hpq-mobile-menu-open .hpq-mobile-menu-halo,
  body.hpq-wow-link-stagger.hpq-mobile-menu-open
  .w-nav.type_mobile
  .w-nav-list.level_1 > .w-nav-item:not(.menu-item-object-us_page_block):not(.w-nav-close) > .w-nav-anchor,
  body.hpq-wow-cta-arrow.hpq-mobile-menu-open.hpq-mobile-menu-ready
  button.hp-chatbox-trigger .hpq-trigger-icon--cta svg {
    animation: none !important;
  }

  body.hpq-wow-watermark.hpq-mobile-menu-open .hpq-mobile-menu-watermark {
    opacity: var(--hpq-wow-watermark-opacity, .04);
    visibility: visible;
  }

  body.hpq-wow-halo.hpq-mobile-menu-open .hpq-mobile-menu-halo {
    opacity: 1;
    visibility: visible;
  }
}


/* =========================================================
   v1.4.1 — Icône de marque exacte + halo paramétrable
   ========================================================= */

/*
 * Le watermark utilise désormais directement le fichier officiel
 * Icone_Violet.svg fourni, sans le redessiner en CSS/JS.
 */
.hpq-mobile-menu-watermark {
  background-image: var(--hpq-wow-watermark-image) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.hpq-mobile-menu-watermark svg {
  display: none !important;
}

/*
 * Halo bas-droite : couleur, intensité, taille, flou et position
 * sont pilotés depuis le BO.
 */
.hpq-mobile-menu-halo {
  right: var(--hpq-wow-halo-right, -64px) !important;
  bottom: var(--hpq-wow-halo-bottom, -72px) !important;
  width: var(--hpq-wow-halo-size, 300px) !important;
  height: auto !important;
  aspect-ratio: 6 / 5;
  filter: blur(var(--hpq-wow-halo-blur, 12px)) !important;
  background:
    radial-gradient(
      circle at 58% 56%,
      rgba(var(--hpq-wow-halo-rgb, 177,138,233), var(--hpq-wow-halo-intensity, .17)) 0%,
      rgba(var(--hpq-wow-halo-rgb, 177,138,233), calc(var(--hpq-wow-halo-intensity, .17) * .53)) 30%,
      rgba(var(--hpq-wow-halo-rgb, 177,138,233), calc(var(--hpq-wow-halo-intensity, .17) * .20)) 50%,
      rgba(var(--hpq-wow-halo-rgb, 177,138,233), 0) 74%
    ) !important;
}

/* Le mobile étroit conserve exactement les réglages du BO. */
@media (max-width: 430px) {
  .hpq-mobile-menu-halo {
    right: var(--hpq-wow-halo-right, -64px) !important;
    bottom: var(--hpq-wow-halo-bottom, -72px) !important;
    width: var(--hpq-wow-halo-size, 300px) !important;
  }
}


/* =========================================================
   v1.4.2 — Position du symbole de marque réglable dans le BO
   ========================================================= */
.hpq-mobile-menu-watermark {
  left: var(--hpq-wow-watermark-left, -44px) !important;
  top: var(--hpq-wow-watermark-top, 52%) !important;
}

/* Les petits mobiles utilisent exactement la même position configurée. */
@media (max-width: 430px) {
  .hpq-mobile-menu-watermark {
    left: var(--hpq-wow-watermark-left, -44px) !important;
    top: var(--hpq-wow-watermark-top, 52%) !important;
  }
}


/* =========================================================
   v1.5.0 — Attention pulse / ripple du bouton flottant
   ========================================================= */

/*
 * L'effet utilise un overlay indépendant positionné par JS autour du bouton.
 * On ne touche donc pas au transform / box-shadow principal du CTA.
 */
.hpq-attention-pulse {
  --hpq-attention-ring-alpha: .34;
  --hpq-attention-ring-scale: 1.16;
  --hpq-attention-glow-alpha: .18;

  position: fixed;
  z-index: 99989;
  display: block;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  border-radius: 999px;
  transform: translateZ(0);
}

.hpq-attention-pulse.is-subtle {
  --hpq-attention-ring-alpha: .22;
  --hpq-attention-ring-scale: 1.11;
  --hpq-attention-glow-alpha: .11;
}

.hpq-attention-pulse.is-strong {
  --hpq-attention-ring-alpha: .46;
  --hpq-attention-ring-scale: 1.21;
  --hpq-attention-glow-alpha: .25;
}

.hpq-attention-pulse__ring,
.hpq-attention-pulse__glow {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  pointer-events: none;
}

.hpq-attention-pulse__ring {
  border: 1px solid rgba(177,138,233,var(--hpq-attention-ring-alpha));
  opacity: 0;
  transform: scale(.985);
}

.hpq-attention-pulse__ring--2 {
  border-color: rgba(233,227,255,calc(var(--hpq-attention-ring-alpha) * .72));
}

.hpq-attention-pulse__glow {
  inset: -8px;
  background:
    radial-gradient(
      ellipse at center,
      rgba(177,138,233,var(--hpq-attention-glow-alpha)) 0%,
      rgba(177,138,233,calc(var(--hpq-attention-glow-alpha) * .52)) 38%,
      rgba(177,138,233,0) 74%
    );
  filter: blur(10px);
  opacity: 0;
}

.hpq-attention-pulse.is-burst {
  visibility: visible;
  opacity: 1;
}

.hpq-attention-pulse.is-burst .hpq-attention-pulse__ring--1 {
  animation: hpqAttentionRipple 1050ms cubic-bezier(.16,.72,.24,1) both;
}

.hpq-attention-pulse.is-burst .hpq-attention-pulse__ring--2 {
  animation: hpqAttentionRipple 1050ms cubic-bezier(.16,.72,.24,1) 125ms both;
}

.hpq-attention-pulse.is-burst .hpq-attention-pulse__glow {
  animation: hpqAttentionGlow 900ms ease-out both;
}

@keyframes hpqAttentionRipple {
  0% {
    opacity: 0;
    transform: scale(.985);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(var(--hpq-attention-ring-scale));
  }
}

@keyframes hpqAttentionGlow {
  0% {
    opacity: 0;
    transform: scale(.96);
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

/* Micro "pop" de l'icône, indépendant du bouton lui-même. */
button.hp-chatbox-trigger.hpq-attention-active .hpq-trigger-icon {
  animation: hpqAttentionIconPop 760ms cubic-bezier(.22,.8,.22,1) both;
}

@keyframes hpqAttentionIconPop {
  0%, 100% { transform: scale(1); }
  24% { transform: scale(1.10); }
  48% { transform: scale(.98); }
  68% { transform: scale(1.045); }
}

/* En intensité forte uniquement : le texte respire très légèrement. */
button.hp-chatbox-trigger.hpq-attention-active.hpq-attention-strong .hpq-trigger-label--default {
  animation: hpqAttentionLabel 720ms ease-out both;
}

@keyframes hpqAttentionLabel {
  0%, 100% { opacity: 1; }
  34% { opacity: .80; }
  58% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hpq-attention-pulse,
  .hpq-attention-pulse *,
  button.hp-chatbox-trigger.hpq-attention-active .hpq-trigger-icon,
  button.hp-chatbox-trigger.hpq-attention-active .hpq-trigger-label--default {
    animation: none !important;
  }
}


/* =========================================================
   v1.5.1 — Attention "Bubble" fluide / premium
   ========================================================= */

button.hp-chatbox-trigger.hpq-attention-bubble {
  transform-origin: center center;
  will-change: transform, box-shadow;
}

button.hp-chatbox-trigger.hpq-attention-bubble.hpq-attention-active {
  animation:
    hpqAttentionBubble var(--hpq-attention-bubble-duration,1450ms)
    cubic-bezier(.22,.82,.24,1) both;
}

/*
 * Gonflement organique continu :
 * seulement 3 états (repos → gonflé → repos), avec une courbe
 * différente à la montée et à la descente. Le retour est donc
 * parfaitement fluide, sans paliers visibles.
 */
@keyframes hpqAttentionBubble {
  0% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(.18,.82,.24,1);
  }

  38% {
    transform: scale(calc(1 + var(--hpq-attention-bubble-scale,.07)));
    animation-timing-function: cubic-bezier(.32,0,.20,1);
  }

  100% {
    transform: scale(1);
  }
}

/*
 * Petit "souffle" de lumière interne, très court.
 * Il accentue l'impression de bulle sans effet néon.
 */
button.hp-chatbox-trigger.hpq-attention-bubble.hpq-attention-active::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,0) 18%,
      rgba(255,255,255,.16) 44%,
      rgba(255,255,255,.05) 58%,
      rgba(255,255,255,0) 76%
    );
  opacity: 0;
  animation: hpqAttentionBubbleSheen var(--hpq-attention-bubble-duration,1450ms) ease-out both;
}

@keyframes hpqAttentionBubbleSheen {
  0%, 12% {
    opacity: 0;
    transform: translate3d(-18%,0,0);
  }
  34% {
    opacity: .62;
  }
  58% {
    opacity: .22;
    transform: translate3d(18%,0,0);
  }
  100% {
    opacity: 0;
    transform: translate3d(28%,0,0);
  }
}

/* Style "Bulle + halo" : garde le ripple existant mais plus doux. */
.hpq-attention-pulse.is-bubble-ripple.is-burst .hpq-attention-pulse__ring--1 {
  animation-duration: 1200ms;
}
.hpq-attention-pulse.is-bubble-ripple.is-burst .hpq-attention-pulse__ring--2 {
  animation-duration: 1200ms;
  animation-delay: 115ms;
}
.hpq-attention-pulse.is-bubble-ripple.is-burst .hpq-attention-pulse__glow {
  animation-duration: 1050ms;
}

/* En "Bulle fluide" pure, aucun anneau externe. */
.hpq-attention-pulse.is-bubble.is-burst {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* En mode ripple pur, le bouton ne gonfle pas. */
button.hp-chatbox-trigger.hpq-attention-ripple.hpq-attention-active {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  button.hp-chatbox-trigger.hpq-attention-bubble.hpq-attention-active,
  button.hp-chatbox-trigger.hpq-attention-bubble.hpq-attention-active::after {
    animation: none !important;
  }
}


/* =========================================================
   v1.5.2 — Retour bulle parfaitement continu
   ========================================================= */
button.hp-chatbox-trigger.hpq-attention-bubble.hpq-attention-active {
  animation-name: hpqAttentionBubble !important;
  animation-duration: var(--hpq-attention-bubble-duration,1450ms) !important;
  animation-timing-function: linear !important;
  animation-fill-mode: both !important;
}


/* =========================================================
   v1.5.3 — Taille du symbole de marque réglable
   ========================================================= */
.hpq-mobile-menu-watermark {
  width: min(var(--hpq-wow-watermark-size, 88vw), 540px) !important;
}

/* Même logique sur petits mobiles : l'effet reste ample et cohérent. */
@media (max-width: 430px) {
  .hpq-mobile-menu-watermark {
    width: min(var(--hpq-wow-watermark-size, 88vw), 420px) !important;
  }
}


/* =========================================================
   v1.6.0 — Project Finder contextualisé Essentielle / Signature
   ========================================================= */

.hpq-context-card {
  position: relative;
  margin: 18px 0 0;
  padding: 14px 15px 14px 17px;
  border: 1px solid rgba(213,202,252,.20);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(177,138,233,.12), rgba(213,202,252,.035) 62%, transparent);
  overflow: hidden;
}

.hpq-context-card[hidden] {
  display: none !important;
}

.hpq-context-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e9e3ff, #b18ae9);
  opacity: .9;
}

.hpq-context-card__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #aaa3b9;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hpq-context-card strong {
  display: block;
  color: #f6f3ff;
  font-size: 15px;
  line-height: 1.25;
}

.hpq-context-card p {
  margin: 5px 0 0 !important;
  color: #cec7d8 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.hpq-app[data-hpq-project-context="essential"] .hpq-context-card {
  background:
    linear-gradient(135deg, rgba(213,202,252,.105), rgba(177,138,233,.025) 68%, transparent);
}

.hpq-app[data-hpq-project-context="signature"] .hpq-context-card {
  border-color: rgba(177,138,233,.30);
  background:
    radial-gradient(circle at 88% 10%, rgba(177,138,233,.18), transparent 34%),
    linear-gradient(135deg, rgba(177,138,233,.14), rgba(82,46,126,.05) 68%, transparent);
}

.hpq-result-card--solution {
  align-items: flex-start;
}

.hpq-result-card--solution .hpq-result-card__body {
  min-width: 0;
}

.hpq-result-card--solution [data-hpq-solution-title] {
  display: block;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.15;
}

.hpq-result-card--solution [data-hpq-solution-copy] {
  margin: 6px 0 12px;
}

.hpq-result-card__service {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: #aaa3b9;
  background: rgba(255,255,255,.035);
  font-size: 11px;
  line-height: 1.25;
}

.hpq-result-card__service b {
  color: #e9e3ff;
  font-weight: 700;
}

.hpq-result-card--solution [data-hpq-result-copy] {
  display: block;
  margin-top: 8px;
  color: #81798c;
  font-size: 11px;
  line-height: 1.45;
}

.hpq-success-recommendation {
  margin: 22px 0 4px;
  padding: 16px 18px;
  border: 1px solid rgba(177,138,233,.22);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(177,138,233,.11), rgba(255,255,255,.025));
}

.hpq-success-recommendation > span {
  display: block;
  margin-bottom: 5px;
  color: #aaa3b9;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hpq-success-recommendation strong {
  display: block;
  color: #f6f3ff;
  font-size: 18px;
}

.hpq-success-recommendation small {
  display: block;
  margin-top: 5px;
  color: #cec7d8;
  font-size: 12px;
}

@media (max-width: 768px) {
  .hpq-context-card {
    margin-top: 14px;
    padding: 12px 13px 12px 15px;
    border-radius: 12px;
  }

  .hpq-result-card__service {
    border-radius: 10px;
  }
}