/* Copie de qevyo-app fb8ad6d : app/fonts.css (source de vérité, ne pas modifier ici). */
/* Step 3a (LOT B, Alex 26/09/2026): Inter and Cormorant Garamond really loaded, self-hosted (no request
   to a third-party font server, so no visitor IP sent to Google), variable fonts, limited weights. OFL. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/cormorant-garamond-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Copie de qevyo-app fb8ad6d : app/brand-theme.css (source de vérité, ne pas modifier ici). */
/* QEVYO canonical brand foundation. UI fonts use the available local system stack.
   Identity 1A « actuel affiné » (Alex, 28/09/2026): forest / gold / ivory kept. Gold (#C9A45C) stays the
   brand gold on dark surfaces (5.3:1 on forest); on light surfaces every gold mark or text uses
   --q-gold-ink (≥ 4.5:1 on ivory, surface and bg-secondary). Meaningful boundaries (fields, controls,
   chart lines) use --q-border-strong / --q-accent-secondary (≥ 3:1). Numerals are never in Cormorant:
   .q-num (Inter, lining tabular figures) — the serif is for large editorial titles only.
   tests/design-system/identity-1a.test.ts measures these pairs.
   Identity « Lisière » (Alex, 28/09/2026, accentuated version): the same forest / gold, a more luminous
   ivory page, a warm paper surface, brume (sage mist) and grève (warm sand) for editorial and QEVYO
   zones, a warm grey for secondary text, a deeper gold ink, lichen as the secondary green, hairlines
   instead of boxes, and three soft washes. The logo values (forest, gold, ivory, night) are unchanged.
   tests/design-system/lisiere-identity.test.ts measures every text / non-text pair on every surface. */
