/* ╔══════════════════════════════════════════════════════════════════════╗ ║ CFA Orientation IA — Pop-up holographique ║ ║ Crédits : exosteeve.fr × scroler.fr ║ ╚══════════════════════════════════════════════════════════════════════╝ */ /* ─── Variables ───────────────────────────────────────────────────────── */ /* 4.0.10 — `.cfaoi-pop-standalone` REJOINT CE BLOC, ET C'EST UN SÉLECTEUR DE PLUS, PAS UNE SECONDE DÉFINITION. L'écran d'accueil de la page dédiée vit À CÔTÉ de la racine, pas dedans : sans cette ligne il n'aurait AUCUN jeton et il aurait fallu recopier les treize valeurs ci-dessous, c'est-à-dire écrire V8 (§10). Sur une page où le pop-up flotte, cette classe n'existe pas — le pop-up ne voit rien de ce lot. */ .cfaoi-pop-root, .cfaoi-pop-standalone { --pop-primary: #00d4ff; --pop-accent: #7c3aed; --pop-bg-deep: #050810; --pop-bg-glass: rgba(8, 12, 24, 0.82); --pop-text: #ecf3ff; --pop-text-muted: #8aa2c4; --pop-text-dim: #5a6f8e; --pop-border: rgba(0, 212, 255, 0.22); --pop-glow: rgba(0, 212, 255, 0.5); --pop-radius-xl: 28px; --pop-radius-lg: 18px; --pop-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.8), 0 0 80px -30px var(--pop-glow); --pop-z: 999999; } /* ─── Reset local ─────────────────────────────────────────────────────── */ .cfaoi-pop-root, .cfaoi-pop-root * { box-sizing: border-box; } /* ─── Root toujours présent (pour le launcher permanent) ──────────────── */ .cfaoi-pop-root { position: fixed; inset: 0; z-index: var(--pop-z); pointer-events: none; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; color: var(--pop-text); } /* ─── Backdrop ────────────────────────────────────────────────────────── */ .cfaoi-pop-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(8, 12, 24, 0.55) 0%, rgba(0, 0, 0, 0.78) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.5s ease; } .cfaoi-pop-root[data-state="open"] .cfaoi-pop-backdrop, .cfaoi-pop-root[data-state="choice"] .cfaoi-pop-backdrop, .cfaoi-pop-root[data-state="pro"] .cfaoi-pop-backdrop, .cfaoi-pop-root[data-state="pro-thanks"] .cfaoi-pop-backdrop, .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-backdrop { opacity: 1; pointer-events: auto; } /* 4.0.4 — Tant que le voile est posé, la page derrière ne défile pas (ni en hauteur, ni en largeur : un site qui déborde montrait sa barre horizontale sous le pop-up). Classe posée par cfaoi-popup.js sur dans les seuls états couvrants ci-dessus, retirée à la fermeture ou à la réduction. */ html.cfaoi-pop-page-lock, html.cfaoi-pop-page-lock body { overflow: hidden !important; } /* ─── Card principale ─────────────────────────────────────────────────── */ .cfaoi-pop-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); /* 2.9.1 — iOS : hauteur dynamique (barre d'adresse) */ overflow-y: auto; background: var(--pop-bg-glass); backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); border: 1px solid var(--pop-border); border-radius: var(--pop-radius-xl); padding: 24px 26px 26px; box-shadow: var(--pop-shadow); opacity: 0; transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; overflow: hidden; } .cfaoi-pop-root[data-state="open"] .cfaoi-pop-card, .cfaoi-pop-root[data-state="choice"] .cfaoi-pop-card, .cfaoi-pop-root[data-state="pro"] .cfaoi-pop-card, .cfaoi-pop-root[data-state="pro-thanks"] .cfaoi-pop-card { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; } .cfaoi-pop-root[data-state="minimized"] .cfaoi-pop-card { transform: translate(-50%, -50%) scale(0.55); opacity: 0; pointer-events: none; } /* ─── State CHATTING : card s'agrandit, chat embarqué visible ───────── */ .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-card { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; width: min(540px, calc(100vw - 24px)); height: min(760px, calc(100vh - 24px)); height: min(760px, calc(100dvh - 24px)); /* 2.9.1 — iOS : hauteur dynamique (barre d'adresse) */ max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); /* 2.9.1 — iOS : hauteur dynamique (barre d'adresse) */ padding: 0; background: #f0f4f8; border-color: rgba(255, 255, 255, 0.4); overflow: hidden; transition: width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease, opacity 0.4s ease; display: flex; flex-direction: column; } .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-card::before, .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-card::after { display: none; } /* 3.5.3 (correctif modale) — DOUBLE EN-TÊTE SUPPRIMÉ. * * Symptôme signalé : en mode conversation, les « étapes de la modale se * chevauchent ». Cause racine : en state chatting le fond de la card devient * CLAIR, mais le « pill » d'identité du pop-up (« Aria · en ligne ») garde la * couleur pensée pour le fond SOMBRE des écrans d'accueil (--pop-text, un blanc * bleuté #ECF3FF). Il devenait donc blanc sur blanc — invisible — TOUT EN * occupant la barre du haut, en doublon avec l'en-tête riche de l'app (avatar + * nom + statut) rendu juste en dessous par cfaoi-app.js. Deux en-têtes empilés, * l'un fantôme : c'est le « chevauchement ». * * Correctif : en chatting, on masque le pill (l'app porte déjà l'identité) et * l'en-tête du pop-up se réduit à sa barre de contrôles (réduire / fermer), * transparente et alignée à droite. Un seul en-tête visible, plus de doublon. * Validé sur le DOM réel de la préproduction avant écriture. */ .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-pill { display: none; } .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-header { padding: 8px 12px; min-height: 0; background: transparent; border-bottom: none; justify-content: flex-end; gap: 8px; flex-shrink: 0; z-index: 10; } .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-icon-btn { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); color: #475569; } .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-icon-btn:hover { background: rgba(37, 99, 235, 0.1); color: #2563eb; border-color: rgba(37, 99, 235, 0.3); } /* ─── Affichage conditionnel : choice / pro / pro-thanks / greeting / chat ─ */ /* Par défaut tout est masqué — chaque écran ne s'affiche que dans son state. */ .cfaoi-pop-choice, .cfaoi-pop-pro, .cfaoi-pop-pro-thanks, .cfaoi-pop-greeting, .cfaoi-pop-chat { display: none; } /* State CHOICE → écran de choix visible */ .cfaoi-pop-root[data-state="choice"] .cfaoi-pop-choice { display: flex; flex-direction: column; animation: cfaoi-pop-screen-in 0.4s ease-out; } /* State PRO → formulaire visible */ .cfaoi-pop-root[data-state="pro"] .cfaoi-pop-pro { display: flex; flex-direction: column; animation: cfaoi-pop-screen-in 0.4s ease-out; } /* ═══ 3.13.35 — « TOUT CET ESPACE VIDE NE SERT À RIEN » ═══════════════════ * * SIGNALÉ EN RECETTE, mot pour mot : « le bouton continuer ne descend jamais en * bas du chat, tout cet espace vide ne sert à rien du coup ». MESURÉ sur devcfa, * à la taille exacte de la capture (1377×903) : **282 px de vide sous le * bouton**, sur une carte de 774 px. * * ─── LA CAUSE N'EST PAS CELLE QU'ON CROIT ──────────────────────────────── * * Le réflexe est d'accuser le journal, plafonné à `max-height: 320px`. C'est * la moitié de l'histoire, et s'y arrêter ne corrige QUE 42 % du défaut * (mesuré : 282 → 163 px). Le vrai coupable est l'HÔTE DE SAISIE : il porte * `flex: 1 1 auto` (2.6.0), donc il RÉCLAME l'espace libre — et il le laisse * vide SOUS son bouton, puisque son contenu est aligné en haut. Mesuré : 345 px * de haut pour 107 px de contenu. * * ─── POURQUOI `0 1 auto` ET SURTOUT PAS `0 0 auto` ─────────────────────── * * ⚠️ CE `flex: 1` N'EST PAS UNE ERREUR : c'est lui qui rend l'hôte défilable * quand une question porte une longue liste de choix (« Y a-t-il des * contraintes importantes du poste ? » → 7 items + Autre + Valider). La carte * est en `overflow: hidden` : un hôte qui ne peut pas RÉTRÉCIR ferait * disparaître le bouton de validation, sans le moindre message. * * `0 1 auto` retire la CROISSANCE et garde le RÉTRÉCISSEMENT. Éprouvé sur les * deux cas, à 1377×903 : * • saisie courte : vide 282 → **44 px** (soit le seul rembourrage), hôte * 345 → 107, journal 176 → 414 ; * • liste de 10 choix : **identique à l'octet** — hôte 371, défile, journal * 150. Le lot est strictement neutre sur le cas qui a motivé `flex: 1`. * * ⚠️ ET ON N'A PAS TOUCHÉ AU PAN `.cfaoi-pop-pro`. Une première version lui * ajoutait `flex: 1; min-height: 0` par analogie avec le chat candidat. Mesuré * avec et sans : rigoureusement le MÊME résultat (688 px, vide 44). Une ligne * qui ne change rien est une ligne qui ment sur ce qui corrige — elle n'est pas * écrite. * * ─── OÙ VA LE VIDE : LE CLIENT A TRANCHÉ ──────────────────────────────── * * Empêcher l'hôte de grandir ne SUPPRIME pas l'espace : ça le DÉPLACE. Il n'y a * pas de troisième option — la carte a une hauteur fixe et le contenu est court. * * ⚠️ LA 3.13.35 AVAIT CHOISI DE TASSER LA CONVERSATION EN BAS (`margin-top: * auto` sur la première ligne du journal, l'idiome des messageries), pour que la * question reste collée au champ de réponse. LE CLIENT L'A REFUSÉ EN RECETTE, * mot pour mot : « les bulles de dialogue sont en bas… je veux un effet chat * classique, bulle de dialogue en haut et la possibilité de répondre en bas ». * * L'ancrage est donc RETIRÉ, et il ne faut pas le remettre : le vide se place * ENTRE la dernière bulle et le champ, c'est-à-dire au milieu — et c'est * exactement ce qui est demandé. Les bulles s'empilent du haut, la zone de * réponse reste au ras du bas. C'est aussi ce que fait le chat du parcours * jeune, qui est la référence explicite depuis la 3.13.28. * * ─── POURQUOI 60 % ET 0.2, ET NON `max-height: none` ───────────────────── * * ⚠️ LAISSER LE JOURNAL CROÎTRE SANS BORNE ÉCRASE LA LISTE DE CHOIX. Mesuré, en * fin de parcours (14 bulles + 10 choix) : l'hôte tombait de 233 à 91 px. Le * poids de compression d'un élément flex est proportionnel à sa taille de base ; * un journal de 1 400 px absorbe presque tout le rétrécissement disponible et * laisse la liste de choix inutilisable. Deux garde-fous, chacun MESURÉ : * • `max-height: 60%` borne la croissance — la zone d'action garde 40 % ; * • `flex-shrink: 0.2` sur l'hôte le protège du rétrécissement, sans le lui * interdire (le §2.6.0 en a besoin pour que les listes longues défilent — * `flex: 0 0 auto` couperait le bouton de validation, la carte étant en * `overflow: hidden`). * • `min-height: 96px` garde deux lignes de bulle visibles quoi qu'il arrive. * * MESURES, à 1377×903, vide sous le bouton — aujourd'hui → après : * court + saisie (la capture) 301 → 47 · court + liste de 10 161 → 44 * long + saisie 170 → 47 · long + liste de 10 30 → 8 * Et l'hôte ne se met JAMAIS à défiler là où il ne défilait pas. * * ⚠️ LE RÉCAP EST EXCLU, ET CE N'EST PAS UN OUBLI. Sur `data-pro-view="recap"`, * `proShowRecap()` remplit l'hôte avec la liste complète des réponses, les * disponibilités et le consentement — un contenu qui dépasse la carte. Laisser * le journal réclamer l'espace l'écraserait. Le récap garde son comportement. */ .cfaoi-pop-root[data-state="pro"]:not([data-pro-view="recap"]) .cfaoi-pop-pro-chat-log { flex: 1 1 auto; min-height: 96px; max-height: 60%; } /* ═══ 3.13.37 — « ON NE DOIT PAS AVOIR À SCROLLER POUR VALIDER UNE RÉPONSE » ═══ * * SIGNALÉ EN RECETTE, trois captures à l'appui : sur la liste des domaines * (15 choix), sur les missions et sur les contraintes, le bouton « Continuer » * était COUPÉ par le bas de la carte. Il fallait faire défiler la zone de * réponse pour l'atteindre. * * CAUSE : la barre d'actions vit DANS `.cfaoi-pop-pro-chat-input-host`, qui est * la zone défilante — et `proRenderInputFor()` remet ce défilement à zéro à * chaque question (`scrollTop = 0`, 2.7.4). Le bouton, dernier enfant, part donc * systématiquement hors champ dès que les choix dépassent. * * ⚠️ ON NE SORT PAS LA BARRE DU CONTENEUR. Ce serait une modification du DOM * produit par `proRenderInputFor()`, `proRenderChoiceInput()` et * `proRenderTextInput()` — trois fonctions, trois écrans, et le §14 interdit de * réécrire un écran existant sans validation visuelle. `position: sticky` obtient * le même résultat sans toucher une ligne de JS : la barre se colle au bas de la * zone visible dès que le contenu défile, et reste à sa place naturelle quand il * tient. * * ⚠️ LE FOND EST OBLIGATOIRE, ET IL DOIT ÊTRE CELUI DE LA CARTE. Sans lui, les * choix défileraient DERRIÈRE le bouton en restant visibles au travers. D'où le * jeton `--pop-pane-bg`, posé une seule fois et lu par la carte ET par la barre. * * Le dégradé du haut évite la coupure nette : le dernier choix s'estompe sous * la barre au lieu d'être tranché. */ .cfaoi-pop-root[data-state="pro"] .cfaoi-pop-pro-chat-actions { position: sticky; bottom: 0; z-index: 2; padding: 10px 0 2px; margin-top: 2px; background: linear-gradient( to bottom, transparent 0, var(--pop-pane-bg, #f0f4f8) 10px, var(--pop-pane-bg, #f0f4f8) 100% ); } .cfaoi-pop-root[data-state="pro"]:not([data-pro-view="recap"]) .cfaoi-pop-pro-chat-input-host { flex: 0 0.2 auto; } /* State PRO-THANKS → remerciement visible */ .cfaoi-pop-root[data-state="pro-thanks"] .cfaoi-pop-pro-thanks { display: flex; flex-direction: column; text-align: center; animation: cfaoi-pop-screen-in 0.4s ease-out; } /* State OPEN → greeting visible (Aria + voix) */ .cfaoi-pop-root[data-state="open"] .cfaoi-pop-greeting { display: block; } /* Si on minimise / réduit depuis greeting, on garde quand même le bloc présent pour que les transitions soient propres */ .cfaoi-pop-root[data-state="minimized"] .cfaoi-pop-greeting, .cfaoi-pop-root[data-state="hidden"] .cfaoi-pop-greeting { display: block; } /* State CHATTING → chat visible */ .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-chat { display: block; flex: 1; min-height: 0; overflow: hidden; animation: cfaoi-pop-chat-in 0.5s ease-out; } @keyframes cfaoi-pop-chat-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes cfaoi-pop-screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Le wrapper du chat embarqué doit remplir l'espace dispo */ .cfaoi-pop-chat .cfaoi-wrapper { height: 100% !important; max-height: none !important; width: 100%; border-radius: 0 !important; box-shadow: none !important; border: none !important; margin: 0; animation: none; } /* Trame holographique discrète */ .cfaoi-pop-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0%, rgba(0, 212, 255, 0.04) 50%, transparent 100%), repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0, 212, 255, 0.018) 3px, rgba(0, 212, 255, 0.018) 4px); pointer-events: none; z-index: 0; } /* Glow d'accent en haut de la card */ .cfaoi-pop-card::after { content: ""; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 320px; height: 240px; background: radial-gradient(ellipse at center, var(--pop-glow) 0%, transparent 65%); opacity: 0.25; pointer-events: none; z-index: 0; } .cfaoi-pop-card > * { position: relative; z-index: 1; } /* ─── Header ──────────────────────────────────────────────────────────── */ .cfaoi-pop-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .cfaoi-pop-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.25); border-radius: 100px; font-size: 11px; font-weight: 600; color: var(--pop-primary); letter-spacing: 0.04em; } .cfaoi-pop-pill-dot { width: 7px; height: 7px; background: var(--pop-primary); border-radius: 50%; box-shadow: 0 0 8px var(--pop-glow); animation: cfaoi-pop-pulse 1.6s ease-in-out infinite; } @keyframes cfaoi-pop-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } .cfaoi-pop-actions { display: flex; gap: 6px; } .cfaoi-pop-icon-btn { width: 30px; height: 30px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9px; color: var(--pop-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; } .cfaoi-pop-icon-btn:hover { background: rgba(0, 212, 255, 0.12); border-color: var(--pop-border); color: var(--pop-primary); } /* ─── Stage : hologramme ──────────────────────────────────────────────── */ .cfaoi-pop-stage { display: flex; align-items: center; justify-content: center; height: 220px; margin: 4px 0 8px; position: relative; } .cfaoi-pop-orbit { position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; margin: 0 auto; /* centrage horizontal explicite */ } .cfaoi-pop-ring { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform-origin: center center; /* on neutralise le décalage de translation que le rotate va appliquer */ transform: translate(-50%, -50%); } .cfaoi-pop-ring-1 { animation: cfaoi-pop-rotate 18s linear infinite; filter: drop-shadow(0 0 8px var(--pop-glow)); } .cfaoi-pop-ring-2 { animation: cfaoi-pop-rotate-rev 22s linear infinite; } .cfaoi-pop-ring-3 { animation: cfaoi-pop-rotate 12s linear infinite; } @keyframes cfaoi-pop-rotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes cfaoi-pop-rotate-rev { from { transform: translate(-50%, -50%) rotate(360deg); } to { transform: translate(-50%, -50%) rotate(0deg); } } .cfaoi-pop-root[data-speaking="true"] .cfaoi-pop-ring-1 { animation-duration: 6s; filter: drop-shadow(0 0 16px var(--pop-glow)); } .cfaoi-pop-root[data-speaking="true"] .cfaoi-pop-ring-2 { animation-duration: 8s; } .cfaoi-pop-root[data-speaking="true"] .cfaoi-pop-ring-3 { animation-duration: 4s; } .cfaoi-pop-visualizer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 220px; height: 220px; pointer-events: none; } /* ─── 1.1.2 — Widget hologramme Aria avec avatar 3D (panneau latéral) ── */ /* On masque le widget central "stage" sur l'écran greeting puisque le widget hologramme est désormais dans le panneau latéral (sinon doublon). Le texte parlé d'Aria, son nom et les boutons restent visibles dans la card. */ .cfaoi-pop-root[data-state="open"] .cfaoi-pop-greeting .cfaoi-pop-stage, .cfaoi-pop-root[data-state="open"] .cfaoi-pop-greeting .cfaoi-pop-identity { display: none; } .cfaoi-pop-avatar-side { position: absolute; /* Centré verticalement comme la card, et collé à sa gauche. La card desktop fait 460px → moitié = 230px. On laisse 28px de gap. 1.1.6 — La zone avatar est désormais un rectangle vertical (portrait), plus un cercle. Largeur : 280px ; hauteur (stage + label) calée par le contenu. Le canvas 3D occupe toute la zone supérieure. */ top: 50%; right: calc(50% + 230px + 28px); transform: translateY(-50%) translateX(50px); width: 280px; pointer-events: none; opacity: 0; transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: calc(var(--pop-z) + 1); } .cfaoi-pop-root[data-state="open"] .cfaoi-pop-avatar-side, .cfaoi-pop-root[data-state="choice"] .cfaoi-pop-avatar-side, .cfaoi-pop-root[data-state="pro"] .cfaoi-pop-avatar-side, .cfaoi-pop-root[data-state="pro-thanks"] .cfaoi-pop-avatar-side, .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-avatar-side { opacity: 1; transform: translateY(-50%) translateX(0); } /* 1.1.7 — En état chatting la card s'élargit à 540px (vs 460px), donc sa demi-largeur passe de 230 à 270. On repousse l'avatar de 40px de plus pour rester complètement à gauche du chat, sans aucun chevauchement. */ /* 3.13.35 — L'AVATAR DÉBORDAIT SUR LA CARTE EMPLOYEUR. * * SIGNALÉ EN RECETTE : « l'onglet de l'avatar déborde sur le chat ». La règle * de base cale l'avatar sur `calc(50% + 230px + 28px)`, et son commentaire dit * pourquoi : « la card desktop fait 460px → moitié = 230px ». La 3.13.28 a * porté la carte EMPLOYEUR à 540 px pour l'aligner sur le parcours candidat — * demi-largeur 270 px. L'avatar, lui, est resté calé sur 258 px : il passait * donc 12 px SOUS la carte, et perdait au passage la respiration de 40 px que * le chat s'était déjà vu accorder. * * ⚠️ LA CORRECTION EXISTAIT DÉJÀ — pour l'état `chatting` seulement. On ne * réécrit pas un second calcul : on ÉTEND celui-ci aux deux états employeur, * dont la carte a exactement la même largeur (`width: min(540px, …)` les * déclare ensemble). Deux blocs pour une seule règle est la cause structurelle * de V8 (§10) — et c'est précisément ce qui a produit ce défaut : la largeur a * été changée à un endroit, l'offset calculé à un autre. * * `[data-pro-view="recap"]` n'est pas concerné : il masque l'avatar (2.7.10). * Sous 1024 px non plus : l'aside est `display: none`. */ .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-avatar-side, .cfaoi-pop-root[data-state="pro"] .cfaoi-pop-avatar-side, .cfaoi-pop-root[data-state="pro-thanks"] .cfaoi-pop-avatar-side { right: calc(50% + 270px + 40px); } /* 2.7.10 — Écran RÉCAP employeur : la card s'élargit à 620px (data-pro-view ="recap", 2.7.8), sa demi-largeur (310px) recouvrait alors l'avatar 3D latéral et son nom (calés pour 460px). À la demande, on FAIT DISPARAÎTRE l'avatar et son nom sur cet écran pour laisser toute la place au formulaire récapitulatif. Fondu doux via la transition d'opacité héritée. L'avatar réapparaît dès qu'on quitte le récap (édition d'une réponse) ou qu'on relance le parcours. */ .cfaoi-pop-root[data-state="pro"][data-pro-view="recap"] .cfaoi-pop-avatar-side { opacity: 0; visibility: hidden; pointer-events: none; } /* 3.9.2 — CRÉATEUR DE CV : la card doit s'élargir pour loger DEUX colonnes (formulaire + aperçu A4), sinon l'aperçu est écrasé dans les 540 px du chat. Même parti pris que l'écran RÉCAP employeur ci-dessus (2.7.10) : on élargit la card ET on efface l'avatar latéral, qui sinon serait recouvert. Déclencheur : `:has(.cfaoi-cv-creator)` — la règle s'active tant que le créateur est monté dans le DOM et se REPLIE d'elle-même dès qu'on en sort (retour, formulaire, « passer »), sans état JS à entretenir. Navigateurs sans `:has()` : la card reste à 540 px (comportement actuel), rien ne casse. */ .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-card:has(.cfaoi-cv-creator) { width: min(980px, calc(100vw - 24px)); } .cfaoi-pop-root[data-state="chatting"]:has(.cfaoi-cv-creator) .cfaoi-pop-avatar-side { opacity: 0; visibility: hidden; pointer-events: none; } /* ─── Stage : conteneur du canvas 3D (1.1.7 — sans halo, sans anneaux) ── */ .cfaoi-pop-avatar-side-stage { position: relative; width: 280px; height: 420px; display: flex; align-items: center; justify-content: center; margin: 0 auto; background: transparent; } /* 1.1.7 — Anneaux "Cortana" supprimés : on garde le markup HTML pour ne pas casser le JS, mais on les masque entièrement. */ .cfaoi-pop-side-ring, .cfaoi-pop-side-ring-1, .cfaoi-pop-side-ring-2, .cfaoi-pop-side-ring-3 { display: none !important; } .cfaoi-pop-root[data-speaking="true"] .cfaoi-pop-side-ring-1, .cfaoi-pop-root[data-speaking="true"] .cfaoi-pop-side-ring-2, .cfaoi-pop-root[data-speaking="true"] .cfaoi-pop-side-ring-3 { display: none !important; } /* ─── Frame portrait : c'est ici que vit le canvas 3D (1.1.6) ─────────── */ /* Plus de border-radius:50%, plus d'overflow:hidden : le canvas remplit tout le rectangle. Le glow et la pulsation sont conservés mais sans masque circulaire. */ .cfaoi-pop-avatar-side-frame { position: relative; width: 100%; height: 100%; overflow: visible; background: transparent; animation: cfaoi-pop-avatar-breathe 3s ease-in-out infinite; } @keyframes cfaoi-pop-avatar-breathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 6px 18px rgba(0, 212, 255, 0.30)); } 50% { transform: scale(1.02); filter: drop-shadow(0 8px 28px rgba(0, 212, 255, 0.55)); } } .cfaoi-pop-root[data-speaking="true"] .cfaoi-pop-avatar-side-frame { animation-duration: 0.9s; } /* 1.1.3 — État "thinking" : pulsation discrète plus rapide que l'idle mais sans le clignotement intense du talk. L'animation idle 3D continue de tourner dessous (pas de switch d'animation), seul le halo CSS s'intensifie de manière rythmée pour signifier la réflexion sans surcharger l'écran. */ .cfaoi-pop-avatar-side[data-aria-state="thinking"] .cfaoi-pop-avatar-side-frame { animation: cfaoi-pop-avatar-think 1.4s ease-in-out infinite; } @keyframes cfaoi-pop-avatar-think { 0%, 100% { transform: scale(1); filter: drop-shadow(0 6px 18px rgba(0, 212, 255, 0.40)); } 50% { transform: scale(1.015); filter: drop-shadow(0 8px 28px rgba(124, 58, 237, 0.60)); } } /* 1.1.6 — Plus de pseudo-élément circulaire : on supprime l'effet conic spin qui n'a plus de sens sur un rectangle. L'animation thinking se limite désormais à la pulsation du drop-shadow ci-dessus. */ /* Le canvas Three.js — pleine taille du frame, 0 par défaut, fade quand prêt (1.1.6 — plus de border-radius : on respecte les pixels du rendu 3D) */ .cfaoi-pop-avatar3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s ease; z-index: 2; /* 1.1.4 — au-dessus du fallback img (z=1) */ } .cfaoi-pop-avatar-side[data-avatar3d-status="ready"] .cfaoi-pop-avatar3d-canvas { opacity: 1; } /* 1.1.3 — Fallback visible si WebGL absent ou si le GLB échoue à charger. On NE cache PLUS le panneau : on remplace simplement le canvas Three.js par le portrait Aria pour conserver l'identité. 1.1.6 — Le fallback est désormais centré dans le rectangle, taille fixe 200×200 cerclé pour rappeler une présence (pas pleine surface). */ .cfaoi-pop-avatar3d-fallback { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; color: var(--pop-primary, #00d4ff); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; overflow: hidden; border-radius: 50%; box-shadow: 0 0 30px rgba(0, 212, 255, 0.5); z-index: 1; /* 1.1.4 — sous le canvas */ } /* 1.1.4 — Le fallback est désormais une contenant une du portrait Aria (cohérent avec le modèle 3D). On la cadre en rond avec object-fit pour qu'elle remplisse exactement le cercle sans déformation. La pulsation discrète est conservée. */ .cfaoi-pop-avatar3d-fallback-img { width: 100%; height: 100%; object-fit: cover; object-position: center center; /* 1.1.6 — centrage strict */ border-radius: 50%; filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.4)); animation: cfaoi-pop-fallback-pulse 3.6s ease-in-out infinite; } @keyframes cfaoi-pop-fallback-pulse { 0%, 100% { transform: scale(1); opacity: 0.96; } 50% { transform: scale(1.025); opacity: 1; } } /* Visible uniquement quand le 3D a échoué (ou n'est pas encore tenté). Quand status="ready" on le masque, le canvas Three.js prend le relais. */ .cfaoi-pop-avatar-side[data-avatar3d-status="error"] .cfaoi-pop-avatar3d-fallback, .cfaoi-pop-avatar-side[data-avatar3d-status="loading"] .cfaoi-pop-avatar3d-fallback { opacity: 1; } .cfaoi-pop-avatar-side[data-avatar3d-status="ready"] .cfaoi-pop-avatar3d-fallback { opacity: 0; } /* Loader (spinner) tant que le module/GLB n'est pas chargé */ .cfaoi-pop-avatar-side-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.4s ease; } .cfaoi-pop-avatar-side[data-avatar3d-status="ready"] .cfaoi-pop-avatar-side-loader, .cfaoi-pop-avatar-side[data-avatar3d-status="error"] .cfaoi-pop-avatar-side-loader { opacity: 0; pointer-events: none; } .cfaoi-pop-avatar-side-spinner { width: 38px; height: 38px; border: 3px solid rgba(0, 212, 255, 0.18); border-top-color: var(--pop-primary); border-radius: 50%; animation: cfaoi-pop-spin-360 0.9s linear infinite; } @keyframes cfaoi-pop-spin-360 { to { transform: rotate(360deg); } } /* ─── Label : eyebrow + nom + statut ──────────────────────────────────── */ .cfaoi-pop-avatar-side-label { margin-top: -8px; text-align: center; color: var(--pop-text); pointer-events: none; } .cfaoi-pop-avatar-side-eyebrow { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pop-text-dim); margin-bottom: 6px; } .cfaoi-pop-avatar-side-name { display: block; font-size: 32px; font-weight: 700; letter-spacing: -0.01em; background: linear-gradient(135deg, var(--pop-primary), var(--pop-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: 0 2px 12px rgba(0, 212, 255, 0.3); } .cfaoi-pop-avatar-side-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; font-weight: 500; color: var(--pop-text-muted); letter-spacing: 0.04em; text-transform: uppercase; } .cfaoi-pop-avatar-side-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.8); animation: cfaoi-pop-pulse 1.8s ease-in-out infinite; } .cfaoi-pop-root[data-speaking="true"] .cfaoi-pop-avatar-side-status-text::after { content: " · parle"; color: var(--pop-primary); } /* 1.1.3 — État erreur : on garde le panneau visible (fallback SVG actif). Avant 1.1.3 le panneau disparaissait avec display:none, ce qui cassait la cohérence visuelle (la card se décalait). Désormais le canvas Three.js reste à opacity:0 et le SVG fallback prend le relais via .cfaoi-pop-avatar3d-fallback. On masque uniquement le spinner pour éviter qu'il continue à tourner après échec. */ .cfaoi-pop-avatar-side[data-avatar3d-status="error"] .cfaoi-pop-avatar-side-spinner { display: none; } /* ─── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 980px) { /* 1.1.6 — Sur écrans étroits : version compacte rectangulaire en haut-gauche. Plus d'overflow circulaire, le canvas remplit son cadre. */ .cfaoi-pop-avatar-side { top: 14px; right: auto; left: 14px; width: 150px; transform: translateX(-30px); } .cfaoi-pop-root[data-state="open"] .cfaoi-pop-avatar-side, .cfaoi-pop-root[data-state="choice"] .cfaoi-pop-avatar-side, .cfaoi-pop-root[data-state="pro"] .cfaoi-pop-avatar-side, .cfaoi-pop-root[data-state="pro-thanks"] .cfaoi-pop-avatar-side, .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-avatar-side { transform: translateX(0); } .cfaoi-pop-avatar-side-stage { width: 150px; height: 220px; } .cfaoi-pop-avatar-side-spinner { width: 26px; height: 26px; border-width: 2px; } .cfaoi-pop-avatar-side-label { margin-top: 4px; } .cfaoi-pop-avatar-side-eyebrow { font-size: 8.5px; letter-spacing: 0.16em; margin-bottom: 2px; } .cfaoi-pop-avatar-side-name { font-size: 17px; } .cfaoi-pop-avatar-side-status { font-size: 9px; gap: 4px; margin-top: 3px; } /* Quand on est en chatting, le popup prend toute la largeur sur mobile — on a besoin que l'avatar reste lisible mais ne masque rien d'important */ .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-avatar-side { top: 8px; left: 8px; width: 120px; } .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-avatar-side-stage { width: 120px; height: 170px; } .cfaoi-pop-root[data-state="chatting"] .cfaoi-pop-avatar-side-label { display: none; } } @media (max-width: 480px) { .cfaoi-pop-avatar-side { width: 120px; top: 8px; left: 8px; } .cfaoi-pop-avatar-side-stage { width: 120px; height: 175px; } .cfaoi-pop-avatar-side-name { font-size: 14px; } .cfaoi-pop-avatar-side-eyebrow { font-size: 7.5px; letter-spacing: 0.12em; } .cfaoi-pop-avatar-side-status { display: none; } } .cfaoi-pop-core { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(0, 212, 255, 0.5), rgba(124, 58, 237, 0.4) 60%, transparent 100%); box-shadow: 0 0 30px rgba(0, 212, 255, 0.5), inset 0 0 25px rgba(0, 212, 255, 0.4); animation: cfaoi-pop-breathe 3s ease-in-out infinite; z-index: 3; } svg.cfaoi-pop-core-icon { width: 50px; height: 50px; } .cfaoi-pop-core-glow { position: absolute; inset: -22px; border-radius: 50%; background: radial-gradient(circle, var(--pop-glow) 0%, transparent 70%); opacity: 0.45; z-index: -1; } .cfaoi-pop-core-icon { color: #ffffff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)); z-index: 2; } @keyframes cfaoi-pop-breathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(0, 212, 255, 0.5), inset 0 0 25px rgba(0, 212, 255, 0.4); } 50% { transform: scale(1.08); box-shadow: 0 0 50px rgba(0, 212, 255, 0.8), inset 0 0 35px rgba(0, 212, 255, 0.6); } } .cfaoi-pop-root[data-speaking="true"] .cfaoi-pop-core { animation: cfaoi-pop-breathe 0.9s ease-in-out infinite; } /* ─── Identité ────────────────────────────────────────────────────────── */ .cfaoi-pop-identity { text-align: center; margin: 4px 0 14px; } .cfaoi-pop-eyebrow { margin: 0 0 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pop-text-dim); } .cfaoi-pop-name { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--pop-primary) 0%, #ffffff 50%, var(--pop-accent) 100%); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: cfaoi-pop-shimmer 6s ease-in-out infinite; line-height: 1.1; } @keyframes cfaoi-pop-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ─── Speech : présentation conversationnelle (PAS chatbox) ───────────── */ .cfaoi-pop-speech { margin: 6px 0 18px; text-align: center; min-height: 88px; } .cfaoi-pop-line { margin: 0 0 10px; font-size: 17px; font-weight: 400; line-height: 1.45; letter-spacing: -0.005em; color: var(--pop-text); /* État initial : invisible et décalé vers le bas */ opacity: 0; transform: translateY(8px); filter: blur(2px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease; } /* Quand révélée (classe ajoutée par JS) */ .cfaoi-pop-line.is-revealed { opacity: 0.78; transform: translateY(0); filter: blur(0); } /* Quand activement parlée (classe ajoutée par JS) */ .cfaoi-pop-line.is-active { opacity: 1; color: #ffffff; text-shadow: 0 0 24px rgba(0, 212, 255, 0.25); } /* Première phrase = présentation : un peu plus grosse */ .cfaoi-pop-line[data-index="0"] { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; color: #ffffff; margin-bottom: 14px; } /* Dernière phrase si question : italique léger */ .cfaoi-pop-line.is-question { font-style: italic; font-size: 17px; color: var(--pop-primary); margin-top: 14px; } /* ─── Listening (barres animées) ──────────────────────────────────────── */ .cfaoi-pop-listening { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 14px; margin-bottom: 18px; opacity: 0; transition: opacity 0.3s ease; } .cfaoi-pop-root[data-speaking="true"] .cfaoi-pop-listening { opacity: 1; } .cfaoi-pop-bar { width: 3px; height: 3px; background: var(--pop-primary); border-radius: 100px; box-shadow: 0 0 6px var(--pop-glow); animation: cfaoi-pop-bar-bounce 1s ease-in-out infinite; } .cfaoi-pop-bar:nth-child(1) { animation-delay: 0s; } .cfaoi-pop-bar:nth-child(2) { animation-delay: 0.15s; } .cfaoi-pop-bar:nth-child(3) { animation-delay: 0.3s; } .cfaoi-pop-bar:nth-child(4) { animation-delay: 0.45s; } .cfaoi-pop-bar:nth-child(5) { animation-delay: 0.6s; } @keyframes cfaoi-pop-bar-bounce { 0%, 100% { height: 3px; opacity: 0.5; } 50% { height: 14px; opacity: 1; } } /* ─── Footer (CTA principal + skip) ───────────────────────────────────── */ .cfaoi-pop-footer { display: flex; flex-direction: column; align-items: stretch; gap: 8px; } .cfaoi-pop-cta { width: 100%; padding: 15px 22px; background: linear-gradient(135deg, var(--pop-primary), var(--pop-accent)); color: #ffffff; border: none; border-radius: 14px; font-size: 15.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.25s ease; box-shadow: 0 10px 28px -8px rgba(0, 212, 255, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; position: relative; overflow: hidden; font-family: inherit; } .cfaoi-pop-cta::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.65s ease; } .cfaoi-pop-cta:hover::before { left: 100%; } .cfaoi-pop-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(0, 212, 255, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.2) inset; } .cfaoi-pop-cta:active { transform: translateY(0); } .cfaoi-pop-cta svg { transition: transform 0.25s ease; } .cfaoi-pop-cta:hover svg { transform: translateX(3px); } .cfaoi-pop-skip { background: transparent; border: none; color: var(--pop-text-dim); font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 8px; transition: color 0.2s ease; font-family: inherit; } .cfaoi-pop-skip:hover { color: var(--pop-text-muted); } /* ─── Crédits ─────────────────────────────────────────────────────────── */ .cfaoi-pop-credits { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.05); text-align: center; font-size: 10px; letter-spacing: 0.08em; color: var(--pop-text-dim); font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; display: flex; justify-content: center; align-items: center; gap: 8px; } .cfaoi-pop-credits a { color: inherit; text-decoration: none; transition: color 0.2s ease; pointer-events: auto; } .cfaoi-pop-credits a:hover { color: var(--pop-primary); } /* ─── Bulle minimisée (bas-droite) ────────────────────────────────────── */ .cfaoi-pop-bubble { position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; background: linear-gradient(135deg, var(--pop-primary), var(--pop-accent)); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 50%; color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px -8px rgba(0, 212, 255, 0.5), 0 0 24px -4px var(--pop-glow); transform: scale(0); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; padding: 0; z-index: var(--pop-z); } .cfaoi-pop-root[data-state="minimized"] .cfaoi-pop-bubble { transform: scale(1); pointer-events: auto; } .cfaoi-pop-bubble:hover { transform: scale(1.1); } .cfaoi-pop-bubble-pulse { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--pop-primary); opacity: 0; animation: cfaoi-pop-bubble-ping 2s ease-out infinite; } @keyframes cfaoi-pop-bubble-ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.55); opacity: 0; } } /* ─── Launcher permanent (bas-gauche) ─────────────────────────────────── */ /* 2.5.6 — Refonte visuelle : on passe du gros bloc sombre (rgba 8,12,24) à un bouton flottant clair, compact, plus discret et professionnel. La ré-affirmation finale est portée par cfaoi-theme-shield.css 2.5.6 (qui doit gagner sur la cascade du shield reset des