/* La démo vocale de l'accueil (« Experience Soleir In A Live Conversation »), comme un assistant vocal (Kevin 28/09) :
   au repos l'orbe argentée respire ; en appel, tout ce qui l'entoure s'efface en cascade (fondu flouté), il ne reste que
   l'agent, la pastille « Connected » de la maquette Figma (2202:27339 / 2202:27407), la transcription en bas et
   « End Call ». Couleurs = jetons du site quand ils existent. Pilotage : js/soleir-demo.js et js/soleir-orbe.js. */

.demo-live [hidden] { display: none !important; }

/* Le repère : un bloc de hauteur nulle posé SOUS l'orbe (rien n'est positionné au repos, donc rien ne passe au-dessus du
   trait de liaison) ; ses marges en % se lisent sur la largeur de l'orbe, qui est carrée. Le métal occupe le cercle de
   20 % à 80 % du carré ; le repère est à 100 % + 5 px. --demo-axe (posé par soleir-orbe.js) recentre sur les boutons. */
.demo-live .demo-ancre { position: relative; height: 0; }
.demo-live .demo-centre video { width: 474px; max-width: 100%; height: auto; object-fit: contain; }

/* ── L'appel : le titre s'efface (fondu flouté), revient à la fin ; les cartes de côté (ChatGPT, Humanistic, 90 %) sont
   retirées de la page (Kevin 28/09 : « on ne fait pas référence aux technologies utilisées ») : l'orbe est seule, centrée. ── */
.demo-live .experience-middle { justify-content: center; }
.demo-live .experience-top {
  --demo-sortie: cubic-bezier(.4, 0, .2, 1); --demo-entree: cubic-bezier(.22, .61, .36, 1);
  transition: opacity .8s var(--demo-entree) .2s, filter .8s var(--demo-entree) .2s, translate .8s var(--demo-entree) .2s, visibility 0s linear .2s;
}
.demo-live.demo-en-appel .experience-top {
  opacity: 0; filter: blur(10px); translate: 0 -16px; visibility: hidden; pointer-events: none;
  transition: opacity .55s var(--demo-sortie), filter .55s var(--demo-sortie), translate .55s var(--demo-sortie), visibility 0s linear .55s;
}