:root {
 /* Palette QEVYO — recalibration by role (Alex, 29/09/2026: fresher, more distinctive green, sampled from his references
    #04443C / #146C5C / #147C64, luminance adapted for contrast). Components use ROLES, never raw colours:
    brand (CTA, active, selected nav, important controls, identity accents, significant progress) · brand-deep (large
    premium surfaces: the Dossier's cover and L'essentiel, the team objectives) · brand-vivid (sparing energy: small
    progressions, active details, micro-indicators, rules, pictos — never text, never a fill) · brand-soft (sage mass:
    medallions, illustrations, landscapes) · four clearly different surfaces (ivory page, warm paper, cool mist, green
    lichen for QEVYO zones) · gold as a rare signature. KPI / object STATES are their own tokens (--q-state-*), never the
    brand's: « atteint » is not the CTA. Interaction states are derived from the roles (color-mix in oklab), never
    darkened per component. The logo values (forest, gold, ivory, night) are unchanged; forest stays the logo's green.
    tests/design-system/palette-roles.test.ts measures every pair (text ≥ 4.5:1, non-text ≥ 3:1, also at display gamma 1.8).
    « B+ » (Alex, 29/09/2026): deep turned teal (hue ≈ 186, next to brand's 171; as light as the gold text on it allows at
    gamma 1.8), the large deep surfaces stay deep instead of fading into night (--q-deep-wash), and the page-opening titles
    carry brand (--q-title-ink). deep = sophistication, vivid = energy, ivory = breathing, gold = signature. */
 --q-night:#0A241D; --q-forest:#0F3B2E; --q-gold:#C9A45C; --q-ivory:#F4F0E6;
 --q-brand:#0C6650; --q-brand-deep:#00403B; --q-brand-vivid:#1A8F6A; --q-brand-vivid-on-dark:#5CC49A; --q-brand-soft:#A9C4BA; --q-brand-soft-2:#D6E5DD;
 --q-surface-ivory:#F8F7F2; --q-surface-paper:#F7F0E3; --q-surface-mist:#E8EFEE; --q-surface-lichen:#E0EDE5;
 --q-accent-gold:var(--q-gold); --q-text-primary:var(--q-night); --q-title-ink:var(--q-brand);
 --q-brand-deep-end:color-mix(in oklab,var(--q-brand-deep) 65%,var(--q-night)); --q-deep-wash:linear-gradient(162deg,var(--q-brand-deep) 0%,var(--q-brand-deep) 38%,var(--q-brand-deep-end) 100%); --q-border-subtle:#DCE2DD;
 /* Interaction states, derived from the roles (one rule for every component). */
 --q-on-brand:#FFFFFF; --q-brand-hover:color-mix(in oklab,var(--q-brand) 72%,var(--q-brand-deep)); --q-brand-pressed:color-mix(in oklab,var(--q-brand) 45%,var(--q-brand-deep));
 --q-hover-veil:color-mix(in oklab,var(--q-brand) 7%,transparent); --q-pressed-veil:color-mix(in oklab,var(--q-brand) 13%,transparent);
 --q-selected:var(--q-surface-lichen); --q-selected-ink:var(--q-brand-deep);
 --q-disabled-bg:var(--q-surface-mist); --q-disabled-ink:var(--q-text-secondary); --q-disabled-line:var(--q-border);
 /* KPI and object states (semantic, never the brand): atteint / avance (positive), dans le rythme (calm), en retard (warm,
    identifiable without aggression), validation, alerte. -mark: rings, bars, dots (≥ 3:1); ink: words (≥ 4.5:1). */
 --q-state-reached:#356B2A; --q-state-reached-mark:#428B36; --q-state-reached-bg:#E6F0DF;
 --q-state-ahead:var(--q-state-reached); --q-state-ahead-mark:var(--q-state-reached-mark); --q-state-ahead-bg:var(--q-state-reached-bg);
 --q-state-pace:#3F5F57; --q-state-pace-mark:#5F8277; --q-state-pace-bg:var(--q-surface-mist);
 --q-state-late:#94501F; --q-state-late-mark:#B06A2E; --q-state-late-lag:#E6BF97; --q-state-late-bg:#F7EADB;
 --q-state-confirm:var(--q-state-reached); --q-state-confirm-bg:var(--q-state-reached-bg);
 --q-state-alert:#963B34; --q-state-alert-bg:#F8EBE8;
 --q-ring-track:#DCE5E1;
 /* The historical names, now bound to the roles (legacy screens follow without a local colour). */
 --q-bg-primary:var(--q-surface-ivory); --q-bg-secondary:var(--q-surface-mist); --q-surface:#FFFEFB; --q-surface-raised:#FFFFFF;
 --q-border:#C9D3CE; --q-border-strong:#6B7E76; --q-text:var(--q-text-primary); --q-text-secondary:#4A5D57;
 --q-on-dark:var(--q-ivory); --q-on-dark-secondary:#C2D1CA; --q-accent:var(--q-gold); --q-accent-secondary:var(--q-state-pace-mark); --q-gold-ink:#7C5D24;
 --q-sand:var(--q-surface-paper); --q-mist:var(--q-surface-mist); --q-lichen:var(--q-brand); --q-hairline:var(--q-border-subtle);
 --q-wash-dawn:linear-gradient(180deg,var(--q-surface-lichen) 0%,rgb(248 247 242 / 0%) 100%); --q-wash-voice:linear-gradient(160deg,var(--q-surface-lichen) 0%,#EBF3EE 100%);
 --q-wash-page:radial-gradient(120% 420px at 100% 0%,#E6F0EB 0%,rgb(248 247 242 / 0%) 70%);
 /* Premium pass (Alex, 29/09/2026: the references are the target): the warm card of the references (a warm white,
    a fine line, a diffuse shadow), two tinted cards (mist: reading and analysis; lichen: QEVYO's voice — .q-panel--sand keeps its name), the
    medallions, and the editorial type scale (space titles with assurance, card titles in the serif). */
 --q-card:var(--q-surface); --q-card-line:#E4E4DA; --q-tint-sage:var(--q-surface-mist); --q-tint-sand:var(--q-surface-paper); --q-medal-sand:#F0E6D2; --q-medal-sage:var(--q-brand-soft-2); --q-sand-line:#EBDFC6; --q-sage-line:#D3E2D9; --q-on-dark-line:rgb(244 240 230 / 16%); --q-on-dark-track:rgb(244 240 230 / 18%); --q-nav-veil:rgb(255 254 251 / 90%);
 --q-shadow-card:0 1px 2px rgb(30 50 40 / 4%),0 10px 28px -18px rgb(20 60 48 / 22%); --q-radius-card:14px;
 --q-title-space:clamp(2.125rem,1.656rem + 1.99vw,3.25rem); --q-title-card:clamp(1.25rem,1.1rem + .5vw,1.5rem); --q-lead-space:clamp(.9375rem,.86rem + .33vw,1.125rem);
 --q-quote:clamp(1.3125rem,1.12rem + .8vw,1.75rem);
 --q-success:var(--q-state-reached); --q-success-bg:var(--q-state-reached-bg); --q-warning:#78551C; --q-warning-bg:#F5EACF;
 --q-danger:var(--q-state-alert); --q-danger-bg:var(--q-state-alert-bg); --q-info:#365E70; --q-info-bg:#E8EFF1;
 --q-halo-idle:#7E9C8B; --q-halo-listening:var(--q-gold); --q-halo-thinking:#528D83; --q-halo-response:var(--q-gold);
 --q-font-body:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --q-font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
 --q-display:clamp(2.2rem,4vw,3.5rem); --q-h1:clamp(2.125rem,3.2vw,2.75rem); --q-h2:clamp(1.375rem,1.8vw,1.625rem); --q-lead:1.3125rem; --q-h3:1.125rem;
 --q-body:1rem; --q-body-small:.875rem; --q-label:.75rem; --q-caption:.75rem; --q-kpi:clamp(1.5rem,2.6vw,2rem); --q-button:.875rem;
 --q-selected-dark:rgb(201 164 92 / 12%); --q-avatar-glow:rgb(201 164 92 / 14%);
 --q-radius:16px; --q-radius-small:8px; --q-radius-medium:12px; --q-radius-large:24px; --q-shadow:0 1px 2px rgb(10 36 29 / 3%),0 12px 32px -16px rgb(10 36 29 / 16%); --q-shadow-float:0 2px 6px rgb(10 36 29 / 5%),0 18px 40px -18px rgb(10 36 29 / 22%); --q-focus:var(--q-brand); --q-focus-on-dark:var(--q-gold);
 --ink:var(--q-text); --muted:var(--q-text-secondary); --line:var(--q-border); --soft-line:var(--q-bg-secondary);
 --paper:var(--q-surface); --canvas:var(--q-bg-primary); --forest:var(--q-brand); --forest-2:var(--q-success);
 --lime:var(--q-gold); --lime-soft:var(--q-warning-bg); --amber:var(--q-warning); --violet:var(--q-info);
}
body {font-family:var(--q-font-body);color:var(--q-text);background:var(--q-wash-page),var(--q-bg-primary);background-repeat:no-repeat}
:where(button,input,textarea,select){font-family:var(--q-font-body)}
:where(a,button,input,textarea,select):focus-visible{outline:3px solid var(--q-focus);outline-offset:3px}
:where(h1,h2){font-family:var(--q-font-display);font-weight:500;letter-spacing:-.025em;font-variant-numeric:lining-nums}
:where(small){font-size:max(var(--q-caption),.83em)} /* never below 12 px (the browser's « smaller » gave 10–11 px) */
:where(h1){font-size:var(--q-h1)} :where(h2){font-size:var(--q-h2)} :where(h3){font-size:var(--q-h3)}
.qevyo-logo{display:block;width:154px;height:38px;max-width:100%;flex-shrink:0;overflow:hidden;object-fit:contain;object-position:left center}
.qevyo-presence{display:inline-flex;align-items:center;gap:10px;min-width:0;vertical-align:middle;color:var(--q-text-secondary)}
.qevyo-avatar{--avatar-size:36px;display:inline-grid;place-items:center;position:relative;flex:none;width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;padding:2px;border:1px solid var(--q-halo-idle);background:var(--q-night)}
.qevyo-avatar svg{width:100%;height:100%;border-radius:50%;overflow:hidden}
.qevyo-presence-label{font-size:var(--q-caption);line-height:1.4;letter-spacing:0;font-weight:500}
.qevyo-presence.size-medium .qevyo-avatar{--avatar-size:52px}.qevyo-presence.size-large .qevyo-avatar{--avatar-size:80px}
.qevyo-presence[data-avatar-state=listening] .qevyo-avatar{border-color:var(--q-halo-listening)}
.qevyo-presence[data-avatar-state=thinking] .qevyo-avatar{border-color:var(--q-halo-thinking);animation:qevyo-breathe 2.6s ease-in-out infinite}
.qevyo-presence[data-avatar-state=responding] .qevyo-avatar{border-color:var(--q-halo-response);animation:qevyo-breathe 3.2s ease-in-out infinite}
.qevyo-presence[data-avatar-state=confirmed] .qevyo-avatar{border-color:var(--q-success)}
.qevyo-avatar-check{position:absolute;bottom:-2px;right:-3px;border-radius:50%;background:var(--q-success);color:var(--q-on-dark);font:700 11px/18px var(--q-font-body);width:18px;text-align:center}
.qevyo-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes qevyo-breathe{50%{box-shadow:0 0 0 3px var(--q-avatar-glow)}}
@media(prefers-reduced-motion:reduce){.qevyo-presence .qevyo-avatar{animation:none}}
/* Existing modules keep their own layout and interactions; shared surfaces use these roles. */
.home-cockpit.home-cockpit,.review-page.review-page,.profile-page.profile-page{color:var(--q-text);background:var(--q-bg-primary);font-family:var(--q-font-body)}
.profile-page.profile-page{--p-green:var(--q-brand);--p-gold:var(--q-warning);--p-line:var(--q-border)}
:is(.home-cockpit,.review-page,.profile-page) h1{font-family:var(--q-font-display);font-size:var(--q-h1);font-weight:500;font-variant-numeric:lining-nums}
:is(.home-cockpit,.review-page,.profile-page) h2{font-family:var(--q-font-display);font-size:var(--q-h2);font-weight:500;font-variant-numeric:lining-nums}
:is(.home-cockpit,.review-page,.profile-page) h3{font-family:var(--q-font-body)}
:is(.home-cockpit,.review-page,.profile-page) :is(.home-panel,.metric-card,.profile-panel,.rv-card,.ca-card,.pilot-card){background:var(--q-surface);border-color:var(--q-border);border-radius:var(--q-radius);box-shadow:var(--q-shadow)}
:is(.home-cockpit,.review-page,.profile-page) :is(input,select,textarea){background:var(--q-surface);color:var(--q-text);border-color:var(--q-border-strong);border-radius:var(--q-radius-small)}
.home-cockpit .home-header{position:relative;padding-right:210px}.home-header>.qevyo-presence{position:absolute;right:0;top:35px}
.home-cockpit .home-brand a>.qevyo-logo{width:150px;height:47px}.home-cockpit .home-metric-value strong{font-size:var(--q-kpi);font-variant-numeric:tabular-nums}
.home-cockpit .home-button,.profile-page button:not(.secondary):not(.text-button){background:var(--q-brand);color:var(--q-on-dark);border-color:var(--q-brand);font-size:var(--q-button)}
.profile-page .profile-steps button:not(.secondary){background:transparent;color:var(--q-text-secondary);border-color:transparent;font-size:var(--q-label)}
.profile-page .profile-steps button[aria-current]{border-color:var(--q-brand);color:var(--q-brand)}
.profile-page .profile-readout article{background:var(--q-bg-secondary);border-color:var(--q-border)}
.profile-page .profile-readout article:nth-child(3){background:var(--q-brand-deep);color:var(--q-on-dark)}
.profile-page .profile-readout article:nth-child(3) .profile-eyebrow{color:var(--q-gold)}
.profile-page .profile-tendencies span{background:var(--q-bg-secondary);color:var(--q-text-secondary)}
.profile-page .profile-bars meter::-webkit-meter-bar{background:var(--q-bg-secondary)}
.profile-page .disc-D meter::-webkit-meter-optimum-value{background:var(--q-brand)}
.profile-page .disc-I meter::-webkit-meter-optimum-value{background:var(--q-gold)}
.profile-page .disc-S meter::-webkit-meter-optimum-value{background:var(--q-accent-secondary)}
.profile-page .disc-C meter::-webkit-meter-optimum-value{background:var(--q-info)}
.profile-page :is(.profile-muted,.profile-note,.profile-eyebrow){color:var(--q-text-secondary)}
.conversation-app :is(.conversation-panel),.app-shell .sidebar{background:var(--q-night);color:var(--q-on-dark)}
.conversation-app .conversation-topbar{background:var(--q-surface);border-color:var(--q-border)}
.conversation-app .coach-context-nav button.active{color:var(--q-gold);background:var(--q-selected-dark);border-color:var(--q-gold)}
.conversation-app .conversation-history button.active{background:var(--q-selected-dark);color:var(--q-on-dark)}
.conversation-app :is(.conversation-history>span,.conversation-history small,.coach-context-nav>span,.coach-context-nav button small,.conversation-profile small){color:var(--q-on-dark-secondary)}
.conversation-app .conversation-workspace{background:var(--q-bg-primary)}
.conversation-app :is(.conversation-empty h1,.today-header h2){font-family:var(--q-font-display);font-size:var(--q-h1);font-weight:500;font-variant-numeric:lining-nums}
.conversation-app .conversation-empty>.qevyo-presence{margin:0 auto 16px;justify-content:center}
.conversation-app .chat-message{grid-template-columns:38px minmax(0,1fr)}
.conversation-app .chat-message p{font-size:var(--q-body-small);color:var(--q-text);line-height:1.75}
.conversation-app .chat-message.user p{background:var(--q-bg-secondary);border-radius:var(--q-radius)}
.conversation-app .chat-message header strong{font-size:var(--q-label)}
.conversation-app .composer-box{background:var(--q-surface);border-color:var(--q-border-strong);border-radius:var(--q-radius)}
.conversation-app .composer-box textarea{font-size:var(--q-body-small);color:var(--q-text)}
.conversation-app .composer-box button{background:var(--q-brand);color:var(--q-on-dark)}
.conversation-app :is(.starter-prompts button,.suggested-replies button){background:var(--q-surface);border-color:var(--q-border);color:var(--q-brand);font-size:var(--q-label)}
.conversation-app .today-cockpit{background:var(--q-bg-primary)}
.conversation-app :is(.today-entry-card,.today-card,.today-panel){background:var(--q-surface);border-color:var(--q-border);border-radius:var(--q-radius)}
.app-shell .nav-item{color:var(--q-on-dark-secondary)}.app-shell .nav-item.active{color:var(--q-gold);background:var(--q-selected-dark)}
.app-shell .brand{padding:0 0 12px}.app-shell .brand .qevyo-logo{width:180px;height:56px}
.app-shell .topbar{background:var(--q-surface)}
.app-shell .welcome-row h1{font-family:var(--q-font-display);font-size:var(--q-h1);font-weight:500;font-variant-numeric:lining-nums}
.app-shell :is(.prepare-card,.focus-card,.appointments-card,.property-context-card,.brief-card){background:var(--q-surface);border-color:var(--q-border);border-radius:var(--q-radius);box-shadow:var(--q-shadow)}
:is(.home-cockpit,.review-page,.profile-page,.conversation-app,.app-shell) button:disabled{cursor:not-allowed;opacity:.55}
@media(max-width:700px){.home-cockpit .home-header{padding-right:0}.home-header>.qevyo-presence{position:static;margin-top:18px}.qevyo-logo{width:132px;height:42px}.conversation-topbar .qevyo-presence-label{max-width:115px}.conversation-app .chat-message{gap:9px}}

.home-header time{display:block}
.home-cockpit .home-performance-group>h2{font-family:var(--q-font-body);font-size:var(--q-label);font-weight:600}
:is(.home-cockpit,.review-page,.profile-page,.app-shell,.conversation-app) :is(.home-eyebrow,.rv-eyebrow,.profile-eyebrow,.eyebrow){font-family:var(--q-font-body);font-size:var(--q-label);color:var(--q-text-secondary)}
.conversation-app :is(.coach-context-nav button strong,.conversation-history button strong,.new-conversation){font-size:var(--q-body-small)}
.conversation-app :is(.coach-context-nav button small,.conversation-history small,.conversation-profile small,.conversation-history>span,.coach-context-nav>span){font-size:var(--q-caption);line-height:1.5}
.conversation-app .conversation-topbar>div>strong{font-size:var(--q-body-small)}
.conversation-app .conversation-topbar>div>span{font-size:var(--q-caption)}
.conversation-app :is(.today-body,.conversation-center){background:var(--q-bg-primary)}
.conversation-app .today-header{background:var(--q-brand-deep);color:var(--q-on-dark)}
.conversation-app .today-header h1{font-family:var(--q-font-display);font-weight:500;color:var(--q-on-dark);font-variant-numeric:lining-nums}
.conversation-app .today-header button{color:var(--q-on-dark);border-color:var(--q-on-dark-secondary)}
.app-shell .prepare-card{background:var(--q-brand-deep);color:var(--q-on-dark)}
.app-shell .prepare-card :is(.prepare-copy p,.address-flow label,.input-support,.keyboard-hint){color:var(--q-on-dark-secondary)}
.app-shell .prepare-card h2{font-family:var(--q-font-display);font-weight:500;font-variant-numeric:lining-nums}
.conversation-app .today-entry-card{box-shadow:var(--q-shadow)}
:is(.review-page,.app-shell) :is(.rv-button,.primary-button,.secondary-button){border-radius:var(--q-radius-small);font-size:var(--q-button)}
:is(.review-page,.app-shell) :is(input,select,textarea){color:var(--q-text);border-color:var(--q-border-strong);background:var(--q-surface)}
:is(.review-page,.app-shell,.home-cockpit) :is(.metric-state,.availability,.home-preparation,.rv-badge){font-size:var(--q-caption);border-radius:var(--q-radius-small)}
:is(.review-page,.app-shell) :is(.rv-empty,.context-card-empty,.empty-state){background:var(--q-bg-secondary);color:var(--q-text-secondary);border-color:var(--q-border)}
:is(.review-page,.app-shell) :is(.rv-recommendation,.callout,.brief-card){background:var(--q-surface);border-color:var(--q-border)}
@media(max-width:700px){.home-header>.qevyo-presence{display:flex;margin:0 0 16px}.conversation-app .conversation-topbar{gap:10px;padding-inline:14px}.conversation-topbar .qevyo-presence-label{font-size:var(--q-caption)}}

/* « Lisière »: the illustration system — 3 families, one fine stroke, one sage palette, soft washes
   dissolving into the ivory (public/brand/illustrations, hand-authored SVG ≤ 6 KB, CSS backgrounds:
   fetched only where a rule shows them). Rule (Alex): if an illustration serves neither breathing,
   understanding nor QEVYO's identity, it goes. Never behind text, never eating useful phone height. */
.q-illus{display:block;background:no-repeat right bottom / contain;pointer-events:none}
.q-illus--relief{background-image:url(brand/illustrations/relief.svg);aspect-ratio:600 / 240}
.q-illus--lisiere{background-image:url(brand/illustrations/lisiere.svg);aspect-ratio:600 / 160}
.q-illus--seuil{background-image:url(brand/illustrations/seuil.svg);aspect-ratio:160 / 96}

/* Cycle du marché (29/09/2026): SEMANTIC tokens of the qualitative frieze and of the « Lecture QEVYO »,
   aliases of the palette ROLES — retune them here, centrally. The three regime lanes are a category, never a
   measure: warm paper (vendeur) / the card surface (équilibre) / a soft green veil of the brand (acquéreur, light enough for
   the lane labels and the dashed plateau at gamma 1.8), never the brand green itself nor the QEVYO lichen;
   the curve is ink; the dashed open plateau (« phase en cours », « contraint ») is the strong border; the two
   markers stay distinct: acquisition = warm red semantic (state-alert, never brand), aujourd'hui / projet =
   brand; the Lecture keeps its gold rule (QEVYO signature, gold-ink = the only text-safe gold). */
:root{--q-cycle-lane-vendeur:var(--q-surface-paper);--q-cycle-lane-equilibre:var(--q-surface);--q-cycle-lane-acquereur:color-mix(in oklab,var(--q-brand-vivid) 6%,var(--q-surface));--q-cycle-lane-line:var(--q-border-subtle);--q-cycle-lane-label:var(--q-text-secondary);--q-cycle-curve:var(--q-text);--q-cycle-contraint:var(--q-border-strong);--q-cycle-marker-acquisition:var(--q-state-alert);--q-cycle-marker-today:var(--q-brand);--q-cycle-lecture-surface:var(--q-surface);--q-cycle-lecture-line:var(--q-border-subtle);--q-cycle-lecture-rule:var(--q-gold-ink);}

/* Copie de qevyo-app fb8ad6d : app/design-tokens.css (source de vérité, ne pas modifier ici). */
/* Step 3a design tokens (LOT B). They complete app/brand-theme.css (palette, typography) with the
   structure every screen uses. The forest / gold / ivory direction is the base; it is frozen only
   after the 3d mockups and Alex's visual validation. Components use tokens only, never raw colours.
   Breakpoints (CSS variables cannot drive @media): 480px phone, 768px tablet, 1024px laptop, 1280px wide. */
:root{
 --q-space-1:4px;--q-space-2:8px;--q-space-3:12px;--q-space-4:16px;--q-space-5:24px;--q-space-6:32px;--q-space-7:48px;--q-space-8:64px;
 --q-content-max:1180px;--q-reading-max:720px;--q-gutter:clamp(16px,4vw,32px);--q-grid-gap:var(--q-space-5);
 --q-radius-pill:999px;
 --q-z-base:0;--q-z-sticky:10;--q-z-nav:20;--q-z-overlay:40;--q-z-dialog:50;--q-z-toast:60;
 /* « Lisière » motion system (Alex, 28/09/2026): 3 durations within 150–250 ms, 2 easings (enter / change of
    state). Every animation lives in app/components/ui/motion.css, under prefers-reduced-motion:no-preference. */
 --q-duration-fast:150ms;--q-duration:200ms;--q-duration-slow:250ms;--q-ease:cubic-bezier(.2,.8,.2,1);--q-ease-inout:cubic-bezier(.4,0,.2,1);
 --q-weight-regular:400;--q-weight-medium:500;--q-weight-strong:600;
 --q-line-tight:1.2;--q-line:1.5;
 --q-tap:44px;
 --q-overlay:rgb(10 36 29 / 45%);
}
@media (prefers-reduced-motion:reduce){:root{--q-duration-fast:0ms;--q-duration:0ms;--q-duration-slow:0ms}}

/* Copie de qevyo-app fb8ad6d : app/components/ui/ui.css (source de vérité, ne pas modifier ici). */
/* Step 3a/3b primitives. Tokens only (tests/design-system forbids raw colours in this file). */
/* Identity 1A (Alex, 28/09/2026): every numeral reads in Inter with lining tabular figures — never
   Cormorant's old-style digits (« 12 » read « I2 »). KPI numbers carry .q-num. */
.q-num{font-family:var(--q-font-body);font-variant-numeric:lining-nums tabular-nums}
.q-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--q-space-2);min-block-size:var(--q-tap);padding:0 var(--q-space-5);border-radius:var(--q-radius-small);border:1px solid transparent;font:var(--q-weight-strong) var(--q-button)/1 var(--q-font-body);text-decoration:none;cursor:pointer;transition:background-color var(--q-duration) var(--q-ease),border-color var(--q-duration) var(--q-ease)}
.q-button:focus-visible,.q-kpi__action:focus-visible,.q-field__control:focus-visible{outline:3px solid var(--q-focus);outline-offset:2px}
.q-button[disabled]{opacity:.55;cursor:not-allowed}
.q-button--primary{background:var(--q-brand);color:var(--q-on-brand)}
.q-button--primary:hover{background:var(--q-brand-hover)}
.q-button--primary:active{background:var(--q-brand-pressed)}
.q-button:disabled,.q-button[aria-disabled=true]{background:var(--q-disabled-bg);border-color:var(--q-disabled-line);color:var(--q-disabled-ink);cursor:not-allowed}
.q-button--secondary{background:var(--q-surface);color:var(--q-text);border-color:var(--q-border-strong)}
.q-button--quiet{background:transparent;color:var(--q-text)}
.q-button--danger{background:var(--q-danger);color:var(--q-on-dark)}
/* Small is a density, never a smaller target: 44 px high like every control (audit 28/09/2026). */
.q-button--small{min-block-size:var(--q-tap);padding:0 var(--q-space-4)}
/* « Lisière »: fewer boxes — a card is a unit on paper (no rule, no shadow); grouping comes from space. */
.q-card{background:var(--q-surface);border:1px solid transparent;border-radius:var(--q-radius);padding:var(--q-space-5)}
.q-card--raised{background:var(--q-surface-raised)}
.q-card--dark{background:var(--q-brand-deep);color:var(--q-on-dark);border-color:transparent}
.q-card__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--q-space-4);margin-block-end:var(--q-space-4)}
.q-card__eyebrow{margin:0 0 var(--q-space-1);font:var(--q-weight-strong) var(--q-label)/var(--q-line) var(--q-font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--q-text-secondary)}
.q-card--dark .q-card__eyebrow{color:var(--q-on-dark-secondary)}
.q-card__title{margin:0;font:var(--q-weight-strong) var(--q-h3)/var(--q-line-tight) var(--q-font-body)}
.q-badge{display:inline-flex;align-items:center;gap:var(--q-space-1);padding:2px var(--q-space-2);border-radius:var(--q-radius-pill);font:var(--q-weight-medium) var(--q-label)/1.6 var(--q-font-body);background:var(--q-bg-secondary);color:var(--q-text)}
.q-badge--success{background:var(--q-success-bg);color:var(--q-success)}
.q-badge--warning{background:var(--q-warning-bg);color:var(--q-warning)}
.q-badge--danger{background:var(--q-danger-bg);color:var(--q-danger)}
.q-badge--info{background:var(--q-info-bg);color:var(--q-info)}
.q-badge--accent{background:var(--q-selected);color:var(--q-selected-ink)}
.q-source{display:inline-block;font:var(--q-caption)/var(--q-line) var(--q-font-body);color:var(--q-text-secondary)}
.q-source--unavailable,.q-source--absent{font-style:italic}
.q-field{display:grid;gap:var(--q-space-1)}
.q-field__label{font:var(--q-weight-medium) var(--q-body-small)/var(--q-line) var(--q-font-body)}
.q-field__control{min-block-size:var(--q-tap);padding:var(--q-space-2) var(--q-space-3);border:1px solid var(--q-border-strong);border-radius:var(--q-radius-small);background:var(--q-surface-raised);color:var(--q-text);font:var(--q-body)/var(--q-line) var(--q-font-body)}
.q-field__hint{margin:0;font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-field__error{margin:0;font-size:var(--q-caption);color:var(--q-danger)}
.q-field--error .q-field__control{border-color:var(--q-danger)}
.q-state{display:grid;justify-items:start;gap:var(--q-space-2);padding:var(--q-space-5);border-radius:var(--q-radius);border:1px solid var(--q-hairline);background:var(--q-mist);color:var(--q-text-secondary)}
.q-state__title{margin:0;font-weight:var(--q-weight-strong);color:var(--q-text)}
.q-state--error{border-style:solid;border-color:var(--q-danger);background:var(--q-danger-bg)}
.q-state--loading{grid-auto-flow:column;align-items:center;border-style:none}
.q-spinner{inline-size:18px;block-size:18px;border-radius:50%;border:2px solid var(--q-border);border-block-start-color:var(--q-brand);animation:q-spin 800ms linear infinite}
@keyframes q-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.q-spinner{animation:none}}
.q-confirm__backdrop{position:fixed;inset:0;z-index:var(--q-z-dialog);display:grid;place-items:center;padding:var(--q-gutter);background:var(--q-overlay)}
.q-confirm{inline-size:min(100%,440px);display:grid;gap:var(--q-space-4);padding:var(--q-space-6);border-radius:var(--q-radius);background:var(--q-surface-raised);box-shadow:var(--q-shadow)}
.q-confirm__title{margin:0;font:var(--q-weight-strong) var(--q-h3)/var(--q-line-tight) var(--q-font-body)}
.q-confirm__actions{display:flex;justify-content:flex-end;gap:var(--q-space-2)}
/* « Lisière »: the 4 KPI read as ONE grouped panel divided by hairlines (not 4 boxes). */
.q-kpi-row{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-radius:var(--q-radius);background:var(--q-surface);overflow:hidden}
.q-kpi-row>.q-kpi{border-color:transparent;border-radius:0;box-shadow:1px 0 0 var(--q-hairline),0 1px 0 var(--q-hairline)}
.q-kpi{display:grid;gap:var(--q-space-2);align-content:start;padding:var(--q-space-5);border-radius:var(--q-radius);background:var(--q-surface);border:1px solid var(--q-border)}
.q-kpi__label{margin:0;font:var(--q-weight-strong) var(--q-body-small)/var(--q-line) var(--q-font-body);color:var(--q-text-secondary);text-transform:uppercase;letter-spacing:.06em}
.q-kpi p{margin:0}
.q-kpi__objective,.q-kpi__gap{display:flex;justify-content:space-between;gap:var(--q-space-2);font-size:var(--q-body-small)}
.q-kpi__value{font:var(--q-weight-strong) var(--q-kpi)/var(--q-line-tight) var(--q-font-body);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.q-kpi__committed{display:block;font-size:var(--q-body-small);color:var(--q-text-secondary)}
.q-kpi__bar{block-size:6px;border-radius:var(--q-radius-pill);background:var(--q-ring-track);overflow:hidden}
.q-kpi__bar span{display:block;block-size:100%;background:var(--q-brand)}
.q-kpi__bar-unknown,.q-kpi__trend--unknown{font-size:var(--q-caption);color:var(--q-text-secondary);font-style:italic}
.q-kpi__gap--ahead strong{color:var(--q-state-ahead)}
.q-kpi__gap--behind strong{color:var(--q-state-late)}
.q-kpi__gap--unknown strong{color:var(--q-text-secondary);font-weight:var(--q-weight-regular)}
.q-kpi__trend path{stroke:var(--q-accent-secondary)}
.q-kpi__trend-point{fill:var(--q-accent-secondary)}
.q-kpi__trend-last{fill:var(--q-gold-ink)}
.q-kpi__trend-gap{stroke:var(--q-text-secondary)}
.q-kpi__rhythm{font-size:var(--q-body-small);color:var(--q-text-secondary)}
.q-kpi__action{justify-self:start;min-block-size:var(--q-tap);display:inline-flex;align-items:center;font-weight:var(--q-weight-strong);color:var(--q-brand);text-decoration:underline;text-underline-offset:3px}
.q-kpi--setup{align-content:start}
.q-kpi__pending{display:grid;gap:2px;margin:0;padding:var(--q-space-3);border-radius:var(--q-radius-small);background:var(--q-bg-secondary);font-size:var(--q-body-small);color:var(--q-text-secondary)}
.q-kpi__pending strong{color:var(--q-text);font-weight:var(--q-weight-strong)}
.q-kpi__sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.q-kpi-row--short{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:var(--q-space-3);background:none;overflow:visible}
.q-kpi-row--short>.q-kpi{border-color:var(--q-border);border-radius:var(--q-radius);box-shadow:none}
.q-kpi--short{position:relative;gap:var(--q-space-3);padding:var(--q-space-4);transition:border-color var(--q-duration) var(--q-ease),box-shadow var(--q-duration) var(--q-ease)}
.q-kpi--short:hover{border-color:var(--q-border-strong);box-shadow:var(--q-shadow)}
.q-kpi__link{color:inherit;text-decoration:none}
.q-kpi__link::after{content:"";position:absolute;inset:0;border-radius:var(--q-radius)}
.q-kpi__link:focus-visible{outline:none}
.q-kpi--short:has(.q-kpi__link:focus-visible){outline:3px solid var(--q-focus);outline-offset:2px}
.q-kpi__short{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--q-space-2) var(--q-space-3);margin:0}
.q-kpi__short div{display:grid;gap:2px;min-inline-size:0}
.q-kpi__short dt{font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-kpi__short dd{margin:0;font-size:var(--q-body-small);font-variant-numeric:tabular-nums;overflow-wrap:normal}
.q-kpi__short [data-part=actual]{grid-column:1 / -1}
.q-kpi__short .q-kpi__gap{display:grid;text-align:end}
.q-kpi__short [data-part=actual] dd{font:var(--q-weight-strong) var(--q-kpi)/var(--q-line-tight) var(--q-font-body);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.q-voice{display:inline-flex;align-items:center;gap:var(--q-space-2);text-transform:none;letter-spacing:0}
.q-voice .qevyo-avatar{--avatar-size:28px}
/* QEVYO's voice: a warm zone with a short gold-ink mark (not a white box with a full-height rule). */
.q-block--qevyo{position:relative;background:var(--q-wash-voice)}
.q-block--qevyo::before{content:"";position:absolute;inset-block-start:var(--q-space-3);inset-inline-start:var(--q-space-5);inline-size:18px;block-size:2px;border-radius:var(--q-radius-pill);background:var(--q-gold-ink)}

/* W2-6 KPI gauge (kpi-gauge.tsx): réalisé / objectif / écart at a glance, a ring towards the objective. */
.q-gauges{display:grid;gap:var(--q-space-3);grid-template-columns:repeat(2,minmax(0,1fr))}
.q-gauge{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--q-space-3);padding:var(--q-space-4);border-radius:var(--q-radius);background:var(--q-surface);border:1px solid var(--q-border);transition:border-color var(--q-duration) var(--q-ease),box-shadow var(--q-duration) var(--q-ease)}
.q-gauge:hover{border-color:var(--q-border-strong);box-shadow:var(--q-shadow)}
.q-gauge:has(.q-gauge__link:focus-visible){outline:3px solid var(--q-focus);outline-offset:2px}
.q-gauge__visual{position:relative;inline-size:64px;block-size:64px;display:grid;place-items:center}
.q-gauge__ring{position:absolute;inset:0;inline-size:100%;block-size:100%}
.q-gauge__track{stroke:var(--q-bg-secondary)}
.q-gauge__fill{stroke:var(--q-brand);transition:stroke-dasharray var(--q-duration-slow) var(--q-ease)}
.q-gauge__fill--done{stroke:var(--q-state-reached-mark)}
.q-gauge__percent{position:relative;font:var(--q-weight-strong) var(--q-caption)/1 var(--q-font-body);font-variant-numeric:tabular-nums;color:var(--q-text)}
.q-gauge__body{display:grid;gap:2px;min-inline-size:0}
.q-gauge__label{margin:0;font:var(--q-weight-strong) var(--q-label)/var(--q-line) var(--q-font-body);color:var(--q-text-secondary);text-transform:uppercase;letter-spacing:.06em}
.q-gauge__link{color:inherit;text-decoration:none}
.q-gauge__link::after{content:"";position:absolute;inset:0;border-radius:var(--q-radius)}
.q-gauge__link:focus-visible{outline:none}
.q-gauge__figures{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--q-space-1);margin:0}
.q-gauge__figures div{display:contents}
.q-gauge__figures dd{margin:0}
.q-gauge__value{margin:0;font:var(--q-weight-strong) var(--q-kpi)/var(--q-line-tight) var(--q-font-body);color:var(--q-text);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.q-gauge__objective{font-size:var(--q-body-small);color:var(--q-text-secondary);font-variant-numeric:tabular-nums}
.q-gauge__gap{flex-basis:100%;display:flex;gap:var(--q-space-1);font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-gauge__figures .q-gauge__gap{display:flex}
.q-gauge__gap dt{font-size:var(--q-caption)}
.q-gauge__gap--ahead dd{color:var(--q-state-ahead);font-weight:var(--q-weight-strong)}
.q-gauge__gap--behind dd{color:var(--q-danger);font-weight:var(--q-weight-strong)}
.q-gauge__sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.q-gauges--compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--q-space-2)}
.q-gauge--compact{grid-template-columns:minmax(0,1fr);gap:2px;padding:var(--q-space-3) var(--q-space-4)}
.q-gauge--compact .q-gauge__value{font-size:1.35rem}
@media (min-width:768px){.q-gauges,.q-gauges--compact{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:768px) and (max-width:1023px){.q-gauge:not(.q-gauge--compact){grid-template-columns:minmax(0,1fr);justify-items:start}}
.q-gauge__figures dd{white-space:nowrap}
.q-gauge--compact{align-content:start}
@media (max-width:479px){
 .q-gauge:not(.q-gauge--compact){grid-template-columns:minmax(0,1fr);justify-items:start;gap:var(--q-space-2);padding:var(--q-space-3)}
 .q-gauge__visual{inline-size:52px;block-size:52px}
 .q-gauge .q-gauge__value{font-size:1.5rem}
 .q-gauge--compact{padding:var(--q-space-3)}
}

/* TODAY « Ma situation » (kpi-pace.tsx): ring + pace notch, réalisé / objectif / écart, the progress bar
   with the expected-pace marker (the gap between them is hatched when behind, gold when ahead), the
   trajectory badge and the recent weeks' curve. Phone: 2 columns; ≥1024px: 4 across. Tokens only. */
.q-paces{display:grid;gap:var(--q-space-3);grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.q-pace{position:relative;display:grid;gap:var(--q-space-3);align-content:start;padding:var(--q-space-4);border-radius:var(--q-radius);background:var(--q-surface);border:1px solid var(--q-border);box-shadow:var(--q-shadow);transition:border-color var(--q-duration) var(--q-ease),box-shadow var(--q-duration) var(--q-ease)}
.q-pace:hover{border-color:var(--q-border-strong)}
.q-pace:has(.q-pace__link:focus-visible){outline:3px solid var(--q-focus);outline-offset:2px}
.q-pace__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--q-space-1) var(--q-space-2)}
.q-pace__label{margin:0;font:var(--q-weight-strong) var(--q-label)/var(--q-line) var(--q-font-body);color:var(--q-text-secondary);text-transform:uppercase;letter-spacing:.08em}
.q-pace__link{color:inherit;text-decoration:none}
.q-pace__link::after{content:"";position:absolute;inset:0;border-radius:var(--q-radius)}
.q-pace__link:focus-visible{outline:none}
.q-pace__badge{position:relative;display:inline-flex;align-items:center;gap:4px;padding:2px var(--q-space-2);border-radius:var(--q-radius-pill);font:var(--q-weight-strong) var(--q-caption)/1.4 var(--q-font-body);white-space:nowrap;background:var(--q-bg-secondary);color:var(--q-text)}
.q-pace__badge svg{transition:transform var(--q-duration) var(--q-ease)}
.q-pace__badge--atteint{background:var(--q-state-reached-bg);color:var(--q-state-reached);box-shadow:inset 0 0 0 1px var(--q-state-reached-mark)}
.q-pace__badge--avance{background:var(--q-state-ahead-bg);color:var(--q-state-ahead)}
.q-pace__badge--avance svg{transform:rotate(-45deg)}
.q-pace__badge--rythme{background:var(--q-state-pace-bg);color:var(--q-state-pace)}
.q-pace__badge--retard{background:var(--q-state-late-bg);color:var(--q-state-late)}
.q-pace__badge--retard svg{transform:rotate(45deg)}
.q-pace__main{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--q-space-3)}
.q-pace__visual{position:relative;inline-size:72px;block-size:72px;display:grid;place-items:center}
.q-pace__ring{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
.q-pace__track{stroke:var(--q-ring-track)}
.q-pace__fill{stroke:var(--q-brand);transition:stroke-dasharray var(--q-duration-slow) var(--q-ease)}
/* Palette QEVYO: the progress itself is the brand (significant progress); a positive STATE takes the state token (never
   the CTA's), and « en retard » shows the missing stretch up to the expected pace in a light ochre (identifiable, never
   alarming); the words and the icon always say the state too. */
.q-pace__lag{stroke:var(--q-state-late-lag)}
[data-pace-status=avance] :is(.q-pace__fill,.q-pace__bar-fill){stroke:var(--q-state-ahead-mark);background:var(--q-state-ahead-mark)}
[data-pace-status=atteint] :is(.q-pace__fill,.q-pace__bar-fill),.q-pace__fill--done{stroke:var(--q-state-reached-mark);background:var(--q-state-reached-mark)}
.q-pace__notch{stroke:var(--q-gold-ink)}
.q-pace__percent{position:relative;font:var(--q-weight-strong) var(--q-body-small)/1 var(--q-font-body);color:var(--q-text)}
.q-pace__figures{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--q-space-1);row-gap:2px;margin:0;min-inline-size:0}
.q-pace__figures div{display:contents}
.q-pace__figures dd{margin:0;white-space:nowrap}
.q-pace__value{margin:0;font:var(--q-weight-strong) clamp(1.75rem,3vw,2.25rem)/1 var(--q-font-body);color:var(--q-text);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.q-pace__objective{font-size:var(--q-body-small);color:var(--q-text-secondary)}
.q-pace__figures .q-pace__gap{display:flex;flex-basis:100%;gap:var(--q-space-1);font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-pace__gap dt{font-size:var(--q-caption)}
.q-pace__gap--ahead dd{color:var(--q-state-ahead);font-weight:var(--q-weight-strong)}
.q-pace__gap--behind dd{color:var(--q-state-late);font-weight:var(--q-weight-strong)}
.q-pace__rhythm{display:grid;gap:6px}
.q-pace__bar{position:relative;block-size:8px;border-radius:var(--q-radius-pill);background:var(--q-ring-track)}
.q-pace__bar-fill{position:absolute;inset-block:0;inset-inline-start:0;border-radius:var(--q-radius-pill);background:var(--q-brand)}
.q-pace__bar-gap{position:absolute;inset-block:0}
.q-pace__bar-gap--behind{background:repeating-linear-gradient(135deg,var(--q-state-late-bg) 0 3px,var(--q-surface) 3px 6px);box-shadow:inset 0 0 0 1px var(--q-state-late-bg)}
.q-pace__bar-gap--ahead{background:var(--q-state-ahead-mark);opacity:.45}
.q-pace__bar-marker{position:absolute;inset-block:-4px;inline-size:3px;margin-inline-start:-1.5px;border-radius:2px;background:var(--q-gold-ink);box-shadow:0 0 0 2px var(--q-surface)}
.q-pace__basis{margin:0;font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-pace__rhythm-text{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px var(--q-space-2);margin:0;font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-pace__rhythm-text strong{color:var(--q-text);font-weight:var(--q-weight-strong)}
.q-pace__trend{display:flex;align-items:center;gap:var(--q-space-2);font-size:var(--q-caption);color:var(--q-text-secondary);padding-block-start:var(--q-space-2);border-block-start:1px solid var(--q-bg-secondary)}
.q-pace__trend .q-kpi__trend{flex:none}
.q-pace--compact{gap:var(--q-space-2)}
.q-pace--compact .q-pace__value{font-size:1.6rem}
.q-pace__sr,.q-pace__figures div.q-pace__sr{display:block;position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.q-pace__month{display:inline-flex;align-items:center;gap:var(--q-space-2);font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-pace__month-bar{position:relative;display:block;inline-size:72px;block-size:4px;border-radius:var(--q-radius-pill);background:var(--q-bg-secondary);overflow:hidden}
.q-pace__month-bar span{position:absolute;inset-block:0;inset-inline-start:0;background:var(--q-gold-ink)}
@media (max-width:479px){
 .q-pace{padding:var(--q-space-3);gap:var(--q-space-2)}
 .q-pace__main{grid-template-columns:minmax(0,1fr);justify-items:start;gap:var(--q-space-2)}
 .q-pace__visual{inline-size:56px;block-size:56px}
 .q-pace__percent{font-size:var(--q-caption)}
 .q-pace__trend{flex-wrap:wrap;gap:2px var(--q-space-2)}
 .q-pace__trend .q-kpi__trend{inline-size:80px}
}
@media (min-width:1024px){.q-paces{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* The error page (app/error.tsx, audit 28/09/2026): a calm card, the product's voice, two next actions. */
/* QA N2: its own side gutter (the page styles that carry one are not loaded on a 404). */
.q-error-page{display:grid;align-content:start;justify-items:center;padding-block:var(--q-space-7);padding-inline:var(--q-gutter)}
.q-error{display:grid;gap:var(--q-space-3);inline-size:min(100%,560px)}
.q-error__title{margin:0;font:var(--q-weight-medium) var(--q-h2)/var(--q-line-tight) var(--q-font-display);font-variant-numeric:lining-nums;color:var(--q-text)}
.q-error__text{margin:0;color:var(--q-text-secondary);line-height:var(--q-line)}
.q-error__actions{display:flex;flex-wrap:wrap;gap:var(--q-space-2);margin-block-start:var(--q-space-2)}
/* A 44 px tap target for a link or a control that is not a button (QA m20: « Aller au contenu », quiet links). */
.q-tap-target{display:inline-flex;align-items:center;min-block-size:var(--q-tap)}

/* « Lisière » empty moment (empty-moment.tsx): brume, an illustration on the side, a calm Cormorant line, the
   fact in Inter. The pointer is a small gold-ink arrow towards the QEVYO bar (decorative, never a control). */
.q-empty-moment{display:grid;grid-template-columns:minmax(0,1fr) 80px;align-items:end;gap:var(--q-space-4);padding:var(--q-space-4) var(--q-space-5);border-radius:var(--q-radius-large);background:var(--q-wash-dawn),var(--q-mist)}
.q-empty-moment__illus{order:2;inline-size:80px;margin-block-end:calc(-1 * var(--q-space-1))}
.q-empty-moment--lisiere{grid-template-columns:minmax(0,1fr)}
.q-empty-moment--lisiere .q-empty-moment__illus{inline-size:min(100%,280px);justify-self:end;margin-block-end:calc(-1 * var(--q-space-2))}
.q-empty-moment__text{display:grid;gap:var(--q-space-1);min-inline-size:0}
.q-empty-moment__text p{margin:0}
.q-empty-moment__title{font:var(--q-weight-medium) 1.25rem/1.2 var(--q-font-display);font-variant-numeric:lining-nums;color:var(--q-text)}
.q-empty-moment__body{font-size:var(--q-body-small);line-height:var(--q-line);color:var(--q-text-secondary)}
.q-empty-moment__pointer{display:inline-block;inline-size:10px;block-size:10px;margin-inline-start:var(--q-space-2);border-inline-end:2px solid var(--q-gold-ink);border-block-end:2px solid var(--q-gold-ink);rotate:45deg;translate:0 -3px}
@media (min-width:768px){.q-empty-moment{grid-template-columns:minmax(0,1fr) 120px}.q-empty-moment__illus{inline-size:120px}}

/* ─── Premium pass (Alex, 29/09/2026 — « les références sont la cible ») ─────────────────────────────────
   The grammar of the references (review mobile, reference-landscape, DISC, onboarding, ancien Manager):
   - the warm card: warm white, a fine beige line, a diffuse shadow, radius 14 (.q-panel);
   - two tinted cards: sauge for reading (--sage), sable for QEVYO's voice and the calls (--sand);
   - a card title in the serif, led by a medallion (.q-panel__head, .q-medal: 36 px, 40 px on a desktop);
   - the space's opening zone: eyebrow, a title with assurance, the lead, and the mountain vignette on the
     right, dissolving left and down, behind the end of the text and never pushing content (.q-space-head);
   - QEVYO's quote: a serif sentence on a 2 px gold rule (.q-quote);
   - actions: primary forest, secondary outline, contextual links forest + arrow, never underlined. */
.q-panel{position:relative;display:grid;align-content:start;gap:var(--q-space-3);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)}
.q-panel--sage{background:var(--q-tint-sage);border-color:var(--q-sage-line);box-shadow:none}
.q-panel--sand{background:var(--q-surface-lichen);border-color:var(--q-sage-line);box-shadow:none}
.q-panel--sand .q-medal{background:var(--q-card);color:var(--q-brand)}
.q-panel__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--q-space-2) var(--q-space-3);min-inline-size:0}
.q-panel__title{margin:0;font:var(--q-weight-strong) var(--q-title-card)/1.15 var(--q-font-display);letter-spacing:-.012em;font-variant-numeric:lining-nums;color:var(--q-text)}
.q-panel__title small{margin-inline-start:var(--q-space-2);font:var(--q-weight-medium) var(--q-body-small)/1.3 var(--q-font-body);letter-spacing:0;color:var(--q-text-secondary)}
.q-panel__aside{margin-inline-start:auto}
.q-medal{display:grid;place-items:center;flex:none;inline-size:36px;block-size:36px;border-radius:50%;background:var(--q-medal-sand);color:var(--q-gold-ink)}
.q-medal--sage{background:var(--q-medal-sage);color:var(--q-brand)}
.q-medal--square{border-radius:var(--q-radius-medium)}
.q-eyebrow{margin:0;font:var(--q-weight-strong) var(--q-label)/1.4 var(--q-font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--q-lichen)}
.q-space-head{position:relative;isolation:isolate;display:grid;gap:var(--q-space-2);align-content:start;min-inline-size:0;padding-block:var(--q-space-1) var(--q-space-2)}
.q-space-head::after{content:"";position:absolute;z-index:-1;inset-block-start:var(--q-space-3);inset-inline-end:calc(-1 * var(--q-gutter));inline-size:min(64%,620px);block-size:calc(100% - var(--q-space-3));min-block-size:112px;background:url(brand/illustrations/relief.svg) no-repeat right bottom / auto 100%;pointer-events:none}
.q-space-title{margin:0;font:var(--q-weight-strong) var(--q-title-space)/1.04 var(--q-font-display);letter-spacing:-.022em;font-variant-numeric:lining-nums;color:var(--q-title-ink);text-wrap:balance}
/* The lead reads on a bank of mist: an ivory veil behind its lines only (text ≥ 4.5:1 over the vignette). */
.q-space-lead{position:relative;justify-self:start;margin:0;padding-inline-end:var(--q-space-4);background:linear-gradient(90deg,var(--q-bg-primary) calc(100% - var(--q-space-4)),transparent);max-inline-size:min(34ch,72%);font:var(--q-weight-regular) var(--q-lead-space)/1.45 var(--q-font-body);color:var(--q-text-secondary);text-wrap:pretty}
.q-quote{position:relative;margin:0;padding-inline-start:var(--q-space-4);font:var(--q-weight-medium) var(--q-quote)/1.22 var(--q-font-display);letter-spacing:-.01em;font-variant-numeric:lining-nums;color:var(--q-text);text-wrap:pretty}
/* The gold rule of QEVYO's quote, shared by every editorial quote of the product. */
.q-quote::before,.q-rv-gap>h2::before,.q-tc-help[data-kind="request"] .q-tc-help__detail::before,.q-th-headline::before,.q-th-quote::before,.profile-heading>div>p:last-child::before{content:"";position:absolute;inset-block:.15em;inset-inline-start:0;inline-size:2px;border-radius:var(--q-radius-pill);background:var(--q-gold-ink)}
.q-quote .q-num{font:var(--q-weight-strong) .8em/1 var(--q-font-body);font-variant-numeric:lining-nums tabular-nums;letter-spacing:0}
.q-link-arrow{display:inline-flex;align-items:center;gap:var(--q-space-1);min-block-size:var(--q-tap);color:var(--q-brand);font:var(--q-weight-strong) var(--q-body-small)/1.3 var(--q-font-body);text-decoration:none}
.q-link-arrow:hover{text-decoration:underline;text-underline-offset:3px}
@media (min-width:768px){
 .q-space-head{padding-block:var(--q-space-3) var(--q-space-4)}
 .q-space-head::after{inset-block-start:calc(-1 * var(--q-space-6));block-size:calc(100% + var(--q-space-6) + var(--q-space-2));inline-size:min(46%,620px);min-block-size:176px}
 .q-space-lead{max-inline-size:46ch}
}
@media (min-width:1024px){
 .q-panel{padding:var(--q-space-5)}
 .q-medal{inline-size:40px;block-size:40px}
}
@media (forced-colors:active){.q-panel{border-color:CanvasText}.q-space-head::after{display:none}}
/* A Card inside a premium panel: the reference's card head — the voice line, then the title in the serif. */
.q-panel.q-card{padding:var(--q-space-4)}
.q-panel>.q-card__header{margin-block-end:0}
.q-panel .q-card__title{font:var(--q-weight-strong) var(--q-title-card)/1.18 var(--q-font-display);letter-spacing:-.012em;font-variant-numeric:lining-nums}
.q-panel.q-block--qevyo::before{content:none}
.q-panel .q-card__eyebrow{letter-spacing:.1em}
.q-kpi__action{text-decoration:none}
.q-kpi__action::after{content:"→" / "";margin-inline-start:var(--q-space-1)}
.q-kpi__action:hover{text-decoration:underline}
@media (min-width:1024px){.q-panel.q-card{padding:var(--q-space-5)}}

/* Copie de qevyo-app fb8ad6d : app/components/ui/content.css (source de vérité, ne pas modifier ici). */
/* Product content primitives (VS-B, from the validated prototype): the content scope (.q-content resets),
   the page container, captions, lists, folds, chips, legends, « + d'infos » panel, headers. Design System
   tokens only — no raw colour, no font other than --q-font-body / --q-font-display. Mobile first. */

.q-c-page{max-inline-size:var(--q-content-max);margin:0 auto;padding:var(--q-space-4) var(--q-gutter) var(--q-space-8);display:grid;gap:var(--q-space-6);min-inline-size:0;overflow-wrap:anywhere}
.q-c-page>*{min-inline-size:0}
.q-content p,.q-content ul,.q-content ol,.q-content dl,.q-content dd,.q-content figure,.q-content fieldset{margin:0}
.q-content ul,.q-content ol{padding:0;list-style:none}
.q-content h1,.q-content h2,.q-content h3{margin:0}
.q-content h1{font:var(--q-weight-medium) var(--q-h1)/var(--q-line-tight) var(--q-font-display);letter-spacing:-.02em;font-variant-numeric:lining-nums}
:where(.q-content a){color:inherit}
.q-content a:focus-visible,.q-content button:focus-visible,.q-content summary:focus-visible,.q-content input:focus-visible{outline:3px solid var(--q-focus);outline-offset:2px}
.q-c-icon{flex:none}
.q-c-sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.q-c-caption{font-size:var(--q-caption);line-height:var(--q-line);color:var(--q-text-secondary)}
.q-c-lead{font-size:var(--q-body);line-height:var(--q-line);color:var(--q-text-secondary);max-inline-size:var(--q-reading-max)}
.q-c-unknown{font-style:italic;font-weight:var(--q-weight-regular);color:var(--q-text-secondary)}
.q-c-figure{font:var(--q-weight-strong) var(--q-kpi)/var(--q-line-tight) var(--q-font-body);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.q-c-foot{text-align:center}
.q-c-link{display:inline-flex;align-items:center;gap:var(--q-space-1);min-block-size:var(--q-tap);padding:0;border:0;background:none;color:var(--q-brand);font:var(--q-weight-strong) var(--q-body-small)/var(--q-line) var(--q-font-body);text-decoration:none;cursor:pointer}
.q-c-link:hover{text-decoration:underline;text-underline-offset:3px}
.q-c-list{display:grid;gap:var(--q-space-2);padding-inline-start:var(--q-space-4)!important;list-style:disc!important}
ol.q-c-list{list-style:decimal!important}
.q-c-note{font-size:var(--q-body-small);color:var(--q-text-secondary)}

/* Headers */
.q-c-crumbs a{display:inline-flex;align-items:center;gap:var(--q-space-1);min-block-size:var(--q-tap);font-size:var(--q-body-small);color:var(--q-text-secondary);text-decoration:none}
.q-c-crumbs a:hover{color:var(--q-text)}
.q-c-crumbs+*{margin-block-start:calc(-1 * var(--q-space-4))}
.q-c-page-head{display:grid;gap:var(--q-space-2)}
.q-c-hero__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--q-space-2);font:var(--q-weight-strong) var(--q-label)/var(--q-line) var(--q-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--q-text-secondary)}
.q-c-section{display:grid;gap:var(--q-space-4);align-content:start;min-inline-size:0}
.q-c-section__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--q-space-2)}
.q-c-section__title{font:var(--q-weight-medium) var(--q-h2)/var(--q-line-tight) var(--q-font-display);font-variant-numeric:lining-nums}
.q-c-stack{display:grid;gap:var(--q-space-5);align-content:start;min-inline-size:0}
.q-c-columns{display:grid;gap:var(--q-space-5);min-inline-size:0}
.q-c-columns>*{min-inline-size:0}

/* Chips */
.q-c-chips{display:flex;flex-wrap:wrap;gap:var(--q-space-2)}
.q-c-chip{display:inline-flex;align-items:center;min-block-size:var(--q-tap);padding:var(--q-space-1) var(--q-space-3);border:1px solid var(--q-border-strong);border-radius:var(--q-radius-pill);background:var(--q-surface);color:var(--q-text);font:var(--q-weight-medium) var(--q-body-small)/1.3 var(--q-font-body);text-decoration:none;cursor:pointer}
.q-c-chip:hover{border-color:var(--q-brand)}
.q-c-chip[aria-current=true],.q-c-chip[aria-pressed=true]{background:var(--q-brand);border-color:var(--q-brand);color:var(--q-on-dark)}
.q-c-chip--static{cursor:default;min-block-size:0;border-color:var(--q-border);background:var(--q-bg-secondary)}
.q-c-rows{display:grid;gap:var(--q-space-2)}
.q-c-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--q-space-3);min-block-size:var(--q-tap);padding:var(--q-space-3) var(--q-space-4);border:1px solid var(--q-border);border-radius:var(--q-radius-small);background:var(--q-surface);text-decoration:none;transition:border-color var(--q-duration-fast) var(--q-ease),box-shadow var(--q-duration-fast) var(--q-ease)}
a.q-c-row:hover{border-color:var(--q-border-strong);box-shadow:var(--q-shadow)}
.q-c-row--static{grid-template-columns:auto minmax(0,1fr) auto}
@media (max-width:767px){
 .q-c-row{grid-template-columns:auto minmax(0,1fr)}
 .q-c-row>.q-badge{grid-column:2;justify-self:start}
}
.q-c-row__time{font:var(--q-weight-strong) var(--q-h3)/1 var(--q-font-body);min-inline-size:56px;color:var(--q-brand);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.q-c-row__main{display:grid;gap:2px;min-inline-size:0}
.q-c-row__main small{font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-c-row__main strong{font-weight:var(--q-weight-strong)}
.q-c-row__source{display:inline-flex;align-items:center;gap:var(--q-space-1);font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-c-row__icon{display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:var(--q-radius-pill);background:var(--q-bg-secondary);color:var(--q-brand)}
.q-c-meter{display:block;block-size:6px;border-radius:var(--q-radius-pill);background:var(--q-bg-secondary);overflow:hidden}
.q-c-meter span{display:block;block-size:100%;background:var(--q-gold-ink)}
.q-c-meter--large{block-size:10px}
.q-c-checks{display:grid;gap:var(--q-space-2)}
.q-c-checks li{display:flex;align-items:flex-start;gap:var(--q-space-2);font-size:var(--q-body-small)}

/* Page hero: eyebrow, title, meta line, agenda chip (« Saisi par toi · sans agenda ») */
.q-c-hero{display:grid;gap:var(--q-space-4)}
.q-c-hero__main{display:grid;gap:var(--q-space-2)}
.q-c-hero h1{font-size:var(--q-display)}
.q-c-hero__sub{font-size:var(--q-body);color:var(--q-text-secondary)}
.q-c-hero__meta{display:flex;flex-wrap:wrap;gap:var(--q-space-2) var(--q-space-4);font-size:var(--q-body-small)}
.q-c-hero__meta li{display:inline-flex;align-items:center;gap:var(--q-space-1)}
.q-c-agenda{display:inline-flex;align-items:center;gap:var(--q-space-1);padding:2px var(--q-space-2);border-radius:var(--q-radius-pill);background:var(--q-bg-secondary);font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-c-agenda--linked{background:var(--q-success-bg);color:var(--q-success)}
.q-c-more{display:inline-flex;align-items:center;gap:var(--q-space-1);min-block-size:var(--q-tap);padding:0 var(--q-space-3);border:1px solid var(--q-border-strong);border-radius:var(--q-radius-pill);background:var(--q-surface);color:var(--q-brand);font:var(--q-weight-strong) var(--q-caption)/1 var(--q-font-body);white-space:nowrap;cursor:pointer}
.q-c-more:hover{border-color:var(--q-brand)}
.q-c-dl{display:grid;gap:var(--q-space-2)}
.q-c-dl>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--q-space-3);padding-block:var(--q-space-2);border-block-end:1px solid var(--q-border)}
.q-c-dl dt{display:inline-flex;align-items:center;gap:var(--q-space-2);color:var(--q-text-secondary);font-size:var(--q-body-small)}
.q-c-dl dd{text-align:end;font-weight:var(--q-weight-medium)}
.q-c-dl dd a{display:inline-flex;align-items:center;min-block-size:var(--q-tap);color:var(--q-brand);font-weight:var(--q-weight-strong)}
.q-c-dl dd small{display:block;font-weight:var(--q-weight-regular);font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-c-dl--card{padding:var(--q-space-4) var(--q-space-5);border:1px solid var(--q-border);border-radius:var(--q-radius);background:var(--q-surface)}
.q-c-dl--card>div:last-child{border-block-end:0}
.q-c-legend{display:flex;flex-wrap:wrap;gap:var(--q-space-1) var(--q-space-4);font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-c-legend li{display:inline-flex;align-items:center;gap:var(--q-space-1)}
.q-c-legend__swatch{display:inline-block;inline-size:12px;block-size:12px;border-radius:50%}
.q-c-legend__swatch--strong{background:var(--q-brand)}
.q-c-legend__swatch--acceptable{border:2px solid var(--q-accent-secondary)}
.q-c-legend__swatch--median{border-radius:0;inline-size:2px;block-size:12px;background:var(--q-brand)}
.q-c-legend__swatch--line{border-radius:var(--q-radius-pill);block-size:3px;background:var(--q-brand)}
.q-c-legend__swatch--bar{border-radius:2px;background:var(--q-bg-secondary);border:1px solid var(--q-border-strong)}
.q-c-legend__swatch--committed{border-radius:2px;background:var(--q-bg-secondary);border:1px dashed var(--q-border-strong)}
.q-c-legend__swatch--actual{border-radius:2px;background:var(--q-accent-secondary)}
.q-c-legend__swatch--ahead{border-radius:2px;background:var(--q-brand)}
.q-c-fold{border-block-start:1px solid var(--q-border);padding-block-start:var(--q-space-2)}
.q-c-fold summary{display:flex;align-items:center;min-block-size:var(--q-tap);cursor:pointer;color:var(--q-brand);font-weight:var(--q-weight-strong);font-size:var(--q-body-small);list-style:none}
.q-c-fold summary::-webkit-details-marker{display:none}
.q-c-fold summary::before{content:"+";display:inline-grid;place-items:center;inline-size:22px;block-size:22px;margin-inline-end:var(--q-space-2);border-radius:50%;border:1px solid var(--q-border-strong);font-weight:var(--q-weight-regular)}
.q-c-fold[open] summary::before{content:"−"}
.q-c-fold>*:not(summary){margin-block-start:var(--q-space-3)}
.q-c-fold--card{padding:var(--q-space-1) var(--q-space-4) var(--q-space-3);border:1px solid var(--q-border);border-radius:var(--q-radius-small);background:var(--q-surface)}
.q-c-fold--card summary{color:var(--q-text)}
.q-c-sticky-cta{position:sticky;inset-block-end:calc(var(--q-shell-clear,var(--q-shell-bar,64px)) + var(--q-space-2));z-index:var(--q-z-sticky);display:flex;justify-content:center;pointer-events:none}
.q-c-sticky-cta .q-button{pointer-events:auto;box-shadow:var(--q-shadow);border-radius:var(--q-radius-pill)}

/* Page head: who speaks (the QEVYO voice line) */
.q-c-page-head .q-voice{font:var(--q-weight-strong) var(--q-label)/var(--q-line) var(--q-font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--q-text-secondary)}

/* Side panel (+ d'infos): bottom sheet on a phone, side panel from 768 px */
.q-c-panel__backdrop{position:fixed;inset:0;z-index:var(--q-z-overlay);display:grid;align-items:end;background:var(--q-overlay)}
.q-c-panel{display:grid;grid-template-rows:auto minmax(0,1fr);max-block-size:85dvh;padding:var(--q-space-5);border-radius:var(--q-radius) var(--q-radius) 0 0;background:var(--q-surface-raised);box-shadow:var(--q-shadow);overflow:hidden}
.q-c-panel:focus{outline:none}
.q-c-panel__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--q-space-3);padding-block-end:var(--q-space-3);border-block-end:1px solid var(--q-border)}
.q-c-panel__head h2{font:var(--q-weight-medium) var(--q-h2)/var(--q-line-tight) var(--q-font-display);font-variant-numeric:lining-nums}
.q-c-panel__close{display:grid;place-items:center;inline-size:var(--q-tap);block-size:var(--q-tap);border:0;border-radius:50%;background:var(--q-bg-secondary);color:var(--q-text);font:var(--q-weight-regular) 1.5rem/1 var(--q-font-body);cursor:pointer}
.q-c-panel__body{display:grid;gap:var(--q-space-3);align-content:start;padding-block-start:var(--q-space-4);overflow-y:auto;overflow-wrap:anywhere}
.q-c-panel__body h3{margin:var(--q-space-2) 0 0;font:var(--q-weight-strong) var(--q-body-small)/var(--q-line) var(--q-font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--q-text-secondary)}
.q-c-panel__body p,.q-c-panel__body ul,.q-c-panel__body ol,.q-c-panel__body dl{margin:0}
@media (min-width:768px){
 .q-c-page{padding-block-start:var(--q-space-6)}
 .q-c-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
 .q-c-panel__backdrop{align-items:stretch;justify-items:end}
 .q-c-panel{inline-size:min(480px,92vw);max-block-size:none;block-size:100dvh;border-radius:0}
 .q-c-sticky-cta{inset-block-end:var(--q-space-4)}
}
@media (min-width:1024px){
 .q-c-sticky-cta{display:none}
}

/* Copie de qevyo-app fb8ad6d : app/components/ui/motion.css (source de vérité, ne pas modifier ici). */
/* « Lisière » — the micro-interaction system (Alex, 28/09/2026, PR-B2). CSS only, tokens only:
   --q-duration-fast 150 ms (press), --q-duration 200 ms (appear), --q-duration-slow 250 ms (draw, sheets);
   --q-ease (enter) and --q-ease-inout (a value that changes). Every animation is declared inside
   prefers-reduced-motion:no-preference, and the reduce block stops everything (the tokens also fall to 0).
   Fill mode is always `backwards`, never `both` / `forwards`: a transform left « filled » would make its
   element the containing block of fixed descendants (COACH's composer, the sheets). No loop, no gadget.
   tests/design-system/lisiere-motion.test.ts guards all of this. */
@keyframes q-m-enter{from{opacity:0;translate:0 6px}}
@keyframes q-m-fade{from{opacity:0}}
@keyframes q-m-ring{from{stroke-dasharray:0 188.5}}
@keyframes q-m-pop{from{opacity:0;scale:.9}}
@keyframes q-m-indicator{from{scale:0 1}}
@keyframes q-m-sheet-up{from{opacity:.4;translate:0 32px}}
@keyframes q-m-sheet-side{from{opacity:.4;translate:32px 0}}
@keyframes q-m-check{from{opacity:0;scale:.4;rotate:-12deg}}
@media (prefers-reduced-motion:no-preference){
 /* Space switch TODAY / COACH / REVIEW: the page settles in (opacity only); the active tab's mark draws. */
 .q-shell__content>.q-content{animation:q-m-fade var(--q-duration) var(--q-ease) backwards}
 .q-shell__link[aria-current=page]::before{transform-origin:center;animation:q-m-indicator var(--q-duration-slow) var(--q-ease) backwards}
 /* KPI ring: the value draws from zero on arrival (40 ms apart), and eases to a new value. */
 .q-ring .q-pace__fill{animation:q-m-ring var(--q-duration-slow) var(--q-ease) backwards;transition:stroke-dasharray var(--q-duration-slow) var(--q-ease-inout)}
 .q-ring:nth-child(2) .q-pace__fill{animation-delay:40ms}
 .q-ring:nth-child(3) .q-pace__fill{animation-delay:80ms}
 .q-ring:nth-child(4) .q-pace__fill{animation-delay:120ms}
 /* Sheets: rise on the phone, slide from the side from 768 px; the backdrop fades. */
 .q-ring-sheet[open]{animation:q-m-sheet-up var(--q-duration-slow) var(--q-ease)}
 .q-ring-sheet[open]::backdrop,.q-d-sheet[data-open] .q-d-sheet__backdrop{animation:q-m-fade var(--q-duration) var(--q-ease)}
 .q-d-sheet[data-open] .q-d-sheet__panel{animation:q-m-sheet-up var(--q-duration-slow) var(--q-ease)}
 /* RDV « en cours » and « Dossier prêt »: the state badge settles after the page; COACH's current step dot. */
 .q-t-slot:is([data-dossier-state=in_progress],[data-dossier-state=ready]) .q-badge{animation:q-m-pop var(--q-duration) var(--q-ease) 200ms backwards}
 .q-th-moments li[aria-current=step] :is(a,span)::before{animation:q-m-pop var(--q-duration) var(--q-ease) backwards}
 /* QEVYO suggestion: the bar's chip and COACH's chips arrive after the page; new thread messages enter. */
 .q-qbar__chip{animation:q-m-enter var(--q-duration) var(--q-ease) 160ms backwards}
 .q-th-composer__chips .q-th-chip{animation:q-m-enter var(--q-duration) var(--q-ease) backwards}
 .q-th-list--live>.q-th-msg{animation:q-m-enter var(--q-duration) var(--q-ease) backwards}
 /* Débrief confirmed → action created: each « rangé » line checks in turn, then the next action. */
 [data-debrief-state=saved]>li{animation:q-m-enter var(--q-duration) var(--q-ease) backwards}
 [data-debrief-state=saved]>li svg{animation:q-m-check var(--q-duration-slow) var(--q-ease) backwards}
 [data-debrief-state=saved]>li:nth-child(2),[data-debrief-state=saved]>li:nth-child(2) svg{animation-delay:60ms}
 [data-debrief-state=saved]>li:nth-child(3),[data-debrief-state=saved]>li:nth-child(3) svg{animation-delay:120ms}
 [data-debrief-state=saved]>li:nth-child(n+4),[data-debrief-state=saved]>li:nth-child(n+4) svg{animation-delay:180ms}
 [data-debrief-state=saved]~.q-th-link{animation:q-m-enter var(--q-duration) var(--q-ease) 240ms backwards}
 /* An empty moment arrives calmly. */
 .q-empty-moment{animation:q-m-enter var(--q-duration) var(--q-ease) backwards}
 /* Press: the control answers the finger at once. */
 :is(.q-button,.q-qbar__prepare,.q-th-chip,.q-ring__button,.q-d-volet):active{scale:.98;transition:scale var(--q-duration-fast) var(--q-ease)}
}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
 .q-ring-sheet[open]{animation-name:q-m-sheet-side}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after,::backdrop{animation:none!important;transition-duration:0ms!important}
}

/* Copie de qevyo-app fb8ad6d : app/components/today/cockpit.css (source de vérité, ne pas modifier ici). */
/* TODAY cockpit (UX Lot 1, Alex 28/09/2026): 1 Ma situation → 2 QEVYO briefing → 3 agenda (compact,
   fixed-height, scrollable) → 4 priorities → 5 secondary → 6 Marché & financement (last, folded).
   Tokens only. Phone: one column in that order. Desktop (≥1024px): Ma situation across; the agenda and
   the priorities on the left, QEVYO's briefing beside them (sticky); the secondary items, then the
   market fold, across at the bottom. */

.q-t-cockpit{gap:var(--q-space-3)}
.q-t-sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Premium pass: the opening (date, greeting) is .q-space-head (ui.css); the hook sits right under it. */
.q-t-head{padding-block-end:0}
/* Phone: the vignette stays inside the opening (date + greeting), right side, never behind the hook. */
.q-t-head.q-space-head{min-block-size:112px;align-content:end}
.q-t-head.q-space-head::after{inset-block-start:0;block-size:100%;min-block-size:0;inline-size:min(62%,360px)}
.q-t-month .q-panel__aside{flex-basis:100%;margin-inline-start:calc(36px + var(--q-space-3));margin-block-start:calc(-1 * var(--q-space-2))}
@media (min-width:480px){.q-t-month .q-panel__aside{flex-basis:auto;margin:0 0 0 auto}}
@media (min-width:1024px){
 .q-t-head.q-space-head{min-block-size:132px;align-content:end}
 .q-t-head.q-space-head::after{inset-inline-end:0;inline-size:min(44%,560px);block-size:calc(100% + var(--q-space-6));min-block-size:0}
 .q-t-secondary{align-self:stretch}
}
.q-t-title{font:var(--q-weight-strong) var(--q-title-card)/1.15 var(--q-font-display);letter-spacing:-.012em;font-variant-numeric:lining-nums}
.q-t-title__sub{font:var(--q-weight-medium) var(--q-body-small)/var(--q-line) var(--q-font-body);letter-spacing:0;color:var(--q-text-secondary);margin-inline-start:var(--q-space-1)}
.q-t-title--small{font-size:var(--q-h3)}
.q-t-calm{color:var(--q-text-secondary);font-size:var(--q-body-small)}
.q-t-quiet-link{display:inline-flex;align-items:center;min-block-size:var(--q-tap);gap:var(--q-space-1);color:var(--q-brand);font-weight:var(--q-weight-strong);text-decoration:none}
.q-t-quiet-link:hover{text-decoration:underline;text-underline-offset:3px}

/* 1. Ma situation */
.q-t-kpis{gap:var(--q-space-4)}
.q-t-month{gap:var(--q-space-3)}
.q-t-kpis__foot{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--q-space-4);margin:0 0 calc(-1 * var(--q-space-2));padding-block-start:var(--q-space-1);border-block-start:1px solid var(--q-hairline);font-size:var(--q-body-small)}
.q-t-kpis__review{margin-inline-start:auto}

