/* Visio truquée (affaire deepfake) : interface de visio sombre, visage illustré animé. */
.visio-page{background:#10151f;color:#e8eef8;min-height:100%;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;container-type:inline-size}
.visio-page .request-demo-notice{margin:0}
.visio-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 14px;border-bottom:1px solid #263247}
.visio-head strong{font-size:14px}
.visio-head span{font-size:12px;color:#a9b6cc;display:inline-flex;align-items:center;gap:6px}
.visio-head span i{width:8px;height:8px;border-radius:50%;background:#e5484d}
.visio-lock{margin-left:auto}
.visio-layout{display:grid;grid-template-columns:1fr 280px;gap:12px;padding:12px}
.visio-stage{display:flex;flex-direction:column;gap:10px;min-width:0}
.visio-tiles{display:grid;grid-template-columns:1fr 150px;gap:10px}
.visio-tile{position:relative;overflow:hidden;border-radius:12px;background:#1d2635;aspect-ratio:16/10;display:grid;place-items:center;min-height:0}
.visio-tile-main{border:2px solid transparent;transition:border-color .2s}
.visio-tile-main.is-speaking{border-color:#4fd18b}
.visio-side{display:flex;flex-direction:column;gap:10px}
.visio-side .visio-tile{aspect-ratio:4/3}
.visio-initials{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#3b4a63;font-weight:800;font-size:18px}
.visio-tile-main .visio-initials{width:84px;height:84px;font-size:28px}
.visio-off{position:absolute;top:8px;right:8px;font-size:11px;color:#a9b6cc}
.visio-name{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:6px;background:#0009;font-size:12px}
.visio-hd{position:absolute;top:8px;left:8px;font-size:10px;font-weight:800;padding:2px 5px;border-radius:4px;background:#0007}
.df-face{display:block;width:100%;height:100%;object-fit:cover}
.visio-panel{display:flex;flex-direction:column;gap:10px;min-width:0}
.visio-panel h3{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#a9b6cc}
.visio-transcript{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto}
.visio-line{padding:8px 10px;border-radius:10px;background:#1d2635}
.visio-line small{display:block;font-size:11px;color:#a9b6cc;margin-bottom:4px}
.visio-line p{margin:6px 0 0;font-size:14px;line-height:1.45}
.visio-line .voice-note{background:#0f1520;border-color:#33415a;max-width:none}
.visio-line .voice-note-time{color:#a9b6cc}
.visio-you{background:#24406b}
.visio-chat{padding:10px;border-radius:10px;background:#1a2433;border:1px solid #33415a}
.visio-chat small{font-size:11px;color:#a9b6cc}
.visio-chat p{margin:4px 0 8px;font-size:14px;line-height:1.45}
.visio-pay,.visio-ask,.visio-leave{min-height:44px;padding:8px 14px;border-radius:10px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.visio-pay{width:100%;border:0;background:#4f8bd6;color:#fff}
.visio-actions{display:flex;flex-wrap:wrap;gap:8px}
.visio-ask{border:1px solid #4f8bd6;background:#16233a;color:#dbe8ff}
.visio-leave{border:0;background:#e5484d;color:#fff;margin-left:auto}
.visio-page button:focus-visible{outline:3px solid #f0b74d;outline-offset:2px}
/* Le visage : respiration, clignements, bouche qui parle, contour qui scintille. */
.df-person{transform-origin:160px 200px;animation:df-breathe 5s ease-in-out infinite}
.df-head{transform-origin:160px 120px;animation:df-sway 7s ease-in-out infinite}
.df-eyes{transform-origin:160px 81px;animation:df-blink 4.3s infinite}
.df-mouth{transform-origin:160px 108px;transform:scaleY(.45)}
.is-speaking .df-mouth{animation:df-talk .32s ease-in-out infinite .08s}
.df-seam{opacity:.15;animation:df-seam 2.6s steps(3) infinite}
.df-skin{filter:saturate(1.15)}
@keyframes df-breathe{50%{transform:translateY(1.5px) scale(1.004)}}
@keyframes df-sway{0%,100%{transform:rotate(0)}40%{transform:rotate(1.2deg)}70%{transform:rotate(-.8deg)}}
@keyframes df-blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
@keyframes df-talk{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1.15)}}
@keyframes df-seam{0%,60%{opacity:.12}70%{opacity:.6}80%{opacity:.2}}
/* Tourner la tête : le visage fabriqué se déforme, se décale et se brouille. */
.is-glitch .df-head{animation:df-turn 1.9s steps(6) forwards}
.is-glitch .df-seam{opacity:.9;animation:none;stroke:#ffe3cf}
.is-glitch::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 6px,#ff3b6b22 6px 9px,#0000 9px 15px,#3bd0ff22 15px 18px);mix-blend-mode:screen;animation:df-scan .25s steps(2) infinite;pointer-events:none}
@keyframes df-turn{0%{transform:none;filter:none}20%{transform:translateX(6px) skewX(-6deg);filter:blur(1px) hue-rotate(20deg)}40%{transform:translateX(-8px) scaleX(.9) skewX(8deg);filter:blur(2.5px) hue-rotate(-30deg)}60%{transform:translateX(10px) scaleX(.8);filter:blur(4px) contrast(1.6)}80%{transform:translateX(-4px) scaleX(.85) skewX(-10deg);filter:blur(6px) saturate(2)}100%{transform:translateX(0) scaleX(.85);filter:blur(8px)}}
@keyframes df-scan{to{transform:translateY(9px)}}
@container (max-width:760px){.visio-layout{grid-template-columns:1fr}.visio-tiles{grid-template-columns:1fr}.visio-side{flex-direction:row}.visio-side .visio-tile{flex:1}.visio-transcript{max-height:none}.visio-leave{margin-left:0}}
@media(prefers-reduced-motion:reduce){.visio-page *,.visio-page *::after{animation:none!important}.is-glitch .df-head{filter:blur(5px);transform:skewX(-8deg)}}
/* Vraies vidéos : deux saccades du visage, puis l’image redevient nette pendant l’excuse. */
.is-glitch video.df-face{animation:df-flicker .95s steps(4) 2}
.is-glitch.has-video::after{animation:df-scan .25s steps(2) 8,df-fade 2s forwards}
@keyframes df-flicker{0%,100%{transform:none;filter:none}25%{transform:translateX(7px) skewX(-7deg);filter:blur(2px) hue-rotate(25deg)}50%{transform:translateX(-9px) scaleX(.92) skewX(6deg);filter:blur(3.5px) contrast(1.5)}75%{transform:translateX(4px);filter:blur(1.5px) saturate(1.8)}}
@keyframes df-fade{to{opacity:0}}
/* Le nom incrusté dans certaines vidéos occupe le bas : celui du jeu passe en haut à droite. */
.has-video .visio-name{top:8px;right:8px;bottom:auto;left:auto}

/* Micro-coupure entre deux vidéos : noir bref, déchirures, image qui saute, puis retour net. */
.visio-tile-main.is-cut::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:#05070b;animation:df-cut .45s steps(5) forwards}
.visio-tile-main.is-cut video.df-face{animation:df-cut-img .45s steps(4)}
@keyframes df-cut{0%{opacity:1}25%{opacity:.85;background:repeating-linear-gradient(0deg,#05070b 0 7px,#2a3446 7px 9px)}50%{opacity:.55;background:linear-gradient(#0000 28%,#ffffff2e 28% 33%,#0000 33% 61%,#7fd1ff2e 61% 66%,#0000 66%)}75%{opacity:.2}100%{opacity:0}}
@keyframes df-cut-img{0%{filter:brightness(.25) blur(4px);transform:translateX(-6px)}50%{filter:brightness(1.4) contrast(1.6) blur(1px);transform:translateX(5px) skewX(-4deg)}100%{filter:none;transform:none}}
@media(prefers-reduced-motion:reduce){.visio-tile-main.is-cut::before{animation:df-fade .3s forwards!important;background:#05070b}}
.df-cut-clip{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:opacity .18s}
.df-cut-clip.is-leaving{opacity:0}
.df-cut-canvas{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.df-reconnect{position:absolute;left:50%;bottom:16%;z-index:4;transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:#000b;color:#e8eef8;font-size:12px;font-weight:700;white-space:nowrap;pointer-events:none}
/* Vidéo de déplacement : l’interface de visio incrustée par le générateur est rognée, et la
   connexion lâche (image figée, saut, pixels). */
video.clip-helene-deplacement{transform:scale(1.2);transform-origin:50% 45%}
.is-frozen video.df-face{filter:contrast(1.15) saturate(.7) brightness(.92)}
.is-jump video.df-face{filter:brightness(1.6) contrast(1.3)}
.is-pixel video.df-face{filter:blur(4px) contrast(1.9) saturate(1.5)}
/* Écran de reconnexion entre deux vidéos : noir, roue, message du logiciel de visio. */
.df-reconnect-screen{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#05070b;color:#e8eef8;text-align:center;transition:opacity .25s}
.df-reconnect-screen strong{font-size:16px}
.df-reconnect-screen small{font-size:12px;color:#8e9bb0}
.df-reconnect-screen.is-leaving{opacity:0}
.df-spinner{width:34px;height:34px;border-radius:50%;border:3px solid #ffffff2a;border-top-color:#e8eef8;animation:df-spin .9s linear infinite}
@keyframes df-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.df-spinner{animation:none;border-top-color:#ffffff2a}}