/* oriq-advisor.css — Conseiller IA Oriq, widget flottant global (bas droite). Composant 100% autonome : couleurs explicites (jamais héritées du thème de la page), monté par oriq-advisor.js sur toutes les pages du site. */ .oriq-advisor { --oa-brand: #0066ff; --oa-brand-deep: #0047b3; --oa-ink: #0a0c10; --oa-muted: #5b6577; --oa-line: #e6e9f1; --oa-surface: #ffffff; position: fixed; right: 24px; bottom: 24px; z-index: 2147483000; font-family: inherit; color: var(--oa-ink); transition: bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* Tant que le bandeau cookies est affiché, on remonte le widget au-dessus (le bandeau pose data-consent + --consent-h sur , voir consent.js). */ :root[data-consent] .oriq-advisor { bottom: calc(24px + var(--consent-h, 0px)); } /* --- Lanceur (bulle) --- */ .oriq-advisor__launcher { position: relative; display: flex; align-items: center; gap: 0.55rem; padding: 0; width: 60px; height: 60px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--oa-brand), var(--oa-brand-deep)); box-shadow: 0 14px 34px -10px rgba(0, 74, 179, 0.6), 0 2px 6px rgba(4, 12, 40, 0.18); transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, width 0.28s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; white-space: nowrap; } .oriq-advisor__launcher:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -10px rgba(0, 74, 179, 0.68), 0 3px 8px rgba(4, 12, 40, 0.2); } .oriq-advisor__launcher:focus-visible { outline: 3px solid rgba(0, 102, 255, 0.4); outline-offset: 3px; } .oriq-advisor__launcher svg { flex: none; width: 26px; height: 26px; margin: 0 17px; transition: margin 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .oriq-advisor__launcher-label { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; opacity: 0; max-width: 0; transition: opacity 0.2s ease, max-width 0.28s ease; } /* Forme allongée : au survol sur desktop, la bulle révèle « Une question ? » */ @media (hover: hover) and (min-width: 700px) { .oriq-advisor__launcher:hover, .oriq-advisor__launcher.is-wide { width: 210px; } .oriq-advisor__launcher:hover svg, .oriq-advisor__launcher.is-wide svg { margin: 0 12px 0 18px; } .oriq-advisor__launcher:hover .oriq-advisor__launcher-label, .oriq-advisor__launcher.is-wide .oriq-advisor__launcher-label { opacity: 1; max-width: 140px; } } /* Halo de pulsation, discret, pour attirer l'oeil sans agresser */ .oriq-advisor__launcher::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.45); animation: oaPulse 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite; pointer-events: none; } @keyframes oaPulse { 0% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.4); } 60%, 100% { box-shadow: 0 0 0 16px rgba(0, 102, 255, 0); } } .oriq-advisor.is-open .oriq-advisor__launcher::after { animation: none; } /* Pastille de disponibilité (point vert) */ .oriq-advisor__badge { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; background: #22c55e; border: 2.5px solid #fff; } /* --- Amorce (teaser) : petite invitation qui glisse à gauche du lanceur --- */ .oriq-advisor__teaser { position: absolute; bottom: 74px; right: 0; width: 250px; background: #fff; color: var(--oa-ink); border: 1px solid var(--oa-line); border-radius: 16px 16px 4px 16px; padding: 0.7rem 2rem 0.72rem 0.9rem; font-size: 0.9rem; line-height: 1.35; box-shadow: 0 18px 44px -18px rgba(4, 12, 40, 0.4); opacity: 0; transform: translateY(6px) scale(0.96); transform-origin: bottom right; transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .oriq-advisor__teaser.is-shown { opacity: 1; transform: none; pointer-events: auto; } .oriq-advisor__teaser strong { color: var(--oa-brand); font-weight: 800; } .oriq-advisor__teaser-close { position: absolute; top: 5px; right: 6px; width: 20px; height: 20px; border: 0; background: none; color: var(--oa-muted); font-size: 1.05rem; line-height: 1; cursor: pointer; border-radius: 50%; } .oriq-advisor__teaser-close:hover { background: #f1f4f9; color: var(--oa-ink); } /* --- Panneau de chat --- */ .oriq-advisor__panel { position: absolute; right: 0; bottom: 74px; width: 384px; height: min(560px, 78vh); display: flex; flex-direction: column; background: var(--oa-surface); border: 1px solid var(--oa-line); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(4, 12, 40, 0.45), 0 6px 18px rgba(4, 12, 40, 0.12); transform-origin: bottom right; opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .oriq-advisor.is-open .oriq-advisor__panel { opacity: 1; transform: none; pointer-events: auto; } .oriq-advisor__header { display: flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1rem; color: #fff; background: linear-gradient(135deg, var(--oa-brand), var(--oa-brand-deep)); } .oriq-advisor__avatar { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); display: grid; place-items: center; } .oriq-advisor__avatar svg { width: 20px; height: 20px; } .oriq-advisor__avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid var(--oa-brand-deep); } .oriq-advisor__titles { flex: 1 1 auto; min-width: 0; } .oriq-advisor__title { margin: 0; font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; } .oriq-advisor__status { margin: 1px 0 0; font-size: 0.76rem; opacity: 0.85; } .oriq-advisor__close { flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 1.15rem; line-height: 1; cursor: pointer; transition: background 0.15s ease; } .oriq-advisor__close:hover { background: rgba(255, 255, 255, 0.28); } .oriq-advisor__log { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.55rem; background: radial-gradient(120% 60% at 100% 0%, rgba(0, 102, 255, 0.05), transparent 60%), #f7f9fc; } .oriq-advisor__msg { max-width: 84%; padding: 0.62rem 0.85rem; border-radius: 15px; font-size: 0.93rem; line-height: 1.42; white-space: pre-wrap; word-wrap: break-word; } .oriq-advisor__msg--user { align-self: flex-end; color: #fff; background: linear-gradient(135deg, var(--oa-brand), var(--oa-brand-deep)); border-bottom-right-radius: 5px; } .oriq-advisor__msg--bot { align-self: flex-start; color: var(--oa-ink); background: #fff; border: 1px solid var(--oa-line); border-bottom-left-radius: 5px; box-shadow: 0 10px 30px -20px rgba(4, 12, 40, 0.35); } .oriq-advisor__msg--bot.is-typing { color: var(--oa-muted); font-style: italic; box-shadow: none; } .oriq-advisor__msg--err { align-self: stretch; max-width: 100%; color: #b42318; background: #fef3f2; border: 1px solid #fecdca; border-radius: 12px; font-size: 0.88rem; } .oriq-advisor__ask { display: flex; gap: 0.5rem; padding: 0.7rem; border-top: 1px solid var(--oa-line); background: #fff; } .oriq-advisor__ask input { flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 0.94rem; color: var(--oa-ink) !important; -webkit-text-fill-color: var(--oa-ink); caret-color: var(--oa-brand); background: #f1f4f9 !important; border: 1.5px solid transparent; border-radius: 12px; padding: 0.7rem 0.9rem; transition: border-color 0.15s ease, background 0.15s ease; } .oriq-advisor__ask input::placeholder { color: #8a93a6 !important; -webkit-text-fill-color: #8a93a6; opacity: 1; } .oriq-advisor__ask input:focus { outline: none; border-color: var(--oa-brand); background: #fff !important; } .oriq-advisor__ask input:disabled { opacity: 0.7; } .oriq-advisor__ask button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--oa-brand), var(--oa-brand-deep)); display: grid; place-items: center; transition: transform 0.15s ease, opacity 0.15s ease; } .oriq-advisor__ask button svg { width: 20px; height: 20px; } .oriq-advisor__ask button:hover { transform: translateY(-1px); } .oriq-advisor__ask button:disabled { opacity: 0.5; cursor: default; transform: none; } .oriq-advisor__legal { margin: 0; padding: 0 0.7rem 0.6rem; font-size: 0.68rem; color: var(--oa-muted); text-align: center; background: #fff; } /* --- Mobile --- */ @media (max-width: 480px) { .oriq-advisor { right: 14px; bottom: 14px; } :root[data-consent] .oriq-advisor { bottom: calc(14px + var(--consent-h, 0px)); } .oriq-advisor__panel { width: calc(100vw - 28px); height: min(72vh, 560px); bottom: 72px; } .oriq-advisor__teaser { width: min(72vw, 240px); } } /* --- Accessibilité : mouvement réduit --- */ @media (prefers-reduced-motion: reduce) { .oriq-advisor__launcher, .oriq-advisor__panel, .oriq-advisor__teaser, .oriq-advisor__launcher::after { transition: none; animation: none; } }