/* 6. Marché & financement (short), inside its fold at the bottom (the fold is the card) */
.q-t-market-fold{scroll-margin-block-start:calc(var(--q-shell-top,56px) + var(--q-space-4))}
.q-t-market-fold>.q-t-market{padding:0;border:0;background:none}
.q-t-market{gap:var(--q-space-3);padding:var(--q-space-4) var(--q-space-5);border:1px solid var(--q-border);border-radius:var(--q-radius);background:var(--q-surface)}
.q-t-market .q-c-section__head{align-items:flex-start}
.q-t-market__zone{display:flex;align-items:center;gap:var(--q-space-1);margin:2px 0 0;font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-t-market__facts{display:grid;gap:var(--q-space-3);margin:0;grid-template-columns:minmax(0,1fr)}
.q-t-market__fact{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--q-space-1);align-items:start;padding-block-start:var(--q-space-3);border-block-start:1px solid var(--q-bg-secondary)}
.q-t-market__fact:first-child{padding-block-start:0;border-block-start:0}
.q-t-market__fact dt{font:var(--q-weight-strong) var(--q-label)/var(--q-line) var(--q-font-body);color:var(--q-text-secondary);text-transform:uppercase;letter-spacing:.08em}
.q-t-market__fact dd{display:grid;gap:2px;margin:0;min-inline-size:0}
.q-t-market__fact small{font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-t-market__state{display:inline-flex;align-items:center;gap:var(--q-space-2);font:var(--q-weight-medium) var(--q-h3)/var(--q-line-tight) var(--q-font-display);font-variant-numeric:lining-nums}
.q-t-market__swatch{inline-size:12px;block-size:12px;border-radius:var(--q-radius-pill);flex:none}
.q-t-market__swatch--vendeur{background:var(--q-success-bg);box-shadow:inset 0 0 0 1px var(--q-success)}
.q-t-market__swatch--equilibre{background:var(--q-info-bg);box-shadow:inset 0 0 0 1px var(--q-info)}
.q-t-market__swatch--acquereur{background:var(--q-warning-bg);box-shadow:inset 0 0 0 1px var(--q-warning)}
.q-t-market__swatch--indetermine{background:repeating-linear-gradient(135deg,var(--q-bg-secondary) 0 3px,var(--q-surface) 3px 6px);box-shadow:inset 0 0 0 1px var(--q-border-strong)}
.q-t-market__proofs{display:flex;flex-wrap:wrap;gap:2px var(--q-space-3);font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-t-market__proofs strong{color:var(--q-text);font-weight:var(--q-weight-strong)}
.q-t-market__figure{display:inline-flex;align-items:center;gap:var(--q-space-1);font:var(--q-weight-strong) 1.6rem/1.1 var(--q-font-body);color:var(--q-text);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.q-t-market__figure--small{font-size:var(--q-h3);font-family:var(--q-font-body);font-weight:var(--q-weight-strong)}
.q-t-market__trend--up svg{transform:rotate(-45deg);color:var(--q-success)}
.q-t-market__trend--down svg{transform:rotate(45deg);color:var(--q-warning)}
.q-t-market__trend--flat svg{color:var(--q-text-secondary)}
.q-t-market__curve{inline-size:132px;block-size:32px;margin-block-start:var(--q-space-1)}
.q-t-market__curve path{stroke:var(--q-accent-secondary)}
.q-t-market__curve circle{fill:var(--q-gold-ink);stroke:var(--q-surface);stroke-width:2}
.q-t-market__sentence{margin:0;padding:var(--q-space-3) var(--q-space-4);border-inline-start:3px solid var(--q-gold-ink);border-radius:0 var(--q-radius-small) var(--q-radius-small) 0;background:var(--q-bg-primary);font:var(--q-weight-medium) 1.125rem/var(--q-line-tight) var(--q-font-display);color:var(--q-text);font-variant-numeric:lining-nums}
.q-t-market__sources{margin:0}
@media (min-width:768px){
 .q-t-market__facts{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:var(--q-space-5)}
 .q-t-market__fact{grid-template-columns:minmax(0,1fr);padding-block-start:0;border-block-start:0}
 .q-t-market__fact+.q-t-market__fact{padding-inline-start:var(--q-space-5);border-inline-start:1px solid var(--q-bg-secondary)}
}

/* 3. Agenda: a compact, fixed-height list. One dense line per RDV (a native fold: tap to open the row),
   its main action beside it. About four and a half rows show: the cut row says « there is more »; the
   list scrolls inside (thin visible scrollbar, focusable region); an open row gives it more room. */
.q-t-agenda{gap:var(--q-space-3)}
.q-t-agenda{--q-t-row:calc(var(--q-tap) + var(--q-space-4))}
.q-t-agenda__scroll{max-block-size:calc(4.5 * (var(--q-t-row) + var(--q-space-2)));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--q-border-strong) transparent;scrollbar-gutter:stable;border-radius:var(--q-radius-small)}
.q-t-agenda__scroll:has(.q-t-slot__fold[open]){max-block-size:calc(4.5 * (var(--q-t-row) + var(--q-space-2)) + 16rem)}
.q-t-agenda__scroll:focus-visible{outline:3px solid var(--q-focus);outline-offset:2px}
/* « Lisière »: the day as ONE list on paper, rows divided by hairlines; the state is a short bar + its badge. */
.q-t-agenda__list{display:grid;gap:0;margin:0 calc(-1 * var(--q-space-2));padding:0;list-style:none;background:none}
.q-t-slot{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:0 var(--q-space-1);padding-inline:var(--q-space-2);background:none}
.q-t-slot+.q-t-slot{border-block-start:1px solid var(--q-hairline)}
.q-t-slot::before{content:"";position:absolute;inset-block:var(--q-space-3);inset-inline-start:var(--q-space-2);inline-size:3px;border-radius:var(--q-radius-pill);background:var(--q-hairline)}
.q-t-slot[data-dossier-state=ready]::before{background:var(--q-success)}
.q-t-slot[data-dossier-state=to_prepare]::before,.q-t-slot[data-dossier-state=to_debrief]::before{background:var(--q-warning)}
.q-t-slot[data-dossier-state=in_progress]::before{background:var(--q-brand-vivid)}
.q-t-slot__fold{min-inline-size:0}
.q-t-slot__line{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"time place place chevron" "time kind state chevron";align-items:center;gap:2px var(--q-space-3);min-block-size:var(--q-t-row);padding:var(--q-space-2) var(--q-space-2) var(--q-space-2) var(--q-space-3);border-radius:var(--q-radius-small);cursor:pointer;list-style:none}
.q-t-slot__line::-webkit-details-marker{display:none}
.q-t-slot__line:hover .q-t-slot__place{text-decoration:underline;text-decoration-color:var(--q-border-strong);text-underline-offset:3px}
.q-t-slot__line:focus-visible{outline:3px solid var(--q-focus);outline-offset:-3px}
.q-t-slot__time{grid-area:time;min-inline-size:56px;font:var(--q-weight-strong) var(--q-h3)/1.1 var(--q-font-body);color:var(--q-brand);white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.q-t-slot__place{grid-area:place;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--q-body-small);font-weight:var(--q-weight-strong);color:var(--q-text)}
.q-t-slot__kind{grid-area:kind;white-space:nowrap;font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-t-slot__kind>span{display:none}
.q-t-slot__state{grid-area:state;justify-self:start;display:inline-flex;white-space:nowrap}
.q-t-slot__chevron{grid-area:chevron;inline-size:8px;block-size:8px;margin-inline:var(--q-space-1);border-inline-end:2px solid var(--q-text-secondary);border-block-end:2px solid var(--q-text-secondary);transform:rotate(45deg);transition:transform var(--q-duration-fast) var(--q-ease)}
.q-t-slot__fold[open] .q-t-slot__chevron{transform:rotate(-135deg)}
.q-t-slot__details{display:grid;gap:var(--q-space-2);padding:0 var(--q-space-2) var(--q-space-3) var(--q-space-3)}
.q-t-slot__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--q-space-2);margin:0}
.q-t-slot__proposal{margin:0;font-size:var(--q-body-small);color:var(--q-text)}
.q-t-slot__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--q-space-2);margin:0}
.q-t-slot__source{display:inline-flex;align-items:center;gap:var(--q-space-1);font-size:var(--q-caption);color:var(--q-text-secondary)}
/* The main action: a round 44 px button on a phone (its label read by screen readers, and repeated in
   words in the open row), a labelled pill from 768 px. */
