/* Arpentiq — accueil (chat Arpe), kit Margot. Repris TEL QUEL : checklist b2342 respectee de bout en bout. [b2350] Seule intervention : le palier de ses deux menus, sur la bande du produit. */ :root{ --aqh-z-menu:100093; } /* ═══════════════════════════════════════════════════════════════════ arpe-home.css — Arpentiq · page d'accueil (chat Arpe) Namespace .aqh-* · squelette morphable : hero → conversation. Aucune règle body/html/:root — les états vivent sur .aqh-home. ═══════════════════════════════════════════════════════════════════ */ /* ── tokens (retire ce bloc si tes tokens sont déjà globaux) ─────── */ .aqh,[data-theme="light"] .aqh{ --bg:#f7f8fa;--surface:#ffffff;--s2:#f1f3f7;--s3:#e7ebf2; --border:#e4e7ee;--border-hi:#d3d8e3; --text:#14161f;--text-dim:#4a5169;--muted:#8a93ab; --accent:#6b5cf5;--accent-dim:rgba(107,92,245,.09); --chaud:#d64560;--tiede:#c08a2e;--froid:#3d7fc2;--green:#22a06b; --r:8px;--r-lg:12px;--r-xl:14px; --sh-c:0 1px 2px rgba(20,22,31,.04),0 14px 34px -12px rgba(20,22,31,.18); --sh-f:0 1px 2px rgba(20,22,31,.05),0 20px 46px -14px rgba(20,22,31,.22); --sh-m:0 1px 2px rgba(20,22,31,.05),0 18px 44px -12px rgba(20,22,31,.26); --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; } [data-theme="noir"] .aqh,[data-theme="donna"] .aqh,[data-theme="ardoise"] .aqh{ --bg:#0f1115;--surface:#16181d;--s2:#1c1e24;--s3:#23262d; --border:#23262d;--border-hi:#2f333c; --text:#f2f3f7;--text-dim:#a8adbd;--muted:#5f6578; --accent:#8b7bff;--accent-dim:rgba(139,123,255,.12); --chaud:#ff6680;--tiede:#f0c050;--froid:#5ca8ff;--green:#4fd49a; --r:6px;--r-lg:10px;--r-xl:12px; --sh-c:0 1px 2px rgba(0,0,0,.5),0 16px 40px -12px rgba(0,0,0,.7); --sh-f:0 1px 2px rgba(0,0,0,.5),0 22px 52px -14px rgba(0,0,0,.8); --sh-m:0 1px 2px rgba(0,0,0,.5),0 20px 50px -12px rgba(0,0,0,.75); } .aqh{font-family:var(--sans);color:var(--text);-webkit-font-smoothing:antialiased} .aqh *{box-sizing:border-box} .aqh button{font-family:inherit;cursor:pointer} .aqh a{color:inherit;text-decoration:none} /* ── racine : c'est ELLE qui porte les états, jamais ─────── */ .aqh-home{position:relative;display:flex;flex-direction:column;height:100%;min-height:0;background:var(--surface)} /* ── barre du haut ──────────────────────────────────────────────── */ .aqh-top{display:flex;align-items:center;gap:10px;padding:13px 22px;border-bottom:1px solid var(--border);flex-shrink:0} .aqh-conv{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--text-dim); background:transparent;border:0;padding:6px 10px;border-radius:var(--r);transition:.15s} .aqh-conv:hover{background:var(--s2);color:var(--text)} .aqh-conv svg{width:14px;height:14px} .aqh-sp{flex:1} .aqh-ib{width:32px;height:32px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface); color:var(--text-dim);display:grid;place-items:center;transition:.15s;flex-shrink:0} .aqh-ib:hover{background:var(--s2);color:var(--text)} .aqh-ib svg{width:16px;height:16px} /* ── zone défilante ─────────────────────────────────────────────── */ .aqh-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center; padding:32px 24px 0;position:relative;scroll-behavior:smooth} /* hero : le composer tombe au milieu de l'écran, sans hauteur fixe */ .aqh-home:not(.aqh-chatting) .aqh-body{padding-top:max(32px,calc(50vh - 232px))} .aqh-chatting .aqh-body{padding-top:26px;padding-bottom:6px} .aqh-hero{width:100%;max-width:720px;text-align:center; transition:opacity .26s,transform .3s cubic-bezier(.2,.7,.2,1)} .aqh-leaving .aqh-hero{opacity:0;transform:translateY(-16px)} .aqh-chatting .aqh-hero{display:none} .aqh-orb{width:40px;height:40px;border-radius:var(--r-xl);background:var(--accent-dim);color:var(--accent); display:grid;place-items:center;margin:0 auto 18px} .aqh-orb svg{width:20px;height:20px} .aqh-h1{font-size:23px;font-weight:700;letter-spacing:-.028em;line-height:1.15;margin:0} .aqh-digest{font-size:14.5px;color:var(--text-dim);margin:10px 0 0;line-height:1.5} .aqh-digest b{color:var(--text);font-weight:700} .aqh-digest a{border-bottom:1px solid transparent;transition:.15s} .aqh-digest a:hover{border-bottom-color:var(--border-hi)} /* ── composer : LE MÊME nœud DOM dans les deux modes ────────────── */ .aqh-comp{margin-top:26px;background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--r-xl); box-shadow:var(--sh-c);text-align:left;transition:border-color .18s,box-shadow .18s} .aqh-comp.aqh-focus{border-color:color-mix(in srgb,var(--accent) 55%,transparent); box-shadow:var(--sh-f),0 0 0 3px var(--accent-dim)} .aqh-cin{display:flex;align-items:flex-start;gap:11px;padding:14px 14px 10px} .aqh-clip{width:30px;height:30px;border-radius:var(--r);border:0;background:transparent;color:var(--muted); display:grid;place-items:center;flex-shrink:0;transition:.15s} .aqh-clip:hover{background:var(--s2);color:var(--text-dim)} .aqh-clip svg{width:17px;height:17px} .aqh-q{flex:1;min-width:0;border:0;background:transparent;font-family:var(--sans);font-size:15.5px; color:var(--text);outline:none;resize:none;line-height:1.5;padding:5px 0;max-height:132px} .aqh-q::placeholder{color:var(--muted)} .aqh-send{width:34px;height:34px;border-radius:var(--r-lg);border:0;background:var(--text);color:var(--surface); display:grid;place-items:center;flex-shrink:0;opacity:.32;transition:opacity .18s,background .15s} .aqh-send.aqh-on{opacity:1} .aqh-send.aqh-on:hover{background:var(--text-dim)} .aqh-send svg{width:16px;height:16px} .aqh-cf{display:flex;align-items:center;gap:10px;padding:0 14px 12px;flex-wrap:wrap} .aqh-model{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text); background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:5px 9px;transition:.15s} .aqh-model:hover{background:var(--s3)} .aqh-model svg{width:12px;height:12px;color:var(--muted)} .aqh-model .aqh-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)} .aqh-hint{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;color:var(--muted)} .aqh-kbd{font-family:var(--mono);font-size:10px;color:var(--text-dim);background:var(--surface); border:1px solid var(--border);border-radius:5px;padding:1px 5px} /* ── suggestions du hero ────────────────────────────────────────── */ .aqh-sugg{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:18px} .aqh-sg{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text); background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:8px 13px; letter-spacing:-.01em;transition:.15s} .aqh-sg:hover{border-color:var(--border-hi);background:var(--s2)} .aqh-sg svg{width:14px;height:14px;color:var(--accent);flex-shrink:0} .aqh-chatting .aqh-sugg{display:none} /* ── reprendre une conversation ─────────────────────────────────── */ .aqh-resume{display:flex;align-items:center;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:38px; padding-top:22px;border-top:1px solid var(--border)} .aqh-rlb{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;color:var(--muted)} .aqh-rc{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--text-dim); background:transparent;border:1px solid var(--border);border-radius:99px;padding:6px 12px;transition:.15s} .aqh-rc:hover{background:var(--s2);color:var(--text);border-color:var(--border-hi)} .aqh-rc svg{width:13px;height:13px;color:var(--muted)} .aqh-ago{font-family:var(--mono);font-size:10px;color:var(--muted)} .aqh-chatting .aqh-resume{display:none} /* ── briefing : à moitié visible, net au scroll ─────────────────── */ .aqh-brief{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:720px;margin-top:30px; text-align:left;padding-bottom:34px;opacity:.5;filter:saturate(.5);transform:translateY(6px); transition:opacity .45s,filter .45s,transform .45s} .aqh-scrolled .aqh-brief{opacity:1;filter:none;transform:none} .aqh-chatting .aqh-brief{display:none} .aqh-veil{position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;z-index:5;opacity:1; transition:opacity .4s; background:linear-gradient(to top,var(--surface) 18%,color-mix(in srgb,var(--surface) 55%,transparent) 62%,transparent)} .aqh-scrolled .aqh-veil,.aqh-chatting .aqh-veil{opacity:0} .aqh-peek{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6; display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text-dim); background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:6px 13px; box-shadow:0 2px 10px -2px rgba(20,22,31,.14);transition:opacity .3s} .aqh-peek svg{width:13px;height:13px} .aqh-peek:hover{color:var(--text);border-color:var(--border-hi)} .aqh-scrolled .aqh-peek,.aqh-chatting .aqh-peek{opacity:0;pointer-events:none} .aqh-bcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden} .aqh-bh{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--border)} .aqh-bi{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex-shrink:0} .aqh-bi svg{width:13px;height:13px} .aqh-bi.aqh-acc{background:var(--accent-dim);color:var(--accent)} .aqh-bi.aqh-nu{background:var(--s2);color:var(--text-dim)} .aqh-bt{font-size:13px;font-weight:700;letter-spacing:-.015em} .aqh-bc{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted)} .aqh-bl{display:flex;flex-direction:column} .aqh-br{display:flex;align-items:center;gap:10px;padding:10px 13px;transition:background .15s; border:0;background:transparent;width:100%;text-align:left} .aqh-br+.aqh-br{border-top:1px solid var(--border)} .aqh-br:hover{background:var(--s2)} .aqh-btm{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--text-dim);flex-shrink:0;width:38px; font-variant-numeric:tabular-nums} .aqh-bar{width:2.5px;align-self:stretch;border-radius:2px;flex-shrink:0} .aqh-bx{flex:1;min-width:0} .aqh-bn{font-size:13px;font-weight:600;letter-spacing:-.012em;display:block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .aqh-bs{font-size:11px;color:var(--muted);margin-top:2px;display:block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .aqh-sc{font-family:var(--mono);font-size:11px;font-weight:600;border-radius:99px;padding:2px 7px;flex-shrink:0; font-variant-numeric:tabular-nums;color:var(--text-dim);background:var(--s2)} .aqh-sc.aqh-hot{color:#fff;background:var(--chaud)} .aqh-bf{display:flex;align-items:center;gap:7px;padding:9px 13px;border-top:1px solid var(--border); font-size:12px;font-weight:600;color:var(--text-dim);transition:color .15s;border-left:0;border-right:0; border-bottom:0;background:transparent;width:100%} .aqh-bf:hover{color:var(--text)} .aqh-bf svg{width:13px;height:13px} /* ── fil de conversation ────────────────────────────────────────── */ .aqh-thread{display:none;width:100%;max-width:720px;flex-direction:column;gap:20px;padding-bottom:12px} .aqh-chatting .aqh-thread{display:flex} .aqh-msg{animation:aqh-in .34s cubic-bezier(.2,.75,.2,1)} @keyframes aqh-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* bulle utilisateur : blanche + ombre, elle ressort sur le fond blanc */ .aqh-me{align-self:flex-end;max-width:78%;background:var(--surface);border:1px solid var(--border-hi); border-radius:15px;border-top-right-radius:5px;padding:11px 15px;font-size:14.5px;line-height:1.5; letter-spacing:-.01em;box-shadow:0 1px 1px rgba(20,22,31,.03),0 5px 14px -3px rgba(20,22,31,.11); white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word} [data-theme="noir"] .aqh-me{background:var(--s2); box-shadow:0 1px 1px rgba(0,0,0,.4),0 6px 16px -4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04)} /* réponse : orbe + label, pas de bulle */ .aqh-ai{display:flex;gap:12px} .aqh-aorb{width:28px;height:28px;border-radius:var(--r-lg);background:var(--accent-dim);color:var(--accent); display:grid;place-items:center;flex-shrink:0} .aqh-aorb svg{width:15px;height:15px} .aqh-ac{flex:1;min-width:0} .aqh-anm{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:var(--accent);margin-bottom:6px} .aqh-atx{font-size:14.5px;line-height:1.55;color:var(--text);letter-spacing:-.01em;overflow-wrap:anywhere} .aqh-atx b{font-weight:700} .aqh-dots{display:inline-flex;gap:4px;padding:5px 0} .aqh-dots i{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.35; animation:aqh-dt 1.1s ease-in-out infinite} .aqh-dots i:nth-child(2){animation-delay:.15s} .aqh-dots i:nth-child(3){animation-delay:.3s} @keyframes aqh-dt{0%,100%{opacity:.3;transform:translateY(0)}45%{opacity:1;transform:translateY(-3px)}} /* blocs de réponse */ .aqh-list{display:flex;flex-direction:column;gap:7px;margin-top:13px} .aqh-rr{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-lg);padding:10px 12px;transition:.15s} .aqh-rr:hover{border-color:var(--border-hi)} .aqh-av{width:30px;height:30px;border-radius:var(--r-lg);background:var(--s2);border:1px solid var(--border); display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;font-weight:600; color:var(--text-dim);flex-shrink:0} .aqh-cc{flex:1;min-width:0;display:flex;flex-direction:column} .aqh-nm{font-size:13.5px;font-weight:600;letter-spacing:-.01em} .aqh-rs{font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .aqh-pill{font-family:var(--mono);font-size:11px;font-weight:600;border-radius:99px;padding:2px 8px;flex-shrink:0; font-variant-numeric:tabular-nums;color:var(--text-dim);background:var(--s2)} .aqh-pill.aqh-hot{color:#fff;background:var(--chaud)} .aqh-pill.aqh-warm{color:var(--tiede);background:color-mix(in srgb,var(--tiede) 14%,transparent)} .aqh-go{font-size:12.5px;font-weight:600;color:var(--surface);background:var(--text);border:0; border-radius:var(--r);padding:6px 11px;flex-shrink:0;transition:.15s} .aqh-go:hover{background:var(--text-dim)} .aqh-af{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap} .aqh-afb{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text); background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:6px 11px;transition:.15s} .aqh-afb:hover{background:var(--s2);border-color:var(--border-hi)} .aqh-afb svg{width:13px;height:13px;color:var(--accent)} /* ── dock : reçoit le composer en mode conversation ─────────────── */ .aqh-dock{width:100%;display:flex;flex-direction:column;align-items:center;padding:0 24px 28px;flex-shrink:0; transition:padding .34s cubic-bezier(.2,.7,.2,1),background .34s,border-color .34s} .aqh-dock:empty{display:none} .aqh-chatting .aqh-dock{padding-top:14px;border-top:1px solid var(--border);background:var(--surface)} .aqh-dock .aqh-comp{width:100%;max-width:720px;margin-top:0;animation:aqh-dock .42s cubic-bezier(.2,.75,.2,1)} @keyframes aqh-dock{from{transform:translateY(-14px) scale(.985);opacity:.6}to{transform:none;opacity:1}} /* suggestions de suite, au-dessus du composer */ .aqh-next{display:none;width:100%;max-width:720px;gap:7px;align-items:center;overflow-x:auto; scrollbar-width:none;padding:0 1px 11px} .aqh-next::-webkit-scrollbar{display:none} .aqh-chatting .aqh-next{display:flex} .aqh-nb{flex-shrink:0;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;font-size:12.5px; font-weight:600;letter-spacing:-.01em;color:var(--text-dim);background:var(--surface); border:1px solid var(--border);border-radius:99px;padding:7px 13px;transition:.15s} .aqh-nb:hover{color:var(--text);border-color:var(--border-hi);background:var(--s2)} .aqh-nb svg{width:13px;height:13px;color:var(--muted);flex-shrink:0} .aqh-nb:hover svg{color:var(--accent)} /* ── menus (historique · agent) ─────────────────────────────────── */ .aqh-mw{position:relative;display:inline-flex} .aqh-menu{position:absolute;z-index:var(--aqh-z-menu,60);min-width:262px;background:var(--surface); border:1px solid var(--border-hi);border-radius:13px;box-shadow:var(--sh-m);padding:5px; opacity:0;transform:translateY(-6px) scale(.985);pointer-events:none;transition:opacity .15s,transform .15s} .aqh-menu.aqh-on{opacity:1;transform:none;pointer-events:auto} .aqh-menu.aqh-dn{top:calc(100% + 7px);left:0} .aqh-menu.aqh-up{bottom:calc(100% + 8px);left:0} .aqh-mgp{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);padding:9px 10px 5px} .aqh-mi{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-lg); transition:background .13s;border:0;background:transparent;width:100%;text-align:left} .aqh-mi:hover{background:var(--s2)} .aqh-mi svg{width:15px;height:15px;color:var(--muted);flex-shrink:0} .aqh-mt{flex:1;min-width:0;font-size:13.5px;font-weight:500;letter-spacing:-.012em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .aqh-ma{font-family:var(--mono);font-size:10px;color:var(--muted);flex-shrink:0} .aqh-msep{height:1px;background:var(--border);margin:5px 0} .aqh-aic{width:26px;height:26px;border-radius:var(--r);display:grid;place-items:center;flex-shrink:0} .aqh-aic svg{width:14px;height:14px;color:currentColor} .aqh-mx{flex:1;min-width:0} .aqh-mn{font-size:13.5px;font-weight:600;letter-spacing:-.012em;display:block} .aqh-md{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35;display:block} .aqh-mck{color:var(--accent);opacity:0;flex-shrink:0} .aqh-mck svg{width:15px;height:15px;color:currentColor} .aqh-mi.aqh-sel .aqh-mck{opacity:1} @media(max-width:560px){ .aqh-resume{flex-direction:column;gap:8px} .aqh-body{padding-left:16px;padding-right:16px} .aqh-dock{padding-left:16px;padding-right:16px} } @media(max-width:760px){.aqh-brief{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){ .aqh *,.aqh-hero,.aqh-brief,.aqh-veil,.aqh-peek,.aqh-menu{transition:none!important;animation:none!important} }