/* QPX-04 — INSIGHT + REVIEW V4 : mise en scène. Jetons de l'APP uniquement (qpx/app/qevyo-app.css) : ivoire, vert
   profond, or, relief, Signal ; aucune nouvelle DA. Le bloc Intelligence V4 et les fragments REVIEW gardent les styles
   officiels de l'APP (qpx/app/qevyo-app-v4.css) ; QPX amplifie l'espace, la lumière et le rythme, jamais les données.
   Insight (<html data-qpx-i-…>) : signal → facts → deduction → why → recommendation → done. Sans JavaScript ou sous
   reduced-motion : tout est visible dans son état final, rien ne dépend d'une animation. */

/* ===============================================================================================================
   QPX_INSIGHT — « QEVYO a détecté quelque chose », ajouté à TODAY après son en-tête (état de session seulement). */
html[data-qpx-js]:not([data-qpx-i-signal]) .qpx-insight{display:none}
.qpx-insight{position:relative;display:grid;gap:var(--q-space-3);scroll-margin-block-start:96px;outline:none}
.qpx-insight__signal{position:relative;display:block;block-size:2px;border-radius:2px;background:linear-gradient(90deg,transparent 0%,var(--q-gold-ink) 35%,var(--q-gold) 100%);transform-origin:left center}
.qpx-insight__pulse{position:absolute;inset-block-start:50%;inset-inline-end:0;inline-size:8px;block-size:8px;margin-block-start:-4px;border-radius:50%;background:var(--q-gold);box-shadow:0 0 0 4px color-mix(in oklab,var(--q-gold) 25%,transparent)}
.qpx-insight__card{position:relative;padding:var(--q-space-5) var(--q-space-5) var(--q-space-4);border:1px solid color-mix(in oklab,var(--q-gold) 55%,transparent);border-radius:var(--q-radius-card);background:var(--q-card);box-shadow:0 0 0 6px color-mix(in oklab,var(--q-gold) 10%,transparent),0 24px 48px -24px rgb(0 64 59 / 30%)}
.qpx-insight .q-v4{gap:var(--q-space-2);font-size:var(--q-body);line-height:1.5;border-inline-start-color:var(--q-gold-ink)}
.qpx-insight .q-v4__facts{font-size:var(--q-body-small)}
.qpx-insight .q-v4__lead strong{display:block;font:var(--q-weight-medium) clamp(1.375rem,1.15rem + .9vw,1.875rem)/1.2 var(--q-font-display);letter-spacing:-.01em;color:var(--q-title-ink)}
/* L'action produit de l'APP (un lien dans l'APP, un bouton ici : même libellé, même style). */
.qpx-insight button.q-v4__action{padding:0;border:0;background:none;font-family:inherit;font-size:inherit;line-height:inherit;cursor:pointer}
.qpx-insight button.q-v4__action:focus-visible,.qpx-insight .q-v4__sources summary:focus-visible{outline:3px solid var(--q-focus);outline-offset:2px}
.qpx-insight .q-v4__sources summary{min-block-size:var(--q-tap);padding-block:var(--q-space-2);box-sizing:border-box}
/* La navigation de l'expérience publique, distincte de l'action produit : hors du bloc de l'APP. */
.qpx-insight__next{display:flex;justify-content:flex-end;margin:0}
/* Bureau : sous « Ma situation », à côté des priorités (le point d'attention de l'APP est à côté des KPI). KPI, agenda
   et priorités gardent leur place ; seule la case vide sous les KPI reçoit l'insight. */
@media (min-width:1024px){
 html[data-qpx-insight] .qpx-today .q-t-cockpit{grid-template-areas:"head head" "kpi agenda" "insight prio"}
 html[data-qpx-insight] .qpx-today .q-t-kpis{grid-area:kpi}
 .qpx-today .qpx-insight{grid-area:insight;align-self:start}
}
@media (max-width:767px){
 .qpx-insight__card{padding:var(--q-space-4)}
 .qpx-insight__next .q-button{inline-size:100%}
}

/* ===============================================================================================================
   QPX_REVIEW — le point hebdo de l'APP, mis en scène : FAITS → ATTENDU → ÉCART → CAUSE / ÉTAPE → APPRENTISSAGE →
   PROCHAINE ACTION, puis l'année (CA projeté, CA encaissé). Hors de cet état, la section n'existe pas à l'écran. */
