/* =========================================================
   Qote — three readable variants (C / D / E)
   Loaded AFTER shared-condensed.css. Adds audience-forward
   primitives so every target's message stays VISIBLE and FAST
   to read — no message hidden behind a tab, chip, or accordion.
   ========================================================= */

/* =========================================================
   DYNAMIC HERO QUOTE — "live ABEX calibration" on the report
   A slow scan sweep + counted-up totals make the top quote
   feel like it is computing in real time. Purely additive:
   if JS never runs, the report still reads as a finished doc.
   ========================================================= */
.renov-doc { position: relative; }
.renov-doc__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 64px; z-index: 4;
  pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(28, 101, 57,0.10) 48%, rgba(28, 101, 57,0.55) 50%, rgba(28, 101, 57,0.10) 52%, transparent);
}
.renov-doc.is-scanning .renov-doc__scan {
  animation: qc-scan 2.4s cubic-bezier(.5,0,.5,1) forwards;
}
@keyframes qc-scan {
  0%   { opacity: 0; transform: translateY(-64px); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(560px); }
}
/* the "calibrating" pill on the ABEX ref blinks while computing */
.renov-doc__live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--green-mid);
}
.renov-doc__live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green-mid);
  animation: qc-livedot 1.4s infinite ease-in-out;
}
@keyframes qc-livedot { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .renov-doc.is-scanning .renov-doc__scan { animation: none; opacity: 0; }
  .renov-doc__live::before { animation: none; }
}

/* =========================================================
   CONTRACTOR SET — "Devisez du bureau. Gagnez sur WhatsApp."
   Brings the build-side audience to life inside Direction C:
   truck animation + editable rate card + material take-off
   on the left, a dynamic WhatsApp phone on the right.
   ========================================================= */
.qcon-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 52px; align-items: start;
  margin-top: 36px;
}
.qcon-feats { display: flex; flex-direction: column; gap: 0; }
.qcon-feat {
  display: grid; grid-template-columns: 40px 1fr; gap: 18px; align-items: start;
  padding: 26px 0; border-top: 1px solid var(--rule);
}
.qcon-feat:first-child { border-top: none; padding-top: 0; }
.qcon-feat__n {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--green-dark); color: var(--green-soft);
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 13px;
}
.qc-page .qcon-feat__t {
  font-family: "Playfair Display", serif; font-weight: 700; font-size: 21px;
  letter-spacing: -0.01em; line-height: 1.12; color: var(--green-dark); margin: 0 0 6px;
}
.qc-page .qcon-feat__p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 46ch; }
.qcon-feat__p em { font-style: normal; color: var(--green-mid); font-weight: 600; }

/* phone column */
.qcon-phone { display: flex; flex-direction: column; align-items: center; gap: 16px; position: sticky; top: 96px; }
.qcon-phone__note {
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
}
.qcon-phone__note .qw-mono {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green-mid);
}
.qcon-phone__note span:last-child { font-size: 13px; color: var(--text-muted); }

/* the "you decide" band under the features */
.qcon-band {
  margin-top: 34px; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
  border: 1px solid var(--green-mid); background: var(--green-soft-bg, rgba(28, 101, 57,0.07));
  padding: 22px 26px;
}
.qcon-band__mark {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green-mid); white-space: nowrap;
}
.qc-page .qcon-band p { font-size: 14.5px; line-height: 1.55; color: var(--text); margin: 0; }
.qcon-band p strong { color: var(--green-dark); font-weight: 600; }

/* contractor plan chips */
.qcon-plans {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px;
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.qcon-plans span { border: 1px solid var(--rule); padding: 8px 13px; background: var(--cream); }
.qcon-plans span b { color: var(--green-dark); font-weight: 600; }

@media (max-width: 960px) {
  .qcon-grid { grid-template-columns: 1fr; gap: 36px; }
  .qcon-phone { position: static; order: -1; }
  .qcon-band { grid-template-columns: 1fr; gap: 10px; }
}

/* shared: a section-level call-to-action row */
.qv-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rule);
}
.qv-cta__hint {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-right: auto;
}
.qv-cta__hint b { color: var(--green-mid); font-weight: 600; }
@media (max-width: 620px) {
  .qv-cta { flex-direction: column; align-items: stretch; }
  .qv-cta__hint { margin-right: 0; }
  .qv-cta .qw-btn { justify-content: center; }
}

