/* ═══ LE CHAT ═══ */ .ch-btn{ position:fixed;right:16px;z-index:130; bottom:calc(16px + env(safe-area-inset-bottom)); width:46px;height:46px;border-radius:50%; /* Fond blanc, trait vert : le cercle plein faisait deux aplats sombres l'un sur l'autre avec le ticket doré juste au-dessus. */ background:#fff;color:var(--forest,#2A3D2F); border:1px solid rgba(42,61,47,.12);cursor:pointer;padding:0; display:grid;place-items:center; box-shadow:0 8px 22px -8px rgba(30,40,32,.35); transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .25s ease; } .ch-btn:active{transform:scale(.92);background:var(--mist,#E8E2D9)} /* Il disparaît pendant le défilement, au même rythme que la pastille coupon posée juste au-dessus. */ .ch-btn.away{opacity:0;transform:translateX(70px);pointer-events:none} /* Panier ouvert : le bouton s'efface, comme la pastille coupon. Il était à 130, au-dessus du tiroir à 120. */ body.locked .ch-btn, body.drawer-locked .ch-btn{opacity:0;transform:translateX(70px);pointer-events:none} .ch-btn svg{width:21px;height:21px;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* Sur les pages à barre du bas, on remonte le bouton pour ne pas le poser dessus. */ /* Une classe posée sur plutôt que :has() : le sélecteur dépendait des noms de barres, qui diffèrent d'une page à l'autre — bottom-nav, buybar, actionbar. Une classe explicite ne peut pas se tromper. */ body.has-bottom-bar .ch-btn{ bottom:calc(88px + env(safe-area-inset-bottom)) } .ch-bg{ position:fixed;inset:0;z-index:420; background:rgba(20,30,22,.55); backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px); display:flex;align-items:flex-end;justify-content:center; opacity:0;pointer-events:none;transition:opacity .28s ease; } .ch-bg.on{opacity:1;pointer-events:auto} @media (min-width:640px){ .ch-bg{align-items:center} } .ch{ width:100%;max-width:440px;height:88vh;max-height:640px; background:var(--parchment,#F7F2EA); border-radius:22px 22px 0 0; display:flex;flex-direction:column;overflow:hidden; transform:translateY(28px); transition:transform .32s cubic-bezier(.22,1,.36,1); } .ch-bg.on .ch{transform:none} @media (min-width:640px){ .ch{border-radius:22px;height:76vh} } .ch-head{ flex:none;display:flex;align-items:center;justify-content:space-between; gap:12px;padding:16px 18px;background:var(--ivory,#FDFAF5); border-bottom:1px solid rgba(42,61,47,.08); } .ch-head-k{ font-family:'Playfair Display',serif;font-size:15px;font-weight:700; color:var(--forest,#2A3D2F);letter-spacing:.16em; } .ch-head-t{ font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px; color:var(--soft,#7A7268);margin-top:1px; } .ch-x{ flex:none;width:32px;height:32px;border-radius:50%; background:var(--parchment,#F7F2EA);border:none;cursor:pointer;padding:0; display:grid;place-items:center;color:var(--forest,#2A3D2F); } .ch-x:active{background:var(--mist,#E8E2D9)} .ch-x svg{width:16px;height:16px;fill:none;stroke:currentColor; stroke-width:1.9;stroke-linecap:round} .ch-body{flex:1;overflow-y:auto;padding:16px 18px;-webkit-overflow-scrolling:touch} .ch-line{display:flex;margin-bottom:11px} .ch-line.me{justify-content:flex-end} .ch-bub{ max-width:82%;padding:11px 14px;border-radius:16px; font-family:'Inter',sans-serif;font-size:13.5px;font-weight:300; line-height:1.65; } .ch-line.bot .ch-bub{ background:var(--ivory,#FDFAF5);color:var(--onyx,#1A1A1A); border-bottom-left-radius:5px; } .ch-line.me .ch-bub{ background:var(--forest,#2A3D2F);color:var(--ivory,#FDFAF5); border-bottom-right-radius:5px; } .ch-dots{display:flex;gap:4px;align-items:center;padding:14px} .ch-dots i{ width:5px;height:5px;border-radius:50%;background:var(--sage,#8FA47A); animation:chDot 1.2s ease-in-out infinite; } .ch-dots i:nth-child(2){animation-delay:.16s} .ch-dots i:nth-child(3){animation-delay:.32s} @keyframes chDot{0%,60%,100%{opacity:.3}30%{opacity:1}} .ch-foot{ flex:none;padding:13px 16px; padding-bottom:calc(13px + env(safe-area-inset-bottom)); background:var(--ivory,#FDFAF5);border-top:1px solid rgba(42,61,47,.08); } .ch-form{display:flex;flex-direction:column} .ch-in{ width:100%;font-family:'Inter',sans-serif;font-size:16px;font-weight:300; color:var(--onyx,#1A1A1A);background:#fff; border:1px solid rgba(42,61,47,.16);border-radius:11px; padding:12px 14px;margin-bottom:8px; } .ch-in:focus{outline:none;border-color:var(--sage,#8FA47A)} .ch-go{ font-family:'Inter',sans-serif;font-size:12px;font-weight:600; letter-spacing:.12em;text-transform:uppercase; color:var(--ivory,#FDFAF5);background:var(--forest,#2A3D2F); border:none;border-radius:999px;padding:14px;cursor:pointer; } .ch-go:active{background:#1e2e22} .ch-row{display:flex;gap:9px;align-items:center} .ch-ask{flex:1;margin-bottom:0} .ch-send{ flex:none;width:44px;height:44px;border-radius:50%; background:var(--forest,#2A3D2F);color:var(--ivory,#FDFAF5); border:none;cursor:pointer;padding:0;display:grid;place-items:center; } .ch-send:active{background:#1e2e22} .ch-send svg{width:18px;height:18px;fill:currentColor;stroke:none} .ch-msg{ display:none;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:300; color:#8C4A3F;background:rgba(201,168,150,.18); border-radius:9px;padding:10px 12px;margin-bottom:8px;line-height:1.6; } .ch-msg.on{display:block} .ch-fine{ font-family:'Inter',sans-serif;font-size:11px;font-weight:300; color:var(--soft,#7A7268);line-height:1.6;margin-top:10px;text-align:center; } .ch-fine a{color:var(--forest,#2A3D2F)} @media (prefers-reduced-motion:reduce){ .ch-bg,.ch,.ch-btn{transition:none} .ch-dots i{animation:none;opacity:.6} }