/* La visite de la vitrine : le dashboard actuel de Claire, « Ma journée » en plein jour (spec du 16/10).
   Image de 1080 × 860, mise à l'échelle par la vitrine. Couleurs et formes reprises d'Avanido (src/styles/v3-theme.css, app.css). */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/fraunces-latin-variable.woff2') format('woff2')}
:root{
  --ink:#182b43;--text:#37465b;--muted:#5c6a7e;--background:#f3f5fa;--line:#dce3ee;--neutral:#f7f9fc;--navy:#1b2b47;
  --success:#226b50;--success-soft:#edf7f1;--success-line:#b8d6c5;
  --warning:#85550d;--warning-soft:#fff7e7;--warning-tint:#f4e4bf;--warning-line:#e4cf9f;--warning-ring:#e3a33a;
  --heading:Manrope,system-ui,sans-serif;--body:'Source Sans 3',system-ui,sans-serif;--voice:'Fraunces',Georgia,serif;
}
[data-section=target]{--section:#3154d5;--section-hover:#2443b7;--section-soft:#edf1ff;--section-tint:#dde5ff;--section-line:#becbf1;--section-panel:#eef2fd}
[data-section=discovery]{--section:#874765;--section-hover:#713953;--section-soft:#faf0f5;--section-tint:#efdce7;--section-line:#dfc1cf;--section-panel:#fbf2f6}
[data-section=network]{--section:#126d6b;--section-hover:#0d5755;--section-soft:#edf8f6;--section-tint:#cfece5;--section-line:#b5d8d4;--section-panel:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:1080px;height:860px;overflow:hidden;background:var(--background)}
body{font-family:var(--body);color:var(--text);-webkit-font-smoothing:antialiased}
ul{list-style:none}
h2,h3,h4{font-family:var(--heading);color:var(--ink)}
.pq-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dash-noscript{padding:40px;font-size:20px}

/* Le dashboard, en retrait : barre latérale, haut de page et titres de rubrique flous, voile léger. */
.dash{position:relative;width:1080px;height:860px;display:grid;grid-template-columns:196px 1fr;overflow:hidden;background:var(--background)}
.dash-side{background:var(--navy);padding:22px 14px;filter:blur(1.6px)}
.dash-logo{background:#fff;border-radius:10px;padding:9px 12px;margin-bottom:18px}
.dash-logo img{display:block;width:auto;height:24px}
.dash-nav{display:grid;gap:6px}
.dash-nav li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#c6d0e3;font-size:14px;line-height:1.25}
.dash-nav i{width:16px;height:16px;flex:none;border:1.6px solid currentColor;border-radius:5px;opacity:.8}
.dash-nav em{margin-left:auto;padding:1px 7px;border-radius:99px;background:#ffffff1a;font-size:11px;font-style:normal}
.dash-nav .is-active{background:#ffffff1a;color:#fff;font-weight:700;box-shadow:inset 3px 0 0 #7d97ff}
.dash-main{position:relative;padding:24px 30px;min-width:0}
.dash-top{display:flex;justify-content:space-between;margin-bottom:22px;font-size:13px;color:var(--muted);filter:blur(1.6px)}
.dash-top strong{color:var(--ink)}
.dash-ready{display:flex;align-items:center;gap:6px;color:var(--success);font-weight:600}
.dash-ready::before{content:"";width:12px;height:12px;border:2px solid currentColor;border-radius:50%}
.dash-head{filter:blur(1.6px)}
.dash-head h2{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--section)}
.pq-count{padding:5px 8px;border-radius:7px;background:var(--section);color:#fff;font:700 13px/1 var(--heading)}
.dash-head p{margin:8px 0 20px;padding-bottom:16px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.dash-head-prev{margin-bottom:18px;opacity:.55}
.dash-head-next{margin-top:26px;opacity:.6;filter:blur(2px)}
.dash-offers{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start}
.dash-veil{position:absolute;inset:0;z-index:2;background:#18263b2e;pointer-events:none}

/* Les cartes, comme dans « Ma journée ». */
.cx-card{display:grid;gap:12px;padding:22px 22px 20px;border-radius:22px;background:#fff;box-shadow:0 1px 3px #14233f0f,0 16px 40px #14233f17}
.cx-focus{position:relative;z-index:3;box-shadow:0 0 0 4px var(--section),0 24px 60px #182b4338}
.cx-back{filter:blur(2.4px);opacity:.55}
.cx-pill{justify-self:start;display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 5px;border-radius:99px;background:var(--section-soft);color:var(--section-hover);font-size:12.5px;font-weight:700}
.cx-pill-plain{padding-left:11px}
.cx-mark{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #becbf1}
.cx-mark img{display:block}
.cx-company{display:flex;align-items:center;gap:10px;font:700 14.5px var(--heading);color:var(--ink)}
.cx-logo{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--section-tint);color:var(--section);font-size:13px;font-weight:800}
.cx-title{font-size:23px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.cx-person{display:flex;align-items:center;gap:12px}
.cx-person .cx-title{font-size:21px}
.cx-avatar{display:grid;place-items:center;flex:none;width:46px;height:46px;border:2px solid var(--section-tint);border-radius:50%;background:var(--section-soft);color:var(--section);font:800 15px var(--heading)}
.cx-role{font-size:13.5px;color:var(--muted)}
.cx-facts{display:flex;flex-wrap:wrap;gap:6px}
.cx-facts li{padding:4px 9px;border:1px solid var(--line);border-radius:8px;background:var(--neutral);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.cx-why{padding:13px 15px 14px;border-radius:6px 18px 18px 18px;background:var(--section-soft)}
.cx-why-k{display:flex;align-items:center;gap:7px;margin-bottom:5px;font-size:12.5px;font-weight:700;color:var(--section-hover)}
.cx-why-t{font:400 17px/1.4 var(--voice);color:var(--ink)}
.cx-analysis{padding:14px 16px 4px;border:1px solid var(--line);border-radius:16px;background:#fafbfd}
.cx-analysis h4{margin-bottom:8px;font-size:15px;font-weight:700}
.cx-analysis dt{font-size:12.5px;font-weight:700;color:var(--section)}
.cx-analysis dd{margin:2px 0 9px;font-size:13.5px;line-height:1.45}
.cx-analysis dd b{color:var(--section)}
.cx-ok{display:flex;align-items:center;gap:6px}
.ic-ok{width:14px;height:14px;flex:none;fill:none;stroke:var(--success);stroke-width:2.4}
.cx-more{display:flex;justify-content:space-between;padding:9px 0 10px;border-top:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--section)}
.cx-cta{padding:11px;border-radius:99px;background:var(--section);color:#fff;text-align:center;font:700 14px var(--heading)}

/* L'élément d'où part la flèche : surligné de la couleur du moment. */
.cx-focus [data-arrow-from]{box-shadow:0 0 0 3px var(--section)}
.cx-focus .cx-cta[data-arrow-from]{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--section)}

/* La fenêtre qui explique, comme dans Avanido. */
.dx{position:absolute;z-index:4;right:24px;top:132px;width:400px;overflow:hidden;border-radius:20px;background:var(--section-panel);box-shadow:0 30px 90px #0f1c3059,0 0 0 1px var(--section-line)}
.dx[hidden]{display:none}
.dx-head{position:relative;padding:20px 58px 18px 22px;background:var(--section);color:#fff}
.dx-kicker{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.dx-head h2{margin-top:5px;color:#fff;font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.dx-sub{margin-top:4px;font-size:13px;opacity:.85}
.dx-close{position:absolute;right:18px;top:18px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--section);font-size:15px}
.dx-content{display:grid;gap:12px;padding:16px 18px 18px}
.dx-panel{overflow:hidden;border:1px solid var(--section-line);border-radius:14px;background:#fff}
.dx-panel h3{padding:9px 14px;background:var(--section-tint);color:var(--section-hover);font:700 13.5px var(--body)}
.dx-body{padding:11px 14px 12px;font-size:13.5px;line-height:1.45}
.dx-caution{border-color:var(--warning-line)}
.dx-caution h3{background:var(--warning-tint);color:var(--warning)}
.dx-caution .dx-body{background:var(--warning-soft)}
.dx-fit li{display:grid;grid-template-columns:1fr 18px 1fr;gap:6px;align-items:start;padding:6px 0;border-bottom:1px dashed var(--line)}
.dx-fit li:first-child{padding-top:0}
.dx-fit li:last-child{padding-bottom:0;border:0}
.dx-fit b{color:var(--ink)}
.dx-fit i{color:var(--section);font-style:normal;font-weight:700;text-align:center}
.dx-cols{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:6px;font-size:12px;font-weight:700;color:var(--section-hover)}
.dx-check li{display:flex;align-items:flex-start;gap:8px;padding:2px 0;color:#5d4a1f}
.ic-ask{width:15px;height:15px;flex:none;margin-top:2px;fill:none;stroke:var(--warning);stroke-width:2;stroke-dasharray:3 3}
.dx-voice{display:flex;gap:9px;font:400 16px/1.4 var(--voice);color:var(--ink)}
.dx-goal{display:grid;gap:8px;padding:9px 12px;border-radius:10px;background:var(--section-soft);font-size:13.5px}
.dx-goal p{margin:0}
.dx-change{justify-self:start;padding:6px 12px;border-radius:99px;background:var(--section);color:#fff;font:700 12.5px var(--heading)}
.dx-goal b{color:var(--ink)}
.dx-message{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:13.5px;line-height:1.5;white-space:pre-line}
.dx-actions{display:flex;gap:8px}
.dx-button,.dx-ghost{padding:10px;border-radius:99px;text-align:center;font:700 13px var(--heading);white-space:nowrap}
.dx-button{flex:1;background:var(--section);color:#fff}
.dx-ghost{flex:1.2;border:1.5px solid var(--section-line);color:var(--section-hover)}
.dx-note{font-size:12.5px;color:var(--muted)}
.dx-cvcheck,.dx-kw{padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:13.5px}
.dx-cvcheck{border:2px solid var(--warning-ring)}
.dx-cvcheck h3,.dx-kw h3{margin-bottom:3px;font-size:14px;font-weight:700}
.dx-kw b{color:var(--success)}
.dx-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.dx-chips span{padding:2px 9px;border:1px solid var(--success-line);border-radius:99px;background:var(--success-soft);color:var(--success);font-size:12.5px;font-weight:600}
.dx-chips .dx-out{border:1.5px dashed var(--warning-ring);background:#fff;color:var(--warning)}
.dx-download{justify-self:start;padding:9px 14px;border-radius:10px;background:var(--section);color:#fff;font:700 13.5px var(--heading)}
.dx-changes li{padding:3px 0}
.dx-changes b{color:var(--ink)}
.dx-new{display:block;margin:3px 0 2px;padding:3px 8px;border-radius:6px;background:var(--section-soft);color:var(--ink);font:400 13.5px/1.4 var(--voice)}

/* La grosse flèche, de la carte à la fenêtre (tracée par demo.js), cerclée de blanc pour ressortir sur le voile. */
.dash-arrow{position:absolute;inset:0;z-index:5;width:100%;height:100%;overflow:visible;pointer-events:none}
.dash-arrow path{fill:none;stroke-linecap:round}
.dash-arrow .dash-arrow-halo{fill:#fff;stroke:#fff;stroke-linejoin:round}
.dash-arrow .dash-arrow-line{stroke:var(--section)}
.dash-arrow .dash-arrow-head,.dash-arrow circle{fill:var(--section)}
.dash-arrow .dash-arrow-dot-halo{fill:#fff}

/* Un seul mouvement, à l'arrivée sur un moment : la fenêtre se pose, puis la flèche se trace jusqu'à elle. */
.is-entering .dx{animation:dx-in .32s cubic-bezier(.2,.8,.2,1) both}
.is-entering .dash-arrow-line{stroke-dasharray:1;animation:arrow-draw .42s cubic-bezier(.4,0,.2,1) .18s both}
.is-entering .dash-arrow-head{animation:arrow-head .16s ease-out .56s both}
@keyframes dx-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes arrow-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes arrow-head{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.is-entering .dx,.is-entering .dash-arrow-line,.is-entering .dash-arrow-head{animation:none!important}}

/* Image réduite (téléphone, classe posée par la vitrine) : carte et départ de la flèche cerclés plus épais. */
.demo-compact .cx-focus{box-shadow:0 0 0 8px var(--section),0 24px 60px #182b4338}
.demo-compact .cx-focus [data-arrow-from]{box-shadow:0 0 0 6px var(--section)}
.demo-compact .cx-focus .cx-cta[data-arrow-from]{box-shadow:0 0 0 4px #fff,0 0 0 10px var(--section)}
.demo-compact .dx{box-shadow:0 30px 90px #0f1c3059,0 0 0 5px var(--section)}

@media(forced-colors:active){.cx-focus,.dx{outline:3px solid CanvasText}.dash-arrow .dash-arrow-line{stroke:CanvasText}.dash-arrow .dash-arrow-head,.dash-arrow circle{fill:CanvasText}}
/* L'entretien (cinquième moment) : la fiche, son point délicat et la phrase prête. */
.dx-pitch{font:400 14px/1.5 var(--voice);color:var(--ink)}
.dx-delicate{margin-bottom:8px;font-size:14px}
.dx-steps dt{margin-top:7px;font-size:12px;font-weight:700;color:var(--warning)}
.dx-steps dd{margin:2px 0 0;font-size:13.5px;line-height:1.45}
.dx-ready{padding:8px 11px;border-radius:8px;background:#fff;border:1px solid var(--warning-line);font:400 14px/1.45 var(--voice);color:var(--ink)}
.dx-cheer{display:flex;gap:8px;margin-top:10px;font:400 14px/1.4 var(--voice);color:var(--ink)}
.dx-muted{margin-top:4px;color:var(--muted);font-size:13px}
.dash[data-history=oui] .dash-nav .is-active{background:transparent;color:#c6d0e3;font-weight:400;box-shadow:none}
.dash[data-history=oui] .dash-nav li:last-child{background:#ffffff1a;color:#fff;font-weight:700;box-shadow:inset 3px 0 0 #7d97ff}