/* shared: a small section intro lede under the .qc-head */
.qv-lede {
  font-size: 16px; line-height: 1.6; color: var(--text-muted);
  max-width: 620px; margin: -8px 0 34px;
}
.qv-lede em { font-style: normal; color: var(--green-mid); font-weight: 600; }

/* reusable monogram tile (audience initial) */
.qv-mono {
  width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--green-dark); color: var(--green-soft);
  font-family: "Playfair Display", serif; font-weight: 900; font-size: 22px; line-height: 1;
  transition: background .25s ease, color .25s ease;
}

/* =========================================================
   DIRECTION C · "Le tableau clair"
   All six audiences on one board — every message visible.
   ========================================================= */
.qcc-board {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.qcc-card {
  background: var(--cream); padding: 26px 26px 22px;
  display: flex; flex-direction: column; gap: 13px;
  position: relative; isolation: isolate;
  transition: background .25s ease, transform .6s cubic-bezier(.16,.7,.2,1);
}
/* transform-only staggered reveal: cards are visible at rest (opacity 1),
   the board's .is-visible just settles them up in sequence */
.qcc-board .qcc-card { transform: translateY(18px); }
.qcc-board.is-visible .qcc-card { transform: translateY(0); }
.qcc-board.is-visible .qcc-card:nth-child(1) { transition-delay: 0s; }
.qcc-board.is-visible .qcc-card:nth-child(2) { transition-delay: .07s; }
.qcc-board.is-visible .qcc-card:nth-child(3) { transition-delay: .14s; }
.qcc-board.is-visible .qcc-card:nth-child(4) { transition-delay: .21s; }
.qcc-board.is-visible .qcc-card:nth-child(5) { transition-delay: .28s; }
.qcc-board.is-visible .qcc-card:nth-child(6) { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
  .qcc-board .qcc-card { transform: none !important; }
}
/* top accent that grows on hover */
.qcc-card::before {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0;
  background: var(--green-mid); transition: width .35s cubic-bezier(.16,.7,.2,1);
}
.qcc-card:hover { background: var(--cream-warm); }
.qcc-card:hover::before { width: 100%; }
.qcc-card:hover .qv-mono { background: var(--green-mid); color: #fff; }
.qcc-card__top { display: flex; align-items: center; justify-content: space-between; }
.qcc-card__num {
  font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--green-mid);
}
.qc-page .qcc-card__t {
  font-family: "Playfair Display", serif; font-weight: 800; font-size: 22px;
  letter-spacing: -0.015em; line-height: 1.08; color: var(--green-dark); margin: 0;
}
.qc-page .qcc-card__p {
  font-size: 14.5px; line-height: 1.55; color: var(--text); margin: 0; max-width: 34ch;
}
.qcc-card__tag {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule-soft);
  display: flex; align-items: center; gap: 8px;
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
}
.qcc-card__tag b { color: var(--green-mid); font-weight: 600; }