.q-t-slot__action{display:inline-grid;grid-auto-flow:column;place-items:center;gap:var(--q-space-1);inline-size:var(--q-tap);block-size:var(--q-tap);margin-block-start:calc((var(--q-t-row) - var(--q-tap)) / 2);border:1px solid var(--q-border-strong);border-radius:var(--q-radius-pill);background:var(--q-surface);color:var(--q-brand);font:var(--q-weight-strong) var(--q-body-small)/1 var(--q-font-body);text-decoration:none;white-space:nowrap;transition:box-shadow var(--q-duration-fast) var(--q-ease),background-color var(--q-duration-fast) var(--q-ease)}
.q-t-slot__action:hover{box-shadow:var(--q-shadow)}
.q-t-slot__action:focus-visible,.q-t-slot__action-full:focus-visible{outline:3px solid var(--q-focus);outline-offset:2px}
.q-t-slot__action--coach{border-color:var(--q-brand);background:var(--q-brand);color:var(--q-on-dark)}
.q-t-slot__action-label{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.q-t-slot__action-full{justify-self:start;display:inline-flex;align-items:center;gap:var(--q-space-1);min-block-size:var(--q-tap);padding:0 var(--q-space-4);border:1px solid var(--q-border-strong);border-radius:var(--q-radius-pill);color:var(--q-brand);font:var(--q-weight-strong) var(--q-body-small)/1 var(--q-font-body);text-decoration:none}
.q-t-slot__action-full--coach{border-color:var(--q-brand);background:var(--q-brand);color:var(--q-on-dark)}

/* C. QEVYO's briefing */
.q-t-briefing{display:grid;gap:var(--q-space-3)}
.q-t-briefing.q-block--qevyo::before{content:none}
.q-t-briefing .q-card__eyebrow{margin:0;letter-spacing:.12em}
.q-t-briefing .q-card__header{margin-block-end:0}
.q-t-briefing__hello{margin-block-start:calc(-1 * var(--q-space-2))}
.q-t-briefing__medal{display:grid;place-items:center;inline-size:28px;block-size:28px;border-radius:50%;background:var(--q-card);color:var(--q-brand-vivid)}
.q-t-briefing__lines{display:grid;gap:var(--q-space-2)}
.q-t-briefing__lines{gap:var(--q-space-3)}
.q-t-briefing__lines p{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--q-space-3);align-items:start;margin:0;font-size:var(--q-body);line-height:1.5;color:var(--q-text)}
.q-t-briefing__lines p>span:last-child{padding-block-start:2px}
/* TODAY Closing WOW (Alex, 02/10/2026): each point reads fact (strong) → why (secondary) → action, one line each. */
.q-t-briefing__point{display:grid;gap:2px}
.q-t-briefing__fact{font-weight:var(--q-weight-strong);color:var(--q-text)}
.q-t-briefing__why{font-size:var(--q-body-small);color:var(--q-text-secondary)}
.q-t-briefing__act{font-size:var(--q-body-small);color:var(--q-text)}
.q-t-briefing__attention{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--q-space-2);align-items:start;margin:0;padding:var(--q-space-3);border-radius:var(--q-radius-medium);background:var(--q-warning-bg);font-size:var(--q-body-small)}
.q-t-briefing__lines .q-t-briefing__attention{font-size:var(--q-body-small)}
.q-t-briefing__attention .q-t-briefing__medal{background:var(--q-surface);color:var(--q-warning)}
.q-t-briefing__proposal{display:grid;gap:var(--q-space-3);justify-items:start;padding-block-start:var(--q-space-3);border-block-start:1px solid var(--q-sand-line)}
.q-t-briefing__proposal p{font:var(--q-weight-medium) 1.1875rem/1.3 var(--q-font-display);font-variant-numeric:lining-nums}
.q-t-briefing__proposal p{margin:0}
/* D. Priorities */
.q-t-priorities{gap:var(--q-space-3)}
.q-t-priorities__list{display:grid;gap:0;margin:0 calc(-1 * var(--q-space-3));padding:0;list-style:none;background:none}
.q-t-priorities__list>li+li{border-block-start:1px solid var(--q-hairline)}
.q-t-priority{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--q-space-3);min-block-size:var(--q-tap);padding:var(--q-space-3) var(--q-space-4);border-radius:var(--q-radius-small);background:none;color:var(--q-text);text-decoration:none;transition:background-color var(--q-duration-fast) var(--q-ease)}
.q-t-priority:hover{background:var(--q-mist)}
.q-t-priority>svg{color:var(--q-brand)}
.q-t-priority__rank{display:grid;place-items:center;inline-size:32px;block-size:32px;border-radius:var(--q-radius-pill);background:var(--q-medal-sage);color:var(--q-brand);font:var(--q-weight-strong) var(--q-body)/1 var(--q-font-display);font-variant-numeric:lining-nums}
.q-t-priority__main{display:grid;gap:2px;min-inline-size:0}
.q-t-priority__main strong{font-weight:var(--q-weight-strong)}
.q-t-priority__main small{font-size:var(--q-caption);color:var(--q-text-secondary)}
/* TODAY Closing WOW (Alex, 02/10/2026): rank 1 of buildPriorities is the day's focus — a light card on the existing
   tokens (brand rule, sage medal filled), its reason visible, its action an explicit primary button; ranks 2 and 3 quieter. */
