/* PPS Link · vitrine : ce que la démo ajoute aux vrais styles de l'application (doigt, animations, zone vidéo factice). */
body.demo-telephone{overflow:hidden}
.doigt{position:fixed;left:0;top:0;width:44px;height:44px;border-radius:50%;z-index:500;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgb(30 60 38 / .45) 0 38%,rgb(30 60 38 / .18) 40%);border:2px solid rgb(255 255 255 / .85);
  box-shadow:0 6px 18px rgb(0 0 0 / .25);transition:transform .6s cubic-bezier(.3,.7,.2,1),opacity .3s,scale .15s}
.doigt.appui{scale:.82}
.demo-appui{filter:brightness(.92)}
.demo-arrivee{animation:demo-arrivee .5s ease-out}
.demo-depart{transition:opacity .4s,transform .4s;opacity:0;transform:translateX(30px)}
.tache.faite .titre{text-decoration:line-through;opacity:.6}
@keyframes demo-arrivee{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.demo-visio{flex:1;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#2c4a33,#0d1610 70%)}
.demo-tuile{display:grid;justify-items:center;gap:10px;color:#e8f2ea}
.demo-tuile .av.xl{animation:demo-parle 1.6s ease-in-out infinite}
.demo-tuile.moi{position:absolute;right:14px;bottom:14px;width:96px;height:128px;border-radius:14px;background:#1d2b21;place-content:center;border:1px solid #ffffff22}
@keyframes demo-parle{0%,100%{box-shadow:0 0 0 0 #c7f26466}50%{box-shadow:0 0 0 12px #c7f26400}}
@media (prefers-reduced-motion:reduce){.doigt{display:none}.demo-tuile .av.xl{animation:none}}
body.demo-bureau{overflow:hidden}
.ev.demo-sel{outline:3px solid var(--accent);outline-offset:1px;z-index:3;transform:scale(1.03);transition:transform .2s}
.mail-item.demo-neuf{background:color-mix(in srgb,var(--accent) 14%,transparent)}

/* ---------- Visio factice (bureau.html#visio) : à la place de la vraie visio de l'application ---------- */
.v-salle{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;padding:16px;background:#0b0f0d}
.v-grille{flex:1;min-height:0;display:grid;gap:12px;grid-template-columns:1fr;grid-template-rows:1fr}
.v-grille[data-n="2"]{grid-template-columns:1fr 1fr}
.v-grille[data-n="3"],.v-grille[data-n="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.v-tuile{position:relative;border-radius:16px;overflow:hidden;background:var(--fond);display:grid;place-items:end center;min-height:0;
  box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .3s}
.v-tuile::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,#ffffff22,transparent 55%),radial-gradient(ellipse at 80% 90%,#0000004d,transparent 60%)}
.v-silhouette{position:relative;width:min(46%,220px);fill:#ffffff38;animation:v-respire 4s ease-in-out infinite}
.v-tuile.parle{box-shadow:inset 0 0 0 3px #b9e35c}
.v-nom{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;background:#0009;color:#fff;font-size:13px}
.v-nom svg{width:14px;height:14px}
.v-ondes{position:absolute;right:14px;top:14px;display:none;gap:3px;align-items:end;height:16px}
.v-tuile.parle .v-ondes{display:flex}
.v-ondes i{width:4px;border-radius:2px;background:#b9e35c;animation:v-onde .9s ease-in-out infinite}
.v-ondes i:nth-child(2){animation-delay:.2s}.v-ondes i:nth-child(3){animation-delay:.4s}
.v-commandes{display:flex;justify-content:center;gap:12px}
.v-btn{width:48px;height:48px;border-radius:50%;border:0;background:#ffffff1f;color:#fff;display:grid;place-items:center;cursor:pointer}
.v-btn svg{width:22px;height:22px}
.v-btn.on{background:#b9e35c;color:#14231a}
.v-salle.partage{display:grid;grid-template-columns:1fr 240px;grid-template-rows:1fr auto}
.v-salle.partage .v-grille{grid-template-columns:1fr!important;grid-template-rows:none!important;grid-auto-rows:1fr}
.v-salle.partage .v-commandes{grid-column:1 / -1}
.v-salle.partage .v-silhouette{width:38%}
.v-ecran{border-radius:16px;background:#e9eee6;display:grid;place-items:center;position:relative;min-height:0}
.v-doc{width:min(78%,560px);background:#fff;color:#17251b;border-radius:10px;padding:28px 32px;display:grid;gap:12px;box-shadow:0 20px 40px #0003;font-size:15px}
.v-doc b{font-size:19px}.v-doc span{padding:8px 0;border-bottom:1px solid #e3e9df}.v-doc em{font-style:normal;font-weight:700;text-align:right}
.v-ecran small{position:absolute;left:12px;bottom:12px;padding:5px 10px;border-radius:99px;background:#0009;color:#fff;font-size:13px}
@keyframes v-onde{0%,100%{height:4px}50%{height:16px}}
@keyframes v-respire{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.v-silhouette,.v-ondes i{animation:none}}