/* C hero — keep report on the right but show a "scope" caption strip */
.qcc-scope {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.qcc-scope span {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  border: 1px solid var(--rule); padding: 6px 11px; background: var(--cream-warm);
}
.qcc-scope span b { color: var(--green-dark); font-weight: 600; }

@media (max-width: 900px) {
  .qcc-board { grid-template-columns: 1fr; }
}

/* ---- audience accordion: compact 2-column grid, advantage rolls open ---- */
.qcc-acc {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
.qcc-acc__item { background: var(--cream); display: flex; flex-direction: column; }
.qcc-acc__head {
  display: grid; grid-template-columns: 38px 1fr auto 11px; gap: 14px; align-items: center;
  width: 100%; background: none; border: none; cursor: pointer; font: inherit; color: inherit;
  text-align: left; padding: 13px 18px; transition: background .2s ease;
}
.qcc-acc__item:hover .qcc-acc__head,
.qcc-acc__item.is-open .qcc-acc__head { background: var(--cream-warm); }
.qcc-acc .qv-mono { width: 38px; height: 38px; font-size: 18px; }
.qcc-acc__item.is-open .qv-mono,
.qcc-acc__item:hover .qv-mono { background: var(--green-mid); color: #fff; }
.qc-page .qcc-acc__t {
  font-family: "Playfair Display", serif; font-weight: 800; font-size: 19px;
  letter-spacing: -0.015em; line-height: 1.08; color: var(--green-dark); margin: 0;
}
.qcc-acc__num {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--green-mid);
}
.qcc-acc__chev {
  width: 8px; height: 8px; border-right: 1.6px solid var(--green-mid);
  border-bottom: 1.6px solid var(--green-mid); transform: rotate(-45deg);
  transition: transform .3s ease; justify-self: end; margin-top: -3px;
}
.qcc-acc__item.is-open .qcc-acc__chev { transform: rotate(45deg); margin-top: 3px; }
/* max-height + opacity animation — smoother & more compatible than the
   grid-template-rows trick, which janks in Safari/Firefox. */
.qcc-acc__panel { max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .34s cubic-bezier(.16,.7,.2,1), opacity .26s ease; }
.qcc-acc__item.is-open .qcc-acc__panel { max-height: 260px; opacity: 1; }
.qcc-acc__panelInner { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .qcc-acc__panel { transition: none; }
}
.qc-page .qcc-acc__p {
  margin: 0; padding: 0 18px 16px 70px; max-width: 46ch;
  font-size: 14.5px; line-height: 1.5; color: var(--text);
}
.qcc-acc__p em { font-style: normal; color: var(--green-mid); font-weight: 600; }
@media (max-width: 760px) {
  .qcc-acc { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .qcc-acc__head { grid-template-columns: 34px 1fr auto 11px; gap: 11px; }
  .qcc-acc__p { padding-left: 18px; }
}

/* ---- contractor stage: branded estimator (widget + chat + steps) + 3 surfaces ---- */
.qcon-stage {
  display: grid; grid-template-columns: 1.32fr 0.68fr; gap: 38px; align-items: center;
  margin-top: 34px;
}
.qcon-stage .widget-mock { max-width: 100%; }
.qcon-stageside { display: flex; flex-direction: column; gap: 16px; }
.qcon-stageside__lab {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--green-mid);
}
.qcon-surf { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.qcon-surf__link { display: inline-block; margin-top: 12px; font-family: "IBM Plex Mono", monospace;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--green-mid);
  border-bottom: 1px solid var(--green-mid); padding-bottom: 2px; width: fit-content;
  transition: color .2s ease, border-color .2s ease; }
.qcon-surf__link:hover { color: var(--green-dark); border-color: var(--green-dark); }
.qcon-surf__item {
  background: var(--cream); padding: 13px 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-items: baseline;
  transition: background .2s ease;
}
.qcon-surf__item:hover, .qcon-surf__item.is-on { background: var(--cream-warm); }
.qcon-surf__item .qw-mono {
  grid-column: 1 / -1; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green-mid);
}
.qc-page .qcon-surf__item b {
  font-family: "Playfair Display", serif; font-weight: 700; font-size: 16px;
  letter-spacing: -0.01em; color: var(--green-dark);
}
.qcon-surf__item em {
  font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: 11px;
  color: var(--text-muted); justify-self: end; text-align: right;
}
.qcon-surf__item.is-on em { color: var(--green-mid); font-weight: 600; }
@media (max-width: 940px) {
  .qcon-stage { grid-template-columns: 1fr; gap: 28px; }
}
/* widget chat bubbles: never rely on an opacity animation (would strand them
   invisible in paused-animation embeds / DOM-snapshot renders). Opacity stays
   1; reuse the transform-only rise. */
.qcon-stage .widget-mock__bubble { opacity: 1; animation: qw-rise .5s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  .qcon-stage .widget-mock__bubble { animation: none; }
}

/* =========================================================
   DIRECTION D · "Deux mondes"
   A hard split: defend a number  ·  win the job.
   Both columns fully visible, side by side.
   ========================================================= */
.qcd-split {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule); background: var(--rule); gap: 1px;
}
.qcd-col { padding: 40px 42px; display: flex; flex-direction: column; gap: 22px; }
.qcd-col--own { background: var(--cream); }
.qcd-col--con { background: var(--green-dark); color: var(--cream); }
.qcd-col__eyebrow {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--green-mid);
}
.qcd-col--con .qcd-col__eyebrow { color: var(--green-soft); }
.qc-page .qcd-col__h {
  font-family: "Playfair Display", serif; font-weight: 900; font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.02; letter-spacing: -0.02em; color: var(--green-dark); margin: 0;
}
.qcd-col--con .qcd-col__h { color: var(--cream); }
.qcd-col__h em { font-style: normal; color: var(--green-mid); }
.qcd-col--con .qcd-col__h em { color: var(--green-soft); }
.qcd-col__sub { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin: -8px 0 0; max-width: 42ch; }
.qcd-col--con .qcd-col__sub { color: var(--green-soft); }

