/* ══════════════════════════════════════════════════════════════
   KreaGlobe — interactivité commune aux 3 sites (10/10/2026, demande client
   « que tout soit interactif, partout, aussi au téléphone »). Chargé sur toutes
   les pages par _tools/interface.py ; le script est assets/vivant.js.
     · cartes : halo qui suit la souris ; au téléphone, la carte au centre de l'écran s'allume
     · étapes du déroulé : elles s'allument une à une au défilement
     · appel final : halo qui suit la souris, qui se promène seul au téléphone
     · visuels des piliers : charte cliquable, formats, calendrier, test A/B,
       écrans, journée type, conversation — ils s'animent quand on les voit
   Préfixe vv- (le préfixe ka- est réservé à l'agent).
   ══════════════════════════════════════════════════════════════ */

/* ── cartes ── */
.vv-h{isolation:isolate}
.vv-l{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(300px circle at var(--vx,50%) var(--vy,0%),color-mix(in srgb,var(--accent,var(--vif)) 17%,transparent),transparent 66%)}
.vv-h:hover>.vv-l,.vv-h.vv-actif>.vv-l{opacity:1}
.vv-h:hover,.vv-h.vv-actif{border-color:color-mix(in srgb,var(--accent,var(--vif)) 45%,transparent)!important;
  box-shadow:0 22px 46px -30px color-mix(in srgb,var(--accent,var(--vif)) 70%,transparent)}
.vv-h:active{scale:.985}

/* ── étapes du déroulé ── */
.steps .step-i{position:relative}
.steps .step-i::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--accent,var(--vif));
  transition:width 1s cubic-bezier(.2,.7,.2,1)}
.steps .step-i.vv-on::after{width:100%}
.steps .step-i::before{transition:color .4s,transform .4s}
.steps .step-i.vv-on::before{color:var(--accent,var(--vif));opacity:1;transform:scale(1.15)}

/* ── appel final (hors Offres et Services, qui ont le leur) ── */
.vv-cta-l{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(520px circle at var(--vx,50%) var(--vy,40%),color-mix(in srgb,var(--vif) 22%,transparent),transparent 62%)}
.pcta:hover>.vv-cta-l{opacity:1}
@property --vx{syntax:'<length-percentage>';inherits:false;initial-value:50%}
@property --vy{syntax:'<length-percentage>';inherits:false;initial-value:40%}
@media(hover:none){
  .vv-cta-l{opacity:1;animation:vvHalo 8s ease-in-out infinite alternate}
  @keyframes vvHalo{0%{--vx:12%;--vy:20%}50%{--vx:88%;--vy:55%}100%{--vx:35%;--vy:90%}}
}