/* « Connected | 1:24 », 64 px au-dessus du haut du métal (Kevin 28/09 : à 28 px, elle mordait sur le halo) */
.demo-connecte {
  position: absolute; top: 0; margin-top: calc(-80% - 102px); left: calc(50% + var(--demo-axe, 0px)); transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 100px;
  background: var(--_colors---secondary-100); white-space: nowrap;
  font-family: var(--font-family--inter-tight); font-weight: 500; font-size: 14px; line-height: 1.3;
  opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity .35s ease, translate .35s ease, visibility 0s linear .35s;
}
.demo-connecte_etat { display: flex; align-items: center; gap: 4px; color: #389765; }
.demo-connecte_etat img, .demo-connecte_sep { display: block; }
.demo-connecte_temps { color: var(--_colors---primary-200); font-variant-numeric: tabular-nums; }

/* La conversation, comme chez Vapi : des cartes (les bulles de la maquette Figma) sous l'orbe, étiquetées, l'agent à
   gauche et le client à droite ; les mots arrivent un à un, le fil monte et les anciennes cartes s'effacent vers le
   haut. En appel, l'orbe monte un peu (--demo-leve ; Kevin : « pas aussi haut ») et la conversation se colle dessous,
   18 px sous le bas du métal : la 1re carte arrive juste sous l'orbe, les suivantes en dessous ; quand le fil est
   plein, il monte et les anciennes cartes s'effacent par le haut (le fondu n'existe qu'une fois plein). */
.demo-live { --demo-leve: 80px; --demo-fil-h: 92px; }
@media (max-width: 991px) { .demo-live { --demo-leve: 70px; } }
@media (max-width: 767px) { .demo-live { --demo-leve: 60px; --demo-fil-h: 132px; } }
@media (max-width: 479px) { .demo-live { --demo-leve: 100px; } } /* petits téléphones : la place est au-dessus */
.demo-live .demo-centre { transition: translate .7s cubic-bezier(.22, .61, .36, 1) .1s; }
.demo-live.demo-en-appel .demo-centre { translate: 0 calc(-1 * var(--demo-leve)); transition: translate .8s cubic-bezier(.22, .61, .36, 1) .15s; }

.demo-fil {
  position: absolute; top: 0; margin-top: calc(-20% + 13px); left: calc(50% + var(--demo-axe, 0px)); transform: translateX(-50%); z-index: 2;
  width: min(560px, calc(100vw - 32px)); max-height: var(--demo-fil-h); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.demo-live.demo-en-appel .demo-fil { max-height: calc(var(--demo-fil-h) + var(--demo-leve)); }
.demo-fil.demo-fil--plein { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40%); mask-image: linear-gradient(to bottom, transparent 0, #000 40%); }
.demo-fil_pile { display: flex; flex-direction: column; padding-bottom: 2px; transition: transform .55s cubic-bezier(.22, .61, .36, 1); }
.demo-fil_ligne {
  box-sizing: border-box; width: fit-content; max-width: min(440px, 100%); margin: 10px 0 0; padding: 10px 14px 12px;
  /* un voile plutôt qu'une carte pleine (Kevin 28/09 : « moins solide, comme s'il était déjà en arrière-fond », comme
     Vapi) : blanc translucide et flou de ce qu'il y a derrière, texte un peu adouci */
  background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 4px 18px rgba(14, 18, 27, .03);
  text-align: left; font-family: var(--font-family--inter-tight); font-size: 16px; line-height: 1.45; letter-spacing: -0.01em;
  color: rgba(14, 18, 27, .82);
  animation: demo-carte .45s cubic-bezier(.22, .61, .36, 1) both; transition: opacity .6s cubic-bezier(.22, .61, .36, 1);
}
.demo-fil_ligne::before {
  content: attr(data-nom); display: block; margin-bottom: 4px;
  font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--_colors---primary-300);
}
.demo-fil_ligne--agent { align-self: flex-start; border-radius: 0 10px 10px 10px; }
.demo-fil_ligne--client { align-self: flex-end; border-radius: 10px 0 10px 10px; }
.demo-fil_ligne:not(:last-child) { opacity: .4; }
.demo-live .demo-fil .demo-points { display: block; width: 33px; height: 7px; max-width: none; margin: 6px 0 2px; animation: demo-pouls-doux 1.2s ease-in-out infinite; }
@keyframes demo-carte { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes demo-pouls-doux { 50% { opacity: .35; } }
.demo-mot { display: inline-block; animation: demo-mot .5s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes demo-mot { from { opacity: 0; filter: blur(6px); transform: translateY(.3em); } }
.demo-mot--cache { opacity: 0; animation: none; }

.demo-live.demo-en-appel .demo-connecte,
.demo-live.demo-en-appel .demo-fil {
  opacity: 1; visibility: visible; translate: 0 0;
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1) .45s, translate .6s cubic-bezier(.22, .61, .36, 1) .45s, visibility 0s linear .45s;
}

/* ── Le ticket en direct (Kevin 28/09 : « le ticket sur le côté, qui remplit la commande ») : à droite de l'orbe, il
   se remplit pendant que le client parle — ce que l'agent a compris, prêt pour la cuisine. Générique : pour un autre
   métier, les mêmes lignes portent une fiche d'intervention. Design system du site (Inter Tight, gris et violet du
   site, arrondi « small », le vert « Connected » de la maquette) ; le bord perforé = le ticket de caisse. ≥ 1200 px :
   panneau ; en dessous : un résumé dans la pastille « Connected ». */
.demo-live .demo-fil { width: min(520px, calc(100vw - 32px)); }
.demo-ticket {
  position: absolute; top: 0; margin-top: calc(-80% - 15px); left: calc(50% + var(--demo-axe, 0px) + 270px); z-index: 2;
  width: 292px; font-family: var(--font-family--inter-tight); color: var(--_colors---primary-100); text-align: left;
  /* l'ombre est une drop-shadow : elle suit la forme découpée du corps (une box-shadow serait coupée par le masque) */
  opacity: 0; visibility: hidden; translate: 18px 0; filter: blur(6px) drop-shadow(0 10px 18px rgba(14, 18, 27, .08));
  transition: opacity .35s ease, translate .35s ease, filter .35s ease, visibility 0s linear .35s;
}
/* Le corps du ticket, découpé en vraies encoches au bas (Kevin : « les découpes un peu mal faites ») : des demi-cercles
   TRANSPARENTS de 5 px tous les 14 px — on voit le fond à travers, l'ombre en suit la forme. */
.demo-ticket_corps {
  box-sizing: border-box; padding: 16px 16px 22px; background: var(--_colors---secondary-100);
  border-radius: var(--_sizes---spacing--bordar-redius--redius-small) var(--_sizes---spacing--bordar-redius--redius-small) 0 0;
  -webkit-mask: radial-gradient(circle at 7px 100%, transparent 5px, #000 5.5px) 0 100% / 14px 10px repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 9.9px) no-repeat;
  mask: radial-gradient(circle at 7px 100%, transparent 5px, #000 5.5px) 0 100% / 14px 10px repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 9.9px) no-repeat;
}
.demo-live.demo-ticket-ouvert .demo-ticket {
  opacity: 1; visibility: visible; translate: 0 0; filter: blur(0) drop-shadow(0 10px 18px rgba(14, 18, 27, .08));
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), translate .6s cubic-bezier(.22, .61, .36, 1), filter .6s cubic-bezier(.22, .61, .36, 1), visibility 0s;
}
.demo-ticket_tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.demo-ticket_titre { font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--_colors---primary-300); }
.demo-ticket_statut {
  display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--_sizes---spacing--bordar-redius--redius-pill);
  font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--_colors---brand-100); background: rgba(120, 29, 255, .08);
  transition: color .4s ease, background-color .4s ease;
}
.demo-ticket_point { display: block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.demo-ticket_statut .demo-ticket_point { animation: demo-pouls 1.4s ease-in-out infinite; }
.demo-ticket.demo-ticket--confirme .demo-ticket_statut { color: #389765; background: rgba(56, 151, 101, .1); }
.demo-ticket.demo-ticket--confirme .demo-ticket_statut .demo-ticket_point { animation: none; }
.demo-ticket_numero { margin-top: 6px; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
.demo-ticket_quand { margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--_colors---primary-300); animation: demo-article .5s cubic-bezier(.22, .61, .36, 1) both; }
.demo-ticket_lignes {
  display: flex; flex-direction: column; gap: 10px; margin: 12px 0 0; padding: 12px 0 0; list-style: none;
  border-top: 1px dashed var(--_colors---secondary-400);
}
.demo-ticket_vide { font-size: 13px; line-height: 1.4; color: var(--_colors---primary-300); }
.demo-ticket_article {
  display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; row-gap: 2px; align-items: baseline;
  margin: -4px -6px; padding: 4px 6px; border-radius: var(--_sizes---spacing--bordar-redius--redius-xxsmall);
  animation: demo-article .5s cubic-bezier(.22, .61, .36, 1) both, demo-surligne 1.6s ease-out both;
}
.demo-ticket_qte {
  min-width: 14px; padding: 1px 5px; border-radius: var(--_sizes---spacing--bordar-redius--redius-xxsmall);
  background: var(--_colors---primary-400); font-size: 12px; font-weight: 500; line-height: 1.4; text-align: center; font-variant-numeric: tabular-nums;
}
.demo-ticket_nom { font-size: 15px; line-height: 1.35; }
.demo-ticket_detail { grid-column: 2 / 4; font-size: 13px; line-height: 1.35; color: var(--_colors---primary-300); }
.demo-ticket_montant { font-size: 15px; line-height: 1.35; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-ticket_pied { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--_colors---secondary-400); }
.demo-ticket_ligne-pied { display: flex; justify-content: space-between; font-size: 14px; color: var(--_colors---primary-300); animation: demo-article .5s cubic-bezier(.22, .61, .36, 1) both; }
.demo-ticket_total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.demo-ticket_total .demo-ticket_montant { font-size: 18px; }
.demo-ticket_confirme { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; line-height: 1.35; color: #389765; animation: demo-article .5s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes demo-article { from { opacity: 0; transform: translateY(8px); } }
@keyframes demo-surligne { from { background-color: rgba(120, 29, 255, .09); } to { background-color: rgba(120, 29, 255, 0); } }
.demo-connecte_commande { color: var(--_colors---primary-200); font-variant-numeric: tabular-nums; }
@media (max-width: 1199px) { .demo-ticket { display: none; } }
@media (min-width: 1200px) { .demo-connecte_commande, .demo-connecte_sep--commande { display: none !important; } }

/* L'état de l'agent (« Listening », « Thinking », « Speaking ») : le mot change en fondu, le point bat quand il écoute */
.demo-etat-texte.demo-change { animation: demo-etat .45s cubic-bezier(.22, .61, .36, 1); }
@keyframes demo-etat { from { opacity: 0; filter: blur(3px); } }
.demo-live[data-demo-etat="ecoute"] .taking-block .dot { animation: demo-pouls 1.4s ease-in-out infinite; }
@keyframes demo-pouls { 50% { transform: scale(1.6); opacity: .55; } }

/* « End Call » */
.demo-fin {
  display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  position: absolute; z-index: 1; padding: 0 20px; border: 0; border-radius: 60px; cursor: pointer; white-space: nowrap;
  background: var(--_colors---primary-100); color: var(--_colors---secondary-100);
  font-family: Inter, sans-serif; font-weight: 500; font-size: 16px; line-height: normal; letter-spacing: -0.64px;
  animation: demo-apparait .5s cubic-bezier(.22, .61, .36, 1) .2s both;
}
.demo-fin:focus-visible { outline: 2px solid var(--_colors---brand-100); outline-offset: 3px; }
.demo-fin_icone { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 100px; background: #f14b4f; flex: none; }
.demo-fin_icone img { display: block; transform: rotate(135deg); }
.demo-live .experience-bottom { position: relative; } /* le repère de « End Call » ; déjà transformé par Webflow, rien ne change au repos */
.demo-live.demo-en-appel [data-demo="demarrer"] { visibility: hidden; }
/* L'écran de fin d'appel : tout reste en place, « Talk to the Agent » revient pour rappeler, la pastille passe au gris */
.demo-live.demo-en-appel.demo-fini [data-demo="demarrer"] { visibility: visible; }
.demo-live.demo-fini .demo-connecte_etat { color: var(--_colors---primary-300); transition: color .6s ease; }
.demo-live.demo-fini .demo-connecte_etat img { filter: grayscale(1) opacity(.6); }
.demo-live.demo-fini .demo-connecte_temps { color: var(--_colors---primary-300); }
.demo-ticket.demo-ticket--interrompu .demo-ticket_statut { color: var(--_colors---primary-300); background: var(--_colors---primary-400); }
.demo-ticket.demo-ticket--interrompu .demo-ticket_statut .demo-ticket_point { animation: none; }
.demo-live [data-demo="demarrer"].demo-revient { animation: demo-apparait .5s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes demo-apparait { from { opacity: 0; transform: translateY(6px); } }

/* Le site met toutes les images à 100 % de largeur (règle générale du gabarit) : les pièces de la démo gardent leur
   taille de maquette. */
.demo-live .demo-connecte img, .demo-live .demo-fin_icone img { width: auto; height: auto; max-width: none; max-height: none; object-fit: fill; }
.demo-live .demo-connecte_etat img { width: 4px; height: 4px; }
.demo-live .demo-connecte_sep { width: 1px; height: 13px; }
.demo-live .demo-fin_icone img { width: 12px; height: 12px; }

/* L'orbe en métal liquide (js/soleir-orbe.js) se pose exactement sur la vidéo, qui garde sa place (cachée) et donne
   donc toujours la même taille, réduite avec l'écran : rien ne bouge autour. Fond transparent hors du cercle : le trait
   de liaison qui passe dans le carré reste visible. Au repos : figée, aux couleurs de la petite orbe du bandeau ; avec
   l'appel, les couleurs et les halos changent selon l'état (pilotés par le script). */
.demo-live .lottie-animation.orbe-active { position: relative; }
.demo-live .lottie-animation.orbe-active video { visibility: hidden; }
.demo-live .orbe-metal { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1 / 1; will-change: transform; }
.demo-live .orbe-metal > div { position: absolute; inset: 0; }
.demo-live .orbe-metal_halo { border-radius: 50%; filter: blur(18px); transform: scale(.8); }
.demo-live .orbe-metal_halo--fond { /* les trois couleurs de l'orbe Figma (nœud 2164:466), en lueur douce — éteinte au repos */
  opacity: 0;
  background:
    radial-gradient(circle at 73% 27%, rgba(255, 43, 145, .26) 0%, rgba(255, 43, 145, 0) 55%),
    radial-gradient(circle at 40% 37%, rgba(110, 145, 245, .3) 0%, rgba(110, 145, 245, 0) 60%),
    radial-gradient(circle at 64% 72%, rgba(255, 200, 142, .4) 0%, rgba(255, 200, 142, 0) 50%);
}
.demo-live .orbe-metal_halo--bleu {
  opacity: 0; background: radial-gradient(circle closest-side, rgba(110, 145, 245, .5) 0%, rgba(150, 175, 248, .32) 62%, rgba(245, 247, 250, 0) 100%);
}
.demo-live .orbe-metal_halo--rose {
  opacity: 0; background: radial-gradient(circle closest-side, rgba(255, 43, 145, .42) 0%, rgba(255, 170, 210, .32) 62%, rgba(245, 247, 250, 0) 100%);
}
/* Les couleurs, en mode « couleur », limitées au cercle du métal. Le dégradé = l'orbe de la maquette Figma (nœud
   2164:466 : trois ellipses floues, rose #FF2B91 en haut à droite, par-dessus le bleu #6E91F5 en haut à gauche, par-dessus
   la pêche #FFC88E en bas à droite), ses positions reportées sur le cercle du métal (20 % → 80 % du carré). */
.demo-live .orbe-metal_teinte {
  mix-blend-mode: color;
  -webkit-mask: radial-gradient(circle closest-side, #000 59.8%, transparent 60%);
  mask: radial-gradient(circle closest-side, #000 59.8%, transparent 60%);
}
.demo-live .orbe-metal_teinte--degrade {
  opacity: .9;
  background:
    radial-gradient(circle at 73% 27%, #ff2b91 0%, rgba(255, 43, 145, 0) 36%),
    radial-gradient(circle at 40% 37%, #6e91f5 0%, rgba(110, 145, 245, 0) 42%),
    radial-gradient(circle at 64% 72%, #ffc88e 0%, rgba(255, 200, 142, 0) 30%),
    #9e86d9;
}
.demo-live .orbe-metal_teinte--unie { opacity: 0; }