/* audience rows inside a column — always visible */
.qcd-rows { display: flex; flex-direction: column; }
.qcd-row {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
  padding: 16px 0; border-top: 1px solid var(--rule);
}
.qcd-col--con .qcd-row { border-top-color: rgba(184,212,200,0.22); }
.qcd-row__mono {
  width: 40px; height: 40px; display: grid; place-items: center;
  font-family: "Playfair Display", serif; font-weight: 900; font-size: 18px;
  background: var(--cream-warm); color: var(--green-dark); border: 1px solid var(--rule);
}
.qcd-col--con .qcd-row__mono { background: var(--green-deep); color: var(--green-soft); border-color: rgba(184,212,200,0.25); }
.qc-page .qcd-row__t {
  font-family: "Playfair Display", serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
  color: var(--green-dark); margin: 0 0 3px; line-height: 1.12;
}
.qcd-col--con .qcd-row__t { color: var(--cream); }
.qc-page .qcd-row__p { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.qcd-col--con .qcd-row__p { color: rgba(220,232,224,0.82); }

/* the small visual that anchors each column */
.qcd-visual { display: flex; justify-content: center; }
.qcd-col--con .renov-doc { filter: none; }
.qcd-plans {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--green-soft);
}
.qcd-plans span { border: 1px solid rgba(184,212,200,0.3); padding: 7px 11px; }
.qcd-plans span b { color: var(--cream); font-weight: 600; }

@media (max-width: 900px) {
  .qcd-split { grid-template-columns: 1fr; }
  .qcd-col { padding: 32px 26px; }
}

/* =========================================================
   DIRECTION E · "Le fil"
   A guided thread: sticky index on the left, each audience a
   full-width ledger row that reveals as you scroll.
   ========================================================= */
.qce-thread { display: grid; grid-template-columns: 196px 1fr; gap: 48px; align-items: start; }
.qce-index { position: sticky; top: 96px; align-self: start; }
.qce-index__lab {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--green-mid); margin-bottom: 16px; display: block;
}
.qce-index__list { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--rule); }
.qce-index__item {
  display: flex; gap: 10px; align-items: baseline; padding: 8px 0 8px 16px;
  margin-left: -1px; border-left: 2px solid transparent;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.04em;
  color: var(--text-muted); cursor: pointer; transition: color .2s ease, border-color .2s ease;
  background: none; text-align: left; width: 100%;
}
.qce-index__item:hover { color: var(--green-dark); }
.qce-index__item.is-active { color: var(--green-dark); border-left-color: var(--green-mid); font-weight: 600; }
.qce-index__item span { color: var(--green-mid); flex: 0 0 auto; }

.qce-rows { display: flex; flex-direction: column; }
.qce-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 26px; align-items: center;
  padding: 30px 0; border-top: 1px solid var(--rule);
}
.qce-row:last-child { border-bottom: 1px solid var(--rule); }
.qce-row__mono {
  width: 64px; height: 64px; display: grid; place-items: center;
  background: var(--green-dark); color: var(--green-soft);
  font-family: "Playfair Display", serif; font-weight: 900; font-size: 30px; line-height: 1;
  transition: background .3s ease, color .3s ease;
}
.qce-row:hover .qce-row__mono { background: var(--green-mid); color: #fff; }
.qce-row__num {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.16em;
  color: var(--green-mid); display: block; margin-bottom: 7px;
}
.qc-page .qce-row__t {
  font-family: "Playfair Display", serif; font-weight: 800; font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.015em; color: var(--green-dark); margin: 0 0 6px; line-height: 1.05;
}
.qc-page .qce-row__p { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin: 0; max-width: 52ch; }
.qce-row__cue {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); text-align: right;
  border-left: 1px solid var(--rule); padding-left: 22px; max-width: 150px; line-height: 1.5;
}
.qce-row__cue b { display: block; color: var(--green-mid); font-weight: 600; font-size: 11px; }

/* scroll reveal for ledger rows — transform-only (opacity stays 1 so a
   paused/unfired observer never strands the row invisible) */
.qce-row { transform: translateY(22px); transition: transform .6s cubic-bezier(.16,.7,.2,1); }
.qce-row.is-visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .qce-row { transform: none !important; }
}

@media (max-width: 980px) {
  .qce-thread { grid-template-columns: 1fr; gap: 24px; }
  .qce-index { position: static; }
  .qce-index__list { flex-direction: row; flex-wrap: wrap; border-left: none; }
  .qce-index__item { border-left: none; border-bottom: 2px solid transparent; padding: 8px 12px; width: auto; }
  .qce-row { grid-template-columns: 52px 1fr; }
  .qce-row__cue { display: none; }
}