.q-t-priorities__focus-item{padding:0 var(--q-space-3) var(--q-space-2)}
.q-t-priority--focus{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"rank main" "cta cta";padding:var(--q-space-4);border:1px solid var(--q-border-strong);border-inline-start:3px solid var(--q-brand);border-radius:var(--q-radius-medium);background:var(--q-surface);box-shadow:var(--q-shadow)}
.q-t-priority--focus:hover{background:var(--q-surface)}
.q-t-priority--focus .q-t-priority__rank{grid-area:rank;align-self:start;background:var(--q-brand);color:var(--q-on-dark)}
.q-t-priority--focus .q-t-priority__main{grid-area:main;gap:var(--q-space-1)}
.q-t-priority--focus .q-t-priority__main strong{font:var(--q-weight-strong) var(--q-h3)/var(--q-line-tight) var(--q-font-body)}
.q-t-priority--focus .q-t-priority__main small{font-size:var(--q-body-small);color:var(--q-text)}
.q-t-priority__eyebrow{font:var(--q-weight-strong) var(--q-label)/var(--q-line) var(--q-font-body);color:var(--q-brand);text-transform:uppercase;letter-spacing:.08em}
.q-t-priority__cta{grid-area:cta;justify-self:start}
@media (min-width:768px){
 .q-t-priority--focus{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"rank main cta"}
 .q-t-priority__cta{align-self:center}
}
.q-t-priority--next{padding-block:var(--q-space-2)}
.q-t-priority--next .q-t-priority__rank{inline-size:28px;block-size:28px;font-size:var(--q-body-small)}
.q-t-priority--next .q-t-priority__main strong{font-weight:var(--q-weight-medium)}