html:not([data-qpx-stage=review]) .qpx-review{display:none}
/* La clairière de TODAY (mêmes valeurs que qpx.css pour today / prep). */
html[data-qpx-stage=review] .qpx-sky::after{opacity:1}
html[data-qpx-stage=review] .qpx-sky__light{opacity:.45}
html[data-qpx-stage=review] .qpx-env__mist{opacity:.8}
html[data-qpx-stage=review] .qpx-env__land{filter:sepia(.25) hue-rotate(78deg) saturate(1.45) brightness(.98)}
html[data-qpx-stage=review] .qpx-env{opacity:.9;translate:0 8%}
html[data-qpx-stage=review] .qpx-signal{opacity:.55}
html[data-qpx-stage=review] :is(.qpx-signal__line,.qpx-signal__glow){stroke:var(--q-gold-ink)}
html[data-qpx-stage=review] .qpx-mark--ready .qpx-mark__dot{fill:var(--q-state-reached-mark)}
html[data-qpx-stage=review] .qpx-mark--prepare .qpx-mark__dot{fill:var(--q-gold-ink)}
html[data-qpx-stage=review] .qpx-mark--none .qpx-mark__dot{fill:var(--q-border-strong)}
html[data-qpx-stage=review] .qpx-dawn__glow{opacity:0;scale:4}

.qpx-review{position:relative}
.qpx-review__page{align-items:start;padding-block-end:calc(var(--q-space-8) + 72px)}
.qpx-review .q-space-head::after{display:none}
.qpx-review .q-space-lead{background:none}
.qpx-review .q-panel{box-shadow:0 1px 2px rgb(10 36 29 / 5%),0 24px 48px -24px rgb(0 64 59 / 30%)}

.qpx-chain__list{position:relative;display:grid;gap:var(--q-space-4);margin:0;padding:0;list-style:none;counter-reset:qpx-chain}
/* Le Signal : un seul fil d'or relie les six étapes, du fait à l'action. */
.qpx-chain__list::before{content:"";position:absolute;inset-block:16px;inset-inline-start:15px;inline-size:2px;border-radius:2px;background:linear-gradient(var(--q-gold-ink),color-mix(in oklab,var(--q-gold-ink) 30%,transparent))}
.qpx-chain__step{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--q-space-2) var(--q-space-3);counter-increment:qpx-chain}
.qpx-chain__step::before{content:counter(qpx-chain);grid-row:1;display:grid;place-items:center;inline-size:32px;block-size:32px;box-sizing:border-box;border:2px solid var(--q-gold-ink);border-radius:50%;background:var(--q-card);color:var(--q-gold-ink);font:var(--q-weight-strong) var(--q-caption)/1 var(--q-font-body);font-variant-numeric:lining-nums}
.qpx-chain__k{grid-column:2;align-self:center;margin:0;font:var(--q-weight-strong) var(--q-label)/1.4 var(--q-font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--q-brand)}
.qpx-chain__body{grid-column:2;display:grid;gap:var(--q-space-2);min-inline-size:0;padding:var(--q-space-4);border:1px solid var(--q-card-line);border-radius:var(--q-radius-card);background:var(--q-card);box-shadow:var(--q-shadow-card)}
.qpx-chain__step[data-qpx-chain=ecart] .qpx-chain__body,.qpx-chain__step[data-qpx-chain=action] .qpx-chain__body{border-color:color-mix(in oklab,var(--q-gold) 55%,transparent);box-shadow:inset 3px 0 0 var(--q-gold-ink),var(--q-shadow-card)}
.qpx-chain__figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--q-space-2)}
.qpx-chain__figures li{display:grid;align-content:start;gap:2px;min-inline-size:0;padding:var(--q-space-2) var(--q-space-3);border-radius:var(--q-radius-small);background:var(--q-surface-mist)}
.qpx-chain__label{font:var(--q-weight-medium) var(--q-caption)/1.25 var(--q-font-body);color:var(--q-text-secondary)}
.qpx-chain__figures strong{font:var(--q-weight-strong) 1.25rem/1.15 var(--q-font-body);letter-spacing:-.01em;white-space:nowrap}
.qpx-chain__figures small{font-size:var(--q-caption);line-height:1.3;color:var(--q-text-secondary)}
.qpx-chain__lead{font:var(--q-weight-medium) var(--q-quote)/1.2 var(--q-font-display);font-variant-numeric:lining-nums;color:var(--q-title-ink)}
.qpx-chain [data-review-method]{display:grid;gap:var(--q-space-2)}
.qpx-chain [data-review-method] .q-c-caption{font:var(--q-weight-strong) var(--q-body)/1.45 var(--q-font-body);color:var(--q-text)}
.qpx-chain [data-review-method] ol{display:grid;gap:var(--q-space-1);padding-inline-start:1.4em;list-style:decimal}
.qpx-chain [data-review-method] li::marker{color:var(--q-gold-ink);font-weight:var(--q-weight-strong)}
.qpx-chain__ask{padding-inline-start:var(--q-space-3);border-inline-start:2px solid var(--q-gold);color:var(--q-text-secondary);font-size:var(--q-body-small)}
.qpx-chain__ask span,.qpx-chain__eyebrow{display:block;font:var(--q-weight-strong) var(--q-label)/1.4 var(--q-font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--q-gold-ink)}
.qpx-chain__learned{display:grid;gap:var(--q-space-2)}
.qpx-chain__learned li{padding-inline-start:var(--q-space-3);border-inline-start:2px solid var(--q-hairline);line-height:1.45}
/* L'apprentissage que l'insight vient de citer : le même, relié par l'or. */
.qpx-chain__learned li[data-qpx-from-insight]{border-inline-start-color:var(--q-gold-ink);font-weight:var(--q-weight-medium)}
.qpx-chain__due{display:inline-block;margin-inline-start:var(--q-space-1);padding:2px var(--q-space-2);border-radius:var(--q-radius-pill);background:var(--q-tint-sand);color:var(--q-gold-ink);font:var(--q-weight-strong) var(--q-caption)/1.4 var(--q-font-body)}
.qpx-review__year{display:grid;gap:var(--q-space-2);min-inline-size:0}
@media (max-width:479px){
 .qpx-chain__figures{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
 /* L'histoire de la semaine à gauche, l'année à côté. */
 .qpx-review__page{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--q-space-6)}
 .qpx-review__page>*{grid-column:1 / -1}
 .qpx-review__page>.qpx-chain{grid-column:1}
 .qpx-review__page>.qpx-review__year{grid-column:2;position:sticky;inset-block-start:96px}
 .qpx-review__year .q-rv-trajectory{grid-template-columns:minmax(0,1fr)}
}

