/* Vue éclatée — fond du héro de /pros/ (prototype du 29/09/2026).
   Tout est préfixé `ve-` et redéfini ici : la scène doit tenir telle quelle
   dans la page du site, sans hériter de ses styles ni les toucher. */

.ve{position:absolute; inset:0; overflow:hidden; background:#17150F;
  font-family:Archivo, system-ui, sans-serif; color:#F2E9DA; line-height:1.2;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
  --creme:#F4ECDF; --champagne:#C9A876; --sable:#E8D5B5; --encre:#17150F}
.ve *, .ve *::before, .ve *::after{box-sizing:border-box}
.ve{transition:opacity .9s cubic-bezier(.2,.7,.2,1)}
.ve.ve-attente{opacity:0}
.ve-fond{position:absolute; inset:0;
  background:radial-gradient(120% 90% at 72% 46%, #1D1A14 0%, #17150F 58%, #131109 100%)}

/* ── la scène 3D ── */
.ve-scene{position:absolute; inset:0}
.ve-rig{position:absolute; left:0; top:0; width:0; height:0; transform-style:preserve-3d}
.ve-plaque{position:absolute; left:0; top:0; transform-style:preserve-3d}
.ve-face, .ve-tranche{position:absolute; inset:0; border-radius:var(--r)}
.ve-face{overflow:hidden}
.ve-ancre{position:absolute; width:1px; height:1px; pointer-events:none}

/* verre fumé : presque rien dedans, un liseré clair, un reflet en biais */
.ve-verre{background:
    linear-gradient(152deg, rgba(255,246,230,.13) 0%, rgba(255,246,230,.05) 42%, rgba(255,246,230,.02) 100%);
  box-shadow:inset 0 0 0 1px rgba(232,213,181,.30), inset 1.5px 1.5px 0 rgba(255,255,255,.10),
    inset 0 -1.5px 0 rgba(255,244,226,.20)}
/* reflet : une bande claire en biais, comme sur une vraie plaque de verre (--reflet la fait glisser) */
.ve-verre::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(116deg, transparent 0%, transparent 38%, rgba(255,248,235,.075) 46%,
    rgba(255,248,235,.02) 52%, transparent 58%, transparent 100%);
  background-size:260% 100%; background-position:var(--reflet, 62%) 0}
.ve-contenu{position:absolute; inset:0}
.ve-verre-tranche{box-shadow:inset 0 0 0 1px rgba(232,213,181,.11)}
.ve-verre-dessous{background:rgba(12,11,8,.28); box-shadow:inset 0 0 0 1px rgba(232,213,181,.14)}

/* porcelaine : la carte du rendez-vous, la seule pièce pleine */
.ve-porcelaine{color:var(--encre);
  background:linear-gradient(158deg, #F8F4EC 0%, #EFE8DC 50%, #E6DDCE 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65), inset 0 -2px 0 rgba(120,100,70,.10)}
.ve-porcelaine-tranche{background:#CDBFA9}
.ve-porcelaine-dessous{background:#B9AA92}

/* ── contenu des plaques ── */
.ve-dessin{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.ve-dessin text{font-family:Archivo, system-ui, sans-serif; font-variant-numeric:tabular-nums}

.ve-resa{position:absolute; inset:0; padding:20px 22px 18px; display:flex; flex-direction:column}
.ve-resa-haut{display:flex; align-items:center; justify-content:space-between}
.ve-resa-etat{display:grid; justify-items:start; transform-origin:0 50%}
.ve-resa-etat > span{grid-area:1/1; font-size:11.5px; font-weight:600; letter-spacing:.01em;
  border-radius:999px; padding:5px 10px; white-space:nowrap}
.ve-etat-nouveau{color:#5B4A2E; background:rgba(201,168,118,.22)}
.ve-etat-confirme{color:#F4ECDF; background:#17150F; display:inline-flex; align-items:center; gap:5px; opacity:0}
.ve-resa-avatar{width:34px; height:34px; border-radius:50%; background:#17150F; color:#F4ECDF;
  display:grid; place-items:center; font-size:14px; font-weight:600}
.ve-resa-heure{margin-top:12px; font-size:58px; font-weight:600; letter-spacing:-.045em; line-height:.9}
.ve-resa-ligne{margin-top:10px; font-size:14px; font-weight:500; color:rgba(23,21,15,.72)}
.ve-resa-bas{margin-top:auto; display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid rgba(23,21,15,.10); padding-top:11px; font-size:13px; color:rgba(23,21,15,.62)}
.ve-resa-bas b{font-size:17px; font-weight:600; color:var(--encre)}

.ve-sms{position:absolute; left:22px; right:26px; top:84px; padding:10px 13px 11px; transform-origin:0 100%;
  border-radius:16px 16px 16px 5px; background:#F1EADF; color:var(--encre);
  font-size:12px; line-height:1.34; font-weight:500}
.ve-sms-tete{position:absolute; left:24px; top:63px; font-size:11px; font-weight:600;
  color:rgba(244,236,223,.66); letter-spacing:.01em}
.ve-sms-quand{position:absolute; left:24px; bottom:14px; font-size:11px; color:rgba(244,236,223,.5)}

/* ── lignes d'assemblage (derrière) et légendes (à plat, devant) ── */
.ve-guides, .ve-traits{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.ve-legende{position:absolute; left:0; top:0; display:flex; flex-direction:column; gap:4px;
  max-width:var(--lg, 220px); will-change:transform, opacity}
.ve-legende b{font-size:16px; font-weight:600; letter-spacing:-.014em; color:var(--creme); white-space:nowrap}
.ve-legende span{font-size:13.5px; font-weight:400; line-height:1.35; color:rgba(244,236,223,.60)}
.ve-compacte{gap:2px}
.ve-compacte b{font-size:calc(12.5px * var(--k, 1)); letter-spacing:-.005em}
.ve-compacte span{font-size:calc(12px * var(--k, 1)); line-height:1.25; color:var(--champagne); font-weight:500; white-space:nowrap}

/* grain très fin : casse les aplats, évite les bandes du dégradé */
.ve-grain{position:absolute; inset:0; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}