:root { --bx2: #1F5B52; --bx: #17463F; --or: #C9A24A; --carte: #FFFFFF; --tight: 'Inter Tight', sans-serif; }
/* ---------- Les icônes vivantes de « Que veux-tu créer ? » (dessin plat, affiné le 28/09 : traits fins, plus d'air) ---------- */
.membre .fig .vv { width: 100%; height: 100%; max-width: 190px; overflow: visible; }
.vv .vv-air { transform: scale(.92); }
/* Le relief léger : dégradés doux et petite ombre (définis par poserDefinitions dans vivants.js), la couleur plate en secours. */
.vv .f-v { fill: url(#vv-rv) #1F5B52; } .vv .f-vp { fill: url(#vv-rvp) #17463F; } .vv .f-or { fill: url(#vv-ror) #C9A24A; } .vv .f-or2 { fill: url(#vv-ror2) #EBD9A6; }
.vv .f-iv { fill: url(#vv-riv) #FFFFFF; }
.vv .vv-air > g, .vv .vv-air > rect, .vv .vv-air > path, .vv .vv-air > circle { filter: url(#vv-ro); } .vv .f-su { fill: #E2DACC; } .vv .f-bl-t { fill: #FFFFFF; }
.vv .s-v { fill: none; stroke: var(--bx2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.vv .s-vp { fill: none; stroke: var(--bx); stroke-width: 1.4; stroke-linecap: round; }
.vv .s-or { fill: none; stroke: var(--or); stroke-width: 1.6; stroke-linecap: round; }
.vv .s-li { stroke: rgba(23,70,63,.12); stroke-width: .8; }
.vv * { transform-box: fill-box; transform-origin: center; }
.vv g, .vv rect, .vv circle, .vv path { transition: transform .5s cubic-bezier(.3,1.4,.5,1), opacity .35s ease, fill .35s ease; }
.vv text { font-family: var(--tight); font-weight: 500; fill: var(--or); }
/* carrousel : le swipe */
.membre:hover .vv-car-1, .membre.joue .vv-car-1 { transform: translateX(-16px) rotate(-6deg); }
.membre:hover .vv-car-2, .membre.joue .vv-car-2 { transform: translateX(-6px) rotate(-2deg); }
.membre:hover .vv-car-3, .membre.joue .vv-car-3 { transform: translateX(4px) rotate(3deg); }
.vv-car-pt { transition: fill .3s ease; } .membre:hover .vv-car-pt, .membre.joue .vv-car-pt { fill: var(--or); }
/* stories : les barres se remplissent */
.vv-sto-b1, .vv-sto-b2 { transform-origin: left center; transform: scaleX(0); transition: transform .9s linear; }
.membre:hover .vv-sto-b1, .membre.joue .vv-sto-b1 { transform: scaleX(1); }
.membre:hover .vv-sto-b2, .membre.joue .vv-sto-b2 { transform: scaleX(1); transition-delay: .9s; }
.membre:hover .vv-sto-ecran, .membre.joue .vv-sto-ecran { transform: translateY(-3px) scale(1.06); }
.membre:hover .vv-sto-sondage, .membre.joue .vv-sto-sondage { fill: var(--or); transform: scaleX(1.12); }
/* cover */
.membre:hover .vv-cov-t1, .membre.joue .vv-cov-t1 { transform: scale(1.12); }
.membre:hover .vv-cov-t2, .membre.joue .vv-cov-t2 { transform: scale(1.18) translateY(1px); }
.membre:hover .vv-cov-play, .membre.joue .vv-cov-play { animation: vv-bat .9s ease-in-out infinite; }
@keyframes vv-bat { 50% { transform: scale(1.16); } }
/* montage : la tête de lecture traverse, les ciseaux coupent */
.membre:hover .vv-mon-tete, .membre.joue .vv-mon-tete { animation: vv-tete 1.6s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes vv-tete { to { transform: translateX(78px); } }
.vv-mon-lame1, .vv-mon-lame2 { transform-origin: 50% 100%; transform-box: fill-box; }
.membre:hover .vv-mon-lame1, .membre.joue .vv-mon-lame1 { animation: vv-coupe1 .5s ease-in-out infinite alternate; }
.membre:hover .vv-mon-lame2, .membre.joue .vv-mon-lame2 { animation: vv-coupe2 .5s ease-in-out infinite alternate; }
@keyframes vv-coupe1 { to { transform: rotate(-16deg); } } @keyframes vv-coupe2 { to { transform: rotate(16deg); } }
/* photo : le soleil se lève, l'éclat */
.membre:hover .vv-ph-soleil, .membre.joue .vv-ph-soleil { transform: translateY(-18px); }
.membre:hover .vv-ph-mont1, .membre.joue .vv-ph-mont1 { transform: translateX(-4px); }
.membre:hover .vv-ph-mont2, .membre.joue .vv-ph-mont2 { transform: translateX(4px); }
.vv-ph-eclat { opacity: 0; transform: scale(.3) rotate(-40deg); }
.membre:hover .vv-ph-eclat, .membre.joue .vv-ph-eclat { opacity: 1; transform: none; transition-delay: .15s; }
/* vidéo : la pellicule défile */
.membre:hover .vv-vi-bande, .membre.joue .vv-vi-bande { animation: vv-bande 1.4s linear infinite; }
@keyframes vv-bande { to { transform: translateX(-90px); } }
.membre:hover .vv-vi-play, .membre.joue .vv-vi-play { animation: vv-bat 1s ease-in-out infinite; }
/* avatar : le groupe s'ouvre, les étoiles scintillent */
.membre:hover .vv-av-g, .membre.joue .vv-av-g { transform: translateX(-9px) rotate(-5deg); }
.membre:hover .vv-av-d, .membre.joue .vv-av-d { transform: translateX(9px) rotate(5deg); }
.membre:hover .vv-av-m, .membre.joue .vv-av-m { transform: translateY(-4px); }
.membre:hover .vv-etoile, .membre.joue .vv-etoile { animation: vv-scintille 1.3s ease-in-out infinite; }
.membre:hover .vv-etoile.e2, .membre.joue .vv-etoile.e2 { animation-delay: -.6s; }
@keyframes vv-scintille { 50% { transform: scale(1.4) rotate(45deg); } }
/* logo : l'apostrophe dorée tourne et se pose */
.membre:hover .vv-logo-apo, .membre.joue .vv-logo-apo { animation: vv-apo .9s cubic-bezier(.3,1.4,.5,1); }
@keyframes vv-apo { 0% { transform: translate(10px,-12px) rotate(-120deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* flyer : la feuille bascule */
.vv-fly-recto { transform-origin: 20% 100%; }
.membre:hover .vv-fly-recto, .membre.joue .vv-fly-recto { transform: rotate(-9deg) translateY(-3px); }
/* carte de visite : celle du dessus glisse */
.membre:hover .vv-cv-dessus, .membre.joue .vv-cv-dessus { transform: translate(-10px,-6px) rotate(-7deg); }
.membre:hover .vv-cv-dessous, .membre.joue .vv-cv-dessous { transform: translate(6px,2px) rotate(3deg); }
/* présentation : les barres poussent */
.vv-pre-barres rect { transform-origin: 50% 100%; }
.membre:hover .vv-pre-barres rect, .membre.joue .vv-pre-barres rect { animation: vv-pousse .8s cubic-bezier(.3,1.4,.5,1) both; }
.membre:hover .vv-pre-barres .b2, .membre.joue .vv-pre-barres .b2 { animation-delay: .12s; } .membre:hover .vv-pre-barres .b3, .membre.joue .vv-pre-barres .b3 { animation-delay: .24s; }
@keyframes vv-pousse { from { transform: scaleY(.15); } }
/* idées : l'ampoule s'allume */
.vv-id-rayons { opacity: .25; }
.membre:hover .vv-id-rayons, .membre.joue .vv-id-rayons { opacity: 1; transform: scale(1.08); }
.membre:hover .vv-id-verre, .membre.joue .vv-id-verre { fill: var(--or); }
.membre:hover .vv-id-ampoule, .membre.joue .vv-id-ampoule { transform: translateY(-3px); }
.membre:hover .vv-id-post, .membre.joue .vv-id-post { transform: rotate(8deg) translate(-2px,-3px); }
/* légende : le texte s'écrit, le hashtag arrive */
.vv-lg-fenetre { transform-origin: left center; }
.membre:hover .vv-lg-fenetre, .membre.joue .vv-lg-fenetre { animation: vv-ecrit 1.3s steps(14) both; }
@keyframes vv-ecrit { from { transform: scaleX(0); } }
.vv-lg-hash { opacity: 0; } .membre:hover .vv-lg-hash, .membre.joue .vv-lg-hash { opacity: 1; transition-delay: 1s; }
/* lien en bio : les liens arrivent l'un après l'autre */
.membre:hover .vv-lb-l1, .membre:hover .vv-lb-l2, .membre:hover .vv-lb-l3, .membre.joue .vv-lb-l1, .membre.joue .vv-lb-l2, .membre.joue .vv-lb-l3 { animation: vv-lien .5s cubic-bezier(.3,1.4,.5,1) both; }
.membre:hover .vv-lb-l2, .membre.joue .vv-lb-l2 { animation-delay: .12s; } .membre:hover .vv-lb-l3, .membre.joue .vv-lb-l3 { animation-delay: .24s; }
@keyframes vv-lien { from { transform: translateX(-14px); opacity: 0; } }
/* ebook : la couverture s'ouvre, l'enveloppe monte */
.vv-eb-couv { transform-origin: 0 50%; }
.membre:hover .vv-eb-couv, .membre.joue .vv-eb-couv { transform: perspective(200px) rotateY(-55deg); }
.membre:hover .vv-eb-env, .membre.joue .vv-eb-env { transform: translateY(-14px) rotate(-6deg); }
/* portfolio : les cases tombent */
.membre:hover .vv-pf, .membre.joue .vv-pf { animation: vv-case .5s cubic-bezier(.3,1.5,.5,1) both; }
.membre:hover .vv-pf.c2, .membre.joue .vv-pf.c2 { animation-delay: .1s; } .membre:hover .vv-pf.c3, .membre.joue .vv-pf.c3 { animation-delay: .2s; } .membre:hover .vv-pf.c4, .membre.joue .vv-pf.c4 { animation-delay: .3s; }
@keyframes vv-case { from { transform: scale(.4) rotate(-10deg); opacity: 0; } }
/* outil : le curseur glisse, l'interrupteur bascule, le résultat s'allume */
.vv-ou-rempli { transform-origin: left center; }
.membre:hover .vv-ou-rempli, .membre.joue .vv-ou-rempli { transform: scaleX(3.4); }
.membre:hover .vv-ou-bouton, .membre.joue .vv-ou-bouton { transform: translateX(46px); }
.membre:hover .vv-ou-inter, .membre.joue .vv-ou-inter { transform: translateX(18px); }
.vv-ou-res { opacity: .35; } .membre:hover .vv-ou-res, .membre.joue .vv-ou-res { opacity: 1; transition-delay: .3s; }
/* ---------- Ajoutées le 18/10 pour la page de vente V3 ---------- */
.vv text.vv-txt-v { fill: var(--bx); font-weight: 600; }
/* bibliothèque : la scène choisie se soulève, l'étoile des nouveautés s'allume */
.membre:hover .vv-bi-choix, .membre.joue .vv-bi-choix { transform: translateY(-7px) scale(1.14) rotate(-4deg); }
.vv-bi-neuf { opacity: 0; transform: scale(.3) rotate(-40deg); }
.membre:hover .vv-bi-neuf, .membre.joue .vv-bi-neuf { opacity: 1; transform: none; transition-delay: .2s; }
/* chat : la question se décale, la réponse arrive, les points réfléchissent, les trois IA scintillent */
.membre:hover .vv-ch-q, .membre.joue .vv-ch-q { transform: translate(-3px,-2px); }
.vv-ch-r { transform-origin: 90% 100%; }
.membre:hover .vv-ch-r, .membre.joue .vv-ch-r { animation: vv-ch-pop .6s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes vv-ch-pop { from { transform: scale(.3); opacity: 0; } }
.membre:hover .vv-ch-pt, .membre.joue .vv-ch-pt { animation: vv-rebond .55s ease-in-out infinite alternate; }
.membre:hover .vv-ch-pt.p2, .membre.joue .vv-ch-pt.p2 { animation-delay: .14s; } .membre:hover .vv-ch-pt.p3, .membre.joue .vv-ch-pt.p3 { animation-delay: .28s; }
@keyframes vv-rebond { to { transform: translateY(-4px); } }
.membre:hover .vv-ch-ia, .membre.joue .vv-ch-ia { animation: vv-pastille 1.2s ease-in-out infinite; }
.membre:hover .vv-ch-ia.i2, .membre.joue .vv-ch-ia.i2 { animation-delay: .2s; } .membre:hover .vv-ch-ia.i3, .membre.joue .vv-ch-ia.i3 { animation-delay: .4s; }
@keyframes vv-pastille { 50% { transform: scale(1.35); } }
/* veille : la courbe se trace, l'étoile de ce qui cartonne apparaît, la loupe se penche */
.vv-ve-courbe { stroke-dasharray: 100; stroke-dashoffset: 0; }
.membre:hover .vv-ve-courbe, .membre.joue .vv-ve-courbe { animation: vv-trace 1.1s cubic-bezier(.45,0,.55,1) both; }
@keyframes vv-trace { from { stroke-dashoffset: 100; } }
.vv-ve-etoile { opacity: .5; transform: scale(.7); }
.membre:hover .vv-ve-etoile, .membre.joue .vv-ve-etoile { opacity: 1; transform: scale(1.15) rotate(20deg); transition-delay: .9s; }
.membre:hover .vv-ve-loupe, .membre.joue .vv-ve-loupe { transform: translate(1px,16px) rotate(-8deg); }
/* calendrier : les trois posts se posent l'un après l'autre, la note sur 10 tombe */
.membre:hover .vv-ca-post, .membre.joue .vv-ca-post { animation: vv-case .5s cubic-bezier(.3,1.5,.5,1) both; }
.membre:hover .vv-ca-post.c2, .membre.joue .vv-ca-post.c2 { animation-delay: .15s; } .membre:hover .vv-ca-post.c3, .membre.joue .vv-ca-post.c3 { animation-delay: .3s; }
.membre:hover .vv-ca-note, .membre.joue .vv-ca-note { animation: vv-note .6s cubic-bezier(.3,1.5,.5,1) both; animation-delay: .5s; }
@keyframes vv-note { from { transform: translateY(-10px) scale(.4); opacity: 0; } }
/* identité : la fiche se soulève, les liens s'allument, le texte et l'image s'écartent, un éclat doré */
.vv-idt-lien { opacity: .35; }
.membre:hover .vv-idt-lien, .membre.joue .vv-idt-lien { opacity: 1; transform: scaleX(1.25); }
.membre:hover .vv-idt-fiche, .membre.joue .vv-idt-fiche { transform: translateY(-3px); }
.membre:hover .vv-idt-txt, .membre.joue .vv-idt-txt { transform: translateX(-5px) rotate(-4deg); }
.membre:hover .vv-idt-img, .membre.joue .vv-idt-img { transform: translateX(5px) rotate(4deg); }
.vv-idt-eclat { opacity: 0; transform: scale(.3) rotate(-40deg); }
.membre:hover .vv-idt-eclat, .membre.joue .vv-idt-eclat { opacity: 1; transform: none; transition-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .vv *, .vv g { transition: none !important; animation: none !important; } }