/* ===============================================================================================================
   Motion = narration. Sous no-preference uniquement ; reduced-motion : états finaux, sans transition. */
@media (prefers-reduced-motion:no-preference){
 .qpx-insight [data-v4-part],.qpx-insight__next{transition:opacity .45s var(--q-ease),translate .45s var(--q-ease),visibility 0s}
 html[data-qpx-js]:not([data-qpx-i-facts]) .qpx-insight [data-v4-part=facts],
 html[data-qpx-js]:not([data-qpx-i-deduction]) .qpx-insight [data-v4-part=deduction],
 html[data-qpx-js]:not([data-qpx-i-why]) .qpx-insight [data-v4-part=why],
 html[data-qpx-js]:not([data-qpx-i-recommendation]) .qpx-insight [data-v4-part=recommendation],
 html[data-qpx-js]:not([data-qpx-i-done]) .qpx-insight :is([data-v4-part=action],[data-v4-part=sources]),
 html[data-qpx-js]:not([data-qpx-i-done]) .qpx-insight__next{opacity:0;visibility:hidden;translate:0 6px}
 html[data-qpx-i-signal] .qpx-insight__card{animation:qpx-insight-in .6s var(--q-ease) backwards}
 html[data-qpx-i-signal] .qpx-insight__signal{animation:qpx-insight-draw .6s var(--q-ease-inout) backwards}
 html[data-qpx-i-signal] .qpx-insight__pulse{animation:qpx-insight-run .6s var(--q-ease-inout) backwards}
 html[data-qpx-stage=review] :is(.qpx-review .q-rv-glance,.qpx-chain__step,.qpx-review__year){animation:qpx-insight-in .55s var(--q-ease) backwards}
 html[data-qpx-stage=review] .qpx-chain__step:nth-child(1){animation-delay:.15s}
 html[data-qpx-stage=review] .qpx-chain__step:nth-child(2){animation-delay:.3s}
 html[data-qpx-stage=review] .qpx-chain__step:nth-child(3){animation-delay:.45s}
 html[data-qpx-stage=review] .qpx-chain__step:nth-child(4){animation-delay:.6s}
 html[data-qpx-stage=review] .qpx-chain__step:nth-child(5){animation-delay:.75s}
 html[data-qpx-stage=review] .qpx-chain__step:nth-child(6){animation-delay:.9s}
 html[data-qpx-stage=review] .qpx-review__year{animation-delay:.3s}
 @keyframes qpx-insight-in{from{opacity:0;translate:0 10px}}
 @keyframes qpx-insight-draw{from{transform:scaleX(0)}}
 @keyframes qpx-insight-run{from{inset-inline-end:100%;opacity:0}}
}
@media (prefers-reduced-motion:reduce){
 .qpx-insight *,.qpx-review *{transition:none!important;animation:none!important}
}