/* ── visuels des piliers ── */
.viz{transition:box-shadow .4s}
.viz:hover{box-shadow:0 30px 60px -36px color-mix(in srgb,var(--accent,var(--vif)) 75%,transparent)}
.vv-aide{display:block;margin-top:8px;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;opacity:.45}
/* charte : couleurs cliquables */
.viz .bb-pal i{cursor:pointer;transition:transform .25s,box-shadow .25s}
.bb-pal i:hover{transform:translateY(-3px)}
.bb-pal i.vv-on{box-shadow:0 0 0 2px var(--ink,#08200D),0 0 0 4px var(--accent,var(--vif));transform:translateY(-3px)}
.bb-mark{transition:background .5s}
.bb.vv-c .bb-mark{background:color-mix(in srgb,var(--bb-c) 22%,transparent)}
.bb-mark b{transition:color .5s,transform .5s}
.bb.vv-c .bb-mark b{color:var(--bb-c);transform:scale(1.06)}
/* formats : le format actif se soulève */
.viz .fm figure{transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;cursor:pointer}
.fm figure.vv-on{transform:translateY(-6px);border-color:var(--accent,var(--vif));box-shadow:0 18px 30px -18px color-mix(in srgb,var(--accent,var(--vif)) 70%,transparent)}
/* calendrier : les jours se remplissent, un clic change un jour */
.viz .cal i{cursor:pointer;transition:background .35s,border-color .35s,transform .25s}
.viz .cal i:hover{transform:scale(1.12)}
.cal.vv-prep i.on:not(.vv-f),.cal.vv-prep i.on2:not(.vv-f){background:transparent;border-color:var(--line)}
/* test A/B : les barres se jouent */
.viz .ab{cursor:pointer}
.viz .ab-bar i{transition:width 1.3s cubic-bezier(.2,.7,.2,1)}
.viz .ab.vv-prep .ab-bar i{width:0!important}
.viz .ab-r.win .ab-bar i::after{transition:opacity .4s .9s}
.viz .ab.vv-prep .ab-r.win .ab-bar i::after{opacity:0;transition-delay:0s}
/* écrans : la page se charge, le téléphone flotte */
.viz .dev-body i,.viz .dev-ph i{animation:vvCharge 2.8s ease-in-out infinite;animation-delay:calc(var(--k,0) * .18s)}
@keyframes vvCharge{0%,100%{opacity:.14}50%{opacity:.34}}
.viz .dev-body i.cta,.viz .dev-ph i.cta{animation:vvPouls 2.4s ease-in-out infinite}
@keyframes vvPouls{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent,var(--vif)) 50%,transparent)}50%{box-shadow:0 0 0 6px transparent}}
.viz .dev-ph{animation:vvFlotte 5s ease-in-out infinite}
@keyframes vvFlotte{50%{translate:0 -6px}}
/* journée type : les tâches s'empilent, puis disparaissent */
.viz .tm-blocks i{transition:transform .35s,opacity .35s}
.tm.vv-prep .tm-r:not(.tm-after) .tm-blocks i:not(.vv-f){transform:scaleY(.2);opacity:.25}
.tm.vv-prep .tm-after .tm-blocks i.k:not(.vv-f){transform:scale(0)}
/* conversation : les messages arrivent un par un */
.viz .ch-b,.viz .ch-sys{transition:opacity .4s,transform .4s}
.ch.vv-prep .ch-b:not(.vv-f),.ch.vv-prep .ch-sys:not(.vv-f){opacity:0;transform:translateY(8px);visibility:hidden}
.vv-tape{justify-self:end;display:flex;gap:4px;padding:11px 14px;border-radius:14px;border-bottom-right-radius:5px;
  background:color-mix(in srgb,var(--accent,var(--vif)) 18%,transparent)}
.vv-tape.in{justify-self:start;background:color-mix(in srgb,currentColor 8%,transparent)}
.vv-tape i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;animation:vvTape 1s infinite}
.vv-tape i:nth-child(2){animation-delay:.15s}.vv-tape i:nth-child(3){animation-delay:.3s}
@keyframes vvTape{50%{opacity:1;transform:translateY(-3px)}}

@media(prefers-reduced-motion:reduce){
  .vv-l,.steps .step-i::after,.ab-bar i,.fm figure{transition:none}
  .dev-body i,.dev-ph i,.dev-ph,.vv-cta-l,.vv-tape i{animation:none}
}

/* ══ Titres allégés sur tout le site (11/10/2026, demande client : « trop grands, surtout au téléphone ») ══
   Une seule règle, pour les 3 sites. !important : certains titres ont leur taille écrite dans la page.
   Ordinateur : titres principaux 58 → 46 px, titres de section 46 → 36 px ; téléphone : 34 → 29 px, 25 → 22 px. */
h1:not(.core-word){font-size:clamp(1.8rem,.9rem + 2.6vw,2.9rem)!important;line-height:1.06!important}
h1.core-word{font-size:clamp(2.8rem,1rem + 6.6vw,6rem)!important}
h2{font-size:clamp(1.4rem,.8rem + 1.8vw,2.25rem)!important;line-height:1.1!important}
h2.d3,.d3{font-size:clamp(1.2rem,.9rem + 1vw,1.6rem)!important}
:is(.p2-m,.rw-meta,.kb-step,.kt-step,.hx-t,.kb-mo-t,.ktv-tx,.proc-steps article) h3,.kt5-h,h3.d3{font-size:clamp(1.1rem,.75rem + 1.05vw,1.6rem)!important;line-height:1.15!important}
.pu-info h4.pu-n{font-size:clamp(1.15rem,.8rem + 1vw,1.6rem)!important}
/* chapeaux sous les titres (11/10/2026) : réduits avec les titres. Ordinateur 19 → 17 px, téléphone 16-17 → 15 px */
:is(.lead,.ah-sub,.core-tag,.ch-k,.s3-in,.pfx-lead,.fx-lead,.ktx-lead,.kb-story,.kt-story,.kts-l,.ktf-l){font-size:clamp(.95rem,.85rem + .35vw,1.06rem)!important;line-height:1.6!important}
/* rien ne déborde sur le côté au téléphone (la vidéo du héros KreaBrand dépassait de 72 px) */
html,body{overflow-x:clip}