/* Jonction — enrichissement visuel (icônes, canaux, illustrations). Fichier séparé, appliqué par build/visuals_patch.py */
.jv-defs{position:absolute;width:0;height:0;overflow:hidden}
.jv-svg{width:24px;height:24px;display:block;fill:none;stroke:url(#jv-g);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.glyph.jv-ico .jv-svg{width:26px;height:26px}
.card.mini .glyph.jv-ico .jv-svg{width:22px;height:22px}
.jv-brand{display:block;flex:none}
/* icônes de cas */
.jv-case-ico{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,rgba(30,107,255,.22),rgba(34,211,238,.14));border:1px solid rgba(34,211,238,.3);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.case:hover .jv-case-ico,.fo-card:hover .jv-case-ico{transform:translateY(-2px) rotate(-6deg);box-shadow:0 0 22px rgba(34,211,238,.35)}
.jv-case-ico.jv-lg{width:56px;height:56px;border-radius:16px;margin-bottom:12px}
.jv-case-ico.jv-lg .jv-svg{width:28px;height:28px}
.jv-inline{display:inline-flex;vertical-align:-3px;margin-right:6px}
.jv-inline .jv-svg,.jv-inline .jv-brand{width:16px;height:16px}
.jv-sector-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:.78rem;font-weight:750;color:#FFD68A;border:1px solid rgba(255,196,87,.35);background:rgba(255,196,87,.08)}
.jv-sector-tag .jv-svg{width:15px;height:15px;stroke:#FFC457}
.tl-when .jv-inline{margin-right:5px}
/* canaux */
.jv-channels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px;padding:0;list-style:none}
.jv-ch{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:24px 14px 20px;border-radius:20px;background:linear-gradient(160deg,rgba(22,40,80,.55),rgba(10,20,44,.5));border:1px solid var(--line,rgba(148,184,232,.16));transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.jv-ch:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.5);box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 32px rgba(34,211,238,.14)}
.jv-ch h3{margin:0;font-size:1rem;letter-spacing:-.01em;color:#fff}
.jv-ch p{margin:0;font-size:.84rem;line-height:1.5;color:var(--muted,#A9B9CF)}
.jv-pastille{--halo:34,211,238;position:relative;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.08),rgba(10,20,44,.9) 70%);border:1px solid rgba(var(--halo),.38);box-shadow:0 0 0 6px rgba(var(--halo),.05),0 0 26px rgba(var(--halo),.22);transition:box-shadow .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.jv-pastille .jv-svg{width:28px;height:28px}
/* logos de marque : zone de protection = 1/4 de la taille du logo autour du glyphe */
.jv-pastille .jv-brand{width:32px;height:32px}
.jv-ch:hover .jv-pastille{transform:scale(1.06);box-shadow:0 0 0 7px rgba(var(--halo),.08),0 0 36px rgba(var(--halo),.38)}
.jv-ch.is-whatsapp .jv-pastille{--halo:37,211,102}
.jv-ch.is-linkedin .jv-pastille{--halo:10,102,194;border-color:rgba(80,150,230,.55)}
.jv-ch .jv-brandname{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.jv-ch.is-whatsapp .jv-brandname{color:#25D366}
.jv-ch.is-linkedin .jv-brandname{color:#5BA4F0}
.jv-tm{margin-top:14px;font-size:.75rem;color:var(--muted,#A9B9CF);opacity:.8}
@media (min-width:1100px){.jv-channels{grid-template-columns:repeat(7,1fr);gap:14px}.jv-ch{padding:22px 10px 18px}}
/* rappel canaux (services) */
.jv-chips{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:18px 0 0;list-style:none}
.jv-chips li{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;border-radius:99px;border:1px solid var(--line2,rgba(148,184,232,.28));background:rgba(16,30,62,.55);font-weight:700;font-size:.9rem;color:#E3EBF7;transition:border-color .3s,transform .3s}
.jv-chips li:hover{border-color:rgba(34,211,238,.55);transform:translateY(-2px)}
.jv-chips .jv-dot{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(10,20,44,.9);border:1px solid rgba(34,211,238,.3)}
.jv-chips .jv-dot .jv-svg,.jv-chips .jv-dot .jv-brand{width:17px;height:17px}
.jv-chips .is-whatsapp .jv-dot{border-color:rgba(37,211,102,.5);box-shadow:0 0 14px rgba(37,211,102,.2)}
.jv-chips .is-linkedin .jv-dot{border-color:rgba(80,150,230,.55);box-shadow:0 0 14px rgba(10,102,194,.3)}
/* illustration : onde vocale (agent vocal) */
.jv-voice{display:flex;align-items:center;gap:14px;margin:16px 0 4px;padding:12px 16px;border-radius:16px;border:1px solid rgba(34,211,238,.25);background:linear-gradient(90deg,rgba(30,107,255,.12),rgba(34,211,238,.06));max-width:560px}
.jv-voice .jv-case-ico{flex:none;border-radius:50%}
.jv-wave{display:flex;align-items:center;gap:3px;height:34px;flex:1;min-width:0;overflow:hidden}
.jv-wave i{display:block;width:3px;flex:none;height:30%;border-radius:3px;background:linear-gradient(180deg,#22D3EE,#1E6BFF);animation:jv-wave 1.25s ease-in-out infinite;animation-delay:calc(var(--i,0) * -90ms)}
@keyframes jv-wave{0%,100%{height:18%}50%{height:var(--h,80%)}}
.jv-voice-lbl{flex:none;font-size:.78rem;font-weight:750;color:#BDF1FB;display:flex;align-items:center;gap:7px}
.jv-voice-lbl::before{content:'';width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 0 3px rgba(52,211,153,.2)}
/* illustration : schéma de flux (automatisation) */
.jv-flow{display:flex;align-items:center;gap:0;margin:6px 0 30px;padding:20px;border-radius:20px;border:1px solid var(--line,rgba(148,184,232,.16));background:linear-gradient(160deg,rgba(22,40,80,.45),rgba(10,20,44,.4))}
.jv-node{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:rgba(10,20,44,.85);border:1px solid rgba(34,211,238,.3);font-weight:750;font-size:.9rem;color:#E3EBF7;white-space:nowrap}
.jv-node small{display:block;font-weight:600;font-size:.72rem;color:var(--muted,#A9B9CF)}
.jv-node.is-ai{border-color:rgba(34,211,238,.6);box-shadow:0 0 26px rgba(34,211,238,.18)}
.jv-link{position:relative;flex:1;min-width:18px;height:2px;background:linear-gradient(90deg,rgba(30,107,255,.5),rgba(34,211,238,.5));overflow:hidden}
.jv-link::after{content:'';position:absolute;top:-2px;left:-30%;width:30%;height:6px;border-radius:6px;background:linear-gradient(90deg,transparent,#BDF6FF,transparent);animation:jv-pulse 2.2s linear infinite}
@keyframes jv-pulse{to{left:100%}}
@media (max-width:760px){
 .jv-flow{flex-direction:column;align-items:stretch;padding:16px}
 .jv-link{width:2px;height:18px;min-width:0;flex:none;align-self:center;background:linear-gradient(180deg,rgba(30,107,255,.5),rgba(34,211,238,.5))}
 .jv-link::after{left:-2px;top:-40%;width:6px;height:40%;animation-name:jv-pulse-v}
 .jv-channels{grid-template-columns:repeat(2,1fr);gap:12px}
 .jv-ch{padding:18px 10px 16px}
 .jv-ch:last-child:nth-child(odd){grid-column:1/-1}
 .jv-voice-lbl{display:none}
}
@keyframes jv-pulse-v{to{top:100%}}
@media (prefers-reduced-motion:reduce){
 .jv-wave i,.jv-link::after{animation:none}
 .jv-wave i{height:var(--h,50%)}
 .jv-ch,.jv-pastille,.jv-case-ico,.jv-chips li{transition:none}
 .jv-ch:hover,.jv-chips li:hover{transform:none}
}
