:root{
  /* Try to reuse Astra global colors when available */
  --atq-accent: var(--ast-global-color-0, #D5BE9D);
  --atq-accent-hover: var(--ast-global-color-2, #000000);
  --atq-accent-text: #ffffff;
  --atq-text: var(--ast-global-color-3, #1a1a1a);
  --atq-muted: rgba(0,0,0,.70);
  --atq-border: rgba(0,0,0,.14);
  --atq-bg: #ffffff;
  --atq-shadow: 0 10px 28px rgba(0,0,0,.10);
  --atq-radius-lg: 18px;
  --atq-radius-md: 14px;
}

/* Root + overlay */
.atq-root{ min-height:100vh; color:var(--atq-text); }
.atq-fullscreen{
  position:fixed;
  inset:0;
  z-index:999999;
  background:var(--atq-bg);
  overflow:auto;
  /* iOS Safari can auto-inflate text sizes, which breaks absolute layouts (axis/pins).
     Keep a stable typographic scale inside the fullscreen UI. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
  When the progress bar is used as a top header, reserve space in the scroll container
  so the content never scrolls underneath the fixed header elements (logo / progress / close).
*/
.atq-root.atq-has-top-progress{ --atq-top-header-h: 68px; }
.atq-root.atq-has-top-progress .atq-fullscreen{
  padding-top: calc(var(--atq-top-header-h) + env(safe-area-inset-top));
  box-sizing:border-box;
}

/* White header backdrop so content never scrolls visually under logo/close/progress (iOS Safari). */
.atq-root.atq-has-top-progress .atq-fullscreen::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height: calc(var(--atq-top-header-h) + env(safe-area-inset-top));
  background: #fff;
  z-index: 1050000;
  pointer-events:none;
}
body.atq-body-lock{ overflow:hidden; }

/* Layout */
.atq-wrap{
  min-height:100vh;
  width:100%;
  padding:24px;
  padding-bottom:96px; /* room for footer widget */
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Ensure the scrollable content sits below the fixed header layer */
.atq-wrap{ position:relative; z-index:1; }
.atq-stage{ width:100%; display:flex; justify-content:center; }
.atq-card{
  width:100%;
  max-width:980px;
  background:var(--atq-bg);
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:22px;
  box-sizing:border-box;
  max-height: calc(100vh - 140px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.atq-body{ display:flex; flex-direction:column; gap:10px; }

/* Typography */
.atq-title{ margin:0; font-size:28px; line-height:1.15; }
.atq-muted{ margin:0; color:var(--atq-muted); }
.atq-help{ margin:0; opacity:.90; }
.atq-kicker{ font-size:14px; color:var(--atq-muted); }
.atq-required{ color:#d00020; margin-left:6px; }

/* Section hero */
.atq-section-hero{ width:100%; max-width:980px; margin:0 0 10px; }
.atq-section-hero img,
.atq-section-hero video{
  width:100%;
  display:block;
  border-radius:var(--atq-radius-md);
  max-height:360px;
  object-fit:cover;
}

.atq-section-hero video{ background:#000; }

/* Generic media helpers (used for section videos) */
.atq-media-video,
.atq-media-image{ width:100%; height:auto; display:block; object-fit:cover; }

/* Inputs */
.atq-input{ margin-top:4px; }
.atq-field{
  width:100%;
  max-width:720px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--atq-border);
  background:#fff;
  box-sizing:border-box;
  font-size:16px;
}
.atq-field:focus{ outline:none; border-color:rgba(0,0,0,.30); }
.atq-field-short{ max-width:30%; min-width:180px; }
.atq-textarea{ min-height:140px; }

/* Choices */
.atq-choices{ display:flex; flex-direction:column; gap:10px; max-width:720px; }
.atq-choice{
  position:relative;
  text-align:left;
  padding:12px 44px 12px 14px; /* room for checkmark on selected */
  border-radius:12px;
  border:1px solid var(--atq-choice-border, var(--atq-border));
  background:var(--atq-choice-bg, #fff);
  white-space: pre-line;
  color:var(--atq-choice-text, inherit);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.atq-choice.is-selected{ background:var(--atq-choice-bg-selected, #f6f6f6); border-color:var(--atq-choice-border-selected, var(--atq-accent)); color:var(--atq-choice-text-selected, var(--atq-accent)); }

/* Show a checkmark on text choices too (like photo choices). */
.atq-choices .atq-choice.is-selected::after{
  content:"✓";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.92);
  border:1px solid var(--atq-border);
  color:rgba(0,0,0,.82);
}

.atq-choice:hover{
  border-color:var(--atq-choice-border-hover, var(--atq-choice-border, var(--atq-border)));
  background:var(--atq-choice-bg-hover, var(--atq-choice-bg, #fff));
}

/* Hard reset for mobile Safari focus/active styles (prevents "brown" ghost highlight) */
.atq-choice:focus,
.atq-choice:focus-visible,
.atq-choice:active{
  outline:none !important;
  box-shadow:none !important;
  background:var(--atq-choice-bg-hover, var(--atq-choice-bg, #fff)) !important;
  border-color:var(--atq-choice-border-hover, var(--atq-choice-border, var(--atq-border))) !important;
}
.atq-choice.is-selected:focus,
.atq-choice.is-selected:focus-visible,
.atq-choice.is-selected:active{
  background:var(--atq-choice-bg-selected, rgba(0,0,0,.05)) !important;
  border-color:var(--atq-choice-border-selected, rgba(0,0,0,.32)) !important;
}

/* Image choices */
.atq-image-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  max-width:980px;
}
.atq-image-tile{
  position:relative;
  border-radius:var(--atq-radius-md);
  border:1px solid var(--atq-choice-border, var(--atq-border));
  background:var(--atq-choice-bg, #fff);
  padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  overflow:hidden;
  text-align:left;
}
.atq-image{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.atq-image-caption{ padding:10px 12px; font-size:14px;
  white-space: pre-line;
}
.atq-image-tile .atq-check{
  position:absolute;
  top:10px;
  right:10px;
  width:26px;
  height:26px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.92);
  border:1px solid var(--atq-border);
  opacity:0;
}
.atq-image-tile:hover{ border-color:var(--atq-choice-border-hover, var(--atq-choice-border, var(--atq-border))); }
.atq-image-tile:active{ border-color:var(--atq-choice-border-hover, var(--atq-choice-border, var(--atq-border))); }
.atq-image-tile.is-selected{ outline:2px solid var(--atq-choice-border-selected, var(--atq-accent)); background:var(--atq-choice-bg-selected, #f6f6f6); }
.atq-image-tile.is-selected .atq-check{ opacity:1; }

/* Suggestions (address) */
.atq-suggestions{
  display:none;
  margin-top:8px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  overflow:hidden;
  max-width:720px;
  background:#fff;
}
.atq-suggestions.is-open{ display:block; }
.atq-suggestion{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:0;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:#fff;
  cursor:pointer;
}
.atq-suggestion:last-child{ border-bottom:0; }
.atq-suggestion:hover{ background:rgba(0,0,0,.04); }

/* Scale */
.atq-scale-row{ display:flex; gap:10px; flex-wrap:wrap; width:100%; }
.atq-scale-btn{
  min-width:46px;
  height:46px;
  border-radius:12px;
  border:1px solid var(--atq-choice-border, var(--atq-border));
  background:var(--atq-choice-bg, #fff);
  color:var(--atq-choice-text, inherit);
  cursor:pointer;
  font-size:16px;
}
.atq-scale-btn:hover{ border-color:var(--atq-choice-border-hover, var(--atq-choice-border, var(--atq-border))); background:var(--atq-choice-bg-hover, var(--atq-choice-bg, #fff)); }
.atq-scale-btn:active{ border-color:var(--atq-choice-border-hover, var(--atq-choice-border, var(--atq-border))); background:var(--atq-choice-bg-hover, var(--atq-choice-bg, #fff)); }
.atq-scale-btn.is-selected{ background:var(--atq-choice-bg-selected, #f6f6f6); border-color:var(--atq-choice-border-selected, var(--atq-accent)); color:var(--atq-choice-text-selected, var(--atq-accent)); }
.atq-scale-labels{ position:relative; width:100%; height:20px; font-size:13px; color:var(--atq-muted); margin-top:6px; }
.atq-scale-labels > *{ position:absolute; top:0; white-space:nowrap; transform:translateX(-50%); }

/* If the scale is too wide, allow buttons to shrink slightly rather than forcing a horizontal scroll */
.atq-scale-btn{ min-width:48px; }

/* Nav + buttons */
.atq-nav{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }

/* v0.4.4 - budget_range skip link */
.atq-btn-link{
  background:transparent;
  border:0;
  padding:0 6px;
  margin-left:auto;
  font:inherit;
  cursor:pointer;
  color:inherit;
  text-decoration:underline;
}
.atq-btn-link:focus{ outline:none; }
.atq-btn-link:active{ opacity:.7; }
.atq-btn,
.atq-wrap button.atq-btn{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:var(--atq-radius-lg);
  padding:14px 28px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
  text-decoration:none;
}
.atq-btn-primary{
  background:var(--atq-btn-bg, var(--atq-accent));
  color:var(--atq-btn-text, var(--atq-accent-text));
  box-shadow:0 6px 16px rgba(0,0,0,.14);
}
.atq-btn-primary:hover{ background:var(--atq-btn-bg-hover, var(--atq-accent-hover)); color:var(--atq-btn-text-hover, var(--atq-btn-text, var(--atq-accent-text))); -webkit-text-fill-color:var(--atq-btn-text-hover, var(--atq-btn-text, var(--atq-accent-text))); transform:translateY(-1px); }
.atq-btn-primary:active{ transform:translateY(0); }
.atq-btn-secondary{ background:#f3f3f3; color:#111; }
.atq-btn-secondary:hover{ background:#eaeaea; }
.atq-btn:disabled,
.atq-wrap button.atq-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

.atq-error{ color:#b00020; min-height:20px; }

/* Floating controls */
.atq-close{
  /* Must scroll with the content (no fixed positioning) */
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  z-index:1000000;
}
.atq-close:hover{ background:#f6f6f6; }

.atq-root.atq-has-top-progress .atq-close{
  position:fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  right:18px;
}
.atq-logo{
  /* Must scroll with the content (no fixed positioning) */
  position:absolute;
  top:18px;
  left:18px;
  z-index:1000000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.atq-logo img{ height:34px; width:auto; display:block; }

.atq-root.atq-has-top-progress .atq-logo{
  position:fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  left:18px;
}

/* Progress widget */
.atq-footer{ position:fixed; right:18px; bottom:18px; z-index:999999; }

.atq-footer.atq-footer--bottom-right{ right:18px; bottom:18px; }

/* Bottom-right progress badge (desktop friendly) */
.atq-progress-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  user-select:none;
}
.atq-progress-badge__ring{
  width:58px;
  height:58px;
  border-radius:999px;
  background: conic-gradient(var(--atq-accent) calc(var(--atq-p) * 1%), rgba(0,0,0,.12) 0);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.atq-progress-badge__ring::before{
  content:"";
  width:46px;
  height:46px;
  border-radius:999px;
  background: rgba(255,255,255,.95);
  position:absolute;
}
.atq-progress-badge__ring{ position:relative; }
.atq-progress-badge__inner{
  position:relative;
  font-weight:700;
  font-size:14px;
  color: rgba(0,0,0,.75);
  letter-spacing:-.02em;
}
.atq-progress-badge__time{
  font-size:12px;
  color: var(--atq-muted);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  padding: 4px 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  white-space:nowrap;
}


/* Progress widget positioning variants (per questionnaire) */
.atq-footer.atq-footer--top-center{
  top:0;
  bottom:auto;
  left:0;
  right:0;
  transform:none;
  padding:0;
  padding-top: env(safe-area-inset-top);
  box-sizing:border-box;
  z-index:2000000;
  width:100vw;
}

/* Full-width, sober progress line (desktop + mobile) */
.atq-footer.atq-footer--top-center .atq-footer-inner{
  width:100%;
  margin:0;
  padding:0;
  border-radius:0;
  background:rgba(255,255,255,.95);
  border:none;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  backdrop-filter:none;
}

.atq-footer.atq-footer--top-center .atq-time{ display:none; }

.atq-footer.atq-footer--top-center .atq-progress{
  height:5px;
  border-radius:0;
  background:rgba(0,0,0,.12);
  width:100%;
}

.atq-footer.atq-footer--top-center .atq-progress-bar{
  height:100%;
  border-radius:0;
  background:var(--atq-accent);
  transition: width .3s ease;
}
/* Mobile variant for top progress: sober thin bar, no time */
@media (max-width: 520px){
  /* A bit taller on iOS: avoids title/kicker sliding under the logo */
  .atq-root.atq-has-top-progress{ --atq-top-header-h: 76px; }

  .atq-root.atq-has-top-progress .atq-logo{
    top: calc(env(safe-area-inset-top) + 8px);
    left:12px;
    z-index:1200000;
  }
  .atq-root.atq-has-top-progress .atq-logo img{ height:26px; }

  .atq-root.atq-has-top-progress .atq-close{
    top: calc(env(safe-area-inset-top) + 8px);
    right:12px;
    width:38px;
    height:38px;
    font-size:20px;
    z-index:1200000;
  }

  .atq-footer.atq-footer--top-center{
    padding:0;
    padding-top: env(safe-area-inset-top);
    padding-left:0;
    padding-right:0;
    z-index:1100000;
    width:100vw;
  }
  .atq-footer.atq-footer--top-center .atq-footer-inner{
    width:100%;
    margin:0;
    padding:0;
    border-radius:0;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid rgba(0,0,0,.10);
    box-shadow:0 2px 10px rgba(0,0,0,.10);
    backdrop-filter: blur(6px);
  }
  .atq-footer.atq-footer--top-center .atq-time{ display:none; }
  .atq-footer.atq-footer--top-center .atq-progress{
    height:4px;
    border-radius:0;
    background:rgba(0,0,0,.14);
    width:100%;
  }
  .atq-footer.atq-footer--top-center .atq-progress-bar{
    border-radius:0;
  }
}

.atq-footer-inner{
  width:220px;
  padding:10px 12px;
  border-radius:var(--atq-radius-md);
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:var(--atq-shadow);
  box-sizing:border-box;
}
.atq-progress{ height:8px; border-radius:999px; background:rgba(0,0,0,.10); overflow:hidden; }
.atq-progress-bar{ height:100%; border-radius:999px; background:rgba(0,0,0,.60); }
.atq-time{ margin-top:8px; white-space:nowrap; color:var(--atq-muted); font-size:13px; }

/* Estimation */
.atq-reveal{ margin-top:10px; }
.atq-est-box{ padding:14px; border:1px solid rgba(0,0,0,.12); border-radius:var(--atq-radius-md); background:rgba(0,0,0,.03); }
.atq-est-line{ font-size:18px; text-align:center; }
.atq-est-cards{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; margin-top:12px; }
.atq-est-card{ padding:16px; border:1px solid rgba(0,0,0,.12); border-radius:var(--atq-radius-lg); background:#fff; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.atq-est-card-best{ background:rgba(0,0,0,.82); color:#fff; border-color:rgba(0,0,0,.86); }
.atq-est-value{ font-size:24px; font-weight:700; letter-spacing:-.02em; }
.atq-est-caption{ margin-top:6px; font-size:13px; color:inherit; opacity:.85; }

/* ── BARRE D'ESTIMATION ───────────────────────────────────────────────────────
   Variables admin :
     --atq-est-bar-color    : couleur/gradient de la barre (défaut: gris)
     --atq-est-pin-bg       : fond bulles basse/haute
     --atq-est-pin-border   : bordure bulles basse/haute
     --atq-est-pin-main-bg  : fond bulle centrale
     --atq-est-budget-bg    : fond bulle budget
     --atq-est-budget-border: bordure bulle budget
     --atq-est-budget-text  : texte bulle budget
     --atq-est-arrow-color  : flèche connectrice
     --atq-est-card-bg      : fond carte message
     --atq-est-card-border  : bordure carte message
──────────────────────────────────────────────────────────────────────────── */

.atq-est-graph{
  margin-top: 20px;
  overflow: visible;
}

/* Wrapper : padding-top = espace au-dessus de la barre pour les bulles + tiges
             padding-bottom = espace sous la barre pour la bulle budget */
.atq-est-axis-wrap{
  position: relative;
  /* Bottom padding reduced because the budget bubble now sits on the bar */
  padding: 100px 0 34px;
  overflow: visible;
}

/* La barre est placée exactement au bas du padding-top */
.atq-est-axis-line{
  position: absolute;
  left: 0; right: 0;
  top: 100px;
  height: 6px;
  background: var(--atq-est-bar-color, rgba(58,74,90,.45));
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* ── Pins ─────────────────────────────────────────────────────────────────── */
.atq-est-pin{
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  width: max-content;
  pointer-events: none;
}

.atq-est-pin-box{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: 7px 16px;
  width: max-content;
  min-height: 52px;
  border-radius: 999px;
  background: var(--atq-est-pin-bg, #fff);
  border: 1px solid var(--atq-est-pin-border, rgba(15,23,42,.28));
  box-shadow: 0 8px 22px rgba(0,0,0,.07);
  box-sizing: border-box;
  white-space: nowrap;
}
.atq-est-pin-box .atq-est-pin-value{
  font-size: 14px; font-weight: 740;
  letter-spacing: -.02em; line-height: 1.1;
}
.atq-est-pin-box .atq-est-pin-caption{
  margin-top: 2px;
  font-size: 9px; text-transform: uppercase;
  letter-spacing: .06em; color: rgba(0,0,0,.55); line-height: 1.05;
}

/* Bulle centrale : plus haute et noire */
.atq-est-pin.is-main .atq-est-pin-box{
  background: var(--atq-est-pin-main-bg, linear-gradient(180deg, #111 0%, #000 100%));
  border-color: rgba(0,0,0,.88);
  color: #fff;
  padding: 10px 22px;
  min-height: 58px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  transform: translateY(-18px);
}
.atq-est-pin.is-main .atq-est-pin-box .atq-est-pin-value{ font-size: 20px; font-weight: 850; }
.atq-est-pin.is-main .atq-est-pin-caption{ color: rgba(255,255,255,.80); }
.atq-est-pin.is-main{ animation: atqPopIn .45s ease-out both; }

/* Tige et diamant — top/height positionnés en JS */
.atq-est-pin-stem{
  position: absolute; left: 50%;
  width: 1px; background: rgba(0,0,0,.70);
  transform: translateX(-50%);
  top: 0; height: 10px;
}
.atq-est-pin-diamond{
  position: absolute; left: 50%;
  width: 9px; height: 9px;
  background: rgba(0,0,0,.80);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
  top: 0;
}

/* ── Bulle "Votre budget" ─────────────────────────────────────────────────── */
/* Le marker est une ancre de hauteur nulle sur la barre (top = axisY, set en JS).
   La bulle descend sous la barre via margin-top. */
.atq-est-budget-marker{
  position: absolute;
  height: 0;
  overflow: visible;
  /* Anchor point only (0 width). The label is centered on this anchor. */
  width: 0;
  animation: atqFadeInUp .45s ease-out both;
  pointer-events: none;
}

.atq-est-budget-label{
  display: inline-block;
  position: relative;
  /* La bulle doit chevaucher la barre (centrée sur l'axe). */
  margin-top: 0;
  left: var(--atq-budget-shift, 0px);
  /* IMPORTANT: center the bubble on the anchor (not its left edge). */
  transform: translate(-50%, -50%);
  padding: 7px 13px;
  border-radius: 12px;
  background: var(--atq-est-budget-bg, #fff);
  border: 1.5px solid var(--atq-est-budget-border, rgba(0,0,0,.20));
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  white-space: nowrap;
  max-width: min(300px, 88vw);
  box-sizing: border-box;
}
/* Pas de trait entre la barre et la bulle (demande UX). */
.atq-est-budget-label::before{ content: none; }
.atq-est-budget-label-title{
  display: block;
  font-size: 9px; text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--atq-est-budget-text, rgba(0,0,0,.55));
  line-height: 1.1;
}
.atq-est-budget-label-value{
  display: block;
  font-size: 16px; font-weight: 820;
  letter-spacing: -.02em; line-height: 1.1;
  color: var(--atq-est-budget-text, #1a1a1a);
}

/* ── Carte message + flèche ───────────────────────────────────────────────── */
.atq-est-screen-wrap{
  position: relative;
  /* Tighten space between budget bubble and message card. */
  margin-top: 6px;
  overflow: visible;
}

.atq-est-screen-arrow{
  position: relative;
  left: var(--atq-arrow-x, 50%);
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left:  10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 12px solid var(--atq-est-card-border, rgba(0,0,0,.09));
  margin-bottom: -1px;
  pointer-events: none;
}
.atq-est-screen-arrow::after{
  content: "";
  position: absolute;
  top: 2px; left: -8px;
  width: 0; height: 0;
  border-left:  8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid var(--atq-est-card-bg, #fff);
}

.atq-est-screen-card{
  background: var(--atq-est-card-bg, #fff);
  border: 1px solid var(--atq-est-card-border, rgba(0,0,0,.09));
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
  line-height: 1.55;
}

/* ── Animations ───────────────────────────────────────────────────────────── */
@keyframes atqFadeInUp{
  from{ opacity:0; transform:translateY(6px); }
  to{   opacity:1; transform:translateY(0); }
}
@keyframes atqPopIn{
  from{ transform:translateX(-50%) scale(.97); opacity:0; }
  to{   transform:translateX(-50%) scale(1);   opacity:1; }
}

/* ── Responsive mobile ────────────────────────────────────────────────────── */
@media (max-width: 520px){
  .atq-est-axis-wrap{ padding: 80px 0 40px; }
  /* Keep the bar aligned with the bottom of the top padding on mobile */
  .atq-est-axis-line{ top: 80px; }
  .atq-est-pin-box{ padding: 6px 10px; min-height: 44px; }
  .atq-est-pin-box .atq-est-pin-value{ font-size: 12px; }
  /* On small screens (and iOS with Dynamic Type), captions make side bubbles too tall
     and they collide with the axis/budget bubble. Hide captions for side pins only. */
  .atq-est-pin:not(.is-main) .atq-est-pin-caption{ display:none; }
  .atq-est-pin.is-main .atq-est-pin-caption{ font-size: 8px; }
  .atq-est-pin.is-main .atq-est-pin-box{ padding: 8px 16px; }
  .atq-est-pin.is-main .atq-est-pin-box .atq-est-pin-value{ font-size: 17px; }
  /* Sur mobile, on évite de pousser les bulles latérales sur la barre
     (sinon elles se superposent avec la bulle budget sur iOS/Safari). */
  .atq-est-budget-label{ padding: 5px 10px; }
  .atq-est-budget-label-value{ font-size: 14px; }
  .atq-est-screen-card{ padding: 12px 14px; }
}

/* Buttons / CTA */
.atq-btn, .atq-btn:visited{ text-decoration:none !important; }
.atq-btn:hover, .atq-btn:active, .atq-btn:focus{ text-decoration:none !important; }
.atq-no-btn-underline .atq-btn,
.atq-no-btn-underline .atq-btn:visited,
.atq-no-btn-underline .atq-cta-link,
.atq-no-btn-underline .atq-cta-link:visited{ text-decoration:none !important; }
.atq-cta-wrap{ display:flex; gap:10px; justify-content:center; margin:16px 0 6px; flex-wrap:wrap; }
.atq-est-h3{ margin:18px 0 8px; font-size:14px; letter-spacing:.02em; text-transform:uppercase; color:var(--atq-muted); }
.atq-est-block{ margin:0 0 8px; line-height:1.5; }
.atq-est-block ul{ margin:8px 0 0 18px; }
.atq-est-block li{ margin:4px 0; }
.atq-est-alerts{ margin:8px 0 0 18px; }
.atq-est-alerts li{ margin:6px 0; }
/* Capture */
.atq-capture{ margin-top:8px; }
.atq-capture-row{ margin-top:12px; }

/* Budget range */
.atq-budget-range{ margin-top:10px; }
.atq-budget-track{ position:relative; padding-top:150px; }
.atq-budget-track::before{ content:""; position:absolute; left:0; right:0; top:120px; height:8px; background:rgba(0,0,0,.18); border-radius:999px; }
.atq-budget-selected-range{ position:absolute; top:120px; height:8px; background:rgba(0,0,0,.80); border-radius:999px; }
.atq-budget-fill{ position:absolute; top:120px; height:8px; background:rgba(0,0,0,.80); border-radius:999px; left:0; width:0; }
.atq-range{ width:100%; position:absolute; left:0; top:108px; margin:0; background:transparent; pointer-events:none; }
.atq-range::-webkit-slider-runnable-track{ height:32px; background:transparent; border:none; box-shadow:none; }
.atq-range::-moz-range-track{ height:32px; background:transparent; border:none; box-shadow:none; }
.atq-range::-ms-track{ height:32px; background:transparent; border-color:transparent; color:transparent; }
.atq-range::-webkit-slider-thumb{ pointer-events:auto; -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid rgba(0,0,0,.85); margin-top:6px; box-shadow:0 10px 18px rgba(0,0,0,.12); }
.atq-range::-moz-range-thumb{ pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid rgba(0,0,0,.85); }
.atq-range::-ms-thumb{ pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid rgba(0,0,0,.85); }
.atq-budget-bubble{
  position:absolute;
  /* airy bubble above the track */
  top:64px;
  transform:translateX(-50%);
  padding:10px 12px;
  min-width:64px;
  background:rgba(15, 23, 42, .92);
  color:#fff;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:800;
  pointer-events:none;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.atq-budget-bubble::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:16px;
  height:16px;
  background:inherit;
  transform:translateX(-50%) rotate(45deg);
  border-radius:2px;
}
.atq-budget-bubble-amount{ font-size:18px; line-height:1; white-space:nowrap; }
.atq-budget-bubble-suffix{ display:none; }

/* Budget range: force our look even if the theme styles input[type=range] globally */
.atq-budget-track input.atq-range{
  -webkit-appearance:none !important;
  appearance:none !important;
  background:transparent !important;
}
.atq-budget-track input.atq-range::-webkit-slider-runnable-track{ background:transparent !important; box-shadow:none !important; border:none !important; }
.atq-budget-track input.atq-range::-webkit-slider-thumb{ background:#fff !important; border:3px solid rgba(0,0,0,.85) !important; box-shadow:0 6px 12px rgba(0,0,0,.10) !important; }
.atq-budget-track input.atq-range::-moz-range-track{ background:transparent !important; border:none !important; }
.atq-budget-track input.atq-range::-moz-range-thumb{ background:#fff !important; border:3px solid rgba(0,0,0,.85) !important; box-shadow:0 6px 12px rgba(0,0,0,.10) !important; }

.atq-budget-ticks{ display:flex; align-items:flex-start; margin-top:18px; gap:0; }
.atq-budget-tick{ position:relative; flex:1; height:28px; }
.atq-budget-tick::before{ content:""; position:absolute; left:50%; top:0; width:1px; height:10px; background:rgba(0,0,0,.18); transform:translateX(-50%); }
.atq-budget-tick.is-major::before{ height:14px; background:rgba(0,0,0,.35); }
.atq-budget-tick-label{ position:absolute; top:14px; left:50%; transform:translateX(-50%); font-size:12px; color:rgba(0,0,0,.45); white-space:nowrap; }

/* Thank you screen tweaks */
.atq-screen-thankyou .atq-progress{ display:none !important; }

/* Responsive */
@media (max-width: 640px){
  .atq-wrap{ padding:16px; padding-bottom:88px; }

  .atq-root.atq-has-top-progress{ --atq-top-header-h: 62px; }
  .atq-root.atq-has-top-progress .atq-close{ right:12px; top: calc(env(safe-area-inset-top) + 10px); }
  .atq-root.atq-has-top-progress .atq-logo{ left:12px; top: calc(env(safe-area-inset-top) + 10px); }

  .atq-footer.atq-footer--top-center{ padding-left: calc(12px + 104px); padding-right: calc(12px + 64px); }
  .atq-footer.atq-footer--top-center .atq-footer-inner{ width: min(980px, calc(100vw - 24px - 104px - 64px)); }

  /* Avoid double scroll on mobile: let .atq-fullscreen handle scrolling */
  .atq-card{ padding:16px; max-height:none; overflow:visible; }
  .atq-title{ font-size:22px; }
  .atq-image-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
  .atq-image{ aspect-ratio:1/1; }
  .atq-field-short{ max-width:60%; min-width:140px; }
  .atq-footer{ right:12px; bottom:12px; }
  .atq-footer-inner{ width:200px; }
}

/* ── Estimation graph: tailles responsives ────────────────────────────────── */
@media (max-width: 520px){
  /* Reduced vertical spacing on mobile between bar and card */
  .atq-est-axis-wrap{ padding: 80px 0 40px; }
  .atq-est-screen-wrap{ margin-top: 2px; }
  .atq-est-graph{ margin-top: 12px; }
}




/* v0.2.4 - screen message + collapsible details */
.atq-screen-msg{ margin-top:14px; font-size:18px; line-height:1.55; max-width:860px; }
.atq-est-details{ margin-top:18px; max-width:860px; }
.atq-est-summary{ cursor:pointer; color:#222; font-weight:600; margin:8px 0; }
.atq-est-details[open] .atq-est-summary{ margin-bottom:14px; }
.atq-est-details-body{ padding-top:4px; }

/* =========================================
   v0.4.3 - iOS Safari fix
   On iOS, global/theme :active styles can turn button text white on gray.
   We lock readable colors for choice buttons and image tiles.
   ========================================= */

.atq-choice,
.atq-image-tile{
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color: transparent;
  color: var(--atq-text);
  -webkit-text-fill-color: var(--atq-text);
  text-decoration: none;
}

.atq-choice:active,
.atq-choice:focus,
.atq-choice:focus-visible,
.atq-image-tile:active,
.atq-image-tile:focus,
.atq-image-tile:focus-visible{
  color: var(--atq-text) !important;
  -webkit-text-fill-color: var(--atq-text) !important;
  background: #fff !important;
  text-decoration: none !important;
}

.atq-image-caption{
  color: var(--atq-text);
  -webkit-text-fill-color: var(--atq-text);
}

.atq-image-tile:active .atq-image-caption,
.atq-image-tile:focus .atq-image-caption,
.atq-image-tile:focus-visible .atq-image-caption{
  color: var(--atq-text) !important;
  -webkit-text-fill-color: var(--atq-text) !important;
}

.atq-choice.is-selected,
.atq-image-tile.is-selected{
  color: var(--atq-text) !important;
  -webkit-text-fill-color: var(--atq-text) !important;
}

/* Remove iOS tap/focus highlight artifacts ("brown" ghost state)
   We keep selected styling intact via .is-selected rules above. */
.atq-fullscreen, .atq-fullscreen *{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
.atq-choice,
.atq-choice-btn,
.atq-btn,
button,
input[type="button"],
input[type="submit"]{ -webkit-appearance:none; appearance:none; }
.atq-choice:focus,
.atq-choice:active,
.atq-choice-btn:focus,
.atq-choice-btn:active,
.atq-btn:focus,
.atq-btn:active{
  outline:none !important;
  box-shadow:none !important;
}
.atq-choice:focus:not(.is-selected),
.atq-choice:active:not(.is-selected),
.atq-choice-btn:focus:not(.is-selected),
.atq-choice-btn:active:not(.is-selected){
  background:#fff !important;
  border-color:rgba(0,0,0,.12) !important;
}