/* E. Secondary, compact */
.q-t-secondary{gap:var(--q-space-3)}
.q-t-secondary__list{display:grid;gap:var(--q-space-1);margin:0;padding:0;list-style:none}
.q-t-mini{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--q-space-2);min-block-size:var(--q-tap);padding:var(--q-space-1) 0;color:var(--q-text);text-decoration:none;font-size:var(--q-body-small)}
.q-t-mini>svg{color:var(--q-text-secondary)}
.q-t-mini small{font-size:var(--q-caption);color:var(--q-text-secondary)}
.q-t-mini:hover strong{text-decoration:underline;text-underline-offset:3px}
.q-t-chip{min-block-size:var(--q-tap)}

@media (min-width:768px){
 .q-t-agenda{--q-t-row:calc(var(--q-tap) + var(--q-space-2))}
 .q-t-slot__line{grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-areas:"time kind place state chevron";column-gap:var(--q-space-2)}
 .q-t-slot__kind{font-size:var(--q-body-small);font-weight:var(--q-weight-strong);color:var(--q-text)}
 .q-t-slot__kind>span{display:inline}
 .q-t-slot__place{font-weight:var(--q-weight-regular);white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
 .q-t-slot__details{padding-inline-start:calc(var(--q-space-3) + 56px + var(--q-space-3))}
 .q-t-slot__action{inline-size:auto;block-size:var(--q-tap);margin-block-start:calc((var(--q-t-row) - var(--q-tap)) / 2);padding:0 var(--q-space-3)}
 .q-t-slot__action-label{position:static;inline-size:auto;block-size:auto;overflow:visible;clip-path:none}
 .q-t-slot__action-full{display:none}
}
@media (min-width:1024px){
 /* Premium pass: an editorial two-column day — the month (hook + rings) beside QEVYO's briefing, then the
    agenda beside the priorities; the opening spans the width with the Relief vignette. */
 .q-t-cockpit{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-areas:"head head" "kpi brief" "agenda agenda" "prio second" "market market";gap:var(--q-space-4) var(--q-space-5);align-items:start}
 .q-t-market-fold{grid-area:market}
 .q-t-head{grid-area:head}
 .q-t-kpis{grid-area:kpi}
 .q-t-agenda{grid-area:agenda}
 .q-t-briefing{grid-area:brief;align-self:stretch}
 .q-t-priorities{grid-area:prio}
 .q-t-secondary{grid-area:second}
}
@media (min-width:1024px){
 .q-t-cockpit:not(:has(.q-t-market-fold)){grid-template-areas:"head head" "kpi brief" "agenda agenda" "prio second"}
}

/* Loading skeleton (TodaySkeleton, today-space.tsx): the real blocks' frames, neutral bars, a slow pulse. */
.q-t-skel__bar{display:block;block-size:12px;max-inline-size:100%;border-radius:var(--q-radius-pill);background:var(--q-bg-secondary)}
.q-t-head .q-t-skel__bar{block-size:14px}
.q-t-skel__card{gap:var(--q-space-3);min-block-size:168px}
.q-t-skel__cell{justify-items:center;gap:var(--q-space-2);padding-block:var(--q-space-1) var(--q-space-2)}
.q-t-skel__cell .q-t-skel__ring{inline-size:min(72px,100%);block-size:auto;aspect-ratio:1;box-sizing:border-box}
.q-t-skel__ring{display:block;inline-size:56px;block-size:56px;border-radius:50%;border:8px solid var(--q-bg-secondary)}
.q-t-skel__row{display:flex;align-items:center;gap:var(--q-space-3);min-block-size:var(--q-t-row,60px);padding:var(--q-space-3)}
.q-t-skel__row .q-t-skel__bar:first-child{flex:none}
.q-t-skel .q-t-briefing{gap:var(--q-space-3)}
@media (prefers-reduced-motion:no-preference){.q-t-skel__bar,.q-t-skel__ring{animation:q-t-pulse 1.6s var(--q-ease) infinite alternate}}
@keyframes q-t-pulse{to{opacity:.55}}

@media (prefers-reduced-motion:reduce){
 .q-t-slot__chevron,.q-t-slot__action{transition:none}
}

/* Copie de qevyo-app fb8ad6d : app/components/today/situation.css (source de vérité, ne pas modifier ici). */
/* UX V1 · P2 — TODAY « Ma situation » in rings (decision 2C, Alex 28/09/2026). QEVYO's sentence, then the
   4 rings on ONE line on every width (a phone of 320 px included), each readable without a gesture:
   the réalisé / objectif inside the ring, the label, the short status (icon + words, never colour
   alone). A ring opens its detail in a native <dialog>: a bottom sheet on the phone, a side panel
   from 768 px. Tokens only; chart text ≥ 12 px; targets ≥ 44 px; no motion with reduced motion. */

.q-t-kpis__head{flex-wrap:wrap;align-items:baseline;row-gap:var(--q-space-1)}
/* The editorial sentence takes ~8 px more: the block tightens by as much, so nothing below moves down. */
.q-t-kpis{row-gap:var(--q-space-3)}
/* « Lisière » accentuated: QEVYO's sentence is the editorial hook of the day (Cormorant, lining figures);
   every number inside stays Inter tabular (.q-num, cockpit.tsx). */
/* Premium pass: the day's hook — QEVYO's sentence as an editorial quote on the gold rule (.q-quote), the avatar
   signing it; every figure stays Inter tabular. */
.q-t-say{display:flex;align-items:flex-start;gap:var(--q-space-3);margin:0 0 var(--q-space-1);color:var(--q-text);font:var(--q-weight-medium) var(--q-quote)/1.22 var(--q-font-display);font-variant-numeric:lining-nums;letter-spacing:-.01em;text-wrap:pretty}
.q-t-say .qevyo-avatar{--avatar-size:32px}
.q-t-say .qevyo-presence{margin-block-start:.1em}
.q-t-say .q-num{font:var(--q-weight-strong) .82em/1 var(--q-font-body);font-variant-numeric:lining-nums tabular-nums;letter-spacing:0}
.q-t-say .qevyo-presence{flex:none}
.q-t-kpis__basis{margin:0}

.q-t-rings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--q-space-1);margin:0 calc(-1 * var(--q-space-2));padding:0;list-style:none;border:0;background:none}
/* Fine rings (not four gauges): a 4-unit stroke on a hairline track, round caps. */
.q-t-rings .q-pace__track{stroke:var(--q-ring-track);stroke-width:4}
.q-t-rings .q-pace__fill{stroke-width:4.5}
.q-t-rings .q-pace__notch{stroke-width:2}
.q-ring{display:grid;min-inline-size:0}
.q-ring__button{display:grid;grid-template-rows:auto minmax(2.4em,auto) auto;justify-items:center;align-content:start;gap:var(--q-space-1);inline-size:100%;min-block-size:var(--q-tap);padding:var(--q-space-1) 2px var(--q-space-2);border:0;border-radius:var(--q-radius-small);background:none;color:var(--q-text);font:inherit;text-align:center;cursor:pointer;transition:background-color var(--q-duration-fast) var(--q-ease)}
.q-ring__button:hover{background:var(--q-hover-veil)}
.q-ring__button:active{background:var(--q-pressed-veil)}
.q-ring__button:focus-visible{outline:3px solid var(--q-focus);outline-offset:2px}
.q-ring__visual{position:relative;display:grid;place-items:center;inline-size:min(76px,100%);aspect-ratio:1}
.q-ring__visual .q-pace__ring{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
/* UX V1 finitions (item 4): the figures stay inside the ring's inner disc up to « 999 k / 999 k€ » at 375 px
   (inner radius ≈ 28,5 px): tight lines, narrower spaces, never wider than the disc's chord. */
.q-ring__figures{position:relative;display:grid;justify-items:center;gap:0;line-height:1;word-spacing:-.06em;letter-spacing:-.01em}
.q-ring__value{font:var(--q-weight-strong) 1.25rem/1 var(--q-font-body);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.q-ring__value--long{font-size:15px}
.q-ring__of{color:var(--q-text-secondary);font:var(--q-weight-medium) var(--q-caption)/1 var(--q-font-body);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.q-ring__label{align-self:center;color:var(--q-text);font:var(--q-weight-strong) var(--q-caption)/1.2 var(--q-font-body);overflow-wrap:anywhere}
.q-ring__status{display:grid;justify-items:center;gap:1px;font:var(--q-weight-strong) var(--q-caption)/1.25 var(--q-font-body);font-variant-numeric:lining-nums tabular-nums}
/* Phone: the écart above the words (« −8 » / « ↘ En retard »); one line from 768 px. */
.q-ring__gap{font-size:var(--q-body-small)}
.q-ring__sep{display:none}
.q-ring__words{text-align:center;text-wrap:balance}
.q-ring__status svg{display:inline-block;vertical-align:-1px}
.q-ring__status--retard{color:var(--q-state-late)}.q-ring__status--retard svg{transform:rotate(45deg)}
.q-ring__status--avance{color:var(--q-state-ahead)}.q-ring__status--avance svg{transform:rotate(-45deg)}
.q-ring__status--rythme{color:var(--q-state-pace)}
.q-ring__status--atteint{color:var(--q-state-reached)}
.q-ring__status--none{color:var(--q-text-secondary);font-weight:var(--q-weight-regular)}

/* The detail sheet (native modal dialog). */
.q-ring-sheet{position:fixed;inset:auto 0 0 0;margin:0;padding:0;inline-size:100%;max-inline-size:100%;max-block-size:88dvh;overflow:auto;overscroll-behavior:contain;border:0;border-radius:calc(var(--q-radius) + var(--q-space-1)) calc(var(--q-radius) + var(--q-space-1)) 0 0;background:var(--q-surface-raised);color:var(--q-text);box-shadow:var(--q-shadow)}
.q-ring-sheet::backdrop{background:var(--q-overlay)}
html:has(.q-ring-sheet[open]){overflow:hidden}
.q-ring-sheet__body{display:grid;gap:var(--q-space-3);padding:var(--q-space-2) var(--q-gutter) calc(var(--q-space-5) + env(safe-area-inset-bottom,0px));text-align:start}
.q-ring-sheet__grab{justify-self:center;inline-size:40px;block-size:4px;border-radius:var(--q-radius-pill);background:var(--q-border-strong)}
.q-ring-sheet__head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--q-space-2)}
.q-ring-sheet__title{margin:0;font:var(--q-weight-medium) var(--q-h3)/var(--q-line-tight) var(--q-font-display)}
.q-ring-sheet__close{display:grid;place-items:center;inline-size:var(--q-tap);block-size:var(--q-tap);border:1px solid var(--q-border);border-radius:50%;background:var(--q-surface);color:var(--q-text);cursor:pointer}
.q-ring-sheet__close:hover{border-color:var(--q-brand)}
.q-ring-sheet__close:focus-visible{outline:3px solid var(--q-focus);outline-offset:2px}
.q-ring-sheet__figure{margin:0;font:var(--q-weight-strong) 1.5rem/1.2 var(--q-font-body);font-variant-numeric:lining-nums tabular-nums}
.q-ring-sheet__basis,.q-ring-sheet__note{margin:0;color:var(--q-text-secondary);font-size:var(--q-body-small);line-height:var(--q-line)}
.q-ring-sheet__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--q-space-3);margin:0}
.q-ring-sheet__facts div{display:grid;gap:2px;align-content:start}
.q-ring-sheet__facts dt{color:var(--q-text-secondary);font-size:var(--q-caption)}
.q-ring-sheet__facts dd{margin:0;font:var(--q-weight-strong) var(--q-body-small)/1.35 var(--q-font-body);font-variant-numeric:lining-nums tabular-nums}
.q-ring-sheet__curve{display:grid;gap:var(--q-space-1);margin:0;padding-block-start:var(--q-space-3);border-block-start:1px solid var(--q-bg-secondary)}
.q-ring-sheet__curve figcaption{color:var(--q-text-secondary);font-size:var(--q-caption)}
.q-ring-sheet__curve svg{display:block;inline-size:100%;block-size:auto;overflow:visible}
.q-ring-sheet__baseline{stroke:var(--q-border);stroke-width:1}
.q-ring-sheet__line{fill:none;stroke:var(--q-accent-secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.q-ring-sheet__point{fill:var(--q-accent-secondary);stroke:var(--q-surface-raised);stroke-width:2}
.q-ring-sheet__point--last{fill:var(--q-brand)}
.q-ring-sheet__weeks{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0;padding:0;list-style:none;text-align:center}
.q-ring-sheet__weeks li{display:grid;gap:1px}
.q-ring-sheet__weeks strong{font:var(--q-weight-strong) var(--q-caption)/1.2 var(--q-font-body);font-variant-numeric:lining-nums tabular-nums}
.q-ring-sheet__weeks span{color:var(--q-text-secondary);font-size:var(--q-caption);line-height:1.2}
.q-ring-sheet__setup{display:inline-flex;align-items:center;gap:var(--q-space-1);min-block-size:var(--q-tap)}

@media (min-width:768px){
 .q-t-rings{gap:var(--q-space-3);margin:0}
 .q-ring__visual{inline-size:96px}
 .q-ring__value{font-size:1.625rem}
 .q-ring__value--long{font-size:1.125rem}
 .q-ring__label{font-size:var(--q-body-small)}
 .q-ring__status{display:inline-flex;align-items:center;justify-content:center}
 .q-ring__gap{font-size:inherit}
 .q-ring__sep{display:inline;white-space:pre}
 /* A side panel on the right, full height. */
 .q-ring-sheet{inset:0 0 0 auto;inline-size:min(420px,92vw);max-block-size:100dvh;block-size:100dvh;border-radius:var(--q-radius) 0 0 var(--q-radius)}
 .q-ring-sheet__body{padding:var(--q-space-5)}
 .q-ring-sheet__grab{display:none}
}
@media (prefers-reduced-motion:no-preference){
 .q-ring-sheet[open]{animation:q-ring-sheet-up var(--q-duration-slow) var(--q-ease)}
 .q-ring-sheet[open]::backdrop{animation:q-ring-sheet-fade var(--q-duration) var(--q-ease)}
}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
 .q-ring-sheet[open]{animation-name:q-ring-sheet-side}
}
@media (prefers-reduced-motion:reduce){
 .q-ring__button{transition:none}
}
@keyframes q-ring-sheet-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes q-ring-sheet-side{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes q-ring-sheet-fade{from{opacity:0}to{opacity:1}}

/* Premium pass, iteration 2 (29/09/2026): the month is part of ONE editorial block — greeting → QEVYO's quote →
   the month, on the page itself (no card): a quiet tracked title line, then four FINE rings with room to breathe,
   quieter labels, the states as small coloured text. Still 2C: réalisé / objectif, label and status without a tap. */
.q-t-month.q-panel{gap:var(--q-space-4);padding:var(--q-space-4) 0 0;border:0;border-block-start:1px solid var(--q-hairline);border-radius:0;background:none;box-shadow:none}
.q-t-month .q-medal{display:none}
.q-t-month .q-panel__head{gap:var(--q-space-1) var(--q-space-3)}
.q-t-month .q-panel__title{font:var(--q-weight-strong) var(--q-label)/1.4 var(--q-font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--q-lichen)}
.q-t-month .q-panel__title small{margin-inline-start:var(--q-space-1);font:inherit;letter-spacing:inherit;color:var(--q-text-secondary)}
.q-t-month .q-panel__aside{flex-basis:auto;margin:0 0 0 auto}
@media (max-width:479px){.q-t-month .q-panel__aside{flex-basis:100%;margin:0}}
.q-t-month .q-t-rings{gap:var(--q-space-1);margin:0 calc(-1 * var(--q-space-1))}
.q-t-rings .q-pace__track{stroke-width:2}
.q-t-rings :is(.q-pace__fill,.q-pace__lag){stroke-width:3.25}
.q-t-rings .q-pace__notch{stroke-width:1.5}
.q-t-month .q-ring__visual{inline-size:min(68px,100%)}
.q-t-month .q-ring__value{font-size:1.1875rem}
.q-t-month .q-ring__of{font-size:var(--q-caption)}
.q-t-month .q-ring__button{gap:var(--q-space-1);padding-block:var(--q-space-1)}
.q-t-month .q-ring__label{font-weight:var(--q-weight-medium);color:var(--q-text-secondary);white-space:nowrap;letter-spacing:-.01em;overflow-wrap:normal;-webkit-hyphens:none;hyphens:none}
.q-t-month .q-ring__status{font-weight:var(--q-weight-strong);font-size:var(--q-caption)}
.q-t-month .q-ring__gap{font-size:var(--q-caption)}
.q-t-month .q-t-kpis__foot{margin:0;padding:0;border:0}
@media (min-width:768px){
 .q-t-month .q-ring__visual{inline-size:84px}
 .q-t-month .q-ring__value{font-size:1.375rem}
}